Java: Linguagem de programação (OOP) JavaScipt: Linguagem de scripts (OOP)

Transcrição

1

2

3 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)

4 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).

5 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: HTML Formatação: CSS Comportamento: JavaScript

6 Online: Thimble ( JSfiddle ( Editores de texto: Sublime, Notepad++, entre outros; W3Schools (

7 Estrutura básica HTML: - < script> document.write( msg ); </script>

8 Estrutura básica HTML: - < script> document.write( msg ); </script> head ou body?

9 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 ();

10 confirm();

11 getelementbyid() retorna o elemento que tem o atributo ID igual ao valor entre

12 innerhtml();

13 innerhtml(); Insere no interior do HTML

14 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.

15 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.

16 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 )

17 Variáveis podem conter diversos tipos dados

18 Variáveis podem conter diversos tipos dados Inteiros (1, 2, 5440, 5655,...) int

19 Variáveis podem conter diversos tipos dados Inteiros (1, 2, 5440, 5655,...) int Fracionais (0.3 ; ) float/double

20 Variáveis podem conter diversos tipos dados Inteiros (1, 2, 5440, 5655,...) int Fracionais (0.3 ; ) float/double Palavras e frases ( javascript eh top ) string

21 Variáveis podem conter diversos tipos dados Inteiros (1, 2, 5440, 5655,...) int Fracionais (0.3 ; ) float/double Palavras e frases ( javascript eh top ) string Estado (true) boolean

22 Variáveis podem conter diversos tipos dados Inteiros (1, 2, 5440, 5655,...) int Fracionais (0.3 ; ) float/double Palavras e frases ( javascript eh top ) string Estado (true) boolean JavaScript não é uma linguagem tipada!

23 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>

24

25 + Adição - Subtração * Multiplicação / Divisão % Módulo ++ Incrementador -- Decrementador

26 = 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.

27 == igual a === valor e tipo iguais!= diferente!== valor e tipo diferente > maior que < menor que >= maior ou igual a <= menor ou igual a

28 Criar um botão que ao ser clicado exibe o resultado de uma operação matemática

29 Utilize as seguintes imagens <img id= nome src= link > Crie dois botões, que ao serem clicados, troquem a imagem exibida na tela. <button onclick= > </button>

30

31

32 Ao passar o mouse em cima da imagem, a lâmpada deverá acender. Imagem lâmpada acessa: Ao tirar o mouse de cima da lâmpada, ela deverá apagar novamente. onmousemove= onmouseout=

33

34 Podem ser utilizados como entrada e saída; Lendo algum do usuário e escrevendo na tela: ;

35 - As informações devem ser solicitadas ao usuário através de prompt();

36

37

38 Utilizando funções

39