JS 1
JS 1
Unit 1: Basics of
JavaScript Programming
By: Ms
Lecturer, Government Polytechnic,
Bramhapuri
Things that you can't do by simply 2
using HTML
▪ Build dynamic web pages
▪ Display alert boxes
▪ Write messages to the browser status bar
▪ Control features of the browser
▪ Open new browser windows
▪ Customize reactions to mouse actions and keystrokes
▪ Validate information in forms
▪ Perform calculations
▪ Display messages when the cursor rolls over an object on the
screen
▪ Create interactive forms
▪ Set date and time
▪ Identify browsers and browser plug-ins such as Flash
3
By object literal
The syntax
object ={property1:value1,property2:value2.....propertyN:valueN}
var circle = {x:10, y:20,r :5};
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
Example
<html>
<body>
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
Object
By creating instance of Object
Javascript provides a special constructor function called
Object() to build the object. The return value of the Object() is
assigned to a variable.
The Syntax
var objectname=new Object();
var emp= new Object();
Here this keyword is used to refer to the object that has been
passed to a function.
Here, you need to create function with arguments. Each
argument value can be assigned in the current object by using
this keyword.
The this keyword refers to the current object.
Example
<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
function book(title, author)
{ this.title = title;
this.author = author;
} </script>
</head>
<body> <script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>
Property 8
▪ Boolean Data Type : The Boolean data type can hold only
two values: true or false.
▪ Var x= true;
▪ var a = 2, b = 5, c = 10; alert(b > a) // Output: true
▪ For Example,
10 / 5
▪ The division symbol (/) is the operator. The browser
evaluates this mathematical expression by dividing the value
on the right side of the operator to the value on the left side
of the operator
▪ JavaScript uses five types of operators: arithmetic operators,
logical operators, assignment operators, comparison
operators, and conditional operators.
Order of Operations 16
function myFunction(a, b)
{return a * b;}
Property Access Expressions 24
expression . identifier
expression [ expression ]
1. The if statement
2. The if...else statement
3. The if...else if....else statement
4. The switch...case statement
If Statement 27
if(condition)
{
// Code to be executed
}
Example
<html>
<body>
<script type = "text/javascript">
Syntax
switch (value)
{
case value1:
//Place statements here.
break;
case value2:
//Place statements here.
break;
default:
//Place statements here.
}
Loop Statement 33
{ document.write(aProperty);
document.write("<br />");
}
document.write ("Exiting from the loop!");
//-->
</script>
<p>Set the variable to different object and then try...</p>
</body>
</html>
While Loop 36
while (condition)
{
// body of loop
}
Example
<html>
<body>
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
</body>
</html>
Do While Loop 37
do
{ // body of loop
} while(condition)
Example
<html>
<body>
<script type = "text/javascript">
<!–
var count = 0;
document.write("Starting Loop" + "<br />");
do
{ document.write("Current Count : " + count + "<br />");
count++;
}
while (count < 5);
document.write ("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Loop Control Statements
The break Statement
The break statement, which was briefly introduced with
the switch statement, is used to exit a loop early, breaking out
of the enclosing curly braces.
Flow Chart
The flow chart of a break statement would look as follows −
Example
<html>
<body>
<script type = "text/javascript">
<!—
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
if (x == 5) {
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body> </html>
Loop Control Statements
The continue Statement
The continue statement tells the interpreter to immediately
start the next iteration of the loop and skip the remaining code
block. When a continue statement is encountered, the
program flow moves to the loop check expression immediately
and if the condition remains true, then it starts the next
iteration, otherwise the control comes out of the loop.
Example
<html>
<body>
<script type = "text/javascript">
<!–
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{ x = x + 1;
if (x == 5) { continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Property Getters and Setters 38