JavaScript Overview
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages.
The general-purpose core of the language has been embedded in Internet Explorer, Firefox, and other web browsers
The ECMA-262 Specification defined a standard version of the core JavaScript language.
JavaScript is:
JavaScript is a lightweight, interpreted programming language
Designed for creating network-centric applications
Complementary to and integrated with Java
Complementary to and integrated with HTML
Open and cross-platform
Client-side JavaScript:
Client-side JavaScript is the most common form of the language. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need no longer be static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism features many advantages over traditional CGI server-side scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user explicitly or implicitly initiates.
Advantages of JavaScript:
The merits of using JavaScript are:
Less server interaction: You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something.
Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.
Limitations with JavaScript:
We cannot treat JavaScript as a full fledged programming language. It lacks the following important features:
Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
JavaScript cannot be used for Networking applications because there is no such support available.
JavaScript doesn't have any multithreading or multiprocessing capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages.
JavaScript Placement
JavaScript can be placed in the <body> and the <head> sections of an HTML page.
The <script> Tag
In HTML, JavaScript code must be inserted between <script> and </script> tags.
Example
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
| Older examples may use a type attribute: <script type="text/javascript">. The type attribute is not required. JavaScript is the default scripting language in HTML. |
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "asked" for.
For example, a function can be executed when an event occurs, like when the user clicks a button.
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
| Keeping all code in one place, is always a good habit. |
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
| It is a good idea to place scripts at the bottom of the <body> element. This can improve page load, because HTML display is not blocked by scripts loading. |
External JavaScript
Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of the <script> tag:
Example
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
| External scripts cannot contain <script> tags. |
External JavaScript Advantages
Placing JavaScripts in external files has some advantages:
- It separates HTML and code
- It makes HTML and JavaScript easier to read and maintain
- Cached JavaScript files can speed up page loads
JavaScript Output
JavaScript does NOT have any built-in print or display functions.
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
- Writing into an alert box, using window.alert().
- Writing into the HTML output using document.write().
- Writing into an HTML element, using innerHTML.
- Writing into the browser console, using console.log().
Using window.alert()
You can use an alert box to display data:
Example
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Using document.write() after an HTML document is fully loaded, will delete all existing HTML:
Example
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
| The document.write() method should be used only for testing. |
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
| To "display data" in HTML, (in most cases) you will set the value of an innerHTML property. |
Using console.log()
In your browser, you can use the console.log() method to display data.
Activate the browser console with F12, and select "Console" in the menu.
Example
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Comments
Post a Comment