220 likes | 418 Views
JavaScript 1. Java vs. JavaScript. Java Is a high level programming language Is platform independent Runs on a standardized virtual machine. Java vs. JavaScript. JavaScript Has nothing to do with Java Is a Scripting language executed by browsers
E N D
Java vs. JavaScript • Java • Is a high level programming language • Is platform independent • Runs on a standardized virtual machine
Java vs. JavaScript • JavaScript • Has nothing to do with Java • Is a Scripting language executed by browsers • Is used to add interactivity to web pages • Is fairly limited in what it can do • Code is executed by the browser • Is fairly standard across main browsers • code embedded directly in the HTML file
JavaScript • The JavaScript for a page is included in the head and / or the body of the page • Scripts in the head are executed when they are triggered. Usually used for actions in response to events • Scripts in the body are executed when the page loads. Usually used for generating content
JavaScript Variables • Variables can be declared by a var statement var intCount; var intCount = 9; • JavaScript does not have strong types • JavaScript is case sensitive! • (a..z|A..Z|_|$)(a..z|A..Z|_|$ |1..9)* • Some reserved words
This page uses a different greeting depending on the time <html> <head><title>Sample Java Script Page</title></head> <body> <script type="text/javascript"> var d = new Date(); var intHr = d.getHours(); document.write(d); document.write("<br />"); if (intHr<=11) { document.write("<b>Good morning!</b>"); } else if (intHr>11 && intHr<=16); { document.write("<b>Good afternoon!</b>"); } else { document.write("<b>Good Evening!</b>"); } </script> <br /> How are you? </body> </html>
It's still a regular html/xhtml web page, with all the usual features <html> <head><title>Sample Java Scrt Page</title></head> <body> <script type="text/javascript"> var d = new Date(); var intHr = d.getHours(); document.write(d); document.write("<br />"); if (intHr<=11) { document.write("<b>Good morning!</b>"); } else if (intHr>11 && intHr<=16) { document.write("<b>Good afternoon!</b>"); } else { document.write("<b>Good Evening!</b>"); } </script> <br /> How are you? </body> </html> NB: missing semi-colons
This script is in the body and so will be executed when the page loads. Scripts in the header will run as soon as the page loads Scripts in the body run the the order in which they appear <html> <head><title>Sample Java Script Page</title></head> <body> <script type="text/javascript"> var d = new Date(); var intHr = d.getHours(); document.write(d); document.write("<br />"); if (intHr<=11) { document.write("<b>Good morning!</b>"); } else if (intHr>11 && intHr<=16) { document.write("<b>Good afternoon!</b>"); } else { document.write("<b>Good Evening!</b>"); } </script> <br /> How are you? </body> </html> NB: missing semi-colons
new Date() gets date & time from the system. It creates a new object and assigns it to d .getHours() is a built-in method that extracts the hour from the 24 hour time <html> <head><title>Sample Java Script Page</title></head> <body> <script type="text/javascript"> var d = new Date(); var intHr = d.getHours(); document.write(d); document.write("<br />"); if (intHr<=11) { document.write("<b>Good morning!</b>"); } else if (intHr>11 && intHr<=16) { document.write("<b>Good afternoon!</b>"); } else { document.write("<b>Good Evening!</b>"); } </script> <br /> How are you? </body> </html> NB: missing semi-colons
Writes the long format date & time returned by new date() to the page Output must be correctly formatted html <html> <head><title>Sample Java Script Page</title></head> <body> <script type="text/javascript"> var d = new Date(); var intHr = d.getHours(); document.write(d); document.write("<br />"); if (intHr<=11) { document.write("<b>Good morning!</b>"); } else if (intHr>11 && intHr<=16) { document.write("<b>Good afternoon!</b>"); } else { document.write("<b>Good Evening!</b>"); } </script> <br /> How are you? </body> </html> NB: missing semi-colons
If statement in JavaScript doesn't have a then nor an end if. So beware of the deadly dangling else <html> <head><title>Sample Java Script Page</title></head> <body> <script type="text/javascript"> var d = new Date(); var intHr = d.getHours(); document.write(d); document.write("<br />"); if (intHr<=11) { document.write("<b>Good morning!</b>"); } else if (intHr>11 && intHr<=16) { document.write("<b>Good afternoon!</b>"); } else { document.write("<b>Good Evening!</b>"); } </script> <br /> How are you? </body> </html> NB: missing semi-colons
Write good morning. Note that the write statement generates html <html> <head><title>Sample Java Script Page</title></head> <body> <script type="text/javascript"> var d = new Date(); var intHr = d.getHours(); document.write(d); document.write("<br />"); if (intHr<=11) { document.write("<b>Good morning!</b>"); } else if (intHr>11 && intHr<=16) { document.write("<b>Good afternoon!</b>"); } else { document.write("<b>Good Evening!</b>"); } </script> <br /> How are you? </body> </html> NB: missing semi-colons
Boolean AND Not to be confused with & the bitwise integer and || is OR ! Is NOT <html> <head><title>Sample Java Script Page</title></head> <body> <script type="text/javascript"> var d = new Date(); var intHr = d.getHours(); document.write(d); document.write("<br />"); if (intHr<=11) { document.write("<b>Good morning!</b>"); } else if (intHr>11 && intHr<=16) { document.write("<b>Good afternoon!</b>"); } else { document.write("<b>Good Evening!</b>"); } </script> <br /> How are you? </body> </html> NB: missing semi-colons
<html> <head> <title>Sample Java Script Page</title> </head> <body bgcolor="#ffffff" text="#000000"> Hello there!<br/> <br/> <center> <script type="text/javascript"> var rand = (Math.random()); var myInt = Math.round(rand*6); document.write("<img src=\"page-photo-0" + myInt + ".jpg\“ /> <br/> <br/>"); document.write("This is image <b>No. " + myInt + "</b><br/>"); </script> </center><br/><br/> </body> </html> This page displays a random image from a selection named page-photo-00.jpg to page-photo-06.jpg
<html> <head> <title>Sample Java Script Page</title> </head> <body bgcolor="#ffffff" text="#000000"> Hello there!<br/> <br/> <center> <script type="text/javascript"> var rand = (Math.random()); var myInt = Math.round(rand*6); document.write("<img src=\"page-photo-0" + myInt + ".jpg\“ /> <br/> <br/>"); document.write("This is image <b>No. " + myInt + "</b><br/>"); </script> </center><br/><br/> </body> </html> Built-in function returns value between 0 and 1 Rounds out real to make an integer
<html> <head> <title>Sample Java Script Page</title> </head> <body bgcolor="#ffffff" text="#000000"> Hello there!<br/> <br/> <center> <script type="text/javascript"> var rand = (Math.random()); var myInt = Math.round(rand*6); document.write("<img src=\"page-photo-0" + myInt + ".jpg\“ /> <br/> <br/>"); document.write("This is image <b>No. " + myInt + "</b><br/>"); </script> </center><br/><br/> </body> </html> Builds up image tag using text literals and the value based on the random number \ is escape character to mark “ that’s literal
Exercise • Build a webpage that looks different depending on the time of day it is loaded • Use different images and colors depending on the time • Webcams are a great place to get different images of the same place
The switch statement is a handy alternative to the if statement switch(n) { case 1: document.write ("Hi Y'All!"); break case 2: document.write ("Howdy!"); break case 3: document.write ("Hey Dude!"); break default: document.write ("Hello"); } Switch Statement
+ - * / % modulus ++ increment -- decrement x = a + b y = 10 mod 3? a ++ b -- Arithmetic Operators
x = y + 1 x += y x -= y x *= y x = x + y x = x - y x = x * y Assignment Statements Good Idea?