Instituto Federal do Sertão-PE. Curso de JavaScript. Professor: Felipe Correia

(1)

Instituto Federal do Sertão-PE

(2)

Conteúdo

❖ Parte I! ❖ Introdução! ❖ Saída! ❖ Sintaxe! ❖ Declarações! ❖ Comentários! ❖ Variáveis ❖ Parte II! ❖ Tipos de dados! ❖ Funções! ❖ Escopo! ❖ Eventos! ❖ Strings

(3)

Conteúdo

❖ Parte III! ❖ Números! ❖ Operadores! ❖ Matemática! ❖ Datas! ❖ Vetores! ❖ Booleanos ❖ Parte IV! ❖ Conversão de tipos! ❖ Comparações! ❖ Condições! ❖ Switch! ❖ For! ❖ While

(4)

Conteúdo

❖ Parte V! ❖ Objetos - Construtor! ❖ HTML DOM! ❖ Browser BOM! ❖ Exemplos

(5)

Introdução

❖ JavaScript!

❖ É uma linguagem de programação que pode ser

incorporada diretamente em páginas HTML para adicionar mais interatividade!

❖ É uma linguagem do tipo client side, ou seja, funciona

(6)

Introdução

❖ Características do JavaScript!

❖ É uma linguagem de programação!

❖ Controla elementos interativos (ação do mouse,

menus, janelas e painéis de conteúdo)!

❖ Capaz de interpretar e modificar o conteúdo de um

elemento HTML!

❖ Usado para validar dados do usuário!

(7)

Introdução

❖ Camadas de desenvolvimento!

❖ A organização do desenvolvimento de projetos web em camadas

independentes confere flexibilidade e modularidade ao fluxo de trabalho

(8)

Introdução

❖ Exemplos:!

❖ Exemplo 1 - Validação de dados!

❖ Exemplo 2 - Alteração de atributos HTML!

(9)

Introdução

❖ A tag <script>!

❖ Para inserir um código em JS utiliza-se a tag <script>

function myFunction() {

document.getElementById("demo").innerHTML = "My First JavaScript Function"; }

(10)

Introdução

❖ Um código em JS é escrito para que seja executado

quando um evento ocorre!

❖ Usuário clica em um botão!

❖ Quando um código é colocado dentro de uma função,

(11)

Introdução

❖ Os scripts em JS podem ser colocados! ❖ Na seção <head>!

❖ Na seção <body>!

(12)

Introdução

❖ JS na seção <head> <!DOCTYPE html> <html> <head>  <script>  function myFunction() { 

document.getElementById("demo").innerHTML = "Paragraph changed.";  } 

</script>  </head> <body>

<p id="demo">A Paragraph</p>

(13)

Introdução

❖ JS na seção <body> <!DOCTYPE html> <html> <body> ! <h1>My Web Page</h1> !

<p id="demo">A Paragraph</p>

!

!

document.getElementById("demo").innerHTML = "Paragraph changed."; }

</script>

!

</body> </html>

(14)

Introdução

❖ JS em arquivo externo <!DOCTYPE html>! <html>! <body>! !

<h1>My Web Page</h1>!

!

<p id="demo">A Paragraph.</p>!

!

<button type="button" onclick="myFunction()">Try it</button>!

!

<p><strong>Note:</strong> myFunction is stored in an external file called "myScript.js".</p>!

!

!

</body>! </html>

(15)

Saída

❖ JavaScript não possui funções como print ou funções de

saída!

❖ O JS só pode ser utilizado para manipular tags HTML! ❖ Para acessar um elemento HTML a partir de um JS, o

método document.getElementById(id)!

❖ Para fins de teste, o programador pode utilizar o

método document.write(), para escrever diretamente no documento HTML

(16)

Sintaxe

❖ JavaScript é uma linguagem de programação de script!

❖ A sintaxe define como a linguagem é construída!

❖ Os seguintes elementos fazem parte da linguagem JS

❖ Palavras-chave! ❖ Identificadores! ❖ Comentários! ❖ Tipos de dados! ❖ Funções ❖ Literais! ❖ Variáveis! ❖ Operadores! ❖ Declarações

(17)

Sintaxe

❖ Literais! ❖ Números! ❖ Strings! ❖ Expressões! ❖ Vetores! ❖ Objetos! ❖ Funções 3.14 ! 1001 ! 123e5 "John Doe" ! 'John Doe' 5 + 6 ! 5 * 10 [40, 100, 1, 5, 25, 10]

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

(18)

Sintaxe

❖ Variáveis!

❖ As variáveis são utilizadas para armazenar valores!

❖ Em JS utiliza-se a palavra-chave var para definir uma

variável!

❖ O sinal de igual é usado para atribuir um valor a uma

variável

var length;

!

(19)

Sintaxe

❖ Operadores!

❖ JS utiliza operadores aritméticos para calcular valores! ❖ Como também um operador de atribuição

(5 + 6) * 10

x = 5; y = 6;

(20)

Sintaxe

❖ Declarações!

❖ As declarações são escritas como uma seqüência de

comandos executáveis!

❖ São separadas por ponto-e-vírgula (;)

x = 5 + 6; y = x * 10;

(21)

Sintaxe

❖ Identificadores!

❖ Todas as linguagens de programação devem

identificar suas variáveis com um nome único!

❖ Esses nomes são chamados de identificadores!

❖ Podem conter letras, dígitos, underscores e cifrão, mas

não podem começar com um número!

❖ Palavras reservadas não podem ser utilizadas como

(22)

Sintaxe

❖ Comentários!

❖ Qualquer coisa escrita depois de // é considerada

comentário e não será processado

(23)

Sintaxe

❖ Tipos de dados!

❖ As variáveis em JS podem armazenar vários tipos de

dados

var length = 16;

var points = x * 10;

var lastName = "Johnson";

var cars = ["Saab", "Volvo", "BMW"];

(24)

Sintaxe

❖ Funções!

❖ Declarações escritas dentro de uma função podem ser

utilizadas várias vezes!

❖ Chamar uma função significa pedir ao navegador

que execute o código que está dentro da função

function myFunction(a, b) {

return a * b; // returns the product of a and b

(25)

Sintaxe

❖ JavaScript é case sensitive!

❖ Todos os identificadores são case sensitive!

❖ As variáveis ultimonome e ultimoNome são

variáveis diferentes!

❖ As funções myFunction e myfunction, são duas

(26)

Declarações

❖ As declarações geralmente começam com um

identificador !

❖ Identificadores são palavras reservadas e não podem ser

utilizadas como nomes de variáveis

Declaração Descrição

break Termina um switch ou loop

do ... while Executa um bloco de declarações e repete o bloco enquanto a condição do while é verdadeira for Marca um bloco de declarações a serem executadas enquanto a condição é verdadeira

function Declara uma função

if ... else Marca um bloco de declarações a serem executadas dependendo da condição return Sai de uma função

(27)

Comentários

❖ Os comentários podem ser colocados em! ❖ Única linha!

❖ Múltiplas linhas!

var x = 5; // Declare x, give it the value of 5

var y = x + 2; // Declare y, give it the value of x + 2

/*

The code below will change the heading with id = "myH"

and the paragraph with id = "myP" in my web page:

(28)

Variáveis

❖ As variáveis são utilizadas para armazenar valores! ❖ Podem ter nomes simples (como x e y)!

❖ É recomendado que tenham nomes descritivos (idade,

soma, volume)!

❖ Os nomes das variáveis podem conter letras, dígitos,

(29)

Variáveis

❖ Os nomes das variáveis devem começar com uma letra! ❖ Também podem começar com $ e _!

❖ São case sensitive!

❖ Palavras reservadas não podem ser utilizadas como

(30)

Variáveis

❖ É possível declarar muitas variáveis em uma única

declaração!

❖ Basta começar a declaração com o identificador var e

separar as variáveis com uma vírgula!

❖ Esse tipo de declaração pode ser realizada em várias

linhas

var lastName = "Doe", age = 30, job = "carpenter"; var lastName = "Doe",

age = 30,

(31)

Variáveis

❖ Valor undefined!

❖ Variáveis declaradas sem atribuição de nenhum valor

possuem, por padrão, o valor undefined!

❖ O valor da variável carName a seguir possuirá o

valor undefined logo depois de sua execução

(32)

Variáveis

❖ Re-declaração de variáveis JS!

❖ Se o programador re-declarar a variável sem atribuir

um valor a ela, o valor não será alterado para undefined!

❖ No exemplo a seguir a variável permanece com o

valor “Volvo”

var carName = "Volvo"; var carName;

(33)

(34)

Tipos de dados

❖ A linguagem JavaScript possui tipos dinâmicos! ❖ Dependendo do valor atribuído à variável, ela se

adequa ao tipo do valor !

❖ JS suporta ❖ Strings! ❖ Números! ❖ Booleanos ❖ Vetores! ❖ Objetos! ❖ Null

(35)

Tipos de dados

var carName = "Volvo XC60"; // Usando aspas duplas var carName = 'Volvo XC60'; // Usando aspas simples

var x1 = 34.00; // Escrito com decimais var x2 = 34; // Escrito sem decimais var y = 123e5; // 12300000

var z = 123e-5; // 0.00123

var x = true; var y = false;

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; var cars; // Valor é undefined

(36)

Funções

❖ Uma função é um bloco de código designado para

realizar uma tarefa!

❖ A função é executada quando é chamada em algum

trecho do código!

❖ O nome de uma função pode conter letras, dígitos,

underscores, e cifrão

functionName(parameter1, parameter2, parameter3) {

code to be executed }

(37)

Funções

❖ Uma função será executada quando!

❖ Algum evento acontece (um usuário clica em um

botão)!

❖ Quando é invocada em um código! ❖ Automaticamente

(38)

Funções

❖ Retorno!

❖ Quando uma função alcança a declaração return, a

função para de executar!

❖ É possível utilizar o mesmo código várias vezes para

produzir resultados diferentes

var x = myFunction(4, 3);

!

function myFunction(a, b) { return a * b;

(39)

Escopo

❖ Em JavaScript, o escopo é o conjunto de variáveis,

objetos e funções que é possível ter acesso!

❖ As funções possuem escopo em JS!

❖ Local - são excluídas quando a função termina! ❖ Global - são excluídas quando se fecha a página! ❖ Automaticamente global

(40)

Escopo

// aqui nao eh possivel usar //carName

!

var carName = "Volvo"; !

// aqui eh possível

! }

var carName = " Volvo"; !

//aqui eh possível usar carName

!

function myFunction() { !

// aqui tambem eh possível

! }

// aqui eh possivel usar carName

!

function myFunction() { carName = "Volvo"; !

// aqui eh possível usar carName

! }

(41)

Eventos

❖ Eventos são ações que ocorrem em elementos HTML! ❖ O JavaScript pode reagir a partir desses eventos!

❖ Um evento HTML pode ser algum uma ação do navegador

ou do usuário!

❖ Exemplos!

❖ Uma página termina de carregar!

❖ Um campo de entrada sofre alguma mudança! ❖ Um botão foi clicado

(42)

Eventos

❖ O HTML permite a inserção de atributos tratadores de

eventos utilizando a linguagem JavaScript!

❖ A inserção pode ser feita com aspas simples ou aspas

duplas

<some-HTML-element some-event='some JavaScript'>

<some-HTML-element some-event="some JavaScript">

(43)

Eventos

❖ Alguns eventos comuns do HTML

Evento Descrição

onchange (ver exemplo) Um elemento HTML sofreu alteração

onclick O usuário clica em um elemento HTML

onmouseover O usuário move o mouse sobre um elemento HTML onmouseout O usuário retira o mouse do elemento HTML

onkeydown O usuário pressiona um tecla do teclado onload O navegador termina de carregar a página

(44)

Strings

❖ Podem ser utilizadas aspas simples ou aspas duplas

para criar uma string!

❖ Pode-se utilizar aspas dentro da string contanto que não

sejam iguais as aspas da própria string!

❖ É possível inserir aspas dentro da string utilizando o

caracter \

var carname = "Volvo XC60";

var carname = 'Volvo XC60';

var answer = "It's alright";

var answer = "He is called 'Johnny'";

var answer = 'He is called "Johnny"';

var answer = 'It\'s alright';

(45)

Strings

❖ Em JavaScript, as strings possuem métodos e

propriedades, assim como objetos

Propriedade Descrição

length Retorna o tamanho da string

Método Descrição

charAt() Retorna o caractere que está na posição especificada

concat() Joins two or more strings, and returns a copy of the joined strings

(46)

(47)

Números

❖ JavaScript possui apenas um tipo de número! ❖ Ponto flutuante de 64-bit!

❖ Número de precisão dupla, seguindo o padrão IEEE

754

Valor (Mantissa) Expoente Sinal

(48)

Número

❖ Precisão!

❖ Inteiros são considerados precisos até 15 dígitos!

❖ O número máximo de decimais é 17, mas a aritmética

não é 100% precisa!

❖ Existe um artifício para superar esse problema

var x = 999999999999999; // x will be 999999999999999 var y = 9999999999999999; // y will be 10000000000000000 var x = 0.2 + 0.1; // x will be 0.30000000000000004

(49)

Números

❖ Para colocar um número em hexadecimal, basta

iniciá-lo com 0x!

❖ Por padrão, JS apresenta os número na base 10!

❖ Para apresentar números em outras bases, basta usar o

método toString() var x = 0xFF; // x will be 255 var myNumber = 128; myNumber.toString(16); // returns 80 myNumber.toString(8); // returns 200 myNumber.toString(2); // returns 10000000

(50)

Números

❖ Infinity!

❖ Valor retornado quando um número excede o valor mais

alto possível!

❖ Também com a divisão por zero! ❖ NaN - isNaN!

❖ É uma palavra reservada que indica que um valor não é

um número!

(51)

Números

❖ Propriedades dos números

Propriedades Descrição

MAX_VALUE Retorna o maior valor possível em JS MIN_VALUE Retorna o menor valor possível

NEGATIVE_INFINITY Representa o -infinito (retornado em um overflow) NaN Representa um valor "Not-a-Number"

(52)

Números

❖ Métodos globais!

❖ Métodos de números

Number() Retorna um número, convertido pelo seu argumento

parseFloat() Retorna um número em ponto flutuante com base no argumento parseInt() Retorna um inteiro com base no argumento

toString() Retorna o número como string

toExponential() Retorna uma string de um número na notação exponencial

toFixed() Retorna uma string de um número com uma quantidade especificada de casas decimais

(53)

Operadores

❖ Os operadores podem ser ! ❖ Aritméticos!

❖ De atribuição! ❖ De string!

(54)

Operadores

❖ Aritméticos

Operator Description Example Result Result

+ Addition x = y + 2 y = 5 x = 7 - Subtraction x = y - 2 y = 5 x = 3 * Multiplication x = y * 2 y = 5 x = 10 / Division x = y / 2 y = 5 x = 2.5 % Modulus (division remainder) x = y % 2 y = 5 x = 1 ++ Increment x = ++y y = 6 x = 6 x = y++ y = 6 x = 5 -- Decrement x = --y y = 4 x = 4 x = y-- y = 4 x = 5

(55)

Operadores

❖ Atribuição

Operator Example Same As Result

= x = y x = y x = 5 += x += y x = x + y x = 15 -= x -= y x = x - y x = 5 *= x *= y x = x * y x = 50 /= x /= y x = x / y x = 2 %= x %= y x = x % y x = 0

(56)

Operadores

❖ De String!

❖ O operador + é utilizado para concatenar strings! ❖ É possível adicionar strings e números!

❖ O resultado é uma string

txt1 = "What a very"; txt2 = "nice day"; txt3 = txt1 + txt2; x = 5 + 5; y = "5" + 5; z= "Hello" + 5;

(57)

Operadores

❖ Bit-a-bit

Operator Description Example Same as Result Decimal

& AND x = 5 & 1 0101 & 0001 1 1

| OR x = 5 | 1 0101 | 0001 101 5

~ NOT x = ~ 5 ~0101 1010 10

^ XOR x = 5 ^ 1 0101 ^ 0001 100 4

<< Left shift x = 5 << 1 0101 << 1 1010 10 >> Right shift x = 5 >> 1 0101 >> 1 10 2

(58)

Operadores

❖ Outros operadores!

❖ typeof -> retorna o tipo da variável!

❖ delete -> remover propriedades de objetos!

❖ unário + -> converter uma variável em um número! ❖ Operadores lógicos!

(59)

Matemática

❖ O objeto Math permite a realização de tarefas

matemáticas em números!

❖ Um uso comum é a geração de números aleatórios!

❖ Outro uso é na busca pelo menor e maior valor em uma

lista de argumentos

Math.random(); // returns a random number

Math.min(0, 150, 30, 20, -8); // returns -8

(60)

Matemática

❖ Existem vários métodos

Method Description

abs(x) Returns the absolute value of x

acos(x) Returns the arccosine of x, in radians asin(x) Returns the arcsine of x, in radians

atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians atan2(y,x) Returns the arctangent of the quotient of its arguments

ceil(x) Returns x, rounded upwards to the nearest integer cos(x) Returns the cosine of x (x is in radians)

(61)

Matemática

❖ Existem vários métodos

log(x) Returns the natural logarithm (base E) of x max(x,y,z,...,n) Returns the number with the highest value min(x,y,z,...,n) Returns the number with the lowest value pow(x,y) Returns the value of x to the power of y random() Returns a random number between 0 and 1 round(x) Rounds x to the nearest integer

sin(x) Returns the sine of x (x is in radians) sqrt(x) Returns the square root of x

tan(x) Returns the tangent of an angle

(62)

Datas

❖ O objeto Date permite que o programador trabalhe com

datas!

❖ Quando um objeto Date é apresentado, ele é

automaticamente convertido para string!

❖ O método toDateString() converte uma data para um

formato mais resumido

var d = new Date();

document.getElementById("demo").innerHTML = d.toDateString();

(63)

Datas

❖ Métodos Get do objeto Date

getDate() Get the day as a number (1-31) getDay() Get the weekday a number (0-6) getFullYear() Get the four digit year (yyyy) getHours() Get the hour (0-23)

getMilliseconds() Get the milliseconds (0-999) getMinutes() Get the minutes (0-59)

getMonth() Get the month (0-11) getSeconds() Get the seconds (0-59)

(64)

Datas

❖ Métodos Set do objeto Date

setDate() Set the day as a number (1-31)

setFullYear() Set the year (optionally month and day yyyy.mm.dd) setHours() Set the hour (0-23)

setMilliseconds() Set the milliseconds (0-999) setMinutes() Set the minutes (0-59)

setMonth() Set the month (0-11) setSeconds() Set the seconds (0-59)

(65)

Vetores

❖ Um vetor é uma variável especial, que pode armazenar

mais de um valor ao mesmo tempo!

❖ As operações mais importantes sobre vetores são! ❖ Criação!

❖ Alteração (remover ou inserir)! ❖ Acesso aos elementos

(66)

Vetores

var array-name = [item1, item2, ...];

var name = cars[0];

cars[0] = "Opel";

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Lemon";

(67)

Vetores

❖ Características!

❖ É possível ter variáveis de diferentes tipos dentro de

um vetor!

❖ Vetores possuem propriedades (length) e métodos

(sort())!

❖ Vetores devem ser utilizados quando não é necessário

criar uma lista associativa (lista[“nome-do-elemento”])!

(68)

Vetores

❖ Propriedades

Property Description

constructor Returns the function that created the Array object's prototype

length Sets or returns the number of elements in an array

(69)

Vetores

❖ Métodos

concat() Joins two or more arrays, and returns a copy of the joined arrays

indexOf() Search the array for an element and returns its position

join() Joins all elements of an array into a string

lastIndexOf() Search the array for an element, starting at the end, and returns its position

pop() Removes the last element of an array, and returns that element

push() Adds new elements to the end of an array, and returns the new length

reverse() Reverses the order of the elements in an array

shift() Removes the first element of an array, and returns that element

slice() Selects a part of an array, and returns the new array

sort() Sorts the elements of an array

splice() Adds/Removes elements from an array

toString() Converts an array to a string, and returns the result

(70)

Booleanos

❖ Um booleano representa um de dois valores: verdadeiro

(true) e falso (false)!

❖ Função booleana! ❖ Boolean(x>10)! ❖ (10>9)!

❖ 10>9!

❖ Todos os valores reais são verdadeiros!

(71)

Booleanos

100! ! 3.14! ! -15! ! "Hello"! ! "false"! ! 7 + 1 + 3.14! ! 5 < 6 var x = 0! ! var x = -0! ! var x = “”! ! var x;! ! var x = null;! ! var x = false;! ! var x = 10/ “H”

(72)

(73)

Operadores

(74)

Operadores

(75)

Operadores

(76)

Condições

❖ if…else if…else

if (condition1) {!

block of code to be executed if condition1 is true! } else if (condition2) {!

block of code to be executed if the condition1 is false and condition2 is true! } else {!

block of code to be executed if the condition1 is false and condition2 is false! }

(77)

Condições

❖ switch switch(expression) {! case n:! code block! break;! case n:! code block! break;! default:!

default code block! }

(78)

Laços

❖ O JavaScript suporta diferentes tipos de laços! ❖ for - um bloco é executado várias vezes!

❖ for/in - o laço é executado sobre as propriedades de

um objeto!

❖ while - um bloco é executado várias vezes enquanto

uma condição é verdadeira!

❖ do/while - a diferença para o while é que, na primeira

(79)

Laço for

❖ O laço for é implementado com três declarações!

! !

❖ O laço for..in itera sobre as propriedades de um objeto

for (i = 0; i < 5; i++) {!

text += "The number is " + i + "<br>";! }

var person = {fname:"John", lname:"Doe", age:25}; ! ! var text = "";! var x;! for (x in person) {! text += person[x];! }

(80)

Laço while

❖ O laço while itera sobre um bloco de código somente se

um condição especificada for verdadeira!

! !

❖ O laço do…while executa o código uma vez, antes de

checar se a condição é verdadeira

while (i < 10) {!

text += "The number is " + i;! i++;!

}

do {!

text += "The number is " + i;! i++;!

}!

(81)

(82)

Objetos

❖ Objetos são dados com propriedades e métodos

adicionados!

❖ As propriedades são valores associados ao objeto! ❖ Os métodos são ações que o objeto pode realizar

Objetos Propriedades Métodos

! car.name = Fiat ! car.model = 500 ! car.weight = 850kg ! car.color = white ! car.start() ! car.drive() ! car.brake() ! car.stop()

(83)

Objetos

❖ Em JavaScript, a maioria dos elementos são tratados

como objetos (dados, vetores, strings, funções)!

❖ O programador pode criar seus próprios objetos! ❖ Exemplo:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" };

(84)

Objetos

❖ É possível acessar as propriedades de um objeto de duas

formas

person.lastName; person["lastName"];

❖ É possível acessar os métodos de um objeto da seguinte

forma

objectName.methodName()

(85)

Objetos

❖ Criando um objeto usando um construtor

function person(first, last, age, eyecolor) {! this.firstName = first;!

this.lastName = last;! this.age = age;!

this.eyeColor = eyecolor;! }!

var myFather = new person("John", "Doe", 50, "blue");! var myMother = new person("Sally", "Rally", 48, "green");

(86)

Objetos

❖ A definição de métodos é feita dentro do construtor

function person(firstname, lastname, age, eyecolor) {! this.firstname = firstname; !

this.lastname = lastname;! this.age = age;!

this.eyecolor = eyecolor;!

this.changeName = function (name) {! this.lastname = name;!

}! }

(87)

HTML DOM

❖ Quando uma página web é carregada, o navegador cria

um Modelo de Objeto do Documento (Document

(88)

HTML DOM

❖ Com o modelo de objeto, o JS tem a possibilidade de criar páginas

HTML dinâmicas!

❖ Modificando elementos HTML!

❖ Modificando atributos HTML!

❖ Modificando os estilos CSS!

❖ Removendo elementos e atributos existentes!

❖ Adicionando elementos e atributos!

❖ Reagindo a eventos!

(89)

HTML DOM

❖ O HTML DOM é um padrão, concebido pelo W3C, que

estabelece as formas de acessar, modificar, adicionar ou remover elementos HTML!

❖ O DOM pode ser acessado com o JS!

❖ Todos os elementos HTML são definidos como objetos! ❖ Portanto, possuem propriedades e métodos

(90)

HTML DOM

❖ No DOM, o objeto document representa a página web! ❖ Ele é o pai de todos os outros objetos na página!

❖ Se o programador deseja acessar os outros objetos, ele

(91)

HTML DOM

❖ Existe outros métodos!

❖ document.getElementById()! ❖ document.getElementsByClassName()!! ❖ document.createElement()! ❖ document.removeChild()!! ❖ document.appendChild()!! ❖ document.replaceChild()! ❖ document.write(text)

(92)

HTML DOM

❖ O primeiro HTML DOM, de 1998, definiu 11 objetos,

coleção de objetos e propriedades!

❖ A última versão do DOM, DOM 3, possui mais objetos,

(93)

(94)

Browser DOM

❖ O Modelo de Objeto do Navegador (Browser Object Model -

BOM) permite que o JS se comunique com o navegador!

❖ Não existe padrão oficial para o BOM!

❖ Existe vários objetos do navegador que podem ser configurados

❖ navigator! ❖ popup alert! ❖ timing ! ❖ cookies ❖ window! ❖ screen ! ❖ location! ❖ history