Javascript Dhtml

2,080
-1

Published on

Javascript voor beginners

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,080
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Javascript Dhtml

  1. 1. JavaScript for non-programmers Paul Verhoef
  2. 2. Chapter I Introduction to JavaScript Programming
  3. 3. Voorkennis Geen voorkennis programmatie vereist Wel goede kennis HTML : Formulieren Hyperlinks Afbeeldingen Toegepaste Programmatie Logica
  4. 4. Inhoud van de cursus Waar JavaScript voor gebruiken ? Pop up windows Formuliervalidatie Cookies Slideshows Ajax …
  5. 5. Inhoud cursus Wat is JavaScript Een eerste script Syntax Operatoren Functies
  6. 6. Inhoud van de cursus Formulieren Verplichte invoervelden Controle email-adres Berekenen tekstvelden
  7. 7. Inhoud van de cursus Formulier validatie Cookies Windows
  8. 8. JavaScript vs. Java • JavaScript • Java – Netscape – Sun – Interpreted – Compiled – Vnl. browser nodig – Stand-Alone of browser
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Client side versus Server side http cgi Web Web CGI browser server Script Client Server
  13. 13. 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
  14. 14. Benodigdheden Strict noodzakelijk Teksteditor (vb Notepad) Browsers Scriptbuilders Netobjects Scriptbuilder Aptana HTML-editors Dreamweaver Allaire Homesite
  15. 15. Benodigdheden 1st Page 2000 http://www.evrsoft.com HTML-editor FreeWare
  16. 16. The 3 layers
  17. 17. Chapter II JavaScript Syntax
  18. 18. 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>
  19. 19. 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; /> <title>JavaScript</title> <script type=quot;text/javascriptquot; src=quot;javascript.jsquot;></script> </head> <body> <script type=quot;text/javascriptquot;> //<![CDATA[ alert ('Hello world'); //]]> </script> </body> </html>
  20. 20. Verbergen voor oudere browsers <html> <head> <title>JavaScript</title> <script language = JavaScript> <!-- ……… //--> </script> </head> …
  21. 21. Syntax C++ PHP Perl C Visual C++ Python Java C# JavaScript
  22. 22. Statements Opdrachten die iets uitvoeren document.write(“Hello World”);
  23. 23. Opgelet : hoofdlettergevoelig var Tekst = ″Hello World !″ document.write(tekst)
  24. 24. Opgelet : punt-komma Statements eindigen met punt-komma var x=10; document.write(x); Opm. : wordt meestal weggelaten
  25. 25. 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 !
  26. 26. 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′)″;
  27. 27. 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);
  28. 28. Data types Number String Boolean Object Undefined Null
  29. 29. Voorbeelden data types var nummer= 42; var tekst1=“wat was de vraag”; Var tekst2=“42”; Var bool=true; Var obj=document.getElementById(‘demo’);
  30. 30. NULL Meestal -> “no object” var x = document.getElementById(“bestaatNiet”); Alert (x); x=>null
  31. 31. 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();
  32. 32. Typeof Toont de datatype van een waarde typeof x;
  33. 33. Data-type conversie var a = 4; var b = '6'; var c = a*b; MAAR var d = a+b
  34. 34. NaN NaN (Not a Number) string kan niet naar een nummer geconverteerd worden
  35. 35. Operators rekenkundige operatoren + - * / % c=c*a; c*=a; c++; ++c; = == === != <> < > <= >=
  36. 36. Ternary operator var a=(b==0)?0:1; var a if (b==0){ a=0; } else { a=1; }
  37. 37. 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.
  38. 38. 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.) */
  39. 39. 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
  40. 40. 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,…
  41. 41. 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
  42. 42. 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
  43. 43. 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) }
  44. 44. 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) }
  45. 45. Octaal en hexadecimaal var test1 = 042; 34 var test2 = 0x42; 66
  46. 46. Math Object Math.round() Math.floor() Math.ceil() Math.random() Math.abs()
  47. 47. getalletjes toFixed() var x=4; alert(x.toFixed(2)); parseInt() parseFloat()
  48. 48. Strings var eenTekst='De vos springt over de hond'; var boodschap =quot;quot; boodschap +=quot;een quot; boodschap +=quot;boodschapquot;
  49. 49. String Object length indexOf() lastIndexOf() charAt() substring() split() toLowerCase() toUpperCase()
  50. 50. Hoofdstuk III Basic Programming Constructs
  51. 51. If if (x==4) { alert(quot;hoera het is 4quot;); } else { alert(quot;hoera het is iets andersquot;); }
  52. 52. If – else if if (x==4) { alert(quot;hoera het is 4quot;); } else if (x==3) { alert(quot;hoera het is 3quot;); }
  53. 53. and or not if (false || true) if (true && false) if (true||false) if (false||true) if(!true||false)
  54. 54. 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;) }
  55. 55. For -while for(initialisatie;test;aanpassing){ statements; } initialisatie; while(test){ statements; aanpassing; }
  56. 56. do while initialisatie; while(test){ statements; aanpassing; } initialisatie; do { statements; aanpassing; } while(test);
  57. 57. 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
  58. 58. Alert alert(quot;Hello World quot;);
  59. 59. Prompt getal=prompt(quot;geef een getalquot;,quot;quot;);
  60. 60. Confirm
  61. 61. 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 }
  62. 62. functies function kwadraat(inputGetal) { return inputGetal*inputGetal; } oproepen var getal=kwadraat(5);
  63. 63. 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;
  64. 64. 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;
  65. 65. Array var scores=[12,12,31,'5',true,quot;tekstquot;]; alert (scores.length);
  66. 66. 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
  67. 67. Forms
  68. 68. 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>&nbsp;<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>……
  69. 69. forms[] document.forms[] is equivalent met document.getElementBytagName('form') hierin zit een nodelist elements[]
  70. 70. 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
  71. 71. radio/checkbox var radios=documents.forms[0].elements[‘radios']; for (i=0;i<radios.length;i++) { if (radios[i].checked) { doe iets … } }
  72. 72. 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); } }
  73. 73. 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; … }
  74. 74. Select document.forms[0].select.value in oudere brouwsers var selectEl = document.forms[0].select var value = selectEl.options[selectEl.selectedIndex].value
  75. 75. 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;;
  76. 76. Dom methode el=document.getElementById(“nieuwquot;); el. firstChild.nodeValue=quot;hier is de nieuwe inhoudquot;
  77. 77. 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
  78. 78. 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.
  79. 79. 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;)
  80. 80. 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();
  81. 81. 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)
  82. 82. 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
  83. 83. Werken met cookies schrijven van cookie document.cookie = quot;naam=quot;+value+vervaldatum; functie nodig om cookie te lezen
  84. 84. 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)); } } }
  85. 85. Dom tree <html> <head> <title>dom tree voorbeeld</title> </head> <body> <h1>Hello world</h1> <p>testing javascript</p> </body> </html>
  86. 86. DOM Tree
  87. 87. Een element zoeken 2 methodes getElementById() & getElementsByTagName() ->lange afstandzoeken door het ganse document Parentnode en gelijkaardige eigenschappen ->korte afstandzoeken node per node
  88. 88. korte afstand zoeken ParentNode firstChild lastChild previousSibling nextSibling
  89. 89. praktisch firstChild lastChild parentNode previousSibling nextSibling
  90. 90. Node informatie Elke node heeft volgende eigenschappen nodeName nodeValue nodeType tagName
  91. 91. 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
  92. 92. 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;
  93. 93. nodeType Element type nodeType Element 1 Attribute 2 Text 3 Comment 8 Document 9
  94. 94. De document tree aanpassen gebruikte methodes appendChild() insertBefore() removeChild() replaceChild()
  95. 95. appendChild function append(){ var x=document.getElementsByTagName('h1')[0]; x.parentNode.appendChild(x); }
  96. 96. InsertChild function insert(){ var x=document.getElementsByTagName('p')[0]; var y=document.getElementsByTagName('h1')[0]; x.parentNode.insertBefore(x,y); }
  97. 97. removeChild function remove(){ var x=document.getElementsByTagName('p')[0]; x.parentNode.removeChild(x); }
  98. 98. replaceChild function replaceIt(){ var x=document.getElementsByTagName('h1')[0]; var y=document.getElementsByTagName('p')[1]; x.parentNode.replaceChild(x,y); }
  99. 99. Create element function create(){ var x=document.createElement('p'); var y=document.createTextNode('Dit is nieuw gecreerd'); x.appendChild(y); document.body.appendChild(x); }
  100. 100. Clone Element function clone(){ var x=document.getElementsByTagName('h1')[0]; var y=x.cloneNode(true); document.body.appendChild(y); }
  101. 101. Objecten Opm. Objecten ook afhankelijk van browser type en browser versie http://www.devguru.com
  102. 102. Asynchronous JavaScript and XML
  103. 103. 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.
  104. 104. 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 …..
  105. 105. 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.
  106. 106. 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/ )

×