Paca java script slid

 Introduction –
 JavaScript is the programming of the web. It is used mainly for
validating forms. JavaScript and java can be related to each other.
There exist many other differences between the two. The client
interprets JavaScript, whereas in java, one can execute a java file
only after compiling it. JavaScript is based on an object model. In
this unit you will learn how to write JavaScript code and insert
them into your HTML documents, and how to make your pages
more dynamic and interactive.
 Besides basic programming constructs and concepts, you will also
learn about object-based programming in JavaScript. We will also
discuss some commonly used objects, massage boxes and forms.
One of the most important parts of JavaScript is Event handling
that will allow you write Event-driven code.

 Objectives –
 After going through this unit you would be able to
learn and use the following features of the
JavaScript:
 Operators;
 Loop constructs;
 Function;
 Objects such as Math object, Date object;
 Input and output boxes;
 Event handlers;
 Form object; and
 Form array.

 JavaScript Variables And Data types –
 Let us first the skeleton of a JavaScript file.
 <HTML>
 <HEAD>
 <TITLE>PACAT </TITLE>
 <SCRIPT LANGUAGE =“JavaScript”>
 </SCRIPT>
 </HEAD>
 <BODY>
 </BODY>
 </HTML>
 JavaScript code should be written between the <SCRIPT> and
</SCRIPT> tags. The value LANGUAGE =“JavaScript” indicates
to the browser that JavaScript code has been used in the HTML
document. It is a good programming practice to include the
JavaScript code within the <HEAD> and </HEAD> tags.

 Declaring Variables –
 You can declare a variable with the var statement:
 var strname = some value
 You can also declare a variable by simply assigning a
value to the variable. But if you do not assign a value
and simply use the variable then it leads to an error.
 Strname = some value
 You assign a value to a variable like this:
 var strname = Hello”
 Data types –
 A value, the data assigned to a variable, may consist of
any sort of data. However, JavaScript considers data to
fall into several possible types.

Data types Description
3 or 7.987 are the examples of integer and floating-point number.

Integers can be positive, 0, or negative; integers can be expressed
in decimal (basic 10), hexadecimal (base 16), and octal (base 8). A
decimal integer literal consists of a sequence of digits without a
leading 0 (zero). A leading 0 (zero) on an integer literal indicates it
is in octal; a leading 0x (or 0X) indicates hexadecimal.
Number Hexadecimal integer can include only the digits (0-9)) and the
letters a-f and A-F. octal integer can include only digits 0-7.

A floating-point number can contain either a decimal fraction, an
“e” (uppercase or lowercase), that it used to represent “ten to the
power of” in scientific notation, or both. The exponent part is an
“e” or “E” followed by an integer, which can be signed (preceded
by ”+” or “-”). A floating-point literal must have at least one digit
and either a decimal point or “e” (or “E”).

Boolean True or False. The possible Boolean value are true an
false. These are special values, and are not usable as I
and 0.

String “Hello World!” Strings are delineating by single or
double quotation marks. (Use single quotes to type
starting that contain quotation marks.)

Object MyObj = new Object ( );
Null Not the same as zero – no value at all. A null value is
one that has no value and means nothing.
Undefined A value that is undefined is a value held by a variable
after it has been created, but before a value has been
assigned to it.

 Statement And Operators –
Assignment Operators
Operators Functionality Example/Explanation
= Sets one value equal to another Counter=0 Sets the counter to equal the
number 0
+= Shortcut for adding to the current Clicks +=2 Sets the variable named
value. counter to equal the current value plus
two.
-= Shortcut for subtracting from the Clicks -=2 Sets the variable named
current value. counter to equal the current value
minus two.
*= Shortcut for multiplying the Clicks *=2 Sets the variable named
current value. counter to equal the current value
multiplied by two.
/= Shortcut for dividing the current Clicks /=2 Sets the variable named
value. counter to equal the current value
divided by two.

Operators Functionality

== Returns a true value if the items are the same

!= Returns a true value if the items are not the same

> Returns a true value if the item on the left is greater than
the item on the right

>= Returns value if the item on the left is equal to or greater
than the item on the right

< Returns a true value if the item on the left is less than the
item on the right

<= Returns a true value if the item on the left is equal to or less
than the item on the right

Operators Functionality
+ Adds two value together
- Subtracts one value from another
* Multiplies two value
/ Divides the value on the left by the one on the right and
returns the results
++Y Increments the value, and then returns the results
X++ Returns the value, and then increments the value
--X Decreases the value, and then returns the results
X-- Returns the value, and then decreases the value
&& Looks at two expression and returns a value of “true” if the
expressions on the left and right of the operator are both true
|| Looks at two expressions and returns a value of “true” if
either one – but not both– of the expressions are true

 Control Structures –
 JavaScript supports the usual control structures:
 The conditionals if,…if else, and switch;
 The iteration for, while, do…while, break, and continue;
 Conditional Statements –
 Very often when you write code, you want to perform different
action for different decisions. You can use conditional statements
in your code to do this.
 In JavaScript we have three conditional statements:
 If statement – use this statement if you want to execute a set of
code when a condition is true
 If…else statement – use this statement if you want to select one of
two sets of code to execute
 Switch statement – use this statement if you want to select one of
many sets of code to execute

 if(my Variable == 2) {
 my Variable = 1;
 } else {
 my Variable = 0;
 }
 Switch Statement –
 If there exist multiple conditions, the switch statement is recommended.
This is because only one expression gets evaluated based on which
control directly jumps to the respective case.
 switch(myVar) {
 case 1:
 //if myVar is 1 this is executed
 case „simple‟:
 //if myVar is „sample‟ (or 1, see the next paragraph)
 //this is executed
 case false:
 //if myVar is false (or 1 or „sample‟, see the next paragraph)

 Loop statements –
 A loop is a set of commands that executes repeatedly
until a specified condition is met. JavaScript supports
two loop statement: for and while. In addition, you can
use the break and continue statements within loop
statement.
 For Statement –
 A for loop repeats until a specified condition evaluates
to false. The JavaScript for loop is similar to the Java
and C for loops. A for statement looks as follows:
 For ([initial-expression]; [condition]; [increment-
expression]) {
 Statement
 }

 While Statement –
 The while statement defines a loop that iterates as long as a
condition remains true. In the following example the control
waits until the value of a text field becomes “go”:
 while (Document.form1text1.value !=“go”) {statement}
 In a while loop the condition is evaluated first before
executing the statement.
 For In Statement –
 This is a different type of loop, used to iterate through the
properties of an object or the elements of an array. For
example consider the following statement that loops
through the properties of the Scores object, using the
variable x to hold each property in turn:
 For (x in Scores) {Statement}

 Break Statement –
 The break statement is used for terminating the current while or
for loop and then transferring program control to the statement
just after the terminated loop. The following function has a break
statement that terminates the while loop when I becomes equal to
3, and then returns the value 3*x.
 function testBreak(x) {
 var I = 0
 while (I < 6) {
 if (I == 3)
 break
 i++
 }
 return i*x
 }

 Continue Statement –
 A continue statement terminates execution of the block of
statement in a while or for loop and continues execution of the
loop with the next iteration. In contrast to the break statement,
continue does not terminate the execution of the loop entirely.
Instead.
 In a while loop, it jumps back to the condition.
 In a for loop, it jumps back to the increment-expression.
 The following example shows a while loop with a continue
statement that executes when the value of i becomes equal to
three. Thus, n takes on the values one, three.
 i=0
 n=0
 while (i< 5) {
 i++
 if (i == 3) continue
 n += i

 Object-Based Programming –
 JavaScript is a very powerful object-based (or prototype-
based) language. JavaScript is not a full-blown OOP (Object-
Oriented Programming) language.
 Function –
 Function are the central working units of JavaScript. Almost
all the scripting code uses one or more function to get the
desired results. If you want your page to provide certain a
user-defined functionality, then functions are a convenient
way of doing so. Therefore it is important that you
understand what a function is and how it work.
 First let us understand the basic syntax of a function; then
we look at how to call it. After that you must know how to
pass arguments and why you need to do this.

 function example(a,b)
 {
 number +=a;
 alert(„You have chosen:‟ + b);
 }
 Calling the Function –
 You can the function from any other place in your JavaScript code. After
the function is executed, the control goes back to the other script that
called it. alert(Example 1: the House);
 example(1,‟house‟);
 (write more code)
 Argument –
 You can pass argument to a function. These are variables, either numbers
or strings, which are used inside the function. Of course the output of the
function depends on the argument you give it.
 In the following example we pass two argument, the number I and the
string „house‟: example(1,‟house‟);

 Returning a value –
 One more thing a function can do is to return a value. Suppose we have the following function:
 <HTML>
 <HEAD>
 <TITLE>PACAT </TITLE>
 <SCRIPT Language = “JavaScript”>
 function calculate(a,b,c)
 {
 d = (a+b) * c;
 return d;
 }
 </SCRIPT>
 </HEAD>
 <BODY>
 <SCRIPT Language = “JavaScript”>
 var x = calculate(4,5,9);
 var y = calculate(x/3), 3,5);
 alert(„calulate(4,5,9) = „+ x + „and „ + „ calculate((x/3),3,5) = „ + y);
 </SCRIPT>
 </BODY>
 </HTML>

 Objects –
 A JavaScript object is an instance of data type. Object is
given a unique name and the collection of properties of
the corresponding object may be accessed using the dot
syntax. As quick introduction to the concept of
JavaScript objects, here is the code that creates an
instance of an object called myObj:
 var myObj= new Object();
 myObj.business= “Voice and Data Networking”;
myObj.CEO = “PACAT”;
 myObj.ticker= “CSCO”;
 Data Object –
 The data object is used to work with dates and times.

 Creating a Date Instance –
 You should create an instance of the Data object
with the “new” keyword. The following line of
code stores the current date in a variable called
“my_date”:
 var my_date=new Date( )
 After creating an instance of the Date object, you
can access all the methods of the object from the
“my_date” variable. If, for example, you want to
return the date (form 1-31) of a Date object, you
should write the following:
 my_date.getDate( )

 Some Date Methods –

Methods Explanation
Date( ) Returns a Date object
GetDate( ) Returns the date of a Date object (form 1-31)
GetDay( ) Returns the day of a Date object (from 0-6. 0=Sunday.
1=Monday, etc.)
GetMonth( ) Returns the month of a Date object (from 0-11. 0=January,
1=February, etc.)
GetFull Year( ) Returns the year of the Date object (four digits)
GetHours( ) Returns the hours of the Date object (from 0-23)
GetMinutes( ) Returns the minutes of the Date object (from 0-59)
GetSeconds( ) Returns the seconds of the Date object (from 0-59)

 Array Object –
 An array object is used to store a set of values in a single variable
name. Each value is an element of the array and has an associated
index number. You can refer to a particular element in the array
by using the name of the array and the index number. The index
number starts at zero.
 You crate an instance of the Array object with the “new” keyword.
 var family_names=new Array(5)
 The expected number of elements goes inside the parentheses, in
this case it is 5.
 You assign data to each of the element in the array like this:
 family_names[0]=“sharma” family_names[1]=“singh”
family_names[2]=“Gill” family_names[3]=“kumar”
family_names[4]=“Khan”
 The data canbe retrieved from any element by using the index of
the array element

 History Object –
 The history is a predefined JavaScript object which is
accessible through the history property of a window object.
Property Summary for History Object

Current Specifies the URL of the current history entry.
Next Specifies the URL of the next history entry.
Previous Specifies the URL of the previous history entry.
Length Reflects the number of entries in the history list.

Method Summary for History Object
Back( ) Loads the previous URL in the history list.
Forward( ) Loads the next URL in the history list.
Go( ) Loads a URL from the history list.

 Message Box In JavaScript –
 In this section, we cover the topic of dialog boxes.
 Dialog Boxes –
 In this the user cannot switch to the window without closing the
current window. This kind of dialog box is referred to as a modal
dialog box. You create a modal dialog box with
showModalDialog().
 Syntax: showModalDialog (“Message”)
 Alert Boxes –
 Alert boxes can be utilized for a variety of things, such as to
display when an input field has not been entered properly, to
display a message on document open or close, or to inform
someone that they have clicked a link to leave your site. Whatever
the use, the construction is essentially the same.
 Syntax : alert(“message”)
 The following example will generate a simple alert box based on
clicking either a link or a form button.

 Prompt Boxes –
 The prompt box allows the user to enter information. The
benefits of using a prompt are fairly limited and the use of
forms would often be preferred (from a user perspective).
 The prompt box title text cannot be changed and the same
applies to button text. You can have 2 lines of text using in
where the new line starts (please note that the opera
browser up to version 7 will only display 1 line of text)
 The text entry field is similar to a form input type=“text”.
The 2 buttons are OK and Cancel. The value returned is
either the text entered or null.
 The syntax for the prompt is
 prompt(“your message”,””); (script tags omitted)
 “your message”,”” the,”” holds the default text value “” =
empty.

 Events –
 Events are actions that can be detected by JavaScript.
An example would be the onMouseOver event, which
is detected when the user moves the mouse over an
object. Another event is the onLoad event, which is
detected as soon as the page is finished loading.
Usually, events are used in combination with
function, so that the function is called when the event
happens. An example would be a function that would
animate a button. The function simply shifts two image
that shows the button in an “up” position, and another
image that shows the button in a “down” position. If
this function called using an onMouseOver event, it
will make it look as if the button is pressed down when
the mouse is moved over the image.

 Event Handlers –
 An event handler executes a segment of a code based
on certain events occurring within the application.
Such as onLoad or onClick. JavaScript event handlers
can be divided into two parts: interactive event
handlers and non-interactive event handlers. An
interactive event handler is the one that depends on
user interaction with the form or the document.
 For example, onMouseOver is an interactive event
handler because it depends on the user‟s action with
the mouse. An example of a non-interactive event
handler is onLoad, as it automatically executes
JavaScript code without the need for user interaction.
Here are all the event handler available in JavaScript.

 onLoad and onUnload –
 onLoad and onUnload are mainly used for popups that
appear when the user enters or leaves the page. Another
important use is in combination with cookies that should be
set upon arrival or when leaving your pages.
 For example, you might have a popup asking the user to
enter his name upon his first arrival to your page. The name
is then stored in a cookie. Furthermore, when the visitor
leaves your page a cookie stores the current date. Next time
visitor arrives at your page, it will have another popup
saying something like: “Welcome Ajay, this page had not
been updated since your last visit 8 days ago”.
 Another common use of the onLoad and onUnload events is
in making annoying pages that immediately open several
other windows as soon as you enter the page.

 OnFocus and onBlur –
 The onFocus event handler executes the specified JavaScript code
or function on the occurrence of a focus event. This is when a
window, frame or form element is given the focus. This can be
caused by the user clicking on the current window, frame or form
element, by using the TAB key to cycle through the various
elements on screen, or by a call to the window. Focus method. Be
aware that assigning an alert box to an object‟s onFocus event
handler will result in recurrent alerts as pressing the “OK” button
in the alert box will return focus to the calling element or object.
 The onFocus event handler user the Event user object properties.
 type – this property indicates the type of event.
 target – this property indicates the object to which the event was
originally sent.
 The following example shows the use of the onFocus event
handler to replace the default string in the text box. Note that the
first line is HTML code and that

 Forms –
 Each from in a document creates a form object.
Since a document can contain more than one form,
form objects are stored in an array called forms.
 Forms Array –
 Using the forms[ ] array access each Form object in
turn and show the value of its name property in a
message box. Let us have a look at an example that
uses the forms array. Here we have a page with
three forms on it.


 Form Object –
 Form is a property of the document object. This corresponds to an
HTML input form constructed with the FORM tag. A form can be
submitted by calling the JavaScript submit method or clicking the
form SUBMIT button. Some of the form properties are:
 Action – This specifies the URL and CGI script file name the form
is to be submitted to. It allows reading or changing the ACTION
attribute of the HTML FORM tag.
 Button – An object representing a GUI control.
 Elements – An array of fields and elements in the form.
 Encoding – This is a read or write string. It specifies the encoding
method the form data is encoded in, before being submitted to the
server. It corresponds to the ENCTYPE attribute of the FORM tag.
The default is “application/x-www-form-urlencoded”. Other
encoding includes text/plain or multipart/form- data.
 Length – The number of fields in the elements array, that is, the
length of the element array.

 Method – This is a read or write string. It has the value
“GET” or “POST”.
 Name – The form name. Corresponds to the FORM Name
attribute.
 Password – An object representing a password field.
 Radio – An object representing a radio button field.
 Reset – An object representing a reset button.
 Select – An object representing a selection list.
 Submit – An object representing a submit button.
 Target – The name of the frame or window to which the
form submission response is sent by the server.
 Corresponds to the FORM TARGET attribute.
 Text – An object representing a text field.
 Text area – An object representing a text area field.

 Some of the Form Element Properties are:
 Name – It provides access to an element‟s name attribute. It
applies to all form element.
 Type – Identifies the object‟s type. It applies to all element.
 Value – Identifies the object‟s value. It applies to all button,
checkbox, hidden, password, radio, reset, submit, text or textarea.
 Checked – Identifies whether the element is checked. It applies to
checkbox and radio.
 Default checked – Identifies whether the element is checked by
default. It applies to checkbox and radio.
 Default value – Identifies the object‟s default value. It applies to
password, submit and textarea.
 Length – Identifies the length of a select list. It applies to select.
 Option – An array that Identifies the options supported by the
select list. It applies to select.

Paca java script slid

More Related Content

What's hot (14)

Viewers also liked (8)

Similar to Paca java script slid (20)

Recently uploaded (20)

Paca java script slid