introdução ao javascript e dom

17
Introdução ao JavaScript e DOM Romualdo André da Costa Engenheiro de Computação - UEFS

Upload: romualdo-andre

Post on 11-Jul-2015

415 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Introdução ao JavaScript e DOM

Introdução ao JavaScript e DOM

Romualdo André da CostaEngenheiro de Computação - UEFS

Page 2: Introdução ao JavaScript e DOM

Sumário

● Um pouco de história● Características● Como isso funciona?● Declarando uma variável● Expressões● Laços● Decisões● Arrays

Page 3: Introdução ao JavaScript e DOM

Sumário

● Usando JavaScript● DOM● Interação entre JavaScript e DOM

Page 4: Introdução ao JavaScript e DOM

Um pouco de história

● No início, as páginas eram estáticas● Brendan Eich● Mocha → LiveScript → JavaScript● Netscape 2.0: 1995● Baseado em ECMAScript

Page 5: Introdução ao JavaScript e DOM

Características

● Imperativa e Estruturada● Dinâmica● Baseada em objetos● Funcional● Vários ambientes: web, desktop, servidor

Page 6: Introdução ao JavaScript e DOM

Como isso funciona?

Page 7: Introdução ao JavaScript e DOM

Declarando uma variável

● var number=2;● var floatNumber=3.14;● var name=”Dr. Light”;● var isValid=false;● var cupsOfBeer;

Page 8: Introdução ao JavaScript e DOM

Declarando uma variável

● Comece o nome com uma letra, _ ou $● Depois use qualquer letra, número, _, $● Evite as palavras reservadas● Escolha nomes significativos● CamelCase● Use $ e _ apenas com bom motivo: convenção

utilizada em algumas bibliotecas

Page 9: Introdução ao JavaScript e DOM

Expressões

● var scoop=scoop-1;● var x=Math.random() * 10;● var ipi=0;● var full=volume >= 10;● var greeting=”Hello ”+name;

Page 10: Introdução ao JavaScript e DOM

Laços

var enemys=100;

while (enemys > 0){

shootEnemy();

enemys=enemys-1;}

Page 11: Introdução ao JavaScript e DOM

Laços

for(var cups=0; cups<10;cups++){

drinkBeer();

}

alert(“you cannot drive!”);

Page 12: Introdução ao JavaScript e DOM

Decisõesif(hour < 10){

alert(“Chegou cedo!”)

}

else if(hour == 10){

alert(“na hora!”);

}

else{

alert(“Atrasado!”)

}

Page 13: Introdução ao JavaScript e DOM

Arrays

var sabores=new Array();

sabores[0]=”chocolate”;

sabores[1]=”creme”;

var androids=[16,17,18,19,20];

var len=androids.length;

Page 14: Introdução ao JavaScript e DOM

Usando JavaScript

● O script pode ficar dentro do <head>● Referenciar um arquivo separado dentro do

<head>● Colocar o script ou a referencia ao arquivo

dentro do <body>● Exemplo nos arquivos hello.html e hello.js

Page 15: Introdução ao JavaScript e DOM

DOM

document

html

head

title

Hello

script

window.onload=hello;

Input id=”nome”

Page 16: Introdução ao JavaScript e DOM

Interação entre JavaScript e DOM

● Ver arquivos hello.html e hello.js

Page 17: Introdução ao JavaScript e DOM

Referências

● Head First: HTML5 Programming● JavaScript: a bíblia● World Wide Web: Como programar