JavaScript:Getting Started

Overview
JavaScript allows us to dynamically change the HTML code on a Web page as the Browser renders it, or if the users action triggers it (like a mouse rollover). Before you attempt to understand my JavaScript notes you will need to have a good understanding of HTML (XHTML) and Cascading Styles Sheets (CSS).

First JavaScript
In this example we will create a Web page that includes JavaScript to display '''Hello world.. JavasScript rulz!'''. Just to show how HTML and JavaScript integrate I have included a div tag that changes the text colour to blue and in the JavaScript told the text to display as h1 (heading 1).

JavaScript (js1_01)
Example :. The diagram following shows the result in Google's chrome.

Code placement

 * JavaScript can be inserted into the HEAD or BODY section of a document.
 * If code is to be reused within a page then it is better to place the code in the HEAD section.
 * Code in the HEAD section is loaded before the page is built and any referrals within a page are already in memory.
 * Code within the page must be loaded into memory before execution.

Browser Handling

 * Older style browsers may not handle JavaScript
 * Browsers such as Internet Explorer warn you that running scripts from your local hard drive is a security risk
 * To trick the browser we enclose the JavaScript code between a &lt;!-- and //-->


 * The older browser then ignores all code between the start and end tags
 * You may come across JavaScripts inserted as

This has now be deprecated and the following format should be used:

JavaScript (js1_02)
Example :.

JavaScript layout and syntax (rules)

 * Ending Statements with a Semicolon?
 * Semi-colons are used to separate pieces of code.
 * Some languages like C++ and PHP require semi-colons, others (like JavaScript) are flexible - using a new line as an alternative. They are an important part in some statements (like it..then..else, and switch), and can be used to put multiple statements per line. Strict JavaScript requires semicolons. It is probably a good idea to get used to using them particularly if you want to progress to other languages.
 * JavaScript is Case Sensitive
 * This creates heaps of problems when you first start!!!
 * White Space doesn't count!
 * - but really useful to make your code readible.
 * To Break a line of Code in the middle of a string use \, (Note next line has to start at column 1) for example:


 * Alternatively you could concatenate (join) the string


 * Inserting special characters (use \)


 * Comments


 * Alertbox

External Script (js1_03)
js1_03.js contains

Example :.

Variables
Rules for Variable names:


 * Variable names are case sensitive
 * They must begin with a letter or the underscore character
 * Creating variables


 * using var is optional (it is good practice to use var)
 * When you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables.
 * If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.
 * If you redeclare a variable it loses its initial value.

Prompt (JavaScript 1_04)

 * The prompt object is a way that user input can be obtained and assigned to a variable... well almost! Microsoft in Internet Explorer (from version 7) have disabled this functionality, when the prompt command is called from a page on the Internet (Hunlock, 2007).

A Prompt example
(Works in most Internet browsers. Does not work in Internet Explorer 7.x)

Example :.



Conditional Operators
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. JavaScript Comparison and Logical Operators (W3Schools)

Examples

 * 1) First example, if the visitor = PRES then put Dear President otherwise just Dear
 * 2) Here id d is < 10 then a zero is added to the front else just leave d as is.

Example (js1_05)
Example :.

Note that in the example the variables are assigned numbers. If you accept values from a prompt or a text box (from a form) the "numbers" are actually text so need to be converted if you want to do arithmetic operations on them.

String concatenation(js1_06)
A string is most often text, for example "Hello World!". To stick two or more string variables together (concatenate), use the + operator

Example :.

Prompting for numbers (js1_07)
(As this uses the prompt command will not work if downloaded from the Internet in IE 7+)

When you use the prompt (or input box) to get a user to submit a number of things can go wrong!

Example :.

Alternative example for IE 7+ (js1_07a)
To show how this works in IE 7 we will assign the number "10" to num1 and "25" num2

Example :.

Converting text to numbers
One of the things you need to be very careful with in JavaScript is that adding two strings together is quite different than adding two numbers. So
 * Adding "12" + "34" will give "1234" whereas
 * Adding numbers 12 + 34 gives 46

When you get user input via a textbox (notice it is called a TEXT box) numbers are captured as strings, so before you can add them they need to be converted to numbers. You can force a number conversion by simply adding a number to the text value e.g.

Or you can use number conversion functions such as;


 * parseFloat - for conversion to a floating-point number or
 * parseInt - for string-to-integer conversion.
 * eval(string) - where the string is evaluated.

Refs: Javascript Type-Conversion (n.d.), JavaScript eval Function (Refsnes Data, 2011)

Converting text to numbers (js1_08)
(Contains prompt will work in most browsers and IE 7+ offline)

To convert an input string to number we need to use parseInt or parseFloat

Example :.

Controlling the flow - making decisions
Javascript decision functions are very similar to those used in C++

The three comonly used decision functions are:
 * if  {…..}
 * if {……} else {…..}
 * switch

Example (js1_09)
Example :.

Example (js1_10)
Example :.

Functions
To create a function you define its name, any values ("arguments"), and some statements:

Calling a function

Example 1: (js1_11)
Example :.

Example 2: (js1_13)


Example :.

Example 3: (js1_14)
Example :.