Download
1 / 14
160 likes | 342 Views
Javascript. CS 236369, Spring 2010. What is Javascript ?. Browser scripting language Dynamic page creation Interactive Embedded into HTML pages Javascript is NOT Java Different syntax Different programming concepts Javascript runs on client-side (browser) only.
E N D
Javascript CS 236369, Spring 2010
What is Javascript ? • Browser scripting language • Dynamic page creation • Interactive • Embedded into HTML pages • Javascript is NOT Java • Different syntax • Different programming concepts • Javascript runs on client-side (browser) only
Adding Javascript to HTML • All Javascript code must be inside <script> • Old browsers do not support Javascript • Example: <html> <script language=“javascript”> <!-- document.write(“<h1>Hello World</h1>”); --> </script> <script language=“text/javascript” src=“myscript.js” /> </html>
Programming concept • No static types • Everything is an associative array • Every variable can hold attributes • No access limitations (i.e no private attributes) • Functions are variables • Dynamic binding • Inheritance is possible (though complicated and incomplete)
Variables example var x = 1; // define a numeral variable x = “123”; // x is now a string x = new Object(); // x is now an object x.attr = “val”; // x now has the attribute ‘attr’ x.f = function() { document.write(“a”); }; // x now has a function named ‘f’ x.f(); // f is invoked
Functions • Defined by the keyword ‘function’ • No return type and no argument types • Can be invoked with any number of arguments • Example: function f(x) { alert(x); } f(‘abc’); // result will be an alert box with ‘abc’ f(); // result will be an alert box with ‘undefined’ f(‘abc’, ‘edf’); // result will be an alert box with ‘abc’
Execution • Javascript code may be executed in 2 different cases: • Upon parsing the page, when the browser encounters javascript code not inside a function Example: <script type=“javascript”> document.write(‘<h1>Hi</h1>’); </script> • Events (next slide)
Events • Javascript can be activated on certain events • When a page is loaded • When a button is clicked • When a form is submitted • And many more … • Example: function f() { alert(‘clicked !’); } <input type=“button” onclick=“f();” value=“go!”/>
Events • Consider the following example <div id=“outer” onclick=“f();”> <div id=“inner” onclick=“g();”>click me</div> </div> • Which javascript function should be invoked first? • Netscape answer: f • Firefox answer: default g, can be changed to f • Microsoft Explorer: g
Events (form submission example) function validate_required(field, alerttxt) {if (field .value==null|| field.value==“”) { alert(alerttxt); return false;}return true; } function validate_form(form) { if (validate_required(form.email,”Email is requred”)==false) { return false; } return true; }
Events (form submission cont) <html> <head> <script type=“javascript” src=“example.js” /> </head> <body> <form action=“submit.jsp” onsubmit=“return validate_form(this);”> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
DOM • Javascript has built in access to the html document DOM tree • Every element in the html document can be removed or modified • New elements can be inserted to the html document dynamically
DOM Example <html><head> <script language="javascript"> function f() { var elmt = document.createElement('h1'); var txtNode = document.createTextNode('new element'); elmt.appendChild(txtNode); document.getElementById('someId').appendChild(elmt); } </script></head> <body> <input type="button" onclick="f();" value="click" /> <div id="someId" /></body></html>
References and tutorials • http://www.w3schools.com/jsref/dom_obj_document.asp • http://www.w3schools.com/js/default.asp • http://www.javascriptkit.com/javatutors/closures.shtml • http://www.webreference.com/js/column79/
