Java Script.

Java Script

Topics To Be Covered Introduction and Objectives Scripting Language
Function Objects Burt In Java Script Objects Summary

Introduction and Objectives

Introduction and Objectives
When you complete this course, you will be able to: Explain the basics of a Scripting language. Explain JavaScript as a Scripting language. Describe the loops in JavaScript. Discuss the objects in JavaScript. List the built in JavaScript objects.

Scripting Language

Scripting Language What is a Scripting Language?
Scripting languages are computer programming languages that are typically interpreted. It is interpreted by “script engine”. Client Side Scripting Language Server Side Scripting Language It runs at the client side. It is interpreted by the script engine. It is free. For example, JavaScript, VBScript, and so on. It runs at the server side. It is interpreted by the server side script engine. The server side script is not language. For example. ASP. JSP, SSJS. PERL, PHP, and so on.

Scripting Language Features of Scripting language
Scripting language gives the user more control over the browser. It helps to detect the user's browser. OS, screen size, and so on. It enables users to perform simple computations on the client side. Scripting language also validates the user's input. It generates HTML pages on-the-fly without accessing the Web server Scripting language is a great programming tool for HTML. Some of the features are mentioned: Handles Dynamic Effects Browser Detection Saves Time DOM Interpreted Language

Scripting Language JavaScript as a Scripting language
JavaScritp can be run in the web page or in some tools. It is used to generate the dynamic information. It is not Java Programming language. JavaScript is free with the browser. A scripting language is a lightweight programming language. JavaScript is usually embedded directly into HTML pages.

Scripting Language Use of JavaScript
JavaScritp gives designers a programming tool. JavaScript can put dynamic text/information to the target page. JavaScript can react to events. It can read and write XML elements. It can run in client side as well server side. JavaScript can be used to validate data.

Scripting Language First JavaScript Code
JavaScript can be placed in body section as well as in header section. Body Section Header Section <body> <script type="text/javascript"> document.write("Hello World!") </script> Note: It is optional end with semicolon of each statements. <head> <script type="text/javascript“> function message() { alert("Thls alert box was called with the onload event") } </script> </head>

Scripting Language Using an External JavaScript external.js
function f1() { alert(“It is external file”) } a.html <HEAD> <script srd=external.js”> </script> </HEAD> <BODY onLoad=“ f1()”> //It is example of external javascript </BODY> Function f1() defined in external.js file Function f1 printing a message in alert box Importing external.js in a.html file Calling f1() function on onload event listener.

Scripting Language Inline Script <BODY> <form>
<input type=submit value=submit onClick=“alert(‘it is example of inline script')“> </form> </BOOY> Inline java script.

Scripting Language Variable
A variable is a container for information one wants to store. A variable's value can change during the script. User 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. How to Declare a Variable? var str //Assign a value to the variable, var str= "hello java script“ str2="it is next example "

Scripting Language Scope of a Variable Local Scope Global Scope
A variable declared in the function can be used only in that function. It will be destroyed when the execution of function is over. A variable declared outside the function can be used in any function. It will be destroyed when that page is closed.

Scripting Language Scope of a Variable <head>
<script language=“javascript”> var str = “subodh kumar sharma” function f1() { var s1=“name one” alert(s1+str) return } function f2() var s2="my name" alert(s2+str) </script> </head> Global variable declaration with initialization Local variable declaration with initialization Local variable declaration with initialization

JavaScript Reserved Words
Scripting Language Keywords Keywords are special words in the programming language which has special meaning in the programming language. Note: One should avoid using these reserved words and keywords as function or variable names. JavaScript has reserved these words for its own use. JavaScript Reserved Words break continue do for import new this void case default else function in return typeof while comment delete export if label switch var with

Arithmetic assignment operator
Scripting Language JavaScript Operators The table lists the JavaScript operators. JavaScript Operators Arithmetic Operators + - * / % ++ - - Assignment operator = Arithmetic assignment operator += -+ *= /= %= Comparison operator < > <= >= == != String operator Logical Operators && || !

Scripting Language Expressions
Create an expression using the operators. Conditional construct: User needs to perform different actions for different decisions while writing the code. User can use conditional statements in the code to do this. A) if syntax B) switch Syntax if condition statement else switch(n) { case 1: execute code block 1 break case 2: execute code block 2 default: code to be executed if n is different from case 1 and 2 }

Scripting Language Loop While loop Do-while loop For loop
Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true. While loop Do-while loop For loop Break and Continue

Scripting Language WhileLoop While loop Syntax:
The while loop is used when one wants the loop to execute and continue executing while the specified condition is true. Syntax: While loop var intilization while (var<=endvalue) { code to be executed }

Scripting Language Loop Do-while loop
The block of do-while will be executed at least once with any condition. For the next execution, it checks the condition. If it is true, then block will be executed. Syntax: Do-while loop do { statement } while(condition)

Scripting Language For Loop For loop For loop Is same as while loop.
All the three statement are included in same line. Syntax: For loop for(var=startvalue;var<=endvalue;var=var+increment) { code to be executed }

Scripting Language Loop Break and Continue
Break: The current loop is forced to terminate immediately. Continue: It is used to force the flow of control back to the top of the loop.

Scripting Language Events
Events are actions that can be detected by JavaScript. It can be generated by interacting with the user. Every element on a java script page has certain events which can trigger JavaScript functions. Events are defined in the HTML tags. Some examples of events are: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form A keystroke based on hyperlink Interacting with controls Note: Events are normally used in combination with functions and the function will not be executed before the event occurs.

Scripting Language Event Handlers www.prolearninghub.com
onLoad & onUnload The onload and onUnload events are triggered when the user enters or leaves the page. It 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. onFocus, onBlur and onChange The onFocus, onBlur, and onChange events are often used in combination with validation of form fields. onSubmit The onSubmit event is used to validate ALL form fields before submitting it. onMouseOver and onMouseOut onMouseOver and onMouseOut are often used to create 'animated' buttons.

Scripting Language Event Handler Examples onLoad & onUnload Example
<script type-"text/javascript"> function message () { alert("welcome to our web site") } function message1() alert("bye bye user") </script> </head> <body onload="«essage()" onUnload-"message1()"> </body>

onMouseOver and onMouseOut
Scripting Language Event Handler Examples onMouseOver and onMouseOut Example <script language*"javascript"> function changecolor() { document.bgColor=‘white‘ } </script> <BOOY> [<a href=“/” onmouseover="document.bgColor=‘green'“ onmouseout="changecolor()">Green</a>] [<a href=“/” onmouseover=“document.bgColor=‘red'" onmouseout=“changecolor()">red</a>] [<a href=“/” onmouseover="document.bgColor=‘blue'" onmouseout="changecolor()“>>blue</a>] </BOOY>

Scripting Language Event Handler Examples OnClick Example <FORM>
1: example one <input TYPE=“radio” NAME="radio“ value="this is first radio button" onClick=“alert(value)”> 2: example two <INPUT TYPE="radio" NAME=“radio" value="this is second radio button" onClick="alert(value)“> 3: example three <INPUT TYPE="radio" NAME="radio” value=”this is third radio button” onClick="alert (value)”><br> 4. Example four <input type="button" value="message" onClick="alert('this is the message'); return true"> </form>

Function

Function What is a Function? Syntax:
A function is a reusable code-block that will be executed by an event, or when the function is called. To keep the browser from executing a script when the page loads, one can put the script into a function. User may call a function from anywhere within the page. It does not matter that where the function is defined, either in same file or in the different file. Syntax: function function_name(varl,var2,var3j….) { Statement }

Function Example <head> <script type="text/javascript">
function displaymessage() { alert ("Hello World!") } </script> </head> <body> <form> <input type="button" value=‘Click me!' onclick="displaymessage()" > </form> </body> User defined function declaration Function calling

Function Argument with Multiple Controls
<head> <script type="text/javascript"> function myfunction(txt) { alert (txt) } </script> </head> <body> <form> <input type="button" onclick=“myfunction(value)" value="In the Morning"> <input type-"button" onclick="myfunction(value)" value-"In the Evening"> </form> Calling parameterized function in java script

Returning a Value from Function
<head> <script type-"text/javascript"> function myFunction() { return ("Hello, have a nice day!") } </script> </head> <body> <script type=”text/javascript"> document.write(myFunction()) <p>The script in the body section calls a function.</p> <p>The function returns a text.</p> </body> Returning value from java script function

Function Function with Parameter and Return Statement
The return statement is used to specify the value that is returned from the function. function prod(a,b) { x=a*b return x } product=prod(2,3)

Objects

Objects Window Object The Window object is the top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset > tag. Object Properties Methods window defaultStatus alert frames blur opener close parent confirm scroll focus self open status prompt top clearTimeout setTimeout

Objects Window Object The defaultStatus property sets or returns the default text in the status bar of the window The text will be displayed when the page loads. Example: <html> <body> <script type="text/javascript"> window.defaultStatus=“This is the default text in the status bar!!” </script> </body> </html>

Objects Document Object
The Document object represents the entire HTML document and can be used to access all elements in a page The Document object is part of the Window object and is accessed through the window.document property. Object Properties Methods document alinkColor, anchors applets, area bgColor, cookie fgColor, forms images, lastModified linkcolor, links location, referrer title, vlinkColor clear close open write writeln

Objects Document Object Example Document Object Example:
To find out no. of links in a document Document Object Example: To find out no. of forms in a document <html><body> <a name=“firsf”>First anchor</a><br> <a name="second">Second anchor</a><br> <a name="third'>Third anchor</a><br> Number of anchors In this document: <script type="text/javascript"> document. write(document. anchors. length) </script> </body> <html> <html> <body> <form name="Form1”></form> <form name="Form2”></form> <form name="Form3“></form> <script type="text/javascript“> document.write("This document contains: “ + document.forms.length + " forms.") </script> </body> </html>

Objects Document Object Counting The Number Of Images In The Document
<html> <body> <img src="hackanm.gif” width=“48“ height=“48“><br> <img src="compman.gif" width="107" height=”98"><br> <script type="text/javascript"> document.write(”This document contains: “ + document.images.length + " images.") </script> </body> </html>

Objects Document Object The getElementByld() Method
The getElementByld() method returns a reference to the first object with the specified ID. <html><head> <script type="text/javascript"> function getValue() { var x=document.getElementByld("myHeader") alert(x.innerHTML) } </script> </head> <body> <h1 id=“myHeader" onclick="getValue()">This is a header</h1> <p>Click on the header to alert its value</p> </body> </html>

Objects Document Object The getElementByName() Method
The getElementByName() method returns a reference to the first object with the specified NAME. <html><head> <script type="text/javascript”> function getElements() { var x «document.getElementsByName(“myInput"); alert(x.length); } </script> </head> <body> <input name-"myInput" type="text” size=“20" /><br> <input name="mylnput" type="text" size="20" /><br> <input name=“mylnput" type=“text" size=“20” /><br> <input type="button" onclick=”getElements()" value="How many elements named ‘mylnput'?” /> </body> </html>

Objects Document Object Returning URL of the Current Document
<html> <body> The URL of this document is: <script type="text/javascript"> document.write(document.URL) </script> </body> </html>

Objects History Object
The History object is a JavaScript object, not an HTML DOM object. The History object is automatically created by the JavaScript runtime engine and consists of an array of URLs. Object Properties Methods history length go back forward <html> <head> <title> Using the length property of the History object</title> </head> <body> <script language=”JavaScript"> var numOfURL = window.history.length; document.write(“The number of URL's in the history list is: " + numOfURL); </script> </body> Let us see how to count the no. of history documents.

Objects History Object Methods The back() Method <html>
<head> <script type="text/javascript”> function goBack() { window.history.back() } </script></head> <body> <input type=”button" value=”Back" onclick="goBack()" /> </html>

Objects History Object Methods The forward() Method <html>
<head> <script type="text/javascript"> function goForward() { window.history.forward() } </script> </head> <body> <input type="button" value="Forward“ onclick="goForward()“ /> </body> </html>

Objects History Object Methods go() Method <html> <head>
<script type="text/javascript"> function goBack() { window.history.go(-1) } </script></head><body> <input type="button" value="Back" onclick="goBack()” /> </body> </html>

Objects Image Object Syntax:
The Image object represents an embedded image. For each instance of an <img> tag in an HTML document, an Image object is created. Syntax: <img src=“” alt=“” border =“” align="top" height =“” width =“” >

Objects Image Property The table describes about the Image properties.
Description complete Returns whether or not the browser has finished loading the image hspace Sets or returns the white space on the left and right side of the image Id Sets or returns the id of the Image longDesc Sets or returns a URL to a document containing a description of the image Sets or returns the name of an image Name Sets or returns the name of an image src Sets or returns the URL of an image useMap Sets or returns the value of the usemap attribute of an client-side image map vspace Sets or returns the white space on the top and bottom of the image

Objects Image Alignment and alt Example <html> <body>
<img id="compman" src="compman.gif” alt="Computerman“ width=”107" height="98" /> <p>this is example of image object </p> <script type= “text/javascript“> document .getElementById("compman") .align "right”; </script> </body> </html> Image object setting with right alignment in JavaScript

Objects Image Object Properties isMap Property <html>
<body> <img id=“planets" src=“planets.gif" width="145" height=“i26” usemap="#planetmap” /> <map name="planetmap"> <area id="venus" shape="circle" coords="i24,58,8" alt="The planet Venus" href=“venus.htm" /> </map> <p>Is the image a server-side image map? <script type="text/javascript”> x=document.getElementByid('planets’); document.write(x.isMap); </script></p> </body> </html>

Objects Image Object Properties longDesc Property <html>
<body> <img id="compman” src="compman.gif" longdesc=”compman_description.htm" alt =“Computerman” width=”107” height=”98" /> <br> <script type=“text/javascript”> var x=document.getElementById("compman”); document.write(”Description for image: “); document.write(‘<a bref=”' + x.longDesc + ‘”>Description</a>'); </script> </body> </html>

Objects Image Object Properties Image src Property <head>
<script type=”text/javascript“> function changeSrc() { document. getElementById("myImage”). src=''hackanm.gif" } </scriptx/head><body> <img id»"myImage" src="compman.gif” width=“107“ height="98" /><br> <input type="button” onclick="changeSrc()" value=“Change image”> </body>

Objects Location Object
The Location object is a JavaScript abject, not a HTML DOM object. The Location object is automatically created by the JavaScript runtime engine and contains information about the current URL. Example: Send a user to a new location. The Location object is part of the Window object and is accessed through the window.location property. Properties Description Host Sets or returns the hostname and port number o( the current URL Hostname Sets or returns the hostname of the current URL Search Sets or returns the URL from the question mark (?). It works only in the server side. Href Sets or returns the entire URL Pathname Sets or returns the path of the current URL Protocol Sets or returns the protocol of the current URL

Objects Navigator Object
The Navigator object is a JavaScript object, not a HTML DOM object. The Navigator object is automatically created by the JavaScript runtime engine and contains information about the client browser. Properties Description AppCodeName Returns the code name of the browser appName Returns the name of the browser appVersion Returns the platform and version of the browser browserLanguage Returns the current browser language userAgent Returns the value of the user-agent header sent by the client to the server userLanguage Returns the OS' natural language setting

Objects Navigator Object <html> <body>
<script type=‘text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=parseFloat(b_version) document.write{“Browser name: ”+ browser) document.write(“<br />") document.write(“Browser version: "+ version) document.write(“<p>Browserversion: “) document.write(navigator.appVersion + "</p>") document.write("<p>Code: ’) document.write(navigator.appCodeName + "</p>") document.write("<p>Platform: ") document.write(navigator.platform + "</p>”) </script> </body> </html>

Built In JavaScript Objects

String The string methods are: charAt( idx ) indexOf( chr ) lastIndexOf( chr ) substring( fromidx, toidx ) toLowerCase() toUpperCase()

Math The math methods are: abs( num ) exp( num ) floor( num ) max( num1, num2 ) min( num1, num2 ) pow( num1, num2 ) random() round( num ) sqrt( num )

Date Creating date object: Accessing date object: Methods: new Date() new Date(datestring) new Date(yr, mon, day) getDate() getDay() getHours() getMinutes() getMonth() getSeconds() getTime() getTimeZoneOffset() getYear() setDate() setHours() setMinutes() setMonth() setSeconds() setTiime() setYear()

Built in Functions eval( str ) parseFloat( str ) parselnt( str) escape( str ) unEscape( str )

Summary

Summary In this course, you have learned to:
Explain the basics of a Scripting language. Explain JavaScript as a Scripting language. Describe the loops in JavaScript. Discuss the objects in JavaScript. List the built in JavaScript objects.

Java Script.

Similar presentations

Presentation on theme: "Java Script."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Java Script.

Similar presentations

Presentation on theme: "Java Script."— Presentation transcript:

Similar presentations

About project

Feedback