HTML & teh internets
Contents JavaScript ... Javascript And JavaScript! Goal: Understand the basics
HTML, CSS, JavaScript HTML Similarities Layout: CSS Scripting: JavaScript Similarities Both are plain text Both can be used internally (embedded) or externally (linked) Both take over stuff that can also happen within HTML
JavaScript JavaScript allows you to manipulate an html page AFTER it has been sent to the client. This means you don’t have to click a link to do something. Think of: Images that change when you move the mouse over them Forms that are checked before you send them away This makes webpages more responsive
We start simple JavaScript also makes it possible to add simple programs to your pages Calculator World Clock Improved navigation Games One more thing... Java has nothing to do with JavaScript. It is a full programming language
Using JavaScript JavaScript is used like CSS Internal External <style type='text/css'> code </style> <script type='text/javascript'> code </script> External <link type='text/css' href='xyz.css' rel='stylesheet'> <script type='text/javascript' src='xyz.js'></script>
Simple program <script type='text/javascript'> <!-- <body> <script type='text/javascript'> <!-- var x = 1; var y = 2; var sum = x + y; document.write( sum ); //--> </script> </body>
Comments HTML <!– This is a comment --> CSS JavaScript (and PHP) // This is a one-line comment
Simple program <script type='text/javascript'> <!-- <body> <script type='text/javascript'> <!-- var x = 1; var y = 2; var sum = 4 + x + y; document.write( sum ); //--> </script> </body>
Simple program <script type='text/javascript'> <!-- <body> <script type='text/javascript'> <!-- var x = 1; var y = 2; var sum = '1 + 2 =' + x + y; document.write( sum ); //--> </script> </body>
Dynamic typing sum = 4 + x + y; sum = '1 + 2 = ' + 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);
Dynamic typing Declare a variable Assign a value 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';
Case Sensitive! ThisVar isn’t the same as thisVar CountThisStuff() isn’t the same as countThisStuff() The thing above is a function. A function wraps up a bit of code and makes it available to use more than once. Functions are needed if you want to do something with events.
An event is triggered by something you do in HTML Events An event is triggered by something you do in HTML Mouse click Mouse over Typing On error Etc Handout!
Function <script type='text/javascript'> <!-- <head> <script type='text/javascript'> <!-- function addNumbers( n,m ) { document.write( n + m ); } //--> </script> </head>
Calling a function <body> <input type='button' onclick='addNumbers(3,4)' value='Click me!'> </body> Mind the new <input> HTML tag! Inputs are used in forms
Inputs <input type=‘x’ name=‘y’ value=‘z’> 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
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?
Loops “Do x y times” There are also while and for/in loops. var i = 0; for ( i=1; i<=10; i++ ){ document.write( "x = "+i+"<br>" ); } There are also while and for/in loops. 19
Conditions Do x when y is true else do z 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!"); There are also switch statements 20
We’ll only use stuff that’s coming with JavaScript 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 Handout!
Methods, examples Date Math String var d=new Date(); Var str = d.getTime() + " milliseconds since 1970/01/01"); Math var r = 10; var x = Math.pow(r,2) * Math.PI; String var str = “My name Hans!"; str = str.replace("Hans", "John");
Lots of info Time for an exercise For non-Mathheads Condition 1 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 1 I want you to use a function
Done