4.1 javascript introduction. 2 scripting languages distinguishing features –not compiled...
TRANSCRIPT
4.1 JavaScript Introduction
2
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
3
Scripting Languages (cont.)
• Typical additional features– associative arrays
– regular expressions
– good string processing
– objects, classes, inheritance• functionality can be added at run time
4
JavaScript
• Scripting language – 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
5
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!
6
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
7
JavaScript in IE
Enabling JavaScript in Internet Explorer 7
8
<script> Element
• <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
9
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
10
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
11
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()– displays a dialog with message passed a the argument string– and an input field where the user can type a text
12
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>