Sobre a linguagem Criado em 1995 por Brendan Eich da Netscape nomeada inicialmente de Mocha, posteriormente LiveScript e por fim JavaScript. É um linguagem.

Apresentação em tema: "Sobre a linguagem Criado em 1995 por Brendan Eich da Netscape nomeada inicialmente de Mocha, posteriormente LiveScript e por fim JavaScript. É um linguagem."— Transcrição da apresentação:

1

2

3 Sobre a linguagem Criado em 1995 por Brendan Eich da Netscape nomeada inicialmente de Mocha, posteriormente LiveScript e por fim JavaScript. É um linguagem de programação Cliente-Servidor em navegadores WEB É uma linguagem Script Orientada a Objetos. Foi baseada por C, python e Java entre outras linguagens. É CASE SENSITIVE

4 Usando JavaScript O uso de JavaScript deve ser informado da seguinte forma:

5 Usando JavaScript

6 Comentários

7 Declaração de Variáveis

8 Declaração e atribuição de Valores

9

10

11 Como JavaScript Torna as paginas Web mais interativas?

12 Acessar conteúdo Você pode usar JavaScript para acessar qualquer elemento, atributo ou texto de uma pagina HTML como por exemplo: Selecionar texto dentro dos elementos em uma página. Selecionar todos os elementos com um atributos Class. Descobrir o que foi inserido em uma entrada de texto pelo ID.

13 Modificar conteúdo Você pode usar JavaScript para adicionar elementos, atributo ou texto de uma pagina ou remove-los como por exemplo: Adicionar uma paragrafo de texto texto após o primeiro elemento Alterar o tamanho ou posição de um elemento em Alterar o valor do atributo class para desencadear novas regras CSS para esses elementos.

14 Programar Regras Você pode usar especificar um conjunto de passos para que o navegador siga (como uma Receita), o que permite acessar ou alterar o conteúdo de uma página. Por exemplo: Um script de galeria que verifica em qual imagem o usuário clicou e exibe uma versão maior dessa imagem. É possível coletar valores de um formulário e realizar um calculo. Uma animação pode verificar as dimensões da janela do navegador.

15 Reagir a Eventos Você pode usar especificar que um script deve ser executado quando um evento especifico Ocorrer, por exemplo ele pode ser executado quando: Um botão é pressionado. Um link é clicado ou tocado. Um cursor paira sobre um elemento. Informações são adicionadas a um formulário. Um intervalo de tempo passou. Uma pagina Web terminou de carregar.

16 Como HTML, CSS e JavaScript se combinam? HTML: É onde o conteúdo da pagina reside, dá a estrutura e semântica da pagina. CSS: Aprimora a pagina HTML com regras que indicam a forma como o conteúdo HTML é apresentado(Fundos, bordas, dimensões, cores e formas). JavaScript: É aqui que podemos mudar a maneira como a pagina se comporta, adicionando interatividade.

17 A Tag

18 Usando JavaScript

19

20 JavaScript em arquivo externo

21 Operadores matemáticos

22 Operadores de atribuição

23 Operadores relacionais

24

25 Operadores lógicos

26 Conversões

27 Decisões & Loops

28 Tipos de estruturas

29 Estrutura de decisão

30 Estrutura de decisão IF

31 Estrutura de decisão IF ELSE

32 Estrutura de decisão SWITCH

33 Estrutura de Repetição FOR

34

35 Estrutura de Repetição While

36 Estrutura de Repetição Do While

37 Funções

38

39 Criando e chamando funções

40 Funções com parâmetros

41

42 Funções com retorno

43 Objetos Predefinidos

44 O que são objetos predefinidos? Browser Object Model : O Browser Object Model contém objetos que representam a janela ou aba do navegador. Ele contém objetos que modelam coisas como o histórico do navegador e a tela do dispositivo. Document Object Model: O Document Object Model usa objetos para criar uma representação da pagina atual. Ele cria um novo objeto para cada elemento e cada seção individual do texto na pagina. Objetos JavaScript Globais: Objetos JavaScript globais representam coisas que a linguagem JavaScript precisa para criar um modelo. Por exemplo, há um objeto que lida somente com datas e horas.

45 O que é um modelo de objeto? Um Modelo de Objeto é um grupo de objetos, cada um dos quais representam coisas relacionadas ao mundo real. Juntos eles formam um modelo de algo maior.

46 Browser Object Model O browser Object Model cria um modelo da aba ou janela do navegador. O objeto de nível mais alto é o objeto window que representa janela ou aba atual do navegador. Seus objetos filho representam outros recursos do navegador.

47 Objetos JavaScript Globais São um grupo de objetos individuais que referem-se a diferentes partes da linguagem JavaScript. Os nomes dos objetos globais geralmente começam com uma letra maiúscula, por exemplo objetos String e Date.

48

49 Document Object Model

50

51 Trabalhando com a árvore DOM Acessar e atualizar a árvore DOM envolve dois passos: Localizar o nó que representa o elemento com o qual você quer trabalhar. Usar o conteúdo de texto, elemento filhos e atributos

52 Selecionar o nó de um Elemento Algumas maneiras comuns de selecionar um elemento individual: getElementById( ) : Usar o ID de um elemento que deve ser único dentro da pagina. querySelector( ) : Usa um seletor CSS, e retorna o primeiro elemento correspondente.

53 Selecionar múltiplos Elementos Algumas maneiras de selecionar múltiplos elementos: getElementsByClassName( ) : Seleciona todos os elementos que tem um valor especifico no atributo Class. getElementsByTagName( ) : Seleciona todos os elementos que têm um nome de tag especificado. querySelectorAll( ) : Usa um seletor CSS para selecionar todos os elementos correspondentes.

54 Recorrer nós de elementos parentNode: Seleciona o pai do nó do elemento atual. previousSibling/NextSibling: Seleciona o irmão anterior ou seguinte a partir da árvore DOM. firstChild/lastChild: Seleciona o primeiro ou ultimo filho do elemento atual.

55 Atualizar Conteúdo de um Elemento innerHTML: Obtém/Define texto e marcação. textContent: Obtém/Define somente texto. innerText: Obtém/Define somente texto.

56 Adicionando Elementos createElement( ) : Cria um novo nó de elemento que é armazenado em uma variável. CreateTextNode( ) : Cria um novo nó de texto que é armazenado em uma variável. appendChild( ) : adiciona o conteúdo a árvore DOM.

57 Removendo Elementos removeChild( ) : recebe a referencia do elemento que você não quer mais.