javascript mini-curso de introdução a javascript promoção: pet-si ministrantes: rodrigo...
TRANSCRIPT
JavaScriptMini-curso de introdução a JavaScript
Promoção: PET-SIMinistrantes: Rodrigo Comassetto da Silva
Rodrigo Castro Gil Leonardo Nicorena
Aula 02 – Sintaxe básicaVáriaveis: Possuem tipagem dinâmica, assumem o tipo do
valor recebido:...var i = 0;i++;alert(i);i = “10 string”;alert(i);i = parseInt(i);document.write(i);...
Aula 02 – Sintaxe básicaOperadores básicos:“&&” - AND“||” - OR“+” - Soma/concatenação“-” - Subtração“*” - Multiplicação“/” - Divisão“==” – Igualdade“!=” – Diferença“=” - Atribuição“!” - Negação“>” - Maior“<” - Menor“%” - Mod
Aula 02 – Sintaxe básicaOperadores condicionais e laços de repetição:if (...) {...}else {...}
switch(...) {...}
for(...) {...}
while(...) {...}
do ... While(...) {...}
(...)?(...):(...)
Aula 02 – Sintaxe básicaFunções de :
Aula 02 – Sintaxe básicaListas: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);alert(l.splice(2,3));alert(l);l['a'] = 3;alert(l['a']);alert(l);
Aula 02 – Sintaxe básicaListas outras funções:concat() Concatena dois os mais arrays (novo
array)join() Concatena um array em uma stringreverse() Inverte um arrayshift() Remove o primeiro elemento sort() Ordena os elementos do arraytoString()Converte o array para stringunshift() Adiciona elementos no nicio do arrayvalueOf() Retorna o valor primitivo do array
Aula 02 – Sintaxe básicaFunção interna Math:abs(x) Retorna o valor absoluto de xceil(x) Arredonda o valor de x para cimacos(x) Retorna o cosseno de x (x em radianos)floor(x) Arredonda para baixo log(x) Retorna o logaritmo natural de xmax(x,y,z,...,n) Retorna o maior valormin(x,y,z,...,n) Retorna o menor valorpow(x,y) Retorna o valor de x elevado na yrandom() 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
Aula 02 – Sintaxe básicaFunções de cast e verificação:escape(x) Encoda uma string xeval(x) Analisa se é código script e o executaisFinite(x) Analisa se o x é um numero finitoisNaN(x) Retorna verdadeiro se x não é um númeroNumber(x) Converte um objeto x para um número parseFloat(x) Converte uma string para número floatparseInt(x) Converte uma string para número inteiroString(x) Converte um objeto para string unescape(x) Decoda uma string x
Aula 02 – Sintaxe básicaFunções de string:v.charAt(x) Retorna o char da posição x v.charCodeAt(x) Retorna o Unicode do char na posição
xv.concat(x) Junta duas ou mais stringsv.fromCharCode(x) Converte Unicode em char v.IndexOf(x) Retorna a posição da primeira
ocorrência de x em uma stringv.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 yv.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 ytoLowerCase(x) Converte x para minúsculo toUpperCase(x) Converte x para maiúsculo
Aula 02 – Revisão HTMLTags : 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>
Aula 02 – Revisão HTMLFormulários: a tag <form> indica o início de um formulário propriedades:name=“” Nome do formulárioid=“” Identificador do formulárioaction=“” 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: http://www.teste.com?v1=valor1&v2=valor2POST:Os valores são enviados no cabeçalho do documento e não são visíveis ao usuário.
Aula 02 – Revisão HTMLElementos <input />:type=“” button, checkboxfile, hidden, image, password, radio, reset, submit, textMaxlength=“” Tamanho máximo da entrada do dadoname=“” Nome do camporeadonly Define se o campo é somente
leiturasize=“” Define o tamanho do campo
Aula 02 – Revisão HTMLElementos importantes:<div><table>
<thead>,<tbody><tr>, <td><tfoot>
<span>
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 3 1 9 Yes
onclick No clique do mouse 3 1 9 Yes
ondblclick No duplo clique do mouse 4 1 9 Yes
onerror Quando um erro ocorre 4 1 9 Yes
onfocus Quando um elemento recebe o foco 3 1 9 Yes
onkeydown Uma tecla é pressionada 3 1 No Yes
Aula 02 – Revisão HTMLAtributo O evento ocore quando... IE F O W3C
onkeypress Uma tecla é pressionada ou mantida pressionada 3 1 9 Yes
onkeyup Uma tecla é despressionada 3 1 9 Yesonload Ao terminar de carregar a pagina 3 1 9 Yesonmousedown Um botao do mouse é pressionado 4 1 9 Yesonmousemove Quando o mouse eh movido 3 1 9 Yesonmouseout Quando o ponteiro do mouse sai do objeto 4 1 9 Yesonmouseover Quando o mouse está encima do objeto 3 1 9 Yes
onmouseup Quando um botao do mouse é despressionado 4 1 9 Yes
onresize Quando uma janela ou frame é redimensionada 4 1 9 Yes
onselect Quando o texto é selecionado 3 1 9 Yesonunload Quando fechamos a pagina 3 1 9 Yes
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>.