servidor. Executado , interage com...
Transcript of servidor. Executado , interage com...
▪▪▪▪▪▪▪▪
● Executado do lado do cliente, interage com o usuário sem a necessidade do script passar pelo servidor.
● Desenvolvida por Brendan Eich, da Netscape Communications Corporation em 1995 (LiveScript).
● 1ª linguagem de script da web.○ Java: Linguagem de programação (OOP)○ JavaScipt: Linguagem de scripts (OOP)
● Principalmente utilizada no auxílio de desenvolvimento de páginas Web;
● Linguagem de script que permite levar as páginas Web a outro patamar em relação a interatividade e funções;
○ Script: parte do código inserido em uma página HTML.
● Uma linguagem independente de formatação, interpretada, altamente portátil e independente de hardware, se encaixa facilmente em outros softwares (ex navegadores).
● Pode ser usada para:○ alterar conteúdo HTML
○ alterar atributos HTML
○ alterar estilo HTML (CSS)
Exemplo: Validação de formulários movimentação de slider, etc.
As 3 camadas:
Informação: HTMLFormatação: CSSComportamento: JavaScript
● Online:○ Thimble (https://thimble.mozilla.org/pt-BR/)
○ JSfiddle (https://jsfiddle.net/)
● Editores de texto: Sublime, Notepad++, entre outros;
W3Schools (http://www.w3schools.com/js/)
● Estrutura básica HTML:
- < script> document.write(“msg”); </script>
● Estrutura básica HTML:
- < script> document.write(“msg”); </script>
head ou body?
● Caixa de alerta - window.alert();
● Saída no documento HTML - document.write();
● Saída em um elemento HTML - innerHTML
● Saída para o console do navegador - console.log();
● Caixa para que o usuário entre com dados - prompt ();
● Caixa de confirmação - confirm ();
confirm();
●
● getElementById() retorna o elemento que tem o atributo ID igual ao valor entre “ “
innerHTML();
innerHTML();
Insere no “interior” do HTML
● Recipientes que guardam valores (números, nomes, datas);
● Devem ser declaradas com var;
● Ao declarar uma var sem atribuir valor, a variável fica com valor indefinido.
● Recipientes que guardam valores (números, nomes, datas);
● Devem ser declaradas com var;
● Ao declarar uma var sem atribuir valor, a variável fica com valor indefinido.
● Devem receber nomes para que possam ser modificadas;
● Podem conter letras maiúsculas e minusculas, números, underline e $ (case sensitive);
● Linguagem não aceita hífen em nomes de variaveis;
● Palavras reservadas (break, if, else, for, try…)
● Variáveis podem conter diversos tipos dados
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
○ Fracionais (0.3 ; 3.1415…) float/double
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
○ Fracionais (0.3 ; 3.1415…) float/double
○ Palavras e frases (“javascript eh top”) string
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
○ Fracionais (0.3 ; 3.1415…) float/double
○ Palavras e frases (“javascript eh top”) string
○ Estado (true) boolean
● Variáveis podem conter diversos tipos dados
○ Inteiros (1, 2, 5440, 5655, ...) int
○ Fracionais (0.3 ; 3.1415…) float/double
○ Palavras e frases (“javascript eh top”) string
○ Estado (true) boolean
JavaScript não é uma linguagem tipada!
● Levando em conta que JavaScript não é uma linguagem tipada, faça um programa que imprima uma mesma variável diversas vezes com tipos de dados diferentes.
○ Utilize document.getElementById(“ ”).InnerHTML para exibição dos valores em tags <p id=” “> </p>
+ Adição
- Subtração
* Multiplicação
/ Divisão
% Módulo
++ Incrementador
-- Decrementador
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
Observação: Com Strings o operador aritmético + serve para concatenar.Cuidado ao adicionar números a uma string, o resultado será uma string.
== igual a
=== valor e tipo iguais
!= diferente
!== valor e tipo diferente
> maior que
< menor que
>= maior ou igual a
<= menor ou igual a
● Criar um botão que ao ser clicado exibe o resultado de uma operação matemática
● Utilize as seguintes imagens ○ http://goo.gl/5jF0Du○ http://goo.gl/yvW8Zk<img id=“nome“ src=”link”>
● Crie dois botões, que ao serem clicados, troquem a imagem exibida na tela.
<button onclick=” “> </button>
● Ao passar o mouse em cima da imagem, a lâmpada deverá acender.○ Imagem lâmpada acessa: http://goo.gl/iTtCnM
● Ao tirar o mouse de cima da lâmpada, ela deverá apagar novamente.
onmousemove=” ” onmouseout=” “
● Podem ser utilizados como entrada e saída;
Lendo algum do usuário e escrevendo na tela:
;
- As informações devem ser solicitadas ao usuário através de prompt();
● Utilizando funções…