Javascript maakt het internet dynamisch. Het is een op objecten gebaseerde functionele taal welke naadloos samenwerkt met HTML. In de cursus HWUD04 leer je de web-ontwikkeltalen HTML, CSS en javascript zodat je uiteindelijk geoweb applicaties kunt bouwen: online interactieve en responsive webkaarten. HWUD is een vak gegeven bij Geo, Media & Design aan Aeres Hogeschool Almere.

1. Javascript
CHERYL VAN KEMPEN – HWUD04

2. Lesson Up
 Recap
 HTML & CSS:
https://LessonUp.app/invite/h/
XhGZMt3JtiRniLu7c
 HTML review 1:
https://LessonUp.app/invite/h/
PJPMZqZPnMNeSyAcL
 HTML review 2:
https://LessonUp.app/invite/h/
CNMhcEwS4iDXEkKXv

3. Sprint Hoofdstukken Paragrafen
1 1 H1.1, 1.2, 1.3, H8.1
2 6, 8 H6, H8.1.5, H8.6, 8.7, 8.8
3 H8.2, 8.3, 8.4
4 H1.4, 1.5, 1.6, H8.5
5 9, 10 H9, H10
1. Geschiedenis v.h. internet
1.1 Geschiedenis
1.2 Filosofie v.h. internet
1.3 Soorten websites
8. Hoe werkt het internet?
8.1 Webtalen
8.6 Domeinnamen
8.7 Compatibiliteit
8.8 Servers
6. Javascript
8.1.5 Javascript
6 Functioneel ontwerp:
Navigeren, menu’s, wireframes,
Dynamisch, breadcrumbs
Sprint 2

4. Sprint 2.
 Javascript op je website:
 Maak een bestand javascript.html om in te oefenen.
 Doorloop “Learn the basics” van https://www.learn-js.org/ en pas het geleerde toe in je
oefen-pagina.
 Pas het geleerde toe op je website.
 HUISWERK: Kies een spel van de volgende pagina.
 Speel 15 minuten. Maak dan een screenshot en schrijf een review. Waarom koos je dit
spel? Heb je er wat van geleerd? Vond je het nuttig?
 https://tutorialzine.com/2016/05/10-fun-browser-games-for-learning-web-development
WK 1: Javascript
WK 2: Jquery
WK 3: Bootstrap

5. Bootstrap

7. WAAR • Head
• Body
• Extern
• HTML

8. Output
• innerHTML
• document.write()
• window.alert()
• console.log()
<h2>innerHTML</h2>
Plain text overwrite…

9. Javascript
• Change HTML Content:
document.getElementById("demo").innerHTML = "Hello JavaScript";
• Change HTML Attribute Values
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif’”>
Turn off the light</button>
• Change HTML Styles (CSS)
document.getElementById("demo").style.fontSize = "35px";
• Hide HTML Elements
document.getElementById("demo").style.display = "none"; vs “block”

11. Javascript Statements = lijntjes schrijven
• Variabelen & Operators: + - / = *
• Keywords (reserved)
• // Comments

12. Loops
• for
• for/in (eigenschappen van een object)
• for/of (waardes van een object)
• while
• do/while
var i;
for (i = 0; i < cars.length; i++)
{ text += cars[i] + "<br>"; }

13. Vergelijken en voorwaardes
if (hour < 18)
{ greeting = "Good day"; }
else { greeting = "Good evening";}

14. Variabelen
var myNumber = 3; // a number
var myString = "Hello, World!" // a string
var myBoolean = true; // a boolean
var myArray = []; // an array
var myObject = {}; // an object
Arrays & Objecten
var cars = ["Saab", "Volvo", "BMW"];
var car = {type:"Fiat", model:"500",
color:"white"};

15. Car[“name”]

16. function myFunction(p1, p2)
{
// Do something with p1 and p2
return p1 * p2;
}
myFunction();
var text = "going to run " + myFunction(7,7) + " times";
<a href=“javascript:myFunction(2,3)”>test</a>
myFunction = (p1, p2) => p1 * p2;

17. var myArray = [0, 1, 2, 3, 4];
var myArray = []
myArray[3] = "hello"
console.log(myArray);
>> [undefined, undefined, undefined, "hello"]
console.log(myArray[3]);
>> "hello"
Methods:
Push, pop,
shift, splice,
Join, toString,
Sort, reverse

18. JSON
{
"employees":
[ {"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
• {objects}
• [arrays]
• Data is in {name: value pairs}
• Data is separated by commas,

19. Sprint 2.
 Javascript op je website:
 Maak een bestand javascript.html om in te oefenen.
 Doorloop “Learn the basics” van https://www.learn-js.org/ en pas het geleerde toe in je
oefen-pagina.
 Pas het geleerde toe op je website.
 HUISWERK: Kies een spel van de volgende pagina.
 Speel 15 minuten. Maak dan een screenshot en schrijf een review. Waarom koos je dit
spel? Heb je er wat van geleerd? Vond je het nuttig?
 https://tutorialzine.com/2016/05/10-fun-browser-games-for-learning-web-development
WK 1: Javascript
WK 2: Jquery
WK 3: Bootstrap