Carlos Roberto Gomes Junior
http://carlosroberto.namehttp://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 Eichenquanto trabalhava na antiga Netscape, inicialmente
tinha o nome de Mocha, depois LiveScript efinalmente JavaScript.
Inicialmente não havia um padrão na linguagem,cada browser possuia uma implementação
com algumas diferenças.
JScriptA 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 Ecmacomo forma de sugerir um padrão de implementação da linguagem.
Assim surge o ECMAScript que é umapadronização que os desenvolvedores
devem seguir ao implementar a linguagem.
Padronização
“JavaScript” !== “Java”
A mudança de nome de LiveScript para JavaScriptocurreu 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 ficou conhecido apenascomo a linguagem client-side da Web
No início faziamos apenas validações de formulárioe abriamos popups.
HTML 5
• Canvas
• Canvas 3D
• Websockets
• Workers
• Audio
• Video
• User Media
• History
• Gamepad
• Device Orientation
• Geolocation
• Application Cache
• Web SQL
• etc.............
HTML5 JavaScript APIs
Rhino
NodeJS
Titanium SDK
Tide SDK
Firefox OS
Inserindo em um documento
<script>var myVar = "value";</script>
<script src="file.js"></script>
ComentáriosCrie 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 de Variáveis// Stringvar car = “Porsche”
// Numbervar weight = 2000;
// Functionvar sum = function(a, b) { return a+b;};
// Objectvar triangle = { sideA: 60, sideB: 30, sideC: 90};
// Arrayvar vocals = [‘a’, ‘e’, ‘i’, ‘o’, ‘u’];
Operadores Matemáticos
=, +=, -=, +, -, ++, --, /, /=, *, *=, %
• 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ógicosOs operadores lógicos são a base das linguágensde 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 / falsetrue // truefalse // false"peixe" // true"" // false"0" // true0 // false1 // true2 // truenull // falseundefined // false
==, ===, !=, !==, >, >=, <, <=, !, !!, &&, ||
==
2 == 2 // true"agua" == "água" // false"1kg de algodão" == "1kg de ferro" // false
!=
3 != 3 // false"lua" != "sol" // true
>, >=, <, <=
20 > 1 // true3 > 6 // false7 >= 2 // true10 < 5 // false12 <= 12 // true
== vs ===, != vs !==
2 == "2" // true2 === "2" // false0 == false // true0 === false // false7 !== "7" // true
&& (AND)
true && true // truetrue && false // falsefalse && false // falsefalse && true && true // false3 < 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") // true2 == 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, elseTesta 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}
forExecuta 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 inPercorre 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-6var 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;
Livros Recomendados