JavaScript 1

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>


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



10

• Writes the long format date & time returned by new date() to the page

• Output must be correctly formatted html



11

• If statement in JavaScript doesn't have a then nor an end if.

• So beware of the deadly dangling else



12

• Write good morning.• Note that the write

statement generates html



13

• Boolean AND• Not to be confused

with & the bitwise integer and

• || is OR• ! Is NOT



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




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




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?

Documents

JavaScript 1