Accessing JavaScript
advertisement
Accessing JavaScript
INLINE, INTERNAL, AND EXTERNAL FILE
Accessing JavaScript in a Web Page
Web browsers are built to understand HTML and CSS and convert those languages into a visual
display on the screen. The part of the web browser that understands HTML and CSS is called the
layout or rendering engine. But most browsers also have something called a JavaScript interpreter.
That’s the part of the browser that understands JavaScript and can execute the steps of a
JavaScript program. Since the web browser is usually expecting HTML, you must specifically tell the
browser when JavaScript is coming by using the <script> tag.
The <script> tag is regular HTML. It acts like a switch that in effect says “Hey, web browser, here
comes some JavaScript code; you don’t know what to do with it, so hand it off to the JavaScript
interpreter.” When the web browser encounters the closing </script> tag, it knows it’s reached the
end of the JavaScript program and can get
back to its normal duties.
2
Accessing JavaScript in a Web Page
JavaScript can appear in several places:
•
•
•
•
Inline (JavaScript inside a tag)
Internal (JavaScript in a <script> tag)
External (JavaScript in a separate file with a .js extension)
Dynamic (In an external file loaded by JavaScript)
3
Inline JavaScript
4
Inline JavaScript
Inline JavaScript appears inside an individual tag. The JavaScript commonly appears inside a
event attribute, such as onClick (see below and next slide), or document.write (see Slide 7)
<!DOCTYPE html>
<html>
<head>
<title>Hello World 1</title>
</head>
<body>
<form>
<input type="button" value="Hello World" onClick="alert('Hello Yourself!')">
</form>
</body>
</html>
http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld1.html
5
Inline JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Hello World 2</title>
</head>
<body>
<p><a href="#" onClick="alert('Hello Yourself!')">Hello World</a></p>
</body>
</html>
Notice how the a tag has two attributes (properties) with special values:
• href attribute is "#" although it might also be empty " ", or contain "javascript:; "
- this disables normal link behavior
• onclick attribute is alert('Some Message');
- onclick is an event — the JavaScript runs when the event happens, in this case when the link
receives a click
http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld2.html
6
Inline JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Hello World 3</title>
</head>
<body>
<p><a href="javascript:alert('Hello Yourself!')">Hello World</a></p>
</body>
</html>
In this variation, the JavaScript is actually inside the href attribute. This is equivalent to the onClick
example—we don’t need to explicitly specify the "click" event, because the href takes care of that for us.
http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld3.html
7
Inline JavaScript
The above inline examples demonstrate a single line of JavaScript code—the alert() function—
which displays a message in a modal dialog box.
Inline JavaScript can be useful for certain specific tasks, but inline should be your third choice.
External JavaScript files should be your first choice, internal JavaScript your second.
8
Internal JavaScript
9
Internal JavaScript
Internal JavaScript appears inside a <script> tag, like this:
<!DOCTYPE html>
<html>
<head>
<title>Hello World 4</title>
</head>
<body>
<h2>Hello World</h2>
<script>
// JavaScript goes here, between the opening and closing <script> tags.
// Notice use of "//" comment style while in between the <script> tags.
alert('Hello Yourself!');
</script>
</body>
</html>
http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld4.html
10
Internal JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Hello World 5</title>
</head>
<body>
<h2>Hello World</h2>
<h2>
<script>
document.write("Hello Yourself!");
</script>
</h2>
</body>
</html>
http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld5.html
11
Internal JavaScript
<!DOCTYPE html>
<html>
<head>
<script>
function popup() {
alert("Hello Yourself!")
}
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Hello World">
</body>
</html>
http://faculty.cascadia.edu/cduckett/bit116/Lecture_04/helloworld6.html
12
External JavaScript File
13
External JavaScript File
To use an external JavaScript file in a web page, use the <script> tag with the src attribute pointing to the
JavaScript file.
Example:
<script src="somejavascript.js"></script>
When using the <script> tag to load an external JavaScript file, do not also use the tag as a container for
internal JavaScript — that is, do not put JavaScript (or anything thing else) between the opening tag and
the closing tag.
•
•
•
•
External JavaScript files are text files containing JavaScript, and nothing else.
Edit using any text editor. Serious JavaScript developers typically edit files using an Integrated
Development Environment (IDE) such as Dreamweaver or Komodo Edit.
Do not use the <script> tag in an external JavaScript file itself — the <script> tag goes in the web page.
When using two or more script tags on a page, the order of the tags can be significant, in terms of
JavaScript processing.
14
Dynamic JavaScript
“Dynamic” JavaScript Versus JavaScript
Fundamentally, all JavaScript can be considered dynamic. All dynamic means in this context is
that the script is performed on the client’s computer rather than on the server. However,
“dynamic” most commonly refers to scripts that control, access, or manipulate HTML
elements on the page. Dynamic JavaScript used to be called DHTML – Dynamic HTML –
however, this term is rather misrepresentative of what’s really going on.
DHTML is differentiated from Ajax by the fact that a DHTML page is still request/reload-based.
With DHTML, there may not be any interaction between the client and server after the page is
loaded; all processing happens in JavaScript on the client side. By contrast, an Ajax page uses
features of DHTML to initiate a request (or 'subrequest') to the server to perform actions such
as loading more content.
15
