1. 1 HTML & teh internets

2. 2 Contents JavaScript CSS Goal: Integrating knowledge

3. HTML, CSS, JavaScript 3 HTML –Layout: CSS –Scripting: JavaScript Plain text Dynamic HTML

4. Simple program <!-- var x = 1; var y = 2; var sum = x + y; document.write( sum ); //--> 4

5. Dynamic typing sum = 4 + x + y; –Variable sum becomes a number –On the screen: 7 sum = '1 + 2 = ' + x + y; –Variable sum becomes a string –On the screen: 1 + 2 = 12 sum = '1 + 2 = ' +( x + y ); –On the screen: 1 + 2 = 3 sum = x+' + '+y+' = '+(x+y); –On the screen: 1 + 2 = 3 5

6. Dynamic typing Declare a variable var xyz; (can’t begin with number) Assign a value xyz = 12; //integer Type depends on declaration xyz = 'hello'; //string xyz = 1.5; //float xyz = true; //boolean In one go… var xyz = 'hello'; 6

7. Function <!-- function addNumbers( n,m ) { document.write( n + m ); } //--> 7

8. Functions and scope function addNumbers( n, m ){ var result = n + m; n = 1; m = 1; return result; } var result = 0; var m = 3; var n = 4; var sum = addNumbers( n, m ); //what is the value of the variables? 8

9. Calling a function Mind the new HTML tag! Inputs are used in forms 9

10. Inputs X can be –Text –Button –Radio –Checkbox –Hidden Y should generally be unique in a page Z can be a preset value http://www.indeles.nl/em_a/index.php?page_id=399 10

11. Constructs var i = 0; for ( i=1; i<=10; i++ ){ document.write("x = "+i+" " ); } var d = new Date(); //new date object var time = d.gethours(); //call method from object if (time<9){ document.write("Good morning!"); } else{ document.write("You're late!"); } 11

12. Objects and methods We’ll only use stuff that’s coming with JavaScript –Date object –Math object –String as an object Objects have methods and properties –Property is a predefine value –Method is a function within an object

13. Fibonacci example Time for an exercise –Fibonacci sequence –0, 1, 1, 2, 3, 5, 8, 13, 21, etc For non-Mathheads –0 + 1 = 1 –1 + 1 = 2 –1 + 2 = 3 –2 + 3 = 5 Condition –I want you to use a function and an input

14. What did we learn? Function 008 document.getElementById('n').value 017 result = result +c + " "; 023 document.getElementById('result'). innerHTML = result; Input 031 <input type='button' value='Iterate‘ onclick='makeSequence()'> Place for result 033 14

15. So… we learned JavaScript? JavaScript is interesting for two things –Creating simple applications –For designing navigation I have no issues at all with the first –You want to use a tool? Get the goods! I do have issues with the second –You enter and the navigation is missing? –You click a link and nothing happens? –Sloppy JavaScript + JavaScript disabled

16. Examples Failing apps –http://3voor12.vpro.nl/luisterpaal/http://3voor12.vpro.nl/luisterpaal/ –http://www.google.nl/ighttp://www.google.nl/ig Failing navigation –http://www.dokimos.org/ajff/http://www.dokimos.org/ajff/ –http://www.betapartners.nl/leerlijn/catalogus. phphttp://www.betapartners.nl/leerlijn/catalogus. php Gracious degradation –http://tweakers.net/http://tweakers.net/

17. Question… Why do you actually want a fold-up menu? Mind that about 5% of the populace has JavaScript turned off So what could you use JavaScript for in the proper way? –See article on EMM website

18. Today… I’ll entertain you with a real programmer’s problem. –Idea –Problems –Google Ask about your (technical) issues –Next week as well

19. 19 Done