Class Schedule
21 Aug | intro
23 Aug | clients
28 Aug | servers
30 Aug | networks
04 Sep | basics lab
06 Sep | structural layer
11 Sep | presentational layer
18 Sep | working with layers
20 Sep | behavior layer |
client side scripts |
DHTML practice |
next session
25 Sep | images & design
27 Sep | website lab
02 Oct | object layers
04 Oct | tools that read markup
09 Oct | document markup lab
11 Oct | spreadsheets, formulas & functions
16 Oct | data display
18 Oct | Fall Break
23 Oct | database tools
25 Oct | spreadsheets lab
30 Oct | relational databases
01 Nov | tables
06 Nov | relationships
08 Nov | input & output
13 Nov | SQL
15 Nov | complex queries
20 Nov | databases lab
22 Nov | Thanksgiving
27 Nov | presentation design
29 Nov | presentation delivery
04 Dec | presentation lab
13 Dec | 0800-1100 | final in class presentation
This work
is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
home & schedule | class blog | syllabus | contact | grades
Client side scripts do not need a server to work.
They are not for collecting data,
rather they are for introducing some sort of dynamism into your web page.
As it implies, client side scripts are scripts on a page that do all their work on the client side of the relationship. They do not depend on the server. As such, there are things they cannot do (they are not good at collecting data and storing it, for example). But there are things they can do and do well, such as causing the page to react to user input.
CGI scripts are one server-side variant. Now we will be looking at client-side scripts. Client-side scripts are very often written in JavaScript, since JavaScript is a scripting language supported by most browsers.
Client-side scripting is about "programming" the behavior of the browser.
Dynamic HTML is a collective term for a combination of new Hypertext Markup Language (HTML) tags and options, that will let you create Web pages more animated and more responsive to user interaction than previous versions of HTML.
DHTML, then, is expressed in scripts written in your HTML code to create programs that add interactivity to your page. You can find tutorials for both all over the web as well as sites that offer free examples of DHTML scripts. An example is Dynamic Drive.
JavaScript is a client-side scripting language that adds interactivity to web pages and lets designers control various aspects of the browser itself.
A scripting language like JavaScript is somewhere between a markup language, like HTML, and a full-blown programming language, like Java. (An example of Java)
With it, you can add extra functionality to your web site by using short segments of scripting code that has a syntax that is fairly easy to understand.
As with CGI scripts, there are numerous site on the web that offer free JavaScript scripts for use, many that offer to sell such scripts, and innumerable ones that incorporate JavaScript in their code. You can look at the underlying code of any page to see what they are doing.
JavaScript is a client-side scripting language. A web page designer creates simple script programs that are embedded in HTML documents and are interpretable by "script-aware" browsers.
JavaScript is well suited for responding to user actions and for doing simple processing without getting servers involved.
JavaScript is not well-suited for applications that require large amounts of data or that need access to files on the browser's machine.
Tightly intertwined with JavaScript is the Document Object Model (or DOM).
Much of JavaScript revolves around the notion of an event and what things can happen when an event occurs.
So a script allows you to specify what actions you'd like to happen when the user does something (like click on a button in a form, mouse over an object, or something else).
Understanding HTML is handy, because scripts are HTML commands, entered into the HTML code. You need to tell the browser that you are using a script and what kind of script you are using.
<html>
<head>
<title>Simple Scripts</title>
</head>
<body>
<script type="text/javascript" >
document.write("<h2>Table of Factorials</h2>");
for(i = 1, fact = 1; i < 10; i++, fact *= i) {
document.write(i + "! = " + fact);
document.write("<br>");
}
</script>
<p>Other text in the page.</p>
</body>
</html>
script
- identifies that a script is being used
type
- identifies the scripting language in use
="text/javascript"
- which, in this case, is JavaScript
document.write("...")
- content of the script
/script
- closes the script section
In this case, it needs an HTML tag that the intrinsic event depends upon; it needs
The event name and the script go inside the HTML tag and the script is enclosed in double quotation marks.
<html>
<head>
<title>Triggering Scripts</title>
</head>
<body>
<p>
<a What href="time.html" onclick ="alert('Today is '+ Date())"> time </a> is it?
</p>
<p>Other text in the page.</p>
</body>
</html>
Try some of them out by replacing the event in the code above.
If the script requires quotation marks, "use 'single quotes' to differentiate from the double quotes that enclose the entire script."