Aula 10 - Introdução JS (DDM)

Desenvolvimento para
Dispositivos Móveis
(DDM)
Aula 10
JavaScript (JS)
Prof. Wesley Pecoraro
wesley.pecoraro@gmail.com 1
Ementa do Curso
• Introdução • JavaScript
– Motivação e Objetivos, Histórico da – Características da linguagem
Internet e das Linguagens para – Funções, Eventos
WEB/MOBILE, Comparação entre – Windows
linguagens.
– Validação de dados
• HTML (HyperText Markup Language)
– JQuery
– Estrutura da linguagem
• XML (Extensible Markup Language)
– Principais TAG’s, Formulários
– Botões, Caixa de Texto
– Caixa de Seleção, Botão de opção
– Hiperlinks
• Criação de Páginas estáticas
– Cabeçalho, Menu
– Navegação entre páginas
• CSS
– Estruturação de código
– Criação de folhas de estilo
– Aplicação de folhas de estilo
2
Ementa do Curso
• Introdução • JavaScript
– Motivação e Objetivos, Histórico da – Características da linguagem
Internet e das Linguagens para – Funções, Eventos
WEB/MOBILE, Comparação entre – Windows
linguagens.
– Validação de dados
• HTML (HyperText Markup Language)
– JQuery
– Estrutura da linguagem
• XML (Extensible Markup Language)
– Principais TAG’s, Formulários
– Botões, Caixa de Texto
– Caixa de Seleção, Botão de opção
– Hiperlinks
• Criação de Páginas estáticas
– Cabeçalho, Menu
– Navegação entre páginas
• CSS
– Estruturação de código
– Criação de folhas de estilo
– Aplicação de folhas de estilo
3
Introdução
• JavaScript é uma das linguagens de programação

mais populares em todo o mundo.
• Pode ser utilizada em computadores desktop,
notebooks, dispositivos móveis diversos entre
outros.
Introdução
• JavaScript é utilizada principalmente em páginas web

para:
– Manipular, incluir e remover elementos HTML;
– Manipular, incluir e remover atributos dos elementos
HTML;
– Alterar o estilo (CSS);
– Validar dados informados pelos usuários;
– Reagir a eventos realizados pelos usuários;
– Definir ações para novos eventos;
Introdução
• JavaScript é uma linguagem de script

– Processamento leve;
• Seu código pode ser escrito dentro dos documentos

HTML ou externamente em arquivos .js.
• O código JavaScript é executado pelo navegador* e

pode ser visto como uma forma de estender a
funcionalidade desse último.
Introdução
• Linguagem interpretada
– os scripts são lidos linha a linha e cada instrução é traduzida por
um interpretador
• Qualquer navegador pode ser usado (na aula usaremos o

Chrome)
– O navegador escolhido deve suportar ECMASCRIPT (2016,2017,
2018, 2019,2020)
– ES2020 e ES2021
• padrão criado para tentar unificar a sintaxe e garantir a

compatibilidade entre os diversos navegadores do mercado
https://www.w3schools.com/js/js_2020.asp
JavaScript e HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Introdução à Javascript </title>
</head>
<body>
<h1>Introdução</h1>
alert(“Olá!”);
</body>
</html>
Navegador não fez nenhum tratamento especial para interpretar esse código
como um script. Por que???
JavaScript e HTML
• Tags <script> e </script>.

– Indica ao navegador que o trecho de código é um script a
ser interpretado
• JavaScripts podem ser colocados no <body> e/ou no

<head> de um documento HTML.
<script>
alert(“Olá!”);
</script>
JavaScript e HTML
• Teste a tag <script> com o comando alert()!
<!DOCTYPE html>
<html>
<head>
<title> Introdução à JavaScript</title>
</head>
<body>
<script> alert(“Olá!”); </script>
</body>
</html>
JavaScript e HTML
• Teste a tag <script>com o comando prompt()!
<!DOCTYPE html>
<html>
<head>
</head> Inserir texto
<body>
<script> prompt(); </script>
</body>
</html>
JavaScript e HTML
• Teste a tag <script>com o comando prompt()!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script> prompt(“Qual o seu nome?”); </script>
</body>
</html>
JavaScript e HTML
• Para não perder a informação digitada podemos usar

uma variável!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>var nome = prompt(“Qual o seu nome?”); </script>
</body>
</html>
JavaScript e HTML
• Comando alert
– Mostra um conteúdo na tela
<script>
alert(“Primeiro conteúdo");
alert(“Segundo conteúdo");
</script
JavaScript e HTML
• Comando alert
– Mostra um conteúdo na tela
<script>
alert(“Primeiro conteúdo");
alert(“Segundo conteúdo");
</script
Qual o problema com

esse código?
JavaScript e HTML
• No código anterior, o segundo alert apenas era

mostrado depois do fechamento do primeiro!
• Uma alternativa é utilizar o comando

console.log
– A informação desejada será mostrada no console do
navegador
JavaScript e HTML
• No código anterior, o segundo alert apenas era

mostrado depois do fechamento do primeiro!
• Uma alternativa é utilizar o comando

console.log
– A informação desejada será mostrada no console do
navegador
Alguns navegadores
dão suporte a entrada
❖Ctrl + shift + J de comandos pelo
❖Digitem alert(“nome”) console
JavaScript e HTML
<body>
<script>
//alert("Primeiro conteúdo");
//alert("Segundo conteúdo");
console.log("Primeiro conteúdo no console");

console.log("Segundo conteúdo no console");
</script>
</body>
</html>
JavaScript e HTML
• O código JavaScript pode ser escrito em um arquivo

externo (.js)
– pode ser utilizado em diversos documentos HTML.
• Um arquivo .js é vinculado a um documento HTML

por meio do atributo src da tag <script>.
• Isso é equivalente a inserir o código JavaScript do

arquivo exatamente no mesmo local.
JavaScript e HTML
<!DOCTYPE html>
<html>
<body>
<script
src=“meuscript.js"></script>
</body>
</html>
//alert("Primeiro conteúdo");
//alert("Segundo conteúdo");
console.log("Primeiro conteúdo no console");

console.log("Segundo conteúdo no console");
JavaScript e HTML
• Vantagens de usar arquivo externo

– Maior organização do código
– Facilidade na identificação dos erros!!
• Podemos usar a aba network do console para

verificar se os arquivos foram carregados
corretamente! Recarregar a
página quando
• A linha que contém erro pode ser acessada
nessa aba!
diretamente no console!
JavaScript - Variáveis
• Para criar uma variável utiliza-se o comando var

seguido do nome e o valor atribuído a ela:
var quantidade=1;
var nome=“UNICEP”;
Quando string,
usar aspas
duplas
• Em nenhum dos exemplos anteriores foi informado o

tipo da variável.
– Como é definido o tipo???
• Em JavaScript, as variáveis possuem tipação implícita

dinâmica, ou seja, seu tipo varia de acordo com o
valor que armazena
– o interpretador define o tipo, dependendo do valor que
estiver atribuído à variável
– Se mudarmos o valor, o tipo mudará!
• O tipo da variável pode ser identificado por meio do

comando typeof
var quantidade=1;
var nome=“Fox";
var decimal=1.34;
console.log(typeof quantidade);
console.log(typeof nome);
console.log(typeof decimal);

comando typeof
var quantidade=1;
Ambos são interpretados
var nome=“Fox"; como number
var decimal=1.34;
console.log(typeof quantidade);

comando typeof
var quantidade=“quatro”;
var nome=“Fox";
var decimal=1.34;
console.log(typeof quantidade); Resultado agora

é string
• Para criar variáveis do tipo boolean, atribuir valor

true ou false
var verdadeiro=true;
Console.log(typeof verdadeiro);
• Ou usar uma comparação de igualdade

var verdadeiro= (1==1);
Console.log(verdadeiro); Resultado é true
var verdadeiro= (1==2);
Console.log(verdadeiro); Resultado é false

• Para criar variáveis do tipo boolean, atribuir valor

true ou false
var verdadeiro=true;
Console.log(typeof verdadeiro);
• Ou usar uma comparação de igualdade

var diferente= (1!=1);
Console.log(verdadeiro); Resultado é false
var diferente= (1!=2);
Console.log(verdadeiro); Resultado é true

JavaScript - Operadores
Operador Descrição
+, - Adição ou concatenação, subtração
*, /, % Multiplicação, divisão, módulo (resto da divisão)
++, -- Incremento, decremento
= Atribuição
+=, -=, *=, /=, %= Operação aritmética e atribuição
== Igual a (compara somente o valor)
!= Diferente de (compara somente o valor)
>, >=, <, <= Maior, maior ou igual, menor, menor ou igual
&&, || E lógico, OU lógico
! Não
• Exemplo:
– cálculo do salário anual: valor acumulado = 13 vezes o
valor mensal + 10% de bônus sobre salário mensal
var salarioMensal = 1000;

var salarioAnual = 13*salarioMensal + salarioMensal*0.10;
console.log(salarioAnual); // imprime 13100;
• Exemplo:
– cálculo do salário anual: valor acumulado = 13 vezes o
valor mensal + 10% de bônus sobre salário mensal
var salarioMensal = 1000;

console.log(salarioAnual); // imprime 13100;
Atenção: operações aritméticas são executada

pelo interpretador de Javascript da esquerda
para a direita → usar parênteses
Comandos de Decisão
• Comando if e else
– Usados como filtros na execução
– Baseados em uma condição
if (condição)
{
código a ser executado se a condição for verdadeira
}
else
{
código a ser executado se a condição for falsa
}
• Comando if e else
– Usados como filtros na execução
– Baseados em uma condição
var divisor = 0;
var dividendo =1;
if(divisor != 0){
var resultado = dividendo / divisor;
console.log(resultado) ;
}else{
console.log("Não posso executar uma divisão por 0!");
}
• Diversos casos podem ser tratados com ifs
var tipoDoFuncionario = "estagiario";
salarioMensal=700;
if(tipoDoFuncionario == "estagiario" || tipoDoFuncionario == "clt"){
if(salarioMensal > 0 && salarioMensal < 1000){

console.log(salarioAnual);
}else{
if(salarioMensal < 2000){
}
}
}
• Para o código não crescer horizontalmente, usar else if

var tipoDoFuncionario = "estagiario";
salarioMensal=700;
if(tipoDoFuncionario == "estagiario" || tipoDoFuncionario == "clt"){
if(salarioMensal > 0 && salarioMensal < 1000){

}else if(salarioMensal < 2000){

}
}
DOM
• Document Object Model (DOM) é uma interface que

permite aos programas e scripts acessarem e
alterarem o conteúdo, a estrutura, o estilo de um
documento dinamicamente.
• Quando uma página web é carrega, o navegador cria

um HTML DOM.
– Os elementos HTML são tratados como objetos com
atributos e métodos e que podem reagir a eventos.
DOM
Basicamente ele é uma representação de uma

página html no mundo Javascript e pode ser
acessado a partir da variável document (a raiz
da página HTML)
DOM
• Exemplo
<html>
<head>
<title>meu título</title>
</head>
<body>
<a href=“www.unicep.edu.br”>link unicep</a>
<h1>meu cabeçalho</h1>
</body>
</html>
DOM
• Exemplo
Meu título Meu Link Meu cabeçalho

DOM
• Dom considera que tudo em uma página web é um

nodo:
– O documento inteiro é um nodo documento;
– Cada elemento HTML é um nodo elemento;
– O texto dentro de um elemento é um nodo texto;
– Todo atributo de um elemento HTML é um nodo atributo;
– Todos os comentários são nodo comentários.
DOM
• O objeto document contém todos os objetos que compõe

uma página web.
• Para acessar os elementos (objetos) de uma página, sempre
comece acessando o objeto document.
Método Descrição
Retorna o elemento com o id
document.getElementById()
especificado.
Encontra todos os elementos com a tag
document.getElementsByTagName()
especificada.
Encontra todos os elementos com a classe
document.getElementsByClassName()
especificada.
DOM
• Exemplo
<html> Queremos pegar o conteúdo
<head> da tag <h1>, como faremos?
</head>
<body>
<h1>meu cabeçalho</h1>
</body>
</html>
DOM
• Exemplo
<html>
<head>
</head>
<body>
<h1 id = “titulo”>meu cabeçalho</h1>
<script src="meuscript.js" type="text/javascript"></script>
</body>
</html>
Para evitar valores null

DOM
• Exemplo
var titulo = document.getElementById("titulo");
// Seleciona elemento
var conteudo = titulo.textContent; // seleciona o conteúdo texto do elemento
console.log(conteudo); // Imprime “meu cabeçalho"

<html>
<head>
DOM
</head>
• Exemplo
<body>
<h1 id=“titulo”>meu cabeçalho</h1>
</body>
</html>
var titulo = document.getElementById("titulo“);

titulo.textContent = “Alterando conteúdo com JS”;

Aula 10 - Introdução JS (DDM)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 10 - Introdução JS (DDM)

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento para

• JavaScript é uma das linguagens de programação

• JavaScript é utilizada principalmente em páginas web

• JavaScript é uma linguagem de script

• Seu código pode ser escrito dentro dos documentos

• O código JavaScript é executado pelo navegador* e

• Qualquer navegador pode ser usado (na aula usaremos o

• padrão criado para tentar unificar a sintaxe e garantir a

• Tags <script> e </script>.

• JavaScripts podem ser colocados no <body> e/ou no

• Teste a tag <script> com o comando alert()!

• Teste a tag <script>com o comando prompt()!

• Teste a tag <script>com o comando prompt()!

• Para não perder a informação digitada podemos usar

Qual o problema com

• No código anterior, o segundo alert apenas era

• Uma alternativa é utilizar o comando

• No código anterior, o segundo alert apenas era

• Uma alternativa é utilizar o comando

console.log("Primeiro conteúdo no console");

• O código JavaScript pode ser escrito em um arquivo

• Um arquivo .js é vinculado a um documento HTML

• Isso é equivalente a inserir o código JavaScript do

console.log("Primeiro conteúdo no console");

• Vantagens de usar arquivo externo

• Podemos usar a aba network do console para

• Para criar uma variável utiliza-se o comando var

• Em nenhum dos exemplos anteriores foi informado o

• Em JavaScript, as variáveis possuem tipação implícita

• O tipo da variável pode ser identificado por meio do

• O tipo da variável pode ser identificado por meio do

• O tipo da variável pode ser identificado por meio do

console.log(typeof quantidade); Resultado agora

• Para criar variáveis do tipo boolean, atribuir valor

• Ou usar uma comparação de igualdade

Console.log(verdadeiro); Resultado é true

var verdadeiro= (1==2);

Console.log(verdadeiro); Resultado é false

• Para criar variáveis do tipo boolean, atribuir valor

• Ou usar uma comparação de igualdade

Console.log(verdadeiro); Resultado é false

var diferente= (1!=2);

Console.log(verdadeiro); Resultado é true

var salarioMensal = 1000;

var salarioMensal = 1000;

Atenção: operações aritméticas são executada

if(salarioMensal > 0 && salarioMensal < 1000){

• Para o código não crescer horizontalmente, usar else if

if(salarioMensal > 0 && salarioMensal < 1000){

}else if(salarioMensal < 2000){

• Document Object Model (DOM) é uma interface que

• Quando uma página web é carrega, o navegador cria

Basicamente ele é uma representação de uma

Meu título Meu Link Meu cabeçalho

• Dom considera que tudo em uma página web é um

• O objeto document contém todos os objetos que compõe

Para evitar valores null

var conteudo = titulo.textContent; // seleciona o conteúdo texto do elemento

console.log(conteudo); // Imprime “meu cabeçalho"

var titulo = document.getElementById("titulo“);

Você também pode gostar