0% acharam este documento útil (0 voto)

11 visualizações10 páginas

Apostila de JavaScript FATEC-SP

Este documento é uma apostila sobre JavaScript, elaborada pela Prof.a Elisabete da Silva Santos, que abrange desde a introdução à linguagem até conceitos avançados como objetos e eventos. A apostila inclui tópicos como a história do JavaScript, sua aplicação em páginas HTML, variáveis, tipos de dados, funções, arrays e loops. O material é destinado a uso pessoal e privado e não deve ser reproduzido ou compartilhado sem autorização.

Enviado por

Pnaic Damiao

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)

11 visualizações10 páginas

Apostila de JavaScript FATEC-SP

Enviado por

Pnaic Damiao

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

Você está na página 1/ 10

Impresso por Pnaic Damiao, E-mail pnaicdodamiao2018@gmail.com para uso pessoal e privado.

Este material pode ser protegido por

direitos autorais e não pode ser reproduzido ou repassado para terceiros. 25/10/2022 12:44:36

Apostila

Prof.a Elisabete da Silva Santos

Apostila

Prof.a Elisabete da Silva Santos

D epartamento de Tecnologia da Informação

FATEC-SP
FATEC-
Impresso por Pnaic Damiao, E-mail pnaicdodamiao2018@gmail.com para uso pessoal e privado. Este material pode ser protegido por
direitos autorais e não pode ser reproduzido ou repassado para terceiros. 25/10/2022 12:44:36

Javascript  2

JavaScript
Índice
1. Introdução.............................................................................................................................................. 4
1.1. Histórico ......................................................................................................................................................................... 4
1.2. O quê é JavaScript?......................................................................................................................................................... 4
1.3. Java, C++ e JavaScript são a mesma coisa?.................................................................................................................... 4
1.4. O quê posso fazer com JavaScript? ................................................................................................................................ 5
1.5. O quê preciso para programar em JavaScript?................................................................................................................ 5
2. JavaScript em uma Página HTML........................................................................................................ 5
2.1. Tags de Comentário:....................................................................................................................................................... 6
2.2. Ocultando JavaScript de Navegadores mais Antigos...................................................................................................... 7
2.1. Escrevendo em uma Página – document.write( )............................................................................................................ 7
3. Caixas Pop-up ........................................................................................................................................ 7
3.1. Método alert( ) ................................................................................................................................................................ 7
3.2. Método prompt( )............................................................................................................................................................ 8
3.3. Método confirm( )........................................................................................................................................................... 8
4. Caracteres de Escape............................................................................................................................. 8
5. Variáveis ................................................................................................................................................ 9
5.1 Globais e Locais .............................................................................................................................................................. 9
5.2. Nomes de Variáveis ...................................................................................................................................................... 10
6. Tipos de Dados em JavaScript............................................................................................................. 10
6.1. Básicos.......................................................................................................................................................................... 10
6.2. Especias ........................................................................................................................................................................ 10
7. Conversão entre Tipos de Dados ......................................................................................................... 11
7.1. Funções parseInt( ) e parseFloat( )................................................................................................................................ 11
7.2. Outros métodos de conversão de tipos de dados - Number(), String(), Boolean()........................................................ 11
7.3. Fixando e Arredondado o número de casas “decimais” - toFixed( )............................................................................. 12
8. Operadores........................................................................................................................................... 12
8.1. Aritméticos ................................................................................................................................................................... 12
8.2. Relacionais.................................................................................................................................................................... 13
8.3. Lógicos ......................................................................................................................................................................... 13
8.4. Unários Diversos .......................................................................................................................................................... 14
8.5. Operadores de Atribuição ............................................................................................................................................. 14
8.6. Operadores Diversos..................................................................................................................................................... 14
9. Funções................................................................................................................................................. 15
9.1. Formato......................................................................................................................................................................... 15
9.2. Função sem Parâmetros ................................................................................................................................................ 16
9.3. Função recebendo Parâmetros ...................................................................................................................................... 16
9.4. Função retornando Valores........................................................................................................................................... 17
10. Strings .................................................................................................................................................. 17
10.1. Objeto Strings ............................................................................................................................................................. 17
10.2. Comprimento de String - length ................................................................................................................................. 18
10.3. Conversão de String – toUpperCase( ) e toLowerCase( )........................................................................................... 18
10.4. Substrings – substring( ) ............................................................................................................................................. 18
10.5. Obtendo um Único Caractere - charAt( ).................................................................................................................... 19
10.6. Localizando uma Substring - indexOf( )..................................................................................................................... 19
10.7. Localizando a Última Ocorrência de uma Substring – lastIndexOf( ) ........................................................................ 19

Faculdade de Tecnologia de São de Paulo

Profª Elisabete da Silva Santos
Impresso por Pnaic Damiao, E-mail pnaicdodamiao2018@gmail.com para uso pessoal e privado. Este material pode ser protegido por
direitos autorais e não pode ser reproduzido ou repassado para terceiros. 25/10/2022 12:44:36

Javascript  3

11. Teste e Comparação de Valores .......................................................................................................... 20

11.1. Instrução if/else........................................................................................................................................................... 20
11.2. Expressão Condicional ............................................................................................................................................... 21
11.3. Instrução switch( ) ...................................................................................................................................................... 21
12. Array .................................................................................................................................................... 22
12.1. Criando um Array Numérico ...................................................................................................................................... 22
12.2. Acessando os Elementos do Array.............................................................................................................................. 22
12.3. Criando Arrays de Strings........................................................................................................................................... 23
12.4. Criando Arrays Rapidamente...................................................................................................................................... 23
12.5. Verificando a Quantidade de Elementos de um Array................................................................................................ 23
12.6. Dividindo uma String e Armazenando-a em um Array – split( )................................................................................ 24
12.7. Remontando um Array em uma String – join( ) ......................................................................................................... 24
12.8. Classificando Elementos de um Array........................................................................................................................ 24
13. Loops.................................................................................................................................................... 25
13.1. Loop for ...................................................................................................................................................................... 25
13.2. Loop while.................................................................................................................................................................. 26
13.3. Loop do...while ........................................................................................................................................................... 26
13.4. Loop for...in ................................................................................................................................................................ 27
13.5. Criando um Loop Infinito ........................................................................................................................................... 27
13.6. Escapando de um Loop Infinito.................................................................................................................................. 28
13.7. Desprezando uma Iteração de um Loop...................................................................................................................... 28
14. Objetos Embutidos .............................................................................................................................. 29
14.1. Objeto Math................................................................................................................................................................ 29
14.2. Trabalhando com Números......................................................................................................................................... 31
14.3. Objeto Date................................................................................................................................................................. 32
15. Instrução with ...................................................................................................................................... 34
16. Tratadores de Eventos ......................................................................................................................... 35
16.1. Respondendo a Eventos.............................................................................................................................................. 35
16.2. Objeto event................................................................................................................................................................ 39
17. Objetos Personalizados........................................................................................................................ 40
17.1. Conceitos .................................................................................................................................................................... 40
17.2. Criando Objetos Personalizados ................................................................................................................................. 41
17.3. Criando Instâncias....................................................................................................................................................... 41
17.4. Criando Instâncias Atribuindo Valores....................................................................................................................... 42
17.5. Relação de Métodos e Propriedades de Formatação................................................................................................... 42
17.6. Protótipos de Objetos.................................................................................................................................................. 43
18. Hierarquia do Objeto Browser............................................................................................................ 43
18.1. Objeto window............................................................................................................................................................ 44
18.1.2. Objeto location......................................................................................................................................................... 49
18.1.3. Objeto history .......................................................................................................................................................... 50
18.1.4. Objeto document...................................................................................................................................................... 52
18.4.5. Objeto link ............................................................................................................................................................... 54
18.4.6. Objeto anchor........................................................................................................................................................... 55
18.4.7. Objeto image............................................................................................................................................................ 56
18.4.8. Objeto form.............................................................................................................................................................. 61
19. Detecção e Diferenças entre Navegadores........................................................................................... 68
20. Outros Scripts ...................................................................................................................................... 70
21. Bibliografia .......................................................................................................................................... 73
22. Sobre Sites... ......................................................................................................................................... 73

Faculdade de Tecnologia de São de Paulo

Javascript  4

1. Introdução

1.1. Histórico

JavaScript foi desenvolvido por Brendan Eich, da Netscape Communications Corporation. Originalmente
chamado LiveScript e foi introduzido no Netscape Navigator 2.0 em 1995. Mais tarde, foi batizado como
JavaScript para indicar seu relacionamento com Java, termo da Web muito atraente no momento.
JavaScript foi a primeira linguagem de script da Web e é de longe a mais popular. Quando a Microsoft
percebeu o quanto podia ser útil uma linguagem de script para a Web, lançou sua própria variante
chamada JScript 1.0 com o navegador Internet Explorer 3.0.
O JScript 1.0 era compatível com o JavaScript 1.0 do Netscape, o que significava que um JavaScript
escrito para um dos navegadores tinha uma boa chance de funcionar como esperado em um outro
navegador. Após alguns upgrades de versões tanto da Netscape quanto, principalmente, da Microsoft,
gerou-se o início de incompatibilidades de navegadores.
Foi criado então um padrão chamado de linguagem ECMAScript em 1997, chamado também ECMA-262,
criado pelo grupo suíço European Computer Manufacturing Association. A partir daí, grande parte do
caos ocorrido foi dando lugar a uma melhor concordância entre ambas as linguagens e os padrões. O
JavaScript1.5 e JScript 5.5 atualmente estão sendo 100% concordantes com o ECMAScript Edição 3,
pelo menos na teoria, se todas as pessoas estiverem usando a última versão do navegador...

1.2. O quê é JavaScript?

JavaScript é uma linguagem de script que lhe possibilita adicionar um novo nível de interatividade e
função às páginas Web.
Um script é uma seqüência de instruções (ou, até mesmo um programa) que são interpretados ou
executados por um outro programa e não pelo processador do computador. Eles são mais fáceis e mais
rápidos de se escrever do que os programas e necessitam no mínimo de um editor de texto simples, que
pode ser gratuito!
Diferentemente de HTML, se houver erros nos scripts o programa interromperá a execução e poderá até
travar o computador. Normalmente você poderá visualizar a mensagem de erro gerado em seu
navegador.

1.3. Java, C++ e JavaScript são a mesma coisa?

JavaScript é uma linguagem de terceira geração, o que significa que ela é prima do C, Pascal e BASIC.
Existem semelhanças, mas existem também diferenças fundamentais:
 JavaScript é independente de formatação.
 JavaScript é uma linguagem interpretada.
 JavaScript é altamente portátil e independente de hardware.
 JavaScript se encaixa facilmente em outro software, como os navegadores.

Se você tiver alguma experiência em C, C++, Pascal, BASIC, Java, FORTRAN ou Perl, você pode achar
familiares alguns dos aspectos do JavaScript . Mas não se iluda, para escrever JavaScript, você precisa
usar JavaScript!

Faculdade de Tecnologia de São de Paulo

Javascript  5

1.4. O quê posso fazer com JavaScript?

 Você pode adicionar mensagens que rolam na tela ou alterar as mensagens da linha de status do
navegador.
 Validar conteúdo de um formulário.
 Fazer cálculos;
 Trabalhar com datas, horas e fuso horário;
 Exibir mensagens para o usuário tanto como parte de uma página da Web como em caixas de
alertas;
 Fazer animações de imagens ou imagens que mudam quando você move o cursor sobre elas;
 Detectar o navegador em utilização e exibir conteúdo diferente para navegadores diferentes;
 Detectar plug-ins instalados e notificar o usuário se um plug-in foi exigido;
 E muito mais, é só usar a criatividade!

1.5. O quê preciso para programar em JavaScript?

 Um editor de texto (não utilize formatação) ou um bloco de notas.

 Um navegador. (Netscape, Internet Explorer, Opera...)
 Conhecimentos básicos em HTML, onde o script será incluído.

Curiosidade: Java é uma ilha densamente povoada na Indonésia, produtora de café. Seu nome foi utilizado para
batizar a linguagem Java quando seus desenvolvedores estavam tomando um cafezinho... Já pensou se o
cafezinho fosse brasileiro?

2. JavaScript em uma Página HTML

Para incluir Java Script em uma página HTML utilizamos as tags <script> conteúdo </script>.
Podemos também indicar a linguagem de script a ser utilizada e a versão:
<script language=”javascript”> ... </script> // JavaScript é a linguagem padrão do navegador.
<script language=”javascript1.3”> ... </script> // 1.3 é a versão JavaScript utilizada.

Atenção:

 O script é sensível a letras maiúsculas e minúsculas ( sensitive case), portanto, digite em minúsculo o
que estiver em minúsculo e em maiúsculo o que estiver em maiúsculo!
 Não utilize caracteres especiais (acentos, asteriscos, pontos...), exceto como conteúdo de variáveis!

Podemos incluir as tags de Javascript em vários lugares do código HTML:

 Em um Arquivo Externo
 No Cabeçalho do Documento
 Dentro de Tags , utilizando Tratadores de Eventos
 No Corpo do Documento

Faculdade de Tecnologia de São de Paulo

Javascript  6

Exemplos:

1. <html>
<head>
<title> Javascript1 </title>
<script language=“javascript”>
alert(“Seja bem-vindo(a)!”);
// JavaScript no Cabeçalho da página HTML.
</script>
</head> ...

2. <html>
<head>
<title> Javascript2 </title>
<script language=“javascript” src=“arquivo_externo.js”>
// Chamando um Arquivo Externo contendo JavaScript.
</script>
</head> ...

3. <html>
<head>
<title> Javascript3 </title>
</head>
<body>
<input type=“button” value=“Mensagem” onclick=“alert(‘Ola!’);”>

</body> …

4. <html>
<head>
<title> Javascript4 </title>
</head>
<body>
<script language=“javascript”>
document.write(“Iniciando em JavaScript”);
// JavaScript no Corpo de uma página HTML.
</script>
</body> ...

2.1. Tags de Comentário:

Nós podemos escrever anotações dentro do código fonte sem que elas sejam executadas como
comandos do Javascript , para isto, precisamos indicar que as linhas são apenas de comentários.

Exemplos:

// Comentando uma linha.

/* Comentando
várias linhas... */

Faculdade de Tecnologia de São de Paulo

Javascript  7

2.2. Ocultando JavaScript de Navegadores mais Antigos

Navegadores mais antigos, ou que tenham o JavaScript desabilitado, não reconhecem a tag <script>.
Para que o código em JavaScript não seja exibido no meio da página, comente-o com tags de HTML:

O navegador que suportar JavaScript ignorará os comentários em HTML e executará o script.

Exemplo:

Utilize o comentário do JavaScript (//) para comentar o final do comentário de Html!

2.1. Escrevendo em uma Página – document.write( )

Você deve ter percebido que utilizamos várias vezes nos exemplos o comando document.write( ).
Em JavaScritp nós o chamamos de Método, porque ele executa uma função (ação), ou seja, com ele
você pode escrever no documento, que é o corpo da página em HTML.

Exemplo:

O conteúdo dos parênteses deve vir entre aspas ou apóstrofes, a menos que seja uma variável.
Todos os comandos em JavaScript terminam com ponto e vírgula (;).

3. Caixas Pop-up

As caixas Pop-up também são métodos em JavaScript. Com elas podemos interagir com o usuário
exibindo mensagens, recebendo dados através da caixa de diálogo e confirmações ou não de
informações.

3.1. Método alert( )

Exibe uma caixa de mensagem e aguarda um clique do usuário no botão <OK> para fechá-la.

Exemplo:

Faculdade de Tecnologia de São de Paulo

Javascript  8

3.2. Método prompt( )

Abre uma caixa de diálogo para que o usuário possa entrar com dados.

1. <script language=“javascript”>
prompt(“Digite seu nome”);
</script>

Neste exemplo, o texto entre parênteses será exibido na parte superior da caixa pop-up e o campo de resposta
aparecerá com a palavra “undefined” selecionado.

2. <script language=“javascript”>
origem = prompt(“Informe o seu país de origem”,“Brasil”);
</script>

Neste outro exemplo, o texto após a vírgula e dentro dos parênteses, será exibido no campo de resposta como
resposta padrão, se preferir deixar a resposta em branco, não inclua conteúdo nem espaços entre as aspas.
A resposta poderá ser armazenada em uma variável para ser tratada posteriormente pelo programa.

3.3. Método confirm( )

Exibe uma caixa de confirmação contendo dois botões: <ok> (sim) e <cancel> (não).

Exemplo:

1. <script language=“javascript”>
resp = confirm(“Será que vai chover?”);
</script>

A resposta também poderá ser armazenada em uma variável para ser tratada posteriormente pelo programa.

4. Caracteres de Escape

Os caracteres de escape são usados em Strings para:

• Evitar que certos caracteres causem erros dentro do programa;
• Adicionar formatação (como retorno de carro) a Strings.

Caracter Descrição
\b Backspace
\t Tabulação Horizontal
\f Avanço de Formulário (form feed)
\n Nova Linha (line feed)
\r Retorno de Carro
\” Aspas Duplas
\’ Apóstrofe
\\ Barra invertida

Faculdade de Tecnologia de São de Paulo

Javascript  9

Exemplos:

1. <script language=“javascript”>
alert(“Um retorno de carro está\rbem no meio desta linha!“);
alert(“\”Isto não saiu como deveria!\” disse ela“);
alert(“Esta linha tem uma tabulação\taqui.“);
</script>

5. Variáveis

5.1 Globais e Locais

Criar variáveis em JavaScript é muito fácil, é dar um nome e atribuir um valor a ela e estará criada!

Exemplo:

Nome = “Maria”;

Esta variável será global, ou seja, você terá acesso a ela a partir de qualquer script relacionado a este
documento.

Você poderá criar variáveis desta outra forma também, utilizando a palavra chave var:

var Nome1 = “José”;

A variável Nome1 será global se estiver fora de uma função, caso contrário será local, ou seja, você só
poderá acessá-la dentro da função onde ela foi criada.

 Variáveis globais têm o script inteiro como escopo.

 Variáveis locais têm uma única função como escopo.

Exemplos:

var msg1; // Criando uma variável por linha.

var msg2;

var num1, nome1, msg1; // Criando todas as variáveis em uma única linha.

var nome2 = “João”, num2 = “12”, msg2 = “telefone do João: 1234-5678”;

// Criando todas as variáveis e atribuindo valores, em uma única linha.

function cliente(){
var nome3=“João”; // Criando uma variável local dentro de uma função
}
</script>

Faculdade de Tecnologia de São de Paulo

Javascript  10

5.2. Nomes de Variáveis

 Nomes de variáveis só podem conter letras maiúsculas e/ou minúsculas, números e sublinhado,
portanto, não podem conter espaços, hífens ou outros caracteres especiais;
 O primeiro caractere do nome da variável deve ser uma letra ou o sublinhado;
 Javascript é “ case sensitive”, portanto, letras maiúsculas são diferentes de minúsculas. Atenção!!!
 Não há limite oficial no comprimento de nomes de variáveis, portanto, vale o bom senso.
 Utilize sempre nomes mnemônicos, ou seja, que traduzam o conteúdo da variável.

Exemplos de nomes válidos:

Total_geral
nome3
_num1
i (que é diferente de I)

6. Tipos de Dados em JavaScript

Em JavaScript você não precisa definir uma variável especificando o tipo de dados que ela armazenará
(exceto em casos raros), ela se adaptará ao tipo de dados do conteúdo a ela atribuído.

Tipos de Dados do JavaScript:

6.1. Básicos

 Number - Números Inteiros ou de Ponto Flutuante.

Ex.: 0; 1; -3; 42; 3,1415926535897932384626433832795 ou 3.76e2.
 String - Trata-se de uma cadeia de caracteres (entre aspas).
Ex.: “Meu nome é Guilherme”.
 Boolean - Booleanos ou Lógicos; possuem dois valores: Verdadeiro ou Falso.
Ex.: true; false.

6.2. Especias

Valores numéricos especiais:

 Positive infinite – Infinito positivo.
 Negative infinite – Infinito negativo.
 0 - zero positivo e negativo .
 NaN - Not a Number (Não é um Número). Usualmente é gerado como resultado de uma operação
matemática que não faz sentido, por exemplo, divisão de qualquer número por zero.
Não há possibilidade de digitar nenhum dos valores acima. Os valores relacionados com infinito resultam quando
se ultrapassa o limite de 10^308 ou 10^ -308. Exemplo, multiplicando 1.0e300 por si mesmo. Eles não são muito
úteis para nós.