[Guide]JavaScript - The scripting language of the Web.

Dulens. · May 22, 2012

JavaScript - The scripting language of the Web.

What is JavaScript;

JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a lightweight programming language
JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the same?

NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C .

What Can JavaScript do?

JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
JavaScript can manipulate HTML elements - A JavaScript can read and change the content of an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate form input
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

How To!

Manipulating HTML Elements

JavaScript is typically used to manipulate excisting HTML elements.

The HTML "id" attribute is used to identify HTML elements.

To access an HTML element from a JavaScript, use the document.getElementById() method.

The document.getElementById() method will access the HTML element with the specified id.

Example:

<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>
</html>

Example Explained

To insert a JavaScript into an HTML page, use the <script> tag.

Inside the <script> tag use the type attribute to define the scripting language.

The <script> and </script> tells where the JavaScript starts and ends.

The lines between the <script> and </script> contain the JavaScript and are executed by the browser:

<p id="demo">My First Paragraph.</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

In this case, the browser will access the HTML element with id="demo", and replace the content with "My First JavaScript".

Some Browsers do Not Support JavaScript

Browsers that do not support JavaScript, will display JavaScript as page content.

To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript.

Just add an HTML comment tag  (end of comment) after the last JavaScript statement, like this:

<html>
<body>
<script type="text/javascript">
<!--
document.getElementById("demo").innerHTML="My First JavaScript";
//-->
</script>
</body>
</html>

The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.

Write Directly into The HTML Document

The example below writes a <p> element into the HTML document:

<html>
<body>

<h1>My First Web Page</h1>

<script type="text/javascript">
document.write("<p>My First JavaScript</p>");
</script>

</body>
</html>

JavaScript in <body>

The example below manipulate the content of an existing <p> element when the page loads:

<html>
<body>
<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>
</html>

Note: The JavaScript is placed at the bottom of the page to make sure it is not executed before the <p> element is created.

JavaScript Functions and Events

The JavaScript statement in the example above, is executed when the page loads, but that is not always what we want.

Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button.

Then we put the script inside a function.

Functions are normally used in combination with events.

You will learn more about JavaScript functions and events in later chapters.

JavaScript Functions in <head>

<html>
<head>
<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</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 Functions in <body>

This example also calls a function when a button is clicked, but the script is placed at the bottom of the page:

<html>
<body>
<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>

Scripts in <head> and <body>

You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time.

It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.

Using an External JavaScript

JavaScript can also be placed in external files.

External JavaScript files often contain code to be used on several different web pages.

External JavaScript files have the file extension .js.

Note: External script cannot contain the <script></script> tags!

To use an external script, point to the .js file in the "src" attribute of the <script> tag:

<html>
<body>
<script type="text/javascript" src="myScript.js"></script>
</body>
</html>

JavaScript tutorial via Video:

Have fun, and wish you good practice!

[Guide]JavaScript - The scripting language of the Web.

Recommended Posts

Dulens.

Create an account or sign in to comment

Create an account

Sign in

Posts

Topics

Browse

Activity

Store