Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
JavaScript and Advanced HTML: A Comprehensive Guide by Ye Wu, Study notes of Software Engineering
An in-depth exploration of javascript and advanced html, written by dr. Ye wu for the software engineering for the world wide web course at george mason university. Topics covered include the basics of javascript, its uses, syntax, and various examples. Additionally, cascading style sheets (css) are introduced, with a focus on their separation of content and presentation.
Typology: Study notes
Pre 2010
1 / 16
Related documents
Partial preview of the text
Download JavaScript and Advanced HTML: A Comprehensive Guide by Ye Wu and more Study notes Software Engineering in PDF only on Docsity! 1 JavaScripts and Advanced HTML Ye Wu http://www.ise.gmu.edu/~wuye/ SWE 642 Software Engineering for the World Wide Web sources: Java for the Web with Servlets, JSP and EJB, Kurniawan, New Riders HTML 4 for the World Wide Web, Castro, Peachtree Press Core Web Programming, Hall, PTR 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 2 Java Scripts • JavaScript is not Java • JavaScript is a scripting language: – Embedded in HTML – Interpreted as the page is loaded – Can manipulate the HTML page • Is executed client site – Serverside Javascript: Netscape’s Livewire allows JavaScript to be used for CGI purposes. We will not discuss this. • No type checking, but is case sensitive. 2 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 3 Why and why not JavaScript? • What can be done with JavaScript at client side and can not be done with other techniques at server side? – Monitor user events and take action – Some dynamic effects • What can be done at both client and server side, but better to be used with JavaScript? – Build HTML dynamically when page is loaded – Interactive web pages – Data verification • What are the drawbacks of JavaScript? – Platform dependent – Can be turned off – Performance 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 4 Where does JavaScript Go and How? • Between <head> and </head> or <body> and </body> – <script language=“JavaScript”>…</script> – <script language=“JavaScript” src=“com_function.js”> …</script> • Some “script” calls may be embedded in the HTML tags. – <select name=country onchange=“jmp(url)”> – <a href=“javascript:new_window();”>New Win</a> • Comments: // -- single-line and /* */ Multi-line 5 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 9 Use BOM objects • window object is a global object. • Addressing is done by separating object, methods, and properties with dots. – window.alert(“Hello”); – alert(“Hello”); • There are also alternative way to accessing the objects. – document.forms[0].elements[0].value – document.myform.nameinput.value – document.myform[“nameinput”].value 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 10 More examples on BOM/DOM • Window.open, window.close, confirm, alert • History.go(-1) history.go(0) • Window.location.replace(“”), location.href=“”; • Window.Navigator.appName navigator.appVersion navigator.cokieEnabled, navigtor.userAgent • Window.screen.height, screen.width • Window.document. • this.value http://www.ise.gmu.edu/~wuye/classes/642/Examples/javascript/unix/BOMDOM_Example.html 6 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 11 JavaScript Uses • Two major purposes: I. Build HTML dynamically when page is loaded II. Monitor user events and take action • Classes of applications 1. Customizing web pages 2. Making web pages more dynamic 3. Validating CGI forms 4. Manipulating cookies 5. Interacting with frames 6. Calling Java programs 7. Accessing JavaScript from Java 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 12 Events and Event Handling Examples • Event handlers as Attributes <A href=“next.html” name = next onclick=“verify();”>next</a> • Event handlers as Properties document.links[0].onclick = verify; Note: 1. document.links[“next”] won’t work. 2. Verify is the name of the event handling function. • Obtain values within the page • Change value within the page • Add or remove objects http://www.ise.gmu.edu/~wuye/classes/642/Examples/javascript/unix/form.html 7 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 13 More Events • Clicking on a button • Clicking on a link • Exiting a page • Moving onto or off of a link • Input focus on a FORM element • Submitting CGI • Image loading error 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 14 Validating Forms • Valid each input fields (text, radio, and etc) • Submitting CGI Event – <FORM onSubmit="return submitIt(this)" Method="POST“ ACTION=“…”> if submitIt(this) returns false, the information will not passonto the server. else the information will. – this refers to the current form. 10 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 19 Contextual Selector Context selector is a selector that addresses specific occurrence of an element. It is a string of individual selectors separated by white space, a search pattern, where only the last element in the pattern is addressed providing it matches the specific context. P.intro B {color:red} <P class=intro>The is the <B>most important</B> part. </P> 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 20 Contextual Selector • Other Selector – Ancestor-child Selector P B {color : red} – Parent-child Selector P > B {color : red} – first-child Selector P:first-child {color : red} – Sibling Selector P + B {color : red} – Link element a:link B {color : red} a:visited B {color : red} a:focus B {color : red} a:hover B {color : red} a:active B {color : red} – first-line Selector P:first-line {color : red} – first-letter Selector P:first-letter {color : red} 11 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 21 Attribute Selector • A [title] {text-decoration:underline} • A [title =“attribute value”] {text-decoration:underline} • A [title ~= “attribute”] {text-decoration:underline} – Includes • A [title |= “attribute”] {text-decoration:underline} – Starts with 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 22 How to apply CCS (2) • External style sheet <head> <LINK REL=STYLESHEET HREF=“style.css” TYPE=“text/css”> </head> • Inline style – through style attribute <P STYLE=“cursor:move; color:blue; font-family: verdana; font- size:12pt;”>CSS</P> 12 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 23 CSS and JavaScript • Dynamic styles <P onmouseover="style.color='blue';style.fontSize=10;" onmouseout="style.color=‘red';style.fontSize=20;">Dynam ic Style</P> Note: 1. myP.style.color – means the color property of style object of myP element. (Do not forget style) 2. For properties with “-”, style objects have corresponding properties with “-” removed and the first letter capitalized. 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 24 CSS and JavaScript • attachEvent <script language=javascript> function go() { for (e=0;e<document.all.length;e++) if (document.all[e].tagName=='P') { document.all[e]. onmouseover = scred; document.all[e]. onmouseout = scblack; } } function scred() { event.srcElement.style.color='red'; } function scblack() { event.srcElement.style.color='black'; } </script> <body onload = “go();”> 15 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 29 What is DHTML • HTML • Scripting language • CSS • BOM/DOM 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 30 Online DHTML Documents • CCS2 specification – http://www.w3.org/TR/REC-CSS1 • CCS1 specification – http://www.w3.org/TR/REC-CSS2 • BOM/DOM references – ftp://ftp.dannyg.com/JSB4quickref.zip • JavaScript Documentation from Netscape – http://developer.netscape.com/docs/manuals/javascript.html • Books – Beginning JavaScript – Professional JavaScript – Pure JavaScript 16 9/9/2003 © Dr. Jeff Offutt and Dr. Ye Wu 31 JavaScript Tips • Build your script a piece at a time • Store to files and load with HTML files • Do not change variable types, do not use same name for global and local variables • Remember, JavaScript is case sensitive • Debugger – Microsoft IE • http://msdn.microsoft.com/scripting – Netscape Navigator • JavaScript console • JavaScript debugger: http://developer.netscape.com/software/jsdebug.html (out-of-date)
Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved