JavaScript

Indulekha Nadikuppamcsi 668JavaScriptWhat is JavaScript?JavaScript is a programming language that is used to add interactivity to Web Pages.Netscape invented JavaScript as a way to control the browser and add flash and interactivity to Web pages.JavaScript is often referred to as scripting language.A scripting language is a light weight programming language, which is easy and fast to learn.What is JavaScript?JavaScript is an interpreted language means it is not compiled. It is interpreted during run-time.JavaScript is a client side language and it runs on client web browser.JavaScript can be also used on the server-side.

What is JavaScript?A JavaScript is a program that is embedded directly into HTML pages Because it is enclosed in the tag, the text of the script doesnt appear on the users screen, and the web browser knows to run the JavaScript program.You can validate text fields, disable buttons, validate forms, or change the background color of your page.

What JavaScript Can Do?JavaScript creates an active user interface, giving the users feedback as they navigate web pages.For example, websites have buttons that highlight as mouse pointer moves over them. Thats done using JavaScript, using a technique called rollover.JavaScript is used in Web pages to ensure that the user entered valid information in forms which can save business times and money.If a web form requires calculations, JavaScript can do them on the users machine without needing to use a complex server CGI.JavaScript is Object-BasedJavaScript is not a full-blown Object-Oriented languageAn object-based language is an object-oriented language with a collection of objects built right into the languageFor example, we dont have to build a date object in JavaScript because there is already one to use Object-Oriented Nature of HTMLJavaScript considers HTML an object-oriented language, where the various HTML tags correspond to different types of JavaScript objects

This is a title

My Home

Object-Oriented Nature of HTMLJavaScript objects for the html page are:Document. title = This is a title(from the tag)Document. form (the form on the page)Document.form.Button1(the button on the form)Every HTML element can be used as an objectWhat JavaScript Can Do?JavaScript controls the browser, so you can open up new windows, display alert boxes, and put custom messages in the status bar of the browser windowJavaScript has a set of date and time features, to generate clocks, calendars, and timestamp documentsThus JavaScript provides sites users with a better, more exciting experience

JavaScript Is Event-DrivenWhenever something happens on a Web page, an event occurs.Events can be just about anything- a button is clicked, the mouse is dragged, a page is loaded, a form is submitted, and so on.JavaScript is event-driven in that its designed to react when an event occurs. How it reacts depends upon the programJavaScript has 9 event handlers to interface script with system activities and user responses and actionsThese 9 event handlers can be classified into 2 categoriesSystem eventsMouse events System EventsSystem events dont require user interaction in order to be activatedFor example, you can signal that a page has finished loading, that a page is about to be unloaded, or that a period of time has elapsed.Onload and onUnload: The onload and onUnload events are triggered when the user enters or leaves the page.The onload event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".

Mouse EventsMouse events require user interaction in order to be triggeredOnclick: The most of the mouse events is the Onclick handler. This event is activated whenever you click an object that accepts such an event. Objects accepting onclick events are links, check boxes, and buttonsOnFocus: Focus occurs when an object becomes the item in focus. This happens when the user clicks or tabs to the particular object, that object has the focusonMouseOver and onMouseOut: onMouseOver and onMouseOut are often used to create "animated" buttons. Ex:-

JavaScript Is SecureJavaScript is designed to manipulate and present information through the browser, but it cant retrieve information from another file or to save data to the Web server or the users computer.Its not possible to write a JavaScript program that would scan a computers directories and retrieve a users filesJavaScript is Platform-IndependentJavaScript isnt bound to a particular computer.It is just bound to the browser that interprets itJavaScript can run on Macintosh, Windows, or Unix copy of Netscape navigatorAre Java and JavaScript the same?Despite the name, JavaScript and Java have almost nothing to do with one anotherJava and JavaScript are two completely different languages in both concept and designJava is a full-featured object-oriented programming language, much more complex than JavaScript

JavaScript isnt JavaJava is compiled to byte codes on the server and the result is send to the client. JavaScript is interpreted on the client side. It doesnt require any compilation.JavaScript is embedded within an HTML document as plain text. Java applets are referenced from a document, but the code is kept in a separate file in binary formJavaScript uses dynamic binding, which means that object references are checked at runtime. Java, on the other hand, uses static binding, in which object references must exist when the program is compiled

JavaScript isnt JavaJavaScript is identified within a document by the tag. Java applets are embedded in a document using the tagJavaScript uses loose typing, meaning the variables dont have to be declared, and the variable that was used as a string could be used as a number later. Java uses strong typing, which means the variables must be declared and used as a particular typeJavaScript GuidelinesCase-SensitiveJavaScript is a case-sensitive languageEx: - X and x are both different variables.The same is valid for functionsEx: - If you define a function with the name GetValues and call it with the name Getvalues, then you wont see any processing. Both are different functions. JavaScript GuidelinesSymbolsAll opened symbols must be closed properly. If you started a string with " then you should also close it with ". Otherwise, the page wont executed correctly.Ex: - {} This is mostly used in functions or in condition statements.function x(){}

JavaScript GuidelinesEx: - [] This is used in arrays.var arTest = new Array(2)arTest[0] = "string1"arTest[1] = "string2arTest[2] = "string3Ex:- " This is usually used in strings. var mystr = "this is a string."Ex:- ' This can be also used in strings.var mystr = 'this is a string'

JavaScript GuidelinesNoScriptSome users dont allow or dont want to run a JavaScript on the browser. In that case you should always use the tag to displays a message that JavaScript is either disabled or not supported by the browser

JavaScript Special CharactersThe backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string.Suppose var txt="We are the so-called "Vikings" from the north."document.write(txt)In JavaScript, a string is started and stopped with either single or double quotes. This means that the string above will be chopped to: We are the so-calledJavaScript Special CharactersTo solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal:var txt="We are the so-called \"Vikings\" from the north."; document.write(txt);JavaScript will now output the proper text string: We are the so-called "Vikings" from the north.Ex:- document.write ("You \& I are singing!");You & I are singing!JavaScript GuidelinesValues and VariablesIn JavaScript, a piece of information is a value

Variables contain values. Way to assign value John to variable myName is myName = John. Variable names cannot contain spaces or other punctuation

Value TypesType

NumberStringBooleanNullObjectFunctionDescription

Any numeric valueCharacters inside quote marksTrue or FalseEmpty and meaninglessAny value associated with the objectValue returned by a function JavaScript GuidelinesAs in any programming language, there is way to put comments in JavaScript alsoComments can be either created in one line with // or in multiple lines with /**/.Ex:- // Please comment only this line/* Everything between these signs, will be commented out.*/

Where to Put ScriptsScripts can be used in either of two places on an HTML page: between the and tags, or between the and tagsTo insert a JavaScript into an HTML page, we use the tag.Inside the tag we use the "type=" attribute to define the scripting language.So, the and tells where the JavaScript starts and ends.

Example

My first script

document. write(Hello, world);

ScopeVariables can be either defined globally or locally. If you define a variable in a function then it is a local variable. The variable is not accessible out of the function. As soon as the function ends the variable is destroyed. If you define a variable outside of a function, then it is called a global variable. This variable is available and accessible everywhere.

Example

var globalVar = "This is a global variable.
" function X() { var globalVar = "Is the value changed ?
" document.write(globalVar) } X() document.write(globalVar)

Output:Is the value changed ?This is a global variable.Alerting the UserOne of the main uses of JavaScript is to provide feedback to people browsing the siteAlert window can be used to pop up vitally important informationTo alert a user: alert(Welcome to my JavaScript page!)Example alert ("Welcome to my JavaScript page!")

Confirm BoxA confirm box is often used if you want the user to verify or accept something.When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.Syntax: confirm("some text"); Prompt BoxA prompt box is often used if you want the user to input a value before entering a page.When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.Syntax: prompt("some text", "default value");Using an External JavaScriptSometimes 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.The external script cannot contain the tag!To use the external script, point to the .js file in the "src" attribute of the tag:

Example

JavaScript ArraysArrays are variables, which can contain multiple values.Arrays are created always with the new keywordAssigning ValuesThe values can be assigned in two ways. Either without defining the size and index or by defining the size and index number. Example:- var days= new Array(Sunday, Monday, Tuesday, Thursday, Friday, Saturday);Or var days = new Array(7)var days[0] = Sunday

JavaScript Array Object FunctionsThe Array object contains 10 functions.JavaScript join Function:- The join function can be used to join the content of an array to a single string, separated with a character of your choice. If you dont specify one, it will use the comma by default.Example:-

var arJoin = new Array("11", "12", "13", "14", 15) document.write(arJoin.join("|"))

Output11|12|13|14|15

JavaScript Array Object Functions2. JavaScript concat Function:- The concat function can be used to join two arrays together to one arrayExample:-

var ar1 = new Array("11", "12", "13", "14", 15) var ar2 = new Array("16", "17", "18", "19", 20) document.write(ar1.concat(ar2))

Output11,12,13,14,15,16,17,18,19,20

JavaScript Array Object Functions3. JavaScript pop Function:- The pop function can be used to retrieve the last element of an arrayExample:-

var ar1 = new Array("11", "12", "13", "14", 15) document.write(ar1.pop())

Output15

JavaScript Array Object Functions4. JavaScript push Function:- The push function can be used to add one ore more new elements to an arrayExample:-

var ar1 = new Array("11", "12", "13", "14", 15) ar1.push("16","17") for(var i = 0;i