Post on 03-Jan-2016
description
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
COM311 H Zheng, School of C&M, UUJ 4
COM311 H Zheng, School of C&M, UUJ 5
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
COM311 H Zheng, School of C&M, UUJ 6
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.
COM311 H Zheng, School of C&M, UUJ 7
DOM and BOM (2)
BOM window.open(); window.document.bgColor="#ffffff"DOM window.open("url"); document.getElementById("id").style.backgroundColor="#ffffff";
COM311 H Zheng, School of C&M, UUJ 8
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
COM311 H Zheng, School of C&M, UUJ 9
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> <!-- .... (Put Scripts here) ---> </script> </head> <body> ….. </body> </html>
COM311 H Zheng, School of C&M, UUJ 10
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
COM311 H Zheng, School of C&M, UUJ 11
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">
COM311 H Zheng, School of C&M, UUJ 12
COM311 H Zheng, School of C&M, UUJ 13
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 ✗
COM311 H Zheng, School of C&M, UUJ 17
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=“h.zheng@ulster.ac.uk”
Fundamental Concepts – 4
COM311 H Zheng, School of C&M, UUJ 19
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