Scribd
Upload
14 views27 pages

Unit-4 1

The document provides an overview of client-side scripting using JavaScript, highlighting its advantages and disadvantages compared to server-side languages. It covers fundamental concepts such as variables, data types, functions, conditions, loops, and popup boxes, along with examples of how to implement them in HTML. The content aims to equip readers with the foundational knowledge required to use JavaScript effectively in web development.

Uploaded by

vaghanikaram1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views27 pages

Unit-4 1

The document provides an overview of client-side scripting using JavaScript, highlighting its advantages and disadvantages compared to server-side languages. It covers fundamental concepts such as variables, data types, functions, conditions, loops, and popup boxes, along with examples of how to implement them in HTML. The content aims to equip readers with the foundational knowledge required to use JavaScript effectively in web development.

Uploaded by

vaghanikaram1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Unit:4 Client Side Scripting using JavaScript

What is JavaScript?
• HTML & CSS concentrate on static rendering of page
• Things do not change on the page over time.
• Scripting languages allow content to change dynamically.
• Scripts are programs, they can execute on client side or the server
What is JavaScript?
• Advantages
• It uses its won resources and eases burden on the server
• Fewer features than server side languages
• Disadvantages
• Code is usually visible
• Code is probably modifiable
• Local files and databases can not be accessed (they are stored on the server)
JavaScript
Embedded
• JavaScript can be embedded in HTML document.
• <script> tag is used to defined client-side script.
Ex. <html>
<head>
<title> Simple Program of JavaScript </title>
</head>
<body>
<script type=“text/javascript”>
document.write(“hello javascript”);
</script>
</body>
</html>
External Script
• If you want to use the same script on several pages to place the code
in separate file.
Ex. <html>
<head> </head>
<body>
<script src=“myscript.js”> </script>
</body>
</html>
Variables
• JavaScript store information in named variables.
• Variable can contain several types of value:
• Number
• String
• Boolean
• null
• Function
• Object
• It is known as primitive data types.
• It’s supports composite data type known as an object.
• Object represents a collection of values, ordered, or unordered.
• Object can also be function.
Variables (contd…)
• Variable name has few other attributes such as,
• Case sensitive
• Can not punctuation, spaces, or start with digit
• Can not be a reserved word
• Declare a variable with a var statement you do not have to give type
anywhere to make it only hold a specific kind of value.
• Scope of variable
• It can either local or global scope
• Block-level variables are contained and not accessible outside of the block
var a; OR var a, b, c;
Variables (contd…)
• If variable is inside function then it will be local.
• If declared in the main program it will be available throughout the
program as global.
• If var is not used at all then the variable will have global scope
whether in a local function or not.
• It is possible to have a global variable and function (local) variable
with same name and they will not interfere with each other, although
inside the function only local version will be available.
Variables (contd…)
• Example: function tester(){
<html> var myname="Bert";
<body> var hername="Jane";
<script type="text/javascript"> othername="Sid";
var myname="Fred"; document.write(myname);}
tester(); </script>
document.write(myname); </body>
tester(); </html>
document.write(othername);
document.write(hername); Output: BertFredBertSid
Assignments
• We can assign values to variables with equals operator ‘=‘.
• It can be true for all types of values
x=123;
x=“Bert”;
x=x+1; would work as x++
Strings
• It can be defined as sequence of letters, digits, punctuation and so on.
• It can be wrapped in single or double quotes.
• Escape sequences
Sequence Character

\t Tab

\n Newline

\r Carriage return

\” Double quote

\’ Single quote

\\ Backslash
Strings (contd…)
• Strings can be joined with + operator, called concatenation.
mystring=“my name is” + “fred”;
• To find length of a string
lenstr=mystring.length;
To find specific character from a string
nchar=mystring.charAt(3);
Strings (contd…)
• Strings can be joined with + operator, called concatenation.
mystring=“my name is” + “fred”;
• To find length of a string
lenstr=mystring.length;
To find specific character from a string
nchar=mystring.charAt(3);
Strings (contd…)
Method Description
charAt Returns the character at a specific index
indexOf Find the first index of character
lastIndexOf Find the last index of character
substring Return section of string
valueOf Return numeric value of string
toLowerCase Convert string to lower case
toUppercase Convert string to upper case
Arrays
• Collection of data
• Array are created using the Array() constructor:
var myArray = new Array();
a[0]=1;
a[1]=“three”;
a[2]=true;
• any type of value can be assigned
• to initialize
var myArray=new Array(1,”three”,true);
Arrays (contd…)
• To declare array with no. of elements
var myArray=new Array(10);
Functions
• It is section of code that is separate from main program.
• It is defined once and invoked many times.
• Function can be passed as parameters and a value can be returned,
function multByTen(x)
{
return x*10;
}
• To call the function,
mysum=multByTen(3);
Functions (contd…)
function multXbyY(x,y){
• Example: document.write(“x
<html> is”+x);
<body> document.write(“y
<script type=“text/javascript”> is”+y);
var z=multXbyY(10,15); return x*y;
document.write(“The result is”+z); }
</script>
</body>
</html>
Conditions
• If(a==10){
// execute this block if true
}
• Operators <, >, <=, =>, !(logical complement), !=, ==, ===(test for identity),
!==(test for non-identity), &&, ||
• If(a==10){
// execute this block if true
}
else {
// do this if not true
Conditions (contd…)
• switch
switch(expression){
case label1:
break;
case label2:
break;
default:
}
Conditions (contd…)
• Conditional operator
variable = (condition) ? value1 : value2;
• Loops
for, while, do…while
• for(i=10;i<=20;i++)
{document.write(x[i]);}
• i=10;
while(i<=20)
{document.write(x[i]);
i++:}
Conditions (contd…)
• i=10;
do
{ document.write(x[i]);
i++;
} while(i<=20);
JavaScript Popup Boxes
1. Alert box
2. Confirm box
3. Prompt box
JavaScript Popup Boxes (contd…)
1. Alert box
• Alert box is used to inform or give a message to user.
alert(“web page is loaded”);

Web page is loaded

ok
JavaScript Popup Boxes (contd…)
2. Confirm box
• Confirm box is used to get the user confirmation for certain action.
var c = confirm(“Are you sure?”);
• If you press ok button, the value of c is true, and if you press cancel
button, the value of c is false.

Are You Sure?

ok Cancel
JavaScript Popup Boxes (contd…)
3. Prompt box
• Prompt box is used to receive a value from the user.
var val = prompt(“Enter an Integer”);
• Provide default value, use second argument,
var val = prompt(“Enter an Integer”, 0);

Enter an Integer
|

ok Cancel
JavaScript Popup Boxes (contd…)
Example:
<html>
<body>
<script type=“text/javascript”>
alert (“Welcome to JavaScript”);
var c = confirm(“Are you ready to work?”);
if(c==true){
var name = prompt(“Enter your Name”, “ABC”);
document.write(“Your name is” +name); }
</script>
</body>
</html>

You might also like