Download presentation
Presentation is loading. Please wait.
1
HTML & teh internets
2
Contents JavaScript ... Javascript And JavaScript! Goal: Understand the basics
3
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
4
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
5
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
6
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>
7
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>
8
Comments HTML <!– This is a comment --> CSS
JavaScript (and PHP) // This is a one-line comment
9
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>
10
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>
11
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: = 12 sum = '1 + 2 = ' +( x + y ); On the screen: = 3 sum = x+' + '+y+' = '+(x+y);
12
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';
13
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.
14
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!
15
Function <script type='text/javascript'> <!--
<head> <script type='text/javascript'> <!-- function addNumbers( n,m ) { document.write( n + m ); } //--> </script> </head>
16
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
17
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
18
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?
19
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
20
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
21
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!
22
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");
23
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
24
Done
Similar presentations
