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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (15)

Semelhante a JavaScript Introdução

Semelhante a JavaScript Introdução (20)

JavaScript Introdução

Notas do Editor