Iniciando com javaScript 2017

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 2017

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Iniciando com javaScript 2017

Ähnlich wie Iniciando com javaScript 2017 (20)

Mehr von Romualdo Andre

Mehr von Romualdo Andre (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Iniciando com javaScript 2017