Javascript Dhtml

JavaScript
for non-programmers

Paul Verhoef

Chapter I

Introduction to
JavaScript
Programming

Voorkennis

Geen voorkennis programmatie vereist
Wel goede kennis HTML :
Formulieren
Hyperlinks
Afbeeldingen
Toegepaste Programmatie Logica

Inhoud van de cursus

Waar JavaScript voor gebruiken ?
Pop up windows
Formuliervalidatie
Cookies
Slideshows
Ajax
…

Inhoud cursus

Wat is JavaScript
Een eerste script
Syntax
Operatoren
Functies


Formulieren
Verplichte invoervelden
Controle email-adres
Berekenen tekstvelden


Formulier validatie
Cookies
Windows

JavaScript vs. Java

• JavaScript • Java
– Netscape – Sun
– Interpreted – Compiled
– Vnl. browser nodig – Stand-Alone of browser

Waarom JavaScript leren ?

Enige scripting taal die door alle grote browsers
ondersteund wordt:
Netscape Navigator
Microsoft Internet Explorer (Jscript)
Firefox Mozilla
Opera
…

VBScript enkel ondersteund door Internet Explorer

Soorten JavaScript

Browser Netscape Microsoft
versie Navigator Internet Explorer
2 JavaScript 1.0 -

3 JavaScript 1.1 JScript 1.0

4 JavaScript 1.2 JScript 3.0

5 Jscript 4.0

6 JavaScript 1.5

NB : ECMAScript

Client-side vs Server-side Scripting

Client-side
uitgevoerd in de browser
gebruiker kan het script zien
soorten : VBScript (alleen I.E.)
JavaScript (I.E. en N.N.)
vb : controle op formulieren
mouse-over effecten
cookies

Client side versus Server side

http cgi
Web Web CGI
browser server Script

Client Server

Client-side vs Server-side Scripting

Server-side
uitgevoerd op de server
gebruiker kan het script niet zien (pure HTML)
soorten : ASP, JSP, PHP, Coldfusion
CGI (Perl, JavaScript,…)
vb : gegevens uit database opzoeken
doorsturen
formulieren verwerken

Benodigdheden

Strict noodzakelijk
Teksteditor (vb Notepad)
Browsers
Scriptbuilders
Netobjects Scriptbuilder
Aptana
HTML-editors
Dreamweaver
Allaire Homesite

Benodigdheden

1st Page 2000
http://www.evrsoft.com
HTML-editor
FreeWare

HTML

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=iso-8859-1quot;
/>
<title>JavaScript</title>
</head>
<body>
</body>
</html>

Script Tag

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; />
<script type=quot;text/javascriptquot; src=quot;javascript.jsquot;></script>
</head>
<body>
<script type=quot;text/javascriptquot;>
//<![CDATA[
alert ('Hello world');
//]]>
</script>
</body>
</html>

Verbergen voor oudere browsers

<html>
<head>
<script language = JavaScript>

</script>
</head>
…

Syntax

C++ PHP Perl

C Visual C++

Python
Java C# JavaScript

Statements

Opdrachten die iets uitvoeren
document.write(“Hello World”);

Opgelet : hoofdlettergevoelig

var Tekst = ″Hello World !″
document.write(tekst)

Opgelet : punt-komma

Statements eindigen met punt-komma
var x=10;
document.write(x);

Opm. : wordt meestal weggelaten

Opgelet : witte ruimtes

var x=10;vary=20;var z=x+y; var x=10;
document.write(″x+y=″ + z);
vary=20;
var z=x+y;
document.write(″x+y=″ + z);

Zoek de fout !

Opgelet : quotes

Voorbeeld 1
document.write(″Zij zei ″meneer ″ tegen mij ″);

document.write(″Zij zei ″ meneer ″ tegen mij″);

Voorbeeld 2
onclick=″window.alert(″You Clicked me″)″;

onclick=″window.alert(′You Clicked me′)″;

Code Blocks

function speciaal()
{
alert(x);
alert(y);
}

If (x= =4) If (x= =4)
{ alert(x);
alert(x); alert(y);
alert(y);
alert(z);
}
alert(z);

Data types

Number
String
Boolean
Object
Undefined
Null

Voorbeelden data types

var nummer= 42;
var tekst1=“wat was de vraag”;
Var tekst2=“42”;
Var bool=true;
Var obj=document.getElementById(‘demo’);

NULL

Meestal -> “no object”
var x = document.getElementById(“bestaatNiet”);
Alert (x);
x=>null

UNDEFINED

Variabele declaren zonder een waarde toe te wijzen
var y
een onbestaande eigenschap opvragen van een
object.
alert(window.mooiweer)
Een parameter van een functie gebruiken zonder dat
er een waarde naar toe is gestuurd
function test(parameter){…..}
test();

Typeof

Toont de datatype van een waarde
typeof x;

Data-type conversie

var a = 4;
var b = '6';
var c = a*b;
MAAR
var d = a+b

NaN

NaN (Not a Number)
string kan niet naar een nummer geconverteerd worden

Operators

rekenkundige operatoren
+ - * / %
c=c*a; c*=a;
c++;
++c;
= == ===
!= <> < > <= >=

Ternary operator

var a=(b==0)?0:1;

var a
if (b==0){
a=0;
}
else
{
a=1;
}

Opgelet : haakjes sluiten

if (getal < 10)
{
document.write(″Het getal is kleiner dan 10″);
}

Opm.: Accolades mogen soms weggelaten worden, maar maakt het de
ontwikkelaar achteraf moeilijker om eventuele fouten te
zoeken.

Opgelet : Commentaar

//Commentaar kan op één regel geplaatst worden

/*Commentaar kan evenwel ook op meerdere regels geplaatst worden
Programmeurs gebruiken commentaar voornamelijk om de logica achter
hun code weer te geven zodat wanneer het programma later (door
iemand anders) moet geupdated worden men de logica van de
oorspronkelijke programmeur nog kan volgen.)
*/

Variabelen en functienamen

Voorwaarden geldige benaming
1ste karakter moet een letter van het alfabet , underscore (_) of
dollarteken ($) zijn.
Geen spaties in de naam

Geen gereserveerde woorden
Niet : mijn Variabele
Wel : mijnVariabele
mijn_Variabele

Gereserveerde woorden

Bepaalde woorden maken deel uit van de JavaScript
taal.
Deze kunnen niet als namen voor variabelen of
functies gebruikt worden.
vb. : alert, case, Date, default, else, function, length, name, new,
print, self,…

Variabelen

camelCase geen standaard wel good practice
var keyword
var a=1;
b=2;
a is expliciet geclareerd, b is impliciet
gevolgen voor de variabelen scoop
impliciet zijn altijd global

Variabelen Scope

Scope : 'bereik' van een variabele. Waar is een
variabele gekend.

Global scope en local scope

global : variabel is gekend in het ganse script

local : alleen binnen een functie

creatie van locale variabelen

expliciet declaratie met het keyword var in een
functie
als een parameter bij de definitie van je functie
Alle andere variabelen zijn global

var boodschap=quot;helloquot;;
function doeiets(){
alert (boodschap)
}

locale ? globale

function doeiets(){
var boodschap=quot;helloquot;;
alert (boodschap)
}

function doeiets(){
boodschap=quot;helloquot;;
alert (boodschap)
}

doeiets(quot;helloquot;);
function doeiets(bericht){

alert (bericht)
}

Octaal en hexadecimaal

var test1 = 042; 34
var test2 = 0x42; 66

Math Object

Math.round()
Math.floor()
Math.ceil()
Math.random()
Math.abs()

getalletjes

toFixed()
var x=4;
alert(x.toFixed(2));
parseInt()
parseFloat()

Strings

var eenTekst='De vos springt over de hond';
var boodschap =quot;quot;
boodschap +=quot;een quot;
boodschap +=quot;boodschapquot;

String Object

length
indexOf()
lastIndexOf()
charAt()
substring()
split()
toLowerCase()
toUpperCase()

Hoofdstuk III
Basic Programming Constructs

If

if (x==4)
{
alert(quot;hoera het is 4quot;);
}
else
{
alert(quot;hoera het is iets andersquot;);
}

If – else if

if (x==4)
{
}
else if (x==3)
{
}

and or not

if (false || true)
if (true && false)
if (true||false) if (false||true)
if(!true||false)

Switch

var cc=el.kredietkaart
swicht(cc)
{
case quot;Visaquot;:
alert (quot;visaquot;)
break;
case quot;Mastercardquot;
alert (quot;mastercardquot;)
break;
default:
alert (quot;onbekende kaartquot;)
}

For -while

for(initialisatie;test;aanpassing){
statements;
}

initialisatie;
while(test){
statements;
aanpassing;
}

do while

initialisatie;
while(test){
statements;
aanpassing;
}
initialisatie;
do {
statements;
aanpassing;
} while(test);

Break & continue

Break
alleen in een switch en in loops
stop onmiddellijk met deze code block

Continue
Alleen maar in loops
ga verder met de volgende iteratie

Alert

alert(quot;Hello World quot;);

Prompt

getal=prompt(quot;geef een getalquot;,quot;quot;);

confirm

if (confirm(quot;wil je je naam om het scherm zienquot;))
{
doe de true statements -> ze hebben op ok
}
else
{
doe de false -> ze hebben op cancel
}

functies

function kwadraat(inputGetal)
{
return inputGetal*inputGetal;
}

oproepen
var getal=kwadraat(5);

Return

Een functie keert steeds terug na uitvoering naar de
plaats waar dit is opgeroepen.
We kunnen dit ook expliciet doen door het keyword
return te gebruiken
We kunnen ook een waarde mee terug sturen vaak
het resultaat van een functie
return resultaat;

Arrays

Is een verzameling van waardes die geindexeeerd
zijn met een nummer.
var scores=new Array();
scores[0]=14;
scores[1]=11;
scores[2]=19;
scores[3]=13;

Array

var scores=[12,12,31,'5',true,quot;tekstquot;];
alert (scores.length);

push pop shift unshift

NIET bij IE5!
var scores=[12,12,31,'5',true,quot;tekstquot;];
var x=quot;waarde in array te zettenquot;
scores.unshift(x); - x is het eerste element in array
scores.push(x); x is het laaste element in array
var a = scores.shift(); bevat het eerste element vd
array, maar dit element maakt geen deel vs array uit
var b = scores.pop(); bevat het laatste element vd
array, maar dit element maakt geen deel vs array uit

forms html

<form id=quot;formulierquot; name=quot;formulierquot; action=quot;http://www.verhoef.be/formtest.cfmquot;
method=quot;getquot; >
<fieldset><legend>Formulier elementen</legend>
<p><label for=quot;Textquot;>Text</label> <input type=quot;textquot; name=quot;Textquot; id=quot;Textquot;
size=quot;60quot;/></p>
<p><label for=quot;paswoordquot;>paswoord</label><input type=quot;passwordquot; id=quot;paswoordquot;
name=quot;paswoordquot; size=quot;60quot;/></p>
<p><label for=quot;hiddenquot;>hidden</label> <input type=quot;hiddenquot; id=quot;hiddenquot;
name=quot;hiddenquot; /></p>
<p><label for=quot;radioquot;>radio </label><input type=quot;radioquot; name=quot;radioquot; value=quot;dringendquot;
id=quot;radioquot;/></p>
<p><label for=quot;checkboxquot;>checkbox</label> <input type=quot;checkboxquot; name=quot;dringendquot;
value=quot;checkboxquot; id=quot;checkboxquot;/></p>
<p><label for=quot;filequot;>File</label><input type=quot;filequot; name=quot;filequot; id=quot;filequot; /></p>
<p><label for=quot;selectquot;>Select</label><select name=quot;selectquot; id=quot;selectquot; >
<optgroup label=quot;groep1quot;>
<option value=quot;1quot;>1 ste optie</option>……

forms[]

document.forms[]
is equivalent met
document.getElementBytagName('form')

hierin zit een nodelist elements[]

Value

Elk form element kan een waarde hebben die we
kunnen ophalen
document.forms[0].elements[1].value of
document.forms[0].elements['naam'].value of
document.formulier.naam.value

radio en checkboxen moeten eerst nagekeken
worden welke geselecteerd zijn om dan de value op
te halen

radio/checkbox

var radios=documents.forms[0].elements[‘radios'];
for (i=0;i<radios.length;i++)
{
if (radios[i].checked)
{
doe iets …
}
}

event handler

function init(){
var x = document.forms[0].radios;
for (var i=0;i<x.length;i++)
addEvent(x[i],'click',berekenPrijs)
function addEvent(obj,type,fn)
{
if (obj.addEventListener)
obj.addEventListener(type,fn,false);
else if (obj.attachEvent)
obj.attachEvent(quot;onquot;+type,fn);
}
}

Event handler

Hoe weet je welk element het event heeft gestuurd ?

function berekenPrijs(e) {
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
var waardeElement=evtTarget.value;
…
}

Select

document.forms[0].select.value
in oudere brouwsers
var selectEl = document.forms[0].select
var value = selectEl.options[selectEl.selectedIndex].value

innerHTML <->Dom methods

Binnen XHTML is document.write niet aanbevolen
alertnatieven zijn dom methods
of innerhtml
<span id=quot;nieuwquot;></span>
el=document.gelElementById(“nieuwquot;);
el.innerHTML=quot;kijk eens hierquot;;

Dom methode

el=document.getElementById(“nieuwquot;);
el. firstChild.nodeValue=quot;hier is de nieuwe inhoudquot;

Pro innerHTML

Convinient and fast.
Easy to use and understand.
Works in general situations where some factors are
unknown.
Great for writing data to a node, This could take
along time with the DOM.
In situations where you need innerHTML, nothing
else will do
innerHTML is significantly faster than the DOM in
Gecko and IE

contra innerHTML

It is NOT a W3C DOM standard. It won't likely become one
either.
The DOM is more powerful.
Its name contains HTML, although it could be used for
SGML/XML documents.
It is lazy and can produce unstructured, lazy code.
It can lead new developers away from learning about text nodes.
Code will become hard to port to XML apps and won't be future
proof.
Should the browser be parsing HTML strings and creating
nodes?!
innerHTML can mean structural data inside the behavioural
element of your app.
innerHTML is very buggy (to say the least) in the Gecko browsers.

PopUps

window.open(quot;urlquot;,quot;naamquot;,quot;eigenschappenquot;)
nieuwVenster=window.open(quot;forms1.htmlquot;,quot;popupquot;
,quot;width=500,height=300,top=150,left=150,screenX
=150,screenY=150,status=yes,menubar=yes,scrollba
rs=yes,toolbar=yesquot;)

dynamische popup

On the fly generatie van een pop window
propsVenster=quot;width=quot;+breedte+quot;,height=quot;+hoogte+quot;,top=150,left=150,screenX=150,scr
eenY=150,status=yes,menubar=yes,scrollbars=yes,toolbar=yes,resizable=yesquot;
nieuwWelkom=window.open(quot;quot;,quot;popup2quot;,propsVenster)
var win='<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> n';
win+='<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>n';
win +='<head>n';
win +='<meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=iso-8859-1quot; />n';
win +='<title>Popup Welkom</title>n';
win +='</head>n';
win +='<body>n';
win +='t<h1>Welkom '+naam+'</h1>n'
win +='</body>n';
win +='</html>n';
nieuwWelkom.document.write(win);
nieuwWelkom.document.close();

Cookies

Gebruik van cookies
het onthouden van loginnaam of instellingen

het vergaren van surfinformatie

het koppelen van een browser aan tijdelijke variabelen op de
server (session cookie)

Cookies

Tekstbestand opgeslagen op locale pc
kan slechts uitgelezen worden door de
server(domain) dat de cookie geplaatst heeft
Heeft steeds een vervaldatum, indien niet aanwezig
session cookie die vervalt bij het afsluiten van
browser

Werken met cookies

schrijven van cookie

document.cookie = quot;naam=quot;+value+vervaldatum;

functie nodig om cookie te lezen

lezen van een cookie

function getCookie(naam)
{
var zoek = naam + quot;=quot;;
if (document.cookie.length > 0)
{
waarde = document.cookie.indexOf(zoek);
if (waarde != -1)
{
waarde += zoek.length;
einde = document.cookie.indexOf (quot;;quot;, waarde);
if (einde == -1)
einde = document.cookie.length;
return unescape (document.cookie.substring(waarde, einde));
}
}
}

Dom tree

<html>
<head>
<title>dom tree voorbeeld</title>
</head>
<body>
<h1>Hello world</h1>
<p>testing javascript</p>
</body>
</html>

Een element zoeken

2 methodes
getElementById() & getElementsByTagName()

->lange afstandzoeken door het ganse document

Parentnode en gelijkaardige eigenschappen

->korte afstandzoeken node per node

korte afstand zoeken

ParentNode

firstChild

lastChild

previousSibling

nextSibling

praktisch

firstChild lastChild

parentNode

previousSibling nextSibling

Node informatie

Elke node heeft volgende eigenschappen
nodeName

nodeValue

nodeType

tagName

nodeName

onverwacht is dit de naam van de node
naam van een text node is steeds #tekst
naam van een document node is steeds #document

!! de naam van de node is steeds in HOOFDLETTERS zelfs als
het in kleine letters staat in de html

nodeValue

bij tekst bevat nodeValue de effectieve inhoud
<p>ik ben een javascript expert</p>
var x = [de bewuste p]
var text=x.firstChild.nodeValue;

nodeType

Element type nodeType

Element 1

Attribute 2

Text 3

Comment 8

Document 9

De document tree aanpassen

gebruikte methodes
appendChild()

insertBefore()

removeChild()

replaceChild()

appendChild

function append(){
var x=document.getElementsByTagName('h1')[0];
x.parentNode.appendChild(x);

}

InsertChild

function insert(){
var x=document.getElementsByTagName('p')[0];
var y=document.getElementsByTagName('h1')[0];
x.parentNode.insertBefore(x,y);

}

removeChild

function remove(){
var x=document.getElementsByTagName('p')[0];
x.parentNode.removeChild(x);

}

replaceChild

function replaceIt(){
var y=document.getElementsByTagName('p')[1];
x.parentNode.replaceChild(x,y);

}

Create element

function create(){
var x=document.createElement('p');
var y=document.createTextNode('Dit is nieuw
gecreerd');
x.appendChild(y);
document.body.appendChild(x);
}

Clone Element

function clone(){
var y=x.cloneNode(true);
document.body.appendChild(y);

}

Objecten

Opm. Objecten ook afhankelijk
van browser type en
browser versie

http://www.devguru.com

Asynchronous JavaScript and XML

Ajax

AJAX is een manier om interactieve webapplicaties te
ontwikkelen door een combinatie van de volgende
technieken te gebruiken:
XHTML en CSS voor de presentatie volgens de standaarden
van het W3C
Het Document Object Model voor het dynamisch tonen van
informatie en voor interactie.
XML en XSLT voor de opslag, aanpassing en transport van
gegevens. In sommige gevallen wordt dit vervangen door JSON
(JavaScript Object Notation).
Het XMLHttpRequest object voor asynchrone communicatie
met de back-end server.
JavaScript om alles aan elkaar te binden.

XMLHTTP

XMLHTTP is een groep API's die kan worden gebruikt
door Javascript om XML of andere data te versturen van
en naar een webserver met HTTP.
Het grootste voordeel van XMLHTTP is de mogelijkheid
om webpagina's dynamisch te updaten zonder de hele
pagina te vernieuwen en zonder gebruik te maken van
plugins.
Voorbeelden van XMLHTTP applicaties zijn Googles
Gmail, Google Suggest, Microsoft Virtual Earth en
MapQuest Yahoo mail, Flickr …..

JSON

JSON JavaScript Object Notation
uitwisselen van datastructuren,
De eenvoud van JSON heeft geleid tot een grote
populariteit ervan.
alternatief voor XML.
geen aparte parser voor nodig.
functiebibliotheken beschikbaar voor het lezen en
schrijven van JSON-expressies.

Toolkits

quot;ASP.NET AJAXquot; (http://ajax.asp.net)
Google heeft de Google Web Toolkit
(http://code.google.com/webtoolkit/)
Scriptaculous (http://script.aculo.us/)
Prototype (http://prototypejs.org/),
DWR (http://getahead.org/dwr)
JQuery (http://jquery.com/)
MooTools (http://mootools.net)
The Yahoo! User Interface Library (YUI)
(http://developer.yahoo.com/yui/ )

Javascript Dhtml

Recommandé

Recommandé

Contenu connexe

Similaire à Javascript Dhtml

Similaire à Javascript Dhtml (20)

Javascript Dhtml