JavaScript Introdução

parte 1

Prof Evandro Manara Miletto

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?

Java
Java 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

JavaScript dentro da tag body

<html>
<head> </head>
<body>
<script type="text/javascript">
document.write("Hello World");
</script>
</body>
</html>

Pop Up JavaScript “Hello World!”

JavaScript dentro
da tag head Declarando uma função
em JavaScript
<html>
<head>
<script type="text/javascript">
function message(){
alert("Function: Hello World"); }
</script>
</head>
<body onload="message()"> </body>
</html>

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">

</script>
</body>
</html>

“Linked JavaScript” na tag Head
<html>

<head>

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

</head>

<body> </body>

</html>

script.js
function hello(){

alert("Function: Hello World");

}

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

Global
Variá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. var x;
var carname;

Também é possível inicializar uma variável no momento da
declaração var x=5; x=5;

var carname=”fusca”;
= carname=”fusca”;

É possível também redeclarar uma variável. Neste caso, o
valor original é perdido
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).

Null
um 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 de
um 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
valor
O valor null é retornado se você tentar utilizar uma variável que
não foi definida e sem valor
Um 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 artiméticos

“=” atribui valores a uma variável e “+” soma valores
y=5;
z=2;
x=y+z;
valor de x?
considerando Y=5

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 W3C
http://www.w3schools.com/js

JavaScript Datatypes
http://www.sislands.com/coin70/week1/datatype.htm

Baseado no material do Prof Rodrigo Prestes Machado

JavaScript Introdução

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (8)

Semelhante a JavaScript Introdução

Semelhante a JavaScript Introdução (20)

Mais de Evandro Manara Miletto

Mais de Evandro Manara Miletto (20)

JavaScript Introdução