Dynamic Web Authoring

Dynamic Web Authoring

Week3 – Javascript Basic

COM311 H Zheng, School of C&M, UUJ 1

Teaching Plan

Feedback on week2 practicals DOM/BOM Javascript fundamental concepts

(variable and statement)

Feedback Javascript practical

• Connect to server when you log in iMac in the lab• Finder -> go -> connect to server-> scm.ulster.ac.uk

• public_html folder must be under your server folder b00…., if you don’t have one, you need to create one, then try the URL: htpps://scm.ulster.ac.uk/~b00…/ to check if you access it, if not, you need to contact the computer office at 16E30 to check the property of your pubic_html folder

• Image object and link = > change background• DOM structure of the page

The Document Object Model


Browser Object Model

Browser Object Model (BOM): the collection of objects that define the browser window and its contents for the browser software

allows JavaScript to interface and interact with the browser itself


DOM and BOM (1)

DOM gives access to each and every element in an electronic document (be the document HTML, XHTML, or XML) • The programmer/designer just needs to call the element by its id

or by its position in the document ~ to change any element dynamically across browsers.

BOM makes objects of elements that are proper to the browser.• We are using BOM whenever we open a new window or

whenever we create an alert or create a prompt or whenever we alter the status bar message, etc. Those objects belong to the browser.


DOM and BOM (2)

BOM window.open(); window.document.bgColor="#ffffff"DOM window.open("url"); document.getElementById("id").style.backgroundColor="#ffffff";


BOM and DOM document.bgColor="#color” window.document.bgColor="#color”

using Firebug plugin to inspect elements, DOM, script, css

Where to Placing Scripts

Scripts can go in the HEAD or the BODY• Scripts in the BODY

<a href='#' onmouseover="document.photo.src='images/BMW.JPG';” onmouseout="document.photo.src='images/BMW2.jpg';">

• Place scripts in the HEAD within the <script></script> tag.<script type=“text/javascript” language=“javascript”>

Script body

</script>

Functions should be put in the HEAD, event handlers in the BODY can send values to functions in HEAD

• Put JavaScript code in a separate file


JavaScript Structure 1 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title></title> <script language=javascript type=text/javascript>  </script> </head> <body> ….. </body> </html>

Using Code Libraries

Create your own functions and store as code libraries in plain text files

Use the .js extension for code libraries Reference your source libraries using the

script tag.<script type="text/javascript" language="javascript" src="mylibrary.js”>

You can include many javascript library files


JavaScript Structure 2 <html><head><title>HTML Builder

page</title> <script type="text/javascript"

language="javascript" src="mylibrary.js"> </script> </head> <body bgColor="white"> <h1>HTML Builder</h1> <p>Fill out the form below to create a basic

html page.</p> <form name="pageform">



Fundamental Concepts - 1 Statements

• Terminated with a semicolon• x = 32;

• If too long, do NOT hit Enter on the keyboard Comments

• a single-line comment, two slashes (//): x=32; //this is the new value

• a multi-line comment, starting with /* and ending with */ /*

X=32;

Z=x+2;

*/

Fundamental Concepts - 2

Variables• types: numeric, string, Boolean, NaN (Not a number)

• x = 2 * “oops”;

• Rule: • start with an alphabetic character; • can contain numeric characters (not as the first character); • the only allowed special character is the underscore (_) (can

be the first character); • reserved words can NOT be used as variable names

Exercise - variable

Are these valid JavaScript variable names? time 123test x1 squared? _1st_counter function

Exercise - variable

Are these valid JavaScript variable names? time ✔ 123test ✗ x1 ✔ squared? ✗ _1st_counter ✔ function ✗


Fundamental Concepts - 3 Variable Scopes

• Local - : A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

• Global - A global variable has global scope which means it is defined everywhere in your JavaScript code.

Variable Initialize: • loosely typed – no need to declare types • var myCampus = “Jordanstown”;

myCampus = 0;myCampus = true;

Declare Variables

1. using var• var myName;• var myEmail;

2. multiple variables using the same var• var myName, myEmail;

3. Declare variables with initial values• var myName=“Jane”;• var myEmail;• myEmail=“[email protected]”

Fundamental Concepts – 4


Fundamental Concepts - 5

Operators: assignment; comparison; arithmetic; string; logical

• Assignment: =; Short assignment: +=, -=, *=, /=, %=• x+= 4 x = x+4

• Comparison: ==, != (not equal), >, >=, <, <=• Arithmetic: +, ++, -, --, *, /, %

• i++ i=i+1; i-- i=i-1

• Logical: &&, ||, !• “I am free” && “It is not raining” => ‘and’• “come to University by car” II “on bike” => ‘or’• ! => NOT

• Concatenation (duality of +) - connecting to strings • “I am free” + “ or” + “it is not raining” => I am free orit is not

raining

Exercise - Operatorswhat would be the value of myNo, myCheck and theName after each statement:

1. var myNo = 20;2. myNo = myNo + 8;3. myNo = myNo / 4;4. myNo ++;5. myNo += 4;6. myNo --; 7. myCheck = (myNo == 26);8. myCheck = (myNo == 8) && (myNo <= 10);9. theName=“John” + “ ” + “Glass”;

Reference

http://wps.aw.com/aw_webwizard/234/60015.cw/index.html




Dynamic Web Authoring

Documents

Transcript of Dynamic Web Authoring