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 document.getElementById()........................................................................................................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=”Script.js” (é 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 window.document. Ou seja, o
objeto window é acessado com: window.document.

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

Propriedade / Método Descrição

document.addEventListener()
document.adoptNode()
document.anchors
document.applets
document.baseURI
document.body
document.close()
document.cookie
document.createAttribute()
document.createComment()
document.createDocumentFragment()
document.createElement()
document.createTextNode()
document.doctype
document.documentElement
document.documentMode
document.documentURI
document.domain
document.domConfig
document.embeds
document.forms
document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()
document.head
document.images
Anexa um manipulador de eventos para o documento.
Adota um nó de outro documento.
Retorna uma coleção de todos os elementos <a> no documento que têm
um atributo de nome.
Retorna uma coleção de todos os elementos <applet> no documento.
Retorna o URI de base absoluta de um documento.
Define ou retorna o elemento <body> do documento.
Fecha a saída que foi aberta anteriormente com document.open()
Retorna todos os pares nome/valor dos cookies no documento.
Cria um nó de atributo.
Adiciona um comentário ao documento HTML, com texto especificado.
Cria um nó fragmentado de um Document vazio.
Creates an Element node
Creates a Text node
Retorna a Declaração Tipo de Documento associado ao documento.
Retorna o elemento do documento (o elemento <html>)
Retorna o modo utilizado pelo navegador para renderizar o documento.
Define ou retorna a localização do documento.
Retorna o nome de domínio do servidor que colocou o documento.
Obsoleto.
Retorna uma coleção de todos os elementos <embed> do documento.
Retorna uma coleção de todos os elementos <form> no documento.
Retorna o elemento que tem o atributo ID com o valor especificado.
Retorna os elementos com o nome da classe especificada.
Retorna os elementos com um nome especificado.
Retorna os elementos com a tag name especificada.
Retorna o elemento <head> do documento.
Retorna todos os elementos <img> no documento

14
 Apostila – JavaScript
document.implementation
document.importNode()
document.inputEncoding
document.lastModified
document.links
document.normalize()
document.normalizeDocument()
document.open()
document.querySelector()
document.querySelectorAll()
document.readyState
document.referrer
document.removeEventListener()
document.renameNode()
document.scripts
document.strictErrorChecking
document.title
document.URL
document.write()
document.writeln()
O objeto window possui várias propriedades
Returns the DOMImplementation object that handles this document
Imports a node from another document
Returns the encoding, character set, used for the document
Returns the date and time the document was last modified
Returns a collection of all <a> and <area> elements in the document that
have a href attribute
Removes empty Text nodes, and joins adjacent nodes
Removes empty Text nodes, and joins adjacent nodes
Opens an HTML output stream to collect output from document.write()
Returns the first element that matches a specified CSS selector(s) in the
document
Returns a static NodeList containing all elements that matches a specified
CSS selector(s) in the document
Returns the (loading) status of the document
Returns the URL of the document that loaded the current document
Removes an event handler from the document (that has been attached with
theaddEventListener() method)
Renames the specified node
Returns a collection of <script> elements in the document
Sets or returns whether error-checking is enforced or not
Sets or returns the title of the document
Returns the full URL of the HTML document
Writes HTML expressions or JavaScript code to a document
Same as write(), but adds a newline character after each statement
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 window.onload = 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 document.write()
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 document.write():

Exemplo 2: usando o document.write:

Resultado:

Ao usar o document.write no mesmo documento HTML do exemplo 1, o conteúdo inicial foi apagado e foi
apresentado o conteúdo do document.write.

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.

_____________________________________________________________________________________________

_____________________________________________________________________________________________

_____________________________________________________________________________________________

_____________________________________________________________________________________________

_____________________________________________________________________________________________

Document.getElementById().value

21
Apostila – JavaScript

22
Apostila – JavaScript

23
Apostila – JavaScript

24