Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Tecnologia para Internet - II
Goiânia - Goiás Estácio – ADS Prof: Daniel Gomes de Oliveira
2
Linguagem Javascript
3
Apresentação do conceito de Programação client-side versus server-side.
4
Client-Side A linguagem lado cliente ou (client-side) é a linguagem executada no computador do próprio usuário. Uma das linguagens mais utilizadas atualmente é a Linguagem Javascript .
5
Server-Side A linguagem lado servidor ou (server-side) é a linguagem executada no servidor Web (HTTP), e tem como responsabilidade processar e controlar os dados que serão apresentados para os "clientes", no caso os navegadores Web. Segue abaixo a lista de algumas linguagens do tipo server-side: PHP Java Python Ruby Perl ASP .NET Node.js
6
Apresentação da Linguagem Javascript
Javascript é uma linguagem de programação que está localizada do lado cliente, isto é, no navegador e tem como objetivo controlar o HTML e o CSS manipulando-os no documento HTML. Esta linguagem possui uma estrutura parecida com as linguagens C++ e Java, permitindo inclusive a orientação a objetos. É mantida pela European Computer Manufacturer's Association ( 262/6.0/) e atualmente encontra- se na versão 6.
7
Definição DOM É a interface entre a linguagem Javascript e os objetos do HTML. Basicamente quando o documento HTML é carregado pelo navegador, o mesmo fica armazenado em uma estrutura hierárquica em forma de árvore que pode ser facilmente manipulável através de comandos Javascript.
8
Definição DOM O Document Object Model é uma interface de plataforma e linguagem neutra que permitirá que programas e scripts para acessem e atualizem dinamicamente o conteúdo, estrutura e estilo de documentos . O documento pode ser adicionalmente processado e os resultados de processamento que podem ser incorporados para trás para dentro da página apresentada.
9
Incluindo Javascript em um documento HTML.
10
<SCRIPT> Este elemento permite a inclusão de comandos Javascript em um documento HTML5. Podendo ser utilizado sempre que for necessário.
11
Atributos: src = endereço do arquivo javascript ;
type= Especifica o tipo de arquivo "text/javascript“;
12
Exemplo 1: Teste de javascript Uma pagina com javascriptscript
<!doctype html> <html> <head> <meta charset=latin1> <title>Uma pagina com javascriptscript </TITLE> <script> alert('Oi Mundo'); </script> </head> <body> <h1> Teste de javascript </h1> console.log(‘Abra o console do seu navegador.'); </body> </html>
13
Exemplo 2: Também pode ser utilizado dentro de uma tag com a utilização de eventos.
14
Exemplo 2: <!doctype html> <html> <head>
Uma pagina com javascriptscript Teste de javascript Uma pagina com javascriptscript Teste de javascript 2 Exemplo 2: <!doctype html> <html> <head> <meta charset=latin1> <title>Uma pagina com javascriptscript </TITLE> </head> <body> <h1> Teste de javascript 2 </h1> <button onclick="alert('Oi Mundo 2!!!')">Clique aqui</button> </body> </html>
15
Criação de variáveis Tipo String
var nome = "João";
16
Criação de variáveis Tipo String
var nome = "João";
17
Criação de variáveis Tipo Numérica
var idade=25;
18
Tipo Array Exemplo: var idade[ ] ; idade[0] = 20; idade[1]=30; var nomes=["Andre", "Fernanda", "Luana", "Neuza", "Rodrigo", "Danielle", "Paulo"];
19
var pessoa = { nome: "Joao", idade:20, salario: 800 };
Tipo Objeto var pessoa = { nome: "Joao", idade:20, salario: 800 };
20
Exibição de dados no javascript:
window.alert() Esta função permite exibir uma caixa de aviso para o usuário. Exemplo de utilização: <script> alert("teste"); </script>
21
Exibição de dados no javascript:
document.write() Exibe o conteúdo no HTML. Exemplo de utilização: <html> <body> <h1>Bem vindo!!!</h1> <script> document.write(“ao meu site de teste”); </script> </body> </html>
22
document.getElementById("id")
Este comando permite capturar o elemento do html. Exemplo de utilização: A função exibe() será executada quando o elemento receber um clique do mouse.
23
Exemplo de utilização:
<html> <head> <script> function exibe(){ var x=document.getElementById("teste"); alert(x.innerHTML); } </script> </head> <body> <h1 id=teste onclick=exibe()>Clique aqui</h1> </body> </html>
24
innerHTML Escreve dentro do elemento. Exemplo de utilização: <html> <body> <h1>Bem vindo !!</h1> <div id=idade></div> <script> document.getElementById("idade").innerHTML = ; </script> </body> </html>
25
Desafio: Criar um formulário com entrada de dois valores. 1º Numero e 2º Numero. Imprima abaixo os seguintes valores: Multiplicação: Divisão: Soma: Subtração: Média:
Apresentações semelhantes
