JavaScript Introduction inf385t Semantic Web 2/20/2006

What is Javascript? Scripted Programming Language Cannot run standalone. Embedded is most web browsers. Often used to create web pages that respond dynamically to user action. Also used for server side development.

History Need for client side interaction. First developed by Netscape. Later purchased by Sun. Not related to the Java Programming Language. Not quite the same as Microsoft’s JScript.

Document Object Model A framework to describe a web page (document) in a tree-like structure. Specs:

Application Programming Interface The DOM is accessed through the API. The official client-side API documentation is here:

Getting Started Usually goes between and tags. Code is also put inside HTML comments Web Page <!-- html comment // code goes here // -->

Variables <!-- html comment var x = 15; var _y = x * 10; var name = prompt("What is your name?"); // -->

Modifying a document <!-- html comment document.write("<a href=\""); document.write(document.referrer); document.write("\">Return to the last page "); // -->

Formatting Strings Strings have methods that modify the way they are printed. <!-- html comment var name = prompt("What is your name? "); document.writeln(name.fontcolor("red")); document.writeln(name.italics()); document.writeln(name.toUpperCase()); // -->

Functions <!-- html comment function foo(name) { document.writeln(name.bold()); } // -->

More Programming Constructs if if(var1==var2) {/* do stuff */ } for loops for(i=0; i < count; i++) {/* do stuff */ } while loops while(var1==var2) {/* do stuff */ } arrays var a = new Array(1, 2, 3); document.writeln (a[0]);

Interaction Link and image elements have special properties that use the definitions set up in the main block. Click me change

Forms <input type="text" name="name" size="40" value="Enter your name" onFocus="foo();" onChange="foo();" > document.form1.name.value = "John"; document.form1.name.focus();

Sorting a Table

Learning from Others Client-side Javascript can be viewed by looking at the source code for a page. Consider this function from the Google homepage. <!-- function qs(el) { if (window.RegExp && window.encodeURIComponent) { var ue=el.href; var qe=encodeURIComponent(document.f.q.value); if(ue.indexOf("q=")!=-1) { el.href=ue.replace(new RegExp("q=[^&$]*"),"q="+qe); } else { el.href=ue+"&q="+qe; } } return 1; } // -->

Applications Shadows Bookmarklet – Google Maps – Gmail – Flickr – Del.icio.us – Tecnorati – Digg –