Escolar Documentos
Profissional Documentos
Cultura Documentos
Javascript
O que Javascript?
O que Javascript?
Javascript passada ao navegador como texto e interpretada. Javascript usa tipagem fraca e ligao dinmica.
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Particularidades e Limitaes
Limitaes de Navegadores
Como o cdigo Javascript executado no cliente (navegador), seu interpretador deve ser implementado dentro do navegador; A maioria dos navegadores disponveis no mercado do suporte Javascript.
Limitaes de Plataformas
Embora Javascript rode em todas as plataformas para as quais navegadores compatveis existem, nem todas as funes de Javascript rodaro do mesmo modo em plataformas distintas.
Particularidades e Limitaes
Limitaes de Segurana
Javascript foi projetada para ser segura com respeito Web: Ela no pode abrir, ler, gravar ou salvar arquivos no computador do usurio; Ela no pode abrir, ler, gravar ou salvar arquivos no servidor Web. Javascript uma linguagem segura e no consegue interagir diretamente com nada no computador do usurio fora da pgina Web que est sendo exibida.
Elemento <script>
<script>...</script> - atributos: language, type, src; utilizado para indentificar cdigo Javascript. pode ser posicionado dentro dos elementos <head>, <body>, ou ambos. pode ser incorporado vrias vezes dentro de um documento. scripts declarados dentro do elemento <head> so carregados antes do resto da pgina. scripts declarados dentro do elemento <body> permitem a criao dinmica de partes do documento. Atributo language - identifica a linguagem de script utilizada. Atributo type - identifica o tipo do contedo referenciado na tag (text/javascript). Atributo src permite especificar a URL (relativa ou absoluta) do arquivo com comandos Javascript (extenso .js).
Sintaxe
//Inserindo cdigo diretamente na pgina <script language=Javascript type=text/javascript> //cdigo Javascript </script> //Inserindo cdigo atravs de um arquivo externo <script src=codigo_javscript.js type=text/javascript></script>
Valores e Variveis
Valores e Variveis
Valores e Variveis
Declarao de variveis
O uso de var opcional para declarar variveis globais, mas obrigatrio para declarar variveis locais. Variveis Locais: so definidas dentro do corpo de uma funo; so vlidas apenas dentro do corpo da funo onde foram definidas (escopo limitado).
function adiciona(valor){ var a = valor + 10; ... } function subtrai(valor){ var b = valor - 10; ... }
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Valores e Variveis
Declarao de variveis
Variveis Globais: so definidas fora de todos os corpos de funes de um arquivo Javascript; so vlidas dentro de qualquer funo do arquivo. var total = 0; function adiciona(valor){ var a = valor + 10; total = total + a; } function subtrai(valor){ var b = valor - 10; total = total - b; }
Valores e Variveis
Caracteres especiais Caracter \b \f \n \r \t \ \ \\ Significado Backspace Alimentao de Nova linha formulrio Retorno de carro Tab Aspa simples Aspa dupla Barra invertida
Operadores e Expresses
Expresses
Expresso um conjunto de literais (constantes), variveis e operadores que, avaliados, resultam em um nico valor (nmero, string ou booleano).
Tipos de Expresses
Expresses aritmticas: resultam em um nmero; Expresses de string: resultam em uma sequncia de caracteres (string); Expresses lgicas: resultam em true ou false.
Operadores e Expresses
Operadores
Operadores so smbolos especiais que controlam como uma expresso deve ser avaliada.
Tipos de Operadores
Operador binrio: exige dois operandos; Operador unrio: exige apenas um operando (antes ou depois do operador).
Os operadores podem, ainda, ser classificados de acordo com o tipo de operandos que manipulam:
#
Operadores aritmticos; Operadores de comparao; Operadores de string; Operadores lgicos; Operadores bit a bit; Operadores de atribuio; Operadores especiais.
Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Operadores e Expresses
Operadores aritmticos
Operadores aritmticos constroem expresses aritmticas. Recebem e retornam nmeros. Operadores aritmticos em Javascript: + Soma Subtrao * Multiplicao / Diviso % Mdulo ++ Incremento (s funciona com variveis) -Decremento (s funciona com variveis) Negao unria
Operadores e Expresses
Operadores de comparao
Um operador de comparao compara seus operandos e retorna um valor booleano. Os operandos podem ser nmeros ou strings. Operadores de comparao em Javascript: == Igual != Diferente de > Maior que < Menor que >= Maior ou igual a <= Menor ou igual a
Operadores e Expresses
Operadores de string
O operador de string, +, serve para concatenar strings. Recebe e retorna strings. Ex.: string1 + string2 = string1string2
Operadores lgicos
Os operadores lgicos retornam valores booleanos. Operadores lgicos em Javascript: && E (AND) || OU (OR) ! NO (NOT)
Operadores e Expresses
Operadores e Expresses
Operadores de atribuio
Operadores de atribuio em Javascript: x += y significa x=x+y x-=y significa x=x-y x *= y significa x=x*y x /= y significa x=x/y x %= y significa x=x%y x <<= y significa x = x << y x >>= y significa x = x >> y x >>>= y significa x = x >>> y x &= y significa x=x&y x ^= y significa x=x^y x |= y significa x=x|y
Operadores e Expresses
Operadores especiais
Operador ?: : escolhe uma entre duas opes baseado na condio. condio ? valor 1 : valor 2 Operador new: utilizado para criar uma nova instncia de um tipo de objeto. nomeObjeto = new tipoObjeto ( param1 [,param2] ...[,paramN] ) Operador this: refere-se ao objeto em uso. this[.nomePropriedade] Operador typeof: retorna uma string indicando o tipo do operando. typeof operando typeof (operando)
Operadores e Expresses
Precedncia de Operadores:
#
Chamadas e membros ( ( ) e [ ] ); Negao, incremento e decremento (!, ~, -, ++, --, typeof); Multiplicao e diviso (*, / e %); Adio e subtrao (+ e -); Deslocamentos (<<, >> e >>>); Relacionais (<, <=, > e >=); Igualdade (= = e !=); E bit a bit (&); OU Exclusivo bit e bit (^); OU bit a bit ( | ); E Lgico (&&); OU Lgico ( || ); ?: Atribuio.
Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Declaraes
Declarao uma seqncia de palavras-chave, operadores, operandos e/ou expresses terminados por um ponto-e-vrgula. Tipos de Declaraes
Comandos; Declaraes Condicionais; Declaraes de Lao, Declaraes de Manipulao de Objetos.
Comandos
Declarao de variveis: var. Ex.: var i; var i = 10; var i, j, l; Comentrio em uma nica linha: //; Comentrio em mais de uma linha: /* (incio) e */ (fim).
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Declaraes
Declaraes condicionais
As declaraes condicionais de Javascript usam as palavraschave if..else e switch. Sintaxe de if..else: if (condio) { // faz algo se a condio for verdadeira } else { // faz algo se a condio for falsa } As chaves ( { } ) definem um bloco de declaraes que so tratadas e executadas como uma unidade.
Declaraes
Declaraes condicionais
Sintaxe de switch: switch (expresso) { case label 1: declarao 1; break; case label 2: declarao 2; break; ... default: declarao; }
Declaraes
Declaraes de lao
As declaraes de lao de Javascript usam as palavras-chave for, while e do..while. Sintaxe de for: for ([inicializao]; [condio]; [incremento]) { declarao 1; ... declarao n; } Na declarao for, pode-se omitir as partes de inicializao, condio e incremento, contanto que o ponto-e-vrgula permanea.
Declaraes
Declaraes de lao
Sintaxe de while: while (condio) { declarao 1; ... declarao n; } Sintaxe de do..while: do { declarao 1; ... declarao n; } while (condio);
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Declaraes
Declaraes de lao
Controlando laos atravs de break e continue Declarao break: cancela a execuo dos laos for, while e do..while, passando o controle para a prxima instruo fora do lao. Declarao continue: em um lao for, ela cancela a execuo, passando o controle para a prxima iterao; em um lao while ou do..while, ela cancela a execuo, voltando condio.
Declaraes
Declaraes
<html> <head><title>Javascript</title></head> <body> <h3>Propriedades do Documento</h3> <hr /> <script language=Javascript type=text/javascript> for (propriedade in document) document.write(propriedade + "<br>"); </script> </body> </html>
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Declaraes
Funes
Palavra-chave function
Uma funo um conjunto de declaraes que executam uma tarefa especfica. Sintaxe: function nomeFuno([param 1, .., param n]) { declarao 1; ... declarao n; } As funes devem ser definidas no cabealho da pgina (entre <head> e </head>) para garantir que sero carregadas antes que qualquer referncia lhes seja feita no corpo da pgina.
Declarao return
Utilizada, dentro do corpo de uma funo, para retornar um valor, ou para cancelar imediatamente a sua execuo.
Funes
parseFloat(string) converte string para nmero no formato ponto flutuante. Exemplo: parseFloat(3.14); parseFloat(314e-2); parseFloat(0.0314E+2); var x = 3.14; parseFloat(x);
Resultado = nmero 3.14
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Eventos Javascript uma linguagem dirigida por eventos: os eventos so utilizados para para controlar a interao do usurio com o aplicativo. Manipuladores de eventos
Capturam ocorrncia de eventos; Comeam com On; O valor associado ao manipulador pode ser uma sequncia de declaraes Javascript, ou uma chamada de funo Javascript.
Evento: Blur
Aplicao: janelas e elementos do formulrio. Ocorrncia: usurio remove o foco da janela ou do elemento do formulrio. Manipulador: onBlur
Evento: Change
Aplicao: campos de texto, reas de texto e caixas de seleo. Ocorrncia: usurio modifica o valor dos elementos. Manipulador: onChange
Evento: DragDrop
Aplicao: janelas. Ocorrncia: usurio solta um objeto dentro da janela. Manipulador: onDragDrop
Evento: Error
Aplicao: imagens e janelas. Ocorrncia: a carga de uma imagem ou documento provoca um erro. Manipulador: onError
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Evento: KeyDown
Aplicao: documentos, imagens, links e reas de texto. Ocorrncia: usurio pressiona uma tecla. Manipulador: onKeyDown
Evento: KeyPress
Aplicao: documentos, imagens, links e reas de texto. Ocorrncia: usurio mantm uma tecla pressionada. Manipulador: onKeyPress
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Evento: Load
Aplicao: corpo do documento. Ocorrncia: documento carregado no navegador. Manipulador: onLoad
Evento: MouseDown
Aplicao: documentos, botes e links. Ocorrncia: usurio pressiona boto do mouse. Manipulador: onMouseDown
Evento: MouseOut
Aplicao: links. Ocorrncia: usurio retira o cursor do link. Manipulador: onMouseOut
Evento: MouseOver
Aplicao: links. Ocorrncia: usurio move o cursor sobre o link. Manipulador: onMouseDown
Evento: Move
Aplicao: janelas. Ocorrncia: usurio, ou script, move uma janela. Manipulador: onMove
Evento: Reset
Aplicao: formulrios. Ocorrncia: usurio limpa o formulrio (clica no boto reset). Manipulador: onReset
Evento: Select
Aplicao: campos de texto e reas de texto. Ocorrncia: usurio seleciona contedo dos campos formulrios. Manipulador: onSelect de
Evento: Submit
Aplicao: formulrios. Ocorrncia: usurio envia o formulrio (clica no boto submit). Manipulador: onSubmit
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Objetos
Navegador
Janela
Localizao
Documento
Histrico
Link
ncora
Formulrio
Objetos Hierarquia
No navegador, os objetos seguem a mesma estrutura hierrquica da pgina HTML: de acordo com essa hierarquia, os descendentes dos objetos so propriedades desses objetos. Quando uma pgina carregada no navegador, ele cria um nmero de objetos de acordo com o contedo da pgina. Os seguintes objetos so sempre criados, independentemente do contedo da pgina: window, location, history e document.
Propriedade appVersion: retorna a verso do navegador e a verso do sistema operacional em que ele est rodando. [formato: nmero da verso (plataforma; pas)]
navigator.appVersion = 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
Propriedade appCodeName: retorna o nome do cdigo de desenvolvimento interno do desenvolvedor de um navegador especfico.
navigator.appCodeName = Mozilla
Propriedade userAgent: usada em cabealhos HTTP para fins de identificao, a combinao das propriedades appCodeName e appVersion.
navigator.userAgent=Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
Propriedade search: retorna quaisquer comandos de consulta que possam estar embutidos na URL corrente. Valores de search so separados do resto da URL por um sinal de interrogao (?).
location.search = nome=Joao
Propriedade hash: retorna quaisquer ncoras que possam ter sido passadas na URL. Valores de hash so separados do resto da URL por um sinal de cerquilha (#).
location.hash = capitulo1
Objeto radio
Corresponde a um array de botes, onde todos os botes compartilham a mesma propriedade name. Propriedades: name, checked, defaultChecked, length. Propriedade name: especifica o nome do objeto. Propriedade checked e defaultChecked: funcionamento idntico ao definido em checkbox. Propriedade length: especifica o comprimento do array.
# Captulo 1 Conceitos Bsicos Sexta-feira, 3 de Fevereiro de 2006
Objeto text
Utilizado para entrada/sada de dados. Propriedades: name, value, defaultValue. Propriedade name: especifica o nome do objeto. Propriedade value: especifica o valor do objeto. Propriedade defaultValue: especifica o valor default do objeto.
Objeto select
Utilizado para construir caixas de seleo. Propriedades: name, options, length. Propriedade name: especifica o nome do objeto. Propriedade options: array que contm uma entrada para cada opo de uma caixa de seleo. Propriedade length: especifica o comprimento do array de opes.
Objeto submit
Utilizado para interfacear Javascript e outros scripts/programas. Propriedades: name, value.
Objeto button
Utilizado na construo de interfaces. Propriedades: name, value.