Carregar apresentação
A apresentação está carregando. Por favor, espere
1
JavaScript Promoção: PET-SI Mini-curso de introdução a JavaScript
Ministrantes: Rodrigo Comassetto da Silva Rodrigo Castro Gil Leonardo Nicorena
2
Aula 02 – Sintaxe básica Váriaveis: Possuem tipagem dinâmica, assumem o tipo do valor recebido: ... var i = 0; i++; alert(i); i = “10 string”; i = parseInt(i); document.write(i);
3
Aula 02 – Sintaxe básica Operadores básicos: “&&” - AND “||” - OR
“+” - Soma/concatenação “-” - Subtração “*” - Multiplicação “/” - Divisão “==” – Igualdade “!=” – Diferença “=” - Atribuição “!” - Negação “>” - Maior “<” - Menor “%” - Mod
4
Aula 02 – Sintaxe básica Operadores condicionais e laços de repetição: if (...) {...} else {...} switch(...) {...} for(...) {...} while(...) {...} do ... While(...) {...} (...)?(...):(...)
5
Aula 02 – Sintaxe básica Funções de :
6
l = Array(“a”,”b”,”c”,”d”); alert(l); alert(l.push(“e”));
Aula 02 – Sintaxe básica Listas: Var l = new Array(); l = Array(“a”,”b”,”c”,”d”); alert(l); alert(l.push(“e”)); alert(l.pop()); alert(l.slice(0,3)); alert(l.splice(2,3)); l['a'] = 3; alert(l['a']);
7
Listas outras funções:
Aula 02 – Sintaxe básica Listas outras funções: concat() Concatena dois os mais arrays (novo array) join() Concatena um array em uma string reverse() Inverte um array shift() Remove o primeiro elemento sort() Ordena os elementos do array toString()Converte o array para string unshift() Adiciona elementos no nicio do array valueOf() Retorna o valor primitivo do array
8
abs(x) Retorna o valor absoluto de x
Aula 02 – Sintaxe básica Função interna Math: abs(x) Retorna o valor absoluto de x ceil(x) Arredonda o valor de x para cima cos(x) Retorna o cosseno de x (x em radianos) floor(x) Arredonda para baixo log(x) Retorna o logaritmo natural de x max(x,y,z,...,n) Retorna o maior valor min(x,y,z,...,n) Retorna o menor valor pow(x,y) Retorna o valor de x elevado na y random() Retorna um numero randômico entre 0 e 1 round(x) Arredonda x para o inteiro mais próximo sin(x) Retorna o seno de x (x em radianos) sqrt(x) Retorna a raíz quadrada de x tan(x) Retorna a tangente do ângulo x
9
Funções de cast e verificação: escape(x) Encoda uma string x
Aula 02 – Sintaxe básica Funções de cast e verificação: escape(x) Encoda uma string x eval(x) Analisa se é código script e o executa isFinite(x) Analisa se o x é um numero finito isNaN(x) Retorna verdadeiro se x não é um número Number(x) Converte um objeto x para um número parseFloat(x) Converte uma string para número float parseInt(x) Converte uma string para número inteiro String(x) Converte um objeto para string unescape(x) Decoda uma string x
10
v.charAt(x) Retorna o char da posição x
Aula 02 – Sintaxe básica Funções de string: v.charAt(x) Retorna o char da posição x v.charCodeAt(x) Retorna o Unicode do char na posição x v.concat(x) Junta duas ou mais strings v.fromCharCode(x) Converte Unicode em char v.IndexOf(x) Retorna a posição da primeira ocorrência de x em uma string v.lastIndexOf(x)Retorna a posição da última ocorrência de x em uma string v.replace(x,y) Procura x em v e substitui por y v.substr(x,y) Retorna o pedaço de v que inicia em x e tem tamnho y substring(x,y) Retorna o valor de v que inicia em x e termina em y toLowerCase(x) Converte x para minúsculo toUpperCase(x) Converte x para maiúsculo
11
Aula 02 – Revisão HTML Tags : são marcadores usados para indicar o inicio e o fim de um elemento, sempre iniciando com “<” e terminando com “>” Sendo que para iniciar um elemento temos “<elemento>” e para finalizar temos “</elemento>” para elementos vazios usamos “<elemento />”. Tags não são case sensitive, mas é uma boa prática usá-las em minúsculo. Ex: <html> <body> <input type=‘button’ value=‘oi’ onclick=“((this.value==‘oi’)?’fulano’:’oi’);” /> </body> </html>
12
Formulários: a tag <form> indica o início de um formulário
Aula 02 – Revisão HTML Formulários: a tag <form> indica o início de um formulário propriedades: name=“” Nome do formulário id=“” Identificador do formulário action=“” Define o local para onde serão enviados os dados method=“” Método de envio dos dados (GET ou POST) GET: Os valores são enviados no endereço da página: POST:Os valores são enviados no cabeçalho do documento e não são visíveis ao usuário.
13
Aula 02 – Revisão HTML Elementos <input />: type=“” button, checkboxfile, hidden, image, password, radio, reset, submit, text Maxlength=“” Tamanho máximo da entrada do dado name=“” Nome do campo readonly Define se o campo é somente leitura size=“” Define o tamanho do campo
14
Aula 02 – Revisão HTML Elementos importantes: <div> <table> <thead>, <tbody> <tr>, <td> <tfoot> <span>
15
Aula 02 – Revisão HTML Atributo O evento ocore quando... IE F O W3C
onblur Um elemento perdo o foco 3 1 9 Yes onchange O conteúdo do objeto eh mudado onclick No clique do mouse ondblclick No duplo clique do mouse 4 onerror Quando um erro ocorre onfocus Quando um elemento recebe o foco onkeydown Uma tecla é pressionada No
16
Aula 02 – Revisão HTML Atributo O evento ocore quando... IE F O W3C
onkeypress Uma tecla é pressionada ou mantida pressionada 3 1 9 Yes onkeyup Uma tecla é despressionada onload Ao terminar de carregar a pagina onmousedown Um botao do mouse é pressionado 4 onmousemove Quando o mouse eh movido onmouseout Quando o ponteiro do mouse sai do objeto onmouseover Quando o mouse está encima do objeto onmouseup Quando um botao do mouse é despressionado onresize Quando uma janela ou frame é redimensionada onselect Quando o texto é selecionado onunload Quando fechamos a pagina
17
Aula 02 – Exercícios: Criar um formulário com três campos de tipo texto, quatro campos de tipo numérico, um campo de texto do tipo <textarea> que permita no máximo a entrada de 150 caracteres , todos os campos devem possuir verificação se os dados correspondem ao pedido. Após a leitura os dados devem ser mostrados na mesma página sem envio dos dados apenas usando JavaScript para mostrar os resultados formatados em um <div>.
Apresentações semelhantes
