0% acharam este documento útil (0 voto)

361 visualizações24 páginas

Apostila de JavaScript Completa

1. A história do JavaScript começou em 1995 quando foi criado para dar interatividade às páginas da Web. 2. O JavaScript permite manipular conteúdo HTML, apresentação de páginas e interagir com o usuário através de eventos de mouse, teclado e formulários. 3. Há três formas de inserir código JavaScript em páginas HTML: diretamente no corpo, no cabeçalho ou em arquivo externo, sendo esta última a forma recomendada.

Enviado por

Cliffy Augusto

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

361 visualizações24 páginas

Apostila de JavaScript Completa

Enviado por

Cliffy Augusto

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Apostila – JavaScript

SUMÁRIO

1. HISTÓRIA JAVASCRIPT........................................................................................................................................... 3
2. O QUE É JAVASCRIPT ............................................................................................................................................ 5
2.1 O que é possível com o JavaScript ................................................................................................................ 5
3. INSERINDO CÓDIGO JAVASCRIPT EM PÁGINA HTML ........................................................................................... 6
3.1 Inserindo o código javascrip diretamente no body do documento html (inline)......................................... 7
3.2 Inserindo javascript no head do documento HTML ..................................................................................... 8
3.3 Inserindo javascript em um arquivo externo ............................................................................................... 9
4. CONSIDERAÇÕES IMPORTANTES SOBRE ALGUNS ELEMENTOS DE JAVASCRIPT................................................10
4.1 Atributos importantes da tag script: type e src..........................................................................................10
4.2 Document ....................................................................................................... Erro! Indicador não definido.
5. PRIMEIRO CÓDIGO JAVASCRIPT .........................................................................................................................11
6. OBJETO WINDOW ...............................................................................................................................................12
6.1 Método alert() ............................................................................................................................................16
6.2 Método confirm() .......................................................................................................................................17
6.3 Método prompt() .......................................................................................................................................18
7. OBJETO DOCUMENT ...........................................................................................................................................19
7.1 Método write() ...........................................................................................................................................19
7.2 Método [Link]()........................................................................................................20

2
Apostila – JavaScript
1. HISTÓRIA JAVASCRIPT

_____________________________________________________________________________________________

3
Apostila – JavaScript

_____________________________________________________________________________________________

4
Apostila – JavaScript
2. O QUE É JAVASCRIPT

2.1 O que é possível com o JavaScript

Com o javascript é possível:

MANIPULAR:
- Conteúdo das páginas HTML;
- Apresentação das páginas HTML;
- Manipular o navegador.
INTERAGIR:
- Com o usuário;
- Responder a um clique de mouse, responder eventos de teclado;
- Interagir com formulários HTML;
- Interagir com outras linguagens dinâmicas de programação.
_____________________________________________________________________________________________

_____________________________________________________________________________________________

5
Apostila – JavaScript
3. INSERINDO CÓDIGO JAVASCRIPT EM PÁGINA HTML

_____________________________________________________________________________________________

6
Apostila – JavaScript
_____________________________________________________________________________________________

3.1 Inserindo o código javascrip diretamente no body do documento html (inline)

Esta maneira de inserir o código javascript NÃO é recomendada.

_____________________________________________________________________________________________

7
Apostila – JavaScript
_____________________________________________________________________________________________

3.2 Inserindo javascript no head do documento HTML

Apesar de ser “menos pior” que a forma anterior, ainda NÃO é a maneira recomendada.

_____________________________________________________________________________________________

8
Apostila – JavaScript
_____________________________________________________________________________________________

3.3 Inserindo javascript em um arquivo externo

O documento HTML deve ter obrigatoriamente a tag <script> contendo os atributos:

type = “type/javascript”
src=”[Link]” (é o arquivo javascript com a extensão .js)

Assim, o documento HTML está se vinculando ao código javascript.

Esta é a maneira RECOMENDADA para inserir javascript em um documento HTML.

_____________________________________________________________________________________________

9
Apostila – JavaScript
_____________________________________________________________________________________________

4. CONSIDERAÇÕES IMPORTANTES SOBRE ALGUNS ELEMENTOS DE JAVASCRIPT

4.1 Atributos importantes da tag script: type e src

_____________________________________________________________________________________________

10
Apostila – JavaScript
_____________________________________________________________________________________________

5. EVENTOS

_____________________________________________________________________________________________

6. PRIMEIRO CÓDIGO JAVASCRIPT

Resultado:

11
Apostila – JavaScript
_____________________________________________________________________________________________

7. OBJETO WINDOW

O objeto window representa uma janela aberta do navegador:

Objeto window

_____________________________________________________________________________________________

12
Apostila – JavaScript
_____________________________________________________________________________________________

7.1 Propriedades do objeto window

O objeto window possui várias propriedades:

PROPRIEDADE DESCRIÇÃO

closed Retorna um valor booleano que indica se uma janela foi fechada ou não.

defaultStatus Define ou retorna o texto padrão na barra de estado de uma janela.

document Retorna o objeto document (o document também é um objeto).

frameElement Retorna o elemento <iframe> no qual está inserida a janela atual.

frames Retorna todos elementos <iframe> na janela atual.

history Retorna o objeto history (o history também é um objeto).

innerHeight Retorna a altura interna de uma janela de área de conteúdo.

innerWidth Retorna a largura interna de uma janela de área de conteúdo.

length Retorna o número de elementos <iframe> da janela atual.

location Retorna o objeto Location da janela (este Location também é um objeto).

name Define ou retorna o nome de uma janela.

navigator Retorna o objeto Navigator para a janela (este Navigator é um objeto).

opener Devolve uma referência para a janela que criou a janela.

outerHeight Retorna a altura externa de uma janela, incluindo barras de ferramentas / barras de rolagem.

outerWidth Retorna a largura externa de uma janela, incluindo barras de ferramentas / barras de rolagem.

pageXOffset Retorna os pixels do documento atual rolado (horizontalmente) a partir do canto superior esquerdo da
janela.

pageYOffset Retorna os pixels do documento atual rolado (verticalmente) a partir do canto superior esquerdo da
janela.

parent Retorna a janela pai da janela atual.

screen Retorna o objeto Screen para a janela (Screen também é um objeto).

screenLeft Retorna a coordenada horizontal da janela em relação à tela.

screenTop Retorna a coordenada vertical da janela em relação à tela.

screenX Retorna a coordenada horizontal da janela em relação à tela.

screenY Retorna a coordenada vertical da janela em relação à tela.

scrollX An alias of pageXOffset

scrollY An alias of pageYOffset

self Retorna a janela atual.

status Define ou retorna o texto na barra de estado de uma janela.

top Retorna a janela superior do navegador.

13
Apostila – JavaScript

8. OBJETO DOCUMENT

Quando um documento HTML é carregado em um navegador, torna-se um objeto document.

IMPORTANTE!!!!
O objeto document faz parte do objeto window e pode ser acessado como [Link]. Ou seja, o
objeto window é acessado com: [Link].

O objeto document possui várias propriedades/métodos que interferem no conteúdo da página:

Propriedade / Método Descrição

[Link]() Anexa um manipulador de eventos para o documento.
[Link]() Adota um nó de outro documento.
[Link] Retorna uma coleção de todos os elementos <a> no documento que têm
um atributo de nome.
[Link] Retorna uma coleção de todos os elementos <applet> no documento.
[Link] Retorna o URI de base absoluta de um documento.
[Link] Define ou retorna o elemento <body> do documento.
[Link]() Fecha a saída que foi aberta anteriormente com [Link]()
[Link] Retorna todos os pares nome/valor dos cookies no documento.
[Link]() Cria um nó de atributo.
[Link]() Adiciona um comentário ao documento HTML, com texto especificado.
[Link]() Cria um nó fragmentado de um Document vazio.
[Link]() Creates an Element node
[Link]() Creates a Text node
[Link] Retorna a Declaração Tipo de Documento associado ao documento.
[Link] Retorna o elemento do documento (o elemento <html>)
[Link] Retorna o modo utilizado pelo navegador para renderizar o documento.
[Link] Define ou retorna a localização do documento.
[Link] Retorna o nome de domínio do servidor que colocou o documento.
[Link] Obsoleto.
[Link] Retorna uma coleção de todos os elementos <embed> do documento.
[Link] Retorna uma coleção de todos os elementos <form> no documento.
[Link]() Retorna o elemento que tem o atributo ID com o valor especificado.
[Link]() Retorna os elementos com o nome da classe especificada.
[Link]() Retorna os elementos com um nome especificado.
[Link]() Retorna os elementos com a tag name especificada.
[Link] Retorna o elemento <head> do documento.
[Link] Retorna todos os elementos <img> no documento

14
Apostila – JavaScript
[Link] Returns the DOMImplementation object that handles this document
[Link]() Imports a node from another document
[Link] Returns the encoding, character set, used for the document
[Link] Returns the date and time the document was last modified
[Link] Returns a collection of all <a> and <area> elements in the document that
have a href attribute
[Link]() Removes empty Text nodes, and joins adjacent nodes
[Link]() Removes empty Text nodes, and joins adjacent nodes
[Link]() Opens an HTML output stream to collect output from [Link]()
[Link]() Returns the first element that matches a specified CSS selector(s) in the
document
[Link]() Returns a static NodeList containing all elements that matches a specified
CSS selector(s) in the document
[Link] Returns the (loading) status of the document
[Link] Returns the URL of the document that loaded the current document
[Link]() Removes an event handler from the document (that has been attached with
theaddEventListener() method)
[Link]() Renames the specified node
[Link] Returns a collection of <script> elements in the document
[Link] Sets or returns whether error-checking is enforced or not
[Link] Sets or returns the title of the document
[Link] Returns the full URL of the HTML document
[Link]() Writes HTML expressions or JavaScript code to a document
[Link]() Same as write(), but adds a newline character after each statement

O objeto window possui várias propriedades

15
Apostila – JavaScript

possui várias propriedades, sendo as mais importantes para essa apostila os seguintes:

Alguns comandos JavaScript fazem com que as páginas HTML sejam mais dinâmicas e interativas com o usuário.

8.1 Método alert()

Exibe uma mensagem ao usuário.

Exemplo:

Obs.: o comando [Link] = function () significa que quando a página for carregada,
executará o comando alert.

16
Apostila – JavaScript

Resultado:

_____________________________________________________________________________________________

8.2 Método confirm()

Este comando exibe uma mensagem de confirmação ao usuário.

Exemplo:

Resultado:

17
Apostila – JavaScript

Este comando oferece duas opções: OK ou Cancelar.

Se o usuário clicar em OK, é equivalente ao valor booleano true e o Cancelar representa false.

_____________________________________________________________________________________________

8.3 Método prompt()

O comando prompt exibe um texto e um campo para o usuário fornecer algum dado.

Exemplo:

18
Apostila – JavaScript

Resultado:

Por meio deste comando é possível receber dados do usuário.

_____________________________________________________________________________________________

9. OBJETO DOCUMENT

9.1 Método write()

Sua finalidade é “escrever no documento HTML”, ou seja, com este comando insere-se um conteúdo no
documento HTML.

Importante frisar que este comando apaga o conteúdo que já estiver na página, ou seja, quando este comando
for executado ele limpará/apagará o conteúdo já contido no documento e exibirá o seu conteúdo entre ().

19
Apostila – JavaScript
Entendendo o [Link]()
Um arquivo HTML que aparece na janela do browser é considerado um objeto do tipo document. Logo, cada
objeto javascript possui um conjunto de métodos ou funções. Então, para o objeto document, há o método
write().

Exemplo 1: documento HTML sem usar o [Link]():

Exemplo 2: usando o [Link]:

Resultado:

Ao usar o [Link] no mesmo documento HTML do exemplo 1, o conteúdo inicial foi apagado e foi
apresentado o conteúdo do [Link].

9.2 Método getElementById()

Este comando escreve algo dentro de uma tag a partir do atributo id. Literalmente, esse comando é lido da
seguinte forma: “pegar o elemento pelo id”.

Além de escrever algo dentro de uma tag, este comando substitui um conteúdo de uma tag caso esta tag já tenha
um conteúdo.

20
Apostila – JavaScript
Exemplo: documento HTML com id definido

Código javascript:

Resultado:

Note que o conteúdo original da tag h1 foi substituído.

_____________________________________________________________________________________________

[Link]().value

21
Apostila – JavaScript

22
Apostila – JavaScript

23
Apostila – JavaScript

Apostila de JavaScript Completa

Enviado por

Apostila de JavaScript Completa

Enviado por

Apostila – JavaScript

2.1 O que é possível com o JavaScript

Com o javascript é possível:

3.1 Inserindo o código javascrip diretamente no body do documento html (inline)

Esta maneira de inserir o código javascript NÃO é recomendada.

3.2 Inserindo javascript no head do documento HTML

3.3 Inserindo javascript em um arquivo externo

O documento HTML deve ter obrigatoriamente a tag <script> contendo os atributos:

Assim, o documento HTML está se vinculando ao código javascript.

Esta é a maneira RECOMENDADA para inserir javascript em um documento HTML.

4. CONSIDERAÇÕES IMPORTANTES SOBRE ALGUNS ELEMENTOS DE JAVASCRIPT

4.1 Atributos importantes da tag script: type e src

6. PRIMEIRO CÓDIGO JAVASCRIPT

O objeto window representa uma janela aberta do navegador:

7.1 Propriedades do objeto window

O objeto window possui várias propriedades:

defaultStatus Define ou retorna o texto padrão na barra de estado de uma janela.

document Retorna o objeto document (o document também é um objeto).

frameElement Retorna o elemento <iframe> no qual está inserida a janela atual.

frames Retorna todos elementos <iframe> na janela atual.

history Retorna o objeto history (o history também é um objeto).

innerHeight Retorna a altura interna de uma janela de área de conteúdo.

innerWidth Retorna a largura interna de uma janela de área de conteúdo.

length Retorna o número de elementos <iframe> da janela atual.

location Retorna o objeto Location da janela (este Location também é um objeto).

name Define ou retorna o nome de uma janela.

navigator Retorna o objeto Navigator para a janela (este Navigator é um objeto).

opener Devolve uma referência para a janela que criou a janela.

parent Retorna a janela pai da janela atual.

screen Retorna o objeto Screen para a janela (Screen também é um objeto).

screenLeft Retorna a coordenada horizontal da janela em relação à tela.

screenTop Retorna a coordenada vertical da janela em relação à tela.

screenX Retorna a coordenada horizontal da janela em relação à tela.

screenY Retorna a coordenada vertical da janela em relação à tela.

scrollX An alias of pageXOffset

scrollY An alias of pageYOffset

self Retorna a janela atual.

status Define ou retorna o texto na barra de estado de uma janela.

top Retorna a janela superior do navegador.

Quando um documento HTML é carregado em um navegador, torna-se um objeto document.

O objeto document possui várias propriedades/métodos que interferem no conteúdo da página:

Propriedade / Método Descrição

O objeto window possui várias propriedades

8.1 Método alert()

Exibe uma mensagem ao usuário.

8.2 Método confirm()

Este comando exibe uma mensagem de confirmação ao usuário.

Este comando oferece duas opções: OK ou Cancelar.

8.3 Método prompt()

Por meio deste comando é possível receber dados do usuário.

9.1 Método write()

Exemplo 1: documento HTML sem usar o [Link]():

Exemplo 2: usando o [Link]:

9.2 Método getElementById()

Note que o conteúdo original da tag h1 foi substituído.

Você também pode gostar