Java Script

JavaScript
Introduo
Javascript uma das linguagens mais importantes de nosso tempo,
justamente por ser entendida pelos mais diversos navegadores
(desktop/mobile) sem a necessidade de instalao de plugins ou qualquer
outro artifcio.
Alm de ser a lingua franca da web, ela cada vez mais usada em
servidores web devido ao sucesso do Node.js que revigorou a ideia de se
trabalhar com esta linguagem no lado do servidor, algo que a Netscape
havia tentado no passado, mas que no emplacou.
H ainda smartphones que permitem criar aplicativos com Javascript como

Firefox OS e Windows Phone 8.
O padro ECMASCRIPT
O nome Javascript esta no coletivo imaginrio dos desenvolvedores, mas na

verdade a linguagem segue o padro ECMA-262. Este padro foi criado para
tentar unificar a sintaxe e garantir a compatibilidade entre os diversos
navegadores do mercado.
Voc aprender neste treinamento a sintaxe do ECMASCRIPT verso 5,

permitindo aplicar seu conhecimento em qualquer plataforma que suporte a
linguagem, sejam elas navegadores, smartphones ou servidores que
suportem este padro.
Navegador como plataforma
Javascript uma linguagem interpretada, isto , os scripts so lidos linha a

linha e cada instruo traduzida por um interpretador. Para facilitar seu
aprendizado e dispensar qualquer configurao extra em sua mquina,
utilizaremos o Google Chrome como plataforma, ele ser nosso ambiente de
execuo de Javascript.
Escolhemos o Chrome, mas nada impede que voc escolha outro navegador
como Firefox, Safari, entre outros. O importante que o navegador
escolhido suporte o ECMASCRIPT 5, padro suportado por navegadores
modernos.
Preparando o ambiente e consideraes gerais
Independente do sistema operacional que voc use ou editor de texto

favorito, por uma questo de organizao, sugerimos que voc crie uma
pasta com o nome alura-js com a finalidade de armazenar as pginas que
forem pedidas ao longo dos captulos.
Qual editor de texto usar? Aquele que voc j domina, claro! At mesmo o
mais simples dos editores suficiente para o seu treinamento. Nos vdeos o
instrutor estar utilizando o Sublime Text 2 para Ubuntu.
Ao decorrer do curso, utilizaremos uma pgina HTML com o ttulo do

captulo em questo, ela deve ser criada na pasta alura-js com o nome
introducao.html e com a seguinte estrutura:


<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Javascript, a linguagem</title>
</head>
<body>
<h1>Introduo</h1>
</body>
</html>
Ah, no se esquea de que "grandes poderes trazem grandes

responsabilidades" e que o aprendizado da linguagem Javascript abrir
novas portas para voc, seja no desenvolvimento web, mobile ou no lado do
servidor.
Como o browser interpreta seu cdigo
Vimos que a linguagem Javascript pode ter diferentes hospedeiros e que

neste treinamento usaremos o seu navegador que no necessita maiores
configuraes. Ainda sem entrar nos detalhes da linguagem, se quisermos
exibir na tela uma alert com o texto "bem-vindo" podemos usar o seguinte
script:
alert("bem-vindo");
E agora? Onde adicionar esse cdigo em nossa pgina? Que tal

adicionarmos dentro da tag <body> da pgina introducao.html que
criamos? Veremos o que acontece quando colocamos um cdigo Javascript
dentro de uma pagina html normalmente:

<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<h1>Introduo</h1>
alert("bem-vindo");
</body>
</html>
Quando visualizamos a pgina (basta dar dois cliques sobre o arquivo),

vemos que nosso script exibido como texto, isto , o navegador no fez
nenhum tratamento especial para interpretar aquele cdigo como um script:
cdigo no interpretado pelo navegador
Faz todo sentido, j que criamos uma pgina HTML que est preparada para
exibir contedo em forma de texto.
A tag SCRIPT
Precisamos dar uma pista para que o navegador deixe de olhar aquele
trecho de cdigo como HTML e comece a v-lo como um script que deve ser
interpretado. Para isso, usamos a tag <script>:

<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<h1>Introduo</h1>
<script>
alert("bem-vindo");
</script>
</body>
</html>
Cdigo interpretado pelo navegador
Agora sim! Quando a pgina recarregada no navegador (voc pode

recarreg-la pressionando F5 ou CTRL + R) nosso trecho de script
interpretado como um cdigo e no como contedo qualquer da pgina e o
alerta exibido.
A tag <script> pode ser tanto adicionada dentro da tag <head> ou logo
antes do fechamento da tag <body>. Neste treinamento trabalharemos
sempre com a tag <script> como ultimo elemento da tag <body>.
Para testar a tag <script>, voc tambm pode usar o comando prompt, que
ir exibir uma janela pedindo que voc digite um texto qualquer:
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<h1>Introduo</h1>
<script>
prompt();
</script>
</body>
</html>
Note que nessa janela est escrito undefined em cima do campo, isso
acontece pois voc no informou qual texto deve aparecer. Para inform-lo,
basta pass-lo dentro do parenteses. No exemplo abaixo, o texto que
aparecer ser "Digite seu nome":
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<h1>Introduo</h1>
<script>
prompt("Digite seu nome");
</script>
</body>
</html>
Legal! Mas de que adianta voc digitar seu nome se essa informao
perdida logo em seguida, certo? Ns podemos, a fim de evitar esta perda,
armazenar o que o usurio digitar em uma varivel(no se preocupe com a
sintaxe por enquanto, no proximo captulo iremos entender variveis bem
mais profundamente):
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<h1>Introduo</h1>
<script>
var nome = prompt("Digite seu nome");
</script>
</body>
</html>
Agora voc pode, inclusive, mostrar o seu nome em um alert:
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<h1>Introduo</h1>
<script>
var nome = prompt("Digite seu nome");
alert(nome);
</script>
</body>
</html>
HTML 5 e a tag <SCRIPT>
Um ponto importante aqui que voc pode j ter visto a declarao da tag
<script> utilizando o atributo type:
<script type="text/Javascript">
</script>
Quando utlizando o padro HTML5, no somos obrigados a adicionar o

atributo type. Para isso, precisamos dizer ao navegador que estamos
utilizando HTML5, o que pode ser feito utilizando-se a tag abaixo no inicio do
seu html:
<DOCYTYPE html>
Apesar do Javascript ser um mundo diferente do HTML, com esta declarao

precisamos digitar menos em nossa tag script, algo que muito bem-vindo,
no?
Interagindo com o console
Quando programando em Javascript, ns podemos utilizar o comando alert

citado anteriormente para mostrar coisas na tela. Se quisermos mostrar
duas informaes ao mesmo tempo, podemos utilizar dois alerts:
<script>
alert("primeiro");
alert("segundo");
</script>
Porm, ao rodar esse cdigo voc perceber que o segundo alert s aparece
aps termos fechado o primeiro, o que o torna pouco prtico. Alm disso, o
alert um comando que existe apenas no navegador, ou seja, no
funcionar caso usado em outras plataformas como o Node.js, por exemplo.
Por esse motivo, o substituiremos pelo comando: console.log
<script>
console.log("bem-vindo");
</script>
No lugar de exibir uma janela na tela, a instruo console.log imprime no

console do navegador(ou do servidor caso tivssemos rodando nosso cdigo
nele). O problema que se recarregarmos a pgina nada exibido! Como
assim?
No se preocupe, o texto foi mostrado no console, ns s precisamos abrlo! Para isso o atalho no Windows e Linux: CONTROL + SHIFT + J ou no MAC
OS CMD + OPT + J). Para escond-lo, basta executar a mesma tecla de
atalho novamente:
Exibindo console
Script como arquivo externo
Agora que voc j entendeu que para o navegador interpretar seu script ele
precisa estar envolvido pela tag <script> e que para visualizar a sada no
console precisa abr-lo est na hora de organizarmos melhor o nosso cdigo.
At agora estamos escrevendo html e Javascript no mesmo arquivo, o que

pode se tornar confuso rapidamente. Para evitarmos isso, podemos escrevlos em arquivos separados!
Podemos, por exemplo, criar o arquivo intro.js na mesma pasta do arquivo

introducao.html. A diferena que moveremos nosso cdigo que exibe a
mensagem no console para dentro deste arquivo:
// intro.js
Note que, dentro do nosso arquivo .js, ns teremos apenas cdigo

Javascript, nada de tags html como o <script> aqui!
A nossa tag <script> continuar na nossa pagina introducao.html. Porm,

agora no ter nenhum contedo, em vez disso apontar para o arquivo
Javascript que criamos atravs do atributo src:
<script src="intro.js"></script>
O resultado da pgina deve continuar o mesmo.

Identificando problemas
Somos seres humanos e pode acontecer de esquecermos de importar o

script, digitarmos a tag errada ou at mesmo apontarmos para um arquivo
que no exista. Voc no quer ficar horas olhando para seu arquivo script
procurando por um erro se sequer ele foi carregado, no mesmo?
por isso que uma boa prtica verificar se o arquivo importado atravs da
tag script foi carregado! Fazemos isso tambm com o console aberto, mas
no lugar de selecionarmos a aba "console", selecionamos a aba "rede" (ou
"network", caso seu navegador esteja em ingls). No esquea de
recarregar sua pgina toda vez que mudar para esta aba.
A aba "rede" exibe uma lista de todos os arquivos externos carregado, logo,
se tudo correu bem com nosso arquivo intro.js ele deve aparecer na lista. Se
estiver vermelho, significa que o arquivo no existe ou est em outro
diretrio:
Exibindo recursos carregados
Uma grande vantagem de termos nosso cdigo em um arquivo separado

que, caso ele tenha algum erro, possvel acessar diretamente a linha
problemtica no prprio navegador, algo que no somos capazes quando
adicionamos diretamente nosso cdigo na pgina. Vejamos um exemplo
alterando nosso intro.js:
// intro.js
console.log("bem-vindo);
No cdigo anterior, adicionamos mais uma sada para o console, mas com
problema. Conseguiu descobrir onde? O texto no termina com aspas
simples, algo considerado um erro pelo Javascript.
Ao abrir sua pgina mais uma vez uma mensagem de erro ser exibida no
console e no canto direito aparece um link para o arquivo intro.js que indica
a linha do erro, inclusive voc pode clicar no link que ele exibir o cdigo
para voc:
Console exibindo mensagem de erro
Exibindo a linha do erro
Existem outras vantagens de separarmos o nosso cdigo num arquivo

separado, a que vimos uma delas e as outras sero apresentadas ao longo
do treinamento.
Agora que voc j sabe como as coisas se encaixam, inclusive como

encontrar a causa de problemas em seu cdigo mesmo antes de aprender a
linguagem, podemos continuar nossa caminhada, pois o "kit de
sobrevivncia" j lhe foi dado.
No prximo captulo veremos como o Javascript lida com variveis, algo

indispensvel numa linguagem de programao, mas esteja atento:
Voc escrever seu cdigo em arquivos separados, ajudando na

depurao do seu cdigo.
Voc precisar associar o arquivo pgina atravs da tag script.
A sada da sua aplicao utilizar o console, reforando ainda mais seu

uso.
Erros em seu cdigo podem ser encontrados como mensagem do console

em vermelho, inclusive voc pode clicar no link do canto direito da tela que
o levar diretamente para a linha com problema.
O projeto do curso
Ao fim de nosso curso, teremos uma aplicao de agenda de pacientes, com

funcionalidade para calcular o IMC de cada um deles a partir de um boto e
adicionar novos pacientes.
O resultado ser parecido com o seguinte:
Ento vamos l! Mos obra e boa sorte!
Variveis e comandos bsicos

Agora que voc j tem ideia de o que o Javascript, por que devemos us-lo
e do ambiente que usaremos nesse curso, est na hora de comearmos a
colocar a mo na massa!
Declarando variveis
Para comear, vamos entender como funcionam variveis no Javascript,

lembre-se sempre de utilizar o console para executar nossos comandos.
No Javascript, tudo que precisamos para criar uma varivel digitar a

palavra var seguida do nome de sua varivel e atribuir um valor ela.
Sendo assim, podemos criar uma varivel chamada peso simplesmente
digitando:
var idade = 19;
Assim que o interpretador de Javascript passar por essa linha, ele criar
uma varivel com o nome "idade" e atribuir a ela o valor 19. Do mesmo
jeito que voc consegue declarar uma varivel e atribuir a ela um nmero
inteiro, voc consegue atribuir um nmero decimal:
var peso = 57.5;
O mesmo voc consegue fazer com textos(ou strings), basta atribuir algo
que esteja entre aspas duplas:
var nome = "Leonardo";
Entendendo a tipagem dinmica do Javascript
Note que ns no dissemos o tipo dessa varivel em nenhum momento,

quem vai definir o tipo ser o interpretador, dependendo do valor que voc
estiver atribuindo varivel.
Voc pode verificar o tipo de uma varivel utilizando o comando typeof, veja
o exemplo abaixo:
var idade = 19;

console.log(typeof idade); // Vai imprimir number
No caso da nossa varivel peso, o valor que atribumos foi um nmero

decimal, mas para o Javascript no tem diferena de tipos, perceba que ao
utilizarmos o comando typeof a sada tambm ser number:
var peso = 57.5;

console.log(typeof peso); // Vai imprimir number
Se crissemos uma varivel nome e atribussemos um texto, como abaixo, o

tipo da varivel seria string, como voc pode conferir abaixo:

console.log(typeof nome); // Vai imprimir string
Isso acontece pois o Javascript possui um sistema de tipagem que

chamamos de tipagem implcita - ou seja, no dizemos explicitamente o tipo
de uma varivel - e dinmica, o que quer dizer que, se mudarmos o valor
dessa varivel, o tipo dela tambm mudar.
Por exemplo, se atribuirmos o valor 10 varivel nome que criamos acima,

o tipo da varivel passar a ser Number:

console.log(typeof nome); // imprime "string"
nome = 10;
console.log(typeof nome); // imprime number
Caso voc crie uma varivel com o valor true ou false, o tipo dela ser
boolean;
var ehEstagiario = true;

console.log(typeof ehEstagiario); // imprime "boolean"
Ns tambm podemos gerar variveis com valores booleanos(verdadeiro ou

falso) a partir de operadores de comparao.
Por exemplo, podemos criar uma varivel chamada ehIgual que ser
verdadeira ou falsa de acordo com uma comparao de igualdade, que
feita utilizando o operador ==
var ehIgual = (2 == 2);
console.log(ehIgual); //imprime true
//-----------
var ehIgual = (2 == 3);
console.log(ehIgual); //imprime false
Ou uma varivel chamada ehDiferente, que ser verdadeira se dois valores

forem diferentes. Para comparar se os valores so diferentes utilizaremos o
operador !=:
var ehDiferente = (2 != 1);
console.log(ehDiferente); //imprime true;
//-----------
var ehDiferente = (2 != 2);
console.log(ehDiferente); //imprime false;
Alm das comparaes de igualdade e diferena, podemos tambm

comparar se um valor maior que outro
5 > 4 // true
5 > 10 // false
Se menor
4 < 5 // true
4 < 0 // false
Se maior ou igual
5 >= 5 //true
5 >= 0 //true
5 >= 6 //false
E se menor ou igual
4 <= 4 // true
4 <= 5 // true
4 <= 3 // false
Esses tipos: boolean, number e string so os trs tipos bsicos no Javascript.

Alm desses, ainda existem outros que sero abordados mais para frente
neste curso.
Operaes aritmticas bsicas
Agora que j aprendemos como declarar uma varivel e como funciona o

sistema de tipagem dinmica do Javascript, vamos fazer algumas contas
simples com elas.
Para dividir um nmero por outro, por exemplo, basta utilizar operador de
diviso, que representado pelo caractere barra("/"), sendo assim, ao
digitarmos 12/2 no console, temos o resultado 6. O mesmo funciona com
outras operaes bsicas, como multiplicao(utiliza-se o operador *),
soma(+) e subtrao(-).
Deste modo, podemos colocar em prtica uma frmula de calculo de salrio

anual, por exemplo, onde o valor acumulado igual a 13 vezes o valor
mensal + um bonus de 10% sobre o salario mensal:
var salarioMensal = 1400;

var salarioAnual = 13*salarioMensal+salarioMensal*0.10;
console.log(salarioAnual); // imprime 18340;
Calculo de IMC de um paciente
Agora que j conhecemos alguns operadores bsicos, podemos aplicar o

que aprendemos no nosso sistema de pacientes!
Imagine que temos uma varivel contendo o peso de um paciente e outra

contendo a altura, a partir destas duas variveis, possvel calcular o
IMC(ndice de massa corporal) deste paciente, que resultado do peso
dividido pela altura ao quadrado, ou peso/(altura*altura).
Vamos ento calcular o IMC de um paciente que pesa 100 quilos e tem 2
metros de altura. Para isso, vamos declarar a varivel peso e a varivel
altura:
var peso = 100;

var altura = 2.00;
Agora basta utilizar a formula de calculo de IMC:
var peso = 100;

var altura = 2.00;
var imc = peso / altura * altura;
console.log(imc); // imprime 100
Mas espere, o resultado da conta deveria ser 25, mas foi 100!
Isso aconteceu pois as operaes aritmticas so executada pelo

interpretador de Javascript da esquerda para a direita. Portanto, a conta que
foi de fato efetuada foi:
peso / altura = 50
50 * altura = 100
Ento, para nossa formula funcionar, precisamos dizer que a operao

altura*altura(altura ao quadrado) deve ser executada primeiro! Para isso,
basta envolver essa operao utilizando parnteses:
var peso = 100;

var altura = 2.00;
var imc = peso / (altura * altura);
console.log(imc) // 25
Agora sim, calculamos o IMC com sucesso!

Fluxo de dados com If/Else
Agora j conseguimos fazer contas bsicas, mas o que aconteceria se o

valor da varivel altura fosse 0?
A conta seria:
100 / (0*0) -> 100 / 0
Estamos tentando dividir um numero por 0! Ao executar essa conta,

teramos a sada Infinity no console, indicando que o resultado dessa
operao no tangvel, afinal impossvel dividir um nmero por 0!
Precisamos ento executar a conta apenas se altura for diferente de 0. Para

isso, envolveremos o nosso cdigo no comando if, que tem como objetivo
filtrar a execuo de um determinado bloco de cdigo com base em uma
condio. Para usarmos o comando if, precisamos passar para ele um valor
booleano, ou seja, uma condio, que decidir se o cdigo ser executado
ou no.
Ns s podemos executar a conta se a altura for diferente de 0, ou seja,

quando altura != 0, ento essa condio que vamos passar para o if:
if(altura != 0){
}
Mas agora ns simplesmente paramos de efetuar a conta, seria legal

mostrar uma mensagem para que soubssemos o por qu de no termos
executado a conta. Ou seja, quando a condio do if no for verdadeira,
queremos mostrar uma mensagem. Para isso, podemos usar o comando
else:
if(altura != 0){
}else{
console("No posso executar uma diviso por 0!");
}
Tratando vrios casos com Ifs
Imagine que, na nossa frmula de calculo de salrio anual, o bonus varie de

acordo com o salrio mensal. Por exemplo:
se o salrio mensal for maior que 0 e menor que 1000, o bonus 5%
se no cair na condio anterior e o salrio mensal for menor que 2000, o

bonus 10%
se no cair na condio anterior, o bonus 15%
Mas antes de pensar em todas essas condies, vamos pensar s na

primeira: se o salrio for maior que 0 e menor que 1000, temos que usar 5%
de bnus. Perceba que ns temos duas condies que precisamos respeitar:
salarioMensal > 0 E salarioMensal < 1000, para isso vamos utilizar o
operador &&, que far com que o if s seja executado se as duas condies
forem verdadeiras:
if(salarioMensal > 0 && salarioMensal < 1000){

console.log(salarioAnual);
}
Alm do operador and(&&) h tambm o operador or(representado por ||),

que faz com que, se pelo menos uma das duas condies for verdadeira, o if
seja executado!
Por exemplo, suponha que s queremos calcular o salarioAnual de um

funcionrio se o tipoDoFuncionario for "estagirio" OU "CLT", teramos ento
um cdigo parecido com o seguinte:
if(tipoDoFuncionario == "estagirio" || tipoDoFuncionario == "clt"){

}
Legal, mas at agora s estamos respeitando a primeira condio para

calcular o bnus do salrio, vamos partir para a prxima: se no cair na
condio anterior e o salrio mensal for menor que 2000. Precisamos ento
s executar determinado cdigo se o if anterior no for executado! Voc se
lembra do comando que faz isso? O else! Teramos ento o seguinte cdigo:

}else{
}
Mas espere, o bonus s 10% se no cair na condio anterior e se o salrio

mensal for menor que 2000! Vamos ento colocar mais essa condio no
nosso cdigo:

}else{
if(salarioMensal < 2000){
}
}
Agora estamos respeitando a condio, mas note que ns estamos

encadeando muitos ifs, fazendo com que o nosso cdigo cresa
horizontalmente! Para evitar isso, temos o comando else if, que
exatamente o que parece: uma juno do else com um if, podemos ento
substituir o if encadeado no nosso cdigo:

}else if(salarioMensal < 2000){
}
}
Agora s falta a ultima parte de nossa lgica: se o ultimo if no for

executado, o bonus 15%. Para isso, basta adicionarmos um else ao fim de
nosso ultimo if:

}else if(salarioMensal < 2000){
}else{
}
}
Conhecendo o DOM e manipulando pginas

At agora, ns apenas criamos variveis e atribumos sempre o mesmo
valor a elas, por exemplo, o cdigo var peso = 55.7 sempre criar uma
varivel com valor 55.7, mas qual a utilidade de uma varivel se ela no
variar, certo?
A ideia ento que agora ns comecemos a utilizar os valores da nossa

pgina, ou seja, criar variveis com base nos valores do nosso html, mas o
mundo do Javascript, para pegar alguma informao de uma pgina, temos
que, primeiro, entender o que o tal do DOM.
O que DOM e como us-lo?
DOM um acrnimo para Document Object Model, basicamente ele uma

representao de uma pgina html no mundo Javascript e pode ser
acessado a partir da varivel document, que representa a raiz de nossa
pgina.
Utilizando esta varivel, conseguimos, por exemplo, pegar o contedo de

uma tag html. O que eu quero dizer com isso? Considere a seguinte pgina
html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<h1 id="titulo">Ol, mundo!</h1>
</body>
</html>
Caso queiramos pegar o contedo da tag <h1> que possui o atributo

id="titulo", podemos pedir para o document para selecionar um elemento
que id seja titulo:
var titulo = document.getElementById("titulo"); // Seleciona o titulo
importante notar que, caso no exista nenhuma tag com o atributo

id="titulo" em nossa pgina, o contedo da varivel ser undefined. Com o
elemento em mos, podemos pegar o contedo dele do seguinte modo:
var titulo = document.getElementById("titulo"); // Seleciona elemento

var conteudo = titulo.textContent; // Pega texto dentro do elemento
console.log(conteudo); // Imprime "Ol, mundo!"
Pronto! Agora j conseguimos pegar o contedo de uma tag html e colocar

em uma varivel, ento agora vamos pensar na nossa aplicao do curso, a
lista de pacientes.
O que queremos fazer conseguir pegar a varivel altura e peso de nosso

primeiro paciente na nossa tabela, para isso vamos analisar a estrutura
dela:
<table>
<tr>
<th>Nome</th>
<th>Peso</th>
<th>Altura</th>
<th>IMC</th>
</tr>
<tr>
<td id="nome-1">Leonardo</td>
<td id="peso-1">50.0</td>
<td id="altura-1">1.60</td>
<td id="imc-1"></td>
</tr>
<tr>
<td id="nome-2">Paulo</td>
<td id="peso-2">100</td>
<td id="altura-2">2.00</td>
<td id="imc-2"></td>
</tr>
</table>
Vamos montar um paciente com as informaes do primeiro da tabela, ou

seja, o "Leonardo". Para isso, basta utilizar o comando que acabamos de
aprender, o document.getElementById("id-para-selecionar"):
var peso = document.getElementById("peso-1").textContent; // pega o peso

do paciente
var altura = document.getElementById("altura-1").textContent; // pega a
altura do paciente
Modificando sua pgina
Agora que ns j conseguimos declarar variveis com valores que esto em

nossas pginas, podemos calcular o IMC a partir desses valores aplicando o
nosso cdigo original:

do paciente
altura do paciente
if(altura != 0){
}else{
Bacana! J calculamos o IMC, mas ainda temos uma coluna vazia na nossa
tabela, precisamos preench-la com o valor calculado!
Para isso, vamos comear selecionando o <td> que queremos preencher:
var tdDoImc = document.getElementById("imc-1"); // pega o td do imc do

paciente 1
Lembra que para pegarmos o contedo de uma tag ns utilizamos o

textContent? Para modificar o seu contedo tambm usaremos ele, mas
atribuindo um valor, como se fosse uma varivel!

paciente 1
tdDoImc.textContent = imc; //Altera o contedo do td para o valor da
varivel imc
Prontinho! Ento o nosso cdigo final ser parecido com o seguinte:

do paciente
altura do paciente
if(altura != 0){

paciente 1
varivel imc
}else{

}
Agora voc j sabe como selecionar elementos do DOM e modific-los!

Durante o curso voc aprender mais modos de selecionar e mais
propriedades que poder alterar, fique ligado!
Organizando nosso cdigo com objetos
Agora ns j conseguimos calcular o IMC de um paciente, mas para isso ns

usamos duas variveis separadas: a altura e o peso.
Seria legal se tivssemos um modo de juntar essas duas variveis para que
ficasse claro que elas pertencem a um paciente. Para isso, vamos aprender
como declaramos objetos em Javascript!
A notao de objetos do Javascript
Um objeto em Javascript, nada mais que uma varivel que possui, dentro
dela, chaves e valores. O que queremos fazer um objeto chamado
paciente que ter as chaves (ou atributos) altura e peso.
Para criarmos esse objeto, utilizaremos os caracteres { para abrir o objeto

e } para fech-lo.
var paciente = {};
Simplesmente assim ns j criamos o nosso objeto paciente, porm, ele

ainda no tem nenhum atributo. Ns podemos, ento, dentro das chaves,
adicionarmos o atributo peso com seu valor separado por dois pontos(:):
var paciente = { peso : 100 };
Agora ns temos, dentro de nosso objeto paciente, a propriedade peso, que

pode ser acessada a qualquer momento utilizando a seguinte sintaxe:
paciente.peso
Repare que utilizamos um ponto(.) para dizermos ao interpretador de

Javascript que queremos acessar um atributo desse objeto, essa notao
chamada de dot notation. Outra forma menos usada de acessar um atributo
sera a partir de colchetes com o nome do atributo:
paciente["peso"];
Agora s falta adicionarmos o ultimo atributo, a altura. Para isso, basta

adicion-lo aps o peso separado por uma vrgula:
var paciente = {peso : 100, altura : 2.00}
Pronto! Temos um paciente completo, com peso e altura! Mas ele ter
sempre o mesmo valor de peso e de altura, seria legal se ns pegssemos
essa informao da pgina, como fazamos antes:

do paciente
altura do paciente
var paciente = {
peso : peso,
altura : altura,
}
Note que quebramos a linha para cada atributo por questes de legbilidade,
essa uma notao bem usada quando o objeto tem muitos atributos.
Mas ainda est faltando um atributo no nosso paciente: o nome. Agora o

paciente j est criado, mas conseguimos adicionar novos atributos mesmo
assim utilizando o dot notation e atribuindo um valor a ele:

do paciente
altura do paciente
var paciente = {
peso : peso,
altura : altura,
}
paciente.nome = document.getElementById("nome-1").textContent; // pega

nome do paciente
Agora que organizamos mais o nosso cdigo juntando as informaes da

paciente, vamos ver como ficaria o nosso clculo de IMC utilizando essa
novo objeto:

do paciente
altura do paciente
var nome = document.getElementById("nome-1").textContent; // pega o
nome do paciente
var paciente = {
peso : peso,
altura : altura,
nome : nome
}
if(paciente.altura != 0){
var imc = paciente.peso / (paciente.altura * paciente.altura);

paciente 1
varivel imc
console.log(imc);
}else{
}
Para saber mais
Repare que os objetos em Javascript so um pouco diferentes do que voc

pode estar acostumado em outras linguagens orientadas a objetos como o
Java. Quando estamos utilizando Javascript, ns no precisamos declarar
uma classe para, a partir desta, instanciar um objeto, basta criar um objeto
diretamente.

Java Script

Transféré par

Informations du document

Titre original

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

Java Script

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

H ainda smartphones que permitem criar aplicativos com Javascript como

O nome Javascript esta no coletivo imaginrio dos desenvolvedores, mas na

Voc aprender neste treinamento a sintaxe do ECMASCRIPT verso 5,

Javascript uma linguagem interpretada, isto , os scripts so lidos linha a

Preparando o ambiente e consideraes gerais

Independente do sistema operacional que voc use ou editor de texto

Ao decorrer do curso, utilizaremos uma pgina HTML com o ttulo do

Ah, no se esquea de que "grandes poderes trazem grandes

Como o browser interpreta seu cdigo

Vimos que a linguagem Javascript pode ter diferentes hospedeiros e que

E agora? Onde adicionar esse cdigo em nossa pgina? Que tal

Quando visualizamos a pgina (basta dar dois cliques sobre o arquivo),

cdigo no interpretado pelo navegador

Cdigo interpretado pelo navegador

Agora sim! Quando a pgina recarregada no navegador (voc pode

Agora voc pode, inclusive, mostrar o seu nome em um alert:

HTML 5 e a tag <SCRIPT>

Quando utlizando o padro HTML5, no somos obrigados a adicionar o

Apesar do Javascript ser um mundo diferente do HTML, com esta declarao

Quando programando em Javascript, ns podemos utilizar o comando alert

Por esse motivo, o substituiremos pelo comando: console.log

No lugar de exibir uma janela na tela, a instruo console.log imprime no

At agora estamos escrevendo html e Javascript no mesmo arquivo, o que

Podemos, por exemplo, criar o arquivo intro.js na mesma pasta do arquivo

Note que, dentro do nosso arquivo .js, ns teremos apenas cdigo

A nossa tag <script> continuar na nossa pagina introducao.html. Porm,

O resultado da pgina deve continuar o mesmo.

Somos seres humanos e pode acontecer de esquecermos de importar o

Exibindo recursos carregados

Uma grande vantagem de termos nosso cdigo em um arquivo separado

Console exibindo mensagem de erro

Exibindo a linha do erro

Existem outras vantagens de separarmos o nosso cdigo num arquivo

Agora que voc j sabe como as coisas se encaixam, inclusive como

No prximo captulo veremos como o Javascript lida com variveis, algo

Voc escrever seu cdigo em arquivos separados, ajudando na

Voc precisar associar o arquivo pgina atravs da tag script.

A sada da sua aplicao utilizar o console, reforando ainda mais seu

Erros em seu cdigo podem ser encontrados como mensagem do console

Ao fim de nosso curso, teremos uma aplicao de agenda de pacientes, com

O resultado ser parecido com o seguinte:

Ento vamos l! Mos obra e boa sorte!

Variveis e comandos bsicos

Para comear, vamos entender como funcionam variveis no Javascript,

No Javascript, tudo que precisamos para criar uma varivel digitar a

var idade = 19;

var peso = 57.5;

var nome = "Leonardo";

Entendendo a tipagem dinmica do Javascript

Note que ns no dissemos o tipo dessa varivel em nenhum momento,

var idade = 19;

No caso da nossa varivel peso, o valor que atribumos foi um nmero

var peso = 57.5;

Se crissemos uma varivel nome e atribussemos um texto, como abaixo, o

var nome = "Leonardo";

Isso acontece pois o Javascript possui um sistema de tipagem que

Por exemplo, se atribuirmos o valor 10 varivel nome que criamos acima,

var nome = "Leonardo";

var ehEstagiario = true;