JavaScript Introdução

Introdução ao JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript ,[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] typeof (5); // number typeof ('some text'); // string typeof (true); // boolean typeof (new Object()); // object typeof (new Array()); // object typeof (varName); // undefined

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] >>> 0.1 + 0.2 0.30000000000000004

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] +'5' = 5 (number) '5' + 4 = 54 +'5' + 4 = 9 +'a' = NaN +'a' + 4 = NaN typeof(+'a' + 4); // number

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[email_address] <input type=”text” id=”inputform” value=”100” /> var val = document .getElementById('inputform').value; typeof(val); // string Number(val) * 0.20 = ... Number('aaa'); // NaN Number('123asd'); // NaN

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[email_address] parseInt('123aaa'); // 123 parseFloat('1.23bbb'); // 1.23 parseInt('08'); // 0 parseInt('08', 10); // 8 parseInt('FF', 16); // 255 parseInt('10', 2); // 2 parseInt('ab123'); // NaN var num = 12345.6789 num.toFixed(2); // 12345.68

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] Math.abs('-123'); // 123 Math.round('5.67'); // 6 Math.floor('5.67'); // 5 Math.random(); // 0 < x < 1 Math.log(1); // 0 Math.sin(Math.PI / 2); // 1 Math.sqrt(64); // 8 Math.pow(2, 4); // 16

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[email_address] var myVar = 1; typeof (myVar); // number myVar = String(myVar); ou myVar = myVar+''; typeof(myVar); // string

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] 'abcd'.charAt(2); // c 'abcd'.indexOf('c'); // 2 'abcda'.lastIndexOf(a); // 4 'abcda'.match(/(a|c)/); // [a,c,a] 'abcda'.replace(/(a|c)/g,'*'); // *b*d* 'abcd'.substring(0,2); // ab 'abcd'.substring(1,2); // b 'abcd'.substr(1,2); // bc 'aBCd'.toLowerCase(); // abcd 'aBCd'.toUpperCase(); // ABCD

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[email_address]

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[email_address] Boolean(true); // true Boolean(false); // false Boolean(123); // true Boolean('false'); // true Boolean(0); // false Boolean(1); // true !!(0); // false !!(1); // true !!('ab'); // true

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[email_address] var a = 1; var b; typeof(a); // number typeof(c); // undefined typeof(b); // undefined

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] Boolean( * ) // false

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[email_address]

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript Variáveis e tipos de variáveis ,[object Object],[email_address] var pessoa = { nome: 'Ze Manel', idade: 29, cidade: 'Lisboa', programa: function(){} }; pessoa nome idade cidade o que faz? (método) Ze Manel 29 Lisboa programa()

JavaScript Variáveis e tipos de variáveis ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript Variáveis e tipos de variáveis ,[object Object],[email_address]

JavaScript ,[object Object],[object Object],[object Object],[email_address] /* vou fazer um alert */ alert('Hello World'); // foi feito um alert('Hello World')

JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript Operadores ,[object Object],[object Object],[object Object],[object Object],[email_address] 2 + 3 // 5 '2' + 3 // 23 'a' + 2 + 3 // a23 +'2' + 3 // 5 2 + 3 + 'a' // 5a

JavaScript Operadores ,[object Object],[object Object],[object Object],[object Object],[email_address] (2 == 2) // true (2 != 3) // true (2 != 2) // false ('a' == 'a') // true (1 == true) // true (1 === true) // false

JavaScript Operadores ,[object Object],[object Object],[object Object],[object Object],[email_address] a = 5; b = null; (a && b) // null (b && a) // null

JavaScript Operadores ,[object Object],[object Object],[object Object],[object Object],[email_address] a = 5; b = null; c = null; (a || b) // 5 (b || c || a) // 5 (b || c) // null

JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript statements ,[object Object],[email_address] for( var i=0; i < 5; i++) { alert(i); } // iterar num array for( var i=0; i < myArray.length; i++) { myArray[i]; ... } // iterar num objecto for( var i in myObject) { if(myObject.hasOwnProperty(i)) { /* verificar sempre se ”i” é propriedade do objecto */ myObject[i]; ... } }

JavaScript statements ,[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] loop : for(var i=0; i < 5; i++) { for(var j=0; j < 2; j++) { if(i == 3) { break loop ; } alert(j +' => '+ i); } } alert('final'); break loop ; 0 => 0 1 => 0 0 => 1 1 => 1 0 => 2 1 => 2 final break; 0 => 0 1 => 0 0 => 1 1 => 1 0 => 2 1 => 2 0 => 4 1 => 4 final

JavaScript statements ,[object Object],[object Object],[email_address] throw {name:'nome_da_excepcao', message:'razão da excepcão'} // ou throw new Error('razão');

JavaScript statements ,[object Object],[object Object],[email_address] function F() { try { alert(5 + aa) } catch(err) { // err objecto do erro alert(err.message); return; } } F(); function F() { try { alert(5 + aa) } catch(err) { // err objecto do erro alert(err.message); return; } finally { alert('fim'); } } F();

JavaScript funções e scopes ,[object Object],[object Object],[email_address]

JavaScript funções e scopes ,[object Object],[object Object],[object Object],[object Object],[email_address] var a = 1; function F() { var b = 2; c = 3; alert(a); alert(b); alert(c); } F(); // 1 // 2 // 3 alert(a); // 1 alert(b); // undefined alert(c); // 3 var a = 1; var b = 3; function F() { var a = 2; b = 4; alert(a); alert(window.a); alert(b); } F(); // 2 // 1 // 4 alert(a) // 1 alert(b) // 4

JavaScript funções e scopes ,[object Object],[object Object],[object Object],[email_address] function F() { let a = 2; if(true) { let a = 666; alert(a); // 666 } alert(a); // 2 }

JavaScript funções e scopes ,[object Object],[object Object],[object Object],[email_address] function F1() { return 'Hello'; } function F2() { return; } alert(F1()); // Hello alert(F2()); // undefined

JavaScript ,[object Object],[object Object],[email_address] var sInt = setInterval(function() { comer(); falar(); }, 1000); setTimeout(function(){ clearInterval(sInt); pensarEmVoltarPraSala(); }, 10 * 60 * 1000); setTimeout(function(){ voltarPraSala(); }, 15 * 60 * 1000);

JavaScript ,[object Object],[object Object],[email_address]

JavaScript objects ,[object Object],[object Object],[email_address] // Declaração var pessoa = new Object(); ou var pessoa = {}; // Atribuição pessoa.nome = 'Ze Manel'; pessoa.idade = '29'; pessoa['for'] = 'javascript'; var oA = {num: 333}; var oB = oA ; alert( oB .num); // 333 oB .num = 666; alert( oB .num); // 666 alert( oA .num); // 666 var A = 333; var B = A ; alert( B ); // 333 B = 666; alert( B ); // 666 alert( A ); // 333

JavaScript objects ,[object Object],[object Object],[object Object],[email_address] var pessoa = { nome: 'Ze Manel', idade: 29, careca: false, bandas: ['Emperor', 'Opeth', '...'], animais: { gatos: 2, caes: 0 }, ' for ': 'javascript', filhos: null }; pessoa.nome; // Ze Manel pessoa['nome']; // Ze Manel pessoa['for']; // javascript

JavaScript objects ,[object Object],[object Object],[email_address] function criarInput(type, id, value) { ... } criarInput('text', ... Ermm... qual a ordem? --------------------------------------------- function criarInput(obj) { ... elm.type = obj.type; elm.id = obj.id; elm.value = obj.value; } criarInput({type:'button', id:'myid', value:''});

JavaScript objects ,[object Object],[object Object],[email_address] var obj = { primeiro_nome: 'Ze', ultimo_nome: 'Manel' }; delete obj['primeiro_nome']; obj.toSource(); // {ultimo_nome:'Manel'} FF only SAPO.Utility.Dumper.windowDump();

JavaScript arrays ,[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] var pessoa = [ 'Ze Manel', 29, 'Lisboa' ]; pessoa 0 1 2 Ze Manel 29 Lisboa

JavaScript arrays ,[object Object],[object Object],[object Object],[email_address] // usa-se o: for(var i=0; i < array.length; i++) { } // ou: for(var i = (array.length – 1); i >= 0; i–- ) { } // e não o: for(var i in array) { }

JavaScript arrays ,[object Object],[object Object],[object Object],[object Object],[email_address] var myArray = new Array(); var myArray = []; var myArray = new Array('Ze', 'Manel'); var myArray = ['Ze', 'Manel'];

JavaScript arrays ,[object Object],[object Object],[object Object],[email_address] var myArray = []; // Adiciona myArray.push('Ze'); myArray[myArray.length] = 'Manel'; // Acede myArray[0] // Ze myArray[1] // Manel // e não myArray.0

JavaScript arrays ,[object Object],[object Object],[email_address] var myArray = ['a', 'b', 'c', 'd']; alert(myArray); // a, b, c, d alert(myArray[0]); // a myArray.splice(0, 1); alert(myArray); // b, c, d alert(myArray[0]); // b delete myArray[1]; alert(myArray); // b, undefined, d

JavaScript arrays ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] var a = ['a', 'b']; var b = ['d', 'c']; a.concat(b); // ['a', 'b', 'd', 'c'] a.join('|'); // 'a|b|d|c' a.push('e'); // ['a','b','d','c','e'] a.sort(); // ['a','b','c','d','e'] a.slice(2,4); // ['c','d'] a.splice(0,1); // ['b','c','d','e']

JavaScript functions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] function myFunction() { ... } // mesmo que var myFunction = function(){ ... }

JavaScript functions ,[object Object],[object Object],[email_address] function myFunction(x, y) { alert(x+' - '+y); } // ao invocar a função myFunction('a', 'b', 'c') // c é ignorado // a - b myFunction('a') // y será undefined // a - undefined

JavaScript functions ,[object Object],[object Object],[object Object],[email_address] var obj = { myFunction: function() { }, otherFunction: function() { /* invocação dentro do objecto */ this.myFunction(); } } // invoca-se obj.myFunction(); var obj = {}; obj.myFunction = function() {}; obj.otherFunction = function(){ /* invocação dentro do objecto */ this.myFunction(); }; // invoca-se obj.myFunction();

JavaScript functions ,[object Object],[object Object],[email_address] // como função: functionName(args); // como método dum objecto: objName.functionName(args); // como construtor: new functionName(args); // com o apply: functionName. apply (objName, args); // é o mesmo que: objName.method = functionName; objName.method(args);

JavaScript functions ,[object Object],[object Object],[email_address] // como função: this = o objecto global // como método dum objecto: this = o objecto // como construtor: this = o novo objecto que é instanciado

JavaScript functions ,[object Object],[object Object],[object Object],[email_address] function myF() { alert(arguments[0]); alert(arguments[1]); alert(arguments.length); alert(arguments.callee); } myF('a', 'b'); // a // b // 2 // myF(){...}

JavaScript functions ,[object Object],[object Object],[object Object],[email_address]

JavaScript functions ,[object Object],[email_address] function abre(id) { var elm = document.getElementById(id); var tamanho = 0; function vaiAbrindo() { if(tamanho < 100) { tamanho = tamanho + 5; elm.style.height = tamanho+'px'; setTimeout(vaiAbrindo, 100); } } setTimeout(vaiAbrindo, 100); }

JavaScript functions ,[object Object],[email_address] // ir a www.sapo.pt, escrever isto no Firebug e executar var s = 'border:1px solid red; height:0px; width:300px;'; document .body.innerHTML = '<div id="myid" style="'+s+'"></div>'; function abre(id) { var elm = document .getElementById(id); var tamanho = 0; function vaiAbrindo() { if(tamanho < 100) { tamanho = tamanho + 5; elm.style.height = tamanho+'px'; setTimeout(vaiAbrindo, 100); } } setTimeout(vaiAbrindo, 100); } abre('myid');

JavaScript functions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address] String.prototype.trim = function() { return this.replace(/^+|+$|+$/g, ''); } // Passamos a ter: var str = ' abcd '; str.trim(); // 'abcd'

JavaScript ,[object Object],[object Object],[email_address] tipo Vs. typeof Vs. constructor object - object - Object function - function - Function array - object - Array number - number - Number string - string - String boolean - boolean - Boolean null - object - error... undefined - undefined - error...

JavaScript ,[object Object],[object Object],[object Object],[object Object],[email_address] eval("a=5; b=4; alert(a+b);"); // 9 function a() { alert('__a__'); } function b(aFunction) { eval(aFunction)(); } b('a'); // __a__

JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript ,[object Object],[object Object],[email_address] (function(){ var options = { mode: 2 }; SAPO.Widget.ShareThis(options); })(); window.options; // undefined // senão seria: window.options; // {mode:2}

JavaScript ,[object Object],[object Object],[object Object],[object Object],[email_address] new Date(); new RegExp(”[a-z]”, ”ig”);

JavaScript ainda há mais slides ,[object Object],[email_address]

JavaScript slide 69 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[email_address]

JavaScript Introdução

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (12)

Similar to JavaScript Introdução

Similar to JavaScript Introdução (20)

JavaScript Introdução

Editor's Notes