developer day 2010 - javascript
Post on 26-Jun-2015
783 Views
Preview:
TRANSCRIPT
www.bravaecm.com.br
Introdução a JavaScript
Marcos Roberto Ferreiramarcos.wp@gmail.com
@marcoooos
www.bravaecm.com.br
Empresa especialista na distribuição e prestação de serviços em soluções de GED/CM, Workflow/BPM, Qualidade e Portais, que conta com a credibilidade de ser uma empresa com
o selo TOTVS Business Partner.
10 anos de atuação no mercado
+ de 1.000 projetos entregues
+ de 1.000.000 horas aplicadas em projetos
Equipe certificada ealtamente qualificada para atendimento em toda a América Latina
BRAVA ECM
www.bravaecm.com.br 3
I) Motivação
II) O que é JS
III) Tipos de dados
IV) Funções
V) Objetos
VI) Escopo de execução
VII) Eventos
VIII) Melhores práticas
IX) Ajax
X) Bibliotecas
Programação
www.bravaecm.com.br
Elevar a geração de resultados de nossos clientes através da automação e gestão de seus processos.
www.bravaecm.com.br 9
E como podemos nos diferenciar na utilização do ByYou ECM?
www.bravaecm.com.br 18
JavaScript é uma
implementação do ECMAScript.Pode ser caracterizada por ser
dinâmica, fracamente tipada, orientada a
objetos, baseada em
prototype e first-class function
www.bravaecm.com.br 19
Na web, JavaScript é utilizado para criar interação com páginas HTML através da manipulação do Document Object Model (DOM)
Após o advento do AJAX, JavaScript se tornou uma das principais ferramentas na construção da Web 2.0
www.bravaecm.com.br 20
Document Object Model (DOM)
<script type="text/javascript"> /* aqui fica o script */ </script>
<script type="text/javascript“ src=“lib.js”> </script>
www.bravaecm.com.br 22
Document Object Model (DOM)
x.getElementById(id)
x.getElementsByTagName(name
x.appendChild(node)
x.removeChild(node)
www.bravaecm.com.br 24
Numbers (1, 1.2, 42, -10,
NaN)
Strings (“forty two”, “”)
Booleans (true, false)
Objects ( {}, { foo:
“bar”} )
Functions (alert, eval)
null
undefined
www.bravaecm.com.br 26
typeof(null); //object
typeof(undefined); //
undefined
typeof(NaN); // number
www.bravaecm.com.br 27
var a = null;alert(a) // null
var a;alert(a); // undefined
var a = 0/0alert(a) // NaN
www.bravaecm.com.br
“” == “0” 0 == “” 0 == “0” false == “false” false == “0” false == undefined false == null null == undefined “ \t\r\n ” == 0
?
www.bravaecm.com.br
“” == “0” // false
0 == “” // true 0 == “0” // true
false == “false” // false
false == “0” // true
false == undefined // false
false == null // false
null == undefined // true
“ \t\r\n ” == 0 // true
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
“” === “0” // false
0 === “” // false
0 === “0” // false
false === “false” // false
false === “0” // false
false === undefined // false
false === null // false
null === undefined // false
“ \t\r\n ” === 0 // false
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
Declaração de uma função
function nomeDaFuncao(var1,var2,...,varX){
linha de código 1linha de código 2linha de código 3
}
Chamada de uma função
function soma(num1, num2){alert(num1+num2);
}
soma(1, 1);
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
Propriedades de uma função
arguments – parâmetros passados para a função
caller – função que está chamando a função.
prototype – utilizado para adicionar atributos ou
funções.
Retorno de uma função
function soma(num1, num2){return num1+num2;
}
var resultado = soma(1, 1);alert(resultado);
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
function Person(firstName, lastName) {this.name = firstName;if(lastName==undefined){
this.name = "Sr." + this.name;}
this.sayHello = function(){ alert("hello: " + this.name);
}
this.sayGoodbye = function () { alert("goodbye: " + this.name);
}}
var p = new Person("Marcos", "Ferreira");p.sayHello();p.sayGoodbye();
Template de Objeto
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
var person = new Object();person.name = "Marcos";
person.sayHello = function() {alert("hello: " + this.name);
}
person.sayGoodbye = function() {alert("goodbye: " + this.name);
}
person.sayHello();person.sayGoodbye();
Instância direta de Objeto
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
var person = {name:"marcos",idade:25,email: “marcos.wp@gmail.com”,sayHello:function(){
alert("hello: " +name)},sayGoodbye:function(){
alert("goodbye: " + name)}
}
person.sayHello();person.sayGoodbye();
Objeto com notação literal
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
function Person(firstName) {this.name = firstName;
this.sayHello = function() { ... }
this.sayGoodbye = function() { ... }}
function Student(studentName){this.inheritFrom = Person;this.inheritFrom(studentName);this.sayHello = function(){ ... }
}
var p = new Student("Marcos");p.sayHello();p.sayGoodbye();
Herança com funções
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
function Person(firstName, lastName) {this.name = firstName;
this.sayHello = function() { ... }
this.sayGoodbye = function() { ... }}
function Student(studentName){this.name = studentName;this.sayHello = function(){ ... }
}
Student.prototype = new Person;var p = new Student("Marcos");p.sayHello();p.sayGoodbye();
Herança com Prototype
www.bravaecm.com.br
function escopo() {this.var1 = "um valor";
this.fazAlgo = function (){alert(this.var1); // um valor
}}
new escopo().fazAlgo();
alert(this.var1) //undefined
Atributo de objeto
www.bravaecm.com.br
function fazAlgo() {var var1 = "um valor";
alert(var1); // um valor}
fazAlgo();
alert(var1); //var1 is not defined
Variáveis locais
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
function fazAlgo() {var1 = "um valor";
alert(var1); // um valor}
fazAlgo();
alert(var1); // um valor
Variáveis globais
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
onFocus, onBlur, onChange<input type="text" id="email" onchange="checkEmail()">
onSubmit<form action="xxx.htm" onsubmit="return checkForm()">
onMouseOver, onMouseOut<a href=“..." onmouseover="alert(‘hello')">hello</a>
www.bravaecm.com.br
• ‘’ === ‘0’ // false• 0 === ‘’ // false• 0 === ‘0’ // false• false === ‘false’ // false• false === ‘0’ // false• false === undefined // false• false === null // false• null === undefined // false• “ \t\r\n ” === 0 // false
Boas práticas
www.bravaecm.com.br
function foo() { return { bar: 42 };}
function foo() { return { bar: 42 };}
www.bravaecm.com.br
function foo() { return { bar: 42 };}
alert(foo());// undefined
function foo() { return { bar: 42 };}
alert(foo());// objectalert(foo().bar);// 42
www.bravaecm.com.br
function foo() { return { bar: 42 };}
function foo() { return; { bar: 42; };}
Adicionado automáticamente
www.bravaecm.com.br
Abra chaves sempre na mesma linha do comando
Muito cuidado com ponto e vírgula adicionado automáticamente
www.bravaecm.com.br
// java
if (true) { var x = 10;
}
System.out.print(x);
// undefined x// compile time
// javascript
if (true) { var x = 10; }
alert(x);
// 10
www.bravaecm.com.br
// javascript
if (true) { (function () { var x = 10; }());}
alert(x);// undefined
// javascript
if (true) { var x = 10; }
alert(x);
// 10
www.bravaecm.com.br
// javascript
if (true) { (function () { var x = 10; }());}
alert(x);// undefined
// javascript
if (true) { (function () { x = 10; }());}
alert(x);// 10
www.bravaecm.com.br
Chaves não definem escopo de execução
Não use variáveis globais.
www.bravaecm.com.br
Ajax é uma sigla para Asynchronous JavaScript and XML
Com Ajax é possível acessar dados de maneira assíncrona e sem alterar estado de uma página
www.bravaecm.com.br
Referências
http://www.slideshare.net/cheilmann/javascript-best-practices-1041724
http://www.slideshare.net/thomanil/javascript-neednt-hurt-javabin-talk
http://www.w3schools.com/js/default.asp
http://www.w3schools.com/htmldom/default.asp
http://www.slideshare.net/Dmitry.Baranovskiy/java-script-workshop
top related