You are on page 1of 9

JavaScript - Artigos Vavafox

Introduo
O Javascript uma linguagem client-side, ou seja, ela trabalha (roda, funciona) do lado do cliente, o que significa dizer, que ela no executada no servidor e sim no browser, ao contrrio de algumas linguagens como o PHP, ASP, JSP, .NET, entre outras. Com a inteno de tornar as pginas da web mais dinmicas, em 1995 Brendan Eich, programador da Netscape (Empresa que sentiu a necessidade da criao) inseriu no mercado o LiveScript, que em Dezembro de 1995, mudou o nome para JavaScript seu nome atual.

Informaes Importantes
Para que serve o JavaScript, com est linguagem possvel a validao de formulrios, ler e inserir contedo em uma pgina, criar cookies, menus dinmicos e diversos outros recursos. E os principais browsers do mercado com suporte a est linguagem so Firefox, Mozilla, Opera, Netscape, Safari, Internet Explorer entre outros.

Inserindo o cdigo JavaScript


Para inserirmos o JavaScript em uma pgina HTML, fazemos uso da tag <script> e do atributo type com o valor: text/javascript. Veja o Exemplo; <script type="text/javascript"> cdigos.... </script> Utilizando type="text/javascript" o browser entender que no contedo dessa tag h comandos JavaScript. Existem trs maneiras de inserirmos o JavaScript em uma pgina HTML, Exemplo: um arquivo externo -.js, no head, no body ou utilizando os trs de uma s vez. 1- Exemplo: Arquivo Externo. head> <script type="text/javascript"src="externo.js"></script> </head> Atravs do atributo src da tag <script>, indicamos a localizao do arquivo externo, para que assim o browser possa localiz-lo e execut-lo. Tornando Facilidade na manuteno, Carregamento mais rpido da pgina, Semntico. Dessa maneira no utilizamos a tag <script>, somente os cdigos.

2- Exemplo: Head da pgina. <head> <script type="text/javascript"> Cdigos... </script> </head> Os cdigos JavaScript localizado no head da pgina so executados ao serem chamados, ou seja, quando algum evento for provocado, como o evento onclick, onmouseover, onload, entre outros. 3- Exemplo: Body da pgina. <body> <script type="text/javascript"> Cdigos... </script> </body> Os cdigos inseridos no body da pgina so inicialmente executados enquanto a pgina carregada mas tambm podem ser chamados quando algum evento for provocado.

Tag <noscript>
A tag <noscript> nos permite disponibilizar um contedo alternativo ao disposto via script. Isso significa dizer que, se o usurio no tiver suporte ao JavaScript em seu browser, ele ver o contedo inserido dentro dela. <script type="text/javascript"> alert("Estou aprendendo javascript"); </script> <noscript> <p>Estou aprendendo JavaScript.</p> </noscript>

Inserindo Comentrios
Existem duas maneiras de inserir os comentrios, so elas: // e /* */. O primeiro o comentrio de uma linha somente, enquanto o segundo suporta vrias. <script type="text/javascript"> // Comentrios 1 linha. /* Voc pode querer inserir um comentrio em vrias linhas, dessa maneira. */ </script> Um detalhe importante que no podemos esquecer, a utilizao do comentrio em HTML ao utilizar cdigos JavaScript in-line (disposto no head ou body). Voc deve fazer igual o exemplo abaixo;

<head> <script type="text/javascript"> <!-cdigos... //--> </script> </head> Os browsers que no suportam o JavaScript iro exibi-lo como se fosse parte do contedo da pgina. Para prevenir essa prtica, se faz necessrio utilizar o comentrio em HTML.

Detalhes Importantes
O JavaScript "case sensitive", o que significa dizer, que o interpretador diferencia minsculas de maisculas. Veja um exemplo; <script type="text/javascript"> <!-var txtFrase = "Bem vindos ao meu Site."; alert(txtfrase); // Erro gerado. //--> </script> No exemplo acima, gostaramos de exibir atravs do alert a mensagem armazenada na varivel txtFrase (no se preocupe, voc aprender sobre variveis ainda), mas como chamamos a varivel por txtfrase, o JavaScript no a encontrou no cdigo, causando um erro - txtfrase is not defined. Em JavaScript a utilizao do ; (ponto e vrgula) quase que opcional. Digo quase, porque se voc dispor de duas declaraes de cdigo na mesma linha, precisar do ; (ponto e vrgula). Veja um exemplo; alert("Bom dia..."); alert("Sejam bem vindos"); alert("Bom dia") alert("Sejam bem vindos")

Variveis
Na informtica, uma varivel um endereo de memria RAM (Randomic Acess Memory), onde so armazenadas informaes temporariamente; sendo que essas informaes podem ser alteradas no decorrer do tempo. Vejamos um exemplo de como declarar uma varivel; var nomeVariavel = "valorVariavel"; ou nomeVariavel = "valorVariavel"; Deve-se iniciar o nome de uma varivel com uma letra ou com um sublinhado (_). Variveis globais e locais

Os nomes global e local so bem explicativos. Vamos compreend-los bem, pois so de grande importncia. Quando criamos uma varivel dentro de uma funo, a tornamos local, ou seja, acessvel somente dentro da funo em que foi criada. Podemos at criar outras variveis com o mesmo nome e com valores diferentes, porm elas tero validade somente dentro da funo em que foi declarada. J as variveis globais, so declaradas fora das funes e ficam acessveis a toda e qualquer funo na pgina em que a varivel esteja.

Operadores
Operadores so smbolos utilizados para atuar sobre valores. Conheceremos os diferentes operadores utilizados no JavaScript.

Operadores Aritmticos
Adio "+" Subtrao "-" Multiplicao "*" Diviso "/" Mdulo Restante da diviso "%" Incrementos "++" Decrementos "--"

Operadores de comparao
igual a "==" igual a (compara valor e tipo "===" No igual "!=" maior que ">" menor que "<" maior que ou igual a ">=" menor que ou igual a "<="

Operadores lgicos
E "&&" Ou "||" No "!"

Operadores de atribuio
"=" o mesmo que "x=y" "+=" o mesmo que "x=x+y" "-=" o mesmo que "x=x-y" "*=" o mesmo que "x=x*y" "/=" o mesmo que "x=x/y" "%=" o mesmo que "x=x%y"

Operador condicional

Operador condicional aquele que atribui um valor a uma determinada varivel com base em uma condio, ou seja, se a condio for verdadeira, teremos um valor x, caso contrrio um valor y. var nome = "Paulo"; var Idade = (nome == "Paulo") ? "Tem 25 anos" : "No conheo est pessoa.";

Condies
Declaraes condicionais no JavaScript, assim como em outras linguagens, so utilizadas para executar diferentes aes baseadas em determinadas condies.

Declaraes Condicionais
Em JavaScript temos as seguintes declaraes condicionais:

Declarao if
Utilizamos essa declarao quando necessitamos que somente uma parte do cdigo seja executada e quando uma determinada condio for verdadeira. Sintaxe: if (condio) { //cdigo executado se a condio for verdadeira. } Exemplo Prtico; var estado = "SP"; if(estado=="SP"){ alert("Terra da garoa"); }

Declarao if...else
Utilizamos essa declarao para que somente uma parte do cdigo seja executada quando determinada condio for verdadeira e, outra parte, quando a condio for falsa. Sintaxe; if (condio){ //cdigo executado se a condio for verdadeira. }else{ //cdigo executado se a condilo for falsa. } Exemplo Prtico; var estado = "SP"; if(estado == "SP"{

alert("Terra da garoa"); }else{ alert("No a terra da garoa"); }

Declarao if...else if...else


Utilizamos essa declarao quando desejamos selecionar um bloco de cdigo entre vrios outros. Sintaxe: if (condio 1){ //cdigos executados se a codio for verdadeira }else if (condio 2){ //cdigos executados se a 2 codio for verdadeira }else{ //cdigos executados de nenhuma das codies forem verdadeiras } Exemplo Prtico: var estado = "SP"; if(estado == "SP"){ alert("Terra da Garoa"); }else if(estado == "MG"){ alert("Terra do Queijo"); }else{ alert("Informe o Estado SP ou MG"); }

Declarao switch
Utilizamos tambm essa declarao quando desejamos selecionar um bloco de cdigo entre vrios outros. uma forma mais prtica para alguns casos. Sintaxe: switch(expresso){ case valor 1: //cdigos executados se expresso = valor 1; break case valor 2: //cdigos executados se expresso = valor 2; break default: //cdigos executados se a expresso for diferente dos valores 1 e 2; } Exemplo Prtico: var estado = "SP"; switch(estado){ case "SP": alert("Terra da Garoa");

break case "MG": alert("Terra do Queijo"); break default: alert("Informe o Estado SP ou MG"); }

Alertas Popup Boxes


Popup boxes no JavaScript nos permitem alertar o usurio sobre algum acontecimento, pedir-lhe uma confirmao para que uma determinada ao possa ser executada e pedir-lhe que nos informe algum dado. Assim, podemos criar trs tipos de popup boxes. So eles: Alert box, Confirm box e Prompt box. Vamos conhecer cada um deles.

Alert box
alert(" muito bom aprender JavaScrip"); Esse tipo de popup box tem o objetivo de alertar o usurio sobre algo que ocorreu durante alguma ao por ele executada. Um boto de OK exibido junto a ela. Para prosseguir com a navegao necessrio que o usurio clique nesse boto.

Confirm box
confirm("Voc acha legal aprender JavaScript"); Com o Confirm Box, podemos ter a certeza se o usurio deseja ou no executar determinada ao, uma vez que esse box exibe dois botes: OK e Cancel. Ao clicar em OK o box retorna true e ao clicar em Cancel o box retorna false.

Prompt box
Sem sugesto de resposta; prompt("O que voc est aprendendo neste artigo?",""); Com sugesto de resposta; prompt("O que voc est aprendendo neste artigo","JavaScript"); Ambos possuem a mesma caracterstica e funo: solicitar uma informao do usurio. Porm, eles se diferenciam por um nico detalhe: o segundo prompt box exibe uma sugesto de resposta, j o primeiro no.

Exemplo Prtico; <script type="text/javascript"> <!-function msgEntrada(){ var msg = confirm("Bem vindo"); if(msg){ var nome = prompt(Por favor, digite seu nome?,""); if(nome != null && nome != ""){ alert("Ol " +nome+ " ,seja bem vindo"); } } } //-->

Loops
As declaraes de looping em JavaScript, assim como em outras linguagens, tem por objetivo a execuo de um mesmo bloco de cdigo por uma determinada quantidade de vezes ou enquanto uma condio for verdadeira. Neste tpico conheceremos as declaraes de looping:

Declarao for
Looping que percorre determinado bloco de cdigo por uma quantidade especificada de vezes.

Declarao while
Looping que percorre determinado bloco de cdigo se e enquanto a condio for verdadeira.

Declarao do...while
Esse loop uma varivel do loop while. Ele sempre executar um bloco de cdigo uma vez e o repetir enquanto a condio for verdadeira. Mesmo que uma condio seja falsa, esse loop ocorrer uma vez pois a condio verificada aps a execuo.

Declarao break e continue


So declaraes especiais para se trabalhar com looping. O break interrompe o looping e prossegue com o restante do cdigo (se houver). O continue pra o loop atual e continua com o prximo valor. Voc entender melhor nos exemplos abaixo.

Loop for
Sintaxe;

for(var=valorInicial; var<=valorFinal; var + incremento){ cdigo executado... } Exemplo Prtico; var numero = 1; for(numero = 1; numero <= 10; numero ++){ alert("O nmero atual"+numero); } No exemplo acima temos a varivel numero que inicia com 1 e em seguida um loop for que funciona da seguinte maneira: temos o valor inicial (1) e o valor final (10) para a varivel numero, seguido de um incremento (++). Isso significa dizer que o loop iniciar com a varivel numero com o valor 1 e finalizar quando ela alcanar um valor menor ou igual a 10. http://vavafox.50webs.com/Tutorial_Javascript.html

You might also like