JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um arquivo externo.a grande vantagem em se usar um arquivo de script externo é poder utilizar o mesmo script em várias páginas sem a necessidade de reescrevê-lo. Vamos utilizar algumas técnicas básicas, aprenderemos a alterar determinado conteúdo da nossa página, criar alguns eventos e mensagens, etc. Inicialmente iremos criar nosso arquivo de script, todo procedimento pode ser feito no bloco de notas. Abra o bloco de notas e salve o arquivo com a extensão "js", arquivo/salvar como/ todos os arquivos/ MeuScript.js``. Salve seu script na mesma pasta de seu arquivo HTML, não é uma regra, mas torna mais prático o seu uso. No seu HTML dentro da tag " <head> " link o arquivo javascript <script src="meuscript.js" type="text/javascript" CHARSET="ISO-8859-1"> </script> A tag SCRIPT`` indica q vamos usar script, src="meuscript.js" seta onde está localizado nosso arquivo de script, type="text/javascript" indica o tipo de arquivo que vamos usar e CHARSET="ISO-8859-1" configura a acentuação correta em nossas mensagens e strings.
Array ou vetor, é um conjunto finito de elementos disposto ordenadamente. O vetor é muito útil em programação, pois nos permite economizar tempo escrevendo código e é de fácil implementação. Imagine que você precisa declarar uma variável para guardar o nome de uma pessoa e seu programa precisa do nome de cinco pessoas, poderia então declarar da seguinte forma: pessoa1, pessoa2, pessoa3, pessoa4 e pessoa5. O exemplo que citei é de forma genérica, pois a forma que se declara uma variável depende muito da linguagem de programação escolhida. O exemplo é uma forma simples de declararmos as variáveis, mas se o seu programa precisasse não de 5 mas de 1000 nomes diferentes? Você iria seguir dessa forma também(pessoa1, pessoa2,...pessoa999 e pessoa1000)? Já imaginou o quanto teria que escrever nome de variável? Existe uma forma mais prática de fazermos isso, usando os vetores: vetor pessoa(1000); Criamos dessa forma 1000 variáveis de nome pessoa e seguida de seu índice, ficaria da seguinte forma: pessoa[0],pessoa[1]...pessoa[998] e pessoa[999]. Nosso índice começa em 0(zero) e termina em 999 totalizando 1000. Bem prático e rápido. Uma outra utilidade dos vetores, seria armazenar informações sobre um determinado objeto, podemos usar cada índice desse vetor para guardar as informações pertinentes a esse objeto. Vou apresentar um exemplo em JavaScript da utilização de vetores. Precisamos vender um carro usado, iremos anunciar na internet afim de divulgar nossa venda. Temos que guardar informações sobre o veículo, tais como, cor, ano de fabricação, ano modelo, fabricante, modelo, combustível, quilometragem e foto do carro. Temos 8 informações para guardar, logo poderemos criar um vetor com 8 elementos. var carro = new Array(8); carro[0] = 'vermelho'; carro[1] = 2009; carro[2] = 2010; carro[3] = 'fiat'; carro[4] = 'siena';
carro[5] = 'gasolina/álcool'; carro[6] = '40.000 km'; carro[7] = 'siena.jpg'; (este campo deve ser guardado o local e o nome da foto, se colocarmos apenas o nome do arquivo o navegador vai entender que o arquivo esta na mesma pasta que a página) Outro ponto a ser observado é que quando queremos guardar informações numa variável devemos atentar ao tipo da informação, se for do tipo string( símbolos, letras, todos os tipos de caracteres) vamos atribuir seu valor dentro de aspas, ex.: 'vermelho'. Se for do tipo numérico será atribuído o valor sem aspas ex.: 2009. Matriz ( array de array ou vetor de vetor) uma forma simples de definir uma matriz, seria colocá-la como um vetor de vetores, ou seja um conjunto finito de vetores dispostos ordenadamente. Digamos que ao invés de 1, precisamos vender 5 carros em JavaScript poderíamos prosseguir da seguinte forma: var carro = new Array(5); for (i=0;i<=4;i++){ carro[i]= new Array(8); Desse modo usamos um loop para definir a matriz, vamos analisar o que foi feito. 1º declaramos um vetor carro de 5 índices, depois criamos um loop que começa em 0(zero) e termina em 4 e damos a cada evento desse loop uma atribuição ao vetor carro, mais um vetor, porém com a quantidade de índices para colocarmos as informações pertinentes aos nossos veículos. Vamos entender o loop: for (i=0; i<=4; i++) i=0; (i recebe 0) inicializamos a variável i com o valor zero; i<=4; (i menor ou igual a 4) comparamos a variável i com o número 4, essa parte é a condição do loop, quer dizer q todos os comandos no interior do loop serão executados enquanto essa comparação for verdadeira, nesse caso quando i valer 5 o loop para e nosso programa segue para a parte após o loop.
i++ faz o incremento da variável i, ou seja pega o valor atual de i e soma 1, começamos nosso loop com i valendo 0, quando executa os comandos ele incrementa i afim de tornar seu valor maior, pois se continuar valendo 0, jamais será superior a 4, portanto, irá sempre retornar um valor verdadeiro na comparação com 4 e ficará dentro do loop para sempre(melhor dizendo, até seu processador não suportar o processamento envolvido e sua máquina parar de responder), é o que chamamos de loop infinito, e é sempre bom evitá-lo. Para usar o array ou a matriz no seu html use o document.write() ou innerhtml que serão apresentados mais a frente. EX.: document.write("<p>"+carro[0]+"</p>"); Vamos botar a mão na massa e aprender alguns truques com JavaScript. 1º crie um arquivo html e deixe-o da seguinte forma: ------------------------------------------------------------------------------------------------------------------- <html> <head> <script src="meuscript.js" type="text/javascript" CHARSET="ISO-8859-1"> </script> <title> Carros usados </title> </head> <body bgcolor= silver> <table border=3 bordercolor=navy width=80% height= 50% align=center> <tr><td height=15%><input type='button' value='carros' /></td></tr> <tr><td id='carros'></td></tr> </table> </body> </html> -------------------------------------------------------------------------------------------------------------------
Nosso 1º passo vai ser adicionar uma imagem dentro da tabela assim que o botão for pressionado. Vamos editar nosso arquivo de script, aquele que criamos no inicio dessa apostila, MeuScript.js. Coloque esta função dentro do script: function fotos(){ document.getelementbyid('carros').innerhtml="<img src='siena.jpg'>"; Essa é a nossa função para alterar o interior da tabela; document acessa a página atual. getelementbyid pega um elemento pelo seu Id( no nosso exemplo é uma td da tabela, <td id='carros'>). innerhtml modifica o conteúdo do elemento que acabamos de pegar através do Id. "<img src='siena.jpg'>" é o conteúdo que iremos mostrar dentro do elemento quando chamarmos a função fotos. Poderíamos colocar qualquer conteúdo dentro do elemento, só necessitaríamos alterar o conteúdo, tente colocar links, caixas de texto, botões e labels dentro da tabela usando essa função. Outra função útil pra nós é document.write("conteúdo"); com ela podemos criar funções e definir o conteúdo da nossa página, contudo há de se ter cuidado quando a usar, pois poderá reescrever toda a página. No seu arquivo de script crie uma nova função: function info(){ document.write("<a href='http://www.google.com.br'> Google</a>"); Agora modifique a sua tabela deixe-a assim: <table border=3 bordercolor=navy width=80% height= 50% align=center> <tr><td height=15%><input type='button' value='carros' onclick='info()' /></td></tr> <tr><td id='carros' style='border:0px;vertical-align:top;'></td></tr>
</table> A parte em vermelho é onde colocamos nossa função, salve e abra a página no seu navegador veja o resultado... Modifique novamente sua tabela, agora ela fica dessa forma: <table border=3 bordercolor=navy width=80% height= 50% align=center> <tr><td height=15%><input type='button' value='carros' onclick='fotos()' /><script> info(); </script></td></tr> <tr><td id='carros' style='border:0px;vertical-align:top;'></td></tr> </table> Veja nossa função destacada, repare a existência da tag script, seu uso é necessário para a nossa função funcionar na parte onde foi colocada, agora salve e teste. Percebeu a diferença? Agora use a imaginação para encontrar meios criativos de usar esta função. Vamos agora aprender a abrir uma janela centralizada a partir de um link. Crie uma página simples que servirá ao nosso exemplo: ------------------------------------------------------------------------------------------------------------------- <html> <head> <title>teste </title> </head> <body> <center> <h1> Pagina de teste </h1><br> </body> </html> <input type='button' name='fechar' value='fechar' onclick='self.close()' /> </center>
------------------------------------------------------------------------------------------------------------------- Salve na pasta onde salvou os outros arquivos, salve com o nome popup.html, agora no seu arquivo de script crie esta função: function abrir(meuhtml,w,h){ var topo=(screen.height-h) /2; // pega o comprimento do monitor subtrai o comprimento da página(h) e divide o resultado por 2. var lateral=(screen.width-w) /2; // pega a largura do monitor subtrai a largura da página(h) e divide o resultado por 2. win= window.open(meuhtml,'_blank','width='+w+',height='+h+',top='+topo+',left='+lateral); return false; /* abre a nova página o parametro meuhtml é a página que desejamos abrir '_blank' diz que queremos em nova janela 'width='+w+',height='+h+',top='+topo+',left='+lateral estamos setando a largura, comprimento, posição da janela em relação ao topo do monitor e posição da janela em relação a lateral esquerda do monitor. */ Agora coloque na sua página principal um link.. <a href= "popup.html" onclick='abrir(this.href, 350,550); return false;' > teste</a> Agora faça o teste e veja o resultado... Termino por aqui esta 1ª parte, bons estudos!