woensdag 28 augustus 2013

Basis blog: Javascript in HTML



Deze blog is bedoeld voor mensen die interesse hebben in het gebruik van Javascript in een HTML document, maar nog niets van HTML of javascript weten. In deze blog begin ik dan ook echt met de basis: het simpelweg leren begrijpen van de code. We gaan hierbij kijken naar onderdelen van de code en wat deze betekenen.

De onderdelen die ik zal bespreken:
·        <html>
·        <head>
·        <title>
·        <body>
·        <script>
·        <h1> t/m <h6>
·        <p>
·        <li>
·        <ul>
·        <ol>

Openen en sluiten van een code
Elke willekeurige code in javascript en HTML word geopend met <waarde van de code> en gesloten met </waarde van de code>. Het stuk at tussen deze twee onderdelen in staat is de tekst die passend is bij de desbetreffende code. Bijv.: De h1 word geopend met <h1>en eindigt op </h1>. In dit voorbeeld is “en eindigt op” de h1.

<html>
Opening van een HTML document.

<head> <title>
De head is de plaats waar alle hoofdonderdelen in komen te staan. Het enige wat verplicht in de head zit is <title>, wat staat voor de titel  van het document.

<body>
De body bevat alle content van het document. Dit zijn onder andere uw tekst, foto’s, hyperlinks en lijsten.

<script>
Met script word een script aangegeven in een HTML pagina. Dit kan bijv. javascript zijn. Tussen de script opening en sluiting staat dan het hele script.




<h1> 
De h1 is de kop titel op een pagina


<h2> t/m <h6>
H2 t/m h6 worden gebruikt om een duidelijke hiƫrarchie te creƫren. H2 word gebruikt voor subkoppen en met h3 t/m h6 kunt u dieper in gaan op de tekst. Deze gebruikt u bijv. voor een quote en belangrijke woorden in de tekst. U zult niet altijd alle h-waardes gebruiken, maar ze kunnen u helpen om uw teksten overzichtelijker te maken voor uw lezers.

<p>
P staat voor paragraaf. Om de verschillende paragrafen te scheiden gebruikt u voor elke paragraaf <p> en na elke paragraaf </p>. Daartussen kunt u elke willekeurige tekst plaatsen die u wilt. 

Bijv. als je een tekst hebt met een h1, twee maal een h2 en 3 paragrafen dan typt u het volgende:

<h1> Dit is een javascript kop </h1>

<h2> Dit is een subkop </h2>
<p>Dit is mijn eerste paragraaf: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus erat, dapibus egestas dolor nec, ornare tincidunt dui. Maecenas luctus orci eget tortor gravida consequat. Aliquam vestibulum magna nec massa consectetur volutpat.</p>

<h2> Dit is een subkop </h2>
<p>Dit is mijn tweede paragraaf: Aliquam vestibulum magna nec massa consectetur volutpat. Nullam consequat mauris arcu, sit amet fermentum enim vehicula pellentesque. Nunc rhoncus molestie vehicula. Phasellus vulputate consectetur fermentum. Proin ullamcorper vitae elit nec luctus. Praesent sollicitudin, nulla et tincidunt eleifend, neque justo elementum metus, a tincidunt magna nisl sit amet arcu. Maecenas elementum tellus id urna tristique porta. Proin fringilla gravida volutpat. Nullam a pulvinar turpis. Nullam pretium bibendum nunc, quis feugiat eros suscipit a. Nam rhoncus nec sem ut scelerisque. Phasellus erat dolor, varius et gravida vitae, congue ut mauris. Pellentesque gravida justo non venenatis faucibus.</p>

<p>Dit is mijn derde paragraaf: Morbi mattis ullamcorper purus, at tristique nibh rhoncus hendrerit. Nam eu lorem sed dui malesuada suscipit vel quis tortor. Curabitur dapibus, mi a pharetra lobortis, purus enim convallis purus, quis hendrerit diam purus vitae diam. Maecenas diam libero, luctus eget tempus sed, mattis id nunc. Suspendisse euismod arcu in lorem mattis, vel convallis metus tincidunt. Aenean at risus ac est vulputate eleifend. Integer pulvinar diam vitae est viverra, eget suscipit dolor faucibus. Cras feugiat varius dictum.</p>

U zult dan het volgende resultaat krijgen:

Dit is een javascript kop

Dit is een subkop
Dit is mijn eerste paragraaf: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus erat, dapibus egestas dolor nec, ornare tincidunt dui. Maecenas luctus orci eget tortor gravida consequat. Aliquam vestibulum magna nec massa consectetur volutpat.

Dit is een subkop
Dit is mijn tweede paragraaf: Aliquam vestibulum magna nec massa consectetur volutpat. Nullam consequat mauris arcu, sit amet fermentum enim vehicula pellentesque. Nunc rhoncus molestie vehicula. Phasellus vulputate consectetur fermentum. Proin ullamcorper vitae elit nec luctus. Praesent sollicitudin, nulla et tincidunt eleifend, neque justo elementum metus, a tincidunt magna nisl sit amet arcu. Maecenas elementum tellus id urna tristique porta. Proin fringilla gravida volutpat. Nullam a pulvinar turpis. Nullam pretium bibendum nunc, quis feugiat eros suscipit a. Nam rhoncus nec sem ut scelerisque. Phasellus erat dolor, varius et gravida vitae, congue ut mauris. Pellentesque gravida justo non venenatis faucibus.

Dit is mijn derde paragraaf: Morbi mattis ullamcorper purus, at tristique nibh rhoncus hendrerit. Nam eu lorem sed dui malesuada suscipit vel quis tortor. Curabitur dapibus, mi a pharetra lobortis, purus enim convallis purus, quis hendrerit diam purus vitae diam. Maecenas diam libero, luctus eget tempus sed, mattis id nunc. Suspendisse euismod arcu in lorem mattis, vel convallis metus tincidunt. Aenean at risus ac est vulputate eleifend. Integer pulvinar diam vitae est viverra, eget suscipit dolor faucibus. Cras feugiat varius dictum.

<li> <ul> <ol>
Door middel van li kunt u makkelijk een onderdeel javascript lijst weergeven. U kunt het gebruiken bij <ul> (Unordered list) en <ol> (Ordered list). Bij een ul staan er punten voor elk onderwerp in een lijst en bij ol zijn dit nummers.

Bijv.: u typt een ul in:
<ul>
<li> Blog 1</li>
<li> Blog 2</li>
<li> Blog 3</li>
<li> Blog 4</li>
</ul>

U ziet:
·         Blog 1
·         Blog 2
·         Blog 3
·         Blog 4

Bijv.: u typt een ol in:
<ol>
<li> Blog 1</li>
<li> Blog 2</li>
<li> Blog 3</li>
<li> Blog 4</li>
</ol>

U ziet:
1.       Blog 1
2.       Blog 2
3.       Blog 3
4.       Blog 4

Nu u weet wat de besproken onderdelen betekenen kunt u zelf aan de slag met het aanpassen van bestaande javascript bestanden. Deze zijn vrij te downloaden om te oefenen. Wilt u direct zien wat uw aanpassingen voor effect hebben op de javascript code maar heeft u zelf geen geschikt programma, klik dan hier.