Embed Size (px)
Citation preview
O que é JavaScript• JavaScript é uma linguagem que permite
escrever scripts, ou pequenos programas não-compilados, que são executados por um navegador Web
• As linguagens de script são linguagens de programação, portanto podem fazer cálculos, manipular objetos e responder a uma ampla variedade de eventos de usuário
Por que usar JavaScript?• A linguagem JavaScript possibilita manipular
páginas Web sem enviar uma requisição ao servidor
• Algumas das vantagens:– Facilidade de utilização– Aumento da eficiência do servidor– Integração com o Navegador (nativo)
Características do JavaScript• Os scripts são inseridos em documentos HTML usando um
dos três métodos:– Incluir scripts nas tags em resposta a eventos– Inserir scripts na seção head ou body do documento– Criar links com arquivos de script externos
• Toda expressão ou comando termina com ponto-e-vírgula (;)
• As expressões podem ser agrupadas em blocos entre chaves { } (Funções)
• Comentários são criados utilizando // ou /* */
A tag <script>• Ao colocar uma tag <script> em um documento, diz-se ao
navegador Web para tratar todas as linhas de texto que estão após a tag como script, e não como conteúdo da página Web
• Quando escrevemos script em JavaScript, devemos usar o atributo language=“JavaScript”
• Podemos usar o atributo src para incluir um script armazenado em um arquivo separado como parte da página Web– <script language=“JavaScript” src=“script.js”> //código </script>
Variáveis em JavaScript• Uma variável é um container que pode armazenar um
número, texto ou um objeto• Sintaxes para declaração de variáveis:
– nome_variavel = valor;– var nome_variavel = valor;
• Os nomes de variáveis seguem as seguintes regras:– Devem ser únicos– Aceitam somente letras, números e caractere sublinhado– Não podem começar com um número
• Abrangência de variáveis (Local e Global)
Palavra-chave this• Utilizamos this para referir-se ao objeto atual. Em geral
refere-se ao objeto chamado no método• Sintaxe:
– this[.propertyName]
Palavra-chave this• Exemplo:
function validate(obj, lowval, hival) {if ((obj.value < lowval) || (obj.value > hival))alert("Invalid Value!")
}• HTML:
<B>Enter a number between 18 and 99:</B><INPUT TYPE = "text" NAME = "age" SIZE = 3onChange="validate(this, 18, 99)">
Estrutura de decisão if...else• Sintaxe:
if (condiçaõ) {
//comandos1
}
[else {
comandos2
} ]
Laços for e while• Sintaxe for( )
for(var i=1; i<=10; i++)
{
<comando 1>;
<comando 2>;
}
• Sintaxe while( )
while(condição)
{
<comando 1>;
<comando 2>;
}
Funções• Sintaxe para criação de funções
function nomeFunção(argumentos)
{
<comando 1>;
<comando 2>;
}
Funçõesfunction fatorial(n) {if ((n == 0) || (n == 1))
return 1;else {
result = (n * fatorial(n-1) )return result;
}}
Funções• HTML
a=fatorial(1) // retorna 1b=fatorial(2) // retorna 2c=fatorial(3) // retorna 6d=fatorial(4) // retorna 24
Array de Argumentos• Exemplo: considere uma função que concatena diversas
strings. O único argumento definido é a string que recebe o caractere de separação dos itens concatenados:Function myConcat(separator) {result=""; // initialize list// iterate through argumentsfor (var i=1; i<arguments.length; i++) {
result += arguments[i] + separator;}return result;
}
Array de Argumentos• Continuação:
// returns "red, orange, blue, "myConcat(", ","red","orange","blue")
// returns "elephant; giraffe; lion; cheetah;"myConcat("; ","elephant","giraffe","lion", "cheetah")
// returns "sage. basil. oregano. pepper. parsley. "myConcat(". ","sage","basil","oregano", "pepper",
"parsley")
Objeto Date• Possibilita trabalhar com data e hora• Construtores:
– new Date()– new Date(milliseconds)– new Date(dateString)– new Date(yr_num, mo_num, day_num [, hr_num,
min_num, sec_num, ms_num])• Ver página 72 do arquivo clientreferenceJS13.pdf
Objeto Date• Exemplo:
<h4>Hoje é:<script type="text/javascript"><!--var currentTime = new Date();var month = currentTime.getMonth() + 1;var day = currentTime.getDate();var year = currentTime.getFullYear();document.write(day + "/" + month + "/" + year);//--></script>
</h4>
Eventos• “Eventos ocorrem como resultado de uma ação do
usuário no sistema”– Ver capítulo 10 do arquivo ClientGuideJS13.pdf
Eventos
Evento Quando é chamadoonBlur Sempre que o visitante deixar um campo de formulário
onChange Sempre que o visitante mudar o conteúdo de um campo
onClick Sempre que o visitante clicar em um botão
onFocus Sempre que o visitante digitar algo em um campo
onLoad Sempre que uma página Web é carregada ou recarregada
onMouseOver Sempre que o visitante colocar o mouse sobre um objeto
onSelect Sempre que o visitante selecionar o conteúdo de um campo
onSubmit Sempre que o visitante submeter um formulário
onUnload Sempre que a página Web atual for trocada
Validação de Formulário• A validação de formulários via scripts é uma das mais
importante formas de utilização de JavaScript– Reduz o processamento de informações inconsistentes no
servidor– Reduz o tempo de espera do usuário para receber uma
mensagem de erro• Normalmente a validação é realizada de duas formas:
– Enquanto o usuário digita uma informação (evento Onchange)
– Quando o usuário envia o formulário (evento OnSubmit)
Validação de Formulário• Exemplo HTML:
<form method="post" action="http://teste.aspx" onSubmit="return checkform(this)">
<input type=“text” name=“theName” /></form>
• Função JavaScript:function checkform(thisform){ if (thisform.theName.value == null || thisform.theName.value ==
""){ alert ("Por favor, entre seu nome"); thisform.theName.focus(); thisform.theName.select(); return false; }}
Exercícios
1. Criar uma função em javascript para validar um email;
2. Criar uma função em javascript que concatene o conteúdo dos itens selecionados de uma listbox exiba-os em um textArea separados por ponto e vírgula;
Bibliografia• www.javascriptmall.com• www.mozilla.org/js/language• www.javascript.com• www.javascriptkit.com/javatutors• www.mozilla.org/js/language/ • www.js-examples.com/page/
core_manual__contents.html
