Web Usability Using JavaScript An Introduction to JavaScript Universidade Federal do Rio de Janeiro Departamento de Eletrônica e Computação Programação Avançada Alberto Wagner Collavizza Based on Mel Anderson’s JavaScript Presentation

What is JavaScript? A lightweight programming language that runs in a Web browser (client-side) Embedded in HTML files and can manipulate the HTML itself Interpreted, not compiled JavaScript is not Java Developed by Netscape, not Sun Only executed in a browser Is not a full-featured programming language However, the syntax is similar

Why use JavaScript? To add dynamic function to your HTML JavaScript does things that HTML can’t, like logic You can change HTML on the fly To shoulder some of the form-processing burden JavaScript runs in the browser, not on the Web server Better performance JavaScript can validate the data that users enter into the form, before it is sent to your Web application.

When not use JavaScript? When you need to access other resources Files Programs Databases (Unless using AJAX and a Web service) When you are using sensitive or copyrighted data or algorithms Your JavaScript code is open to the public.

Add JavaScript to HTML In the HTML page itself: // JavaScript code As a file, linked from the HTML page:

Functions JavaScript instructions are usually grouped together in a function: function myFunction(a, b, c, d) { //There is no need to define types (parameters and return) return a + “ ” + b + “ ” + c + “ ” + d; } Like a method, procedure, or subroutine Functions are called using parenthesis, like C The name of a function without parenthesis is a reference to it, and can be used as a parameter

Events There are two ways to execute a JavaScript code As the browser loads the page, inside tags Using HTML events, something has to happen before the JavaScript is executed JavaScript defines various events: onClick – link or image is clicked onSubmit – a form is submitted onMouseOver – the mouse cursor moves over it onChange – a form control is changed onLoad – something gets loaded in the browser etc Events are specified in the HTML code.

Event Example function myFunction() { // code }

Variables, Arrays and Hashes JavaScript has untyped variables Variables are declared with the var keyword: var num = “1”; var name = “Mel”; var phone = “ ”; Arrays are created using square brackets: var myColors = [“red”, “blue”, “yellow”, “green”]; Hashes (Objects) are created using curly brackets: var myUser = { name: “Alberto”, age: 22 };

More about Objects Every object in JavaScript is treated as an associative array The codes below are all equivalent var myUser = { name: “Alberto”, age: 22 }; var myUser = new Object(); myUser.name = “Alberto”; myUser.age = 22; var myUser = new Object(); myUser[“name”] = “Alberto”; myUser[“age”] = 22;

Functions Reference function alertOne() { alert(“I’m a global function!”); } function runFunction(funct) { if (typeof funct == “function”) { funct(); } } var obj = { letMeAlertSomething: function() { alert(“I’m an object function!”); }; } obj.letMeAlertSomething(); //Calling function runFunction(obj.letMeAlertSomething); //Passing function as parameter (function() { alert(“I’m an anonymous function!”) })();

Null and Undefined In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, such as var testVar; alert(testVar); //shows undefined alert(typeof testVar); //shows undefined Null is an assignment value. It can be assigned to a variable as a representation of no value: var testVar = null; alert(testVar); //shows null alert(typeof testVar); //shows object

The DOM Unlike other programming languages, JavaScript understands HTML and can directly access it JavaScript uses the HTML Document Object Model to manipulate HTML The DOM is a hierarchy of HTML things Use the DOM navigate across HMTL elements

DOM Example […] I’m a Title Do you know Google? Google And what about jQuery? jQuery […] var p = document.getElementById(“content”); for (var i = 0; I < p.childNodes; i++) alert(p.childNodes[i].tagName); // h2, a, h2, a alert(p.parentNode.tagName); //div var div = document.createElement(“div”); div.innerHTML = “Oi!”; p.appendChild(div”);

Debugging JavaScript Firebug Firefox Plug-in Edit, debug and monitor CSS, HTML, and JavaScript Incredible JavaScript Profiler

Useful Links Tutorials JavaScript Libraries EXT JS - jQuery -

Questions?