JavaScript Introductie

Introductie

JavaScript is een taal voor het toevoegen van gedrag aan HTML webpagina’s, of daarop gebaseerde webpagina’s zoals PHP, JSP, JSF, etc.  JavaScript is enorm belangrijk geworden als basis voor de ontwikkeling van zogenaamde Rich Client Webapplicaties. Waar voorheen webpagina’s nogal sober waren, met name in vergelijking met grafische fat-client applicaties zoals bijv. Windows applicaties, kunnen met JavaScript en daarop gebaseerde libraries zoals jQuery, net als Windows applicaties visueel en functioneel rijke schermen worden ontwikkeld. De techniek die de motor hierachter is geweest is Ajax. Dat is een techniek waarmee JavaScript direct server functionaliteit kan aanroepen zonder de HTML pagina te hoeven verversen. Eigenlijk ontstaat op die manier weer een traditionele fat-client met veel logic aan de client (browser) kant. Zei het dat deze nu niet op de client wordt geïnstalleerd, maar netjes via de webserver aan de clients beschikbaar wordt gesteld. Zo wordt het beste van beide werelden verenigd.

JavaScript toevoegen aan HTML

Javascript wordt aan HTML toegevoegd middels de “Script” tag zoals in het volgende voorbeeld:

<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

<strong><script type="text/javascript"></strong>
<strong> document.getElementById("demo").innerHTML="My First JavaScript";</strong>
<strong></script></strong>

</body>
</html>

In dit geval wordt het HTML element met id=”demo” benaderd met de method “getElementById” van het object “document”. De property “innerHTML” van het HTML element wordt vervolgens aangepast.
Direct content kun je in de HTML page schrijven met bijv:

document.write("<p>My First JavaScript</p>");

Javascript wordt in de <BODY> of de <HEAD> secties toegevoegd. In de body liefst aan het eind waardoor eventueel gerefereerde HTML elementen al gedefinieerd en benaderbaar zijn. Het is gebruikelijk om Functions in de head of aan het eind van de body te plaatsen.

<html>
<head>
<script type="text/javascript">
<strong>function myFunction()</strong>
<strong>{</strong>
<strong> document.getElementById("demo").innerHTML="My Function";</strong>
<strong>}</strong>
</script>
</head>

<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" <strong>onclick="myFunction()"</strong>>Try it</button>
</body>
</html>

Javascript kan in externe files worden opgenomen:

<script type="text/javascript" src="myScript.js"></script>

Taalelementen

Commentaren

Commentaren worden voorafgegaan met // of ingesloten tussen /* en */

Variabelen

Variabelen kunnen worden gedeclareerd : var myCar=”Alfa”, maar dat hoeft niet. Bij direct gebruik in een assignment wordt de variabele automatisch gedeclareerd. Er is geen sprake van datatype definities.

Een regel code kan met een \ achteraan de regel worden vervolgd op de volgende pagina.

Operators

OR : ||
AND : &&

Comparisons :

==, !=

Conditional operator:

voteable=(age<18) ? “Too young”:”Old enough”;

Control Logic

IF-THEN-ELSE

if (rowCount == 0) {
   alert('no rows!');
}else {
   alert('all is well!);
}

SWITCH

switch(n)
{
case 1:
  execute code block 1
  break;
case 2:
  execute code block 2
  break;
default:
  code to be executed if n is different from case 1 and 2
}

FOR-LOOP

for(var i=0; i < array.length; i++)
{
   alert('On interation '+i);
}

WHILE-LOOP

n=8
while( n > 0) {
   n--;
   alert('n = '+n);
}

Dialogs

Alert Box

alert("I am an alert box!");

Confirm Box

var r=confirm("Press a button");
if (r==true)
  {
    x="You pressed OK!";
  }
else
  {
    x="You pressed Cancel!";
  }

Prompt Box

var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
  {
    x="Hello " + name + "! How are you today?";
  }

Functions

<button <strong>onclick="myFunction('Harry Potter','Wizard')"</strong>>Try it</button>

<script type="text/javascript">
<strong>function myFunction(name,job)</strong>
<strong>{</strong>
<strong> alert("Welcome " + name + ", the " + job);</strong>
<strong>}</strong>
</script>

Met return waarde:

var myVar=myFunction();

function myFunction()
{
  var x=5;
  return x;
}

Arrays

var myCars=new Array(); // regular array (add an optional integer size
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

Objects en Datatypes

Date

new Date() // current date and time
new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

Math:
Math.round(4.7)
Math.random()
Math.sqrt()

zie : http://www.w3schools.com/jsref/jsref_obj_math.asp

String

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
var n=str.substr(2,3)

zie : http://www.w3schools.com/jsref/jsref_obj_string.asp

Browser Objects

Window

maakt en bewerkt nieuwe browser windows.
Bijv. openen nieuw window:

window.open(URL,name,specs,replace)
myWindow=window.open("","","width=400,height=200");

Navigator

geeft info over de browser, bijv:

document.write("Name: " + navigator.appName);

Screen

geeft info over het computerscherm, bijv.:

document.write("Total Height: " + screen.height);

History

geeft info over de bezochte URL’s, en maakt browser back en forward mogelijk.
Wordt verkregen via de history property van het Window object.

window.history.back()
window.history.forward()

Location

geeft info over de huidige URL, bijv:

document.write(location.pathname);
document.write(location.hostname);

DOM Objects

Een HTML page is een document wat is opgebouwd uit een boomstructuur, bestaande uit “Nodes” zoals:

  • de root : het object “Document”.
  • een element
  • attributen van een element
  • een text
  • een commentaar
This entry was posted in JavaScript and tagged . Bookmark the permalink.

Geef een reactie

Je e-mailadres wordt niet gepubliceerd.

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>