Introduction to JavaScript

What is a Scripting Language?

Scripting languages, also called script languages, are programming languages that are generally interpreted each time they run. Scripts are executed directly from their source code.

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 cross-platform, object-oriented scripting language. It is a small and lightweight language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make web pages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object oriented and prototype based) programming styles. It has an API for working with text,arrays, dates, regular expressions, and basic manipulation of the DOM, but the language itself does not include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.

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)

JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:

• Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.
• Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.

Below is an example of a basic JavaScript function that multiply two numbers. The function is called with the parameters 6 and 9. If the code below were included in the HTML of a web page, it would display the text “54” in an alert box.

   function multiply(a,b)
   {
     return a + b;
   }
   var total = multiply(7,11);
   alert(total);
 

JavaScript functions can be called within tags or when specific events take place. Examples include onClick, onMouseDown, onMouseUp, onKeyDown, onKeyUp, onFocus, onBlur, onSubmit, and many others. While standard JavaScript is still used for performing basic client-side functions.

History

JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time. JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers. The syntax of JavaScript is mostly influenced by the programming language C.

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 of 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 multi threading or multiprocessor capabilities.

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(“

  ” + name + “

  “) 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

JavaScript and Java

JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java’s static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.

In contrast to Java’s compile-time system of classes built by declarations, JavaScript supports a run time system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.

JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.

Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can’t cast a Java integer into an object reference or access private memory by corrupting Java bytecodes. Java’s class-based model means that programs consist exclusively of classes and their methods. Java’s class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript programming.

 

 

 

“Hello World” JavaScript Program

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

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

Hello World!

The script tag

Script tag tells the browser where the scripting starts (script type=”text/javascript”) and ends(). Type attribute indicates the type of scripting language we’re using. Now the type attribute is optional for JavaScript.

document.writeln

The word document.writeln 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">
 //doing something
</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">
 //code goes here
</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">
 //code goes here
</script>

</head> <body>

<script type="text/javascript">
 //lets write some javascript code
</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="filename.js"></script>

</head> <body> </body> </html>

 
JavaScript is a surprisingly powerful language. Its unconventionality presents
some challenges, but being a small language, it is easily mastered.