Aula 05 - Linguagem JavaScript (2)

Prévia do material em texto

ARA0062 - DESV. WEB HTML5, CSS, JS E – 1001/3001
Aula 05 - Linguagem JavaScript
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
INTRODUÇÃO A JAVASCRIPT-JS
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Agenda
- Objetivo da aula
- Definições
- Situação-problema
- Como funciona o JAVASCRIPT
- Diferença entre as Linguagens HTML, CSS e JS
- Formatação geral
- Principais aplicações
- Quiz
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Objetivo
- Empregar programabilidade em páginas web,
utilizando linguagem Javascript, que é a mais usada no
mercado, para o desenvolvimento de um sistema web
com funcionalidades dinâmicas;
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
TÓPICOS
3 . LINGUAGEM JAVASCRIPT
3 .2 ESTRUTURAS DE DECISÃO (IF; CASE)
3 .3 ESTRUTURA DE REPETIÇÃO (WHILE; DO\WHILE; FOR)
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
CONCEITOS E DEFINIÇÕES
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
O que é JAVASCRIPT?
DESV. WEB HTML5, CSS, JS E
Também chamada de JS, é a linguagem de criação de scripts
o desenvolvimento de páginas para a plataforma Web;
• Atualmente, é utilizado por bilhões de páginas.
JavaScript Linguagem de programação de Script
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
O que é JAVASCRIPT?
DESV. WEB HTML5, CSS, JS E
JavaScript é uma linguagem de programação interpretada
estruturada, de script em alto nível com tipagem dinâmica
fraca e multiparadigma. Juntamente com HTML e CSS.
JavaScript Linguagem de programação de Script
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Objetivo do JAVASCRIPT
DESV. WEB HTML5, CSS, JS E
– Adicionar funcionalidades;
– Permitir a programabilidade da página.
– Verificar formulários;
– Comunicar com servidores; – E muitos mais.
JavaScript
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Origem
DESV. WEB HTML5, CSS, JS E
Originalmente foi criada pela Netscape em 1994,
inicialmente era uma linguagem somente de script
simples.
Javascript
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Origem
DESV. WEB HTML5, CSS, JS E
Atualmente, quem mantem a linguagem é a Fundação
Mozilla;
Javascript
Nota: Para encontrar mais materiais e tutoriais sobre JavaScript acesse a
pagina W3School
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Diferença entre as linguagens (HTML, CSS e JS)
DESV. WEB HTML5, CSS, JS E
HTML: 
Está relacionado ao Conteúdo, Dados e estrutura de como a página se 
apresenta;
CSS: 
É responsável pela elegância/aparência da apresentação de cada página;
(Formatação, layout, cores, fontes, posicionamento.)
JavaScript: 
É responsável pelo comportamento e ações que cada pagina pode executar;
(Programação dinâmica)
Javascript
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Diferença entre as linguagens (HTML, CSS e JS)
DESV. WEB HTML5, CSS, JS E
JavaScript reside dentro de documentos HTML e pode
prover diferentes níveis de interatividades não suportados
pelo HTML sozinho;
Javascript
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Padrões da Linguagem JS
DESV. WEB HTML5, CSS, JS E
A Linguagem Núcleo:
• ECMAScript (Versão 7, de Junho de 2016);
• Padrão mantido por ECMA International Associação Industrial de
padronização de tecnologias da Informação e Comunicação;
– DOM: Document Object Model;
• Define a Interface da Linguagem com o Browser;
• Padrão mantido por W3C;
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Estrutura básica da Linguagem JS
DESV. WEB HTML5, CSS, JS E
Para inserir códigos JavaScript, iremos fazê-lo em uma Tag HTML
apropriada:
<script>
.
.
.
</script>
Créditos: Prof. Heck Junior
Blocos de comandos
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Estrutura básica da Linguagem JS - Externo
DESV. WEB HTML5, CSS, JS E
Assim como o CSS, também é possível acessar um arquivo javascript, basta
que para isso você salve o arquivo com a extensão apropriada e faça a
chamada no código HTML, conforme o exemplo:
<script src= "meuScript.js"></script>
Créditos: Prof. Heck Junior
Acessando um arquivo JS 
externo.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Estrutura básica da Linguagem JS - Interno
DESV. WEB HTML5, CSS, JS E
Para incorporar internamento o Javascript ao html, adicione entre as tags
<body> o exemplo a seguir:
<script>
document.write(“Programando em JS!");
</script>
Créditos: Prof. Heck Junior
Função para exibir informações 
no documento JS.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Estrutura básica da Linguagem JS – na Linha
DESV. WEB HTML5, CSS, JS E
Outra forma de incorporar o Javascript no html é na própria linha de código
adicione entre as tags <body> o exemplo a seguir:
<script>
</script>
<button type="button" 
onclick="document.getElementById(‘Exibir').style.display='none'">Click Me!</button>
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Classe - Document
DESV. WEB HTML5, CSS, JS E
Propriedades de Exemplo:
– title – Define ou Retorna o Título da Página;
– URL – Retorna o URL completo da página;
• Métodos de Exemplo:
– write() – Escreve texto no documento;
– writeln() – Escreve uma linha de texto no documento;
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Classe - Document
DESV. WEB HTML5, CSS, JS E
Exemplo:
<script>
document.write("<h2>"+document.title+"</h2>");
</script>
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Criando o botão baseado em eventos
DESV. WEB HTML5, CSS, JS E
É possível disparar scripts a partir de diversos tipos de eventos;
• O primeiro que iremos estudar é o de um clique em um botão:
– Tag: <button>Clique Aqui!</button>
– Atributos:
• type=“button”;
• onclick=“alert(‘Bem vindo(a) a nossa página!’)”
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Criando o botão baseado em eventos
DESV. WEB HTML5, CSS, JS E
Exemplo:
<script>
<button type="button" onclick="alert('Bem vindo(a) a nossa 
página!')"> Clique Aqui!</button>
</script>
Créditos: Prof. Heck Junior
Tipo do 
componente
Evento do 
componente
Titulo do 
componente
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Criando atributo global “ID”
DESV. WEB HTML5, CSS, JS E
Exemplo:
<p id="paragrafo">Olá!</p>
<script>
function myFuncao() {
var x = document.getElementById("paragrafo");
x.innerHTML="Hello!";
}
</script>
<button type="button" onclick="myFuncao();"> Translate</button>
Créditos: Prof. Heck Junior
Acionando uma 
função por meio de 
um Botão.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Variáveis em JS
DESV. WEB HTML5, CSS, JS E
JavaScript é uma linguagem de tipagem dinâmica e fraca:
– Não é necessário declarar o tipo de uma variável;
– Todas as variáveis são objetos (referência);
– Números são todos reais de 64bits;
– A variável irá “alterar” o seu tipo de dado conforme os valores forem
atribuídos.
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Variáveis em JS
DESV. WEB HTML5, CSS, JS E
• Tipo de dado dinâmico, ou seja,podem assumir valores diferentes:
var x; // x é indefinido
x = 5; // x é um número
x = "John"; // x é uma string
x = true; // x é um valor lógico
x = null; // x é indefinido
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Trabalhando Classes em JS
DESV. WEB HTML5, CSS, JS E
function Carro(ano, placa) { //Construtor
this.ano = ano; //Atributo
this.placa = placa;
var nCor = Math.random() * Carro.cores.length;
this.cor = Carro.cores[Math.floor(nCor)];
this.alterarAno = function(novoAno) { //Método
this.ano = novoAno;
};
}
Carro.cores = ["Azul", "Branco", "Vermelho"]; //Atributo estático
Carro.adicionarCor = function (novaCor) { //Método estático
Carro.cores.push(novaCor);
};
Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Operadores aritméticos em JS
DESV. WEB HTML5, CSS, JS E Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Operadores Relacionais em JS
DESV. WEB HTML5, CSS, JS E Créditos: Prof. Heck Junior
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Desvio condicional (If else)
DESV. WEB HTML5, CSS, JS E Créditos: Prof. Heck Junior
if else funciona igual em C/Java: 
if (condição) { 
código para quando retornar true
} else { 
código para quando retornar false 
}
• Obs.: switch case também funciona igual.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Estrutura de Repetição (for, while e do while)
DESV. WEB HTML5, CSS, JS E Créditos: Prof. Heck Junior
Estas estruturas funcionam da mesma forma que nas linguagens 
C/Java: 
o for (x=0;x< 10;x++) { 
blocos de comandos…
} 
o while (x < 10) { 
blocos de comandos…
}
o do { 
blocos de comandos…
} while (x < 10);
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Responda o quiz a seguir:
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Vamos para a atividade prática...
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Bibliografia Básica
DESV. WEB HTML5, CSS, JS E
DEITEL, Paul J.; DEITEL, Harvey M. Ajax, Rich Internet Applications e
desenvolvimento Web para programadores. São Paulo: Pearson, 2008.
Disponível em: https://plataforma.bvirtual.com.br/Leitor/Publicacao/426/pdf
PLOTZE, Rodrigo. Tecnologias WEB. Rio de Janeiro: SESES, 2015.
Disponível em:
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/BF917AFA-
2335-
4BB8-A269-85491F228012
TERUEL, Evandro C. HTML 5 Guia Prático. 2ª Ed. São Paulo: Érica, 2014.
Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536519296/
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Bibliografia Complementar
DESV. WEB HTML5, CSS, JS E
FLANAGAN, David. JavaScript: O Guia Definitivo. 6ª Ed. Porto Alegre: Bookman,
2014.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788565837484/
FONSECA, Cleber C. Programação para Internet Rica. Rio de Janeiro: SESES, 2016.
Disponível em:
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A-57D1- 236-
B334-17A19E0A77D6
HAROLD, Elliotte R. Refatorando HTML - Como Melhorar o Projeto de Aplicações
Web Existentes. Porto Alegre: Bookman, 2010.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788577806706/
MILETTO, Evandro M.; BERTAGNOLLI, Silvia C. Desenvolvimento de Software II:
Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP. Porto
Alegre: Bookman, 2014.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788582601969/
SOARES, Walace. PHP 5 - Conceitos, Programação e Integração com Banco de
Dados. 7ª Ed. São Paulo: Érica, 2013.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788536505633
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A-57D1-
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Sugestões de Livros
DESV. WEB HTML5, CSS, JS E