JavaScript - A Linguagem

JavaScript:
A Linguagem
Prof. Sérgio Souza Costa

Sobre mim
Sérgio Souza Costa
Professor - UFMA
Doutor em Computação Aplicada (INPE)
prof.sergio.costa@gmail.com
https://sites.google.com/site/profsergiocosta/home
https://twitter.com/profsergiocosta
http://gplus.to/sergiosouzacosta
http://www.slideshare.net/skosta/presentations?order=popular

Interfaces de usuário
Estrutura: HTML
Apresentação: CSS
Comportamento: JavaScript

$(document).ready(function(){
$("#p1").mouseenter(function(){
$.ajax({
url: "endereco_web",
success: function(html){
$("#a1").html(html);
}})
})
})
Um exemplo de código em
JavaScript
Observem este
código,
voltaremos nele
mais a frente

"Combining a functional style with prototypal inheritance JavaScript
is arguably the most widely deployed language of either type.
Considering that virtually every computer user has an interpreter
capable of running it, JavaScript serves to be one of the best
languages to learn."
John Resig
"Considered a “toy” language by serious web developers for
most of its lifetime, Java-Script has regained its prestige in
the past few years as a result of the renewed interest in Rich
Internet Applications and Ajax technologies".
John Resig - jQuery in Action

O que preciso saber ?
1. Saber programar
2. Conhecer a linguagem
3. Conhecer suas APIs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="javascript:alert('BOO Bad way')"> Click</a>
</body>
</html>
Opção 1: Inline Javascript – Bad

Opção 2: Embedded Javascript – Good
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" >
function faca_algo(){
alert ("OK")
}
</script>
</head>
<body>
<a href="#" onclick ="faca_algo()" > Click</a>
</body>
</html>

Opção 3: External Javascript – Best
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="fool.js" ></script>
</head>
<body>
<a href="#" onclick ="faca_algo()" > Click</a>
</body>
</html>
function faca_algo(){
alert ("OK")
}

JavaScript é uma linguagem de programação

JavaScript é uma linguagem de programação
JavaScript ≠ Java

JavaScript
● Inicialmente com o nome de Cmm (C menos menos) e depois
ScriptEase.
● Netscape usa o projeto em seu Browser, nomeando como LiveScript
e depois JavaScript.
● Não é derivada do Java, o nome pode ter sido usado como estratégia
de marketing.
● Microsoft incorpora no teu browser com outro nome - JScript.

Ranking das Linguagens do lado do
cliente

Linguagem
Imperativa
Variáveis

Linguagem
Imperativa
Variáveis Valores

Linguagem
Imperativa
Variáveis Valores
Atribuição

Linguagem
Imperativa
Variáveis Valores
Atribuição
Estado

Sintaxe
Inspirada em C, como Java e C++
for (var i = 0; i < 10; i++) {
if (algumaCoisa) {
break;
}
}

●Variáveis
Principais Elementos

●Nome
●Tipo
●Valor
VariáveisVariáveis

●Nome
●Tipo
●Valor
Variáveis

Dinamicamente tipada - Vantagens

Códigos
menores
+ Funções aplicadas a
diferentes valores

Códigos
menores
diferentes valores
= +Produtivade

Códigos
menores
diferentes valores
= +Produtivade
=+Manutenabilidade
=+Legibilidade

Dinamicamente tipada - Desvantagens

Códigos poucos
seguros

Códigos poucos
seguros
Baixa
eficiência

Códigos poucos
seguros
Baixa
eficiência
Mais disciplina nos testes

var a = 12;
var b = {animal:”cat”,age:10};
var c = true;
...
Nome Valor
Variáveis

var a = 12;
var b = {animal:”cat”,age:10};
var c = true;
...
Nome Valor
Variáveis
Tipo de uma
váriavel é tipo
de seu valor
corrente

<!DOCTYPE html>
<html>
<head>
function teste (){
a = 20
b = 10
}
teste()
console.log (a, b)
</script>
<title></title>
</head>
<body>
</body>
</html>
Exemplo

Exemplo
<!DOCTYPE html>
<html>
<head>
var a = 40
var b = a
b = 30
var p1 = {x:10, y: 20};
var p2 = p1;
p2.x = 50;
p2.y = 80;
console.log (p1, p2, a, b)
</script>
<title></title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
var a = 40
var b = a
b = 30
var p1 = {x:10, y: 20};
var p2 = p1;
p2.x = 50;
p2.y = 80;
console.log (p1, p2, a, b)
</script>
<title></title>
</head>
<body>
</body>
</html>
Exemplo
Tipos primitivos
é sempre
atribuído como
cópia.

Referência
Similar a diversas
outras linguagens
como Java, Lua,
Ruby ...

As vezes é necessário saber qual o tipo de uma determinada variável, para
decidir qual o comportamento ou evitar erros de execução.
typeof

Tipos primitivos
●Numéricos → inteiro ou real
○10, 10.5, 12.1, 0
●Booleanos
○False, True
●null and undefined

Conversão explícita
●parseFloat()
●parseInt()
●Object.toString()

Corrijam este código.
Exercício – “Somadora”

var myPi = “3.1415”;
var result = myPi - 1.1;
var myPi = “3.1415”;
var result = myPi + 1.1;
Regras de coerção

var result1 = 1 + true;
var result2 = 1 + false;
var result3 = “true” + true;
var result4 = null + true;
var result5 = undefined + 0;
var result6 = undefined + “0“ ;
Regras de coerção

São tipos primitivos, imutáveis
Métodos e propriedades como objeto
● length, substring, toLowerCase, charAt, concat
s = "sergio"
s[0] = "S"
console.log(s)
String

Funções
function nome(args) {
comandos;
}
function dobro(x) {
return 2*x;
}
nome = function (args) {
comandos;
}
dobro = function (x) {
return 2*x;
}
Forma 1 Forma 2

function twice (f, a) {
return f (f (a))}
function dobra (a) {
return 2* a}
console.log (twice (dobra, 4))
Função como parâmetro

function twice (f, a) { return f (f (a))}
console.log (twice(function (x) {return 2*x;}, 4 ))
Funções anônimas

function add (x) {
return function (y) {
return y+x
}
}
add1 = add (1)
console.log (add1(10))
Retornando função (closure)

function f () {
for (i in arguments ) {
console.log (i)
}
}
f (1,2)
Funções – Número de argumentos
indefinido

Sobrecarga é um tipo de polimorfismo muito útil e
existente em diversas linguagens, mas não existe
nativamente em JavaScript, mas pode ser simulada:
● A partir do número de argumentos passados, dos valores dos
argumentos passados.
Sobrecarga de funções

function f (arg) {
if (arg)
console.log (arg)
else
console.log (“ola mundo“)
}
f("oi")
f()
function f (arg) {
if (arguments.length != 0)
console.log (arg)
else
console.log ("ola mundo")
}
f("oi")
f()
Exemplos

function f(par) {
par = par || 1
console.log(par)
}
Parâmetros padrão

●Array
var a = [1,2,3]
●Object
var o = {nome: “joao“, idade:25}
Tipos referência

var a = [1,2,3,4]
for (v in a)
{ console.lo
g (v)
}
Array

var o = {chave1 : valor1, chave2 : valor2 }
Valores podem ser de qualquer
dos valores existentes em
JavaScript: numéricos, string,
funções, arrays ou objetos
Object

var person = new Object();
person.name = “Nicholas”;
person.age = 29;
person.job = “Software Engineer”;
person.sayName = function(){
Console.log(this.name);
};
person.sayName()
Object - Simulando POO

person.age = 29;
};
person.sayName()
Sempre que criar
um novo „person“,
terei que escrever a
função sayName ?

person.age = 29;
};
person.sayName()
Sempre que criar
um novo „person“,
terei que escrever a
função sayName ?Criem uma função
para fazer isso

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson(“Nicholas”, 29, “Software
Engineer”);
var person2 = createPerson(“Greg”, 27, “Doctor”);

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson(“Nicholas”, 29, “Software
Engineer”);
var person2 = createPerson(“Greg”, 27, “Doctor”);
Linguagens
orientadas a
objetos tem uma
solução melhor:
construtoras.

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person(“Nicholas”, 29, “Software
Engineer”);
var person2 = new Person(“Greg”, 27, “Doctor”);

this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person(“Nicholas”, 29, “Software
Engineer”);
var person2 = new Person(“Greg”, 27, “Doctor”);
Um problema:
sayName é
replicada em todos
os objetos

this.name = name;
this.age = age;
this.job = job;
}
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person("Nicholas", 29,"Software
Engineer");
var person2 = new Person("Greg", 27, "Doctor");
Console.log (person1.sayName == person2.sayName )
Object - Prototype

this.name = name;
this.age = age;
this.job = job;
}
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person("Nicholas", 29,"Software
Engineer");
var person2 = new Person("Greg", 27, "Doctor");
Console.log (person1.sayName == person2.sayName )
Object - Prototype
Prototype permite
extender as
funcionalidades de
um objeto, ex:
plugins do Jquery

Person.prototype = {
constructor: Person,
sayName: function(){
alert(this.name);
}
}
Object - Prototype

Objetos como String e Array, utilizam
prototypes para definir seus “métodos”.
alert(typeof Array.prototype.sort);
alert(typeof String.prototype.substring);
Object - Prototype

String.prototype.iniciaCom =
function (text) {
return this.indexOf(text) == 0;
};
var msg = "Hello world!";
console.log(msg.iniciaCom("Hello")
);
Objetos como String e Array, utilizam
prototypes para definir seus “métodos”.
Object - Prototype

}
p.setName ("joao")
Getters e Setters
Compo possso
usar “sobrecarga”
aqui ?

name : function () {
if (arguments[0] &&
typeof (arguments[0]) == "string")
return this.setName (arguments[0])
else
return this.getName ()
}
}
console.log (p.name())
p.name ("joao")
console.log (p.name())
Getters e Setters

Exemplo em jQuery
O método $.fn.html usado como setter
$('h1').html('olá mundo');
O método html usado como getter
$('h1').html();
Getters e Setters

Avalia uma expressão JavaScript. Exemplos:
console.log (eval("12*15"))
console.log (eval("[12,13]")[0])
console.log (eval("({x:12.5,y:14.3})").x)
Eval

JSON
JSON é um objeto JavaScript no formato de String
eval ('( {"skillz": {
"web":[
{"name": "html",
"years": "5"
},
{"name": "css",
"years": "3"
}],
"database":[
{"name": "sql",
"years": "7"
}]
}} )')

JSON
JSON é um objeto JavaScript no formato de String
eval ('( {"skillz": {
"web":[
{"name": "html",
"years": "5"
},
{"name": "css",
"years": "3"
}],
"database":[
{"name": "sql",
"years": "7"
}]
}} )')
Problem at line 13
character 19: eval is evil.
http://www.jslint.com/

Eval is Evil
eval ('
(
{"evilcode":
function(){
window.location="http://dsfsd342d.com";
}()
}
)
')

Json
Criando e parseando JSON
p = new Object ({
"nome" : "sergio",
"idade" : 30
})
console.log (JSON.stringify (p))
console.log (JSON.parse (JSON.stringify (p)))
http://www.json.org/json2.js.
Browser mais antigos não
inclue esse objeto JSON

JSON - Parse
Tratando erro
var jsonString = "{nao eh um json}”"
try {
var jsonObj = JSON.parse(jsonString);
} catch(e) {
console.log("json invalido:", e)

JSON - Parse
var jsontext = '{"nome":"sergio", "nascimento":"05 Janeiro
1981"}';
var pessoa = JSON.parse(jsontext);
var pessoa = JSON.parse(jsontext, function (key, value) {
var bDate;
if (key == "nascimento") {
bDate = new Date(value);
return bDate;
}
return value;
});

JSON - Stringfy
Formatando a saída
console.log (JSON.stringify (pessoa, function (key, value) {
var bDate;
if (key == "nascimento") {
bDate = new Date (value)
return ( bDate.getDate() +"/"+
bDate.getMonth()+1 +"/"+ bDate.getFullYear() )
}
return value;
}));

Date
●getDate() Retorna um número inteiro entre 1 e 31, que
representa o dia do mês do objeto Date.
●getDay() Retorna um número inteiro do dia da semana.
Domingo 0, segunda 1, terça 2, etc.
●getFullYear() Retorna o ano do objeto Date em números
absolutos, por exemplo 1998.
●getMonth() Retorna o mês do objeto Date, um inteiro entre 0 e
11 (0 janeiro, 1 fevereiro, etc).

XML e JSON
<animals>
<dog>
<name>Rufus</name>
<breed>labrador</breed>
</dog>
<dog>
<name>Marty</name>
<breed>whippet</breed>
</dog>
<cat name="Matilda"/>
</animals>
Passem este
XML para o
formato de
Object -
JSON

Compatibilidade
●JavaScript, Jscript, ECMAScript, ActionScript
●ECMAScript é uma linguagem de programação baseada
em scripts, padronizada pela Ecma International na
especificação ECMA-262.
○http://www.ecma-international.org/publications/files/ECMA-ST
/ECMA-262.pdf
●JavaScript, Jscript e ActionScript são dialetos do
ECMAScript
○Usando apenas elementos do ECMAScript, você garante
compatibilidade.
http://www.jslint.com

Todos estes conceitos são amplamente
utilizados em bibliotecas e frameworks,
como o JQuery
Closures
Funções de primeira Ordem
“Sobrecarga”
Funções anônimas
Objetos

$(document).ready(function(){
$("#p1").mouseenter(function(){
$.ajax({
url: "endereco_web",
success: function(html){
$("#a1").html(html);
}})
})
})
Um exemplo de código em
JavaScript
Agora
identifiquem
alguns
elementos
discutidos nessa
apresentação.

Boas práticas
Códigos legíveis (nome de
variáveis...)

Boas práticas
variáveis...)
Variáveis
globais

Variáveis Globais
„ JavaScript's biggest problem is its dependence on global
variables, particularly implied global variables. If a variable
is not explicitly declared (usually with the var statement),
then JavaScript assumes that the variable was global. This
can mask misspelled names and other problems.“
●JSLint

Variáveis Globais
„ JavaScript's biggest problem is its dependence on global
variables, particularly implied global variables. If a variable
is not explicitly declared (usually with the var statement),
then JavaScript assumes that the variable was global. This
can mask misspelled names and other problems.“
●JSLint
Use sempre o var e declare antes
de usar

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas

Notações curtas
if(v){
var x = v;
} else {
var x = 10;
}
È equivalente a:
var x = v || 10;

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
Modularize

Modularize
●Modularizar sempre é uma boa prática. Dividir
para conquistar.
○Bom exemplo: JQuery

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
Modularize
Valide
http://www.jslint.com/

Validar
●Códigos válidos são códigos que atendem a um
consenso.

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
Modularize
Valide http://www.jslint.com/

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
Modularize
Use ponto e vírgula

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
Modularize
Use ponto e
virgula
Escopo

Escopo
Não existe escopo por bloco, apenas por funções.
function f(p) {
if (p) {
var a = 15
}
console.log (a)
}
f(1)

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
Modularize
Valide
http://www.jslint.com/ Use ponto e
virgula
Escopo
Use
blocos

Blocos {}
Uso de blocos evita erros, use sempre mesmo
onde não é obrigatório.
if (condicao) {
..
}
else {
}

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
Modularize
Valide
http://www.jslint.com/ Use ponto e
virgula
Escopo
Use
blocos
Comprima

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
ModularizeValide
http://www.jslint.co
m/ Use ponto e
virgula
Escop
o
Use
blocos
Comprima
Eval is Evil

Boas práticas
variáveis...)
Variáveis
globais
Opte por notações
curtas
ModularizeValide
http://www.jslint.co
m/ Use ponto e
virgula
Escop
o
Use
blocos
Comprima
Eval is Evil
Consultem o
jslint

JavaScript - A Linguagem

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a JavaScript - A Linguagem

Similar a JavaScript - A Linguagem (20)

Más de Sérgio Souza Costa

Más de Sérgio Souza Costa (20)

Último

Último (20)

JavaScript - A Linguagem