4.1 JavaScript Introduction
Scripting Languages Distinguishing features not compiled interpreted not strongly typed subprograms can be added at run time text of program code can be directly executed programs can be constructed at run time
Scripting Languages (cont.) Typical additional features associative arrays regular expressions good string processing objects, classes, inheritance functionality can be added at run time
JavaScript Scripting language Adds functionality to web pages associative arrays DOM (Document Object Model) is directly accessible Adds functionality to web pages Runs on the client side interpreter is embedded in the browser Makes it possible to change XHTML elements and their properties Dynamic HTML (DHTML) JavaScript = ECMA-Script Syntax like C
JavaScript vs. Java JavaScript is quite different from Java similar syntax because they both descend from C Java is strongly typed Java is compiled (into byte code) actually hybrid because byte code is mostly interpreted Java has strong Object Oriented foundation in JavaScript, OO was an afterthought now is getting better The name was primarily a marketing decision Sun and Netscape against Microsoft We will primarily learn JavaScript in terms of its differences to Java We assume that you know Java well!
Browser Problems Before users can run JavaScript scripts, they may need to change the browser’s security settings By default Internet Explorer (IE) disables JavaScript FireFox (FF) enables JavaScript Browsers render web pages differently DOM programming is cumbersome each vendor implements DOM differently legacy of browser wars
Enabling JavaScript in Internet Explorer 7 JavaScript in IE Enabling JavaScript in Internet Explorer 7
<script> Element either contains scripts an entire program can be placed there or contains reference to external scripts file this is the preferred way! type attribute specifies the scripting language used text/javascript for JavaScript there is also VBScript language Microsoft's effort to dominate the market src attribute URL of a file with an external script standard file extension .js for JavaScript source files s
JavaScript in a Web Page Typically, <script> is placed within the <head> element of the XHTML document the contents inside <head> is interpreted first this is the preferred way But <script> elements can be placed in the <body> element, too they are executed in the order in which they appear in the XHTML document Script fragments occur in the attributes of other elements e.g. in elements of a form (<input> button), <div> element to define the response to events typically just a function call
Script Inside <script> Some browsers do not support <script> we must put the script within an XHTML comment <script type = "text/javascript"> <!–- … //--> </script> the JavaScript comment // is needed so that --> isn't interpreted as JavaScript statement otherwise the script will appear as web page text
Writing a Web Page The DOM document object represents the XHTML document of the web page currently displayed in the browser document.write() or document.writeln() insert XHTML code into the XHTML document once the page is rendered, document.write() replaces the entire page this allows us to specify (portions of) a web page via scripting! alert() displays a dialog with message passed a the argument string prompt() and an input field where the user can type a text
Example <html xmlns = "http://www.w3.org/1999/xhtml"><head> <title>Welcome</title> <link rel="stylesheet" href="sample.css" /> <script language="JavaScript" src="sample.js"></script> </head><body> <script type = "text/javascript"> <!— var title = "Welcome"; var text = "415 is fun!"; document.writeln("<h1>"+title+"</h1>"); document.writeln("<p>"+text+"</p>"); alert (title+"\n"+text); //--> </script> </body></html>