4.1 JavaScript

Download Report

Transcript 4.1 JavaScript 

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>