PROGRAMAÇÃO WEBPROGRAMAÇÃO WEBAULA 04AULA 04

Prof. Gustavo LinharesProf. Gustavo Linhares

28/10/200928/10/2009

Instituto Federal de Educação, Ciência e Tecnologia do Norte de Minas Gerais.

JavaScript

JavaScriptJavaScript

o Javascript é uma linguagem client-side, o Javascript é uma linguagem client-side, ou seja, ela trabalha (ou seja, ela trabalha (roda, funcionaroda, funciona) do ) do lado do cliente, o que significa dizer, que lado do cliente, o que significa dizer, que ela não é executada no servidor e sim no ela não é executada no servidor e sim no browser, ao contrário de algumas browser, ao contrário de algumas linguagens como o PHP, ASP, JSP, .NET, linguagens como o PHP, ASP, JSP, .NET, dentre outras. dentre outras.

JavaScriptJavaScript não-obstrutivo não-obstrutivo O cliente tem total controle sobre o suporte a O cliente tem total controle sobre o suporte a

essa linguagem no browser utilizado, então lhe essa linguagem no browser utilizado, então lhe afirmo que ele pode desabilitar o funcionamento afirmo que ele pode desabilitar o funcionamento desse recurso. desse recurso.

Assim, o que desenvolvemos fica obsoleto e Assim, o que desenvolvemos fica obsoleto e inútil. inútil.

Por isso trabalharemos com o Por isso trabalharemos com o JavaScriptJavaScript não-obstrutivo não-obstrutivo, ou seja, se o cliente desabilitar , ou seja, se o cliente desabilitar o funcionamento dessa linguagem ou se ele não o funcionamento dessa linguagem ou se ele não tiver suporte a ela, ele utilizará nosso sistema tiver suporte a ela, ele utilizará nosso sistema normalmente, mas sem os recursos normalmente, mas sem os recursos desenvolvidos com a referida linguagem.desenvolvidos com a referida linguagem.

HistóricoHistórico

Como você pôde perceber, ela foi criada Como você pôde perceber, ela foi criada por alguém que desejava uma solução por alguém que desejava uma solução que trabalhasse internamente no browser que trabalhasse internamente no browser e, que ao mesmo tempo, pudesse e, que ao mesmo tempo, pudesse automatizar uma página da web ou torná-automatizar uma página da web ou torná-la mais dinâmica.la mais dinâmica.

HistóricoHistórico

Foi assim, que Brendan Eich, Foi assim, que Brendan Eich, programador da Netscape (programador da Netscape (empresa que empresa que sentiu a necessidade da criaçãosentiu a necessidade da criação), ), desenvolveu o JavaScript e a introduziu desenvolveu o JavaScript e a introduziu no mercado no ano de 1995. no mercado no ano de 1995.

HistóricoHistórico

Seu primeiro nome de batismo, em Seu primeiro nome de batismo, em setembro de 1995, foi LiveScript, como setembro de 1995, foi LiveScript, como parte do Netscape Navigator 2.0. Seu parte do Netscape Navigator 2.0. Seu novo e atual nome, JavaScript, apareceu novo e atual nome, JavaScript, apareceu em 4 de Dezembro de 1995. em 4 de Dezembro de 1995.

IntroduçãoIntrodução

Os principais browsers do mercado, Os principais browsers do mercado, FirefoxFirefox, , MozillaMozilla, , OperaOpera, , NetscapeNetscape, , SafariSafari, , Internet ExplorerInternet Explorer e outros mais, suportam e outros mais, suportam a linguagem JavaScript. Ela é utilizada a linguagem JavaScript. Ela é utilizada para a validação de formulários, ler e para a validação de formulários, ler e inserir conteúdo em uma página, criar inserir conteúdo em uma página, criar cookies, menus dinâmicos e diversos cookies, menus dinâmicos e diversos outros recursos. outros recursos.

Inserindo o JavaScript em uma Inserindo o JavaScript em uma página HTMLpágina HTML

Para inserirmos o JavaScript em uma Para inserirmos o JavaScript em uma página HTML, fazemos uso da tag página HTML, fazemos uso da tag <script><script> e do atributo type com o valor: e do atributo type com o valor: text/javascripttext/javascript. O que resultaria no . O que resultaria no seguinte:seguinte:

IntroduçãoIntrodução

<script type="text/javascript"><script type="text/javascript">

//códigos JavaScript//códigos JavaScript

</script> </script>

IntroduçãoIntrodução

Ao iniciarmos a tag Ao iniciarmos a tag <script><script>, dizemos o , dizemos o tipo de script utilizado tipo de script utilizado type="text/javascript"type="text/javascript" e assim o browser e assim o browser entenderá que no conteúdo dessa tag há entenderá que no conteúdo dessa tag há comandos JavaScript para serem comandos JavaScript para serem executados e os reconhecerão. executados e os reconhecerão.

Para finalizar a execução dos códigos Para finalizar a execução dos códigos usa-se o final da tag como usa-se o final da tag como </script></script>. .

Onde inserimos o JavaScript em Onde inserimos o JavaScript em uma página HTMLuma página HTML

Há três formas de inserirmos o JavaScript Há três formas de inserirmos o JavaScript em uma página HTML, são elas: um em uma página HTML, são elas: um arquivo externo arquivo externo -.js-.js, no head, no body ou , no head, no body ou utilizando os três de uma só vez. utilizando os três de uma só vez.

Vamos conhecer a peculiaridade de cada Vamos conhecer a peculiaridade de cada uma delas.uma delas.

Arquivo (script) externoArquivo (script) externoO arquivo externo é chamado desta O arquivo externo é chamado desta

forma:forma:

Onde inserimos o JavaScript em Onde inserimos o JavaScript em uma página HTMLuma página HTML

......<head><head>

<script type="text/javascript“<script type="text/javascript“src="externo.js">src="externo.js">

</script></script>

</head></head>... ...

Onde inserimos o JavaScript em Onde inserimos o JavaScript em uma página HTMLuma página HTML

Ou seja, através do atributo Ou seja, através do atributo srcsrc da tag da tag <script><script>, indicamos a localização do , indicamos a localização do arquivo externo, para que assim o browser arquivo externo, para que assim o browser possa localizá-lo e executá-lo. possa localizá-lo e executá-lo.

Em arquivos externos não utilizamos a tag Em arquivos externos não utilizamos a tag <script><script>, somente os códigos. , somente os códigos.

Vamos conhecer algumas das vantagens Vamos conhecer algumas das vantagens de se trabalhar dessa forma:de se trabalhar dessa forma:

VantagensVantagens

Facilidade na manutençãoFacilidade na manutenção Uma vez que o script está localizado em apenas um Uma vez que o script está localizado em apenas um

arquivo, facilita a edição ou correção dos códigos.arquivo, facilita a edição ou correção dos códigos. Carregamento mais rápido da páginaCarregamento mais rápido da página

O arquivo externo é armazenado no cache do O arquivo externo é armazenado no cache do navegador. Assim, evita-se carregá-lo toda vez que a navegador. Assim, evita-se carregá-lo toda vez que a página for chamada.página for chamada.

SemânticoSemântico O arquivo externo separa a camada de O arquivo externo separa a camada de

comportamento (JavaScript) da camada de conteúdo comportamento (JavaScript) da camada de conteúdo (HTML).(HTML).

Script no Script no headhead da página da páginaO script é inserido desta forma:O script é inserido desta forma:

......<head><head><script type="text/javascript"><script type="text/javascript">//códigos JavaScript//códigos JavaScript</script></script></head></head>... ...

Script no Script no headhead da página da páginaO script é inserido desta forma:O script é inserido desta forma:

Os códigos JavaScript localizado no head Os códigos JavaScript localizado no head da página são executados ao serem da página são executados ao serem chamados, ou seja, quando algum chamados, ou seja, quando algum eventoevento for provocado, como o evento onclick, for provocado, como o evento onclick, onmouseover, onload, dentre outros. onmouseover, onload, dentre outros.

Nessa forma o script é carregando antes Nessa forma o script é carregando antes de alguém utilizá-lo, ou seja, antes do de alguém utilizá-lo, ou seja, antes do carregamento do conteúdo do body.carregamento do conteúdo do body.

Script no body da páginaScript no body da página

O script é inserido desta forma:O script é inserido desta forma:

......<body><body><script type="text/javascript"><script type="text/javascript">//códigos JavaScript//códigos JavaScript</script></script></body></body>... ...

Script no body da páginaScript no body da página

Os códigos inseridos no body da página Os códigos inseridos no body da página são inicialmente executados enquanto a são inicialmente executados enquanto a página é carregada mas também podem página é carregada mas também podem ser chamados quando algum evento for ser chamados quando algum evento for provocado. provocado.

A tag <noscript>A tag <noscript>

A tag A tag <noscript><noscript> nos permite nos permite disponibilizar um conteúdo alternativo ao disponibilizar um conteúdo alternativo ao disposto via script. disposto via script.

Isso significa dizer que, se o usuário não Isso significa dizer que, se o usuário não tiver suporte ao JavaScript em seu tiver suporte ao JavaScript em seu browser, ele verá o conteúdo inserido browser, ele verá o conteúdo inserido dentro dela e, caso tenha suporte, o seu dentro dela e, caso tenha suporte, o seu conteúdo é omitido. conteúdo é omitido.

Veja um exemplo:Veja um exemplo:

<script type="text/javascript"><script type="text/javascript">alert("Parabéns, você está aprendendo alert("Parabéns, você está aprendendo JavaScript.");JavaScript.");</script></script>

<noscript><noscript><p>Parabéns, você está aprendendo <p>Parabéns, você está aprendendo JavaScript.</p>JavaScript.</p></noscript> </noscript>

A tag <noscript>A tag <noscript>

No exemplo acima será exibida a mensagem, No exemplo acima será exibida a mensagem, "Você está aprendendo JavaScript", através do "Você está aprendendo JavaScript", através do alertalert()() - - uma função do JavaScript que exibe uma função do JavaScript que exibe uma mensagem através de um popup boxuma mensagem através de um popup box - para - para quem tem suporte ao JavaScript. quem tem suporte ao JavaScript.

Caso contrário, mesma mensagem aparecerá Caso contrário, mesma mensagem aparecerá para quem não tem suporte ao JavaScript, para quem não tem suporte ao JavaScript, porém através da tag porém através da tag <noscript><noscript> na forma de na forma de texto. texto.

Veja as imagens: Veja as imagens:

Exemplo de uma mensagem via alert().

Exemplo de uma mensagem Exemplo de uma mensagem via <noscript> via <noscript>

Vantagem da tag <noscript>Vantagem da tag <noscript>

A tag A tag <noscript><noscript> é muito importante é muito importante quando se trata de acessibilidade, pois quando se trata de acessibilidade, pois oferece um conteúdo alternativo para os oferece um conteúdo alternativo para os usuários sem suporte à linguagem em usuários sem suporte à linguagem em questão. questão.

Comentários em JavaScriptComentários em JavaScript

Os comentários na linguagem JavaScript tem Os comentários na linguagem JavaScript tem função similar às demais linguagens, ou seja, de função similar às demais linguagens, ou seja, de explicar o que determinado comando faz, nota explicar o que determinado comando faz, nota de algum autor, lembretes, dentre outras. de algum autor, lembretes, dentre outras.

Tudo que estiver englobado pelos comentários é Tudo que estiver englobado pelos comentários é ignorado pelo interpretador do JavaScript.ignorado pelo interpretador do JavaScript.

Há dois tipos de comentários, são eles: Há dois tipos de comentários, são eles: //// e e /* *//* */. . O primeiro é o comentário de uma linha O primeiro é o comentário de uma linha somente, enquanto o segundo suporta várias.somente, enquanto o segundo suporta várias.

Observe os exemplos:Observe os exemplos:

<script type="text/javascript"><script type="text/javascript">// Isto é um comentário de uma linha.// Isto é um comentário de uma linha.

/* Isto é um comentário de várias linhas, e /* Isto é um comentário de várias linhas, e o interpretador ignora todo esse conteúdo. o interpretador ignora todo esse conteúdo. O que nos permite a criação de notas e O que nos permite a criação de notas e lembretes em nossos códigos. */lembretes em nossos códigos. */</script> </script>

Um detalhe importante que não podemos Um detalhe importante que não podemos esquecer, é a utilização do comentário em esquecer, é a utilização do comentário em HTML ao utilizar códigos JavaScript in-line HTML ao utilizar códigos JavaScript in-line ((disposto no head ou bodydisposto no head ou body). Antes de lhe ). Antes de lhe explicar a sua função, veja o exemplo: explicar a sua função, veja o exemplo:

......<head><head><script type="text/javascript"><script type="text/javascript"><!--<!--//códigos JavaScript//códigos JavaScript//-->//--></script></script></head></head>

... ...

Agora vamos compreender isso melhor. Os Agora vamos compreender isso melhor. Os browsers que não suportam o JavaScript irão browsers que não suportam o JavaScript irão exibi-lo como se fosse parte do conteúdo da exibi-lo como se fosse parte do conteúdo da página. Para prevenir essa prática, utilizamos o página. Para prevenir essa prática, utilizamos o comentário em HTML.comentário em HTML.

Porém, você pode se perguntar: Para que serve Porém, você pode se perguntar: Para que serve as duas barras (//) antes do fechamento do as duas barras (//) antes do fechamento do comentário? Bom, elas previnem que o comentário? Bom, elas previnem que o interpretador do JavaScript as interpretem.interpretador do JavaScript as interpretem.

"Case sensitive""Case sensitive"

JavaScript é "case sensitive", o que JavaScript é "case sensitive", o que significa dizer, que o interpretador significa dizer, que o interpretador diferencia minúsculas de maiúsculas. Veja diferencia minúsculas de maiúsculas. Veja um exemplo: um exemplo:

"Case sensitive""Case sensitive"

<script type="text/javascript"><script type="text/javascript"><!--<!--var txtMsg = "Você foi introduzido ao var txtMsg = "Você foi introduzido ao JavaScript.";JavaScript.";alert(txtmsg); // Isto irá causar um erro.alert(txtmsg); // Isto irá causar um erro.//-->//--></script> </script>

Ponto e vírgula (;) no final das Ponto e vírgula (;) no final das declaraçõesdeclarações

Em JavaScript a utilização do Em JavaScript a utilização do ;; ( (ponto e ponto e vírgulavírgula) é quase que opcional. Digo ) é quase que opcional. Digo quase, porque se você dispor de duas quase, porque se você dispor de duas declarações de código na mesma linha, declarações de código na mesma linha, precisará do precisará do ;; ( (ponto e vírgulaponto e vírgula). ).

Vejamos o exemplo abaixo:Vejamos o exemplo abaixo:alert("Estes detalhes..."); alert("... são alert("Estes detalhes..."); alert("... são

importantes"); importantes"); alert("Notou...")alert("Notou...")alert("A diferença?") alert("A diferença?")

VariáveisVariáveis

variáveis são como um depósito que você variáveis são como um depósito que você utiliza para guardar informações e, o seu utiliza para guardar informações e, o seu valor (conteúdo), pode alterar durante a valor (conteúdo), pode alterar durante a execução do script. execução do script.

Criando variáveisCriando variáveis

Vejamos um exemplo de como declarar Vejamos um exemplo de como declarar uma variável:uma variável:

var nomeVariavel = "valorVariavel";var nomeVariavel = "valorVariavel";ouou

nomeVariavel = "valorVariavel"; nomeVariavel = "valorVariavel";

Criando variáveisCriando variáveis

Você pode criar uma variável com ou sem a Você pode criar uma variável com ou sem a declaração declaração varvar, mas é aconselhável utilizá-la., mas é aconselhável utilizá-la.

Regras necessárias ao criar as Regras necessárias ao criar as variáveis:variáveis:

Como dito JavaScript é "case-sensitive", o que Como dito JavaScript é "case-sensitive", o que significa dizer que uma variável com o nome significa dizer que uma variável com o nome CarrinhoCarrinho é diferente de é diferente de carrinhocarrinho. .

Deve-se iniciar o nome de uma variável com Deve-se iniciar o nome de uma variável com uma letra ou com um sublinhado (_). uma letra ou com um sublinhado (_).

Atribuindo valor a uma variávelAtribuindo valor a uma variável

Vamos atribuir o valor Vamos atribuir o valor JavaScriptJavaScript à à variável assunto. Observe:variável assunto. Observe:

var assunto = "JavaScript"; var assunto = "JavaScript";

Variáveis globais e locaisVariáveis globais e locais

Quando criamos uma variável dentro de uma Quando criamos uma variável dentro de uma função, a tornamos função, a tornamos locallocal, ou seja, acessível , ou seja, acessível somente dentro da função em que foi criada. somente dentro da função em que foi criada. Podemos até criar outras variáveis com o Podemos até criar outras variáveis com o mesmo nome e com valores diferentes, porém mesmo nome e com valores diferentes, porém elas terão validade somente dentro da função elas terão validade somente dentro da função em que foi declarada.em que foi declarada.

Já as variáveis globais, são declaradas fora das Já as variáveis globais, são declaradas fora das funções e ficam acessíveis a toda e qualquer funções e ficam acessíveis a toda e qualquer função na página em que a variável esteja.função na página em que a variável esteja.

OperadoresOperadores

Operadores são símbolos utilizados para Operadores são símbolos utilizados para atuar sobre valores. Conheceremos os atuar sobre valores. Conheceremos os diferentes operadores utilizados no diferentes operadores utilizados no JavaScript.JavaScript.

Operadores aritméticosOperadores aritméticosOperador Descrição Exemplo Resultado

+ Adiçãox=2y=8x+y

10

- Subtraçãox=10y=3x-y

7

* Multiplicaçãox=4x*5

20

/ Divisão 15/5 3

% Módulo (restante da divisão)5%210%810%2

120

++ Incrementosx=5x++

x=6

-- Decrementosx=5x--

x=4

Operadores de comparaçãoOperadores de comparação

Operador Descrição Exemplo Resultado

== é igual a 5==8 falso

=== é igual a (compara o valor e o tipo)x=5 e y="5"

x==5x===5

verdadeirofalso

!= não é igual 5!=8 verdadeiro

> é maior que 5>8 falso

< é menor que 5<8 verdadeiro

>= é maior que ou igual a 5>=8 falso

< é menor que ou igual a 5<=8 verdadeiro

Operadores lógicosOperadores lógicos

Operador Descrição Exemplo Resultado

&& ex=6

y=3(x < 10 && y > 1)

verdadeiro

|| oux=6

y=3(x==5 || y==5)

falso

! nãox=6

y=3!(x==y)

verdadeiro

Operadores de atribuiçãoOperadores de atribuição

Operador Exemplo É o mesmo que

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=Y x=x%y

Operador condicionalOperador condicional

Operador condicional é aquele que atribui Operador condicional é aquele que atribui um valor a uma determinada variável com um valor a uma determinada variável com base em uma condição, ou seja, se a base em uma condição, ou seja, se a condição for verdadeira, teremos um valor condição for verdadeira, teremos um valor x, caso contrário um valor y.x, caso contrário um valor y.

Conheça a sintaxe desse tipo de Conheça a sintaxe desse tipo de condição:condição:

Operador condicionalOperador condicional

nomeDaVariável = (condição) ? nomeDaVariável = (condição) ? valorSeVerdadeiro : valorSeFalso; valorSeVerdadeiro : valorSeFalso;

Agora observe um exemplo para Agora observe um exemplo para uma melhor compreensão: uma melhor compreensão:

var fruta = "Maçã";var fruta = "Maçã";

var resposta = (fruta == "Maçã") ? "A fruta é var resposta = (fruta == "Maçã") ? "A fruta é a Maçã." : "Não sei qual é a fruta."; a Maçã." : "Não sei qual é a fruta.";

Operador condicionalOperador condicional

No exemplo acima fizemos o seguinte No exemplo acima fizemos o seguinte processo: inicialmente temos uma variável processo: inicialmente temos uma variável denominada fruta com o valor Maçã; em denominada fruta com o valor Maçã; em seguida, a variável resposta com um valor seguida, a variável resposta com um valor condicional, ou seja, se o valor da variável condicional, ou seja, se o valor da variável fruta for igual a Maçã, teremos o valor fruta for igual a Maçã, teremos o valor A A fruta é a Maçãfruta é a Maçã, caso contrário, teremos , caso contrário, teremos Não sei qual é a frutaNão sei qual é a fruta. .

CondiçõesCondições

Declarações condicionais no JavaScript, Declarações condicionais no JavaScript, assim como em outras linguagens, são assim como em outras linguagens, são utilizadas para executar diferentes ações utilizadas para executar diferentes ações baseadas em determinadas condições.baseadas em determinadas condições.

Declarações condicionaisDeclarações condicionais

Durante o desenvolvimento dos nossos Durante o desenvolvimento dos nossos scripts, sentimos a necessidade de scripts, sentimos a necessidade de executar determinadas ações baseados executar determinadas ações baseados em uma determinada condição, ou seja, em uma determinada condição, ou seja, se uma condição for verdadeira (true) será se uma condição for verdadeira (true) será executada a ação X, caso contrário, se for executada a ação X, caso contrário, se for falsa (false), a ação Y.falsa (false), a ação Y.

Em JavaScript temos as seguintes Em JavaScript temos as seguintes declarações condicionais:declarações condicionais:

Declarações condicionaisDeclarações condicionais

Declaração ifDeclaração ifUtilizamos essa declaração quando Utilizamos essa declaração quando

necessitamos que somente uma parte do necessitamos que somente uma parte do código seja executada e quando uma código seja executada e quando uma determinada condição for verdadeira.determinada condição for verdadeira.

Declaração if...elseDeclaração if...elseUtilizamos essa declaração para que somente Utilizamos essa declaração para que somente

uma parte do código seja executada quando uma parte do código seja executada quando determinada condição for verdadeira e, outra determinada condição for verdadeira e, outra parte, quando a condição for falsa.parte, quando a condição for falsa.

Declarações condicionaisDeclarações condicionais

Declaração if...else if...elseDeclaração if...else if...elseUtilizamos essa declaração quando Utilizamos essa declaração quando

desejamos selecionar um bloco de código desejamos selecionar um bloco de código entre vários outros.entre vários outros.

Declaração switchDeclaração switchUtilizamos também essa declaração quando Utilizamos também essa declaração quando

desejamos selecionar um bloco de código desejamos selecionar um bloco de código entre vários outros. É uma forma mais prática entre vários outros. É uma forma mais prática para alguns casos. para alguns casos.

Declaração ifDeclaração if

SintaxeSintaxe ifif (condição) { (condição) {

 //código a ser executado quando a  //código a ser executado quando a condição for verdadeira.condição for verdadeira.} }

ExemploExemplo

O exemplo abaixo exibirá o texto O exemplo abaixo exibirá o texto Olá Olá brazuca!brazuca! se a variável se a variável paispais for igual a for igual a Brasil.Brasil.

var pais = "Brasil";var pais = "Brasil";

ifif(pais == "Brasil") {(pais == "Brasil") { alert("Olá brazuca!"); alert("Olá brazuca!");} }

No exemplo acima, a declaração if (se) No exemplo acima, a declaração if (se) verifica se a variável verifica se a variável paispais é igual a Brasil. é igual a Brasil. Como a condição é verdadeira, ou seja, a Como a condição é verdadeira, ou seja, a variável variável paispais tem o valor Brasil, será tem o valor Brasil, será exibido o texto exibido o texto Olá brazuca!Olá brazuca! via via alertalert()(). .

Declaração if...elseDeclaração if...else

SintaxeSintaxe ifif (condição) { (condição) {

 //código a ser executado quando a  //código a ser executado quando a condição for verdadeira.condição for verdadeira.} } elseelse { { //código a ser executado quando a  //código a ser executado quando a condição for falsa.condição for falsa.} }

ExemploExemplo

O exemplo abaixo exibirá o texto O exemplo abaixo exibirá o texto Você não é Você não é um brazuca!um brazuca! se a variável se a variável paispais não for igual a não for igual a Brasil.Brasil.

var pais = "China";var pais = "China";

ifif(pais == "Brasil") {(pais == "Brasil") { alert("Olá brazuca!"); alert("Olá brazuca!");} } elseelse { { alert("Você não é um brazuca!"); alert("Você não é um brazuca!");} }

No exemplo acima, a declaração if (se) No exemplo acima, a declaração if (se) verifica se a variável verifica se a variável paispais é igual a Brasil. é igual a Brasil. Como a condição é falsa, ou seja, a Como a condição é falsa, ou seja, a variável variável paispais não tem o valor Brasil e sim não tem o valor Brasil e sim China, será exibido o texto China, será exibido o texto Você não é Você não é um brazuca!um brazuca! via via alertalert()(). .

Declaração if...else if...elseDeclaração if...else if...else

SintaxeSintaxe ifif (condição) { (condição) {

 //código a ser executado quando a condição for  //código a ser executado quando a condição for verdadeira.verdadeira.} } else ifelse if (2º condição) { (2º condição) { //código a ser executado quando a 2º condição  //código a ser executado quando a 2º condição for verdadeira.for verdadeira.} } elseelse { { //código a ser executado quando a primeira e a  //código a ser executado quando a primeira e a segunda condição forem falsas.segunda condição forem falsas.} }

ExemploExemplo

var pais = "China";var pais = "China";

ifif(pais == "Brasil") {(pais == "Brasil") { alert("Olá brazuca!"); alert("Olá brazuca!");} } else ifelse if(pais == "China") {(pais == "China") { alert("Olá chinês!"); alert("Olá chinês!");} } elseelse { { alert("Você não é um brazuca e nem  alert("Você não é um brazuca e nem chinês!");chinês!");} }

No exemplo acima, realizamos duas No exemplo acima, realizamos duas verificações: perguntamos se a variável verificações: perguntamos se a variável paispais tem tem o valor Brasil (a primeira). Caso verdadeiro, o valor Brasil (a primeira). Caso verdadeiro, exibiremos o texto exibiremos o texto Olá brazuca!Olá brazuca!; ou ; ou perguntamos se a mesma variável tem o valor perguntamos se a mesma variável tem o valor China (a segunda). Neste caso, exibiremos o China (a segunda). Neste caso, exibiremos o texto texto Olá chinês!Olá chinês!..

Caso a variável não tenha nenhum dos dois Caso a variável não tenha nenhum dos dois valores - Brasil ou China - exibirá o texto valores - Brasil ou China - exibirá o texto Você Você não é um brazuca e nem chinês!não é um brazuca e nem chinês!

Declaração switchDeclaração switch SintaxeSintaxe switchswitch(expressão) {(expressão) {

  casecase valor 1: valor 1:  //código a ser executado se a expressão = valor 1;  //código a ser executado se a expressão = valor 1;    breakbreak  casecase valor 2: valor 2:  //código a ser executado se a expressão = valor 2;  //código a ser executado se a expressão = valor 2;    breakbreak  default:default:  //código a ser executado se a expressão for diferente   //código a ser executado se a expressão for diferente do valor 1 e valor 2;do valor 1 e valor 2;} }

ExemploExemplo O exemplo abaixo dirá ao usuário o estado em que ele reside. O exemplo abaixo dirá ao usuário o estado em que ele reside.

Observe:Observe: var estado = "MG";var estado = "MG";

switchswitch(estado) {(estado) {  casecase "MG": "MG":  alert("Você mora em Minas Gerais.");  alert("Você mora em Minas Gerais.");    breakbreak  casecase "SP": "SP":  alert("Você mora em São Paulo.");  alert("Você mora em São Paulo.");    breakbreak  casecase "ES": "ES":  alert("Você mora no Espírito Santo.");  alert("Você mora no Espírito Santo.");    breakbreak  default:default:  alert("Onde moras?");  alert("Onde moras?");} }