JAVASCRIPT & JQUERY Desenvolvimento de interfaces web interativas

JON DUCKETT Material adicional de:

GILLES RUPPERT & JACK MOORE

Rio de Janeiro, 2016

SUMÁRIO Introdução Capítulo 1: Capítulo 2: Capítulo 3: Capítulo 4: Capítulo 5: Capítulo Capítu lo 6: Capítulo 7: Capítulo 8: Capítulo 9: Capítulo 10: Capítulo 11: Capítulo 12: Capítulo 13: Índice

1 O ABC da programação 11 Instruções básicas de JavaScript 53 Funções, métodos & objetos 85 Decisões & loops 145 Document Object Model 183 Eventos 243 jQuery 293 Ajax & JSON 367 APIs 409 Tratamento & depuração de erros 449 Painéis de conteúdo 487 Filtros, pesquisa & ordenação 527 Aprimoramento de formulários e validações 567 623

DOWNLOAD DO CÓDIGO

Experimente e baixe o código deste livro l ivro www.javascriptbook.com

INTRODUÇÃO

Este livro explica como o JavaScript pode ser usado em navegadores para tornar sites mais interativos, interessantes e fáceis de usar. Você também aprenderá jQuery porque essa biblioteca torna muito mais fácil escrever JavaScript. Para tirar o máximo proveito deste livro, você precisa entender como construir páginas web usando HTML e CSS. Além disso, nenhuma experiência prévia em programação é necessária. Aprender a programar com JavaScript envolve:

1 Compreender alguns conceitos básicos de programação e os termos que os programadores de JavaScript usam para descrevê-los.

2 Aprender a linguagem em si e, como todas as linguagens, você precisa conhecer o vocabulário e como estruturar suas cláusulas.

3 Familiarizar-se com a maneira como a linguagem é aplicada analisando exemplos de como o JavaScript é comumente usado em sites hoje em dia

O único equipamento que você precisa para usar este livro é um computador com um navegador web moderno instalado, e seu editor de código favorito, (por exemplo, Notepad, TextEdit, Sublime Text ou Coda.)

2

INTRODUÇÃO

CRIANDO OBJETOS COM NOTAÇÃO LITERAL

1

Antes de aprender a ler e escrever a linguagem JavaScript em si, você precisa se familiarizar com alguns conceitos chave da programação de computadores. Eles serão abordados em três seções:

A

O ABC DA PROGRAMAÇÃO

B

O que é um script e como faço para criar um?

Esteexemplo começa criando um objeto coma notação literal.

C

Comocomputadores se adaptam ao mundo ao seu redor?

c3/js/object-literal.js

Esse objeto é chamado hotel, que representa um hotel chamado Quay com 40 quartos(25 dos quais estão reservados).

Como escrevo um script para uma página web?

Em seguida, o conteúdoda página é atualizado com os dados desse objeto. Ele mostra o nomedo hotel acessando propriedade name do objeto e o númerode quartos vagos, utilizando o método checkAvailability().

Depois de ter aprendido os conceitos básicos, os capítulos a seguir mostrarão como a linguagem JavaScript pode ser usada para instruir os navegadores sobre o que você quer que eles façam.

 

JAV ASC R IP T

CRIANDO MAIS OBJETOS LITERAIS c03/js/object-literal2.js

JAV ASC R IP T

var hotel = {   name: 'Quay',   rooms: 40,   booked: 25,   checkAva ilability: function() { return this.rooms - this.booked; } };

var hotel = {   name: 'Park',   rooms: 120,   booked: 77,   checkAvai lability: function() { return this.rooms - this.booked; } };

var elName = document.getElementById('hotelName'); elName.textContent = hotel.name;

var elName = document.getElementById('hotelName'); elName.textContent = hotel.name;

var elRooms = document.getElementById('rooms'); elRooms.textContent = hotel.checkAvailability();

var elRooms = document.getElementById('rooms'); elRooms.textContent = hotel.checkAvailability();

Para acessar uma propriedade desse objeto, o nomedo objeto é seguido por um ponto (o símbolo de ponto) e pelonome da propriedade que você quer.

R E SUL TADO

Aquivocêpodever outroobjeto. Maisumavez, eleé chamado hotel,masdestavezomodelo representaumhoteldiferente. Porummomento, imagineque issosejauma páginadiferente domesmosite deviagens. OhotelPark émaior.Eletem 120quartose 77delesestão reservados. Asúnicascoisas quemudam nocódigosãoos valoresdas propriedadesdoobjeto hotel:  Onomedo hotel  Quantosquartoseletem  Quantosquartosestão reservados

R E SUL TADO

Orestanteda páginafunciona exatamentedamesma maneira. Onomeé mostradousando omesmo código.Ométodo não checkAvailability() mudoueéchamadodamesma maneira.

Da mesma forma, para utilizar o método,você pode usar o nomedo objeto seguido pelo nomedo método:

Seesse sitetivesse1.000 hotéis, aúnicacoisaque precisaria mudarseriaas trêspropriedades desseobjeto.Comocriamosum modeloparao hotelutilizando dados,omesmo códigopode acessareexibiros detalhes paraqualquerhotelquesegue o mesmomodelode dados.

hotel.checkAvailability() Se o método precisar de parâmetros, forneça-os entre parênteses(da mesma maneira como você passa argumentos para uma função).

Sehouvessedoisobjetos na mesmapágina,você criariacada umusandoa mesmanotação, masiriaarmazená-losem variáveiscomnomesdiferentes.

104 FUNÇÕES, MÉTODOS & OBJETOS

T J v

ri t n J u ry

1 1

i

.in

1

r v: Lir

v cri t n r : Lu ci

u yr 1 ur

/

c i

/

1

:

:1

ri t n J u ry

1

i

.in

1

1 r v: Lir

As páginas de introdução  estão no início de cada capítulo. Elas introduzem os temas-chave que você aprenderá. ACESSANDO ELEMENTOS

T J v

FUNÇÕES, MÉTODOS & OBJETOS 105

v c ri t n r : Lu ci

u yr 1 ur

c i

r v:

v cri t n r : Lu ci

Lir

u yr 1 ur

/

c i

/

1

:

:

As páginas de referência apresentam parteschave do JavaScript. O código HTML é mostrado em azul, o código CSS em rosa e o JavaScript em verde.

MÉTODOS QUE RETORNAM UM ÚNICO NÓ DE ELEMENTO:

for (var i = 0; i < 10; i++) {   document.write(i); }

LOOP

getElementById(‘id’) Seleciona um elemento individual dado o valor de seu atributo id A HTMLdeveter um atributo id para que ela possa ser selecionável. .

getElementById('one')

Primeiro suportado: IE5.5, Opera 7, todas as versões do Chrome, Firefox, Safari.

Consultas DOM podem retornar um elemento, ou podem retornar uma NodeList, que é uma coleção de nós.

querySelector(‘seletor css’) Usa sintaxe do seletor CSS que selecionaria um ou mais elementos. Esse método só retorna o primeiro dos elementos correspondentes.

Àsvezes você só quer acessar um elemento individual (ou um fragmento da página que est á armazenado dentro desse elemento). Outras vezes, talvezvocê queira se lecionar um grupo de elementos, por exemplo, cada elemento

na página ou cada elemento

 dentro de uma lista particular.

Aqui, a árvore DOM mostrao corpo da página do exemplo de lista.Primeiro focalizamos como acessar elementos para exibir somente nósde elemento. Os diagramas nas próximas páginas destacam quais elementos uma consulta DOM retornaria. (Lembre-sede que nósde elemento são a representação DOM de um elemento).

querySelector('li.hot')

Primeirosupor tado: IE8,Firefox 3.5, Safari 4, Chrome 4, Opera 10

0é

Selecio naumoumaiselementosdadoovalordeseuatrib uto class A HTMLdeveter um atributo class para que ela seja selecionável. Esse método é mais rápido do que querySelectorAll() .

h1

h2

ul

script

li

li

li

li

Encontrar o caminho mais rápido para acessar um elementodentro de sua página web fará a página parecer mais rápida e/ou mais responsiva. Isso geralmentesignifica avaliar o número mínimo de nósno caminho para o elementocom que você quer trabalhar. Por exemplo, getElementById()  retornará rapidamente um elemento (porque dois elementos na mesma página não devem ter o mesmo valor para um atributo id), mas isso só pode ser usado quando o elemento que você quer acessar tem um atributo id

 ,

Por exemplo, vários elementospodem ter o mesmo nomede tag, assim getElementsByTagName()  sempre retorna uma NodeList.

192

Início

Selecionatodososelementosna páginacomonome detag especificado. Esse método é mais rápido do que querySelectorAll() .

1

i .in

1

v cri t n Lir r : uL ci

c i

a

1

8é

<

1 0?    

a  1 a  s o m

8

9é

<

a  1 a  s o m

1 0?    

escreve na página:

0

1

8

9

i = 0

i = 1

Na primeira vez que o loop é executado,a variável i (o contador)recebe um valor de zero.

Usa a sintaxe do selector CSS para selecionar um ou mais elementos e retorna todos aqueles que correspondem.

querySelectorAll('li.hot')

Primeiro suportado: IE8, Firefox 3.5, Safari 4, Chrome 4, Opera 10

u yr 1 ur

 1

i = 2

querySelectorAll(‘css seletor’)

.

DOCUMENTOBJECTMODEL

1 r v:

a  s o m

9

10 é

<

1 0?   

i = 8

i = 9

i  = 10

END

getElementsByTagName('li')

DOCUMENT OBJECT MODEL

ri t n J u ry

1 0?   

Primeiro suportado: IE6+, Firefox 3, Safari 4, Chrome, Opera 10 (Vários navegadores tinham suporte parcial/falho nas primeiras versões)

r v:

v cri t n Lir r : Lu ci

u yr 1 ur

/

c i

Sempre que o loop é executado,a condiçãoé verificada. A variável i é menorque 10?

Em seguida,o código dentro do loop (as instruçõesentre chaves)éexecutado.

A variável i pode serusada dentrodo loop. Aqui ela é usada para imprimir um número na página.

Quando as instruções terminaram, a variável i é incrementada por um.

Quandoa condiçãonão é mais verdadeira, o loop termina.Oscriptpassapara a próxima linha de código.

193

172

T J v

<

escreve na página:

getElementsByClassName('hot')

getElementsByTagName(‘nomeDaTag’) ROTA MAIS RÁPIDA

Se um método puder retornar mais de um nó, ele sempre retornará uma NodeList que é uma coleção de nós(mesmose o método só encontrar um único elemento correspondente). Você precisa, então, selecionar o elemento que você quer a partir dessa lista utilizando um número de índice (o que significa que a numeração começa em 0 como os itens em um array).

1é

escreve na página:

Primeiro suportado: IE9, Firefox 3, Safari 4, Chrome 4, Opera 10 (Váriosnavegadorestinhamsuporte parcial/falhonasprimeiras versões)

GRUPOS DE NÓS DE ELEMENTO

0

escreve na página: .

div

a  1 a  s o m

1 0?   

MÉTODOS QUE RETORNAM UM OU MAIS ELEMENTOS (COMO UMA NODELIST):

getElementsByClassName(‘classe’)

body

<

/

1

:

DECISÕES &LOOPS

DECISÕES &LOOPS

173

: T J v

As páginas de informação  são brancas. Elas explicam o contexto dos temas abordados que são discutidos em cada capítulo.

ri t n J u ry

1

i

.in

1

1 r v:

v c ri t n r :L uc i

u yr 1 u r

c i

r v:

Lir

v cri t n r : Lu ci

Lir

v cri t n r :L uc i

u ry 1 ur

c i

/

/

1

:

:

As páginas de diagrama  e infográficos são mostradas em um fundo escuro. Elas fornecem uma referência simples e visual aos temas discutidos. L i r

RESUMO

EXEMPLO AJAX & JSON

INSTRUÇÕES BÁSICAS DE JAVASCRIPT

Este exemplo mostra informações sobre três eventos. Os dados usados vêm de três fontes diferentes. 1) Quandoa páginaé carregada,os locaisde evento são codif icadosnaHTML.O usuárioclicaemum evento nacoluna esquerdae ocalendáriona coluna domeio atualiza.



Um script é composto por uma série de instruções. Cada instrução é como um etapa em uma receita.



Scripts contêm instruções muito precisas. Por exemplo, você pode especificar que um valor deve ser lembrado antes de criar um cálculo utilizando esse valor.



Variáveis são usadas para armazenar temporariamente informações utilizadas no script.



Arrays são tipos especiais de variáveis que armazenam mais de uma informação relacionada.



O JavaScript distingue entre números (0-9), strings (texto) e valores booleanos (verdadeiro ou falso).



Expressões são avaliadas como um único valor.



Expressões contam com operadores para calcular um valor.

Na coluna esquerda, os linkstêm um atributo id cujo valor é um identificador de duas letras para o estadoemque eventoocorre:

... Austin, TX

2)Oscalendáriossãoarmazenadosemumobjeto JSON,emum arquivoexternocoletadoquandoo DOMfoicarregado.Quandoosusuáriosclicam emumasessãona colunadomeio,suadescriçãoé mostradanacoluna àdireita. Na coluna do meiomostrando os calendários,o título de cada sessão é usado dentro de um link que exibirá a descrição para a sessão.

Circuit Hacking

3)Asdescriçõesdetodasassessõessão armazenadasemumarquivoHTML.Descrições individuaissãoselecionadasusandoo método .load() dojQuery(eo seletor# mostradona p.390). Na coluna à direita, a descrição da sessão é selecionada de um arquivo HTML. Cada sessão é armazenada em um elemento cujo atributo id contém o título da sessão (com espaços substituídos por traços).

 

Intro to 3D Modeling

Come learn how to create 3D models of ...

Como os linkssão adicionadose removidos, é usada a delegação de evento. 400 AJAX& JSON

T J v

ri t n J u ry

AJAX& JSON 401

1

i

.in

1 r v:

v cri t n Lir r : Lu ci

u yr 1 ur

c i

r v:

v cri t n Lir r : Lu ci

u yr 1 ur

c i

/

/

1

84

:

As páginas de exemplo associam os tópicos que você aprendeu neste capítulo e demonstram como eles podem ser aplicados.

:

INSTRUÇÕES BÁSICASDE JAVASCRIPT

T J v r i t n J u yr

1

i . in

r v: Lir

v cri t n r : Lu ci

u yr 1 ur

c i

r v:

u yr 1 ur

c i

/ / 1

:1 :

As páginas de resumo estão no final de cada capítulo. Elas são um lembrete dos principais temas que foram abordados em cada capítulo.

INTRODUÇÃO

3

COMO O JAVASCRIPT TORNA AS PÁGINAS WEB MAIS INTERATIVAS  1 ACESSAR CONTEÚDO Você pode usar o JavaScript para selecionar qualquer elemento, atributo ou texto de uma página HTML. Por exemplo, ● Selecionar o texto dentro de todos os elementos

 em uma página ● Selecionar todos os elementos que têm um atributo class com um valor de note ● Descobrir o que foi inserido em uma entrada de texto cujo atributo id tem um valor de email

O JavaScript permite tornar páginas mais interativas acessando e modificando o conteúdo e a marcação usados em uma página web enquanto ela é visualizada no navegador.

2 MODIFICAR CONTEÚDO Você pode usar o JavaScript para adicionar elementos, atributos e texto à página, ou removê-los. Por exemplo, ● Adicionar um parágrafo de texto após o primeiro elemento 

● Alterar o valor dos atributos class para desencadear novas regras CSS para esses elementos ● Alterar o tamanho ou a posição de um elemento

4

INTRODUÇÃO  INTRODUÇÃO

3 PROGRAMAR REGRAS Você pode especificar um conjunto de passos para que o navegador siga (como uma receita), o que permite acessar ou alterar o conteúdo de uma página. Por exemplo, ● Um script de galeria pode verificar em qual imagem um usuário clicou e exibir uma versão maior dessa imagem. ● A calculadora de hipoteca pode coletar valores de um formulário, realizar um cálculo e exibir reembolsos. ● Uma animação pode verificar as dimensões da janela do navegador e mover uma imagem para a parte inferior da área visualizável (também conhecido como janela de exibição).

O JavaScript engloba muitas das regras tradicionais de programação.

4 REAGIR A EVENTOS

Ele pode fazer a página web parecer interativa respondendo ao que o usuário faz.

Você pode especificar que um script deve ser executado quando um evento específico ocorreu. Por exemplo, ele pode ser executado quando: ● Um botão é pressionado ● Um link é clicado (ou tocado) ● Um cursor paira sobre um elemento ● Informações são adicionadas a um formulário ● Um intervalo de tempo passou ● Uma página web terminou de carregar

INTRODUÇÃO

5

EXEMPLOS DE JAVASCRIPT NO NAVEGADOR Poder alterar o conteúdo de uma página HTML ao carregá-la no navegador é algo muito poderoso. Os exemplos abaixo contam com a capacidade de: Acessar o conteúdo da página Programar regras ou instruções que o navegador pode seguir Modificar o conteúdo da página Reagir a eventos disparados pelo usuário ou navegador

APRESENTAÇÕES DE SLIDES Mostrados no Capítulo 11 Apresentações de slides podem exibir uma série de diferentes imagens (ou outro conteúdo HTML) dentro do mesmo espaço em uma determinada página. Eles podem ser reproduzidos automaticamente como uma sequência, ou os usuários podem clicar nos slides manualmente. Eles permitem que mais conteúdo seja exibido dentro de uma quantidade limitada de espaço. Reagir: Script disparado quando a página carrega Acessar: Obter cada slide da apresentação de slides Modificar: Exibir apenas o primeiro slide (ocultar outros) Programar: Configurar um contador de tempo: quando mostrar o próximo slide Modificar: Mudar qual slide é mostrado Reagir: Quando o usuário clica em um botão para exibir diferentes slides Programar: Determinar qual slide mostrar Modificar: Mostrar o slide solicitado

6

INTRODUÇÃO

FORMULÁRIOS Mostrados no Capítulo 13 Validar formulários (verificar se foram preenchidos corretamente) é importante quando as informações são fornecidas pelos usuários. O JavaScript permite alertar o usuário se foram cometidos erros. Também pode realizar cálculos sofisticados com base em quaisquer dados inseridos e exibir os resultados para o usuário. Reagir: Usuários pressionam o botão enviar quando inserem seus nomes Acessar: Obter valor a partir do campo de formulário Programar: Verificar se o nome é longo o suficiente Modificar: Mostrar uma mensagem de aviso se o nome não tiver um tamanho aceitável.

Os exemplos nestas duas páginas lhe dão uma ideia do que o JavaScript pode fazer dentro de uma página web, e das técnicas que você aprenderá ao longo deste livro.

Nos próximos capítulos, você aprenderá como e quando acessar ou modificar o conteúdo, adicionar regras de programação e reagir a eventos.

ATUALIZAR PARTE DA PÁGINA

FILTRAR DADOS

Mostrados no Capítulo 8 Não é recomendável forçar os visitantes a recarregar o conteúdo de uma página web inteira, especialmente se você só precisa atualizar uma pequena parte de uma página. Simplesmente recarregar uma seção da página pode dar a impressão de que um site é mais rápido de carregar e mais parecido com um aplicativo. Reagir: Script disparado quando o usuário clica no link Acessar: O link em que eles clicaram Programar: Carregar o novo conteúdo que foi solicitado a partir desse link Acessar: Encontrar o elemento a substituir na página Modificar: Substituir esse conteúdo pelo novo conteúdo

Mostrados no Capítulo 12 Se houver muitas informações a exibir em uma página, você pode ajudar os usuários a encontrar as informações que eles necessitam fornecendo filtros. Aqui, os botões são gerados usando dados nos atributos dos elementos  da HTML. Quando o usuário clica em um dos botões, eles só veem as imagens com essa palavra-chave. Reagir: Script disparado quando a página carrega Programar: Coletar palavras-chave a partir das imagens Programar: Transformar as palavras-chave em botões em que o usuário pode clicar Reagir: O usuário clica em um dos botões Programar: Encontrar o subconjunto relevante de imagens que devem ser exibidas Modificar: Mostrar o subconjunto de imagens que utilizam essa tag

INTRODUÇÃO

7

A ESTRUTURA DESTE LIVRO Para que você aprenda JavaScript, este livro é dividido em duas seções:

CONCEITOS BÁSICOS

APLICAÇÕES PRÁTICAS

Os primeiros nove capítulos introduzem os princípios básicos de programação e da linguagem JavaScript. Ao longo do caminho, você aprenderá como ele é usado para criar sites mais atraentes, interativos e utilizáveis.

A essa altura, você já deve ter visto muitos exemplos de como o JavaScript é usado em sites populares. Esta seção reúne todas as técnicas que você aprendeu até agora, para lhe dar demonstrações práticas de como o JavaScript é usado por desenvolvedores profissionais. Não apenas você verá uma seleção de exemplos detalhados, como também aprenderá mais sobre o processo de como projetar e escrever scripts do zero.

O Capítulo 1 analisa alguns conceitos-chave sobre programação de computadores, mostrando como computadores criam modelos do mundo utilizando dados, e como o JavaScript é usado para alterar o conteúdo de uma página HTML. Do Capítulo 2 ao 4,  abrangem os conceitos básicos da linguagem JavaScript.

O Capítulo 10 lida com o tratamento de erros e depuração, e explica mais sobre como o JavaScript é processado.

O Capítulo 5 explica como o Document Object Model (DOM) permite acessar e alterar o conteúdo de um documento enquanto ele é carregado no navegador.

O Capítulo 11 mostra técnicas para criar painéis de conteúdo como controles deslizantes (ou sliders), janelas modais, painéis com abas e menus sanfona.

O Capítulo 6 discute como eventos podem ser usados para desencadear o código.

O Capítulo 12 demonstra várias técnicas para filtrar e classificar dados. Isso inclui filtrar uma galeria de imagens e reordenar as linhas de uma tabela clicando nos títulos das colunas.

O Capítulo 7 mostra como o jQuery pode tornar o mais rápido e fácil o processo de escrever scripts. O Capítulo 8 introduz o Ajax, um conjunto de técnicas que permitem alterar apenas parte de uma página web sem recarregar a página inteira. O Capítulo 9 abrange as Application Programming Interfaces (APIs), incluindo novas APIs que são parte da HTML5 e aquelas de sites como o Google Maps.

8

INTRODUÇÃO

O Capítulo 13 lida com aprimoramentos de formulários e como validar entradas de formulário. A menos que já seja um programador autoconfiante, você provavelmente descobrirá que, na primeira vez, é útil ler o livro do começo ao fim. Mas depois de entender os conceitos básicos, esperamos que este livro continue a ser uma referência útil à medida que você cria seus próprios scripts.

HTML & CSS: UMA RÁPIDA ATUALIZAÇÃO Antes de analisar o JavaScript, vamos esclarecer alguns termos de HTML e CSS. Observe como atributos HTML e propriedades CSS usam pares de nome/valor. ELEMENTOS HTML Elementos HTML são adicionados ao conteúdo de uma página para descrever sua estrutura. Um elemento consiste em tags de abertura e fechamento, além de seu conteúdo.

Tags geralmente vêm em pares com uma tag de abertura e uma de fechamento. Há alguns elementos vazios sem nenhum conteúdo (por exemplo, ). Eles têm uma tag de autofechamento.

TAG DE ABERTURA

Tags de abertura podem conter atributos, que informam mais sobre esse elemento. Atributos têm um nome e um valor. O valor é normalmente colocado entre aspas.

TAG DE FECHAMENTO

peach

VALOR DO ATRIBUTO

REGRAS CSS A CSS usa regras para indicar como o conteúdo de um ou mais elementos deve ser exibido no navegador. Cada regra tem um seletor e um bloco de declaração.

O seletor CSS indica o elemento ao qual regra se aplica. O bloco de declaração contém regras que indicam como esses elementos devem aparecer.

SELETOR

Cada declaração no bloco de declaração tem uma propriedade (o aspecto que você quer controlar), e um valor, que é a definição dessa propriedade.

BLOCO DE DECLARAÇÃO

.fruit {color: pink; NOME DA PROPRIEDADE

VALOR DA PROPRIEDADE

INTRODUÇÃO

9

SUPORTE DE NAVEGADOR Alguns exemplos no início deste livro não funcionam no Internet Explorer 8 e versões anteriores (mas exemplos de código alternativos que funcionam no IE8 estão disponíveis para download em http://javascriptbook.com). Explicamos as técnicas para lidar com os navegadores mais antigos nos capítulos posteriores.

Cada versão de um navegador adiciona novos recursos. Muitas vezes, esses novos recursos tornam as tarefas mais fáceis, ou são considerados melhores, do que usar técnicas mais antigas.

Para que seja mais fácil entender o JavaScript, os primeiros capítulos usam alguns recursos de JavaScript que não são suportados no IE8. Mas: ●

Mas, visitantes de um site web nem sempre se mantém atualizados com as últimas versões do navegador, assim desenvolvedores de site nem sempre podem contar com as tecnologias mais recentes. ●

Como veremos, há muitas inconsistências entre navegadores que afetam os desenvolvedores de JavaScript. O jQuery irá ajudá-lo a lidar com inconsistências em diferentes navegadores (uma das principais razões pelas quais o jQuery ganhou rapidamente popularidade entre os desenvolvedores web). Mas antes de conhecer  jQuery, e importante entender o que ele o ajuda a alcançar.

10

INTRODUÇÃO

Você irá aprender como lidar com o IE8 e navegadores mais antigos nos capítulos posteriores (porque sabemos que muitos clientes esperam que sites funcionem no IE8). Basta conhecer algum código extra ou que você esteja ciente de algumas questões adicionais. Online, você encontrará alternativas disponíveis para cada exemplo que não funciona no IE8. Mas verifique os comentários nesses exemplos de código para certificar-se de que você entende as questões que envolvem o uso deles.

1 O ABC DA PROGRAMAÇÃO

Antes de aprender a ler e escrever a linguagem JavaScript em si, você precisa se familiarizar com alguns conceitos chave da programação de computadores. Eles serão abordados em três seções:

A O que é um script e como criar um?

B Como computadores se adaptam ao mundo ao seu redor?

C Como escrevo um script para uma página da internet?

Depois de ter aprendido os conceitos básicos, os capítulos a seguir mostrarão como a linguagem JavaScript pode ser usada para instruir os navegadores sobre o que você quer que eles façam.

12

O ABC DA PROGRAMAÇÃO

1/a O QUE É UM SCRIPT E COMO CRIAR UM?

O ABC DA PROGRAMAÇÃO

13

UM SCRIPT É UMA SÉRIE DE INSTRUÇÕES Um script é uma série de instruções que um computador pode seguir para alcançar um objetivo. Você pode comparar scripts com qualquer um dos seguintes: RECEITAS

GUIAS

MANUAIS

Seguindo as instruções em uma receita, uma a uma, na ordem estabelecida, cozinheiros podem criar um prato que eles nunca fizeram antes.

Grandes empresas costumam fornecer guias para novos funcionários que contêm procedimentos a seguir em determinadas situações.

Mecânicos muitas vezes consultam manuais ao consertar automóveis que eles não conhecem. Esses manuais contêm uma série de testes para verificar se as principais funções do carro estão funcionando, junto com os detalhes de como corrigir quaisquer problemas que possam surgir.

Alguns scripts são simples e só lidam com um cenário individual, como uma receita simples para um prato básico. Outros scripts podem executar muitas tarefas, como uma receita para uma refeição complicada de três pratos. Outra semelhança é que, se você for iniciante em culinária ou programação, há muita terminologia nova a aprender.

Por exemplo, guias de hotéis podem conter passos que devem ser seguidos em diferentes cenários como quando um cliente faz o check-in, quando um quarto precisa ser arrumado, quando um alarme de incêndio dispara etc. Em qualquer um desses cenários, os funcionários precisam seguir apenas os passos para esse tipo de evento. (Você não iria querer que alguém seguisse todos os passos no manual enquanto espera para fazer o check-in). Da mesma forma, em um script complexo, o navegador pode utilizar apenas um subconjunto do código disponível em um dado momento.

Por exemplo, pode haver detalhes sobre como testar os freios. Se eles passarem nesse teste, o mecânico pode então começar o próximo teste sem a necessidade de consertar os freios. Mas, se eles falharem, o mecânico terá de seguir as instruções para consertá-los. O mecânico pode então voltar e testar os freios novamente para ver se o problema foi corrigido. Se os freios agora passarem no teste, o mecânico sabe que eles foram consertados e pode avançar para o próximo teste. Da mesma forma, scripts podem permitir que o navegador verifique a situação atual e só siga um conjunto de passos se essa ação for apropriada.

14

O ABC DA PROGRAMAÇÃO

Scripts são compostos por instruções que um computador pode seguir passo a passo. Um navegador pode usar diferentes partes do script, dependendo de como o usuário interage com a página web. Scripts podem executar diferentes seções do código em resposta à situação em torno deles.

O ABC DA PROGRAMAÇÃO

15

ESCREVENDO UM SCRIPT Para escrever um script, primeiro você precisa indicar seu objetivo e então listar as tarefas que precisam ser concluídas para alcançá-lo. Seres humanos podem alcançar objetivos complexos sem pensar muito sobre eles, por exemplo, talvez você seja capaz de dirigir um carro, fazer o café da manhã ou enviar um e-mail sem um conjunto de instruções detalhadas. Mas na primeira vez que fazemos isso, essas coisas podem parecer assustadoras. Portanto, ao aprender uma nova habilidade, frequentemente a dividimos em tarefas menores, e aprendemos uma delas de cada vez. Com a experiência, essas tarefas individuais passam a ser familiares e parecem mais simples. Alguns dos scripts que você irá ler ou escrever ao terminar este livro serão bastante complicados e podem inicialmente parecer intimidantes. Mas um script é simplesmente uma série de instruções curtas, cada uma das quais é executada para resolver o problema em questão. É por isso que criar um script é como escrever uma receita ou manual que permite que um computador resolva um enigma, um passo de cada vez. É interessante observar, porém, que um computador não aprende a executar tarefas como você ou eu; ele precisa seguir instruções sempre que executa a tarefa. Assim, um programa deve fornecer ao computador detalhes suficientes para executar a tarefa como se cada vez fosse a primeira.

16

O ABC DA PROGRAMAÇÃO

Comece com o quadro geral do que você deseja alcançar, e divida isso em passos menores. 1: DEFINA O OBJETIVO Primeiro, é preciso definir a tarefa que você deseja alcançar. Você pode pensar nisso como um quebra-cabeça para o computador resolver.

2: PROJETE O SCRIPT Para projetar um script, você divide o objetivo em uma série de tarefas que estarão envolvidas na resolução desse quebra-cabeça. Isso pode ser representado usando um fluxograma. Você pode então anotar os passos individuais que o computador precisa realizar para concluir cada tarefa individual (e todas as informações de que ele precisa para realizar a tarefa), quase como escrever uma receita que ele pode seguir.

3: CODIFIQUE CADA PASSO Cada um dos passos deve ser escrito em uma linguagem de programação que o computador entende. Em nosso caso, é JavaScript. Por mais tentador que possa ser para iniciar a codificar imediatamente, vale a pena investir tempo projetando seu script antes de começar a escrevê-lo.

O ABC DA PROGRAMAÇÃO

17

PROJETANDO UM SCRIPT: TAREFAS Uma vez que você sabe o objetivo do seu script, você pode elaborar as tarefas individuais necessárias para alcançá-lo. Essa visão de alto nível das tarefas pode ser representada usando um fluxograma.

FLUXOGRAMA: TAREFAS DO PESSOAL DE LIMPEZA DE UM HOTEL VERIFIQUE CADA QUARTO

O quarto precisa ser arrumado?

S

Arrumar quarto

O minibar precisa ser reabastecido?

S

Reabastecer

PASSE PARA O PRÓXIMO QUARTO

18

O ABC DA PROGRAMAÇÃO

PROJETANDO UM SCRIPT: PASSOS Cada tarefa individual pode ser dividida em uma sequência de passos. Quando você está pronto para codificar o script, esses passos podem então ser traduzidos em linhas individuais do código.

LISTA: PASSOS NECESSÁRIOS PARA ARRUMAR UM QUARTO

PASSO 1

Tirar roupa de cama usada

PASSO 2 Limpar todas as superfícies PASSO 3 Passar aspirador de pó no chão PASSO 4 Trocar roupa de cama PASSO 5 Tirar toalhas e sabonetes usados PASSO 6 Limpar vaso sanitário, banheiro, pia, superfícies PASSO 7 Colocar novas toalhas e sabonetes PASSO 8 Limpar chão do banheiro

Como veremos na próxima página, os passos que um computador precisa seguir a fim de executar uma tarefa normalmente são muito diferentes daqueles que você ou eu poderíamos seguir.

O ABC DA PROGRAMAÇÃO

19

DOS PASSOS AO CÓDIGO Cada passo para cada tarefa mostrada em um fluxograma precisa ser escrito em uma linguagem que o computador possa entender e seguir. Neste livro, focalizamos a linguagem JavaScript e como ela é usada em navegadores web. Como acontece ao aprender qualquer nova linguagem, você precisa familiarizar-se com: ● Vocabulário:  As palavras que os computadores entendem. ● Sintaxe: Como você agrupa essas palavras para criar instruções que os computadores podem seguir. Junto com a aprendizagem da linguagem em si, se você for iniciante em programação, também precisará entender como um computador alcança diferentes tipos de objetivos usando uma abordagem programática  para a resolução de problemas.

Computadores são muito lógicos e obedientes. Eles precisam ser informados de todos os detalhes do se espera que eles façam, e farão isso sem questionar. Como eles precisam de diferentes tipos de instruções em comparação a você ou eu, todo mundo que aprende a programar comete muitos erros no início. Não desanime; no Capítulo 10 veremos várias maneiras de como descobrir o que pode ter dado errado — programadores chamam isso depuração. 20

O ABC DA PROGRAMAÇÃO

Você precisa aprender a “pensar” como um computador porque eles resolvem tarefas de maneiras diferentes das que você ou eu poderíamos usar para abordá-las. Computadores resolvem problemas programaticamente; eles seguem uma série de instruções, uma após outra. O tipo de instrução de que eles precisam costumam ser diferentes do tipo de instrução que você poderia dar a outro ser humano. Portanto, ao longo do livro você não apenas aprenderá o vocabulário e a sintaxe que o JavaScript utiliza, mas também aprenderá a escrever instruções que os computadores podem seguir. Por exemplo, ao olhar para a imagem à esquerda, como você pode determinar qual é a pessoa mais alta? Um computador precisaria de instruções explícitas, passo a passo, como: 1. Localize a altura da primeira pessoa. 2. Suponha que ela é a “pessoa mais alta”. 3. Analise a altura das pessoas restantes uma a

uma e compare a altura delas com a “pessoa mais alta” encontrada até agora. 4. A cada passo, se o computador descobrir alguém cuja altura é maior do que a “pessoa mais alta” atual, esse alguém irá torna-se a nova “pessoa mais alta”. 5. Depois de verificar todas as pessoas, diga qual é a mais alta. Assim, o computador precisa analisar cada pessoa sucessivamente, e para cada uma ele executa um teste (“Ela é mais alta que a pessoa mais alta atual?”). Depois de fazer isso para cada pessoa, ele pode fornecer uma resposta.

O ABC DA PROGRAMAÇÃO

21

DEFININDO UM OBJETIVO & PROJETANDO O SCRIPT Considere como você pode abordar um tipo diferente de script. Este exemplo calcula o custo de uma placa com nomes. Os clientes são cobrados por letra.

A primeira coisa que você deve fazer é detalhar seus objetivos para o script (o que você quer que ele alcance): Os clientes podem inserir um nome em uma placa; cada letra custa US$ 5. Quando um usuário insere um nome, o preço é mostrado. Em seguida, divida-a em uma série de tarefas que têm de ser realizadas a fim de alcançar os objetivos: 1. O script é disparado quando o botão é clicado. 2. Coleta o nome inserido no campo de

formulário. 3. Verifica se o usuário inseriu um valor. 4. Se o usuário não inseriu nada, aparece uma mensagem pedindo para ele inserir um nome. 5. Se um nome foi inserido, o script calcula o custo da placa multiplicando o número de letras pelo custo por letra. 6. Por fim, o preço da placa é exibido. (Esses números correspondem ao fluxograma na página à direita).

22

O ABC DA PROGRAMAÇÃO