0% acharam este documento útil (0 voto)
3K visualizações87 páginas

Javascript 4 PDF Free

Este documento fornece um resumo sobre JavaScript, incluindo suas fundamentos, variáveis, constantes, operadores, funções, estruturas de controle e orientação a objetos.
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0% acharam este documento útil (0 voto)
3K visualizações87 páginas

Javascript 4 PDF Free

Este documento fornece um resumo sobre JavaScript, incluindo suas fundamentos, variáveis, constantes, operadores, funções, estruturas de controle e orientação a objetos.
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 87

Técnico Informática

JavaScript

Autor: Jefferson da Silva Mira


Contato: [email protected]
Indice

• Fundamentos
• Variáveis
• Constantes
• Operadores
• Funções em JavaScrip
• Efeitos em JavaScript
• Estruturas de controle
• Object Orientation (OO)
• Apêndice
Fundamentos
JavaScript

• Linguagem de programação interpretada;


•Não tem nada a ver com Java!
•Interpretada totalmente pelo browser;
• Linguagem Script:
• Fracamente tipada;
• Recursos de OO (Orientação a Objetos);
• Possui funções de primeira classe;
•Códigos inseridos nas páginas HTML;
•Criada pela Netscap, para tornar a página mais dinâmica.
•Atualmente mantido pelas empresas Ecma.
E a onde o JavaScript entra no
desenvolvimento?
• HTML: Criada para definir a estrutuda do meu
documento WEB;

• CSS: Define os estilos da minha página WEB;

• JavaScript: Insere ações na minha página WEB;


Como definir o código JavaScript?

• O código JavaScript é definido com as tags: <script


type="text/javascript"></script>
• Script pode ser definido em qualquer parte do corpo
do documento HTML;

• Definido normalmente dentro da tag <head></head>;

• Pode ser definido em páginas externas, com o código:


– <script src="myScript.js"></script>
Exemplo
<html>
<head>
<title>Exemplo basico de JavaScript</title>

<script type="text/javascript"> Toda vez que a página


for aberta, será
alert("Hello World!");
mostrada uma caixa de
</script> texto com o texto
definido
</head>
<body>

</body>
</html>
Escrevendo valores na tela

• É possível escrever um texto qualquer na tela usando o comando


document.write("Texto para ser impresso");

<html>
<body>
<p>JavaScript can write directly into the HTML output stream: </p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
</body>
</html>
Variáveis
Variáveis em JavaScript

• São fracamente tipadas (Não necessitam ter seu


‘tipo’ definido na criação.
<HTML>
<BODY>
<SCRIPT LANGUAGE="Javascript">
var texto = "Meu número preferido é o " ;
var variavel = 7 ;
document.write(texto + variavel);
</SCRIPT>
</BODY>
</HTML>
Quais são os tipos de variáveis em
JavaScript

Tipo de dados Valores


Números Todo número inteiro ou com virgula tal que 22 ou
3.1416
Cadeias de caracteres Toda cadeia de caracteres inseridas entre aspas tal
que "cadeia de caracteres"
Booleanos as palavras true para verdadeiro e false para falso
Palavra nulo Palavra especial que representa sem valor
Expressões de controle

Para que seja possível Expressão O que é

utilizar certos caracteres \n Nova Linha


\t Tab
em variáveis “String”,
\b Retrocesso
existem comandos \” Aspas
expecias. \\ Barra
Os mais importântes \f Salta Formulário
estam listados ao lado; \0 nulo
Valores especiais para variáveis

•Undefined: Variável declarada, mas sem nenhum


valor definido ou atribuida à ela.

•Null: Quando é atribuido um valor ‘null’

•NaN (Not a Number): Quando uma variável que


não é um número é utilizado como se fosse.

•Infinity: Valores numéricos muito altos.


Constantes
Variáveis em JavaScript

• Repositórios de dados que não tem


seu valor alterado;
• Definidos pela palavra Const.

Exemplo: const HORAS_DO_DIA = 24;


Operadores

Autor: Jefferson da Silva Mira


Contato: [email protected]
Operadores Aritméticos
Operador Função Exemplo

+ Adição 2 + 3, x+y

- Subtração 7 – 5, a – 10

* Multiplicação 3 * 5, I * J

/ Divisão 10/2, total/ quant

% Módulo: O resto de uma 4%2 = 0


divisão 5%2 = 1
Operadores de Atribuição

Operador Função Exemplo

= Atribuição X = 3;

*= Multiplicação e X *= 5;
atribuição É igual: X = X*5;
/= Divisão e atribuição X /= 5;
É igual: X = X/5;
-= Subtração e atribuição X -= 5;
É igual: X = X-5;
+= Soma e atribuição X += 5;
É igual: X = X+5;
Operadores Relacionais
Operador Função Exemplo

== Igual a 3 == 3, x == y

=== Igual a (valor e tipo) 3 === “3”

> Maior que 5 > 1, x > y

>= Maior ou igual a 6 >= 6, x >= 6

< Menor que 3 < 7, x < 7

<= Menor ou igual a 7 <= 7, x <= y

!= Diferente de 5 != 10, X != 10
Operadores Lógicos

Operador Função Exemplo

&& Conjunção (e) X = y && 3 < 10


Para o resultado final ser verdadeiro, as duas
variáveis tem que ser verdadeiras.
|| Disjunção (ou) X <> Y || 5 >= y
Para o resultado final ser verdadeiro, apenas
uma das duas variáveis pode ser verdadeira.
! Negação (não). !(x > Y)
Muda o valor das variáveis lógicas.
Operadores de Incremento

Operador Função Exemplo

x++ incrementação y = x++


(x++ é o mesmo que x=x+1)
x-- decrementação y= x--
(x-- é o mesmo que x=x-1)
Ordem dos Operadores

• Operadores Mais Internos (Entre


Parênteses)
• Operadores Aritméticos
• Operadores Relacionais
• Operadores Lógicos
Exercícios usando variáveis e
Contantes
1. Crie um algoritmo monte uma tabela com a
tabuada de um número. Os valores devem
ser gerados atravéz de operações
matemáticas;
Arrays
Definição

• É um conjunto de valores agrupado.


• O índice sempre começa em 0 (zero).
• Pode conter qualquer tipo de valores, e os
tipos de valores podem váriar.
• Não é necessário definir o tamanho do array
ao criar.
Definição de um Array

1. A primeira forma de criar um array, é a seguinte:


var pessoas = [] //Cria um array vazio.
pessoas[0+=“Pessoa1"; //Adiciona valor na primeira posição.
pessoas[1+=“Pessoa2";
pessoas[2+=“Pessoa3";

2. É possível criar o array e já definir os valores que ele vai


ter, com a siguinte sintaxe:
var pessoas = ["Jefferson","Valdecir","Cezar","Pedro”+;

3. É possível criar um objeto do tipo array:


var myCars=new Array();
Propriedade length (tamanho)

•É o tamanho de um array, e pode ser usado da


seguinte maneira:
var x=myCars.length; //O tamanho do array (um inteiro) é
retornado e guardado em uma variável (var x).

•O tamanho do array (valor armazenado no atributo


length) é sempre o índice + 1. No exemplo abaixo, o
índice é 3 e o length é 4:
var pessoas = *"Jefferson","Valdecir","Cezar","Pedro”+;
Iteração em um array

É possível passar por todas as posições de um


array usando a estrutura ‘for’ (para), tendo
como comando de parada o length:

for(var i=0; i < pessoas.length;i++){


document.write(pessoas[i]);
}
Arrays multidimensionais
• São arrays que tem arrays internos.
• São conhecidos também como matrizes.
• Podem ser definidos pela sintaxe:

var pessoas = new Array();


pessoas[0] = new Array("jefferson","Cezar","Hilosi","Cicero");
pessoas[1] = new Array("Jeferson","Josiane","Raul","Pedro","Paulo");

Ou

var pessoas = [["jefferson","Cezar","Hilosi","Cicero"] , ["Jeferson","Josiane","Raul","Pedro","Paulo"]];

Para acessar uma posição deste array multidimesional, é possível


utilizar a seguinte sintaxe:

document.write(pessoas[1][3]);
Funções que estão disponíveis na
maioria dos Browsers.
Função O que faz
concat faz cópia simples do Array e adiciona os argumentos
join cria um string do Array. Adiciona o argumento como cola entre cada membro do Array.

shift remove e retorna o primeiro elemento


pop remove e retorna o ultimo elemento
unshift anexa os argumentos na frente do Array
push anexa os argumentos no final do Array
Reverse inverte o Array sem copiá-lo
slice faz cópia simples da porção do Array delimitada por argumentos do índice

splice remove elementos especificados do Array, e os substitui com argumentos adicionais


opcionais
sort classifica o Array sem copiá-lo, opcionalmente usando um argumento comparador

toString chama join sem passar um argumento


Funções que estão disponíveis em todos os
Browsers (menos IE <= 8)
Função O que faz
indexOf retorna o primeiro elemento igual ao valor especificado, ou -1 se nenhum for encontrado
lastIndexOf retorna o último elemento igual ao valor especificado, ou -1 se nenhum for encontrado

every retorna verdadeiro se a função fornecida retorna verdadeiro quando aplicada a todos
elementos
some retorna verdadeiro se a função fornecida retorna verdadeiro quando aplicada a pelo
menos um elemento
forEach aplica a função fornecida para todos elementos do Array
map cria um novo Array contendo os resultados da aplicação da função a todos elementos do
Array
filter cria um novo Array contendo todos os elementos para os quais a função fornecida
retorna verdadeiro
reduce aplica uma função simultaneamente para dois valores do Array (da esquerda para a
direita) de forma a reduzi-los a um valor único (nota: reduce tinha um significado
diferente em versões mais antigas do Prototype.js)
reduceRight aplica uma função simultaneamente para dois valores do Array (dadireita para a
esquerda) de forma a reduzi-los a um valor único.
Caixas de Diálogo
O que é isso?
• Ferramenta utilizada para criar uma interface entre o
usuário e a máquina;
• No javaScript existem três caixas:
– Alert:
• Mensagem que é apenas mostrada na tela.
• Alert(“Mostra um texto”);
– Prompt:
• Tem um campo, um botão ‘ok’ e um botão cancelar.
• Sempre retorna um valor, caso o botão ‘cancelar’ seja digitado, retorna ‘null’;
• prompt(“Mostra um texto”);
– Confirm:
• Tem o botão ‘ok’ e o ‘cancelar’. Retorna ‘verdadeiro’ ou ‘falso’.
Funções em JavaScrip
Definição

São códigos criados com um propósito específico;


Existem dois tipos:
1. Criadas pelo JavaScript (Como o Alert());
2. Criadas pelo desenvolvedor;

São definidas pela sintaxe:

function nome_da_função(argumentos) {
... código de instruções ...
}
Parâmetros de entrada e saída
• Uma função pode receber diversos parâmetros;
• Estes parâmetros devem ser declarados;
• Ao invocar a função, os parâmetros desejados devem ser passados;

Exemplo de declaração de função:


function Exemplo(Texto) {
alert(texto);
}

Exemplo e chamada de função:


Exemplo("Bom dia a todos");
Parâmetros de entrada e saída

• Uma função pode ou não retornar um valor;


• Este retorno é definido pela palavra chave return.

Exemplo de retorno em uma função:


function cubo(numero) {
var cubo = numero*numero*numero
return cubo;
}
Estruturas de controle

Autor: Jefferson da Silva Mira


Contato: [email protected]
Estruturas de controle

Uma estrutura de controle serve para que o algoritmo possa


executar um determinado bloco de ações, quando
determinadas condições, representadas por expressões
lógicas ou relacionais, são satisfeitas. Existem dois tipos de
estruturas de controle de seleção:
• Seleção simples:
– If(condição){... }
– If(condição){... }else{}
– If(condição){...}else if(condição){... }
– Operação ternária: condição?expressão1:expressão2
• Seleção composta
– Switch(variável)... case... Default;
Estrutura de seleção simples
if (condição){
comando;
}else{
comando;
}
Ou

if (condição){
comando;
}else if (condição){
comando;
}
Estrutura de seleção composta
switch(variável)
{
case constante1:
seqüência de comandos
break;
case constante2:
seqüência de comandos
break;
...

default:
seqüência de comandos
}
Exercícios

1. Crie uma calculadora, utilizando switch-case;


2. Crie um algoritmo que defina se uma variável
representa: uma linguagem de programação
(java, html, javaScript, html) ou um tipo de
dados (inteiro, real, logico, caracter).
Estruturas de Repetição

Autor: Jefferson da Silva Mira


Contato: [email protected]
Como repetir?

• Existem, principalmente, dois tipos de


repetição:
– for
• Repetição baseada num número de vezes pré-definido;
– While
• Repetição até que uma determinada condição seja
verdadeira;
For (velho amigo ‘Para’)
Coisas para se falar a respeito da
variável controladora
• Pode ter qualquer nome (“cont” é apenas um
exemplo);
• O incremento da variável controladora pode
ser realizado com base em qualquer valor
inteiro (positivo ou negativo);
• Não é recomendável alterar o valor dentro do
bloco de instruções;
E como funciona afinal?
While (‘enquanto’, para os intimos)
Do .. While (ou repita, se preferir)
E por último: for ... in ...

• Estrutura de repetição especialmente feita


para quando você quiser aplicar o mesmo
algoritmo em todos os elementos de um
vetor. Ex:

for( /*uma variável aqui*/ in /*um vetor aqui */){


/*seu código aqui*/
}
Exemplo de como utilizar:

var k = new Array(10,4,3,6,4,2);


for (var i in k){
k[i]*=2;
}
Efeitos em JavaScript

Autor: Jefferson da Silva Mira


Contato: [email protected]
Inserindo efeitos em eventos
• É possível utilizar a função onclick=“” para definir uma ação que
será executada:
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript pode ser executado em eventos. Click no botão:</p>

<button type="button" onclick="alert('Bem Vindo!')">Clique aqui!</button>


</body>
</html>
Lista de eventos possíveis
• onload - Ocorre na carga do documento. Ou seja, só ocorre no BODY do
documento.
• onunload - Ocorre na descarga (saída) do documento. Também só ocorre no BODY.
• onchange - Ocorre quando o objeto perde o focus e houve mudança de conteúdo.
Válido para os objetos Text, Select e Textarea.
• onblur - Ocorre quando o objeto perde o focus, independente de ter havido
mudança. Válido para os objetos Text, Select e Textarea.
• onfocus - Ocorre quando o objeto recebe o focus. Válido para os objetos Text,
Select e Textarea.
• Onclick/OnBblClick - Ocorre quando o objeto recebe um Click do Mouse. Válido
para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
• Onmouseover/onmounseout - Ocorre quando o ponteiro do mouse passa por
sobre o objeto.Válido apenas para Link.
• onselect - Ocorre quando o objeto é selecionado. Válido para os objetos Text e
Textarea.
• onsubmit - Ocorre quando um botão tipo Submit recebe um click do mouse.
Válido apenas para o Form.
• Onmousemove: Quanto o mouse passa por cima do objeto
DOM
O que hells é isso?

• Document Object Model (DOM);


• É a representação de todo o documento
HTML em forma de atributos e ‘nodes’;
• É possível acessar cada um destes atribus,
mudar ou deletar eles;
• É possível criar novos atributos ou adicionar
formatações.
• Tudo isso dinâmicamente!!!
Representação gráfica disso tudo
Mais um exemplo
Só mais um
Mas o que são estes objetos?
DOM
• Window object: Objeto que está no topo da arvore.
• Document object: A página HTML.
• Form object: É a definição das tags <form>...</form>. Utilizando
isto, é possível acessar as opções do form.
• Elementos do Form: Definição de todos os elementos do form.

• É possível acessar um atributo da minha página com o comando


document.getElementById(“ID do elemento”);
• É possível acessar o conteúdo de uma tag utilizando o comando
document.getElementById(“ID do elemento").innerHTML=“valor";
E para que saber disso?

• Para conseguir recuperar os atributos da


página, usando dois métodos principais:
– Document.getElementById(ID);
• Retorna o elemento que tem o ID passado;
– Document.getElementsByTagName(name);
• Retorna um array com todos os elementos com aquela
tag.
Document.getElementsByTagName(name)?

• O resultado desse método é um array que


pode ser acessado usando um contador de
array;
• Também é possível saber quantos elementos
desse tipo tem no documento olhando o
atributo .length;
E não é só isso!!

• Recuperando um atributo, possível acessar as


seguintes propriedades:
– nextSibling: Recupera o próximo atributo, do
mesmo level;
– previousSibling: Recupera o elemento anterior, do
mesmo level;
– parentNode: Recupera o ‘pai’ do atributo em
questão;
Atributos de elementos ‘pai’

• ChildNodes: Recupera uma lista de todos os


elementos que são ‘nodes’, mas não seus filhos;
• É possível acessar o elemento de um array
usando o contador ou item();
• hasChildNodes(): Verifica se o elemento tem
algum filho, retornando verdadeiro ou falso;
• E algumas propriedades rápidas:
– seuElemento.firstChild;
– SeuElemento.lastChild;
– seuElemento.childNodes[0];
Quer Exemplos disso?

1. JS - Exemplo Mudar Imagem de Fundo


2. JS - Mudar cor de fundo do texto ao clicar
Object Orientation (OO)
Objetos

• Um objeto é uma abstração de coisas da vida real;


• São definidos por propriedades e por métodos que alteram
as propriedades.

• Exemplo
– Objeto: Pessoa;
– Atributos:Altura, peso, profissao;
– Métodos: andar(),dormir(), trabalhar();

• Acessando um atributo: pessoa.peso;


• Acessando um método: pessoa.dormir();
Objetos

• Como criar o objeto:


var objeto_vazio = {};
var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};
Como recuperar os valores de objetos?

var curso = {
sigla:" K11 ",
nome:" Orientação a Objetos em Java “
};

//Recuperando o valor usando ‘.’ (ponto)


document.write( curso.sigla );
//Recuperando o valor da mesma maneira que um array.
document.write( curso["sigla"]);

var sigla = "sigla";


document.write( curso[sigla]);
Alterando o valor de uma propríedade

var curso={sigla:"PRW",nome:"Programação WEB"};

//Alterando o valor dos atributos


curso.sigla="Prog WEB";
curso.nome="Programação WEB no Senai";

//Mostrando os valores na tela


document.write(curso.sigla);
document.write(curso.nome);
Removendo propriedades do Objeto

• Para se remover uma propriedade é possível utilizar a função


‘delete’:

var curso = { sigla:"Inf", nome:"informatica - WEB"};


// imprime Inf
document.write(curso.sigla);

document.write("<br>");
delete curso.sigla ;

// imprime undefined
document.write(curso.sigla);
E para saber se uma propriedade
existe?
• É possível verificar se uma propriedade existe em um
objeto usando o comando ‘in’.

var curso = { sigla : " Inf ", nome:"Informatica programação


WEB"};

// imprime true
document.write("sigla" in curso);

// imprime false
document.write("carga_horaria" in curso);
Métodos

• Quando uma função é declarada dentro de um objeto, ela é


chamada de método.
//Definindo o objeto com a função
var conta = {
saldo : 0,
deposita : function ( valor ) {
this . saldo += valor ;
}
}

//Invocando o método
conta.deposita(100) ;
document.write(conta.saldo);
Objetos em JavaScript

• Objetos Internos(String, date, etc);

• Objetos de Browser (window, document);

• Objetos Personalizados;
Objetos e Tipos primitivos

• Tipos Primitivos
– Boolean, Number, String

• Objetos JavaScript
– Object
– Bollean
– Number
– String
– Array
– Date
– Math
– RegExp
Objeto Math
O que é isso?
• Objeto criado apenas para facilitar a utilização de números.

• Contém diversas funções:


– X= Math.abs(valor); - Retorna o valor absoluto do número passado
como parâmetro;
– X = Math.ceil(valor); - Retorna o valor inteiro superior ao valor passado
como parâmetro;
– X = Math.floor(valor); - Retorna o inteiro inferior ao número passado
como parâmetro;
– X = Math.round(valor); - Arredonda o número ao inteiro mais próximo;
– X = Math.max(valor1,valor2); - Retorna o maior valor dos dois números
passados;
– X = Math.min(valor1,valor2); - Retorna o menor valor dos dois númeos
passados;
Objeto Date
O que é

• Objeto que contém todas as informações do


computador que está sendo utilizado;

• O seguinte código imprimirá a data e a hora


atual do sistema:
var data = new Date();
document.write(data.getHour());
Métodos úteis

• getYear(): Retorna dois últimos digitos do ano;


• getMonth(): Retorna número do mês (0 – 11);
• getDate(): Retorna o dia do mês (1 - 31);
• getDay(): Retorna do dia da semana (0 - 6);
• getHours(): Retorna a hora do objeto (0 - 23);
• getMinutes(): Retorna os minutos do objeto (0-
59);
• getSeconds(): Retorna os segndos (0 – 59);
Objeto String
O que é

• Objeto utilizado para a manipulação de


caracteres e lista de caracteres.
O que eu posso fazer com isso?

length: É um inteiro que representa o comprimento da cadeia


de caracteres;
charAt(): método que retorna um caractere que está na
posição especificada;
indexOf(): Retorna a posição de uma cadeia parcial de
caracteres;
lastIndexOf(): retorna a posição de uma cadeia parcial a partir
de uma posição determinada;
substring(x,y): Retorna uma String parcial situada entre as
posições x e y-1;
toLowerCase(): Transforma todas as letras em minúsculas;
toUpperCase(): Transforma todas as letras em maiúsculas.
Apêndice
Palavras Reservadas
A abstract
B boolean, break, byte
C case, catch, char, class, const, continue
D default, do, double
E else, extends
F false, final, finally, float, for, function
G goto
I if, implements, import, in, instanceof, int, interface
L long
N
native, new, null
P package, private, protected, public
R return
S short, static, super, switch, synchronized
T this, throw, throws, transient, true, try
V var, void
W while, with
Links
• http://pt.wikipedia.org/wiki/JavaScript
• http://wbruno.com.br/javascript-puro/afinal-como-e-orientacao-a-
objetos-em-javascript-exemplos/
• http://www.learn-javascript-tutorial.com/JavaScriptBasics.cfm
• http://www.javascript-tutorial.com.br/content-15.html
• http://www.truquesedicas.com/tutoriais/javascript/
• http://imasters.com.br/artigo/21197/javascript/entendendo-arrays-
no-javascript/
• http://www.slideshare.net/csantos/a09-labmm3-javascript-
estruturas-de-repetio
• http://www.phpied.com/3-ways-to-define-a-javascript-class/

Você também pode gostar