Introdução ao JavaScript

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;

Introdução ao JavaScript

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Introdução ao JavaScript

Introdução ao JavaScript