Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Introduo Ao Javascript

    Enviado por

    Anabela Jackson
    10 visualizações11 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    10 visualizações11 páginas

    Introduo Ao Javascript

    Enviado por

    Anabela Jackson

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 11

    ESCOLA SUPERIO TCN E OR NICA Depa artamento de Manu o uteno I Industrial l

    Curso de Bacharelato e Licen nciatura em Informtica a

    PR ROGRA AMA WEB II O B

    By: Ricardo J. U R Uainda Maputo 28 de Ma o, aro 2012

    Introduo ao JavaScript
    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, dentre outras. O cliente tem total controlo sobre o suporte a essa linguagem no browser utilizado, ento lhe afirmo que ele pode desabilitar o funcionamento desse recurso. Assim, o que desenvolvemos fica obsoleto e intil. Por isso trabalharemos com o JavaScript no-obstrutivo, ou seja, se o cliente desabilitar o funcionamento dessa linguagem ou se ele no tiver suporte a ela, ele utilizar nosso sistema normalmente, mas sem os recursos desenvolvidos com a referida linguagem. Para quem gosta de histria, vamos conhecer um pouco mais da vida do JavaScript. Como podemos perceber, ela foi criada por algum que desejava uma soluo que trabalhasse internamente no browser e, que ao mesmo tempo, pudesse automatizar uma pgina da web ou torn-la mais dinmica. Foi assim, que Brendan Eich, programador da Netscape (empresa que sentiu a necessidade da criao), desenvolveu o JavaScript e a introduziu no mercado no ano de 1995. Seu primeiro nome de baptismo, em Setembro de 1995, foi LiveScript, como parte do Netscape Navigator 2.0. Seu novo e actual nome, JavaScript, apareceu em 4 de Dezembro de 1995. Os principais browsers do mercado, Firefox, Mozilla, Opera, Netscape, Safari, Internet Explorer e outros mais, suportam a linguagem JavaScript. Ela utilizada para a validao de formulrios, ler e inserir contedo em uma pgina, criar cookies, menus dinmicos e diversos outros recursos.

    Inserindo o JavaScript em uma pgina HTML


    Para inserirmos o JavaScript em uma pgina HTML, fazemos uso da tag <script> e do atributo type com o valor: text/javascript. O que resultaria no seguinte:
    <script type="text/javascript"> //cdigos JavaScript </script>

    Ao iniciarmos a tag <script>, dizemos o tipo de script utilizado type="text/javascript" e assim o browser entender que no contedo dessa tag h comandos JavaScript para serem executados e os reconhecero. Para finalizar a execuo dos cdigos usa-se o final da tag como </script>.

    Onde inserimos o JavaScript em uma pgina HTML


    H trs formas de inserirmos o JavaScript em uma pgina HTML, so elas: um arquivo externo -.js, no head, no body ou utilizando os trs de uma s vez.

    Vamos conhecer a peculiaridade de cada uma delas. Arquivo (script) externo O arquivo externo chamado desta forma:
    ... <head> <script type="text/javascript" src="externo.js"></script> </head> ...

    Ou seja, atravs do atributo src da tag <script>, indicamos a localizao do arquivo externo, para que assim o browser possa localiz-lo e execut-lo. Em arquivos externos no utilizamos a tag <script>, somente os cdigos. Vamos conhecer algumas das vantagens de se trabalhar dessa forma: Facilidade na manuteno Uma vez que o script est localizado em apenas um arquivo, facilita a edio ou correco dos cdigos. Carregamento mais rpido da pgina O arquivo externo armazenado na cache do navegador. Assim, evita-se carreg-lo toda vez que a pgina for chamada. Semntico O arquivo externo separa a camada de comportamento (JavaScript) da camada de contedo (HTML).

    Script no head da pgina O script inserido desta forma:


    ... <head> <script type="text/javascript"> //cdigos JavaScript </script> </head> ...

    Os cdigos JavaScript localizados no head da pgina so executados ao serem chamados, ou seja, quando algum evento for provocado, como o evento onclick, onmouseover, onload, dentre outros. Nessa forma o script carregando antes de algum utiliz-lo, ou seja, antes do carregamento do contedo do body. Script no body da pgina O script inserido desta forma:

    ... <body> > <script type="text/javascript"> //cdigos JavaScript </script> </body y> ...

    Os cd digos inserid no bod da pgin so inicia dos dy na almente exe ecutados en nquanto a p pgina mbm podem ser chama m ados quando algum eve o ento for prov vocado. carregada mas tam

    A tag < <noscript t>


    A tag < <noscript> nos permite disponibilizar um co e ontedo alte ernativo ao disposto vi script. ia Isso sig gnifica dizer que, se o u r usurio no tiver supor ao JavaS rte Script em se browser, ele ver eu o conte inserido dentro del e, caso te do o la enha suporte o seu con e, ntedo om mitido. Veja um exemplo: m
    <script type="text/javascript"> do ript."); alert("Estamos aprendend JavaScr </script> <noscript> <p> Estamos apr rendendo J JavaScript t.</p> </noscript> No exem mplo acima ser exibid a mensag a da gem, "Esta amos apren ndendo Jav vaScript ", atravs ,

    do alert - uma fu t() uno do Ja avaScript qu exibe um mensage atravs de um popu box ue ma em up para qu tem sup uem porte ao Jav vaScript. Ca contrrio mesma mensagem ap aso o, m parecer pa quem ara no tem suporte ao JavaScript porm atra m o t, avs da tag <noscript> na forma d texto. > de Veja as imagens:

    Ex xemplo de uma mensag via aler u gem rt(). Exemplo de uma mensa E agem via <n noscript> A tag < <noscript> muito im mportante q quando se trata de ac cessibilidade pois ofer e, rece um conted alternativ para os u do vo usurios sem suporte linguagem em questo m o.

    Comen ntrios em JavaScr m ript


    Os com mentrios na linguagem JavaScript tm funo similar s demais ling a m o guagens, ou seja, de u explicar o que dete r erminado co omando faz, nota de alg , gum autor, l lembretes, d dentre outra as. Tudo qu estiver en ue nglobado pelos comen ntrios ignorado pelo interpretado do JavaScript. or

    H dois tipos de comentrios, so eles: // e /* */. O primeiro o comentrio de uma linha somente, enquanto o segundo suporta vrias. Observe os exemplos:
    <script type="text/javascript"> // Isto um comentrio de uma linha. /* Isto um comentrio de vrias linhas, e o interpretador ignora todo esse contedo. O que nos permite a criao de notas e lembretes em nossos cdigos. */ </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). Antes de lhe explicar a sua funo, veja o exemplo:
    ... <head> <script type="text/javascript"> <!-//cdigos JavaScript //--> </script> </head> ...

    Agora vamos compreender isso melhor. Os browsers que no suportam o JavaScript iro exibi-lo como se fosse parte do contedo da pgina. Para prevenir essa prtica, utilizamos o comentrio em HTML. Porm, podemos perguntar: Para que serve as duas barras (//) antes do fechamento do comentrio? Bom, elas previnem que o interpretador do JavaScript as interprete.

    Alguns detalhes para finalizar


    "Case sensitive" JavaScript "case sensitive", o que significa dizer, que o interpretador diferencia minsculas de maisculas. Veja um exemplo:
    <script type="text/javascript"> <!-var txtMsg = "J foi feita a introduo ao JavaScript."; alert(txtmsg); // Isto ir causar um erro. //--> </script>

    No exemplo acima, gostaramos de exibir atravs do alert() a mensagem armazenada na varivel txtMsg mas como chamamos a varivel por txtmsg, o JavaScript no a encontrou no cdigo, causando um erro - txtmsg is not defined. Moral da histria, uma simples letra maiscula ou minscula causa toda a diferena. Ponto e vrgula (;) no final das declaraes 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).

    Vejamos o exemplo abaixo:


    alert("Estes detalhes..."); alert("... so importantes"); alert("Notou...") alert("A diferena?")

    Eu sempre utilizo o ; (ponto e vrgula) no final de minhas declaraes. Outro detalhe: se voc utilizar algum compressor de JavaScript - para reduzir o tamanho do arquivo - e os seus cdigos no tiverem o ; (ponto e virgula), aparecer erros, pois os compressores distribuem os cdigos em uma nica linha.

    Variveis
    So de grande utilidade e empregadas ao extremo. Criando variveis Vejamos um exemplo de como declarar uma varivel:
    var nomeVariavel = "valorVariavel"; ou nomeVariavel = "valorVariavel";

    Podemos criar uma varivel com ou sem a declarao var, mas aconselhvel utiliz-la. Agora, vamos conhecer algumas regrinhas necessrias ao criar as variveis:

    Como dito JavaScript "case-sensitive", o que significa dizer que uma varivel com o nome Manuel diferente de manuel. Deve-se iniciar o nome de uma varivel com uma letra ou com um sublinhado (_).

    Atribuindo valor a uma varivel Vamos atribuir o valor JavaScript varivel assunto. Observe:
    var assunto = "JavaScript";

    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 actuar sobre valores. Conheceremos os diferentes operadores utilizados no JavaScript.

    Operadores aritmticos
    Operador Descrio + Adio Exemplo x=2 y=8 x+y Subtraco x=10 y=3 xy Multiplicao x=4 x*5 Diviso 15/5 Mdulo(restantedadiviso) 5%2 10%8 10%2 Incrementos x=5 x++ Decrementos x=5 x Resultado 10

    * / %

    20 3 1 2 0 x=6 x=4

    ++

    Operadores de comparao
    Operador Descrio Exemplo == iguala 5==8 === iguala(comparaovaloreotipo) x=5ey="5" x==5 x===5 != noigual 5!=8 > maiorque 5>8 < menorque 5<8 >= maiorqueouiguala 5>=8 < menorqueouiguala 5<=8 Resultado falso verdadeiro falso verdadeiro falso verdadeiro falso verdadeiro

    Operadores lgicos
    Operador Descrio Exemplo && e x=6 y=3 (x<10&&y>1) || ou x=6 y=3 (x==5||y==5) ! no x=6 y=3 !(x==y) Resultado verdadeiro

    Falso

    verdadeiro

    Operadores de atribuio
    Operador = += = *= /= %= Exemplo x=y x+=y x=y x*=y x/=y x%=Y omesmoque x=y x=x+y x=xy x=x*y x=x/y 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. Conhea a sintaxe desse tipo de condio:
    nomeDaVarivel = (condio) ? valorSeVerdadeiro : valorSeFalso;

    Agora observe um exemplo para uma melhor compreenso:


    var fruta = "Ma"; var resposta = (fruta == "Ma") ? "A fruta a Ma." : "No sei qual a fruta."; alert(resposta);

    No exemplo acima fizemos o seguinte processo: inicialmente temos uma varivel denominada fruta com o valor Ma; em seguida, a varivel resposta com um valor condicional, ou seja, se o valor da varivel fruta for igual a Ma, teremos o valor A fruta a Ma, caso contrrio, teremos No sei qual a fruta.

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

    Declaraes condicionais
    Durante o desenvolvimento dos nossos scripts, sentimos a necessidade de executar determinadas aces baseados em uma determinada condio, ou seja, se uma condio for verdadeira (true) ser executada a aco X, caso contrrio, se for falsa (false), a aco Y. 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.

    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. Declarao if...else if...else Utilizamos essa declarao quando desejamos seleccionar um bloco de cdigo entre vrios outros. Declarao switch Utilizamos tambm essa declarao quando desejamos seleccionar um bloco de cdigo entre vrios outros. uma forma mais prtica para alguns casos.

    Declarao if
    Sintaxe
    if (condio) { //cdigo a ser executado quando a condio for verdadeira. }

    Exemplo O exemplo abaixo exibir o texto Ol Moambicano! se a varivel pais for igual a Moambique.
    var pais = "Moambique"; if(pais == "Moambique") { alert("Ol Moambicano!"); }

    No exemplo acima, a declarao if (se) verifica se a varivel pais igual a Moambique. Como a condio verdadeira, ou seja, a varivel pais tem o valor Moambique, ser exibido o texto Ol Moambicano! via alert().

    Declarao if...else
    Sintaxe
    if (condio) { //cdigo a ser executado quando a condio for verdadeira. } else { //cdigo a ser executado quando a condio for falsa. }

    Exemplo O exemplo abaixo exibir o texto Voc no um Moambicano! se a varivel pais no for igual a Moambique.
    var pais = "China"; if(pais == "Moambique") { alert("Ol Moambicano!"); } else { alert("Voc no um Moambicano!");

    No exemplo acima, a declarao if (se) verifica se a varivel pais igual a Moambique. Como a condio falsa, ou seja, a varivel pais no tem o valor Moambique e sim China, ser exibido o texto Voc no um Moambicano! via alert().

    Declarao if...else if...else


    Sintaxe
    if (condio) { //cdigo a ser executado quando a condio for verdadeira. } else if (2 condio) { //cdigo a ser executado quando a 2 condio for verdadeira. } else { //cdigo a ser executado quando a primeira e a segunda condio forem falsas. }

    Exemplo
    var pais = "China"; if(pais == "Moambique") { alert("Ol Moambicano!"); } else if(pais == "China") { alert("Ol chins!"); } else { alert("Voc no um Moambicano e nem chins!"); }

    No exemplo acima, realizamos duas verificaes: perguntamos se a varivel pais tem o valor Moambique (a primeira). Caso verdadeiro, exibiremos o texto Ol Moambicano!; ou perguntamos se a mesma varivel tem o valor China (a segunda). Neste caso, exibiremos o texto Ol chins!. Caso a varivel no tenha nenhum dos dois valores - Moambique ou China - exibir o texto Voc no um Moambicano e nem chins!

    Declarao switch
    Sintaxe
    switch(expresso) { case valor 1: //cdigo a ser executado se a expresso = valor 1; break case valor 2: //cdigo a ser executado se a expresso = valor 2; break default: //cdigo a ser executado se a expresso for diferente do valor 1 e valor 2; }

    Exemplo

    O exemplo abaixo dir ao usurio o bairro em que ele reside. Observe:


    var bairro = "Malhangalene"; switch(bairro) { case " Malhangalene ": alert("Voc mora em Malhangalene."); break case "Mavalane": alert("Voc mora em Mavalane."); break case "Jardim": alert("Voc mora no Jardim."); break default: alert("Onde moras?"); }

    Vamos compreender o exemplo. Temos a varivel bairro com o valor Malhangalene. Logo aps, iniciamos nossa declarao condicional com o switch, passando a ele como parmetro a expresso (varivel) bairro. Ento, utilizamos o case (caso). Para isso necessrio verificar o seguinte: se o valor da varivel for Malhangalene exibimos um texto, se for Mavalane exibimos outro, e assim por diante; se o valor da varivel no coincidir com nenhum dos valores nos cases, exibimos um texto padro (default). Algumas consideraes a cerca do switch.

    A expresso na maioria das vezes ser uma varivel; O valor da expresso comparado com os valores de cada caso (case) da estrutura. Caso ocorra um valor semelhante, o cdigo a ele associado executado; O break previne que o prximo caso (case) seja executado automaticamente; O valor padro (default) utilizado caso nenhum dos valores dos cases coincidam com o valor da expresso.

    Você também pode gostar