Iniciando com JavaScript - Guia Completo

Iniciando com JavaScript
Romualdo André da Costa
Analista de TI - UFRB

● Motociclista viajante
● Engenheiro de Computação UEFS
● GDG Feira de Santana
● JS Day Brasil
● Feira de Santana e Cruz das Almas

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

Um pouco de história
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

Declarando uma variável
● 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=8;
floatNumber=3.14;
name=”JS Day Brasil”;
isPunkDead=false;
var spaceShip;

● 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
let moto={
cilindrada: 250,
ano: 2012,
acelera(){
console.log("vvrrruuuummmmm");
}
}

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
www.codecademy.com
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
https://www.caelum.com.br/apostila-html-css-javascript/

www.programadorfeirense.com.br/blog

https://www.facebook.com/fsagdg/
https://www.facebook.com/devfsa/
https://www.facebook.com/jsdaybr
https://twitter.com/jsdaybr

Iniciando com JavaScript - Guia Completo

Iniciando com JavaScript - Guia Completo

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Iniciando com JavaScript - Guia Completo

Similar a Iniciando com JavaScript - Guia Completo (20)

Más de Romualdo Andre

Más de Romualdo Andre (16)

Último

Último (20)

Iniciando com JavaScript - Guia Completo