java script1
DESCRIPTION
Slide de aula introdutorio de JavaScriptTRANSCRIPT
Prof Evandro Manara Miletto
parte 1
Sumário
Introdução
Variáveis e tipos de dados
Operadores
O que é JavaScript?
JavaScript é uma linguagem de programação criada pela Netscape para adicionar interatividade ás páginas HTML
O código em JavaScript é colocado dentro das páginas HTML, ou seja, é uma linguagem que roda no navegador do cliente (client side)
JavaScript é uma linguagem interpretada, ou seja, o código executa sem uma compilação preliminar
Curiosidades: 1a versão criada em 1995 e implementada em 1996 no Netscape Navigator
Ja foi chamado de Mocha, LiveScript, JavaScript e atualmente o nome oficial é ECMA Script ( ver ECMA International) que o mantém
http://www.ecma-international.org/
Onde atua o JavaScript?
Tecnologia capaz de prover interatividade do site com o internauta, seguindo os padrões do W3C
O que não é JavaScript?
JavaJava não tem nenhuma relação com JavaScript!
O que você pode fazer com JS?
Por ser uma linguagem de programação, JavaScript permite criar conteúdo dinâmico para o usuário
JavaScript é capaz de ler e modificar o HTML de uma página. Isto permite criar ou eliminar partes de uma página
JavaScript pode reagir a eventos, ou seja, pode ser executado quando alguma coisa acontecer
Por exemplo, um evento pode ser disparado quando um usuário clicar num elemento em HTML ou uma página terminar de carregar, etc
O que + você pode fazer com JS?
JavaScript pode ser utilizado para validar dados dos formulários antes do envio para o servidor
JavaScript também é utilizado na criação de máscaras para os campos. Por exemplo, o usuário digita 5130234567 e este texto é formatado automaticamente para: (51) 3023-4567
JavaScript é a base para o desenvolvimento de interfaces interativas com AJAX(Asynchronous Javascript And XML)
exemplos de uso de JS:
http://netscape.aol.com/ (change canvas)
http://www.clicrbs.com.br/rs/ (personalizar capa)
http://maps.google.com.br/ (drag and drop, visualização, fechamento de div, etc.)
http://www.google.com.br (autocompletar)
http://www.facebook.com/ (jenela de chat, mouseover fotos, etc.)
http://jqueryui.com/demos/ (drag, acordeon, etc.)
http://dojotoolkit.org/widgets (guias, calendários, etc.)
Validação de campos de formulário
Primeiro programa JavaScript
<html>
<head> </head>
<body>
<script type="text/javascript">
document.write("Hello World");
</script>
</body>
</html>
JavaScript dentro da tag body
Pop Up JavaScript “Hello World!”
<html>
<head>
<script type="text/javascript">
function message(){
alert("Function: Hello World"); }
</script>
</head>
<body onload="message()"> </body>
</html>
Declarando uma função em JavaScript
JavaScript dentro da tag head
JavaScript nas tags Head e Body
<html>
<head>
<script type="text/javascript"> function hello(){
alert("Function: Hello World");
}
</script> </head>
<body onload="hello()"> <script type="text/javascript">
<!-- document.write("Hello World"); -->
</script>
</body>
</html>
“Linked JavaScript” na tag Head
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body> </body>
</html>
function hello(){
alert("Function: Hello World");
}
script.js
Variáveis e tipos de dados
Regras para variáveis em JS
JavaScript é uma linguagem case-sensitive
( a e A são variáveis diferentes )
Variáveis necessitam iniciar com uma letra ou um underscore
Utilize a palavra-chave var para declarar (criar) uma variável
var usuario;
var _resultado;
var 2valor;
Variável Local x Global
Local Uma variável declarada dentro de uma função JavaScript torna-se LOCAL e pode ser acessada apenas dentro dessa função (variável de escopo local).
Pode-se ter variáveis locais como o mesmo nome em funções diferentes
São destruídas ao sair da função
GlobalVariáveis declaradas fora de uma função torna-se GLOBAL e todos os scripts e funções na página Web podem acessá-las
São destruídas quando se fecha a página do navegador.
Variáveis declaradas sem o var, sempre se tornam GLOBAIS
Declarando variáveis em JS
O exemplo abaixo apresenta a declaração de duas variáveis: x e carname.
Também é possível inicializar uma variável no momento da declaração
É possível também redeclarar uma variável. Neste caso, o valor original é perdido
var x;
var carname;
var x=5;
var carname=”fusca”;
x=5;
carname=”fusca”;=
x=5;
x;
Tipos de dados JavaScript
Numbers qualquer valor que possa ser calculado (positivo ou negativo).
Strings uma seqüência de caracteres
Boolean verdade ou falso (true e false).
Nullum valor vazio (ausência de valor).
Atenção: null é diferente de 0 (zero).
Numbers
Os números podem ser escritos em três bases:Base 10 (decimal)
exemplo: 56 (sem o zero)
Base 8 (octal)Exemplo: 056
o zero na frente representa um número em octal
Base 16 (hexadecimal)exemplo: ox5F ou OX5F
O zero x (ox) define um número em hexadecimal.
Numbers - ponto flutuante
7.2945 -34.2 2e3 =>2x103 => 2000 2e-3 => 2 x 10-3 => 0.002
Strings
Uma String é uma seqüência de caracteres:
"Hello!" // String declarada com aspas duplas ‘245‘ // String declarada com aspas simples "" // String vazia
Nota: Uma String vazia é diferente de Null
Boolean
Diferente de outras linguagens de programação o valor deum boolean é apenas true ou false
Em JavaScript, o valor zero (0) e um (1) não são considerados como true ou false
Null
O null é um tipo de dado que indica que uma variável não possui valorO valor null é retornado se você tentar utilizar uma variável que não foi definida e sem valorUm exemplo, se o usuário escolher cancelar, o null é retornado na função prompt:
function nome(){
alert(prompt("Nome","digite o seu nome"));
}
NaN (not a number)
Algumas funções retornam um valor especial chamado NaNÉ possível fazer um teste para verificar se um valor é um número ou não:
function notANumber(){
alert(isNaN("Hello"));
}
Operadores
Operadores artiméticos
“=” atribui valores a uma variável e “+” soma valores
considerando Y=5
y=5;z=2;x=y+z;
valor de x?
Operadores de atribuição
considerando x=10 e Y=5
Operador + faz adição e concatenação (usado em string)
Operadores de comparação
considerando x=5
Operadores lógicos
usados para determinar a lógica entre variáveis e valores
Comentários em JS
comentários em linha simples começam com //
em múltiplas linhas começam com /* e terminam com */
Exercício 1
Criar um formulário Web com apenas 1 botão com o valor “Mostrar o Alert box” que abra uma janela com a mensagem: “Olá Mundo! eu sou um Alert Box”, conforme exemplo abaixo:
Exercício 2
Procurar na Web uma solução para mostrar uma caixa de prompt e após a inserção do nome, dar as boas vindas!
Referências
Tutorial de JavaScript do W3Chttp://www.w3schools.com/js
JavaScript Datatypeshttp://www.sislands.com/coin70/week1/datatype.htm
Baseado no material do Prof Rodrigo Prestes Machado