Javascript09v0

.Net Apprentice

(C) Laboratório .NET do Departamento de

Engenharia Informática do ISEP/IPP 1

Arquitectura de SistemasDEI-ISEP

Departamento de Engenharia InformáticaISEP/IPP

Interface Web JavaScript


JavaScript

� O JavaScript é uma linguagem de scripting, orientada a objectos e independente de plataformas

� Criada por Brendan Eich para a NetScape em 1995

� Código embebido em paginas HTML

� Utilizada para:

� Interactividade nas páginas HTML

� Validar formulários

� Fazer chamadas assíncronas ao servidor - AJAX

� Interpretada pelos browsers

� O verdadeiro nome é ECMAScript

� Desenvolvido e mantido por ECMA organization.

.Net Apprentice




JavaScript – Declaração HTML

� Scripts na tag <head>

<head>…<script type="text/javascript"></script>

<head>…<script type="text/javascript"></script>


� Script no <Body>

� Executado quando a página é carregada

<html><head></head><body>…<script type="text/javascript">document.write("This message is written by JavaScript");</script>…</body>

<html><head></head><body>…<script type="text/javascript">document.write("This message is written by JavaScript");</script>…</body>

.Net Apprentice




� Script num ficheiro externo .js

Ficheiro validate.js

<html><head>

<script type="text/javascript" src=“validate.js"></script></head><body></body></html>

<html><head>

<script type="text/javascript" src=“validate.js"></script></head><body></body></html>

…function requiredFieldOn(asterisco){

asterisco.style.color="red";asterisco.style.visibility="visible";

}..

…function requiredFieldOn(asterisco){

asterisco.style.color="red";asterisco.style.visibility="visible";

}..

Não tem tag<script>


JavaScript

� Tipos de dados

� Tipos de dados dinâmicos

� Conversão entre tipos automática

� Tipos de dados primitivos� números (sem distinção entre inteiros e reais)

� string (cadeia de caracteres)

� Operador + para concatenação de strings

� lógicos (true ou false)

� null

� undefined

var x= 3.14;var str="hello world";var x= 3.14;var str="hello world";

str=x;str=x;

.Net Apprentice




JavaScript

� Variáveis� Definição

� Variáveis definidas com var e sem valor atribuído tem valor undefined

� As variáveis são globais se definidas fora de uma função, caso contrário são variáveis locais.

x = 3.14;var x = 3.14;x = 3.14;var x = 3.14;


JavaScript

� ARRAY� definido como um conjunto de literais

� definido com o construtor new do objecto Array

� propriedade length

var paises = ["Portugal","Espanha","França"];var paises = ["Portugal","Espanha","França"];

var cidades = new Array("Porto","Braga","Viseu");

var vec1 = new Array(4);vec1[0]=5;

var cidades = new Array("Porto","Braga","Viseu");

var vec1 = new Array(4);vec1[0]=5;

for (i=0;i<cidades.length;i++){

document.writeln(paises[i]); }

for (i=0;i<cidades.length;i++){

document.writeln(paises[i]); }

.Net Apprentice




JavaScript

� Alguns métodos do objecto Array:

� concat- agrupa dois arrays e devolve um novo array

� join – agrupa todos os elementos de um array numa string

� pop – remove o ultimo elemento

� push – acrescenta um elemento

� sort – ordena os elementos do array


JavaScript

� Array associativo

� Indexação pode ser feita por strings - Keys

� Pode ser usada notação OO - propriedades

var concelho= new Array();concelho["Porto"] = "Aldoar, Foz, Nevogilde, Lordelo do Ouro"; concelho["Maia"] = "Águas Santas, Moreira, Milheiró, Vermoim"; concelho["Gaia"] = "Candal, São Pedro da Afurada, Arcozelo";…Document.writeln(concelho["Porto"])

var concelho= new Array();concelho["Porto"] = "Aldoar, Foz, Nevogilde, Lordelo do Ouro"; concelho["Maia"] = "Águas Santas, Moreira, Milheiró, Vermoim"; concelho["Gaia"] = "Candal, São Pedro da Afurada, Arcozelo";…Document.writeln(concelho["Porto"])

concelho.Esposende="Esposende,Fão,Fonte Boa";document.writeln (concelho.Esposende);concelho.Esposende="Esposende,Fão,Fonte Boa";document.writeln (concelho.Esposende);

.Net Apprentice




JavaScript – Principais Instruções

� IF

if (condition) {statements1}

[else {statements2

} ]

function checkAno () {if (document.getElementById(“textAno").value < 2015 ) {

return true; }

else {

// alert("Ano tem de ser menor que 2015");return false; }

}

function checkAno () {if (document.getElementById(“textAno").value < 2015 ) {

return true; }

else {

// alert("Ano tem de ser menor que 2015");return false; }

}



� SWITCH

switch (expression){case label :

statement; break;...default : statement; }

� FOR

for ([init];[cond]; [increment]) {statements

}

.Net Apprentice





� FOR … IN

Iteracção sobre as propriedades de um objecto ou os valores de um array

for (variable in object) {statements }

� WHILE

while (condition) {statements

for ( conc in concelhos)document.writeln(conc + "=" + concelhos[conc] + "<br/>");for ( conc in concelhos)document.writeln(conc + "=" + concelhos[conc] + "<br/>");

for (prop in window.navigator)document.writeln(prop + "=" + navigator[prop] +"<br/>");for (prop in window.navigator)document.writeln(prop + "=" + navigator[prop] +"<br/>");


JavaScript

� Sintaxe OO

� Principais objectos JavaScript

� String

� Array

� Date

� Math

� RegExp

objectName.propertyNameobjectName.methodname(params);objectName.propertyNameobjectName.methodname(params);

.Net Apprentice




� Objecto String

� length

prpriedade que devolve o comprimento de uma string

� indexOf(str1,[start])

método que devolve a posição da primeira ocorrência de str1

� charAt(index)

método que devolve o caracter da string na posição especificada por index

� substring(start,end)

método que devolve os caracteres da string entre as posições especificadas

JavaScript

var strmail = new String("[email protected]")var strmail = new String("[email protected]")

var n=str.length;var n=str.length;

var pos=strmail.indexOf("@"); var pos=strmail.indexOf("@");

var ch=strmail.charAt(4);var ch=strmail.charAt(4);


JavaScript

� Outros métodos do objecto StringcharCodeAt split

toUpperCase toLowercase

fromCharCode

function leftTrim(sString) {

while (sString.substring(0,1) == ' '){

sString = sString.substring(1, sString.length);}return sString.toUpperCase();

}

function leftTrim(sString) {

while (sString.substring(0,1) == ' '){

sString = sString.substring(1, sString.length);}return sString.toUpperCase();

}

.Net Apprentice




JavaScript

� Objecto Date� construtores

new Date(); // devolve a data do sistema

new Date( milliseconds)

new Date( dateString)

new Date( year, month, day[, hour, minute, second])

� métodos.getHours(); .getTime()

.getMinutes(); .setDate()

.getDate(); .setMonth()

.getMonth(); .setTime()

.getYear(); .toString()

.getDay()


JavaScript

� Objecto MathO objecto Math tem métodos para trabalhar com constantes e funções matemáticas

Math.PI

Math.sqrt(x)

Math.abs(x)

Math.round(x)

Math.cos(x)

Math.max(x,y)

Math.pow(x,y)

Math.random()

.Net Apprentice




JavaScript

� Funções primitivas

parseFloat(str)

converte o argumento str num float. Se não for possível a conversão devolve "NaN" (not a number).

parseInt(str [, radix])

converte str num inteiro de acordo com o argumento radix. Se nãofor possível a conversão devolve "NaN" (not a number).

isNaN(testValue)

devolve true se o argumento é um NaN

num = parseInt(document.getElementById(“textAno").value);

if (isNaN(num) || num > 2015)

alert ("erro");

num = parseInt(document.getElementById(“textAno").value);

if (isNaN(num) || num > 2015)

alert ("erro");


JavaScript Objects

.Net Apprentice




JavaScript DOM

� window Representa a informação sobre a janela do browser. Contém a informação sobre as janelas e frames.

� document contém informação sobre o documento HTML e

permite aceder aos elementos HTML dentro do documento

� navigator Contém informação sobre o browser do utilizador

� event Contém informação sobre os eventos que ocorrem na página

� screen contém informação sobre o ecran do cliente

� history contém os URLs visitados

� location contém informação sobre o URL corrente


JavaScript - Windows e Frames

� window.alert(text)apresenta uma janela de aviso com o texto especificado como parâmetro

� result = window.confirm(text)apresenta uma janela de diálogo. result é um valor booleano com

valor true se foi premido o botão OK e false para o botão Cancel

� window.open("URL", "name" [, "windowfeatures"]) método para criar uma nova janela. Devolve um objecto do tipowindow. O name permite identificar a janela para ser utilizado notarget. windowfeatures define propriedades da janela como altura,largura, toolbar

var winobj = window.open("xpto.html", "qwert", "toolbar,status");

var winobj = window.open("xpto.html", "qwert", "toolbar,status");

.Net Apprentice




� url = window.location

window.location = urlpropriedade para definir novo url da página ou saber url corrente

� window.parentdevolve uma referência para a janela (frame) pai da janela (frame) corrente.

� window.topdevolve uma referência para a janela principal (ou frameset) numa hierarquia dejanelas

� msg = window.status;

window.status = msg;

propriedade que permite alterar o texto na statusbar do browser.

function getNews() {

window.location= "http://www.cnn.com"; }

no html: <button onclick="getNews();">News</button>

function getNews() {

window.location= "http://www.cnn.com"; }

no html: <button onclick="getNews();">News</button>




� windows.historydevolve uma referência para o objecto history que contém uma lista dos URLvisitados. Os métodos go, back e forward deste objecto permite redireccionaro browser.

� windows.setTimeOut

h = window.history;if ( h.length ) { // if there is a history h.back(); // equivalent to clicking back button

}

h = window.history;if ( h.length ) { // if there is a history h.back(); // equivalent to clicking back button

}

window.setTimeout("tick();", 100);//Função tick será chamada ao fim de 100 mswindow.setTimeout("tick();", 100);//Função tick será chamada ao fim de 100 ms

.Net Apprentice




� Cada formulário HTML num documento cria um objecto form

� Existe um array forms com os vários objectos form de um documento.

� Acesso ao seguinte formulário em javascript :

� por indice

� por id/name

� O objecto form contém um array elements com os elementos que o constituem

JavaScript - Forms

<form id="myform" name="myform"><form id="myform" name="myform">

document.forms[0]document.forms[0]

document.myformdocument.myform

document.myform.elements[0]document.myform.elements[0]

Estes métodos não devem ser usados, pois não cumprem as especificações W3C


JavaScript - Forms

� getElementByID e getElementsByName

métodos especificados no DOM-W3C para aceder aos elementos HTML e que são implementados nos browser mais recentes

Html

JavaScript

var nomeInput=document.getElementByID("idnome");var nomeInput=document.getElementByID("idnome");

<label>Nome:</label><input type="text" name="nome" id="idnome" </p>

<label>Nome:</label><input type="text" name="nome" id="idnome" </p>

.Net Apprentice




JavaScript - Eventos

� O JavaScript implementa um modelo de eventos

� Os eventos permitem escrever código para interagir com as acções do utilizador

� Para cada evento (click) existe um eventhandler (onclick)

para responder ao evento

� Registo de um evento (onclick) num elemento html (button):

<input type="button" value="Enviar" onClick="validar(this.form)">

<input type="button" value="Enviar" onClick="validar(this.form)">

Chamada de uma função

J.S.

<input type="button" value="Pesquisa Google“

onclick="window.open('www.google.com');" >

<input type="button" value="Pesquisa Google“

onclick="window.open('www.google.com');" >


Javascript - Eventos

Object Event Handlers

Area onClick, onMouseOut, onMOuseOver

Button onBlur, onClick, onFocus

Checkbox onBlur, onClick, onFocus

Form onReset, onSubmit

Frame onReset, onSubmit

Link onClick, onMouseOut, onMouseOver

Select onBlur, onChange, onFocus

Submit onBlur, onClick, onFocus

Text onBlur, onChange, onFocus

Window onBlur, onError, onFocus,onLoad, onUnload

.Net Apprentice




Attribute The event occurs when...

onabort Loading of an image is interrupted

onblur An element loses focus

onchange The user changes the content of a field

onclick Mouse clicks an object

ondblclick Mouse double-clicks an object

onerror An error occurs when loading a document or an image

onfocus An element gets focus

onkeydown A keyboard key is pressed

onkeypress A keyboard key is pressed or held down

onkeyup A keyboard key is released

JavaScript - EventHandlers


onload A page or an image is finished loading

onmousedown A mouse button is pressed

onmousemove The mouse is moved

onmouseout The mouse is moved off an element

onmouseover The mouse is moved over an element

onmouseup A mouse button is released

onreset The reset button is clicked

onresize A window or frame is resized

onselect Text is selected

onsubmit The submit button is clicked

onunload The user exits the page

JavaScript - EventHandlers

.Net Apprentice




Mouse / Keyboard Attributes

Property Description

altKey Returns whether or not the "ALT" key was pressed

when an event was triggered

button Returns which mouse button was clicked when an

event was triggered

clientX Returns the horizontal coordinate of the mouse

pointer when an event was triggered

clientY Returns the vertical coordinate of the mouse pointer


ctrlKey Returns whether or not the "CTRL" key was pressed


metaKey Returns whether or not the "meta" key was pressed


relatedTarget Returns the element related to the element that

triggered the event

screenX Returns the horizontal coordinate of the mouse

pointer when an event was triggered

screenY Returns the vertical coordinate of the mouse pointer


shiftKey Returns whether or not the "SHIFT" key was

pressed when an event was triggered

JavaScript - Eventos


JavaScript – Demo Eventos

Coordenadas do rato

function writeClientCoords(event){

var x=event.clientX;var y=event.clientY;var elemTextx=document.getElementById("textx");var elemTexty=document.getElementById("texty");objtextx.value=x;objtexty.value=y;

}

function writeClientCoords(event){

var x=event.clientX;var y=event.clientY;var elemTextx=document.getElementById("textx");var elemTexty=document.getElementById("texty");objtextx.value=x;objtexty.value=y;

}

http://www.dei.isep.ipp.pt/ARQSI/DHTML/eventosrato.htm

.Net Apprentice




� <textarea …>,

<input type="text" …>,

<input type="password" …>

� propriedade value do objecto.

Acesso aos elementos de um Form

Nome: <input type="text" name="nome" id=“idnome" size="36">Nome: <input type="text" name="nome" id=“idnome" size="36">

“Manuel”

nomeElem=document.getElementById("nome")strNome = nomeElem.valuenomeElem=document.getElementById("nome")strNome = nomeElem.value



1 . <select …>

� O controlo select tem um array options[ ]

� A propredade selectedIndex devolve o índice da opção seleccionada

� A propriedade text devolve o texto da opção

/* Select sem atributo multiple */

varcidadesElems=document.getElementById("cidades");

index=cidadesElems.selectedIndex;

str=cidadesElems.options[index].text;

/* Select sem atributo multiple */

varcidadesElems=document.getElementById("cidades");

index=cidadesElems.selectedIndex;

str=cidadesElems.options[index].text;

<select size="2" name="cidades" id=“idcidades"><option value="1">Porto</option><option value="2">Braga</option><option value=“3">Lisboa</option>

</select>

<select size="2" name="cidades" id=“idcidades"><option value="1">Porto</option><option value="2">Braga</option><option value=“3">Lisboa</option>

</select>

“Porto”

.Net Apprentice





2 .<select …> com múltipla selecção

� Propriedade selected de option [ ]

/* Select com atributo multiple */

for (i=0;i<mySelect.options.length;i++){

if (mySelect.options[i].selected){

//guardar num vector ou ... seleccionados[j]=mySelect.options[i].text;

j++;

}

}

/* Select com atributo multiple */

for (i=0;i<mySelect.options.length;i++){

if (mySelect.options[i].selected){

//guardar num vector ou ... seleccionados[j]=mySelect.options[i].text;

j++;

}

}



� < input type="radio" …>,

<input type="checkbox" …>,

� getElementsByName devolve um array de objectos com o mesmo nome

� Propriedade checked devolve true se seleccionado

� Propriedade value devolve o valor do elemento

var radiosElems=document.getElementsByName("Reg");

for (i=0;i<radioElems.length;i++)

if (radiosElems[i].checked)

str=radiosElems[i].value;

var radiosElems=document.getElementsByName("Reg");

for (i=0;i<radioElems.length;i++)

if (radiosElems[i].checked)

str=radiosElems[i].value;

Regime: <input type="radio" name="Reg" value="D" checked="checked">Diurno<input type="radio" name="Reg" value="N">Nocturno

Regime: <input type="radio" name="Reg" value="D" checked="checked">Diurno<input type="radio" name="Reg" value="N">Nocturno

.Net Apprentice




Detecção do Browser

� Detecção do browser do cliente

� Objecto navigator do JavaScript

� Propriedades

.appName – nome do browser

.appVersion – versão do browser

.platform - plataforma

browser → "Microsoft Internet Explorer"

browserVersion → 4.0 (compatible; MSIE 7.0; Windows NT 5.1;

.NET …

http://www.dei.isep.ipp.pt/ARQSI/DHTML/infoBrowser.html

var browser = navigator.appName;

var browserVersion = navigator.appVersion;

if (browser=="Microsoft Internet Explorer") ...

var browser = navigator.appName;

var browserVersion = navigator.appVersion;

if (browser=="Microsoft Internet Explorer") ...


Detecção do Browser

� Detectar browser que implementa a especificação W3C DOM

� Verificação de propriedades e métodos implementados

var W3CDOM=(document.getElementsByTagName &&

document.createElement);

if (W3CDOM){

// scripts W3C}else{

//scripts adaptados aos browsers mais antigos}

var W3CDOM=(document.getElementsByTagName &&

document.createElement);

if (W3CDOM){

// scripts W3C}else{

//scripts adaptados aos browsers mais antigos}

.Net Apprentice




� Usadas para validar a informação num formulário HTML

� Criar uma expressão regular:� Com uma expressão literal (usa a sintaxe /padrão/):

� Com o construtor do objecto RegExp :

� Aplicar a expressão regular

� Método test do objecto RegExp

Expressões Regulares

var regExpr = /^\d{6}$/;var regExpr = /^\d{6}$/;

var regExpr = new RegExp("^\d{6}$"); var regExpr = new RegExp("^\d{6}$");

var valido = regExpr.test(num);var valido = regExpr.test(num);


� Exemplo

Expressões Regulares

function validate(){var regExpr=/^\d{7}$/;

num=document.getElementById("numAluno").value;

if (regExpr.test(num)){

return true;}else{

alert("Número tem de ter 7 dígitos");return false;

}}

function validate(){var regExpr=/^\d{7}$/;

num=document.getElementById("numAluno").value;

if (regExpr.test(num)){

return true;}else{

alert("Número tem de ter 7 dígitos");return false;

}}

.Net Apprentice




Caracteres especiais

Pattern Symbol Alternative

a digit (positive integer) \d [0123456789]or [0-9]

a non-digit \D [^0-9]

a word character \w [a-zA-Z0-9_]

a non-word character \W [^\w]

a whitespace character \s [ \t\n\r\f]

a non-whitespace character \S [^\s]

any single character except newline . [^\n]

match one or more occurrences of x x+ {1,}

Matches the preceding pattern x 0 or 1 times x?

zero or more occurrences of the preceding pattern x x* {0,}


Caracteres especiais

Pattern Symbol Alternative

Matches at least n and at most m occurrences of the preceding pattern x

{n,m}

Matches exactly n occurrences of the preceding pattern x x{n}

Matches at least n occurrences of the preceding pattern x x{n,}

Anchors your search at the beginning of the line ^pattern

Anchors at the end of the line pattern$

exactly one character out of the set [characters]

matches any single character, except [^characters]

a range, i.e. all the characters from char1 to char2 inclusive

[char1-char2]

group or form subpattern & remember (sub-pattern)

or |

escape special characters \

.Net Apprentice




Expressões Regulares em JavaScript

� /^\D+$/ - só caracteres e pelo menos um

� /^.+@.+\..{2,3}$/ - validação simples de um email

^.+ no inicio um ou mais caracteres

@ carácter obrigatório

.+ . Seguido de um ou mais caracteres

\. Carácter . obrigatório

.{2,3}$ no fim ocorrência de pelo menos 2 caracteres e no máximo 3


� Alteração de estilos de um elemento usando o objecto style

� Sintaxe:

objectElement.style.propriedade=valor

var elemDiv=document.getElementById("p1");

elemDiv.style.color = "black";

elemDiv.style.backGroundColor = "red";

elemDiv.style.display = "block";

var elemDiv=document.getElementById("p1");

elemDiv.style.color = "black";

elemDiv.style.backGroundColor = "red";

elemDiv.style.display = "block";

JavaScript e CSS

.Net Apprentice




� Alteração de estilos de um elemento usando a propriedade className

� Sintaxe:

objectElement.className=nomeClassCss…

<script type="text/javascript">

function changeCss() {

document.getElementById("myP").className = “newStyle“;

}

</script>

<style type="text/css">

.newStyle {font: bold 16px verdana;}

</style>

…

<p id="myP" onclick="changeCss()">Render this text using the myC class</p>

…

…

<script type="text/javascript">

function changeCss() {

document.getElementById("myP").className = “newStyle“;

}

</script>

<style type="text/css">

.newStyle {font: bold 16px verdana;}

</style>

…

<p id="myP" onclick="changeCss()">Render this text using the myC class</p>

…

JavaScript e CSS


JavaScript e CSS

� Alteração do conteúdo de um elemento HTML

<elemento>.innerHTML

function changeDivOver(iddiv) {

var myElem=document.getElementById(iddiv);myElem.style.color="blue"; myElem.style.backgroundColor = "#00DD33“;myElem.innerHTML="Departamento de Engenharia Informática";

}

function changeDivOver(iddiv) {

var myElem=document.getElementById(iddiv);myElem.style.color="blue"; myElem.style.backgroundColor = "#00DD33“;myElem.innerHTML="Departamento de Engenharia Informática";

}

http://www2.dei.isep.ipp.pt/ades/exemplos_dhtml.html

.Net Apprentice




JavaScript - Futuro

� O futuro � Web Hypertext Application Technology Working Group

� http://www.whatwg.org/

� HTML 5.0� http://www.whatwg.org/specs/web-apps/current-work/

� Web Forms 2.0� http://www.whatwg.org/specs/web-forms/current-work/#extend-form-

controls

� Novos controlos nos formulários

� Validações e restrições declarativas nos controlos - min, max , ...

� Gráficos vectoriais (canvas) – linhas, arcos, rectângulos, ..


JavaScript - Referências

Links avançados e divertidos

� http://simonbaird.com/coolclock/

� http://rainbow.arch.scriptmania.com/scripts/mouse_clock4.html

� http://www.geekpedia.com/Samples/RTB/Editor.html

� http://dhtml-menu.com/dhtml-samples/menu375.html

� http://henrikfalck.com/sudoku/

Javascript09v0

Documents

Transcript of Javascript09v0