script - LINK@KoreaTech

Download Report

Transcript script - LINK@KoreaTech

Javascript
Laboratory of Intelligent Networks(LINK)@KUT
Youn-Hee Han
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


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
Browser Problems
Before users can run JavaScript scripts in files of local
computer, they may need to change the browser’s
security settings

By default
 Internet Explorer (IE) disables JavaScript of local files
 FireFox (FF) enables JavaScript of local files
Browsers render web pages differently
DOM programming is cumbersome

each vendor implements DOM differently
 legacy of browser wars
JavaScript of local files in IE
Enabling JavaScript in Internet Explorer 7
<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!
language (or 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
<script src="login.js" language="text/javascript">
</script>
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 language="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()


displays a dialog with message passed a the
argument string
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="text/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>