210 likes | 302 Views
Dynamic Web Authoring. Week 3 – Javascript Basic. Teaching Plan. Feedback on week 2 practicals DOM /BOM Javascript fundamental concepts (variable and statement). Feedback. Javascript practical Connect to server when you log in iMac in the lab
E N D
Dynamic Web Authoring Week3 – Javascript Basic H Zheng, School of C&M, UUJ
Teaching Plan • Feedback on week2practicals • 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_htmlfolder • Image object and link = > change background • DOM structure of the page
The Document Object Model H Zheng, School of C&M, UUJ
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 H Zheng, School of C&M, UUJ
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. H Zheng, School of C&M, UUJ
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 H Zheng, School of C&M, UUJ
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 H Zheng, School of C&M, UUJ
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> H Zheng, School of C&M, UUJ
Using Code Libraries • Create your own functions and store as code libraries in plain text files • Use the .jsextension 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 H Zheng, School of C&M, UUJ
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"> H Zheng, School of C&M, UUJ
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; */ H Zheng, School of C&M, UUJ
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 • varmyCampus = “Jordanstown”; myCampus = 0; myCampus = true; H Zheng, School of C&M, UUJ
Fundamental Concepts – 4 • Declare Variables • using var • varmyName; • varmyEmail; • multiple variables using the same var • varmyName, myEmail; • Declare variables with initial values • varmyName=“Jane”; • varmyEmail; • myEmail=“h.zheng@ulster.ac.uk”
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 H Zheng, School of C&M, UUJ
Exercise - Operators what would be the value of myNo, myCheck and theName after each statement: • varmyNo= 20; • myNo= myNo + 8; • myNo= myNo / 4; • myNo++; • myNo+= 4; • myNo--; • myCheck = (myNo== 26); • myCheck = (myNo == 8) && (myNo<= 10); • theName=“John” + “ ” + “Glass”;
Reference • http://wps.aw.com/aw_webwizard/234/60015.cw/index.html