Curso de Programação em Javascript e HTML

Curso de Programação em Javascript e HTML

(Parte 1 de 10)

w.baixebr.blogspot.com w.baixebr.blogspot.com

Curso de Programação em JavaScript e HTML Dinâmico Desenvolvimento, aplicações e referências de acordo com as normas do W3C

Índice

1 – Introdução5
2 – Inserir JavaScript numa página da Web5
O elemento <script>5
3 – Comentários e blocos de código6
Comentários6
Blocos de código7
4 – Variáveis7
Declaração de Variáveis7
Os valores das Variáveis8
Conversões de Valores8
5 – Expressões Literais9
Representação de valores9
Números inteiros10
Números com vírgula flutuante1
Valores lógicos (booleanos)1
Expressões de texto1
Caracteres de escape12
6 – Cadeias de variáveis (Array)13
7 – Operadores14
Operadores de atribuição de valor14
Operadores de comparação14
Operadores aritméticos15
Operadores lógicos15
8 – Objetos16
Exemplos práticos com objetos16
9 – Definir uma Função17
10 – As instruções condicionais if...else19
1 – Executar código repetidamente19
Ciclos for19
Ciclos while21

PARTE I – Introdução ao JavaScript

1 – Revisão de matérias importantes23
2 – Os operadores da linguagem JavaScript38
Operadores aritméticos38
Operadores de atribuição (formas abreviadas)38
Operadores de comparação38
Operadores lógicos39

PARTE I – Programação em JavaScript <meta name="autor" content="Rafael Feitosa">2

Curso de Programação em JavaScript e HTML Dinâmico Desenvolvimento, aplicações e referências de acordo com as normas do W3C

Adição de texto4
3 – Instruções condicionais45
As instruções if e ifelse..................................................................................45
Atribuição condicional de valores49
A instrução switch50
4 – Execução repetida de código54
Ciclos for5
Ciclos while e ciclos do...while57
5 – Código robusto: as instruções trycatch......................................................59
6 – Construir e usar uma função63
Funções com um número fixo de argumentos64
Funções com um número variável de argumentos6
7 – Trabalhar com objetos71
Criar um novo objeto72
Propriedades de objetos72
Métodos de objetos72
Objetos definidos pelo padrão ECMAScript73
As declarações this e with73
8 – Objeto Array76
Propriedades do objeto Array76
Métodos do objeto Array76
Coleções7
9 - Objeto Date81
Métodos do objeto Date82
Métodos estáticos do objeto Date84
10 – Objeto Math89
Propriedades do objeto Math89
Métodos do objeto Math89
1 – Objeto String94
Propriedades do objeto String94
Métodos do objeto String95
Métodos estáticos do objeto String95
1 – Para que serve o HTML Dinâmico?100
2 – O DHTML ainda é pouco aproveitado. Porquê?108
3 – Que ferramentas vamos usar?109
Os objetos do DOM109
Objetos principais usados em DHTML109
4 – O objeto window1
Propriedades1
Coleções112

PARTE I – HTML Dinâmico <meta name="autor" content="Rafael Feitosa">3

Curso de Programação em JavaScript e HTML Dinâmico Desenvolvimento, aplicações e referências de acordo com as normas do W3C

Métodos112
5 – O objeto document122
Propriedades122
Coleções123
Métodos123
6 – O objeto event132
Propriedades132
Funções de compatibilidade para o objeto event132
7 – O objeto navigator144
Propriedades144
8 – O objeto screen146
Propriedades146
9 – O objeto location147
Propriedades148
Métodos148
10 – O objeto history150
Propriedades150
Métodos150
1 – Objetos que representam elementos do HTML151
anchor151
applet153
embed154
frame154
frameset155
form155
iframe158
image160
input163
object168
option169
select172
table178
tablecell186
tablerow189
textarea193
12 – Mais controle sobre os elementos do HTML196
Propriedades intrínsecas dos elementos do HTML197
A propriedade style197
A propriedade innerHTML198
A propriedade id e o método getElementById()199
Posicionamento e medição de elementos em DHTML201

PARTE IV– Controle do Elementos HTML PARTE I: Introdução ao JavaScript

1. Introdução

<meta name="autor" content="Rafael Feitosa">4

Curso de Programação em JavaScript e HTML Dinâmico Desenvolvimento, aplicações e referências de acordo com as normas do W3C

O JavaScript é uma linguagem de programação simples criada para dar mais interatividade e maior funcionalidade às páginas da Web. Tendo sido inicialmente desenvolvida pela Netscape, a linguagem JavaScript acabou por dar origem à especificação técnica ECMAScript, que é um padrão oficial reconhecido pela indústria. Apesar desta linguagem ser mais conhecida pelo nome de JavaScript, e de a versão produzida pela Microsoft ter recebido o nome de JScript, a verdade é que se tratam de implementações que sendo fiéis à norma ECMAScript lhe acrescentaram novas funcionalidades úteis, mas respeitando sempre as especificações oficiais.

O código escrito em JavaScript destina-se a ser executado pelo web browser quando a página HTML que o contém é visualizada. Ele é uma parte integrante da página e permite que o browser seja capaz de tomar decisões quanto ao modo com que o conteúdo é apresentado ao usuário e como pode ser manipulado.

2. Inserir JavaScript numa página da Web

2.1 O elemento <script>

Os browsers capazes de executar código escrito em JavaScript reconhecem o elemento <script>. É dentro desse elemento que se coloca todo o código, como ilustra o exemplo seguinte:

<title>A Minha Página com JavaScript</title>

<script type="text/javascript"> alert("Seja bem vindo(a) à minha página!"); </script>

Aqui colocamos o conteúdo da página em HTML </body>

Repare que no final da linha de código colocamos o caractere ; o qual dá ao interpretador de JavaScript a indicação de que a instrução termina nesse local. O JavaScript não nos obriga a terminar as instruções deste modo, bastando que mudemos de linha para que ele perceba que a instrução chegou ao fim. No entanto isso torna mais difícil a localização dos erros e pode também contribuir para gerar mais erros. É conveniente que os principiantes terminem todas as instruções com o caractere ; e, se preferirem, só deixem de o fazer quando se sentirem completamente à vontade com a linguagem.

Graças ao JavaScript podemos fazer com que os objetos gráficos apresentados na página (como por exemplo uma imagem, um botão ou uma ligação de hipertexto) respondam dinamicamente às ações do usuário. Para que isso aconteça basta adicionar um novo atributo ao elemento responsável pela apresentação desse objeto e escrever o código que ao ser executado dará origem ao

<meta name="autor" content="Rafael Feitosa">5

Curso de Programação em JavaScript e HTML Dinâmico Desenvolvimento, aplicações e referências de acordo com as normas do W3C comportamento esperado. O exemplo seguinte executa uma caixa de diálogo com um agradecimento sempre que o link for clicado:

<a href="http://w.w3c.org/" target="_blank" onclick="alert('Obrigado por visitar o W3C!')">Visite o W3C</a> </body>

Certamente já conhece bem o atributo href="...", que serve para especificar o

URL da página a que a ligação de hipertexto conduz, mas note que o atributo onclick="..." é bem diferente porque o seu conteúdo é constituído por código JavaScript, que neste caso faz aparecer a caixa de diálogo com a mensagem de agradecimento. (Se não conseguir compreender o modo como o texto contido no atributo onclick consegue fazer isto não se preocupe, esta técnica, entre outras, serão explicadas durante este curso).

3. Comentários e blocos de código

3.1 Comentários

Os comentários permitem-nos descrever o código JavaScript que produzimos tornando-o mais legível e mais fácil de manter. Se comentar adequadamente o código que produz, quando mais tarde precisar de o melhorar ou fazer alterações será mais fácil e rápido perceber o que fez antes. Se você desenvolver um código para partilhar com outras pessoas então os comentários são ainda mais importantes para que os outros percebam aquilo que você escreveu.

Em JavaScript podemos usar comentários com uma única linha e comentários com várias linhas. Os comentários com uma única linha começam com os caracteres //. Isto dá ao interpretador de JavaScript a indicação de que o resto da linha é um comentário, deste modo este ignora o resto da linha, continuando a interpretar o código na linha seguinte.

Um comentário que se estende por várias linhas começa com a seqüência de caracteres /* e continua até ser encontrada a seqüência de caracteres */, que marcam o fim do comentário. Ao encontrar a seqüência /* o interpretador de JavaScript procura imediatamente a seqüência de finalização */, continuando aí a interpretação do código e ignorando o que está no meio.

Abaixo estão alguns exemplos de comentários em JavaScript.

<meta name="autor" content="Rafael Feitosa">6

Curso de Programação em JavaScript e HTML Dinâmico Desenvolvimento, aplicações e referências de acordo com as normas do W3C

// Este é um comentário com uma única linha /* Este comentário ocupa uma só linha mas podia ocupar mais */

/* Este comentário ocupa várias linhas. Tudo o que for escrito aqui dentro será ignorado pelo interpretador de JavaScript */

3.2 Blocos de código

Quando temos que executar funcionalidades não triviais é quase sempre necessário executar seqüências de instruções compostas por várias linhas. Se essas seqüências tiverem de ser executadas condicionalmente (veja por exemplo a descrição da instrução if mais à frente), ou se formarem uma função, então elas constituem um bloco e têm de ser agrupadas. Isso se consegue colocando-as entre chaves ({ }.)

{// isto é um bloco de código var i = 0; var j = i * 3; }

4. Variáveis

O que são as Variáveis?

As variáveis são objetos que servem para guardar informação. Elas permitemnos dar nomes a cada um dos fragmentos de informação com que temos que lidar. Se esses nomes forem bem escolhidos fica fácil saber onde é que se deve guardar um determinado pedaço de informação e onde é que se pode ir buscar a informação que se guardou antes. Para evitar erros e aumentar a produtividade é importante escolher nomes que descrevam aquilo que cada variável guarda. Assim, se escrevermos um programa que divide dois números é recomendado chamar dividendo, divisor e quociente os números envolvidos na operação. Escolhas como por exemplo n1, n2 e n3, apesar de funcionarem, provocam confusão e dão origem a erros difíceis de detectar porque tornam o código mais difícil de ler.

É importante que saibamos quais as regras que temos de respeitar quando escolhemos um nome para uma variável:

•Todos os nomes têm que começar com uma letra ou com o caractere _.

•Os restantes caracteres que compõem o nome podem igualmente conter números. Nunca se esqueça que para o JavaScript letra maiúscula e letra minúscula são coisas diferentes e que, por exemplo, as variáveis variavel1, Variavel1 e vaRiavel1 são três objetos distintos.

4.1 Declaração de Variáveis

Ao ato de criar uma variável se dá o nome de declaração. As variáveis que são declaradas fora de qualquer função (mais à frente iremos ver exemplos de declarações de variáveis e o que são funções) são designadas por variáveis globais. Aqui o termo global significa que a variável em causa pode ser utilizada em qualquer parte do script; ela está permanentemente acessível. Quando uma variável é declarada dentro de uma função ela será uma variável local porque só pode ser utilizada dentro dessa função.

<meta name="autor" content="Rafael Feitosa">7

Curso de Programação em JavaScript e HTML Dinâmico Desenvolvimento, aplicações e referências de acordo com as normas do W3C

(Parte 1 de 10)

Comentários