Scribd
Upload
10 views12 pages

Workshop On Web Programming Day 03

The document contains a series of JavaScript programs demonstrating various concepts such as script placement, arithmetic operations, assignment and comparison operators, functions, object creation, inheritance, and event handling. Each program is presented in HTML format with accompanying JavaScript code that illustrates its functionality. The examples cover a wide range of topics, including arrays, string methods, date methods, and regular expressions.

Uploaded by

Gavi Kiran
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
10 views12 pages

Workshop On Web Programming Day 03

The document contains a series of JavaScript programs demonstrating various concepts such as script placement, arithmetic operations, assignment and comparison operators, functions, object creation, inheritance, and event handling. Each program is presented in HTML format with accompanying JavaScript code that illustrates its functionality. The examples cover a wide range of topics, including arrays, string methods, date methods, and regular expressions.

Uploaded by

Gavi Kiran
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

JAVASCRIPT PROGRAMS

DAY3
Program1://placing script within head section

<html>
<head>
<script>
document.write("Hello World");
</script>
</head>
</html>

Program 2://placing script within body section

<html>
<body>
<script>
document.write("Hello World");
</script>
</body>
</html>

Program 3: External Java Script //External Java Script File


//HTML file //s.js
<html> document.write("Hello World");
<body>
<script src="s.js">
</script>
</body>
</html>

Program 4: Arithmetic operations


<html>
<body>
<script>
var a=15,b=3;
Day 03: Java Script

document.write("Sum\t"+(a+b)+"<br>");
document.write("Difference\t"+(a-b)+"<br>");
document.write("Product\t"+ (a*b) +"<br>");
document.write("Quotient\t"+ (a/b) +"<br>");
document.write("Remainder\t"+ (a%b) +"<br>");

1
</script>
</body>
</html>
Program 5: Assignment operators

<html>
<body>
<script>
var a=15,b;
b=a;
document.write("a="+a);
document.write("<br>b="+b);
a+=5;
b*=3;
document.write("<br>+="+a);
document.write("<br>+="+b);</script>
</body>
</html>

Program 6: Comparison operators


<script>
var a=15,b=30,c="hello",d='hello';
document.write("<br>=="+(a==b));
document.write("<br>==="+(c===d));
document.write("<br>"+(a>=b));
document.write("<br>"+(a<=b));
document.write("<br>")
document.write((a>b)?"greater":"smaller");
</script>

Program 7: typeof operator


<html>
<body>
<script>
var a=2,b=3.5,c='a',d="hello";
document.write("type of a="+ typeof a +"<br>");
document.write("type of b="+ typeof b +"<br>");
document.write("type of c="+ typeof c +"<br>");
document.write("type of d="+ typeof d +"<br>");
Day 03: Java Script

</script>
</body>
</html>
Program 8: Find a number is odd/even with prompt window
<html>

2
<body>
<script>
var a=prompt("enter a number");
if(a%2==0)
alert(a+" is an even number");
else
alert(a+" is an odd number");
</script>
</body>
</html>

Program 9: Program with confirm window


<html>
<body>
<script>
var a=prompt("enter a number");
if(a%2==0)
alert(a+" is an even number");
else
alert(a+" is an odd number");
</script>
</body>
</html>

Program 10: with switch statement


<html>
<body>
<script>
var a=parseInt(prompt("enter first number"));
var b=parseInt(prompt("enter second number"));
var c=parseInt(prompt("enter choice(any number between 1-4)"));
switch(c)
{
case 1:
alert("sum="+(a+b));
break;
case 2:
alert("Difference="+(a-b));
break;
Day 03: Java Script

case 3:

alert("Product="+(a*b));
break;
case 4:

3
alert("Quotient="+(a/b));
break;
default:
alert("Enter any number between 1-4");
break;
}
</script>
</body>
</html>

Program 11: Example – 1D Arrays


<html>
<body>
<script>
var a=[1,2,3,4];
var b=[];
b[0]="apple";
b[1]="orange";
b[2]="mango";
b[3]="grapes";
for(var i=0;i<a.length;i++)
document.write(a[i]+"<br>");
for(var i=0;i<b.length;i++)
document.write(b[i]+"<br>");
</script>
</body>
</html>

Program12: Example – 2D Arrays


<html>
<body>
<script>
var a=[[1,2,3,4],[1,2,3,4],[1,2,3,4],
[1,2,3,4]];
document.write("Access through Rows<br>");
for (var i = 0;i< a.length; i++)
{
document.write(a[i]+"<br>");
}
Day 03: Java Script

document.write("Access through each element<br>");


for (var i = 0;i< a.length; i++)
{
for(var j = 0;j< a[i].length; j++)
{

4
document.write(a[i][j]+"\t");
}
document.write("<br>");
}
</script>
</body>
</html>
Program 13: Functions- Simple Example
<html>
<body>
<script>
function display()
{
document.write("Hello World");
}
display();
</script>
</body>
</html>
Program 14: Functions with arguments and return types
<html>
<body>
<script>
function add(a,b)
{
return(a+b);
}
var x=parseInt(prompt("Enter a number"));
var y=parseInt(prompt("Enter a number"));
document.write("sum="+add(x,y));
</script>
</body>
</html>
Program 15:Object Creation –Method 1 – Example 1
<html>
<body>
<script>
var Employee={name:"Raj",No:123, salary:50000};
document.write("<b>"+"Details of Employee"+"</b>"+"<br>");
Day 03: Java Script

document.write("Name: "+Employee.name + "<br>"+"No: "+Employee.No+"<br>"+"Salary:


"+Employee["salary"]);
</script>
</body>
</html>

5
Program 16: Object Creation –Method 1- Example 2
<html>
<body>
<script>
function display()
{
document.write("<b>"+"Details of Employee"+"</b>"+"<br>");
document.write("Name: "+Employee.name + "<br>"+"No: "+Employee.No+"<br>"+"Salary:
"+Employee["salary"]);
}
var Employee={name:"Raja",No:123, salary:50000,view:display};
Employee.view();
</script>
</body>
</html>
Program 17: Object Creation –Method 2
<html>
<body>
<script>
var person = new Object();
person.name = "John";
person.age = 50;
person.sex = "Male";
document.write("Name: "+person.name + "<br>"+"Age: "+person.age+"<br>"+"Sex:
"+person["sex"]);
</script>
</body>
</html>
Program 18: Object Creation –Method3
<html>
<body>
<script>
function Person(name, age, sex)
{
this.name = name;
this.age = age;
this.sex = sex;
}
var p=new Person("Banu",30,"Female");
Day 03: Java Script

document.write("Name: "+p.name + "<br>"+"Age: "+p.age+"<br>"+"Sex: "+p["sex"]);


</script>
</body>
</html>
Program 19: Pass by Value

6
<script>
function transpose(a,b)
{
var t=a;
a=b;
b=t;
document.write("<br>Inside Function<br>")
document.write("<br>a="+a);
document.write("<br>b="+b);
}
var x=5,y=7;
document.write("<br>Before Function Call<br>")
document.write("<br>x="+x);
document.write("<br>y="+y);
transpose(x,y)
document.write("<br>After Function Call<br>")
document.write("<br>x="+x);
document.write("<br>y="+y);
</script>
Program 20: Pass by Reference
<script>
function display()
{
document.write("<br><b>"+"Details of Employee"+"</b>"+"<br>");
document.write("Name: "+Employee.name + "<br>"+"No: "+Employee.No+"<br>"+"Salary:
"+Employee["salary"]);
}
function modify(x)
{
x.name="Rani";
}
var Employee={name:"Raja",No:123, salary:50000,view:display};
document.write("<br> Before Function call");
Employee.view();
modify(Employee);
document.write("<br> After Function call");
Employee.view();
</script>
Day 03: Java Script

Program 21: Getters and Setters


<html>
<body>
<script>
var Employee={name:"Raj",No:123,salary:50000,

7
get Name(){return this.name;},
set Number(a){this.No=a;}
};
document.write("<b>"+"Details of Employee"+"</b>"+"<br>");
document.write("Name: "+Employee.Name + "<br>"+"No: "+Employee.No+"<br>"+"Salary:
"+Employee["salary"]);
Employee.Number=567;
document.write("<b>"+"Details of Employee"+"</b>"+"<br>");
document.write("Name: "+Employee.Name + "<br>"+"No: "+Employee.No+"<br>"+"Salary:
"+Employee["salary"]);
</script>
</body>
</html>
Program 22: Classes with constructors,method,getter method,static method
<html>
<body>
<script>
class Employee
{
constructor(name,No,salary)
{
this.name=name;
this.No=No;
this.salary=salary;
}
display()
{
document.write("<b>"+"Details of Employee"+"</b>"+"<br>");
document.write("Name: "+this.Name + "<br>"+"No: "+this.No+"<br>"+"Salary:
"+this["salary"]);
}
get Name()
{
return this.name;
}
static view()
{
document.write("<br>"+"<b>"+"This is a static method"+"</b>"+"<br>");
}
Day 03: Java Script

}
var e1=new Employee("John",1234,80000);
e1.display();
Employee.view();
</script>

8
</body>
</html>
Program 23: Inheritance
<html>
<body>
<script>
class Person
{
constructor(name)
{
this.name=name;
}
}
class Employee extends Person
{
constructor(name,No,salary)
{
super(name);
this.No=No;
this.salary=salary;
}
display()
{
document.write("<b>"+"Details of Employee"+"</b>"+"<br>");
document.write("Name: "+this.name + "<br>"+"No: "+this.No+"<br>"+"Salary:
"+this["salary"]);
}
}
var e1=new Employee("Ramu",112,60000);
e1.display();
</script>
</body>
</html>
Program 24: Array Object methods
<html>
<body>
<script>
var a = new Array("Banana", "Orange", "Apple", "Mango");
for(var i in a)
Day 03: Java Script

document.write(a[i]+"\t");
document.write("<br>"+"Result of toString()= "+a.toString());
document.write("<br>"+"Result of pop() = "+a.pop()+"<br>");
a.push("Guava");
document.write("After Push:");

9
for(var i in a)
document.write(a[i]+"\t");
a.sort();
document.write("<br>After Sort:");
for(var i in a)
document.write(a[i]+"\t");
a.splice(0,1);//removes first element
document.write("<br>After Splice delete:");
for(var i in a)
document.write(a[i]+"\t");
a.splice(2, 0, "Lemon", "Kiwi");
document.write("<br>After Splice insert:"); //starts insertion from 2,removes 0 elements
for(var i in a)
document.write(a[i]+"\t");
a.sort();
document.write("<br>After Sorting:");
for(var i in a)
document.write(a[i]+"\t");
</script>
</body>
</html>
Program 25: String methods

<html>
<body>
<script>
var a = new String("Hello World!");
document.write("<br>"+a);
document.write("<br>"+a.toUpperCase());
document.write("<br>"+a.toLowerCase());
document.write("<br>"+a.charAt(0)); document.write("<br>"+a.replace("World","Everyone"));
document.write("<br>"+a.search("World"));
document.write("<br>"+a.slice(0,5));
document.write("<br>"+a.slice(-10,-5));
document.write("<br>"+a.substr(0,5));
</script>
</body>
</html>
Day 03: Java Script

Program 26:Date Methods


<html>
<body>
<script>
var a = new Date();

10
document.write("<br>"+a);
document.write("<br>Year= "+a.getFullYear());
document.write("<br>Month= "+a.getMonth());
document.write("<br>Day= "+a.getDate());
document.write("<br>Hours= "+a.getHours());
document.write("<br>Minutes= "+a.getMinutes());
document.write("<br>Seconds= "+a.getSeconds());
a.setYear(2021);
document.write("<br>"+a);
</script>
</body>
</html>
Program 27: Usage of Regular expression
<html>
<body>
<script>
var a="Hello! How are You?";
var x=a.search(/H/i); //returns posiion of first word starting with H
document.write(x);
var y=a.search(/\d/i);//search for a digit//not present returns -1
document.write(y);
a.replace(/H/i,"Hai")
document.write("<br>After replace:"+a);
</script>
</body>
</html>
Program 28: Events-Inline Handlers
<html>
<body>
<button onclick="alert('Hello')"> Click</button>
</body>
</html>
Program 29: Events-Using Functions
<html>
<body>
<script>
function display()
{
alert('Hello world!');
Day 03: Java Script

}
</script>
<button onclick="display()"> Click</button>
</body>
</html>

11
Program 30: Arithmetic Operations using Event Handling
<html>
<body>
<script>
function calculate()
{
var a=parseInt(document.getElementById("t1").value);
var b=parseInt(document.getElementById("t2").value);
document.write("sum="+(a+b));
document.write("<br>Difference="+(a-b));
document.write("<br>Product="+(a*b));
document.write("<br>Quotient="+(a/b));
}
</script>
Enter First Number <input type="text" id="t1"> <br>
Enter Second Number <input type="text" id="t2"> <br>
<button onclick="calculate()">ADD</button>
</body>
</html>

Day 03: Java Script

12

You might also like