Upload
george-wood
View
221
Download
0
Embed Size (px)
Citation preview
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 QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
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>
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.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>
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.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
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!"); breakcase 3:document.write ("Hey Dude!"); breakdefault: document.write ("Hello");}
19
Arithmetic Operators
• + - * /• % modulus• ++ increment• -- decrement
• x = a + b• y = 10 mod 3?• a ++• b --
20
Assignment Statements
• x = y + 1
• x += y
• x -= y
• x *= y
• x = x + y
• x = x - y
• x = x * y
GoodIdea?