1. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-1 LESSON 5 INTRODUCTION JAVASCRIPT G H E F

2. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-2 JavaScript  A lightweight programming language that runs in a Web browser (client-side).  Embedded in a document and can manipulate the document itself.  Interpreted, not compiled by the browser.  It is not Java.  Developed by Netscape, not Sun.  Only executed in a browser.  It Is not a full-featured programming language.

3. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-3 How To Run? Every JavaScript program designed to run in a browser has to be attached to a document such as HTML, XHTML, XML, SVG, ect. To attach some script on an HTML page, add tag inside the head of the document. If you want to add particular script (lets say JavaScript) to the document, use type attribute with the value, as

4. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-4 JavaScript In An HTML Document // JavaScript code ………

5. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-5 Some Advantages Of Using External JavaScript file  It maintains the separation between content and behaviour (HTML and JavaScript).  It makes it easier to maintain your web pages.  It allows you to easily reuse the same JavaScript programs on different pages of your site.

6. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-6 To Reference An External JavaScript File Use the src attribute on the tag. Example: ……………….

7. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-7 How Many Extenal Scripts can attach? It is possible to include as many external scripts on your page as you want.

8. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-8 Interpreting The JavaScript Code Every time you load a page with JavaScript on it, the browser will interpret all of the included JavaScript code and figure out what to do with it.

9. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-9 Statement Each small step you take in a program is called a statement, and it tells the browser to perform an action.

10. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-10 Comment JavaScript supports two types of comments:  Single-line comment begins with two slashes (//) and runs to the end of the line  Multi-line comment starting with /* and ending with */

11. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-11 Variables 1 JavaScript has untyped variables. Variables are declared with the var keyword. Variable names can comprise almost any combination of letters and numbers, though no spaces are allowed. Most punctuation and symbols have special meaning inside JavaScript, so the dollar sign ($) and the underscore (_) are the only non-alphanumeric characters allowed in variable names. Variable names are also case sensitive.

12. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-12 Variables 2 In JavaScript, variables are loosely typed unlike the variables in the other programming languages, those are strictly typed variables. In JavaScript, a variable could start off holding a number, then change to holding a character, a word, or anything else you want it to hold.

13. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-13 Types Of Data A Variable Can Store  Numbers  Strings  Booleans  Arrays  Objects

14. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-14 Numbers Numbers in JavaScript come in two flavours:  Whole Numbers The technical term for a whole number is an integer or int.  Decimals The technical term for a decimal is called floating point number, or float.

15. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-15 Numbers In Operations While using mathematical operators with the numbers, operations is subject to standard mathematical precedence

16. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-16 String It is a series of characters of any length, from zero to infinity. T Letters, numbers, symbols, punctuation marks, or spaces, basically anything on the keyboard. To specify a string, we surround a series of characters with quote marks. Example: var crazyPunctuation = '~cr@zy_punctu&t!on'; var singleEscape = 'He said \'RUN\' ever so softly.'; var doubleEscape = "She said \"hide\" in a loud voice.";

17. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-17 String Operations To add two strings together, or concatenate them, use the + operator Example: var complete = "com" + "plete"; The value of complete will now be "complete". Use a combination of strings and string variables with the + operator Example: var name = "Slim Shady"; var sentence = "My name is " + name; The value of sentence will be "My name is Slim Shady".

18. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-18 Trick To Concatenating Strings You can concatenate numbers and strings, but the result will always end up being a string. If you try to add a number to a string, JavaScript will automatically convert the number into a string, and then concatenate the two resulting strings. Example: var sentence = "You are " + 1337 sentence now contains "You are 1337".

19. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-19 Booleans Boolean values can be either true or false. They are used mainly when we are making decisions, as we will see in a few pages time. In order to assign a Boolean value to a variable, you simply specify which state you want it to be in. true and false are keywords in JavaScript, so you do not need to put any quote marks around them. Example: var lying = true; var truthful = false;

20. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-20 Arrays To create an array, use the special array markers, which are the opening and closing square brackets. Example var rack = []; The variable rack is now an array, but there is nothing stored in it.

21. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-21 Element And Index Of An Array  Element It Is the “slot” in an array  Index It is a number that represents an element’s position in an array. var rack = []; rack[0] = "First"; rack[1] = "Second"; Arrays can contain any data type.

22. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-22 Normal Array Normal arrays are great for holding big buckets of data, but they can sometimes make it difficult to find the exact piece of data you are looking for.

23. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 5-23 Associative Array Associative arrays let you specify key value pairs. In most respects an associative array is just like an ordinary array. Instead of the indices being numbers, They are strings, which can be a lot easier to remember and reference.