1 HTML & teh internets

2 Contents JavaScript CSS Goal: Integrating knowledge

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

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

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: = 12 sum = '1 + 2 = ' +( x + y ); –On the screen: = 3 sum = x+' + '+y+' = '+(x+y); –On the screen: = 3 5

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

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

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

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

Inputs X can be –Text –Button –Radio –Checkbox –Hidden Y should generally be unique in a page Z can be a preset value 10

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

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

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

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

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

Examples Failing apps – – Failing navigation – – phphttp:// php Gracious degradation –

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

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

19 Done