Pular para o conteúdo principal

JS - Javascript no browser

A partir de agora vamos ver exemplos de como usar nosso código Javascript em páginas web, hoje veremos as possibilidades para isso e também aproveitaremos o momento para exemplificar a questão do escopo de variáveis.

Estrutura minima do html

Sabemos que a estrutura base para uma página web são as tags "html", dentro dela "head" e "body", nosso código Javascript deve estar na tag "script".

A tag "script" pode ser incluída tanto dentro da tag "head" quanto dentro da tag "body", a diferença é que, quando nosso código estiver na "head" ele será carregado antes do conteúdo da página e quando nosso código estiver no "body" primeiro serão carregados os elementos "html" para em seguida nosso Javascript ser carregado.

Como podemos imaginar o forma mais indicada atualmente é a inclusão no "body", pois caso nossos scripts sejam "pesados" eles não impactarão no carregamento de nossa página.

Bom, afirmamos que nosso código Javascript vai na tag "script", podemos tanto digitar nosso código dentro da tag como podemos realizar uma referencia a um arquivo externo, sendo mais indicado a última forma, pois assim temos uma organização melhor, podendo dividir nosso código em arquivos diferentes, de acordo com seu propósito.

Para exemplificar, criaremos um arquivo "index.html", um diretório "js" e dentro desse diretório criaremos o "main.js" e o "exemplo.js". No "index.html" teremos a estrutura base de uma página e a importação desses dois arquivos de script (atentar para o detalhe da importação do script, que se dá por meio da propriedade "src" da tag "script"):



Exemplificando o escopo

Na postagem sobre IIFE - immediatley-invoked function expression nós vimos as funções autoexecutáveis e ressaltamos sua importância para proteger o escopo de variáveis, agora veremos isso na prática, primeiro criaremos uma variável no script "main.js" e mostraremos seu conteúdo no script "exemplo.js", como resultado o valor atribuído em uma classe estará disponível na outra classe, e pior, podemos alterar esse valor na outra classe:

Em "main.js"

console.log('main.js');
var nome = 'Teresa';
console.log('main.js''nome'nome);

Em "exemplo.js"

console.log('exemplo.js');
console.log('exemplo.js''nome'nome);
nome = 'Adamastor';
console.log('exemplo.js''nome'nome);

Como resultado


Como podemos ver, as consequências para isso podem ser catastróficas, podemos ter variáveis de um script sendo alteradas em outro e quando menos percebermos teremos uma série de anomalias no comportamento de nossa aplicação e teremos dificuldades para a solução.

Resolvendo o problema do escopo

Simples, basta usarmos o conceito da IIFE, nossas funções autoexecutáveis protegerão nossas variáveis e o problema de escopo estará resolvido:

Em "main.js"

(function() {
    console.log('main.js');
    var nome = 'Teresa';
    console.log('main.js''nome'nome);
})();

Em "exemplo.js"

(function() {
    console.log('exemplo.js');
    nome = 'Adamastor';
    console.log('exemplo.js''nome'nome);
})();

Como resultado



Podemos concluir, com tudo que foi visto aqui, que devemos escrever nosso código Javascript em arquivos a parte da página, que devemos importar esses arquivos na tag "script", e que a tag "script" deve estar dentro da tag "body" e que devemos mais do que nunca usar o conceito da IIFE para evitar problemas de escopo.

Comentários

Mais visitadas

Funções de data Oracle

  Com o Oracle é possível obter uma série de resultados a partir de uma ou mais datas, como por exemplo verificar o último dia do mês ou verificar a quantidade de meses entre duas datas, então vamos a alguns exemplos:   Data atual do sistema: SYSDATE Remover meses de uma data: ADD_MONTHS(SYSDATE, -1) Adicionar meses de uma data: ADD_MONTHS(SYSDATE, +1) Buscar o último dia do mês: LAST_DAY(SYSDATE) Primeiro dia do mês: TRUNC(SYSDATE, ‘MONTH’) Quantidade de meses entre duas datas: MONTHS_BETWEEN(SYSDATE, ‘27/07/1982’) Primeiro dia do ano: TRUNC(SYSDATE, ‘YEAR’) Dias da semana: DECODE( TO_NUMBER( TO_CHAR          (SYSDATE, ‘D’) ) ,1, ‘domingo’ ,2, ‘segunda-feira’ ,3, ‘terça-feira’ ,4, ‘quarta-feira’ ,5, ‘quinta-feira’ ,6, ‘sexta-feira’ ,7,’sábado’ )

Como Verificar se um Objeto Existe (Delphi)

Em alguns momentos surge a necessidade de verificar se um determinado objeto existe, ou seja se já foi criado, principalmente quando se trabalha com criação dinâmica em tempo de execução, então vamos ao exemplo: - Vamos criar uma variável, um vetor do tipo caixa de texto: var Minha_caixa : array of TEdit; - Em seguida definir o tamanho desse vetor, no caso será dez: setLength(Minha_caixa, 10) - Agora iremos criar nossa caixa de texto: // lembrando que o vetor inicia em zero // logo o índice final é o tamanho total - 1 for vl_i := 0 to Length(Minha_caixa) -1 do begin Minha_caixa[vl_i] := TEdit.Create(self); with Minha_caixa[vl_i] do begin Parent := Self; Name := 'Caixa_N'+IntToStr(vl_i); Text := 'Esta é a '+IntToStr(vl_i)+' º caixa !'; ReadOnly := true; Height := 21; Width := ...

Manipular arquivos com PL/SQL (Oracle)

O bom e velho arquivo, é impressionante como lidamos com seus vários tipos durante todos os dias, bom hoje vamos mostrar um jeito simples de se escrever e ler arquivos apenas com a codificação nativa do Oracle. A primeira coisa a fazer é criar um diretório válido configurado no Oracle, e permissões de acesso a esse diretório para o usuário de banco onde faremos o exemplo, sendo assim suponhamos que nosso usuário de banco se chame programero, e nosso diretório real esteja em c:\programero, então logado como SYSTEM devemos executar os seguintes comandos: 1: -- cria diretorio 2: create or replace directory DIR_PROGRAMERO as ' C:\PROGRAMERO '; 3: -- concede permissão de escrita e leitura para nosso usuário 4: grant read , write on directory DIR_PROGRAMERO to PROGRAMERO; Para escrever, basicamente precisamos apenas saber onde esse arquivo ficará, no nosso caso no diretório criado acima, segue o código de escrita: 1: declare 2: -- nosso handler 3: v_a...