1. 1 JavaScript 1

2. 2 Java vs. JavaScript Java –Is a high level programming language –Is platform independent –Runs on a standardized virtual machine

3. 3 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

4. 4 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

5. 5 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

6. 6 This page uses a different greeting depending on the time Sample Java Script Page var d = new Date(); var intHr = d.getHours(); document.write(d); document.write(" "); if (intHr<=11) { document.write(" Good morning! "); } else if (intHr>11 && intHr<=16); { document.write(" Good afternoon! "); } else { document.write(" Good Evening! "); } How are you?

7. 7 It's still a regular html/xhtml web page, with all the usual features Sample Java Scrt Page var d = new Date(); var intHr = d.getHours(); document.write(d); document.write(" "); if (intHr<=11) { document.write(" Good morning! "); } else if (intHr>11 && intHr<=16) { document.write(" Good afternoon! "); } else { document.write(" Good Evening! "); } How are you? NB: missing semi-colons

8. 8 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 Sample Java Script Page var d = new Date(); var intHr = d.getHours(); document.write(d); document.write(" "); if (intHr<=11) { document.write(" Good morning! "); } else if (intHr>11 && intHr<=16) { document.write(" Good afternoon! "); } else { document.write(" Good Evening! "); } How are you? NB: missing semi-colons

9. 9 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 Sample Java Script Page var d = new Date(); var intHr = d.getHours(); document.write(d); document.write(" "); if (intHr<=11) { document.write(" Good morning! "); } else if (intHr>11 && intHr<=16) { document.write(" Good afternoon! "); } else { document.write(" Good Evening! "); } How are you? NB: missing semi-colons

10. 10 Writes the long format date & time returned by new date() to the page Output must be correctly formatted html Sample Java Script Page var d = new Date(); var intHr = d.getHours(); document.write(d); document.write(" "); if (intHr<=11) { document.write(" Good morning! "); } else if (intHr>11 && intHr<=16) { document.write(" Good afternoon! "); } else { document.write(" Good Evening! "); } How are you? NB: missing semi-colons

11. 11 If statement in JavaScript doesn't have a then nor an end if. So beware of the deadly dangling else Sample Java Script Page var d = new Date(); var intHr = d.getHours(); document.write(d); document.write(" "); if (intHr<=11) { document.write(" Good morning! "); } else if (intHr>11 && intHr<=16) { document.write(" Good afternoon! "); } else { document.write(" Good Evening! "); } How are you? NB: missing semi-colons

12. 12 Write good morning. Note that the write statement generates html Sample Java Script Page var d = new Date(); var intHr = d.getHours(); document.write(d); document.write(" "); if (intHr<=11) { document.write(" Good morning! "); } else if (intHr>11 && intHr<=16) { document.write(" Good afternoon! "); } else { document.write(" Good Evening! "); } How are you? NB: missing semi-colons

13. 13 Boolean AND Not to be confused with & the bitwise integer and || is OR ! Is NOT Sample Java Script Page var d = new Date(); var intHr = d.getHours(); document.write(d); document.write(" "); if (intHr<=11) { document.write(" Good morning! "); } else if (intHr>11 && intHr<=16) { document.write(" Good afternoon! "); } else { document.write(" Good Evening! "); } How are you? NB: missing semi-colons

14. 14 Sample Java Script Page Hello there! var rand = (Math.random()); var myInt = Math.round(rand*6); document.write(" "); document.write("This is image No. " + myInt + " "); This page displays a random image from a selection named page-photo-00.jpg to page-photo-06.jpg

15. 15 Sample Java Script Page Hello there! var rand = (Math.random()); var myInt = Math.round(rand*6); document.write(" "); document.write("This is image No. " + myInt + " "); Built-in function returns value between 0 and 1 Rounds out real to make an integer

16. 16 Sample Java Script Page Hello there! var rand = (Math.random()); var myInt = Math.round(rand*6); document.write(" "); document.write("This is image No. " + myInt + " "); Builds up image tag using text literals and the value based on the random number \ is escape character to mark “ that’s literal

17. 17 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

18. 18 Switch Statement 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"); }

19. 19 Arithmetic Operators + - * / % modulus ++ increment -- decrement x = a + b y = 10 mod 3? a ++ b --

20. 20 Assignment Statements x = y + 1 x += y x -= y x *= y x = x + y x = x - y x = x * y Good Idea?