![Page 1: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/1.jpg)
CSC 4800
Javascript
![Page 2: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/2.jpg)
Javascript Syntax
• See book!
![Page 3: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/3.jpg)
How to embed javascript
• between <script></script>
• from an external file• In an event handler• URL - bookmarklet
<script language=“javascript”>
<![CDATA[// javascript code
]]> </script>
<script src=“myfile.js”></script>
<input … onclick=“foo();” />
![Page 4: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/4.jpg)
Timers• id = setTimeout(code, delay)• clearTimeout(id)• id = setInterval(code, interval)• clearInterval(id)
![Page 5: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/5.jpg)
When is javascript executed?
• Code can be embedded at various places in the document. It executes when that section of the document is rendered.– This is the one time you can use document.write() without erasing the current document!
• More frequently, code is attached to an event handler. It runs when the event occurs.
![Page 6: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/6.jpg)
Naming document objects
<form name=“f1”>…</form>
• document.forms[0] // by position• document.forms.f1 // by name• document.forms[“f1”] // array index
• As we will shortly see, we will normally use other methods to access pieces of a document.
![Page 7: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/7.jpg)
DOM
![Page 8: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/8.jpg)
InterfacesJavascript defines interfaces for:• document
– createAttribute(), createElement(), createTextNode()– getElementById(), getElementsByTagName()
• node– appendChild(), removeChild(), replaceChild()– insertBefore()
• element– getAttribute(), setAttribute(), removeAttribute()– getElementsByTagName()
This list is not exhaustive!
![Page 9: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/9.jpg)
DOM Levels
• DOM Level 1, October 1998.– defines core DOM interfaces, such as Node, Element,
Attr, and Document– All modern browsers
• DOM Level 2, November 2000.– required core module has Document, Node, Element,
and Text interfaces (and others)– events, css– Firefox, Safari, Opera– IE supports some level 2, like CSS; but not events
![Page 10: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/10.jpg)
innerHTML property
• more convenient than createElement(), appendChild()
![Page 11: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/11.jpg)
scripting CSS
• Set the style directly• change the class• change the stylesheet
![Page 12: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/12.jpg)
Javascript Events
• Three event models– original event model– standard event model– IE event model
![Page 13: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/13.jpg)
Basic Event Handling• Events and Event Types
– onblur– onchange– onclick, ondblclick– onkeydown, onkeypress,
onkeyup– onmouseover,
onmousedown, onmousemove, onmouseout, onmouseup
– onfocus– onload– onsubmit– etc.
• Device-dependent vs. device-independent events
![Page 14: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/14.jpg)
Event Handlers as Attributes<input type=“button” …onclick=“alert(‘pressed’);” />
• Usually better to call a function:
<form … onsubmit=“return formvalidate()”>
![Page 15: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/15.jpg)
Event Handlers as Properties
document.f1.b1.onclick=myfunction;• Note that the line is NOT:document.f1.b1.onclick=myfunction();
• Advantages (vs attributes)– reduces intermingling of HTML and js– dynamic
• Disadvantage– separates handler from element
![Page 16: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/16.jpg)
Event Handler Return Values
• return false to prevent default action• For example, form validation.
![Page 17: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/17.jpg)
Event Handlers and this
• handler is a method of the element that generated the event.
button.onclick = o.mymethod;
• Inside mymethod, ‘this’ refers to button, not to o.• You can do this:button.onclick = function() {o.mymethod();}
![Page 18: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/18.jpg)
Javascript & forms• Every form element has a name attribute used
for form submission:<input type=“text” name=“lastname” …/>
• <form> also has a name attribute– Not used for form submission– But can be used with javascript<form name=“studentform” …>
can be accessed likedocument.studentform
and the fields can be accessed likedocument.studentform.lastname
![Page 19: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/19.jpg)
Form element properties
• type (read-only)• form (read-only)• name (read-only)• value (read/write)
– string sent to server when form is submitted.– text, textarea: text entered by user– radio, checkbox:
• value not seen by user• a string set in html
![Page 20: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/20.jpg)
Ajax
• Using XMLHttpRequest– create XMLHttpRequest object– specify and submit HTTP request to server– (usually) asynchronously retrieve response
![Page 21: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/21.jpg)
Creating a request object// This is a list of XMLHttpRequest creation
factory functions to tryHTTP._factories = [
function() { return new XMLHttpRequest(); },function() { return new
ActiveXObject("Msxml2.XMLHTTP"); },function() { return new
ActiveXObject("Microsoft.XMLHTTP"); }];
// When we find a factory that works, store it hereHTTP._factory = null;
// Create and return a new XMLHttpRequest object.// // The first time we're called, try the list of factory functions until// we find one that returns a nonnull value and does not throw an// exception. Once we find a working factory, remember it for later use.//HTTP.newRequest = function() {
if (HTTP._factory != null) return HTTP._factory();
for(var i = 0; i < HTTP._factories.length; i++) {try {
var factory = HTTP._factories[i];var request = factory();if (request != null) {
HTTP._factory = factory;return request;
}}catch(e) {
continue;}
}
// If we get here, none of the factory candidates succeeded,// so throw an exception now and for all future calls.HTTP._factory = function() {
throw new Error("XMLHttpRequest not supported");}HTTP._factory(); // Throw an error
}
![Page 22: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/22.jpg)
Sending/Handling async responsefunction makerequest() {
var request = HTTP.newRequest();
request.onreadystatechange = function() {
if (request.readyState == 4) { // if request is finished
if (request.status == 200) { // if it was successful
alert(request.responseText);}
}}
request.open("GET", 'getcountries');
request.send(null);}
Using Ajax from html:
<h2 onclick="makerequest()">Simple Ajax</h2>
![Page 23: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/23.jpg)
Javascript Libraries
• Prototype - http://www.prototypejs.org/• script.aculo.us
![Page 24: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/24.jpg)
Prototype: Ajax.Updater• In the layout:<%= javascript_include_tag :defaults %><%= stylesheet_link_tag "ajaxtest" %>• javascript:<script type="text/javascript">//<![CDATA[
function makerequest() {new Ajax.Updater('cresult','getcountries',
{ method: 'get', parameters: {name: $('name').value} });
return false; // don’t submit the form!}//]]></script>
![Page 25: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/25.jpg)
Prototype: Ajax.Updater
• HTML:<h2>Prototype Ajax Example</h2><form action="#" onsubmit="return makerequest()" ><input type="text" name="name" id="name" /><input type="submit"></form><div id="cresult"></div>
![Page 26: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/26.jpg)
Prototype: Ajax.Updater• getcountries.rhtml<ul><% @countries.each do |c| %>
<li><%= c.name %></li><% end %>
</ul>
• getcountries in controllerdef getcountries
name = params['name'] || 'G';@countries = Country.find(:all, :conditions =>
["name ilike ?", name+'%'])
render :layout => falseend
![Page 27: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/27.jpg)
script.aculo.us autocomplete• View<%= text_field 'user', 'country' %> <br/><div id="user_country_auto_complete"
class="auto_complete"></div><%= auto_complete_field :user_country,
:url=>{:action=>'autocomplete_countries'} %>
• autocomplete_countries.rhtml<ul class="autocomplete_list"><% @countries.each do |c| %><li class="autocomplete_item"><%= c.name %></li><% end %></ul>
![Page 28: PowerPoint Presentationrschumey/csc4800/notes/javascript.pdf · When is javascript executed? • Code can be embedded at various places in the document. It executes when that section](https://reader031.vdocument.in/reader031/viewer/2022030509/5ab8617e7f8b9aa6018c97a7/html5/thumbnails/28.jpg)
script.aculo.us autocomplete
• controller code for autocompletedef autocomplete_countries
@countries = Country.find(:all, :conditions =>
["name ilike ?", params[:user][:country]+'%'])
render :layout => false end