1. Carlos Roberto Gomes Junior
http://carlosroberto.name
http://github.com/carlosrberto

2. JavaScript
Básico

3. O Que é ?
É uma linguagem de programação
interpretada utilizada inicialmente
apenas no lado cliente de uma aplicação web

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. Inicialmente não havia um padrão na linguagem,
cada browser possuia uma implementação
com algumas diferenças.

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. 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. “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. JavaScript
no browser e além!
Por muito tempo o JavaScript ficou conhecido apenas
como a linguagem client-side da Web

10. No início faziamos apenas validações de formulário
e abriamos popups.

11. HTML 5

12. • Canvas
• Canvas 3D
• Websockets
• Workers
• Audio
• Video
• User Media
• History
• Gamepad
• Device Orientation
• Geolocation
• Application Cache
• Web SQL
• etc.............
HTML5 JavaScript APIs

13. Rhino

14. NodeJS

15. Titanium SDK

16. Tide SDK

17. Firefox OS

18. Inserindo em um
documento
<script>
var myVar = "value";
</script>
<script src="file.js"></script>

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. 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. 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. Operadores
Matemáticos

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. 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. true / false
true // true
false // false
"peixe" // true
"" // false
"0" // true
0 // false
1 // true
2 // true
null // false
undefined // false

26. ==, ===, !=, !==, >, >=,
<, <=, !, !!, &&, ||

27. ==
2 == 2 // true
"agua" == "água" // false
"1kg de algodão" == "1kg de ferro" // false

28. !=
3 != 3 // false
"lua" != "sol" // true

29. >, >=, <, <=
20 > 1 // true
3 > 6 // false
7 >= 2 // true
10 < 5 // false
12 <= 12 // true

30. == vs ===, != vs !==
2 == "2" // true
2 === "2" // false
0 == false // true
0 === false // false
7 !== "7" // true

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. || (OR)
7 || 4 // 7 (true)
false || 2 // 2 (true)
"maça" == "laranja" || 2 == 2 // true

33. ! (not)
!3 // false
!("a" != "a") // true
2 == 2 && !(2 < 2) // true

34. !!
Converte o valor para true/false
!!"banana" // true
!!"0" // true
!!"" // false
!!null // false

35. Estruturas de Controle
• if, else if, else
• for
• switch
• while
• operador ternário (condição ? a : b)

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. 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. 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. switch
Executa uma instrução de acordo com valor passado

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. while
var valor = 0;
var incremento = 0.5;
var maximo = 100;
while ( valor < maximo ) {
valor = valor + incremento;
}
console.log( valor );
// 100

42. Operador ternário
condicao ? “valor se verdadeiro” : “valor se falso”

43. var data = new Date();
var hora = date.getHours();
var periodo = hora < 18 ? "dia" : "noite";
var frase = "Por enquanto ainda é " + periodo;

44. Livros Recomendados