1 / 21

Dynamic Web Authoring

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

evangelia-chloe
Download Presentation

Dynamic Web Authoring

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dynamic Web Authoring Week3 – Javascript Basic H Zheng, School of C&M, UUJ

  2. Teaching Plan • Feedback on week2practicals • DOM/BOM • Javascript fundamental concepts (variable and statement)

  3. 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

  4. The Document Object Model H Zheng, School of C&M, UUJ

  5. H Zheng, School of C&M, UUJ

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  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; */ H Zheng, School of C&M, UUJ

  14. 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

  15. Exercise - variable Are these valid JavaScript variable names? • time • 123test • x1 • squared? • _1st_counter • function

  16. Exercise - variable Are these valid JavaScript variable names? • time ✔ • 123test ✗ • x1 ✔ • squared? ✗ • _1st_counter ✔ • function ✗

  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 • varmyCampus = “Jordanstown”; myCampus = 0; myCampus = true; H Zheng, School of C&M, UUJ

  18. 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”

  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 H Zheng, School of C&M, UUJ

  20. 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”;

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

More Related