▪▪▪▪▪▪▪▪

● 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…