Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

INtroduction to Java script

This document provides an overview of JavaScript programming, covering its basic elements, including variables, control structures, functions, and objects. It explains the use of JavaScript in web development, its comparison with Java, and how to write JavaScript code using the <SCRIPT> tag. The module aims to equip learners with the skills to write JavaScript code effectively.

Uploaded by

10650sarvesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

INtroduction to Java script

This document provides an overview of JavaScript programming, covering its basic elements, including variables, control structures, functions, and objects. It explains the use of JavaScript in web development, its comparison with Java, and how to write JavaScript code using the <SCRIPT> tag. The module aims to equip learners with the skills to write JavaScript code effectively.

Uploaded by

10650sarvesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

Web Programming

Javascript

1 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Agenda

1 JavaScript basic elements

2 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Objectives

At the end of this module you will be able to:


• Write JavaScript code using all the basic
elements
of JavaScript Programs

3 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript basic elements

4 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


DHTML
DHTML stands for Dynamic Hyper Text Markup Language which helps
to add Dynamic content to static HTML pages.
• Dynamic HTML, is a new web technology that enables elements
inside your web page to be, well, dynamic.

• Things once considered unchangeable once the page has loaded,


such as text, page styles (font color, size etc), element position, etc.,
can now all be changed dynamically.

• It brings your web pages one step closer to how things look inside
your television, where images appear and disappear, text flies in and
out, and content moves around freely inside the screen.

• DHTML is any combination of Style Sheets, JavaScript, and Layering.

5 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Introduction to JavaScript
JavaScript is an easy to use object scripting language. It is designed for
creating live online applications. Code is included as part of a HTML
Document

Scripts are run by the Web


browser.

6 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Introduction to JavaScript: JavaScript Versus Java

JavaScript can be combined directly with HTML


The JavaScript language structure is simpler than
that of Java
JavaScript is a purely interpreted language
The JavaScript interpreter is built into a Web browser

7 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Introduction to JavaScript: Using the SCRIPT Tag

• The <SCRIPT> tag is an extension to HTML that can enclose any


number of JavaScript statements as shown here:
• <SCRIPT>
• JavaScript statements...
• </SCRIPT>
• A document can have multiple <SCRIPT> tags, andeach
enclose any number of JavaScript statements. can
• Unlike HTML, JavaScript is case sensitive.

8 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Introduction to JavaScript: Using the SCRIPT Tag

<HTML>
<HEAD>
<TITLE>Login Page </TITLE>
</HEAD>
<BODY>
HTML Text goes here.
<SCRIPT LANGUAGE="JavaScript">
document.write(“WelCome To green
Bank")
</SCRIPT>
</BODY>
</HTML>

9 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Elements of JavaScript Program

• Elements of JavaScript Program can be divided into five categories,


as follows:

• Variables

• Expressions

• Control Structures

• Functions

• Objects and Arrays

10 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Elements of JavaScript Program: Variables

• Data Types

• Rules for variable names

• Variable Declaration and


Scope

11 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Elements of JavaScript Program: Variables

Data Types and Variables


• You can use data in two ways:
• As a literal or constant value
• As a variable
• The four fundamental data types used:
• Numbers
• Boolean, or logical values
• Strings
• The null value/ the object

12 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Elements of JavaScript Program: Variables

Rules for variable names

• Variable names can include alphabets, digits andthe


underscore

• (_)

• The first character can be either an alphabet or the underscore

• Are case-sensitive

• There is no official limit on the length of variable names, but they


must fit within one line.

13 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript Statements

Conditional statements: if...else and switch

Loop Statements: for, while, do…while, break and


continue

Object Statements and


Manipulation new, Operators:
this and with
Comments: single-line (//) and multi-line (/*...*/)

14 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript Statements: if else
• if...else Statement
• Use the if statement perform certain statements if a logical
condition is true;
to optional else clause to other
statements
use the if the condition is false. An if statement looks as follows:
perform

if (condition) {
statements1
}
else {
statements2
}

• The condition can be any JavaScript expression that evaluates to


true or false. The statements to be executed can be any JavaScript
statements, including further nested if statements. If you want to use
more than one statement after an if or else statement, you must
enclose the statements in curly braces: {}.

15 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


What will this code print ?
<html>
<body>
<script language="JavaScript">
var data=4, mesg=" ";
if(data ==0){
document.write(data +" can't be odd or even"+"<BR>");
}
else{ if(data%2==0)
mesg="Even"; else
mesg="Odd"; document.write(data +"
is "+mesg);
}
</script>
</body></html>

16 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript Statements: Switch Statement

• A switch statement allows a program to evaluate an expression


and attempt to match the expression's value to a case label

• If a is the program executes the associated


match
statement found,

• A ‘switch’ statement looks as


follows:
switch (expression){
case label :
statement;
break;
default : statement;
}
17 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
JavaScript Statements: Switch Statement

• The program first looks for a label matching the value of expression
and then executes the associated statement. If no matching label is
found, the program looks for the optional default statement, and if
found, executes the associated statement. If no default statement is
found, the program continues execution at the statement following the
end of switch.
• The optional break statement associated with each case label
ensures that the program breaks out of switch once the matched
statement is executed and continues execution at the statement
following switch. If break is omitted, the program continues execution
at the next statement within the switch statement itself.

18 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


What will this code print ?
<script language="javascript">
var choice = 3, Login=" "
switch(choice){
case 1: login = "Manager"
break;
case 2: login = "Staff"
break;
default: login = "Customer";
}
document.write("you have Logged in As "+login)
</script>

19 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript Statements: for Statement

When a for loop executes, the following occurs:


Step 1: The initializing expression ‘initial-expression’, if any, is

executed. This expression usually initializes one or more loop counters,

but the syntax allows an expression of any degree of complexity.

Step 2: The ‘condition’ expression is evaluated. If the value of

condition is true, the loop statements execute. If the value of

condition is false, the for loop terminates.

Step 3: Assuming that the condition is true, the statements execute.

Step 4: Finally, the update expression ‘increment-expression’

executes and control returns to step 2.

20 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript Statements: for Statement

A for loop repeats until a specified condition evaluates to false. A ‘for’

statement looks as follows:


for ([initial-expression]; [condition]; [increment-expression]) {

statements

21 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript Statements: for Statement

Simple example to understand For Loop and if:

<SCRIPT language="javascript">
var loginstatus;
for(loginstatus=1;loginstatus<=3;loginstatus++){
if(loginstatus==1){
document.writeln(" Status=1 You can be Login As Manager");
}
if(loginstatus==2){
document.writeln(" Status=2 You can be Login As Staff");
}
if(loginstatus==3){
document.writeln(" status=3 You can be Login As Customer");
}
}

</SCRIPT >
22 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
What will this code print ?
<html>
<body>
<script language="JavaScript">
var x,y;
for(x=19;x>0;x--){
for(y=1;y<=x;y++)
document.write(x+" ");
document.write("<BR>");
}
</script>
</body>
</html

23 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript Statements: do…while Statement

• The do...while statement repeats until a specified condition evaluates to


False

• A ‘do...while’ statement looks as follows

do {
statement
} while (condition)
Statement executes once before the condition is checked. If condition
returns true, the statement executes again. At the end of every
execution, the condition is checked. When the condition returns
false, execution stops and control passes to the statement
following do...while.

24 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


What will this code print ?
<SCRIPT language="javascript">

var num = 1234566

var count = 0
do {
count++;
num /= 10;
} while (num>1);

document.write(“total digits”+count);
</ SCRIPT >

25 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


JavaScript Statements: while Statement
• A while statement executes its statements as long as a specified condition
evaluates to true

• If the condition becomes false, the statements within the loop stop executing
and control passes to the statement following the loop. The condition test
occurs before the statements in the loop are executed. If the condition
returns true, the statements are executed and the condition is tested again. If
the condition returns false, execution stops and control is passed to the
statement following while.

• A ‘while’ statement looks as follows

while (condition) {
statements
}

26 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


What will this code print ?
<html><body>
<script language="JavaScript">
var x=123;
var y=0;
var z;
while(x>0){
z=x%10;
y+=z;
x=parseInt(x/10);
document.write(x+"<BR>");
document.write(y+"<BR>");
document.write(z+"<BR>");
}
document.write(y);
</script>
</body></html>
27 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Functions
Functions are one of the fundamental building blocks in
JavaScript. A function is a JavaScript procedure: a set of
statements that performs a specific task. To use a
function, you must first define it, then your script
can call it.

A function definition looks as


follows:

function gcd(m,n) { gcd(n,m%n) : m ;


} return n > 0 ?

28 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Functions
A function definition consists of the function keyword, followed by the

name of the function, a list of arguments to the function, enclosed in

parentheses and separated by commas. The JavaScript statements

that define the function are enclosed in curly braces: { }. The

statements in a function can include calls to other functions defined in

the current application. It is good practice to define all your functions in

the HEAD of a page so that when a user loads the page, the functions

are loaded first.

29 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Functions
<script language="javascript">
function interest(amt,per)

{
var m=(per/100)*amt;
return m;

var amount=50000;
var per=6;
totalbalance= amount+interest(amount,per) ;
document.write(totalbalance);
</script>

30 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


What will this code print ?
<html>
<body>
<script language="JavaScript">
function gcd(m,n){
return n > 0 ? gcd(n,m%n):m;
}
document.write(gcd(96,16));
</script>
</body>
</html>

31 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Summary

In this module, you were able to:


• Write JavaScript code using all the basic
elements of JavaScript Programs

32 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL


Thank
You

33 © 2012 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL

You might also like