Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introdução ao JavaScript

1,168 views

Published on

Introdução ao JavaScript, história, características da linguagem e lógica de programação.

Published in: Technology
  • Be the first to comment

Introdução ao JavaScript

  1. 1. Carlos Roberto Gomes Junior http://carlosroberto.name http://github.com/carlosrberto
  2. 2. JavaScript Básico
  3. 3. O Que é ? É uma linguagem de programação interpretada utilizada inicialmente apenas no lado cliente de uma aplicação web
  4. 4. Origem Surgiu em 1995, desenvolvida por Brendan Eich enquanto trabalhava na antiga Netscape, inicialmente tinha o nome de Mocha, depois LiveScript e finalmente JavaScript.
  5. 5. Inicialmente não havia um padrão na linguagem, cada browser possuia uma implementação com algumas diferenças.
  6. 6. JScript A Microsoft para competir com a Netscape criou o JScript. As duas linguagens eram bem semelhantes mas com implementações um pouco diferêntes. Esses problemas são “sentidos” até hoje.
  7. 7. Em 1996 a Netscape envia o JavaScript para Ecma como forma de sugerir um padrão de implementação da linguagem. Assim surge o ECMAScript que é uma padronização que os desenvolvedores devem seguir ao implementar a linguagem. Padronização
  8. 8. “JavaScript” !== “Java” A mudança de nome de LiveScript para JavaScript ocurreu quando a Netscape implementou o Java pela primeira vez em seu navegador. Muitos acreditam que a semelhança de nomes foi proposital de forma a aproveitar a fama da ainda jovem Java.
  9. 9. JavaScript no browser e além! Por muito tempo o JavaScript ficou conhecido apenas como a linguagem client-side da Web
  10. 10. No início faziamos apenas validações de formulário e abriamos popups.
  11. 11. HTML 5
  12. 12. • Canvas • Canvas 3D • Websockets • Workers • Audio • Video • User Media • History • Gamepad • Device Orientation • Geolocation • Application Cache • Web SQL • etc............. HTML5 JavaScript APIs
  13. 13. Rhino
  14. 14. NodeJS
  15. 15. Titanium SDK
  16. 16. Tide SDK
  17. 17. Firefox OS
  18. 18. Inserindo em um documento <script> var myVar = "value"; </script> <script src="file.js"></script>
  19. 19. Comentários Crie o costume de comentar seu código. Isso lhe ajuda a manter o código organizado, facilita a manutenção e evita que outros programadores falem mal da sua mãe. // Comentários em uma linha /* Comentários com multiplas linhas */
  20. 20. Variáveis Devem começar apenas com letras de a-z,A-Z, _, $ Variáveis utilizam um espaço na memória para guardar informações. var idade = 27; var name = "carlos"; var _city = "ribeirão"; var _address_2 = "street name"; var $ = "dolar";
  21. 21. Tipos deVariáveis // String var car = “Porsche” // Number var weight = 2000; // Function var sum = function(a, b) { return a+b; }; // Object var triangle = { sideA: 60, sideB: 30, sideC: 90 }; // Array var vocals = [‘a’,‘e’,‘i’,‘o’,‘u’];
  22. 22. Operadores Matemáticos
  23. 23. =, +=, -=, +, -, ++, --, /, /=, *, *=, % • 2 + 3; // => 3 • 2 - 2; // => 0 • a = 2; • a++ // soma 1; • a -- // subtrai 1; • c = 4; • c += 2 // c = c + 2 • c -= 2 // c = c + 2 • 10/2; // => 5 • 3*9; // => 27 • 7%3; // => 1
  24. 24. Operadores Lógicos Os operadores lógicos são a base das linguágens de programação sem eles nada seria posssível. São eles que determinam o comportamento de um programa, mudam suas ações. Veremos que tudo se resume em “verdadeiro” e “falso”, 0 e 1.
  25. 25. true / false true // true false // false "peixe" // true "" // false "0" // true 0 // false 1 // true 2 // true null // false undefined // false
  26. 26. ==, ===, !=, !==, >, >=, <, <=, !, !!, &&, ||
  27. 27. == 2 == 2 // true "agua" == "água" // false "1kg de algodão" == "1kg de ferro" // false
  28. 28. != 3 != 3 // false "lua" != "sol" // true
  29. 29. >, >=, <, <= 20 > 1 // true 3 > 6 // false 7 >= 2 // true 10 < 5 // false 12 <= 12 // true
  30. 30. == vs ===, != vs !== 2 == "2" // true 2 === "2" // false 0 == false // true 0 === false // false 7 !== "7" // true
  31. 31. && (AND) true && true // true true && false // false false && false // false false && true && true // false 3 < 5 && 7 > 2 // true "div" != "span" && 7 >= 6 // true
  32. 32. || (OR) 7 || 4 // 7 (true) false || 2 // 2 (true) "maça" == "laranja" || 2 == 2 // true
  33. 33. ! (not) !3 // false !("a" != "a") // true 2 == 2 && !(2 < 2) // true
  34. 34. !! Converte o valor para true/false !!"banana" // true !!"0" // true !!"" // false !!null // false
  35. 35. Estruturas de Controle • if, else if, else • for • switch • while • operador ternário (condição ? a : b)
  36. 36. if, else if, else Testa uma condição e executa um comando caso verdadeiro e/ou falso var isiPad = navigator.userAgent.match(/iPad/); var isChrome = navigator.userAgent.match(/Chrome/); if( isiPad ) { // faz algo se for ipad } else if ( isChrome ) { // faz algo se for chrome } else { // faz algo caso não seja iPad nem Chrome }
  37. 37. for Executa uma instrução até que a condição não seja mais satisfeita var frutas = ["laranja", "goiaba", "açaí"]; var totalFrutas = frutas.length; var frase; for (var i = 0; i < totalFrutas i++) { frase = frutas[i] + " é o item " + i + " da lista"; console.log( frase ); } // laranja é o item 0 da lista // goiaba é o item 1 da lista // açaí é o item 2 da lista
  38. 38. for in Percorre as propriedades de um objeto var carro = { ano: 2012, marca: "volkswagen", cavalos: 110 } for ( propriedade in carro ) { console.log( propriedade ); } // ano // marca // cavalos for ( propriedade in carro ) { console.log( propriedade + " : " + carro[propriedade] ); } // ano : 2012 // marca : "volkswagen" // cavalos : 110
  39. 39. switch Executa uma instrução de acordo com valor passado
  40. 40. var dia = new Date().getDay(); // numero do dia da semana 0-6 var diaDaSemana; switch ( dia ) { case 0: diaDaSemana = "Domingo"; break; case 1: diaDaSemana = "Segunda"; break; case 2: diaDaSemana = "Terça"; break; case 3: diaDaSemana = "Quarta"; break; case 4: diaDaSemana = "Quinta"; break; case 5: diaDaSemana = "Sexta"; break; case 6: diaDaSemana = "Sábado"; break; default: diaDaSemana = "Desconhecido"; break; } console.log( diaDaSemana );
  41. 41. while var valor = 0; var incremento = 0.5; var maximo = 100; while ( valor < maximo ) { valor = valor + incremento; } console.log( valor ); // 100
  42. 42. Operador ternário condicao ? “valor se verdadeiro” : “valor se falso”
  43. 43. var data = new Date(); var hora = date.getHours(); var periodo = hora < 18 ? "dia" : "noite"; var frase = "Por enquanto ainda é " + periodo;
  44. 44. Livros Recomendados

×