Império JavaScript

Império JavaScript
Romualdo André da Costa
Analista de TI - UFRB

Sumário
Um pouco de história
Características
Como isso funciona?
Declarando uma variável
Expressões
Template strings
Laços
Decisões
Arrays

Sumário
Destructuring assignment
Funções
Usando JavaScript
DOM
Interação entre JavaScript e DOM

No início as páginas eram estáticas

Brendan Eich

Mocha → LiveScript → JavaScript
Netscape 2.0: 1995
Baseado em ECMAScript

Características
Imperativa e Estruturada
Tipagem Dinâmica
Baseada em objetos
Funcional: funções são objetos de primeira classe.
Vários ambientes: web, desktop, servidor, IoT

Comece o nome com uma letra, _ ou $
Depois use qualquer letra, número, _, $
Evite as palavras reservadas
Escolha nomes significativos
CamelCase
Use $ e _ apenas com bom motivo: convenção utilizada em
algumas bibliotecas

episodes=7;
floatNumber=3.14;
name=”Skywalker”;
isPunkDead=false;
var starFighter;

const: significa que a variável não pode ser alterada.
let: variável pode ser alterada no algoritmo.
var: é a forma mais “fraca” de definir uma variável em
JavaScript.

Hoisting
foo = 2
var foo;
// é implicitamente entendido como:
var foo;
foo = 2;
hoisted(); // logs "foo"
function hoisted() {
console.log("foo");
}

Expressões
var scoop+=1;
var x=Math.random()*10;
var selic=10.15;
var isGood=selic>10;
var greeting=”Hello ”+name;

Template Strings
Antigamente
a=15;
b=19;
console.log(“Quinze é ”+(a+b));
Agora
console.log(`Quinze é ${a+b}`);

Laços
var enemys=10;
while(enemys>0){
console.log(`Restam ${enemys} inimigos do Império.`)
enemys=enemys-1;
}

Laços
for(let cups=1;cups<3;cups++){
console.log(‘Bebi ${cups} de cerveja.’);
}
alert(‘Não dirija’);

Decisões
var hour=8;
if(hour < 9){
alert('Chegou cedo!');
}
else if(hour == 9){
alert('na hora!');
}
else{
alert('Atrasado!');
}

Array
var sabores=new Array();
sabores[0]='chocolate';
sabores[1]='creme';
sabores[3]='limão';
var androids=[16,17,18,19,20,30,40,44,50,60,70,71];
var mix=['a',true,4.67];

Array
let iterable=[10,20,30];
for(let value of iterable){
console.log(value);
}
iterable.forEach(function (item,index,array){
console.log(item,index);
});

Arrays
var hunters=["Boba Fett","Jango Fett"];
var newLength=hunters.push("Bossk");
var last=hunters.pop();
var first=hunters.shift();
var newLength=hunters.unshift("Cad Bane");
var pos=hunters.indexOf("Cad Bane");
var removedHunter=hunters.splice(pos,1);
var shallowCopy=hunters.slice();

Destructuring assignment
var a,b,rest;
[a,b]=[1,2];
console.log(a,b);
[a,b,...rest]=[1,2,3,4,5];
console.log(a);
console.log(b);
console.log(rest);

Funções
function soma(a,b){
return a+b;
}
console.log(soma(3,4));
var pula=function (){
console.log('pulei!');
}
pula();

Funções
function compara(comparador){
var c=4,d=5;
console.log(comparador(c,d));
}
//função anônima
compara(function(a,b){return a<b});

Funções
//função anônima
compara(function (a, b) {
return a < b
});
compara((a, b) => a < b);

Funções
function fun1(...args){
console.log(args.length);
}
function fun2(a,b,..args){
console.log(args.length);
}

Funções
function funDefault(a=1,b=2){
console.log(a+b);
}

Objeto
var deathStar={
energy: 100,
model: 'DS-1 Orbital Battle Station',
shoot(){
console.log(" ,_~"""~-,n*---====*)------`,n |===========|n
`,---------,'n ~-.___.-~ ");
}
}

Usando JavaScript
O script pode ficar dentro do <head>
Referenciar um arquivo separado dentro do <head>
Colocar o script ou a referencia ao arquivo dentro do <body>
Exemplo nos arquivos hello.html e hello.js

Interação entre JavaScript e DOM
Ver arquivos hello.html e hello.js

Referências
Head First: HTML5 Programming
JavaScript: a bíblia
World Wide Web: Como programar
Site: www.codecademy.com
Site: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

Use o código JSDAY e ganhe 25% desconto em
todo o site da Novatec até dia 07/08/17.

www.programadorfeirense.com.br/blog

Império JavaScript

Mais conteúdo relacionado

Império JavaScript