1 / 20

JavaScript 1

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

ling
Download Presentation

JavaScript 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related