JS - Aula 2 - 25fevereiro PDF

Programação Web II
Introdução a Java Script (JS)

Java Script
Outline - Parte A
• Visão Geral de Java Script
– Versões, “endedding, comments”
• Básico Java Script
– Variáves e tipos de dados
– Operadores
– Expressões
• Estruturas de Controle Java Script (JS
Control Structure);
– Instruções Condicionais;
– Demostrações de Loop ( Repetições)
Java Script
Outline - Parte B
• Funções e Eventos de JS
• Uso de objetos em JavaScript;
– Programação Orientada a Objetos;
– Modelos de Objectos em JS
– Uso de objetos incorporados (predefinidos
Object);
– Tipos de objectos personalizados;
• Erros em JS
• Exception Handling in JS
Java Script
Parte C
• Trabalhar com Objecto de navegador;
– Document Object Model (DOM);
• Criar Cookies em JS
– Construindo cookies padrāo
– Interaçāo com os cookies
• Apresentaçāo de DHTML
– Estilos e camadas ( styles and Layers)
– Dynamic Positioning
Java Script
Parte D
• Desenvolvimento de Aplicações JS
– Exemplos JS
– Descusāo sobre a necessidade de
execuçāo
– Como quebrar uma sintaxe em JS
• JS e Referências DHTML
• Hints fo JS coding
Java Script
Introdução
• O crescimento da WWW resultou em
uma demanda de web sites
dinâmicos e interativos;
• JavaScript é uma “linguagem de
programação” voltada para ambiente
web que tem como objetivo
"interagir" com a página HTML.
• A linguagem JavaScript suporta
programação orientada a objetos –
Object-Oriented Programming (OOP)
Java Script
Capacidades do JS
• Melhorar interface dos usuários de um
Web site;
• Traz facilidades na navegação de Web
sites
• Permite a criação de pop-up de
alertas , janelas com facilidade;
• Permite a substituição de imagens sem
carregar a página;
• Permite a validação de formulários; e
mais
Java Script
Versōes de Java Script

• Java Script 1.0 – 1.8
Java Script
Incorporação do Java Script

<html>
<head>
<title>First JavaScript
Program</title>
</head>
<body>
<script language=“JavaScript”
src=“your_source_file.js”></script>
</body>
 A tag <script> pode-se localizar tanto no
<head> assim como no tag <body> tag do
</html>
documento HTML
Java Script
JavaScript Source File

<script language=“JavaScript”
src=“your_source_file.js”></script>
SRC – especifica o local do ficheiro script
TYPE – especifica o tipo do scripting da
linguagem script
LANGUAGE – especifica o scripting da
linguagem script
TYPE and LANGUAGE tem funçōes
similares, usamos o LANGUAGE para
especificar a linguagem usada no script
Java Script
Um Script simples
<html>
<head> <title>First JavaScript
Page</title> </head>
<body>
<h1>Primeira pagina escrita em
JavaScript</h1>
<script type="text/javascript">

</script>
<noscript>
Your browser does not support
JavaScript.
</noscript>
Java Script
Diferença entre JS e Java

JavaScript Java
Interpretado pelo computador Compilado do lado do servidor
do lado do cliente antes da sua execusão pelo
cliente
Dynamic binding, object Static binding, object references

references are checked at must exist at compile time
runtime
Não necessida de declaração do Os tipos de dados devem ser
tipo de dado declarados
Code is embedded in HTML Code is not integrated in HTML
Limited by the browser Java applications are standalone
functionality
Can access browser objects Java has no access to browser
objects
Java Script
Tipos de dados
• Em JS os dados podem ser declarados
em constantes ou variáveis.
• Constantes são atribuídos valores
enquanto que variáveis são
declaradas usando a palavra var
• Três principais tipos de dados de JS:
boolean, número e String;
– Boolean resultado = true; var resultl =
False;
– Number c = 124; var c = 3;
– String today = “monday”; var blank = “”
Java Script
Objectos em JS
• A melhor maneira de entender o
paradigma da programação OOP é
mostrar a analogia com objetos do
mundo real. Para nosso exemplo,
vamos considerar o objeto: pessoa.
• Objetos possuem propriedades e

métodos
• Propriedades:valores associados ao
objecto - altura, peso,sexo,cor da
Terminologias
l
Class – Define as características de um Objecto
l
Object - instância de uma classe
l
Property -
l
Method - capacidade de um objecto de fazer algo
l
Inheritance ( herança) - Uma classe pode herdar características de outra classe
Terminologias
classe define apenas as características do objeto, um método define apenas como o méto
unção de heranças complexas, os métodos, as propriedades de um objeto devem ser capa
ferentes Classes pode definir o mesmo método ou propriedade.
Tipos de valores( arg)
Existem dois tipos de valores a considerar em JS:

Primitivos
l Referidos de acordo com os tipo de classe ( exploraremos mais na secção das variáveris
O JS usa o conveito de classe para identificar e gerir valores
Classe vs Objecto
l
Casa l
Casa: flat
l [ l
[
l Endereço l Endereço : Maganini
l Tipo de Casa
l Número de Quartos l Tipo de Casa: single
l Quarto de balho l Número de Quartos: 1
l Tem garagem coberta
l Quintal com jardim
l Quarto de balho : 1
l ] l Tem garagem coberta: yes
l Quintal com jardim: nao
l
]
Métodos
l
Métodos (ou funções) são ações que podem ser executadas pelo objeto.
l
Endereço
l Tipo de Casa
l Número de Quartos
l Quarto de balho
l ProtectFromOutside()
l
flat.ProtectFromOutside()
Métodos e seus argumentos
uma acção um método pode precisar de um ou mais valores para sua execução;
mentos de um método depende do seu objetivo;

o usados para ajudar o objeto na realização da ação pretendida.
m um argumento, ao chamá-lo deve-se fornecer o valor do argumento, caso contrário, o mét

tside(Reason)
tside(Reason, WhenToProtect)
Classe Document
l
Controla muintas instruções de JS para HTML
l
Método write – usado para visualizar strings ( textos)
l
Sintaxe
l document.write(String)
Classe Document
l
<SCRIPT LANGUAGE="JavaScript">
l document.write("Book Title: ")
l document.write("JavaScript Programming")
l
</SCRIPT>
l
<SCRIPT LANGUAGE="JavaScript">
l document.write("Author: Martin Russel Bitha")
l document.write("Publisher: Les moules Press")
l document.write("Year Published: 1998")
l
</SCRIPT
Java Script
Acessar as propriedade de
um Objecto
•
altura = Pessoa.altura;
•
sexo = Pessoa.sexo;
•
profissao = Pessoa.profissao;
•
naturalidade = Pessoa.naturalidade;
•
cordapele = Pessoa.cordapele;
Java Script
Básico Java Script

• Variáveis e tipos de dados
• Operadores
• Expressões
Java Script
Acessar os métodos de um
objeto
• Pessoa.andar();
• Pessoa.dormir();
• Pessoa.trabalhar();
• Pessoa.natualidade();
Java Script
Acessar os métodos de um
objeto
• Pessoa.andar();
• Pessoa.dormir();
• Pessoa.trabalhar();
• Pessoa.natualidade();
Java Script
Exercicios
• Cria uma classe
• Definir atributos
Java Script
Exercicios
• Cria uma classe
• Definir atributos
Manipular Elementos do HTML
●
Document.getElementBy(id) - usado
para acessar elementos do HTML;
●
Atributo id é usado para identificar o
elemento;
Exemplo
– <h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First
JavaScript";
</script>
●
Elemento HTML é o paragrafo acima definido;
●
Use document.write apenas para saída de documetos.
JavaScript Statements
( Declarações)
● JS- é uma sequência de demostrações a
serem executadas no navegador;
● Statements - “comandos” para o navegador;
● As declarações informam o que o navegador
deve fazer;
● document.getElementById("demo").innerHTML
="Bem Vindo D.Fat.”
● A demostração a cima informa ao navegador
para escrever "Bem vindo D.Fat" dentro de um
elemento HTML com o id = "demonstração":"
JS Code Blocks
●
As instruções do JS podem ser agrupas
em blocos; { }
●
Objectivos: fazer com que uma sequência
de instruções sejem executadas em
conjunto;
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";

Exemplo
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<div id="myDIV">A DIV.</div>

<script>
document.getElementById("demo").innerHTML="Hello Dudu";
document.getElementById("myDIV").innerHTML="How are you?";
</script>
</body>
JS is Case Sensitive - getElementByid diferente de getElementbyID

Comment
//document.getElementById("myH1").innerH
TML="Welcome to my Homepage";
*
–
– my homepage:
*/
Variables
● Variáveis em JS são “conteners” para
armazenamento de informormação:
– var y=6;
– var z=x+y;
– var x=5;
● Visualize o resultado do somatorio acima;

Solução

<body>
 <script>
l var x=5;
l var y=6;
l var z=x+y;
l document.write(x + "<br>");
l document.write(y + "<br>");
l document.write(z + "<br>");
l </script>
l
</body>
Declaring (Creating) JavaScript
Variables
var studentname;
studentname = “loreno”;
var studentname = “Jessica”;

One Statement, Many Variables
Podemos declarar variás variáveis para uma


instrução;
– var lastname="Ayrton", age=12, job="programmer";
– var student="Loreno";
– Var studentname
Exemplo
<body>
<p>Click no botao para criar a uma variavel e visualizar
o seu resultado</p>
<button onclick="myFunction()">Criar</button>
<p id="demo"></p>
<script>
– function myFunction()
● {
● var studentname="Loreno";
● document.getElementById("demo").innerHTML=studentname;
● }
</script>
Exercicios
<body>
<p>Dado y=5, calcula x=y+2, e visualize o resultado </p>

<button onclick="myFunction()">Calcular</button>
<p id="demo"></p>
<script>
function myFunction()
{
var y=5;
var x=y+2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
JS Data Type
●
Variáveis JS tambem podem armazenar outros tipos
de dados
– var x; // O x não foi definido

– var x = 5; // x é um número
– var x = "Tobias"; //x e texto - String
– var pi=3.14;
– var person="Loreno Rocha";
– var answer='Yes I am!';
Cont.
●
JavaScript Booleans
– var x=true;
var y=false
JavaScript Arrays
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW"; var cars=new
Array("Saab","Volvo","BMW");
Array- Exemple
<script>
var i;
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>
JavaScript Objects
●
Todos carros tem as seguintes propriedades:
nome,modelo,cor;
●
O sua diferente esta no valor da propriedade;
●
Todos carros possuem os métodos acima definidos;
Declaring Variables as Objects
● Quando uma variável é declarada com a palavra
“new” trata-se de um objecto;
– var name = new String;

– var x = new Number;
– var y = new Boolean;
– Var txt= new String (“Hello World”)
JavaScript Objects
●
Um objeto é delimitado por chavetas . Dentro das chavetas as
propriedades do objeto, que são definidas como pares de
nome e valor (nome: valor).
●
var person={firstname:"John", lastname:"Enio", id:5566};
●
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
Cont
<script>
var person={
firstname : "Durival",
lastname : " Alimo",
id : 5566
};
document.write(person.firstname + "<br>");
document.write(person["lastname"] + "<br>");
</script>
Creating JS Object
person = new Object();
person.firstname=”Alberto”;
person.surname= “Pedro”;
person.age =”22”;
person.eyecolor=”blue”;
Accessing Object Properties and
Methods
● Accessing Object Properties
● Syntax
– objectName.propertyName
– var message= “Hello World”;
– var x = message.length;
● Acessing Object Method
Syntax
– objectName.methodName
– var message= “Hello World”;
– var x = message.toUpperCase;
JS Functions
Função – é um conjunto de blocos de
códigos executados quando são invocados;
Syntax
functionName
– {
– code to executed
– }
Cont.
<head>
<script>
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Criar</button>
</body>
Calling a Function with
Arguments
●
Podemos invocar uma função atribuíndo um
valor;
●
A esses valores chamos de argumentos ou
parametros;
Syntax
myFunction(argument1,argument2)
function myFunction(var1,var2)
{
some code
}
Cont.
<body>
<p>Click the button to call a function with arguments</p>
<button onclick="myFunction('Web programming II','5th
Semestre')">Tente</button>
<script>
function myFunction(cousename,semestre)
{
alert("Welcome to " + coursename + ", the " + semestre);
}
</script>
</body>
Functions with Return Value
●
Quando usamos a declaração return , a função
irá parar de executar o código assim que
encontrar o valor pretendido
●
Syntax
{
var x=5;
return x;
}
Cont.
Calcula o producto de dois números,
e and return o resultado:
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").
innerHTML=myFunction(4,3);
O elemento innerHTML "demo" será : 12

Local Variables
São declaradas dentro das funcões e somente
podem ser acessadas nessas funcões;
Podemos ter variáveis locais com o mesmo nome

em diferentes funções;
As variáveis local desaparecem logo que a função

for executada;
Global JS variables
● São declaradas fora das funções e são
acessadas em todo código script;
● Tempo de vida de uma variável
Inicia quando uma variável é declarada
● Variáveis locais são apagadas quando
uma função esta completa;
● Variáveis globais são apagadas quando
uma fechamos uma pagina.
Global JS variables

●
São declaradas fora das funções e são
acessadas em todo código script;
●
Tempo de vida de uma variável
– Inicia quando uma variável é declarada
– Variáveis locais são apagadas quando uma
função for executada por completo;
– Variáveis globais são apagadas quando
fechamos uma pagina (web).
JS Operators
Cont.
<p>Dado y=5, calcule x=y+2, e visualize o resultado.</p>
<button onclick="myFunction()">Calcular</button>
<p id="demo"></p>
<script>
{
var y=5;
var x=y+2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
Exercicios
Crie funções utilizando todos os operador es
da tabele ilustrada no slide anterior.

JS - Aula 2 - 25fevereiro PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

JS - Aula 2 - 25fevereiro PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Programação Web II

Introdução a Java Script (JS)

Versōes de Java Script

Incorporação do Java Script

JavaScript Source File

Esconder JavaScript nos

Diferença entre JS e Java

Dynamic binding, object Static binding, object references

• Objetos possuem propriedades e

m um argumento, ao chamá-lo deve-se fornecer o valor do argumento, caso contrário, o mét

Básico Java Script

document.getElementById("myDIV").innerHTML="How are you?";

JS is Case Sensitive - getElementByid diferente de getElementbyID

● Visualize o resultado do somatorio acima;

var studentname = “Jessica”;

Podemos declarar variás variáveis para uma

– var lastname="Ayrton", age=12, job="programmer";

<p>Dado y=5, calcula x=y+2, e visualize o resultado </p>

– var x; // O x não foi definido

– var name = new String;

O elemento innerHTML "demo" será : 12

Podemos ter variáveis locais com o mesmo nome

As variáveis local desaparecem logo que a função

Você também pode gostar