JavaScript Básico - Guia Completo

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

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 Mocha, depois LiveScript e
ﬁnalmente JavaScript.

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 implementações um pouco diferêntes.
Esses problemas são “sentidos” até hoje.

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

“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.

JavaScript
no browser e além!
Por muito tempo o JavaScript ﬁcou conhecido apenas
como a linguagem client-side da Web

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

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

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 evita que outros
programadores falem mal da sua mãe.
// Comentários em uma linha
/*
Comentários com multiplas linhas
*/

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";

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’];

=, +=, -=, +, -, ++, --,
/, /=, *, *=, %
• 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

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.

true / false
true // true
false // false
"peixe" // true
"" // false
"0" // true
0 // false
1 // true
2 // true
null // false
undefined // false

==, ===, !=, !==, >, >=,
<, <=, !, !!, &&, ||

==
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 // true
"div" != "span" && 7 >= 6 // true

|| (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.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
}

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

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

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 = "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 );

while
var valor = 0;
var incremento = 0.5;
var maximo = 100;
while ( valor < maximo ) {
valor = valor + incremento;
}
console.log( valor );
// 100

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 ainda é " + periodo;

JavaScript Básico - Guia Completo

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a JavaScript Básico - Guia Completo

Semelhante a JavaScript Básico - Guia Completo (20)

JavaScript Básico - Guia Completo