Javascript Is The Scripting Language of The Web! - Javascript Is Used in Millions of Web Pages To

Introduction
JavaScript is the scripting language of the Web! JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. The HTML <script> tag is used to insert a JavaScript into an HTML page. JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, and Opera.
JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language (a scripting language is a lightweight programming language) A JavaScript consists of lines of executable computer code A 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
What can a JavaScript Do?

JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing 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
Objects
Objects refers to windows, documents, images, tables, forms, buttons or links, etc. Objects should be named. Objects have properties that act as modifiers.
Properties
Properties are object attributes. Object properties are defined by using the object's name, a period, and the property name.
e.g., background color is expressed by: document.bgcolor . document is the object. bgcolor is the property.
Methods
Methods are actions applied to particular objects. Methods are what objects can do.
e.g., document.write(Hello World") document is the object. write is the method.
Events
Events associate an object with an action. e.g., the OnMouseover event handler action can change an image. e.g., the onSubmit event handler sends a form. User actions trigger events.
<html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>
Functions
Functions are named statements that performs tasks.
e.g., function doWhatever () {statement here}
The curly braces contain the statements of the function.
JavaScript has built-in functions, and you can write your own.
Properties Properties are the values associated with an object <script type="text/javascript"> var txt="Hello World!"; document.write(txt.length); </script>
Methods Methods are the actions that can be performed on objects. <script type="text/javascript"> var str="Hello world!"; document.write(str.toUpperCase()); </script>
Using Comment Tags

HTML comment tags should bracket any script. The  tags hide scripts in HTML and prevent scripts from displaying in browsers that do not interpret JavaScript. Double slashes // are the single characters for a JavaScript single-line comment.
Where to put
JavaScripts in the body section will be executed WHILE the page loads. JavaScripts in the head section will be executed when CALLED. Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it. Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.
Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. Using an External JavaScript 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. Note: The external script cannot contain the <script> tag! To use the external script, point to the .js file in the "src" attribute of the <script> tag
File myjs.js Contents: function popup() { alert("Hello World") } HTML & JavaScript Code: <html> <head> <script src="myjs.js"> </script> </head> <body> <input type="button" onclick="popup()" value="Click Me!"> </body> </html>
Programming
JavaScript is case sensitive . A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do. The semicolon is optional and the browser is supposed to interpret the end of the line as the end of the statement. Each statement is executed by the browser in the sequence they are written. JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and end with a right curly bracket }. The purpose of a block is to make the sequence of statements execute together. Single line comments start with //. Multi line comments start with /* and end with */.
Programming
Variables A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. Rules for variable names: Variable names are case sensitive They must begin with a letter or the underscore character Lifetime of Variables 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. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared. 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. Operators and Statements: Same like C++
Operators
Operators are used to handle variables. Types of operators with examples:
Arithmetic operators, such as plus. Comparisons operators, such as equals. Logical operators, such as and. Control operators, such as if. Assignment and String operators.
Control flow and loops

if statement - use this statement to execute some code only if a specified condition is true if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false if...else if....else statement - use this statement to select one of many blocks of code to be executed switch statement - use this statement to select one of many blocks of code to be executed for - loops through a block of code a specified number of times while - loops through a block of code while a specified condition is true The for...in statement loops through the properties of an object. for (variable in object) { code to be executed }
<body> <p>Click the button to loop through the properties of an object.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x; var txt=""; var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; } document.getElementById("demo").innerHTML=txt; } </script> </body>
Popup Boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box. Alert Box
An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Ex: alert(text)
Confirm Box
A 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. Ex: confirm("sometext");
Prompt Box A 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. Ex: prompt("sometext","defaultvalue");
Examples
<html> <head> <script> function myFunction() { alert("I am an alert box!"); } </script> </head> <body> <input type="button" onclick="myFunction()" value="Show alert box"> </body> </html>
var r=confirm("Press a button"); if (r==true) { x="You pressed OK!"; } else { x="You pressed Cancel!"; } var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { x="Hello " + name + "! How are you today?"; }
Exception The try...catch statement allows you to test a block of code for errors. Syntax : try { //Run some code here } catch(err) { //Handle errors here } The throw statement can be used together with the try...catch statement, to create an exception for the error.
<head><script> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body>
Array The Array object is used to store multiple values in a single variable. An array can be defined in three ways. var myColors=new Array(); var myColors=new Array(red",blue",green); var myColors=[red",blue",green"] You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. Dummy= new Array(a1,a2,100, true,3.14,new Array(2,2))
document
Manipulate document that is currently visible in the browser window - Every Document object has: - forms - an array of references to the forms of the document Each Form object has an elements array, which has references to the forms elements
Properties
Property Description anchors applets body cookie documentMode domain forms Returns a collection of all the anchors in the document Returns a collection of all the applets in the document Returns the body element of the document Returns all name/value pairs of cookies in the document Returns the mode used by the browser to render the document Returns the domain name of the server that loaded the document Returns a collection of all the forms in the document
images lastModified links
readyState
referrer
Returns a collection of all the images in the document Returns the date and time the document was last modified Returns a collection of all the links in the document Returns the (loading) status of the document Returns the URL of the document that loaded the current document
title
URL
Sets or returns the title of the document Returns the full URL of the document
Methods
Method Description close() Closes the output stream previously opened with document.open() Accesses all elements with a specified name Opens an output stream to collect the output from document.write() or document.writeln() Writes HTML expressions or JavaScript code to a document Same as write(), but adds a newline character after each statement
getElementsByNa me() open()
write() writeln()
Window
The window object represents an open window in a browser. If a document contain frames (<frame> tags), the browser creates one window object for the HTML document, and one additional window object for each frame.
Properties
Property closed Description Returns a Boolean value indicating whether a window has been closed or not
defaultStatus Sets or returns the default text in the statusbar of a window document Returns the Document object for the window frames history Returns an array of all the frames (including iframes) in the current window Returns the History object for the window
innerHeight
innerWidth
Sets or returns the inner height of a window's content area Sets or returns the inner width of a window's content area
location name opener parent screenLeft screenTop screenX screenY self status navigator
Returns the Location(url) object for the window Sets or returns the name of a window Returns a reference to the window that created the window Returns the parent window of the current window Returns the x coordinate of the window relative to the screen Returns the y coordinate of the window relative to the screen Returns the x coordinate of the window relative to the screen Returns the y coordinate of the window relative to the screen Returns the current window Sets the text in the statusbar of a window Returns the navigator (browser) object of the window
Method alert() blur() clearInterval() clearTimeout() close()
Description Displays an alert box with a message and an OK button Removes focus from the current window Clears a timer set with setInterval() Clears a timer set with setTimeout() Closes the current window
confirm()
createPopup() focus() moveBy() moveTo() open()
Displays a dialog box with a message and an OK and a Cancel button

Creates a pop-up window Sets focus to the current window Moves a window relative to its current position Moves a window to the specified position Opens a new browser window
print() prompt()
Prints the content of the current window Displays a dialog box that prompts the visitor for input Resizes the window by the specified pixels Resizes the window to the specified width and height Scrolls the content by the specified number of pixels Scrolls the content to the specified coordinates Calls a function or evaluates an expression at specified intervals (in milliseconds) Calls a function or evaluates an expression after a specified number of milliseconds
resizeBy() resizeTo()
scrollBy()
scrollTo() setInterval()
setTimeout()
String Object
The String object is used to manipulate a stored piece of text. String objects are created with new String(). Property: length Methods: i) charAt(index) ii) indexOf (searchstring, start) iii) split(separator, limit) iv) substr (start,length) v) toLowerCase() vi) toUpperCase()
Date Object
The Date object is used to work with dates and times. Date objects are created with the Date() constructor. getDate() getDay() getTime() getMonth() getYear() getMinutes()
Navigator Object The navigator object contains information about the browser History Object The history object contains the URLs visited by the user (within a browser window). The history object is part of the window object and is accessed through the window.history property. Location Object The location object contains information about the current URL. The location object is part of the window object and is accessed through the window.location property.
Navigator Object Properties
Property Description appCodeNameReturns the code name of the browser appName Returns the name of the browser appVersion Returns the version information of the browser cookieEnabledDetermines whether cookies are enabled in the browser platform Returns for which platform the browser is compiled useAgent Returns the user-agent header sent by the browser to the server
History Object Properties

Property Description length Returns the number of URLs in the history list History Object Methods Method Description back() Loads the previous URL in the history list forward() Loads the next URL in the history list go() Loads a specific URL from the history list
Location Object Properties Property Description hash Returns the anchor portion of a URL host Returns the hostname and port of a URL Hostname Returns the hostname of a URL Href Returns the entire URL pathname Returns the path name of a URL port Returns the port number the server uses for a URL protocol Returns the protocol of a URL assign() Loads a new document reload() Reloads the current document replace() Replaces the current document with a new one
Image object The Image object represents an embedded image. For each <img> tag in an HTML document, an Image object is created. The <img> tag creates a holding space for the referenced image. Properties: Align, alt,src,border,height,width,name,vspace,hspace Events: onLoad, onabort,onError Style object The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied. Syntax for using the Style object properties: document.getElementById("id").style.property="value"
Anchor Object The Anchor object represents an HTML hyperlink.For each <a> tag in an HTML document, an Anchor object is created. An anchor allows you to create a link to another document (with the href attribute), or to a different point in the same document (with the name attribute). You can access an anchor by using getElementById(), or by searching through the anchors[] array of the Document object. Properties: href,name,target
FORM The Form object represents an HTML form. For each <form> tag in an HTML document, a Form object is created. Forms are used to collect user input, and contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select menus, textarea, fieldset, legend, and label elements. Forms are used to pass data to a server. Properties: name,method,action,length Methods : submit(),reset() Events : onsubmit, onreset
Cookies It is a plain text that is stored in the users hard drive. Using document object, we can create ,read and delete the cookies. The following fields are important Expires : The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser. Domain : The domain name of your site. Path : The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page. Secure : If this field contains the word "secure" then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists. Name=Value : Cookies are set and retrieved in the form of key and value pairs.
Comparison between Javascript and VBscript

JavaScript makes greater use of objects than VBScript. JavaScript allows for the definition of classes for the subsequent creation of objects. To define a class, you create a function that specifies the class name and the class's properties and methods. For example, the following code defines a class called MyClass, having three different properties: function MyClass (name, height, weight) { this.name=name this.height=height this.weight=weight } VBScript has certain limitations, as it doesn't provide support for object creation or user-defined classes. Learning VBScript helps developers to learn Visual Basic for Applications.

Javascript Is The Scripting Language of The Web! - Javascript Is Used in Millions of Web Pages To

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Is The Scripting Language of The Web! - Javascript Is Used in Millions of Web Pages To

Uploaded by

Copyright:

Available Formats

Introduction

What can a JavaScript Do?

<html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>

The curly braces contain the statements of the function.

Using Comment Tags

Control flow and loops

images lastModified links

getElementsByNa me() open()

Method alert() blur() clearInterval() clearTimeout() close()

Displays a dialog box with a message and an OK and a Cancel button

Navigator Object Properties

History Object Properties

Comparison between Javascript and VBscript

You might also like