SlideShare uma empresa Scribd logo
JavaScript - Introdução
Cristiano Pires Martins
1
Referência
• Silva, Maurício Samy (Maujor), JavaScript:
Guia do Programador. São Paulo: Novatec
Editora, 2010.
2
Visão Geral
• HTML é usado para estruturar uma página
web;
• Apresentação visual é trabalho para o CSS;
• As linguagens de programação são
responsáveis pela interatividade avançada
da página.
3
Visão Geral
• JavaScript foi criada pela Netscape em
parceria com a Sun Microsystems;
• Primeira versão foi lançada em 1995;
• Dentre as linguagens de programação para
processar dados na web:
• PHP,ASP, Java, Ruby, Phyton e ColdFusion.
4
Visão Geral
• Essas linguagens foram feitas para rodar no
lado do servidor (exceto o java);
• JavaScript é uma linguagem desenvolvida
para rodar no lado do cliente;
• No navegador (browser) existe um
interpretador JavaScript;
• Exemplo: o PHP precisa de um servidor.
5
Funcionalidades
• Manipular conteúdo e apresentação
• Inserção de data/hora no documento;
• Inserção de mensagem de boas vindas;
• Conteúdos diferenciados dependendo do navegador.
• Podendo até mesmo gerar o conteúdo completo de uma
página web.
6
Funcionalidades
• Manipular o Navegador
• Criar pou-up;
• Mensagens ao usuário;
• Alertar as dimensões do navegador;
• Interferir na barra de status;
• Retirar menus;
• Fechar e abrir janelas.
7
Funcionalidades
• Manipular o Navegador
• Comportamentos inesperados e não solicitados pelo
usuário contribuíram para a má fama da linguagem;
• Adote como regra geral não manipular a janela do
navegador (Maujor, 2010).
8
Funcionalidades
• Interagir com Formulários
• É capaz de acessar formulários HTML;
• Validar os dados;
• Realizar cálculos;
• Fornecer dicas de preenchimento dos
campos.
9
Funcionalidades
• Interagir com outras linguagens dinâmicas
• Pode ser usada em conjunto com outras
linguagens.
10
JavaScript e os Padrões Web
• Com o surgimento dos padrões Web,
surgiram 2 princípios básicos:
• JavaScript não obstrutivo;
• Melhoria progressiva.
11
JavaScript e os Padrões Web
• Escrever JavaScript não obstrutivo implica:
• Conteúdo da página estar presente e
funcional, mesmo sem suporte;
• Usar linguagem para incrementar a
usabilidade da página;
• Escrever scripts em arquivos externos.
Uso de camadas: HTML, CSS, SCRIPT.
12
Camadas de Desenvolvimento
• Camadas de Desenvolvimento
• Estruturação de Conteúdo: HTML;
• Apresentação: CSS;
• Comportamento: Scripts.
13
Camadas de Desenvolvimento
• Principais vantagens das camadas:
• Elimina a repetição de códigos em diferentes
páginas;
• Reaproveita trechos de códigos em outros
projetos;
• Busca e correção de bugs;
• Facilita manutenção e entendimento dos
códigos.
14
Camadas de Desenvolvimento
• Conceito da Melhoria Progressiva:
• Primeira etapa: estruturar os conteúdos
usando HTML;
• Segunda etapa: incrementar a
apresentação da página usando CSS;
• Terceira etapa: introduzir JavaScript
acrescentando interatividade à página.
15
Introdução à Linguagem
• Foi inventada por Brendam Eich, a primeira
versão foi JavaScript 1.0, implementada para
o Netscape 2.0, em 1996.
• Concorreu com a JScript 1.0 do Internet
Explorer 3.0.
• Atualmente, o nome oficial: ECMAScript e a
versão ECMA-262 v5.
16
Base para Estudos
• Orientação a objetos
• A linguagem suporta POO;
• É capaz de simular muitos dos fundamentos de POO;
• Os objetos da linguagem podem ser agrupados em:
• Objetos internos da linguagem (strings, arrays e datas);
• Objetos do ambiente de hospedagem (navegador, como window e
document);
• Objetos personalizados criados pelo desenvolvedor.
17
Inserir JavaScript na HTML
• Para escrever código não precisa instalar
software especial;
• Escreve em um editor de texto simples;
• Visualiza o resultado no browser;
• Os arquivos são gravados com extensão .js;
• Arquivos são executados dentro de um
arquivo HTML.
18
Inserir JavaScript na HTML
• Inline: na seção body (prática não
recomendada).
• Exemplo:
<button type="button" onclick="alert('Olá
visitante');">
19
Inserir JavaScript na HTML
• Incorporado: na seção head;
...
<head>
...
<script type="text/javascript">
...
</script>
...
</head>
...
20
Inserir JavaScript na HTML
• Externo: em um arquivo externo e inserir
com um link na seção head.
...
<head>
...
<script type="text/javascript" src=”scripts/
meu_script.js”></script>
</head>
...
21
Sistema Léxico da JavaScript
• Tamanho da caixa: case sensitive;
• Analisar:
• <button type="button" onClick="alert('Olá
visitante');">
• Sem problema: HMTL
• Com problema: XHTML
• Não é JavaScript
22
Sistema Léxico da JavaScript
• Comentários:
• Em linha única:
• //
• <!-- (não precisa fechar)
• Em múltiplas linhas:
• /* ... */
23
Sistema Léxico da JavaScript
• Declarações:
• Na mesma linha:
• a = 5 ; b = 8; alert(“Alô Mundo!”);
• Em linhas separadas:
• a = 5 //recomenda-se colocar “;”
• b = 8 //não é obrigatório
• alert(“Alô Mundo!”);
24
Sistema Léxico da JavaScript
• Espaços em branco e quebras de linha:
• Sintaxes válidas:
• a=27; e a = 27 ;
• alert(“Olá”); e alert ( “Olá” ) ;
• function(){...} e function () {...}
25
Sistema Léxico da JavaScript
• Espaços em branco e quebras de linha:
• Sintaxes com erros:
• a=2 7;
• document.write(“<p> Eu sou uma
string </p>”);
26
Sistema Léxico da JavaScript
• Espaços em branco e quebras de linha:
• Sintaxe válida:
• document.write(“<p> Eu sou uma 
string </p>”);
27
Sistema Léxico da JavaScript
• Espaços em branco e quebras de linha:
• document.write 
(“<p> Eu sou uma string </p>”);
• document.write
(“<p> Eu sou uma string </p>”);
28
Sintaxe com erro
Sintaxe correta!
Sistema Léxico da JavaScript
• Literais: designa qualquer tipo de dados
• Exemplo:
• a = 45;
• mensagem = “Alô mundo!”;
29
Sistema Léxico da JavaScript
• Tipos de Dados Literais:
• inteiros;
• decimais;
• booleanos;
• strings;
• arrays;
• objetos.
30
Sistema Léxico da JavaScript
• Inteiros (exemplos):
• c = 32; //base 10
• d = -119; //base 10
• e = 0x110B6; //base hexadecimal
• f = 0xf56a2; //base hexadecimal
31
Sistema Léxico da JavaScript
• Decimais (exemplo):
• a = 3.1416;
• b = -76.89;
• c = .3333;
• a = 3E5; //Notação científica
• b = -47.78965432E10; //Notação científica
32
Sistema Léxico da JavaScript
• Booleanos (exemplo):
• a = true;
• b = false;
33
Sistema Léxico da JavaScript
• String (exemplo):
• mensagem = “Olá! n Tudo bem?”;
34
Objeto document
• Forma de enviar informações para o
usuário;
• document.write( ): permite escrever
qualquer informação na página.Tanto um
texto quanto o conteúdo de uma variável.
35
Impressão de texto
36
impressão de texto:
document.write("Programando em Javascript");
impressão do conteúdo de uma variável:
var nome = “aluno”;
document.write("Olá "+nome+" Seja BemVindo !!!");
Escrever HTML com JavaScript
37
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<script type="text/javascript">
document.write("<h2>O método <code>write()</code></h2>");
document.write("<p>O método <code>write()</code> do objeto
<code>document</code> destina-se a escrever marcação HTML com
uso da JavaScript</p>");
</script>
</body>
</html>
Exemplo de Impressão de Texto
Escrever Após
Carregamento da Página
38
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<h2>document.write() - Após carregamento da página.</h2>
<h3>JavaScript</h3>
<button onclick="document.write('Conteúdo inserido após
carregamento da página')">Inserir conteúdo</button>
</body>
</html>
Manipulação de cores
39
• document.bgColor : modifica a cor de fundo da
página, mesmo efeito da tag em html <body
bgcolor="nome_da_cor">
Exemplo
document.bgColor="red";
• document.fgColor : altera a cor da letra na página
Exemplo
document.fgColor="orange";
document
40
• document.title : Define um título para a página atual,
mesmo efeito que a tag <title>..</title>
Exemplo
document.title="Curso de Javascript";
• document.lastModified : Exibe a data da última
atualização da página
Exemplo
document.write(document.lastModified);
Objeto Window
• Comando responsável por estabelecer uma
melhor interação com o usuário.
41
Base para Estudos
• Caixas de Diálogo:
• Janela do tipo pop-up para fornecer informações;
• Janela para coletar dados do usuário;
• Métodos (funções) para objeto Window:
• Caixa de alerta;
• Caixa de diálogo de confirmação;
• Caixa de diálogo para entrada de string.
42
Caixa de Alerta
43
window.alert(); ou alert();
Este comando exibe uma caixa de
diálogo


<script type="text/javascript">
window.alert ("Olá Mundo!");
</script>
Certo/Errado
44
Errado
<script type="text/javascript">
window.alert ("Olá Mundo! <br /> Cheguei!");
</script>
Certo
<script type="text/javascript">
window.alert ("Olá Mundo! n Cheguei");
</script>
Caixa de Confirmação
45
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<script type="text/javascript">
var resp = window.confirm("Você tem certeza que quer apagar o
arquivo?nEsta operação não poderá ser desfeita.");
if(resp)
alert("Arquivo apagado!!!");
else
alert("Operação cancelada!!!");
</script>
</body>
</html>
Caixa de Entrada de String
• window.prompt(): Comando para realizar
uma entrada de dados em uma caixa
padrão e armazenar o dado digitado em
uma variável.
46
Caixa de Entrada de String
47
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<script type="text/javascript">
var data = window.prompt("Digite sua data de nascimento:","dd/mm/
aaaa");
var dia_mes="";
for(i=0;i<5;i++)
dia_mes+=data[i];
document.write("Seu aniversário é em "+dia_mes);
</script>
</body>
</html>
Sistema Léxico da JavaScript
• Caractere de Escape “”: Representa caracteres especiais;
• Sintaxes válidas:
• “Os livros da editora O’Reilly são bons.” // aspas duplas fora e simples
dentro
• ‘Os livros da editora O’Reilly são bons.’ // aspas duplas fora e simples
dentro
• ‘Mac‘Neil disse:“Vim para ficar”.‘ //aspas simples fora, duplas e simples
escapadas dentro
• “Mac‘Neil disse: “Vim para ficar”.” //aspas duplas fora, duplas escapadas e
simples dentro
48
Sistema Léxico da JavaScript
• Variáveis
• Nome deve começar com:
• uma letra;
• um caractere underscore ( _ );
• um caractere cifrão ( $ ).
• A partir do JavaScript 1.5, permite-se usar letras
acentuadas, caracteres escapados, dígitos e demais
caracteres Unicode.
49
Sistema Léxico da JavaScript
• Exemplo de nomes de variáveis:
• a
• _xpto
• minha_variavel
• minhaVariavel
• minha-variavel
• cd456
50
Sistema Léxico da JavaScript
• Boas práticas:
• Escolha nomes que dão dicas do
conteúdo;
• Evite nomes como: a, f34,
variavelParaArmazenarUmObjeto;
• Nome composto. Sugestão:
nome_vendedor, nomeVendedor;
51
Sistema Léxico da JavaScript
52
ber: palavras próprias e internas da JavaScript (Tabela1.4),palavras re
lasespecificaçõesECMA-262parausoemfuturasversõesdaJavaScr
1.5) e palavras que fazem parte da implementação JavaScript nos dis
e hospedam a linguagem, como um navegador, por exemplo (Tab
Tabela 1.4 – Palavras-chave JavaScript
break else new var
case finally return void
catch for switch while
continue function this with
default if throw
delete in try
do instanceof typeof
Tabela 1.5 – Palavras reservadas pela especificação ECMA-262
Sistema Léxico da JavaScript
53
continue function this with
default if throw
delete in try
do instanceof typeof
Tabela 1.5 – Palavras reservadas pela especificação ECMA-262
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
double import public public
Sistema Léxico da JavaScript
54
1 Introdução à JavaScript
Tabela 1.6 – Palavras reservadas dos dispositivos de hospedagem
alert eval location open
array focus math outerHeight
blur function name parent
boolean history navigator parseFloat
date image number regExp
document isNaN object status
escape length onLoad string
nomevendedor, nome-vendedor, nome_vendedor e
Sistema Léxico da JavaScript
• JavaScript não é tipificada;
• Para declarar local
• var a = 30; //variável local
• Para declarar global não use var.
• b = 25; //variável global
55
<script type="text/javascript">
a=10;
funcaoUm = function( ) {
var a=20;
alert(a); // alerta o valor 20
};
funcaoUm(); // executa a funcaoUm
funcaoDois = function() {
alert(a); // alerta o valor 10
};
funcaoDois(); // executa a funcaoDois
// mais script ...
alert(a); // alerta o valor 10
</script>
56
57
• <script type="text/javascript">
a=10;
funcaoUm = function( ) {
var a=20;
alert(a); // alerta o valor 20
};
funcaoUm(); // executa a funcaoUm
funcaoDois = function() {
a = 40;
alert(a); // alerta o valor 40
};
funcaoDois(); // executa a funcaoDois
// mais script ...
alert(a); // alerta o valor 40
• </script>
Sistema Léxico da JavaScript
• Sintaxe para declarar variáveis:
• var a = 40; var b = 60; var c = “Olá mundo!”;
• var a = 40;
• var b = 60;
• var c = “Olá mundo!”;
• var a = 40, b = 60, c = “Olá mundo!”;
58
Sistema Léxico da JavaScript
• null, undefined, NaN, Infinity
• null: indica ausência de valor.
• undefined: declarada e não inicializada.
• NaN: representar um valor que não seja um número.
• Infinity: faixa de números manipuláveis:
59
var a = null;
var a;
var a = 3 * “Olá”;
-1.7976931348623157e+308 e 1.7976931348623157e+308
Cuidado!!!
60
var x = 0.1;
var y = 0.2;
var z = x + y // the result in z will not be 0.3
Para resolver
var z = (x * 10 + y * 10) / 10; // z will be 0.3
Todas as linguagens de programação, incluindo
JavaScript, têm dificuldades com valores de ponto
flutuante precisos
61
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<button onClick="window.open(
'http://www.google.com','_blank','width=200, height=200’,false);">
Abrir Janela</button>
</body>
</html>
Exercícios
• Faça um programa que tenha 4 botões:
• Muda cor do fundo do texto;
• Muda cor da fonte;
• Muda o título da página;
• Abra um pop up. Utilize window.open().
62

Mais conteúdo relacionado

Mais procurados

Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Sistema Operacional Windows (versão 11)
Sistema Operacional Windows (versão 11)Sistema Operacional Windows (versão 11)
Sistema Operacional Windows (versão 11)
DaviMatos25
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
Thiago Poiani
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
DESIGN DIGITAL UNIARA 2012
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
Jorge Ávila Miranda
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução a Linguagem de Programação PHP
Introdução a Linguagem de Programação PHPIntrodução a Linguagem de Programação PHP
Introdução a Linguagem de Programação PHP
Clayton de Almeida Souza
 
Banco de Dados I - Aula Prática - Criando o Primeiro Banco
Banco de Dados I - Aula Prática - Criando o Primeiro BancoBanco de Dados I - Aula Prática - Criando o Primeiro Banco
Banco de Dados I - Aula Prática - Criando o Primeiro Banco
Leinylson Fontinele
 
Aula 2 - Introdução a Banco de Dados
Aula 2 - Introdução a Banco de DadosAula 2 - Introdução a Banco de Dados
Aula 2 - Introdução a Banco de Dados
Vitor Hugo Melo Araújo
 
Html
HtmlHtml
Html Básico
Html BásicoHtml Básico
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
Daniel Brandão
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
Vinícius Roggério da Rocha
 
Analise de Requisitos Software
Analise de Requisitos SoftwareAnalise de Requisitos Software
Analise de Requisitos Software
Rildo (@rildosan) Santos
 
Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04
Ramon Kayo
 
Banco de Dados II Aula 12 - Gerenciamento de transação (controle de concorrên...
Banco de Dados II Aula 12 - Gerenciamento de transação (controle de concorrên...Banco de Dados II Aula 12 - Gerenciamento de transação (controle de concorrên...
Banco de Dados II Aula 12 - Gerenciamento de transação (controle de concorrên...
Leinylson Fontinele
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
Jessyka Lage
 

Mais procurados (20)

Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Sistema Operacional Windows (versão 11)
Sistema Operacional Windows (versão 11)Sistema Operacional Windows (versão 11)
Sistema Operacional Windows (versão 11)
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Introdução a Linguagem de Programação PHP
Introdução a Linguagem de Programação PHPIntrodução a Linguagem de Programação PHP
Introdução a Linguagem de Programação PHP
 
Banco de Dados I - Aula Prática - Criando o Primeiro Banco
Banco de Dados I - Aula Prática - Criando o Primeiro BancoBanco de Dados I - Aula Prática - Criando o Primeiro Banco
Banco de Dados I - Aula Prática - Criando o Primeiro Banco
 
Aula 2 - Introdução a Banco de Dados
Aula 2 - Introdução a Banco de DadosAula 2 - Introdução a Banco de Dados
Aula 2 - Introdução a Banco de Dados
 
Html
HtmlHtml
Html
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Analise de Requisitos Software
Analise de Requisitos SoftwareAnalise de Requisitos Software
Analise de Requisitos Software
 
Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04
 
Banco de Dados II Aula 12 - Gerenciamento de transação (controle de concorrên...
Banco de Dados II Aula 12 - Gerenciamento de transação (controle de concorrên...Banco de Dados II Aula 12 - Gerenciamento de transação (controle de concorrên...
Banco de Dados II Aula 12 - Gerenciamento de transação (controle de concorrên...
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 

Destaque

Java script aula 02 - operadores
Java script   aula 02 - operadoresJava script   aula 02 - operadores
Java script aula 02 - operadores
Cristiano Pires Martins
 
Java script aula 03 - objetos
Java script   aula 03 - objetosJava script   aula 03 - objetos
Java script aula 03 - objetos
Cristiano Pires Martins
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
Cristiano Pires Martins
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
Cristiano Pires Martins
 
Java script aula 04 - objeto array
Java script   aula 04 - objeto arrayJava script   aula 04 - objeto array
Java script aula 04 - objeto array
Cristiano Pires Martins
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
Cristiano Pires Martins
 
Java script aula 06 - dom
Java script   aula 06 - domJava script   aula 06 - dom
Java script aula 06 - dom
Cristiano Pires Martins
 
Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
Cristiano Pires Martins
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
Cristiano Pires Martins
 
Java script aula 08 - formulários
Java script   aula 08 - formuláriosJava script   aula 08 - formulários
Java script aula 08 - formulários
Cristiano Pires Martins
 
Categorias de Escalonamento e Objetivos do Algorítmo Escalonador
Categorias de Escalonamento e Objetivos do Algorítmo EscalonadorCategorias de Escalonamento e Objetivos do Algorítmo Escalonador
Categorias de Escalonamento e Objetivos do Algorítmo Escalonador
Sofia Trindade
 
Aula 06-oac-memoria-principal
Aula 06-oac-memoria-principalAula 06-oac-memoria-principal
Aula 06-oac-memoria-principal
Cristiano Pires Martins
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
Guilherme Blanco
 
Aula 02 semiótica e cores
Aula 02   semiótica e coresAula 02   semiótica e cores
Aula 02 semiótica e cores
Cristiano Pires Martins
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
André Luís
 
Greek's Civilization
Greek's CivilizationGreek's Civilization
Greek's Civilization
reach
 
News SA 09 2017
News SA 09 2017News SA 09 2017
News SA 09 2017
Roberta Culiersi
 
La scrittura incamminati
La scrittura incamminatiLa scrittura incamminati
La scrittura incamminati
William Wedo, M.J., MBA
 
Question 1 // PART ONE
Question 1 // PART ONEQuestion 1 // PART ONE
Question 1 // PART ONE
Kiera King
 
¿Que es Generación Emergente?
¿Que es Generación Emergente?¿Que es Generación Emergente?
¿Que es Generación Emergente?
Generacion Emergente C.A.
 

Destaque (20)

Java script aula 02 - operadores
Java script   aula 02 - operadoresJava script   aula 02 - operadores
Java script aula 02 - operadores
 
Java script aula 03 - objetos
Java script   aula 03 - objetosJava script   aula 03 - objetos
Java script aula 03 - objetos
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Java script aula 04 - objeto array
Java script   aula 04 - objeto arrayJava script   aula 04 - objeto array
Java script aula 04 - objeto array
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
 
Java script aula 06 - dom
Java script   aula 06 - domJava script   aula 06 - dom
Java script aula 06 - dom
 
Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Java script aula 08 - formulários
Java script   aula 08 - formuláriosJava script   aula 08 - formulários
Java script aula 08 - formulários
 
Categorias de Escalonamento e Objetivos do Algorítmo Escalonador
Categorias de Escalonamento e Objetivos do Algorítmo EscalonadorCategorias de Escalonamento e Objetivos do Algorítmo Escalonador
Categorias de Escalonamento e Objetivos do Algorítmo Escalonador
 
Aula 06-oac-memoria-principal
Aula 06-oac-memoria-principalAula 06-oac-memoria-principal
Aula 06-oac-memoria-principal
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
 
Aula 02 semiótica e cores
Aula 02   semiótica e coresAula 02   semiótica e cores
Aula 02 semiótica e cores
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
 
Greek's Civilization
Greek's CivilizationGreek's Civilization
Greek's Civilization
 
News SA 09 2017
News SA 09 2017News SA 09 2017
News SA 09 2017
 
La scrittura incamminati
La scrittura incamminatiLa scrittura incamminati
La scrittura incamminati
 
Question 1 // PART ONE
Question 1 // PART ONEQuestion 1 // PART ONE
Question 1 // PART ONE
 
¿Que es Generación Emergente?
¿Que es Generación Emergente?¿Que es Generación Emergente?
¿Que es Generación Emergente?
 

Semelhante a Javascript aula 01 - visão geral

T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
Carlos Santos
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
Carlos Santos
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
elliando dias
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
Carlos Santos
 
Curso HTML 5 - Aula Inicial
Curso HTML 5 - Aula InicialCurso HTML 5 - Aula Inicial
Curso HTML 5 - Aula Inicial
Tiago Antônio da Silva
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
Fabio Moura Pereira
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
Cláudio Amaral
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
Rangel Javier
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuery
grupoucpel
 
Desenvolvimento de Software I - USBWEBSERVER - PHP
Desenvolvimento de Software I - USBWEBSERVER - PHPDesenvolvimento de Software I - USBWEBSERVER - PHP
Desenvolvimento de Software I - USBWEBSERVER - PHP
Andréia Santos
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Alexandre Tarifa
 
Tutorial visão automação de testes e casper js
Tutorial visão automação de testes e casper jsTutorial visão automação de testes e casper js
Tutorial visão automação de testes e casper js
4ALL Tests
 
Tutorial - Visão sobre Automação de Testes com CasperJS
Tutorial - Visão sobre Automação de Testes com CasperJSTutorial - Visão sobre Automação de Testes com CasperJS
Tutorial - Visão sobre Automação de Testes com CasperJS
Frederico Allan
 
Mean Stack
Mean StackMean Stack
Mean Stack
Bruno Catão
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
Jorge Ávila Miranda
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
Flávio Lisboa
 
LabMM4 (T10 - 12/13) - Tecnologias server-side - PHP
LabMM4 (T10 - 12/13) - Tecnologias server-side - PHPLabMM4 (T10 - 12/13) - Tecnologias server-side - PHP
LabMM4 (T10 - 12/13) - Tecnologias server-side - PHP
Carlos Santos
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
ssuser546d49
 

Semelhante a Javascript aula 01 - visão geral (20)

T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
 
Curso HTML 5 - Aula Inicial
Curso HTML 5 - Aula InicialCurso HTML 5 - Aula Inicial
Curso HTML 5 - Aula Inicial
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuery
 
Desenvolvimento de Software I - USBWEBSERVER - PHP
Desenvolvimento de Software I - USBWEBSERVER - PHPDesenvolvimento de Software I - USBWEBSERVER - PHP
Desenvolvimento de Software I - USBWEBSERVER - PHP
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
Tutorial visão automação de testes e casper js
Tutorial visão automação de testes e casper jsTutorial visão automação de testes e casper js
Tutorial visão automação de testes e casper js
 
Tutorial - Visão sobre Automação de Testes com CasperJS
Tutorial - Visão sobre Automação de Testes com CasperJSTutorial - Visão sobre Automação de Testes com CasperJS
Tutorial - Visão sobre Automação de Testes com CasperJS
 
Mean Stack
Mean StackMean Stack
Mean Stack
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
 
LabMM4 (T10 - 12/13) - Tecnologias server-side - PHP
LabMM4 (T10 - 12/13) - Tecnologias server-side - PHPLabMM4 (T10 - 12/13) - Tecnologias server-side - PHP
LabMM4 (T10 - 12/13) - Tecnologias server-side - PHP
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
 

Mais de Cristiano Pires Martins

Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
Cristiano Pires Martins
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
Cristiano Pires Martins
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
Cristiano Pires Martins
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
Cristiano Pires Martins
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
Cristiano Pires Martins
 
Aula 01 introdução
Aula 01   introduçãoAula 01   introdução
Aula 01 introdução
Cristiano Pires Martins
 
Aula 03 esquema de cores
Aula 03   esquema de coresAula 03   esquema de cores
Aula 03 esquema de cores
Cristiano Pires Martins
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
Cristiano Pires Martins
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
Cristiano Pires Martins
 
Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
Cristiano Pires Martins
 
OAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e SaídaOAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e Saída
Cristiano Pires Martins
 
Aula 07 - lista linear
Aula 07 - lista linearAula 07 - lista linear
Aula 07 - lista linear
Cristiano Pires Martins
 
Aula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programasAula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programas
Cristiano Pires Martins
 
Aula 07-oac-processadores
Aula 07-oac-processadoresAula 07-oac-processadores
Aula 07-oac-processadores
Cristiano Pires Martins
 
Aula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digitalAula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digital
Cristiano Pires Martins
 
Aula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacaoAula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacao
Cristiano Pires Martins
 
Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2
Cristiano Pires Martins
 
Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1
Cristiano Pires Martins
 
Aula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oacAula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oac
Cristiano Pires Martins
 
Aula 10-oac-arquitetura-risc
Aula 10-oac-arquitetura-riscAula 10-oac-arquitetura-risc
Aula 10-oac-arquitetura-risc
Cristiano Pires Martins
 

Mais de Cristiano Pires Martins (20)

Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
Aula 01 introdução
Aula 01   introduçãoAula 01   introdução
Aula 01 introdução
 
Aula 03 esquema de cores
Aula 03   esquema de coresAula 03   esquema de cores
Aula 03 esquema de cores
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
 
OAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e SaídaOAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e Saída
 
Aula 07 - lista linear
Aula 07 - lista linearAula 07 - lista linear
Aula 07 - lista linear
 
Aula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programasAula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programas
 
Aula 07-oac-processadores
Aula 07-oac-processadoresAula 07-oac-processadores
Aula 07-oac-processadores
 
Aula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digitalAula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digital
 
Aula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacaoAula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacao
 
Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2
 
Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1
 
Aula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oacAula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oac
 
Aula 10-oac-arquitetura-risc
Aula 10-oac-arquitetura-riscAula 10-oac-arquitetura-risc
Aula 10-oac-arquitetura-risc
 

Javascript aula 01 - visão geral

  • 2. Referência • Silva, Maurício Samy (Maujor), JavaScript: Guia do Programador. São Paulo: Novatec Editora, 2010. 2
  • 3. Visão Geral • HTML é usado para estruturar uma página web; • Apresentação visual é trabalho para o CSS; • As linguagens de programação são responsáveis pela interatividade avançada da página. 3
  • 4. Visão Geral • JavaScript foi criada pela Netscape em parceria com a Sun Microsystems; • Primeira versão foi lançada em 1995; • Dentre as linguagens de programação para processar dados na web: • PHP,ASP, Java, Ruby, Phyton e ColdFusion. 4
  • 5. Visão Geral • Essas linguagens foram feitas para rodar no lado do servidor (exceto o java); • JavaScript é uma linguagem desenvolvida para rodar no lado do cliente; • No navegador (browser) existe um interpretador JavaScript; • Exemplo: o PHP precisa de um servidor. 5
  • 6. Funcionalidades • Manipular conteúdo e apresentação • Inserção de data/hora no documento; • Inserção de mensagem de boas vindas; • Conteúdos diferenciados dependendo do navegador. • Podendo até mesmo gerar o conteúdo completo de uma página web. 6
  • 7. Funcionalidades • Manipular o Navegador • Criar pou-up; • Mensagens ao usuário; • Alertar as dimensões do navegador; • Interferir na barra de status; • Retirar menus; • Fechar e abrir janelas. 7
  • 8. Funcionalidades • Manipular o Navegador • Comportamentos inesperados e não solicitados pelo usuário contribuíram para a má fama da linguagem; • Adote como regra geral não manipular a janela do navegador (Maujor, 2010). 8
  • 9. Funcionalidades • Interagir com Formulários • É capaz de acessar formulários HTML; • Validar os dados; • Realizar cálculos; • Fornecer dicas de preenchimento dos campos. 9
  • 10. Funcionalidades • Interagir com outras linguagens dinâmicas • Pode ser usada em conjunto com outras linguagens. 10
  • 11. JavaScript e os Padrões Web • Com o surgimento dos padrões Web, surgiram 2 princípios básicos: • JavaScript não obstrutivo; • Melhoria progressiva. 11
  • 12. JavaScript e os Padrões Web • Escrever JavaScript não obstrutivo implica: • Conteúdo da página estar presente e funcional, mesmo sem suporte; • Usar linguagem para incrementar a usabilidade da página; • Escrever scripts em arquivos externos. Uso de camadas: HTML, CSS, SCRIPT. 12
  • 13. Camadas de Desenvolvimento • Camadas de Desenvolvimento • Estruturação de Conteúdo: HTML; • Apresentação: CSS; • Comportamento: Scripts. 13
  • 14. Camadas de Desenvolvimento • Principais vantagens das camadas: • Elimina a repetição de códigos em diferentes páginas; • Reaproveita trechos de códigos em outros projetos; • Busca e correção de bugs; • Facilita manutenção e entendimento dos códigos. 14
  • 15. Camadas de Desenvolvimento • Conceito da Melhoria Progressiva: • Primeira etapa: estruturar os conteúdos usando HTML; • Segunda etapa: incrementar a apresentação da página usando CSS; • Terceira etapa: introduzir JavaScript acrescentando interatividade à página. 15
  • 16. Introdução à Linguagem • Foi inventada por Brendam Eich, a primeira versão foi JavaScript 1.0, implementada para o Netscape 2.0, em 1996. • Concorreu com a JScript 1.0 do Internet Explorer 3.0. • Atualmente, o nome oficial: ECMAScript e a versão ECMA-262 v5. 16
  • 17. Base para Estudos • Orientação a objetos • A linguagem suporta POO; • É capaz de simular muitos dos fundamentos de POO; • Os objetos da linguagem podem ser agrupados em: • Objetos internos da linguagem (strings, arrays e datas); • Objetos do ambiente de hospedagem (navegador, como window e document); • Objetos personalizados criados pelo desenvolvedor. 17
  • 18. Inserir JavaScript na HTML • Para escrever código não precisa instalar software especial; • Escreve em um editor de texto simples; • Visualiza o resultado no browser; • Os arquivos são gravados com extensão .js; • Arquivos são executados dentro de um arquivo HTML. 18
  • 19. Inserir JavaScript na HTML • Inline: na seção body (prática não recomendada). • Exemplo: <button type="button" onclick="alert('Olá visitante');"> 19
  • 20. Inserir JavaScript na HTML • Incorporado: na seção head; ... <head> ... <script type="text/javascript"> ... </script> ... </head> ... 20
  • 21. Inserir JavaScript na HTML • Externo: em um arquivo externo e inserir com um link na seção head. ... <head> ... <script type="text/javascript" src=”scripts/ meu_script.js”></script> </head> ... 21
  • 22. Sistema Léxico da JavaScript • Tamanho da caixa: case sensitive; • Analisar: • <button type="button" onClick="alert('Olá visitante');"> • Sem problema: HMTL • Com problema: XHTML • Não é JavaScript 22
  • 23. Sistema Léxico da JavaScript • Comentários: • Em linha única: • // • <!-- (não precisa fechar) • Em múltiplas linhas: • /* ... */ 23
  • 24. Sistema Léxico da JavaScript • Declarações: • Na mesma linha: • a = 5 ; b = 8; alert(“Alô Mundo!”); • Em linhas separadas: • a = 5 //recomenda-se colocar “;” • b = 8 //não é obrigatório • alert(“Alô Mundo!”); 24
  • 25. Sistema Léxico da JavaScript • Espaços em branco e quebras de linha: • Sintaxes válidas: • a=27; e a = 27 ; • alert(“Olá”); e alert ( “Olá” ) ; • function(){...} e function () {...} 25
  • 26. Sistema Léxico da JavaScript • Espaços em branco e quebras de linha: • Sintaxes com erros: • a=2 7; • document.write(“<p> Eu sou uma string </p>”); 26
  • 27. Sistema Léxico da JavaScript • Espaços em branco e quebras de linha: • Sintaxe válida: • document.write(“<p> Eu sou uma string </p>”); 27
  • 28. Sistema Léxico da JavaScript • Espaços em branco e quebras de linha: • document.write (“<p> Eu sou uma string </p>”); • document.write (“<p> Eu sou uma string </p>”); 28 Sintaxe com erro Sintaxe correta!
  • 29. Sistema Léxico da JavaScript • Literais: designa qualquer tipo de dados • Exemplo: • a = 45; • mensagem = “Alô mundo!”; 29
  • 30. Sistema Léxico da JavaScript • Tipos de Dados Literais: • inteiros; • decimais; • booleanos; • strings; • arrays; • objetos. 30
  • 31. Sistema Léxico da JavaScript • Inteiros (exemplos): • c = 32; //base 10 • d = -119; //base 10 • e = 0x110B6; //base hexadecimal • f = 0xf56a2; //base hexadecimal 31
  • 32. Sistema Léxico da JavaScript • Decimais (exemplo): • a = 3.1416; • b = -76.89; • c = .3333; • a = 3E5; //Notação científica • b = -47.78965432E10; //Notação científica 32
  • 33. Sistema Léxico da JavaScript • Booleanos (exemplo): • a = true; • b = false; 33
  • 34. Sistema Léxico da JavaScript • String (exemplo): • mensagem = “Olá! n Tudo bem?”; 34
  • 35. Objeto document • Forma de enviar informações para o usuário; • document.write( ): permite escrever qualquer informação na página.Tanto um texto quanto o conteúdo de uma variável. 35
  • 36. Impressão de texto 36 impressão de texto: document.write("Programando em Javascript"); impressão do conteúdo de uma variável: var nome = “aluno”; document.write("Olá "+nome+" Seja BemVindo !!!");
  • 37. Escrever HTML com JavaScript 37 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>document.write</title> </head> <body> <script type="text/javascript"> document.write("<h2>O método <code>write()</code></h2>"); document.write("<p>O método <code>write()</code> do objeto <code>document</code> destina-se a escrever marcação HTML com uso da JavaScript</p>"); </script> </body> </html> Exemplo de Impressão de Texto
  • 38. Escrever Após Carregamento da Página 38 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>document.write</title> </head> <body> <h2>document.write() - Após carregamento da página.</h2> <h3>JavaScript</h3> <button onclick="document.write('Conteúdo inserido após carregamento da página')">Inserir conteúdo</button> </body> </html>
  • 39. Manipulação de cores 39 • document.bgColor : modifica a cor de fundo da página, mesmo efeito da tag em html <body bgcolor="nome_da_cor"> Exemplo document.bgColor="red"; • document.fgColor : altera a cor da letra na página Exemplo document.fgColor="orange";
  • 40. document 40 • document.title : Define um título para a página atual, mesmo efeito que a tag <title>..</title> Exemplo document.title="Curso de Javascript"; • document.lastModified : Exibe a data da última atualização da página Exemplo document.write(document.lastModified);
  • 41. Objeto Window • Comando responsável por estabelecer uma melhor interação com o usuário. 41
  • 42. Base para Estudos • Caixas de Diálogo: • Janela do tipo pop-up para fornecer informações; • Janela para coletar dados do usuário; • Métodos (funções) para objeto Window: • Caixa de alerta; • Caixa de diálogo de confirmação; • Caixa de diálogo para entrada de string. 42
  • 43. Caixa de Alerta 43 window.alert(); ou alert(); Este comando exibe uma caixa de diálogo 
 <script type="text/javascript"> window.alert ("Olá Mundo!"); </script>
  • 44. Certo/Errado 44 Errado <script type="text/javascript"> window.alert ("Olá Mundo! <br /> Cheguei!"); </script> Certo <script type="text/javascript"> window.alert ("Olá Mundo! n Cheguei"); </script>
  • 45. Caixa de Confirmação 45 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>document.write</title> </head> <body> <script type="text/javascript"> var resp = window.confirm("Você tem certeza que quer apagar o arquivo?nEsta operação não poderá ser desfeita."); if(resp) alert("Arquivo apagado!!!"); else alert("Operação cancelada!!!"); </script> </body> </html>
  • 46. Caixa de Entrada de String • window.prompt(): Comando para realizar uma entrada de dados em uma caixa padrão e armazenar o dado digitado em uma variável. 46
  • 47. Caixa de Entrada de String 47 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>document.write</title> </head> <body> <script type="text/javascript"> var data = window.prompt("Digite sua data de nascimento:","dd/mm/ aaaa"); var dia_mes=""; for(i=0;i<5;i++) dia_mes+=data[i]; document.write("Seu aniversário é em "+dia_mes); </script> </body> </html>
  • 48. Sistema Léxico da JavaScript • Caractere de Escape “”: Representa caracteres especiais; • Sintaxes válidas: • “Os livros da editora O’Reilly são bons.” // aspas duplas fora e simples dentro • ‘Os livros da editora O’Reilly são bons.’ // aspas duplas fora e simples dentro • ‘Mac‘Neil disse:“Vim para ficar”.‘ //aspas simples fora, duplas e simples escapadas dentro • “Mac‘Neil disse: “Vim para ficar”.” //aspas duplas fora, duplas escapadas e simples dentro 48
  • 49. Sistema Léxico da JavaScript • Variáveis • Nome deve começar com: • uma letra; • um caractere underscore ( _ ); • um caractere cifrão ( $ ). • A partir do JavaScript 1.5, permite-se usar letras acentuadas, caracteres escapados, dígitos e demais caracteres Unicode. 49
  • 50. Sistema Léxico da JavaScript • Exemplo de nomes de variáveis: • a • _xpto • minha_variavel • minhaVariavel • minha-variavel • cd456 50
  • 51. Sistema Léxico da JavaScript • Boas práticas: • Escolha nomes que dão dicas do conteúdo; • Evite nomes como: a, f34, variavelParaArmazenarUmObjeto; • Nome composto. Sugestão: nome_vendedor, nomeVendedor; 51
  • 52. Sistema Léxico da JavaScript 52 ber: palavras próprias e internas da JavaScript (Tabela1.4),palavras re lasespecificaçõesECMA-262parausoemfuturasversõesdaJavaScr 1.5) e palavras que fazem parte da implementação JavaScript nos dis e hospedam a linguagem, como um navegador, por exemplo (Tab Tabela 1.4 – Palavras-chave JavaScript break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof Tabela 1.5 – Palavras reservadas pela especificação ECMA-262
  • 53. Sistema Léxico da JavaScript 53 continue function this with default if throw delete in try do instanceof typeof Tabela 1.5 – Palavras reservadas pela especificação ECMA-262 abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public public
  • 54. Sistema Léxico da JavaScript 54 1 Introdução à JavaScript Tabela 1.6 – Palavras reservadas dos dispositivos de hospedagem alert eval location open array focus math outerHeight blur function name parent boolean history navigator parseFloat date image number regExp document isNaN object status escape length onLoad string nomevendedor, nome-vendedor, nome_vendedor e
  • 55. Sistema Léxico da JavaScript • JavaScript não é tipificada; • Para declarar local • var a = 30; //variável local • Para declarar global não use var. • b = 25; //variável global 55
  • 56. <script type="text/javascript"> a=10; funcaoUm = function( ) { var a=20; alert(a); // alerta o valor 20 }; funcaoUm(); // executa a funcaoUm funcaoDois = function() { alert(a); // alerta o valor 10 }; funcaoDois(); // executa a funcaoDois // mais script ... alert(a); // alerta o valor 10 </script> 56
  • 57. 57 • <script type="text/javascript"> a=10; funcaoUm = function( ) { var a=20; alert(a); // alerta o valor 20 }; funcaoUm(); // executa a funcaoUm funcaoDois = function() { a = 40; alert(a); // alerta o valor 40 }; funcaoDois(); // executa a funcaoDois // mais script ... alert(a); // alerta o valor 40 • </script>
  • 58. Sistema Léxico da JavaScript • Sintaxe para declarar variáveis: • var a = 40; var b = 60; var c = “Olá mundo!”; • var a = 40; • var b = 60; • var c = “Olá mundo!”; • var a = 40, b = 60, c = “Olá mundo!”; 58
  • 59. Sistema Léxico da JavaScript • null, undefined, NaN, Infinity • null: indica ausência de valor. • undefined: declarada e não inicializada. • NaN: representar um valor que não seja um número. • Infinity: faixa de números manipuláveis: 59 var a = null; var a; var a = 3 * “Olá”; -1.7976931348623157e+308 e 1.7976931348623157e+308
  • 60. Cuidado!!! 60 var x = 0.1; var y = 0.2; var z = x + y // the result in z will not be 0.3 Para resolver var z = (x * 10 + y * 10) / 10; // z will be 0.3 Todas as linguagens de programação, incluindo JavaScript, têm dificuldades com valores de ponto flutuante precisos
  • 61. 61 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <body> <button onClick="window.open( 'http://www.google.com','_blank','width=200, height=200’,false);"> Abrir Janela</button> </body> </html>
  • 62. Exercícios • Faça um programa que tenha 4 botões: • Muda cor do fundo do texto; • Muda cor da fonte; • Muda o título da página; • Abra um pop up. Utilize window.open(). 62