![DOM access DOM Nodes
• The hierarchical model is implemented using tables. See the • The Nodes have a Type.
Jyrki Nummenmaa
University of Tampere, CS Department
Jyrki Nummenmaa
University of Tampere, CS Department
code snippet (directly from the tutorial mentioned earlier): • Different Types have different interfaces for accessing their
var n = document.documentElement; // This is a Node object. information.
var children = n.childNodes; // This is a NodeList object. • You may, for instance, retrieve, set, or delete attributes of an
var head = children.item(0); // Here is one way to use a NodeList. Element.
var body = children[1]; // But this way is easier! • Adding, deleting and changing the nodes of the DOM model,
a JavaScript program can dynamically change the HTML
• The elements can also be addressed through names. See the page.
other snippet from the same source. All three do the same:
var f = document.forms.namedItem("myform");
var g = document.forms["myform"];
var h = document.forms.myform;
WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo
Events Javascript standard objects
• Javascript actions may be triggered from events, e.g. • navigator
Jyrki Nummenmaa
University of Tampere, CS Department
Jyrki Nummenmaa
University of Tampere, CS Department
changes on form fields or a submit button being clicked: – Browser information
– onfocus="“ Form field gets focus (validation) • window
– onblur="“ Form field looses focus (validation) – Top level window object
– onchange="“ Content of a field changes (validation) • window.frame
– onselect="“ Text is selected – represents sub-frames as windows
– onmouseover="“ Mouse moves over a link (animated buttons) • window.document
– onmouseout="“ Mouse moves out of a link (animated … ) – Current document info
– onclick="“ Mouse clicks an object • window.history
– Browsing history
– onload="“ Page is finished loading (initial actions, info,)
– onSubmit="“ Submit button is clicked (validation etc.)
• window.location
– Current URL information.
WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo
Dynamic elements Input validation
• The HTML elements are fairly static. • Using events, it is possible to trigger input validation.
Jyrki Nummenmaa
University of Tampere, CS Department
Jyrki Nummenmaa
University of Tampere, CS Department
• Javascript can, for instance, use timed events to produce • It is possible to validate one item at a time, or everything at
dynamic things in the web pages. submit time.
• As an example, let’ study a clock implementation.
s • I will leave the “What’ best?”question to usability experts.
s
– Please notice that this time is time of the client computer, • What to validate?
because the browser runs on the client and accesses the client – HTML forms can limit the input a little bit (numeric, length… )
clock information.
– Javascript can be used to validate more.
– Similarly with dates.
– However, there are things that the Javascript may be unable to
– If the server sends something in the forms, that is server do.
date/time.
• Eg if the database contents or other remote data is needed.
• As another example, you may pop up windows dynamically.
• Notice that different validations at different moments may be
– I guess these are mostly disturbing or annoying. confusing.
WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo
2](https://image.slidesharecdn.com/2621089/85/lecture-204-2-320.jpg)
![Regular expressions Regular expressions
• Regular expressions can be used in several environments • | is an or operator /x|y/ (x or y) • + means 1 or more times
Jyrki Nummenmaa
University of Tampere, CS Department
Jyrki Nummenmaa
University of Tampere, CS Department
and languages to match strings. • The following are special • ? Means {0,1}
characters: | () [ { ^ $ * + ? • E.g. /x(3)/ requires three x’s
– Examples: PHP, JavaScript, Perl
• Also, a character followed by • . matches any character
• There are some differences, so it is always worth checking is a special one, e.g. d • [listOfCharacters] matches any
the manual, but here are some general rules: • Grouping with () character in the list, you can
• Expressions start and end with the slash character ”/”and • ^ is to match at the beginning use intervals [a-z ] matches all
most normal characters have normal interpretation: • $ match at the end characters from a to z.
– E.g. /hei/ matches with /no hei/ but not with /no ei/ • Quantifiers after items • makes special characters
• {m,n} m<=occurrences<=n normal, e.g . matches a ” .”
• Strings may be tested if they match a regular expression.
if m or n is blank, 0 or infinite
• Regular expressions can also be used for conversion. • {n} occurs n times • These rules should get you
• We will review some general things, more details in tutorial: started, but there is more to
• * means 0 or more times
be studied.
http://www.webreference.com/js/column5/
WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo
Browser detection Date/time pickers
• Unfortunately not everything works equally well in all • Dates and times often appear in forms.
Jyrki Nummenmaa
University of Tampere, CS Department
Jyrki Nummenmaa
University of Tampere, CS Department
browsers. • Formatting as text is a problem
• It is also possible to use a different page for different – Internationalisation
browsers. – Format check
• For these reasons, it is sometimes important to know what – Day/Month order
browser the user is using. • Present-day solution is to use a calendar-like date/time picker
• Please study the examples. for choosing the dates.
WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo
Dynamic content Conclusions
• JavaScript can be used to directly change the DOM model • Javascript offers possibilities beyond normal HTML.
Jyrki Nummenmaa
University of Tampere, CS Department
Jyrki Nummenmaa
University of Tampere, CS Department
and thereby to change the document. • Some of them are very useful to make your application run
• The DOM model can also be used to manage XML content without problems.
(and, for istance, to generate HTML from it). • However, use Javascript with care, because:
• It can also use XMLHttpRequest objects to request data from – You may get increased maintenance problems.
the server without loading the whole page again. This – A user interface, which tries to be too smart, is usually very
provides possibilities to load new content to the page without stupid.
re-loading the page. – There may still be browsers, which do not run Javascript
– Using this technology in combination of DOM and the basic • In this case for all to work well, you may need a <noscript>
HTLM/CSS (or XHTML/CSS) is sometimes called Ajax. See the alternative implementation.
web for more information, if you are interested in the details. – Users may disable Javascript.
• Same as above.
WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo
3](https://image.slidesharecdn.com/2621089/85/lecture-204-3-320.jpg)
lecture%204
- 1. JAVASCRIPT Javascript • Up until now we have been limited to what HTML has to offer in the • Java-like scripting language Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department browser. • A browser may enable or disable. • Primarily, we have used forms, which have their fairly passive input • Used to embed functionality in web pages. items, select lists, etc. – Java applets implement all functionality. • Although the browser is basically for rendering HTML pages, there – Javascript typically only implements a part of the functionality. are two reasonably common technologies for executing program-like • Typical example tasks: code in the browser: – Browser detection – Java applets, which are Java programs which execute in the browser – Input data validation with limited rights – Customised windows – Javascript scripts – Cookie management – Date/time pickers (programs for date/time selection) • What is a ”scripting language” ? – Dynamic changes to html documents • No real definition but: quite simple, interpreted, for small things, for • See examples. specific purposes (web browsers, batch job control, shell – Please note that the examples for this lecture are in Finnish. commands… ) – English speakers may want to check a Javascript tutorial in English, such as http://www.echoecho.com/javascript0.htm WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo Basic rules Hello World • Java-style statements: • Uses a simple alert popup windows with alert(); Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department – Variables, conditionals, functions, loops, etc. – We study the language from examples. • Writes text to the document with document.write(); • Language is case-sensitive (‘ is different from ‘ ) a’ A’ • Notice that the examples are html files with embedded • In principle you may put statements in head and body parts of HTML javascript tags pages – Scripts are evaluated as they are encountered in the file. • Javascript tags: (“alert”pops up an alert window) – Logically, declarations (like functions) in head. – <script type="text/javascript"> alert(“ Hello World!");</script> – Items connected with body items in the body section. – <script> may also specify an external file • One of the key features of Javascript is that it can access the HTML elements. • <script language="JavaScript" src="calendar/calendar1.js"> – It may find them by name (within their context). </script> – It may find them by id. – <script src=“URI” specifies an URI > • For a more complete specification, see http://www.w3.org/TR/html4/interact/scripts.html • <noscript></noscript> specify code to be executed, if scripting language is not enabled. WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo Document Object Model Hierarchical DOM structure • To access the data in the HTML page, the JavaScript <html> Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department program needs some data structures to access the HTML <head> html page. <title>My Title</title> head body – As a comparison, the PHP program outputs the HTML page sequentially </head> • It would not be very handy to output the document in the <body> h1 p p changed form to the browser. <h1>This is a title</h1> My Title • For this, many browser implement an interface to what is <p>This is a <i>simple</i> called the Document Object Model (DOM). paragraph. </p> • DOM is a representation of the document in an object form, <p>Another paragraph. </p> This i paragraph Another is a paragraph accessible from JavaScript programs </body> • More explanation and examples can be found in: </html> http://www.webreference.com/programming/javascript/definitive/chap17/ simple • The elements are tree nodes. WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo 1
- 2. DOM access DOM Nodes • The hierarchical model is implemented using tables. See the • The Nodes have a Type. Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department code snippet (directly from the tutorial mentioned earlier): • Different Types have different interfaces for accessing their var n = document.documentElement; // This is a Node object. information. var children = n.childNodes; // This is a NodeList object. • You may, for instance, retrieve, set, or delete attributes of an var head = children.item(0); // Here is one way to use a NodeList. Element. var body = children[1]; // But this way is easier! • Adding, deleting and changing the nodes of the DOM model, a JavaScript program can dynamically change the HTML • The elements can also be addressed through names. See the page. other snippet from the same source. All three do the same: var f = document.forms.namedItem("myform"); var g = document.forms["myform"]; var h = document.forms.myform; WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo Events Javascript standard objects • Javascript actions may be triggered from events, e.g. • navigator Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department changes on form fields or a submit button being clicked: – Browser information – onfocus="“ Form field gets focus (validation) • window – onblur="“ Form field looses focus (validation) – Top level window object – onchange="“ Content of a field changes (validation) • window.frame – onselect="“ Text is selected – represents sub-frames as windows – onmouseover="“ Mouse moves over a link (animated buttons) • window.document – onmouseout="“ Mouse moves out of a link (animated … ) – Current document info – onclick="“ Mouse clicks an object • window.history – Browsing history – onload="“ Page is finished loading (initial actions, info,) – onSubmit="“ Submit button is clicked (validation etc.) • window.location – Current URL information. WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo Dynamic elements Input validation • The HTML elements are fairly static. • Using events, it is possible to trigger input validation. Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department • Javascript can, for instance, use timed events to produce • It is possible to validate one item at a time, or everything at dynamic things in the web pages. submit time. • As an example, let’ study a clock implementation. s • I will leave the “What’ best?”question to usability experts. s – Please notice that this time is time of the client computer, • What to validate? because the browser runs on the client and accesses the client – HTML forms can limit the input a little bit (numeric, length… ) clock information. – Javascript can be used to validate more. – Similarly with dates. – However, there are things that the Javascript may be unable to – If the server sends something in the forms, that is server do. date/time. • Eg if the database contents or other remote data is needed. • As another example, you may pop up windows dynamically. • Notice that different validations at different moments may be – I guess these are mostly disturbing or annoying. confusing. WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo 2
- 3. Regular expressions Regular expressions • Regular expressions can be used in several environments • | is an or operator /x|y/ (x or y) • + means 1 or more times Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department and languages to match strings. • The following are special • ? Means {0,1} characters: | () [ { ^ $ * + ? • E.g. /x(3)/ requires three x’s – Examples: PHP, JavaScript, Perl • Also, a character followed by • . matches any character • There are some differences, so it is always worth checking is a special one, e.g. d • [listOfCharacters] matches any the manual, but here are some general rules: • Grouping with () character in the list, you can • Expressions start and end with the slash character ”/”and • ^ is to match at the beginning use intervals [a-z ] matches all most normal characters have normal interpretation: • $ match at the end characters from a to z. – E.g. /hei/ matches with /no hei/ but not with /no ei/ • Quantifiers after items • makes special characters • {m,n} m<=occurrences<=n normal, e.g . matches a ” .” • Strings may be tested if they match a regular expression. if m or n is blank, 0 or infinite • Regular expressions can also be used for conversion. • {n} occurs n times • These rules should get you • We will review some general things, more details in tutorial: started, but there is more to • * means 0 or more times be studied. http://www.webreference.com/js/column5/ WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo Browser detection Date/time pickers • Unfortunately not everything works equally well in all • Dates and times often appear in forms. Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department browsers. • Formatting as text is a problem • It is also possible to use a different page for different – Internationalisation browsers. – Format check • For these reasons, it is sometimes important to know what – Day/Month order browser the user is using. • Present-day solution is to use a calendar-like date/time picker • Please study the examples. for choosing the dates. WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo Dynamic content Conclusions • JavaScript can be used to directly change the DOM model • Javascript offers possibilities beyond normal HTML. Jyrki Nummenmaa University of Tampere, CS Department Jyrki Nummenmaa University of Tampere, CS Department and thereby to change the document. • Some of them are very useful to make your application run • The DOM model can also be used to manage XML content without problems. (and, for istance, to generate HTML from it). • However, use Javascript with care, because: • It can also use XMLHttpRequest objects to request data from – You may get increased maintenance problems. the server without loading the whole page again. This – A user interface, which tries to be too smart, is usually very provides possibilities to load new content to the page without stupid. re-loading the page. – There may still be browsers, which do not run Javascript – Using this technology in combination of DOM and the basic • In this case for all to work well, you may need a <noscript> HTLM/CSS (or XHTML/CSS) is sometimes called Ajax. See the alternative implementation. web for more information, if you are interested in the details. – Users may disable Javascript. • Same as above. WWW programming – http://www.cs.uta.fi/wo WWW programming – http://www.cs.uta.fi/wo 3