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

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

Usando JavaScript

Comentários

Declaração de Variáveis

Declaração e atribuição de Valores

Como JavaScript Torna as paginas Web mais interativas?

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.

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.

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.

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.

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.

A Tag

Usando JavaScript

JavaScript em arquivo externo

Operadores matemáticos

Operadores de atribuição

Operadores relacionais

Operadores lógicos

Conversões

Decisões & Loops

Tipos de estruturas

Estrutura de decisão

Estrutura de decisão IF

Estrutura de decisão IF ELSE

Estrutura de decisão SWITCH

Estrutura de Repetição FOR

Estrutura de Repetição While

Estrutura de Repetição Do While

Funções

Criando e chamando funções

Funções com parâmetros

Funções com retorno

Objetos Predefinidos

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.

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.

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.

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.

Document Object Model

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

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.

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.

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.

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.

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.

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