Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Aula 1 - Introdução
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
1
JavaScript:
Introdução ao
Script
2
Introdução
• JavaScript
– Linguagem de script que facilita uma abordagem
disciplinada para a elaboração de programas de
computador que melhoram a funcionalidade e a aparência
de páginas da web..
• Antes de executar os exemplos de código em
JavaScript no seu computador, você precisa
alterar as configurações de segurança do
navegador.
3
4
Programa simples: mostrar uma linha de
texto em uma página da Web
• Espaçamento exibida por um navegador em uma página
web é determinado pelos elementos XHTML usados para
formatar a página
• Muitas vezes, JavaScript aparece na seção <head> do
documento XHTML
• O navegador interpreta o conteúdo da seção <head>
primeiro
• A tag <script> indica ao navegador que o texto que se
segue é parte de um script. Atributo type especifica a
linguagem de script usado no script, tais como text /
javascript
5
Erro comum de programação
Esquecendo a tag final </ script> para um
script pode evitar que o navegador interprete
o script corretamente e pode impedir o
documento XHTML de carregar
corretamente.
6
Programa simples: mostrar uma linha de
texto em uma página da Web (Cont.)
• A sequencia de caracteres pode ser contido entre
apas (") ou apostrofe (')
• Uma string, por vezes, é chamada de cadeia de
caracteres, uma mensagem ou uma string literal
• JavaScript é case sensitive - Não usar as letras
maiúsculas e minúsculas adequadas é um erro de
sintaxe
7
Boa prática de programação
Sempre inclua um ponto e vírgula no fim de
uma instrução.
Esta notação esclarece onde uma instrução
termina e a próxima instrução é iniciada.
8
Programa simples: mostrar uma linha de
texto em uma página da Web (Cont.)
•WritelnWritelnWritelnWriteln ou ou ou ou writewritewritewrite método do objeto método do objeto método do objeto método do objeto
documentdocumentdocumentdocument
– Escreve uma linha de texto XHTML no documento
XHTML
– Não garante que a linha correspondente de texto irá
aparecer no documento XHTML.
– O texto exibido é dependente do conteúdo da cadeia
escrita, a qual é subsequentemente processada pelo
navegador.
– Navegador irá interpretar os elementos XHTML como
normalmente faz para tornar o texto final do documento.
9
Exibindo uma
linha de texto.
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 6.2: welcome.html 6.2: welcome.html 6.2: welcome.html 6.2: welcome.html -------->>>>
6 <!<!<!<!-------- Displaying a line of text. Displaying a line of text. Displaying a line of text. Displaying a line of text. -------->>>>
7 <htm<htm<htm<html xmlns = l xmlns = l xmlns = l xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head> <head> <head> <head>
9 <title><title><title><title>A First Program in JavaScriptA First Program in JavaScriptA First Program in JavaScriptA First Program in JavaScript</title></title></title></title>
10 <script type = <script type = <script type = <script type = "text/javascript""text/javascript""text/javascript""text/javascript">>>>
11 <!<!<!<!--------
12 document.writeln(document.writeln(document.writeln(document.writeln(
13 "<h1>Welcome to JavaScript Programming!</h1>""<h1>Welcome to JavaScript Programming!</h1>""<h1>Welcome to JavaScript Programming!</h1>""<h1>Welcome to JavaScript Programming!</h1>" ););););
14 // // // // -------->>>>
15 </script></script></script></script>
16 </head><body></body></head><body></body></head><body></body></head><body></body>
17 </html></html></html></html>
Começa o script
Especifica que estamos
usando a linguagem
JavaScript
Escreve uma mensagem de
boas vindas h1 no
documento XHTML
finaliza o script
10
Dica de prevenção de Erro
Quando o intérprete relata um erro de
sintaxe, por vezes, o erro não está no número
da linha indicado pela mensagem de erro.
Primeiro, verifique a linha para o qual foi
relatado o erro. Se essa linha não contém
erros, verifique os precedentes várias linhas
no script.
11Modificando nosso primeiro
programa
• Método de gravação mostra uma string como
writeln, mas não posiciona o cursor de saída no
documento XHTML no início da próxima linha
depois de escrever o seu argumento
12
Modificando nosso primeiro programa
(Cont.)
• Você não pode dividir uma instrução no meio de
uma string. O operador + (chamado de
"operador de concatenação", quando usado dessa
maneira) junta duas strings
13
Imprimindo uma
linha com
declarações
separadas.
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 6.3: welcome2.html 6.3: welcome2.html 6.3: welcome2.html 6.3: welcome2.html -------->>>>
6 <!<!<!<!-------- Printing one line with multiple statemPrinting one line with multiple statemPrinting one line with multiple statemPrinting one line with multiple statements. ents. ents. ents. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Printing a Line with Multiple StatementsPrinting a Line with Multiple StatementsPrinting a Line with Multiple StatementsPrinting a Line with Multiple Statements</title> </title> </title> </title>
10 <script type = <script type = <script type = <script type = "text/javascript""text/javascript""text/javascript""text/javascript">>>>11 <!<!<!<!--------
12 document.write( document.write( document.write( document.write( "<h1 style = "<h1 style = "<h1 style = "<h1 style = \\\\"color"color"color"color: magenta: magenta: magenta: magenta\\\\">"">"">"">" ););););
13 document.write( document.write( document.write( document.write( "Welcome to JavaScript ""Welcome to JavaScript ""Welcome to JavaScript ""Welcome to JavaScript " ++++
14 "Programming!</h1>""Programming!</h1>""Programming!</h1>""Programming!</h1>" ););););
15 // // // // -------->>>>
16 </script></script></script></script>
17 </head><body></body></head><body></body></head><body></body></head><body></body>
18 </html></html></html></html>
Duas declarações gravação
criar uma linha de texto
XHTML
Operador de concatenação
se junta a corda juntos,
como ele é dividido em
várias linhas
14
Erro comum de programação
Muitas pessoas confundem a escrita de texto
XHTML com a renderização de texto
XHTML. Escrever texto XHTML cria o
XHTML que será processado pelo navegador
para a apresentação ao usuário.
15
Modificando nosso primeiro programa
(Cont.)
• Uma única instrução pode fazer com que o
navegador exiba múltiplas linhas usando códigos
de quebra XHTML (<br/>) em todo a sequência
de texto.
16
Imprimindo em
múltiplas linhas
com uma única
instrução.
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 6.4: welcome3.html 6.4: welcome3.html 6.4: welcome3.html 6.4: welcome3.html -------->>>>
6 <!<!<!<!-------- Printing on multiple lines with a singPrinting on multiple lines with a singPrinting on multiple lines with a singPrinting on multiple lines with a single statement. le statement. le statement. le statement. -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Printing Multiple LinesPrinting Multiple LinesPrinting Multiple LinesPrinting Multiple Lines</title></title></title></title>
10 <script type = <script type = <script type = <script type = "text/javascript""text/javascript""text/javascript""text/javascript">>>>
11 <!<!<!<!--------
12 document.writeln( document.writeln( document.writeln( document.writeln( "<h1>Welcome to<br />JavaScri"<h1>Welcome to<br />JavaScri"<h1>Welcome to<br />JavaScri"<h1>Welcome to<br />JavaScript"pt"pt"pt" ++++
13 "<br />Programming!</h1>""<br />Programming!</h1>""<br />Programming!</h1>""<br />Programming!</h1>" ););););
14 // // // // -------->>>>
15 </script></script></script></script>
16 </head><body></body></head><body></body></head><body></body></head><body></body>
17 </html></html></html></html>
Insere quebra de linha
Insere quebra de linha
17
Modificando nosso primeiro programa
(Cont.)
• Diálogos
– Útil para exibir informações em janelas "pop up" na tela
para chamar a atenção do usuário
– Normalmente usado para exibir mensagens importantes
para o usuário navegar na página web
– Objeto de janela do navegador usa o método de alerta para
exibir uma caixa de diálogo de alerta
– Alerta método requer como argumento a string a ser
exibida
18
Diálogo de
Alerta para
exibir várias
linhas.
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?>
2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>
4
5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 6.5: welcome4.html 6.5: welcome4.html 6.5: welcome4.html 6.5: welcome4.html -------->>>>
6 <!<!<!<!-------- Alert dialog displaying multiple linesAlert dialog displaying multiple linesAlert dialog displaying multiple linesAlert dialog displaying multiple lines. . . . -------->>>>
7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
8 <head><head><head><head>
9 <title><title><title><title>Printing Multiple Lines in a Dialog BoxPrinting Multiple Lines in a Dialog BoxPrinting Multiple Lines in a Dialog BoxPrinting Multiple Lines in a Dialog Box</title></title></title></title>
10 <script type = <script type = <script type = <script type = "text/javascript""text/javascript""text/javascript""text/javascript">>>>
11 <!<!<!<!--------
12 window.alert( window.alert( window.alert( window.alert( "Welcome to"Welcome to"Welcome to"Welcome to\\\\nJavaScriptnJavaScriptnJavaScriptnJavaScript\\\\nPnPnPnProgramming!" rogramming!" rogramming!" rogramming!" ););););
13 // // // // -------->>>>
14 </script></script></script></script>
15 </head></head></head></head>
16 <body><body><body><body>
17 <p><p><p><p>Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.</p> </p> </p> </p>
18 </body></body></body></body>
19 </html></html></html></html>
Cria uma caixa de pop-
up que alerta o texto de
boas-vindas para o
usuário
19
Erro comum de programação
Diálogos exibem texto simples; não é
XHTML. Portanto, especificando elementos
XHTML, como parte de uma string para ser
exibido em um resultado de diálogo nas
personagens reais das marcas que está sendo
exibido.
20
Erro comum de programação
Elementos XHTML em mensagem de diálogo
de alerta não são interpretados como
XHTML. Isto significa que usar <br />, por
exemplo, para criar uma quebra de linha em
uma caixa de alerta é um erro. O <br/> vai
simplesmente ser incluído em sua mensagem.
21
Modificandonosso primeiro programa
(Cont.)
• Quando uma barra invertida é encontrado em
uma seqüência de caracteres, o próximo caracter
é combinado com a barra invertida para formar
uma seqüência de escape.
• A seqüência de escape \n é o caractere de nova
linha.
• Isso faz com que o cursor no documento XHTML
para mover-se para o início da próxima linha.
22
Algumas
seqüências de
escape comuns.
Escape sequence Description
\n New line. Position the screen cursor at the beginning of the
next line.
\t Horizontal tab. Move the screen cursor to the next tab stop.
\r Carriage return. Position the screen cursor to the beginning of
the current line; do not advance to the next line. Any
characters output after the carriage return overwrite the
characters previously output on that line.
\\ Backslash. Used to represent a backslash character in a string.
\" Double quote. Used to represent a double-quote character in a
string contained in double quotes. For example,
window.alert( "\"in quotes\"" );
displays "in quotes" in an alert dialog.
\' Single quote. Used to represent a single-quote character in a
string. For example,
window.alert( '\'in quotes\'' );
displays 'in quotes' in an alert dialog.
Continue navegando
Materiais relacionados
75 pág.
Perguntas relacionadas
Compartilhar