introdução ao javascript

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