Note: many of the contents of this page are taken from w3school website.

What Is A Scripting Language?

Scripting languages, also called script languages, are programming languages that are interpreted or compiled each time they run. Scripts are executed directly from their source code, which are generally text files containing language specific markup.

Thus, "scripts" are often treated as distinct from "programs", which are typically compiled from source code into binary executable files only after they are changed, and are then run from these binary files without needing the source code.

Scripts were created to shorten the traditional edit-compile-link-run process.

What Is JavaScript?

JavaScript is a scripting language most often used for client-side web development. Client-side refers to operations that are performed by the client (in our case the client is the browser) in a client-server relationship.

Despite the name, JavaScript is essentially unrelated to the Java programming language.

  • JavaScript was designed to add interactivity to HTML pages
  • A scripting language is a lightweight programming language
  • A JavaScript consists of lines of executable computer code
  • A JavaScript is usually embedded directly into HTML pages
  • JavaScript is an interpreted language (means that scripts execute without preliminary compilation)

What can a 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 put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
  • 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 read and write 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 data before it is submitted to a server. This saves the server from extra processing
  • 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

"Holle World" Script

<script type="text/javascript">
	document.write("Hello World!")
</script>

The following is the result of putting the script above into this page:

<script> tag

Script tag tells the browser where the scripting starts (<script type="text/javascript">) and ends(</script>). Type attribute indicates the type of scripting language we're using. In our case it's JavaScript, that's why type is equal to "text/javascript".

document.write

The word document.write is a standard JavaScript command for writing output to a page.

Ending Statements With a Semicolon?

In general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.

Handling browsers that do not support JavaScript

Browsers that do not support JavaScript will display the script as page content. To prevent them from doing this, we may use the HTML comment tag:

<script type="text/javascript">
  <!--
    document.write("Hello World!")
  //-->
</script>

By doing this, browsers that are not JavaScript-enabled will ignore everything inside the <!-- and the -->. JavaScript-enabled browsers, for this part, know to ignore the <!-- that marks the beginning of the HTML comment tag, while the // (a single-line JavaScript comment) before the --> ensures that the browser doesn't try to interpret the --> as some kind of JavaScript command or symbol.

The <noscript> tag

It's also a good practice to display a warning message to surfers who visit your JavaScript-powered web page using a non-JavaScript-enabled browser. To display such a message to just those surfers and not to those who have a JavaScript-capable browser, we can use <noscript> element as following:

<noscript>This web page uses JavaScript. To get the full effect, you need to
  use a web browser with JavaScript capability and set the browser to 
  have JavaScript enabled.
</noscript>

Where to Put the JavaScript

JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.

Scripts in the head section

Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.

<html>
<head>
<script type="text/javascript">
 ....
</script>
</head>

Scripts in the body section

Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.

<html>
<head>
</head>
<body>
<script type="text/javascript">
 ....
</script>
</body>

Scripts in both the body and the head section

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

<html>
<head>
<script type="text/javascript">
 ....
</script>
</head>
<body>
<script type="text/javascript">
 ....
</script>
</body>

Using an External JavaScript

Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every page.

To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.

Note: The external script cannot contain the <script> tag!

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

<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>