Javascript 1995: Netscape developed LiveScript as client/server language and Sun/Netscape changed its name to Javascript. Microsoft created Jscript then vbscript but it was server side only or limited to client, and it also worked only on IE. It is an interpreted language [or scripting language] therefore it is easier to program. [Compiled programs such as Java are more complex and have more rules].
Categories: Core javascript: describes fundamental elements such as loop, for, then, etc. Client js: specific to interacting with the web browser [window management, cookies etc] Server side js: processed on server while the interpreter lives on the web browser. Attributes: Interpreted [takes script line by line and executes it] Object-oriented [has a number of prebuilt components we can access and utilize] Simple and easy to learn but stricter than html and is case sensitive Uses browser as computing platform
Applications of js: Interactive user interface Data look up [storing and retrieving data] Forms validation Data visualization [charts, graphics etc.] Dynamic html [animation and interactivity etc.]
Types of js: Internal: embedded with a Doc body
Eg.: [name of object, followed by period, followed by method name, followed by a parameter list between document.write (“”) [object.method (“what goes on page – the command for the outpout”)] We could also add formatting within the quotes eg.
1
brackets that might be empty. inline Eg: Title of page Commenting: Type: attribute to define the scripting language For browsers that do not understand or have disabled js. The semi colon is optional but it enables us to write multiple statements
// single line commenting /* multiple line commenting multiple */
Use of braces: {} opening brace indicates beginning of statement block. Closing brace indicates end of that block. Please opening brace directly below the keyword to which it belongs. Always indent statements contained within the statement block. Always place closing brace so that it is vertically aligned with its corresponding opening brace. Eg. in Head: Add the Back to Previous page function: Back to previous page
2
When does js execute? While docs load After docs load In response to something a user does Called upon by other script statements.
Debugging in IE: Tools | Internet Options | Advanced Under ‘Browsing’ check Display notification about every script error. In status bar there is an ! mark that shows. Click to display error
Debugging Javascript
In IE: go to Tools | Internet Options | Advanced under section labeled „browsing‟ check box. Displays notification about script errors. At the bottom there is an ! mark in the status bar. Click to see error. In Firefox: download webdev.
Objects
Javascript is all objects. Form is an object and it contains other objects such as a text box and list box etc. Whatever is defined in that page with html tags such as a window, a form, a radio button or a text field becomes an object that you can access with js statements. When describing an object, separate each element with a period from the general to the specific. You start with window then move to form then any other elements you are trying to access. These objects are always preceded by its predecessor, except the „window‟ object – we don‟t have to mention window every time though: Object window document applet anchor area class form button Syntax window document document.applet document.,someAnchor document.someArea document.someClass document.someForm document.someForm.someButton
Each object has properties and values. The object myHouse would include a property such as color(yellow), yard(yes).
Attribute and value:
We could write js in blocks: Commenting in js: Single line comments: //whatever Multiline comments: /*
// this is a comment /* This is a comment block. It contains several lines */
*/ Using comments to prevent execution: ; // this is a comment” Using comments at end of line: Conditional Statements: if and if else Always begins with „if‟ and then a condition is specified within a pair of parentheses. Keywords are reserved by the language and cannot be used, eg. if, else, return If (
) { Statement 1; Statement 2; } Could have „else‟ also If () { Statement 1; Statement 2; } else { Stement 1; Statement 2; }
A js condition will always have two tokens separated by a relational operator. A token can either be a variable name [such as x or count] or it can be a literal constant such as 10 or hello. Comparison operators for the conditions:
4
If result is true, the if block will run. If result is false, the else block will run. They will not run together. Eg.
_______ Or use document.write instead of alert()
alert() method: This is regular html.
Window.status [for the browser status line]
If Statement if statement - use this statement if you want to execute some code only if a specified condition is true if (condition) { code to be executed if condition is true }
if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }
if...else if....else statement use this statement if you want to select one of many blocks of code to be executed if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if condition1 and
6
condition2 are not true }
Using images with javascript
Understand Event handlers onBlur, onChange, onClick etc It lets you control how a user interacts with your web page. # A mouse click # The web page loading # Mousing over a hot spot on the web page, also known as hovering # Selecting an input box in an HTML form # A keystroke Understand functions A built-in function and a custom function which you define. The difference between calling a function and a method is that you do not specify the object when you call a function. Eg. Eval, escape(), isNan(), parseFloat(), parseInt(), unescape() are built in functions. A function is a piece of code that sits dormant until it is referenced or called upon to do its "function". In addition to controllable execution, functions are also a great time saver for doing repeatable tasks. Methods are predefined by js whereas functions are defined by the programmer. That is the difference between the two.
7
Image rollover 
Or
Src tells the source of the image. Both images are loaded into memory but only one shows initially. onMouseOver etc are events
Define the variables
Write the functions
Describe the events. The onMouseOver and onMouseOut events are located within the opening anchor () tag. These events call the functions turnBlue() and turnRed():
Image gallery
8
Code to trigger function
9
Accessing form elements with js: setting code and calling it in the body What are objects, their properties and methods? Like a noun, adjective and verb: eg. dog, black, run – or order form, text input field, open or alert
Statements: Source: http://www.tizag.com/javascriptT/javascriptstatements.php Conditional Statements Loop Statements Object Manipulation Statements Comment Statements Exception Handling Statements
10
Variables Like containers that contain code and hold values or literals. They are case sensitive and must begin with letter or underscore. The script above declares a variable, assigns a value to it, displays the value, change the value, and displays the value again.
Reserved variable names abstract boolean break byte case catch char class const continue debugger default delete do double
1
else enum export extends false final finally float for function goto if implements import in
instanceof int interface long native new null package private protected public return short static super
switch synchronized this throw throws transient true try typeof var void volatile while with
Rules for using variables: Avoid using javascript keywords above to name a variable Variables are case sensitive
Arithmetic operators
1
Reserved variables : source: http://www.javascriptkit.com/jsref/reserved.shtml]
11
Assignment operators are used to assign values to JavaScript variables.
The + operator could be used on strings: txt1="What a very"; txt2="nice day";
To add a space between the two strings, insert a space into one of the strings: txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; Eg:
12
Comparison Eg. if (age<18) document.write("Too young");
conditional variablename=(condition)?value1:value2 eg. greeting=(visitor=="PRES")?"Dear President ":"Dear ";
switch statement - use this statement if you want to select one of many blocks of code to be executed
switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }
Random link example:
14