Knowledge seeker's blog: Web systems day 03-Topic: JavaScript

JavaScript was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all browsers since 1996.

Facts about JavaScript

JavaScript is an Object Based Programming language. Meaning that, it allows you to define your own objects and make your own variable types.
JavaScript is a sequence of statements to be executed by the browser
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
JavaScript is case sensitive
Single line comments start with //.
Multi line comments start with /* and end with */.

Uses of JavaScript

Text animation
Graphic animation
Simple browser based application
HTML forms submission
Client-side forms data validation (relieving the server of this task)
Web site navigation
JavaScript can manipulate HTML elements - A JavaScript can read and change the content of an HTML element
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

Employ JavaScript in your HTML documents

Create an external JavaScript (.js) file

collect commonly used functions together into external function libraries on the server

added benefit of privacy from curious users

Insert a JavaScript section that is in-line with your HTML documents
as an expression for an HTML tag attribute
within some HTML tags as Event Handlers

Manipulating HTML Elements

JavaScript is typically used to manipulate existing 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.

Write Directly into The HTML Document

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

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.

JavaScript Functions in <head>

The example below calls a function when a button is clicked:

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:

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:

JavaScript Variables

Variable names are case sensitive (y and Y are two different variables)
Variable names must begin with a letter, the $ character, or the underscore character
You declare JavaScript variables with the var keyword. E.g. var firstname;
To assign a value to the variable, use the equal (=) sign. E.g. firstname="Tom";
When you assign a text value to a variable, put quotes around the value.
When you assign a numeric value to a variable, do not put quotes around the value, if you put quotes around a numeric value, it will be treated as text.
If you redeclare a JavaScript variable, it will not lose its value.
Variables declared outside a function, become GLOBAL, and all scripts and functions on the web page can access it.
If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables.