Prof. Rosinei Soares de Figueiredo

Introdução ao JavaScript

JavaScript

Javascript é uma linguagem de programação de scripts de lado cliente que extende e completa o HTML:

Javascript é capaz de acessar e modificar dinamicamente qualquer elemento de uma página HTML, por isso é muito utilizada para: • Efeitos especiais;• Interatividades com o usuário;• Comunicação com servidores.

JavaScript

Javascript e Java:– Javascript possui sua sintaxe baseada na linguagem Java;– Porém, JavaScript suporta poucos tipos de dados, e implementa

apenas alguns conceitos de orientação a objetos, ao contrário da linguagem Java.

Terminologia JavaScript

• É importante entender alguns termos fundamentais JavaScript:– Objetos, Propriedades, Métodos, Eventos,

Funções, Valores, Expressões, Variáveis, Operadores.

Objetos

• Os objetos referem-se à janelas, documentos, imagens, tabelas, formulários, links, botões, etc.

• Objetos devem ser nomeados. • Objectos têm propriedades que funcionam como

modificadores.

Propriedades

• Propriedades são atributos dos objetos. • Propriedades são definidas usando o nome do

objeto, algum meio de apontamento, e o nome da propriedade. – ex: cliente.nome– cliente é um objeto.– nome é uma propriedade.

Métodos

• Métodos são ações aplicadas a objetos particulares. Os métodos são o que os objetos podem fazer.– Ex.: document.write(”Hello World")

– document é um objeto.– write é um método.

Eventos

• Eventos são conjuntos de ações relacionados com as possíveis interferências externas que um objeto pode sofrer. – Ex.: o evento OnMouseOver manipula ações que podem

alterar alguma característica de um objeto quando o mouse passa sobre ele.

– Ex.: o evento onSubmit dispara suas ações no momento em que se solicita o envio de um formulário.

• Geralmente, as ações do usuário disparam os eventos.

Funções

• Funções são conjuntos de instruções agrupadas, geralmente declaradas sob algum nome de identificação, sem vinculação com algum objeto específico. – Ex.: function fazAlgo ()

{statement here}– As chaves contém os comandos das funções.

• JavaScript possui funções nativas e permite a criação de novas funções.

Valores

• Valores são dados ou informações armazenadas.

• Exemplos de tipos e valores:– Numérico: 1, 2, 3, etc.– String: Caracteres entre aspas. – Boolean: Verdadeiro ou Falso. – Objetos: Imagem, Formulário.– Funções: validacao(), fazAlgo().

Variáveis

• Variáveis são espaços que contêm valores, que podem ser especificados com um sinal de igual (=).

• Variáveis são criadas através de uma declaração usando a palavra var: – Ex.: var nome;– Ex.: var nome = “Alceu Bispo”;

Variáveis

• O nome das variáveis é case sensitive;• Eles precisam começar com letra, ‘$’ ou

‘_’, seguidos de letras e números; • A palavra var é opcional quando a

variável é declarada com atribuição de valor.

Expressões

• Expressões são comandos que atribuem valores a variáveis .

• Expressões usam um operador de atribuição, como o sinal de igual. – Ex.: var nome = “Joaquim”;

• Em JavaScript, expressões podem ou não terminar com ponto e vírgula.

Principais tipos de dados

Tipos primários:• String;• Number;• Boolean.

Tipos compostos:• Object;• Array.

Tipos especiais:• null;• undefined.

Operadores

• Operadores são utilizados para manipular variáveis ou valores.

Operator Description Example Result

+ Addition x=2 4y=2

x+y

- Subtraction x=5 3y=2

x-y

* Multiplication x=5 20y=4

x*y

/ Division 15/5 35/2 2,5

% Modulus (division remainder)

5%2 110%8 210%2 0

++ Increment x=5 x=6x++

-- Decrement x=5 x=4x--

Operator Example Is The Same As

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y

Operator Description Example

== is equal to 5==8 returns false

=== is equal to (checks for both value and type)

x=5

y="5"

 

x==y returns true

x===y returns false

!= is not equal 5!=8 returns true

> is greater than 5>8 returns false

< is less than 5<8 returns true

>= is greater than or equal to

5>=8 returns false

<= is less than or equal to 5<=8 returns true

Operator Description Example

&& and x=6

y=3

 

(x < 10 && y > 1) returns true

|| or x=6

y=3

 

(x==5 || y==5) returns false

! not x=6

y=3

 

!(x==y) returns true

JavaScript - Vinculação

JavaScript pode ir direto na estrutura HTML:

JavaScript - Vinculação

JavaScript pode ir numa seção à parte (geralmente <head>):

JavaScript - Vinculação

JavaScript pode ir num arquivo externo (.js):

JavaScript - Vinculação

Chamada de scripts contidos em um arquivo externo :

JavaScript – Objetos Nativos

• window: O objeto mais acima na hierarquia, contém propriedades que se aplicam a toda a janela.

• location: Contém as propriedades da URL atual.

• history: Contém as propriedades das URLs visitadas anteriormente.

• document: Contém as propriedades do documento contido na janela, tais como o seu conteúdo, título, cores, etc.

JavaScript – Tarefas básicas

Métodos do objeto window:– alert(), confirm(), prompt(), etc.

Métodos do objeto document:– getElementById(), write(), etc.

JavaScript – Acesso aos elementos

JavaScript – Acesso aos elementos

A identificação dos elementos é feita:

– Pelo ID das Tags;– Pelo nome dado às Tags;– Pela classe atribuída às Tags.

Referências

LIMA, Adriano Gomes. JavaScript – Aplicações Interativas para a Web. 2006.

W3SCHOOLS. JavaScript Tutorial. Disponível em <http://www.w3schools.com/js/default.asp>. Acessado em 09 de março de 2015.