client-side scripting requires browsers to run the scripts on the client machine
and does not interact with the server while processing the client-side scripts.
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.
We mentioned that server-side scripts are often a CGI 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.
According to W3Schools,
Client-side scripting is about "programming" the behavior of the browser.
What do we mean by "dynamic" HTML? According to one definition,
Dynamic HTML is a collective term for a combination of HTML tags and options, that will let you create Web pages more animated and more responsive to user interaction than static HTML.
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.
The script explained:
Remember
| UNIX/LINUX ⇒ | command | argument | value |
| HTML ⇒ | tag | attribute | value |
| CSS ⇒ | selector | declaration property | declaration value |
| JavaScript ⇒ | script | variable | value |
The following script is an automatic script: it automatically adds text to a page
script - identifies that a script is being used
document.write("...") - content of the script
/script - closes the script section
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Scripts</title>
</head>
<body>
<script>
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>
The following script is a triggering script: it requires a user action to trigger it
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.
<!DOCTYPE html>more variations on the same theme
<html lang="en">
<head>
<title>Triggering Scripts</title>
</head>
<body>
<h2>What time is it?</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.
</button>
<p id="demo"></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."