Apostila

1.
JavaScript
O JavaScript uma linguagem cliente que permite criar pginas dinmicas
utilizando a linguagem para manipular o HTML e CSS existente em uma pgina.
Verses do JavaScript
Tabela 1 Verses do JavaScript e do Navigator
verso JavaScript
verso Navigator
JavaScript 1.0
Navigator 2.0
JavaScript 1.1
Navigator 3.0
JavaScript 1.2
Navigator 4.0-4.05
JavaScript 1.3
Navigator 4.06-4.7x
JavaScript 1.4
JavaScript 1.5
Navigator 6.0
Mozilla (navegador open source)
JavaScript 1.6
Firefox 1.5, outros produtos baseados no Mozilla 1.8
JavaScript 1.7
Firefox 2, outros produtos baseados no Mozilla 1.8.1
JavaScript 1.8
Firefox 3, outros produtos baseados no Gecko 1.9
Abaixo est o cdigo do primeiro exemplo utilizando javascript de forma interna no

arquivo, deve-se criar o arquivo exemplo01.html
Depois de digitar o cdigo abra no navegador, dever mostrar est mensagem abaixo.
Separando o cdigo JavaScript do HTML adicionando em arquivo externo, deve-se

criar um arquivo chamado script.js e acrescentar o cdigo abaixo.
Logo aps deve-se criar um arquivo exemplo02.html e adicionar o cdigo abaixo
Acrescentando no HEAD o script ser carregado antes do corpo da pgina, porem h

possibilidade de acrescentar dentro do <BODY> para que seja carregado
posteriormente.
Quanto se utiliza o Chrome existe a ferramenta Chrome DevTools que auxilia o

desenvolvedor a depurar o cdigo javascript e monitorar o funcionamento da pgina.
Acrescente o contedo entre a TAG <BODY>
O JavaScript permite a criao de variveis para serem utilizadas durante as interaes

com a pgina.
Valores
O JavaScript reconhece os seguintes tipos de valores:
Nmeros (en), como 42 ou 3,14159

Valores lgicos (Booleanos) (en), true ou false
Strings (en), tais como "Howdy!"
null, um palavra chave especial denotando um valor nulo; null tambm um valor
primitivo. Como JavaScript sensvel a maisculas, null no a mesma coisa
que Null, NULL, ou qualquer outra variante
undefined (en), uma propriedade de alto nvel a qual possui o valor

indefinido; undefined tambm um valor primitivo.
O JavaScript uma linguagem de tipagem dinmica. Isto significa que no necessrio

especificar o tipo de dado de uma varivel quando ela for declarada, e tipos de dados
so automaticamento convertidos conforme necessrio durante a execuo do script.
Ento, por exemplo, pode-se definir uma varivel como:
E depois, pode-se atribuir para a mesma varivel um valor de string, por exemplo:
Como o JavaScript possui tipagem dinmica, esta atribuio no gera uma mensagem
de erro.
Em expresses envolvendo valores numricos e strings com o operador +, o JavaScript
converte valores numrios para string. Por exemplo, considere as seguintes declaraes:
Em declaraes envolvendo outros operadores, o JavaScript no converte valores

numrico para strings. Por exemplo:
Avaliao de variveis
Uma variveis declarada usando-se a declarao var sem possuir um valor inicial
especificado possui o valor undefined.
Uma tentativa de acesso a uma varivel no declarada resultar no lanamento de uma
exceo ReferenceError:
Voc pode usar undefined para determinar quando uma varivel possui um valor. No
cdigo a seguir, a varivel input no possui um valor atribudo e a declarao if
avaliada como true.
undefined comporta-se como false quando usado em um contexto booleano.
Quando voc avalia uma varivel nula, o valor nulo comporta-se como um 0 no
contexto numrico e como falso em contextos booleanos. Por exemplo
O exemplo a seguir cria uma ordenao lista de cafe com trs elementos e o comprimento de trs:
Operadores lgicos que podem ser utilizados no JavaScript so:
Eventos existentes na pgina para interao de usurio:
onclick: clica com o mouse
ondblclick: clica duas vezes com o mouse
onmousemove: mexe o mouse
onmousedown: aperta o boto do mouse
onmouseup: solta o boto do mouse (til com os dois acima para gerenciar
drag'n'drop)
onkeypress: ao pressionar e soltar uma tecla
onkeydown: ao pressionar uma tecla.
onkeyup: ao soltar uma tecla. Mesmo acima.
onblur: quando um elemento perde foco
onfocus: quando um elemento ganha foco
onchange: quando um input, select ou textarea tem seu valor alterado
onload: quando a pgina carregada
onunload: quando a pgina fechada
onsubmit: disparado antes de submeter o formulrio. til para realizar

validaes
Percorrendo um vetor
var pessoas = ["Joo", "Jos", "Maria",
"Sebastio", "Antnio"];
for (var i = 0; i < pessoas.length; i++) {
alert(pessoas[i]);
}
EXERCCIOS
OPCIONAIS: FIXAO DE SINTAXE
Os prximos exerccios so opcionais e mostram mais aspectos de lgica de

programao com algoritmos usando JavaScript.
1.
Escreva um cdigo que mostre os nmeros mpares entre 1 e 10.
2.
Escreva um cdigo que calcule a soma de 1 at 100. (obs: a resposta 5050)
3.
Crie um Array igual ao abaixo e mostre apenas os nomes das pessoas que
tenham 4 letras.
4.
var pessoas = ["Joo", "Jos", "Maria", "Sebastio", "Antnio"];

Dica: use o atributo length das Strings.
Capturando uma tag e alterando propriedade:
Apresentando a data em vrios formatos.
Funes que podem abrir outras pginas
Exemplo de troca de imagem atravs de evento
Criando minha primeira funo de calculo:
/////ADD Cdigo do formulrio

Table 2.1 JavaScript special characters
Character
Meaning
\b
Backspace
\f
Form feed
\n
New line
\r
Carriage return
Table 2.1 JavaScript special characters

Character
Meaning
\t
Tab
\v
Vertical tab
\'
Apostrophe or single quote
\"
Double quote
\\
Backslash character
The character with the Latin-1 encoding specified by up to three octal
\XXX
digits XXXbetween 0 and 377. For example, \251 is the octal sequence for
the copyright symbol.
The character with the Latin-1 encoding specified by the two

\xXX
hexadecimal digitsXX between 00 and FF. For example, \xA9 is the

hexadecimal sequence for the copyright symbol.
The Unicode character specified by the four hexadecimal digits XXXX. For
\uXXXX
example, \u00A9 is the Unicode sequence for the copyright symbol.

See Unicode escape sequences.
Utilizando o For estrutura simples

var step;
for (step = 0; step < 5; step++) {
// Runs 5 times, with values of step 0 through 4.
console.log('Walking east one step');
}
Utilizando o For junto com o <SELECT>

<script>
function howMany(selectObject) {
var numberSelected = 0;
for (var i = 0; i < selectObject.options.length; i++) {
if (selectObject.options[i].selected) {
numberSelected++;
}
}
return numberSelected;
}
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
alert('Number of options selected: ' +
howMany(document.selectForm.musicTypes))
});
</script>
<form name="selectForm">
<p>
<label for="musicTypes">Choose some music types, then click the button
below:</label>
<select id="musicTypes" name="musicTypes" multiple="multiple">
<option selected="selected">R&B</option>
<option>Jazz</option>
<option>Blues</option>
<option>New Age</option>
<option>Classical</option>
<option>Opera</option>
</select>
</p>
<p><input id="btn" type="button" value="How many are selected?" /></p>
</form>
Estrutura DO WHILE
do {
i += 1;
console.log(i);
} while (i < 5);
Estrutura do WHILE
n = 0;
x = 0;
while (n < 3) {
n++;
x += n;
}
FOR que percorre Objetos.
for (variable of object) {

statement
}
Exemplo abaixo mostra a diferena entre o for...of loop e o for...in loop. Enquanto o
for...in faz a interao com o nome das propriedades, for...of faz a interao com o os
valores das propriedades.
let arr = [3, 5, 7];
arr.foo = "hello";
for (let i in arr) {
console.log(i); // logs "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // logs "3", "5", "7"
}
Criando uma variavel com funo

var square = function(number) { return number * number };
var x = square(4) // x gets the value 16
Exemplo de um objeto Carro utilizando uma funo que altera o valor

do objeto.
function myFunc(theObject) {
theObject.make = "Toyota";
}
var mycar = {make: "Honda", model: "Accord", year: 1998};
var x, y;
x = mycar.make; // x gets the value "Honda"
myFunc(mycar);
y = mycar.make; // y gets the value "Toyota"
// (the make property was changed by the function)
Criando funo de escopo
// The following variables are defined in the global scope

var num1 = 20,
num2 = 3,
name = "Chamahk";
// This function is defined in the global scope
function multiply() {
return num1 * num2;
}
multiply(); // Returns 60
// A nested function example
function getScore () {
var num1 = 2,
num2 = 3;
function add() {
return name + " scored " + (num1 + num2);
}
return add();
}
getScore(); // Returns "Chamahk scored 5"
Multiplas funes
function A(x) {
function B(y) {
function C(z) {
console.log(x + y + z);
}
C(3);
}
B(2);
}
A(1); // logs 6 (1 + 2 + 3)
Criando um objeto JavaScript com metodos GET e SET tornando a propriedade

do objeto privada.
Exemplo 1
var pet = function(name) { // The outer function defines a variable called "name"
var getName = function() {
return name;
the outer function
}
return getName;
scopes
},
myPet = pet("Vivie");
// The inner function has access to the "name" variable of
// Return the inner function, thereby exposing it to outer
myPet();
Exemplo 2
var createPet = function(name) {
var sex;
return {
setName: function(newName) {
name = newName;
},
getName: function() {
return name;
},
getSex: function() {
return sex;
},
setSex: function(newSex) {
if(typeof newSex == "string" && (newSex.toLowerCase() == "male" ||
newSex.toLowerCase() == "female")) {
sex = newSex;
}
}
}
}
var pet = createPet("Vivie");
pet.getName();
// Vivie
pet.setName("Oliver");
pet.setSex("male");
pet.getSex();
pet.getName();
var person
=
eyeColor:"blue"};
// male
// Oliver
{firstName:"John",
lastName:"Doe",
age:50,
//////****
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
//////****
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");
Funes pr-definidas
eval()
O eval() metodo que transforma String em objetos java script.

uneval()
O uneval() metodo cria uma String com base em um objeto
isNaN()
Testa se um determinado valor numero

parseFloat()
O parseFloat() converte String em Float

parseInt()
O parseInt() converte String em Integer

decodeURI()
var uri = "my test.asp?name=stle&car=saab";

var enc = encodeURI(uri);
var dec = decodeURI(enc);

var res = enc + "<br>" + dec;
encodeURI()
var uri = "my test.asp?name=stle&car=saab";

var res = encodeURI(uri);
my%20test.asp?name=st%C3%A5le&car=saab
// Encoded URI
my test.asp?name=stle&car=saab
// Decoded URI
Objetos Javascript Nativos

var
var
var
var
var
var
var
var
x1
x2
x3
x4
x5
x6
x7
x8
=
=
=
=
=
=
=
=
new
new
new
new
new
new
new
new
Object(); // A new Object object

String(); // A new String object
Number(); // A new Number object
Boolean() // A new Boolean object
Array();
// A new Array object
RegExp(); // A new RegExp object
Function(); // A new Function object
Date();
// A new Date object
Variaveis bsicas
var
var
var
var
var
var
var
x1
x2
x3
x4
x5
x6
x7
=
=
=
=
=
=
=
{};
// new object
"";
// new primitive string
0;
// new primitive number
false;
// new primitive boolean
[];
// new array object
/()/
// new regexp object
function(){}; // new function object
Referncias
http://www.caelum.com.br/apostila-html-css-javascript/javascript-e-interatividade-naweb/#5-5-interatividade-na-web
https://developer.mozilla.org/pt-PT/docs/Web/JavaScript/Guia/Valores,_Vari
%C3%A1veis_e_Literais
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
https://fit.faccat.br/~fpereira/aula_javascript/16_exercicios_praticos_html_js_PROT.pd
f
http://www.w3schools.com/jsref/jsref_obj_math.asp

Apostila

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apostila

Transféré par

Droits d'auteur :

Formats disponibles

1.

Firefox 1.5, outros produtos baseados no Mozilla 1.8

Firefox 2, outros produtos baseados no Mozilla 1.8.1

Firefox 3, outros produtos baseados no Gecko 1.9

Abaixo est o cdigo do primeiro exemplo utilizando javascript de forma interna no

Separando o cdigo JavaScript do HTML adicionando em arquivo externo, deve-se

Logo aps deve-se criar um arquivo exemplo02.html e adicionar o cdigo abaixo

Acrescentando no HEAD o script ser carregado antes do corpo da pgina, porem h

Quanto se utiliza o Chrome existe a ferramenta Chrome DevTools que auxilia o

Acrescente o contedo entre a TAG <BODY>

O JavaScript permite a criao de variveis para serem utilizadas durante as interaes

Nmeros (en), como 42 ou 3,14159

undefined (en), uma propriedade de alto nvel a qual possui o valor

O JavaScript uma linguagem de tipagem dinmica. Isto significa que no necessrio

Em declaraes envolvendo outros operadores, o JavaScript no converte valores

undefined comporta-se como false quando usado em um contexto booleano.

Operadores lgicos que podem ser utilizados no JavaScript so:

Eventos existentes na pgina para interao de usurio:

onclick: clica com o mouse

ondblclick: clica duas vezes com o mouse

onmousemove: mexe o mouse

onmousedown: aperta o boto do mouse

onkeypress: ao pressionar e soltar uma tecla

onkeydown: ao pressionar uma tecla.

onkeyup: ao soltar uma tecla. Mesmo acima.

onblur: quando um elemento perde foco

onfocus: quando um elemento ganha foco

onchange: quando um input, select ou textarea tem seu valor alterado

onload: quando a pgina carregada

onunload: quando a pgina fechada

onsubmit: disparado antes de submeter o formulrio. til para realizar

OPCIONAIS: FIXAO DE SINTAXE

Os prximos exerccios so opcionais e mostram mais aspectos de lgica de

Escreva um cdigo que mostre os nmeros mpares entre 1 e 10.

Escreva um cdigo que calcule a soma de 1 at 100. (obs: a resposta 5050)

var pessoas = ["Joo", "Jos", "Maria", "Sebastio", "Antnio"];

Capturando uma tag e alterando propriedade:

Apresentando a data em vrios formatos.

Funes que podem abrir outras pginas

Exemplo de troca de imagem atravs de evento

Criando minha primeira funo de calculo:

/////ADD Cdigo do formulrio

Table 2.1 JavaScript special characters

Apostrophe or single quote

The character with the Latin-1 encoding specified by the two

hexadecimal digitsXX between 00 and FF. For example, \xA9 is the

example, \u00A9 is the Unicode sequence for the copyright symbol.

Utilizando o For estrutura simples

Utilizando o For junto com o <SELECT>

FOR que percorre Objetos.

for (variable of object) {

Criando uma variavel com funo

Exemplo de um objeto Carro utilizando uma funo que altera o valor

Criando funo de escopo

// The following variables are defined in the global scope

Criando um objeto JavaScript com metodos GET e SET tornando a propriedade

// The inner function has access to the "name" variable of

// Return the inner function, thereby exposing it to outer

O eval() metodo que transforma String em objetos java script.

O uneval() metodo cria uma String com base em um objeto

Testa se um determinado valor numero

O parseFloat() converte String em Float

O parseInt() converte String em Integer

var uri = "my test.asp?name=stle&car=saab";