JavaScript for Beginners
Upcoming SlideShare
Loading in...5
×
 

JavaScript for Beginners

on

  • 4,697 views

JavaScript from the ground up.

JavaScript from the ground up.

Sintaxe, boas práticas, metodologias e outras informações úteis.

Statistics

Views

Total Views
4,697
Views on SlideShare
4,540
Embed Views
157

Actions

Likes
4
Downloads
141
Comments
0

2 Embeds 157

http://developers.blogs.sapo.pt 143
http://www.slideshare.net 14

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript for Beginners JavaScript for Beginners Presentation Transcript

  • Sapo Sessions #2 JavaScript for Beginners Sintaxe, boas práticas, metodologias e outras informações úteis. Pedro Eugénio peugenio@co.sapo.pt http://igeni.us
  • Sapo Sessions #2: Javascript for Beginners Sequência 1. Bem-vindo ao mundo Javascript biografia, javascript is not java!, hello world! 2. O básico variáveis, operadores, estruturas de controle, funções, objectos e eventos 3. O passo seguinte DOM
  • Sapo Sessions #2: Javascript for Beginners 1. Bem-vindo Com que objectivo? Efeitos Animações Manipulação Validação RIA
  • Sapo Sessions #2: Javascript for Beginners 1.1 História do Javascript ECMA-262: é uma especificação que serve de base para o javascript e jscript } ECMAScript: é a linguagem de scripts padronizada pelo ECMA-262 Tanto a tecnologia JavaScript 1990 - Inicio da mudança quanto a JScript são compatíveis com ECMAScript, porém cada um disponibiliza recursos adicionais Netscape - Livescript não descritos na especificação ECMA. IE - JScript Javascript 1996 - ECMA ECMAScript ECMA-262
  • Sapo Sessions #2: Javascript for Beginners 1.2 Javascript is not Java!!! Whhhhhhhhhaaaaaaaaaatttt? Só a sintaxe é semelhante! Duas companhias diferentes Netscape e Sun Java precisa de uma JVM Javascript corre directamente no browser
  • Sapo Sessions #2: Javascript for Beginners 1.3 Hello World <!DOCTYPE html PUBLIC quot;-/ /W3C/ /DTD XHTML 1.0 Transitional/ /ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html lang=quot;ptquot;> <head> <title>Sapo Sessions - JavaScript</title> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;css/style.cssquot; media=quot;screenquot; /> </head> <body onload=quot;alert('Hello World!')quot;> <h1>Sapo Sessions: Javascript for Beginners</h1> <h2>Hello World!</h2> </body> </html>
  • Sapo Sessions #2: Javascript for Beginners 1.3 Hello World <body onload=”alert(‘Hello World!’);”> body onload=”DON’T” HTML e código Javascript juntos porquê? A forma correcta script src=”helloWorld.js”
  • Sapo Sessions #2: Javascript for Beginners Sequência 1. Bemvindo ao mundo Javascript biografia, javascript is not java!, hello world! 2. O básico variáveis, operadores, estruturas de controle, funções, objectos e eventos 3. O passo seguinte DOM
  • Sapo Sessions #2: Javascript for Beginners 2. O básico Variáveis e Tipos Operadores Estruturas de controle Funções e Objectos Eventos
  • Sapo Sessions #2: Javascript for Beginners 2.1 Variáveis e Tipos As variáveis em javascript não têm tipo fixo Qualquer valor pode ser guardado numa variável typeof variavel diz-nos o tipo da variável
  • Sapo Sessions #2: Javascript for Beginners 2.1.1 Declaração de variáveis A visibilidade de uma variável depende da sua declaração var teste = “ola”; / variável local / teste = “ola”; / variável global /
  • Sapo Sessions #2: Javascript for Beginners 2.1.2 Convenções Maiusculas, minusculas, “_” e “$” teste e Teste são duas variáveis diferentes Não se podem usar palavras reservadas http://javascript.about.com/library/ blreserved.htm
  • Sapo Sessions #2: Javascript for Beginners 2.1.3 Tipos Primitivos São tratados e passados como valores Alguns permitem usar métodos quot;testequot;.toUpperCase();
  • Sapo Sessions #2: Javascript for Beginners 2.1.3.1 Boolean Dois valores possíveis var verdade = true; var falso = false;
  • Sapo Sessions #2: Javascript for Beginners 2.1.3.2 Numeric Pode-se usar variáveis do tipo Float ou Integer, mas são sempre tratadas como sendo do tipo Numeric var x = 10; var y = 25.3;
  • Sapo Sessions #2: Javascript for Beginners 2.1.3.3 String Strings e caracteres são ambas strings var nome = “Pedro”; var letra = “c”;
  • Sapo Sessions #2: Javascript for Beginners 2.1.4 Tipos Complexos Uma variável do tipo complexo é um Objecto É sempre passado por referência
  • Sapo Sessions #2: Javascript for Beginners 2.1.4.1 Arrays Um Array é uma lista de elementos Podem conter todo e qualquer tipo de valores var lista = [0,”teste”,false]; var lista = new Array( 0 , “teste” , false ); lista[1] = ? “teste”
  • Sapo Sessions #2: Javascript for Beginners 2.1.4.2 Objectos var objecto = new Object(); objecto.nome = “O meu objecto”; objecto.total = 20; objecto.init = function () { alert(“init”); }
  • Sapo Sessions #2: Javascript for Beginners 2.2 Operadores var total = 1 + 1; total += 1; total -= 1; total == 1; total === String(1);
  • Sapo Sessions #2: Javascript for Beginners 2.2.1 Aritmética somar, subtrair, multiplicar , dividir , resto da divisão +, -, * , / , %
  • Sapo Sessions #2: Javascript for Beginners 2.2.1 Aritmética: “+” O operador “+” pode ser usado em três situações diferentes: concatenação de strings adição converter strings para números Não é boa prática!!! É preferível usar o Object Number: Number(a) para converter de string para número
  • Sapo Sessions #2: Javascript for Beginners 2.2.2 Bitwise &, |, ^, ~, >>, <<, e >>> Tratam os argumentos como sendo binário e efectuam a operação especifica de seguida &, |, ^ efectuam as operações de: and, or e xor em cada bit individual ~ inverte todos os bits de um inteiro << e >> movem os bits assim como >>> mas este último não mantém o sinal da operação
  • Sapo Sessions #2: Javascript for Beginners 2.2.3 Assignment =, +=, -=, /=, %= Atribuem um valor a uma variável x = 10; Pode apenas alterar a referência ao objecto x = umaFuncao;
  • Sapo Sessions #2: Javascript for Beginners 2.2.4 Incrementadores ++ e -- Icrementam ou decrementam o valor de uma variável x++ ou x-- É o mesmo que dizer: Pega no valor de x e incrementa-lhe 1 Pega no valor de x e decrementa-lhe 1
  • Sapo Sessions #2: Javascript for Beginners 2.2.5 Comparação ==, !=, >, >=, <, <=, ===, !== Servem para comparar variáveis Se contêm, ou não, o mesmo valor Se o valor de uma é maior ou menor Se o valor e o tipo são iguais/diferentes
  • Sapo Sessions #2: Javascript for Beginners 2.2.6 Lógicos &&, || e ! Se a e (&&) b então... Se a ou (||) b então... Se não a (!a) então...
  • Sapo Sessions #2: Javascript for Beginners 2.2.7 O Operador: quot;? :quot; É útil para substituir longas linhas de programação if/then/else return ( a && b ) ? a : b
  • Sapo Sessions #2: Javascript for Beginners 2.3 Estruturas de controle Controlam a execução do código Decidem se o pedaço de código é executado ou não Permitem a execução repetida de pedaços de código
  • Sapo Sessions #2: Javascript for Beginners 2.3.1 If if( a == b ) { alert( “a tem o mesmo valor que b” ); } if( a == b ) { alert( “a tem o mesmo valor que b” ); } else { alert( “não têm o mesmo valor” ); }
  • Sapo Sessions #2: Javascript for Beginners 2.3.2 While while( x < 10 ) { alert( “estou-me a repetir” ); x++; / para podermos parar o ciclo / }
  • Sapo Sessions #2: Javascript for Beginners 2.3.3 Do...While... do { alert( “aqui vou eu outra vez” ); c += 1; } while( c < 10 );
  • Sapo Sessions #2: Javascript for Beginners 2.3.4 For for( var c = 0; c < 10; c++ ) { alert( “vai vai vai!!!” ); }
  • Sapo Sessions #2: Javascript for Beginners 2.3.5 Switch switch( option ) { case quot;femeaquot; : alert( quot;Fquot; ); break; case quot;machoquot; : alert( quot;Mquot; ); break; }
  • Sapo Sessions #2: Javascript for Beginners 2.3.5 Switch switch( option ) { case quot;femeaquot; : alert( quot;Fquot; ); break; case quot;machoquot; : alert( quot;Mquot; ); break; } ! E se não for macho ou femea?
  • Sapo Sessions #2: Javascript for Beginners 2.3.5 Switch switch( option ) { case quot;femeaquot; : alert( quot;Fquot; ); break; case quot;machoquot; : alert( quot;Mquot; ); break; default: alert( “outro” ); break; }
  • Sapo Sessions #2: Javascript for Beginners 2.4 Funções e Objectos Funções permitem partir o código em diferentes partes Objectos permitem estruturar o código de forma modular var myObj = new Object(); myObj.nome = ‘Pedro’; ou var myObj = { nome: ‘Pedro’ };
  • Sapo Sessions #2: Javascript for Beginners 2.4.1 Funções function helloWorld () { } Uma função var helloWorld = function () { } Uma função que se parece com o objecto que é de qualquer forma elem.onclick = function () { } Uma função anónima
  • Sapo Sessions #2: Javascript for Beginners 2.5 Eventos Um evento ocorre quando acontece algo na página do browser document loading mouse click mouse over ...
  • Sapo Sessions #2: Javascript for Beginners Sequência 1. Bemvindo ao mundo Javascript biografia, javascript is not java!, hello world! 2. O básico variáveis, operadores, estruturas de controle, funções, objectos e eventos 3. O passo seguinte DOM
  • Sapo Sessions #2: Javascript for Beginners 3. O passo seguinte Document Object Model (DOM) Exemplo do uso de javascript numa ferramenta poderosa Manipulação da estrutura HTML sem necessidade de fazer reload à página
  • Sapo Sessions #2: Javascript for Beginners 3.1 DOM
  • Sapo Sessions #2: Javascript for Beginners 3.1.1 Introdução Manipulação da estrutura HTML Alteração/Criação/Remoção de elementos Alteração do estilo de um elemento
  • Sapo Sessions #2: Javascript for Beginners 3.1.2 Pesquisar elemento Quero o elemento com id “eid” document.getElementById(“eid”); Quero todos os links da página document.getElementsByTagName(“a”);
  • Sapo Sessions #2: Javascript for Beginners 3.1.3 Alterar elemento Quero que o elemento com id igual a “caixa” tenha o valor “teste” var caixa = document.getElementById( ‘caixa’ ); caixa.value = “teste”;
  • Sapo Sessions #2: Javascript for Beginners 3.1.4 Adicionar elemento Quero criar um novo link na página var oLink = document.createElement(“a”); oLink.innerHTML = “mais um link”; oLink.href = “http://www.sapo.pt”; document.body.appendChild(oLink);
  • Sapo Sessions #2: Javascript for Beginners 3.1.5 Alterar o estilo do elemento Quero que a página agora fique com um background negro document.body.style.backgroundColor = “black”;
  • Sapo Sessions #2: Javascript for Beginners 3.1.6 Remover elemento Quero remover da página o elemento “elem” elem.parentNode.removeChild(elem);
  • Sapo Sessions #2: Javascript for Beginners 4. Aplicação: Modal Window
  • Sapo Sessions #2: Javascript for Beginners Perguntas? Pedro Eugénio email: peugenio@co.sapo.pt messenger: voxmachina@sapo.pt web: igeni.us
  • Sapo Sessions #2: Javascript for Beginners Recursos Javascript: http://www.w3schools.com/JS/ FireBug: http://getfirebug.com/ DOM: http://www.w3.org/DOM/
  • Sapo Sessions #2: Javascript for Beginners setTimeout( “endPresentation();” , 3000 );