Carlos Roberto Gomes Junior
http://carlosroberto.name
http://github.com/carlosrberto
JavaScript
Básico
O Que é ?
É uma linguagem de programação
interpretada utilizada inicialmente
apenas no lado cliente de uma aplicação web
Origem
Surgiu em 1995, desenvolvida por Brendan Eich
enquanto trabalhava na antiga Netscape, inicialmente
tinha o nome de ...
Inicialmente não havia um padrão na linguagem,
cada browser possuia uma implementação
com algumas diferenças.
JScript
A Microsoft para competir com a Netscape
criou o JScript.
As duas linguagens eram bem semelhantes
mas com implemen...
Em 1996 a Netscape envia o JavaScript para Ecma
como forma de sugerir um padrão
de implementação da linguagem.
Assim surge...
“JavaScript” !== “Java”
A mudança de nome de LiveScript para JavaScript
ocurreu quando a Netscape implementou o Java
pela ...
JavaScript
no browser e além!
Por muito tempo o JavaScript ficou conhecido apenas
como a linguagem client-side da Web
No início faziamos apenas validações de formulário
e abriamos popups.
HTML 5
• Canvas
• Canvas 3D
• Websockets
• Workers
• Audio
• Video
• User Media
• History
• Gamepad
• Device Orientation
• Geoloc...
Rhino
NodeJS
Titanium SDK
Tide SDK
Firefox OS
Inserindo em um
documento
<script>
var myVar = "value";
</script>
<script src="file.js"></script>
Comentários
Crie o costume de comentar seu código.
Isso lhe ajuda a manter o código organizado,
facilita a manutenção e ev...
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çõe...
Tipos deVariáveis
// String
var car = “Porsche”
// Number
var weight = 2000;
// Function
var sum = function(a, b) {
return...
Operadores
Matemáticos
=, +=, -=, +, -, ++, --,
/, /=, *, *=, %
• 2 + 3; // => 3
• 2 - 2; // => 0
• a = 2;
• a++ // soma 1;
• a -- // subtrai 1;
...
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 ...
true / false
true // true
false // false
"peixe" // true
"" // false
"0" // true
0 // false
1 // true
2 // true
null // fa...
==, ===, !=, !==, >, >=,
<, <=, !, !!, &&, ||
==
2 == 2 // true
"agua" == "água" // false
"1kg de algodão" == "1kg de ferro" // false
!=
3 != 3 // false
"lua" != "sol" // true
>, >=, <, <=
20 > 1 // true
3 > 6 // false
7 >= 2 // true
10 < 5 // false
12 <= 12 // true
== vs ===, != vs !==
2 == "2" // true
2 === "2" // false
0 == false // true
0 === false // false
7 !== "7" // true
&& (AND)
true && true // true
true && false // false
false && false // false
false && true && true // false
3 < 5 && 7 > 2...
|| (OR)
7 || 4 // 7 (true)
false || 2 // 2 (true)
"maça" == "laranja" || 2 == 2 // true
! (not)
!3 // false
!("a" != "a") // true
2 == 2 && !(2 < 2) // true
!!
Converte o valor para true/false
!!"banana" // true
!!"0" // true
!!"" // false
!!null // false
Estruturas de Controle
• if, else if, else
• for
• switch
• while
• operador ternário (condição ? a : b)
if, else if, else
Testa uma condição e executa um comando
caso verdadeiro e/ou falso
var isiPad = navigator.userAgent.matc...
for
Executa uma instrução até que
a condição não seja mais satisfeita
var frutas = ["laranja", "goiaba", "açaí"];
var tota...
for in
Percorre as propriedades de um objeto
var carro = {
ano: 2012,
marca: "volkswagen",
cavalos: 110
}
for ( propriedad...
switch
Executa uma instrução de acordo com valor passado
var dia = new Date().getDay(); // numero do dia da semana 0-6
var diaDaSemana;
switch ( dia ) {
case 0:
diaDaSemana = "Dom...
while
var valor = 0;
var incremento = 0.5;
var maximo = 100;
while ( valor < maximo ) {
valor = valor + incremento;
}
cons...
Operador ternário
condicao ? “valor se verdadeiro” : “valor se falso”
var data = new Date();
var hora = date.getHours();
var periodo = hora < 18 ? "dia" : "noite";
var frase = "Por enquanto ai...
Livros Recomendados
Upcoming SlideShare
Loading in...5
×

Introdução ao JavaScript

789

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
789
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
75
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×