MST LAB PSCMR college of Engineering and Technology
WEEK-4D
1. Aim: write a javascript program to create a object using key values. key value to store the
employee details.
Source code for creation of object:
<body><script>
emp = {id:102,name:"Shyam Kumar",salary:40000},
document.writeln(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body><br>
<body><script>
var emp = new Object();
emp.id=104;
emp.name="Ravi";
emp.salary=50000;
document.writeln(emp.id+" "+emp.name+" "+emp.salary);
</script></body>
Output:
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
2. Aim: write a javascript program to types of objects.
Source code for types of objects:
<body><script>
var a = true;
document.writeln("type of a is: "+typeof(a)+"<br>");
var b = new Boolean(false);
document.writeln("Type of b is: "+typeof(b)+"<br>");
var c = 10;
var d = 10;
document.writeln("c+d: "+(c+d)+"<br>");
document.writeln("Type of c is: "+typeof(c)+"<br>"+"Type of d is: "+typeof(d)+"<br>");
var x = new Number(20);
var y = new Number(20);
document.writeln("Type of x is: "+typeof(x)+"<br>"+"Type of y is:"+typeof(y)+"<br>");
document.writeln("x+y: "+(x+y)+"<br>");
document.writeln("c==d: "+(c==d)+"<br>");
document.writeln("x==y: "+(x==y));
</script></body>
Output:
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
3. Aim: write a javascript program to print correct date and time in a specific part.also print time
alone.
Source code date & time and also time alone:
<body>
</script>
Current Date and time: <span id='txt'></span><br>
Current time: <span id="txt1"></span>
<script>
var today = new Date();
document.getElementById('txt').innerHTML=today;
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
document.getElementById('txt1').innerHTML=h+":"+m+":"+s;
</script>
</body>
Output:
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
4. Aim: write a javascript program to print date in the following format. First line should print
day, second line should print month and third line should print year.
Source code day, month & year:
<body><script>
var d = new Date();
document.writeln("Day:"+d.getDate()+"<br>Month:"+(d.getMonth()+1)+"<br>Year:
"+d.getFullYear());
</script></body>
Output:
5. Aim: write a javascript program to print ‘Hello World’ in a special window.
Source code window.alert:
<body><script>
window.alert("Hello world");
</script></body>
Output:
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
6. Aim: write a javascript program to display confirmation alert. When a user clicks on delete
record button.
Source code confirm:
<body><script>
function msg(){
var v = confirm("Are you sure: ");
if(v==true){
alert('ok'); }
else{
alert('cancel'); }}
</script>
<input type="button" value="Delete Record" onclick="msg();">
</body>
Output:
Figure 1: output for delete button
Figure 2: output for after clicks on delete button
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Figure 3: output for after clicks on ok button
Figure 4: output for after clicks on cancel button
7.Aim: write a javascript program to enquire what is the user name in a special window and
display ‘I am, username’ after clicking on the clicking button.
Source code for username in a special window:
<body><script>
function msg(){
var v = prompt("Who are you?");
alert("I am, "+v);} </script>
<input type="button" value="Click" onclick="msg();"></body>
Output:
Figure 1: output for click button
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Figure 2: output for after clicks on click button and entering username
Figure 3: output for username displaying in a special window
8.Aim: write a javascript program to search on or to open google website when a user click on
search button.
Source code for search:
<body><script>
function msg() {
open("http://www.google.com"); }</script>
<input type="button" value="Search" onclick="msg();">
</body>
Output:
Figure 1: output for search button
Figure 2: output for after clicks on search button and opened google page
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
9. Aim: write a javascript program to print welcome to javascript after 2000 milliseconds.
Source code:
<body><script>
function msg() {
setTimeout(function(){
alert("Welcome to JavaScript after 2 seconds"); },2000); }
</script> <input type="button" value="Click" onclick="msg();"></body>
Output:
Figure: output for click button
Figure: output displayed when user clicks click button after 2 seconds
10. Aim: write a javascript program to close the window when user clicks on close button.
Source code close:
<body> <script>
function msg( ) {
window.close( ); }
</script>
<input type="button" value="Close" onclick="msg();"></body>
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Output:
Figure 1: output for close button
Figure 2: output for after clicks close button
11. Aim: write a javascript program for navigator and screen.
Source code for navigator & screen:
<script><!-- navigation -->
document.writeln("navigator.appCodeName: "+navigator.appCodeName);
document.writeln("<br/>navigator.appName: "+navigator.appName);
document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);
document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled);
document.writeln("<br/>navigator.language: "+navigator.language);
document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);
document.writeln("<br/>navigator.platform: "+navigator.platform);
document.writeln("<br/>navigator.onLine: "+navigator.onLine);
</script>
<script> <!-- screen -->
document.writeln("<br/>screen.width: "+screen.width);
document.writeln("<br/>screen.height: "+screen.height);
document.writeln("<br/>screen.availWidth: "+screen.availWidth);
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
document.writeln("<br/>screen.availHeight: "+screen.availHeight);
document.writeln("<br/>screen.colorDepth: "+screen.colorDepth);
document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth);
</script>
Output:
12. Aim: write a javascript program for history.
Source code for history:
<script> <!-- history -->
document.writeln("<br>");
function h() {
history.back();//for previous page
history.forward();//for next page
history.go(2);//for next 2nd page
history.go(-2);//for previous 2nd page }
</script>
Output:
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
13. Aim: write a javascript program to count the no: of paragraphs in the given HTML page.
When a user clicks on gthe count button.
Source code for counting paragraphs using getElemetsByTagName:
<body><script>
function count(){
var total=document.getElementsByTagName("p");
alert("the total tags are:"+total.length);}
</script>
<p> this is paragraph</p>
<p> hello world</p>
<p> welcome to javascript</p>
<button onclick="count()">count</button></body>
Output:
Figure 1: output for paragraphs and count button
Figure 2: output for total number of paragraphs
14. Aim: write a javascript program to count no: of radio buttons.
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Source code for counting radio buttons using getElementsByName:
<body> <script>
function fun(){
var total=document.getElementsByName("r");
alert("the total no: radio buttons are:"+total.length); }
</script>
<form onsubmit="fun()">
C:<input type="radio" name="r"/>
C++:<input type="radio" name="r"/>
<input type="submit"/>
</form></body>
Output:
Figure 1: output for radio buttons and submit button
Figure 2: output for total number of radio buttons
15. Aim: write a javascript program to print class executed by the respective HTML program.
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Source code for getElementsByClass():
<body>
<head>
<h2>Dom methods</h2>
</head>
<div class="class">
<p>Hello world</p>
</div>
<script>
var x=document.getElementsByClassName("class");
document.writeln("on calling x,it will return an array-like object:<br>"+x);
</script>
</body>
Output:
WEEK-4B
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Aim: Create an Employee class extending from a base class Person. Hints: (i) Create a class
Person with name and age as attributes. (ii) Add a constructor to initialize the values
(iii) Create a class Employee extending Person with additional attributes role.
Source code for class:
<body><script>
class person {
constructor(name,age) {
this.name=name;
this.age=age; }
detail() {
document.writeln("Name: "+this.name+" "+"Age: "+this.age); }}
class emp extends person {
constructor(name,age,role) {
super(name,age);
this.role=role; }
show() {
document.writeln("Name: "+this.name+" "+"Age: "+this.age+" "+"Role: "+this.role+"<br>"); }}
var p=new emp("ravi",25,"teacher");
p.show(); p.detail();
</script> </body>
Output:
WEEK-5A
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
1. Aim: write a JavaScript program to combine arrays into a single array & store it in a new
array.
Source code for Concat method:
<body><script>
var arr1=[1,2];
var arr2=[4,6];
var arr3=["Apple","Ball"];
var res=arr1.concat(arr2,arr3);
document.writeln("<b>Concatination operation:</b> "+res+"<br><br>");
for(i=0;i<res.length;i++) {
document.writeln(res[i]+"<br>"); }
</script></body>
Output:
2. Aim: write a javascript program to print the student marks greater than 30.
Source code for filter method:
<script>
var marks=[50,40,45,37,20];
function check(value){
return value>30;}
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
document.writeln(marks.filter(check));
</script>
Output:
3. Aim: write a javascript program to find the first element in the array whose value is greater
than 20.
Source code for find method:
<script>
var marks=[50,40,45,37,20];
function check(value){
return value>30; }
document.writeln("finding specific first greater value:"+marks.find(check));
</script>
Output:
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
4. Aim: Write a JavaScript program to find the first element index in array whose value is
greater than 20.
Source code for findIndex method:
<body>
<script>
var arr = [5,22,19,25,34];
var result = arr.findIndex(x=>x>20);
document.writeln("finding 20 greater than first element: "+result);
</script>
</body>
Output:
5. Aim: write a javascript program to find the lastelement value in the array.
Source code for lastIndex method:
<script>
var arr=["c","c++","python","c++","java"];
var res1=arr.lastIndexOf("c++");
document.writeln("Last Index of element:"+res1); </script>
Output:
6. Aim: write a javascript program to find the last element value in the array.
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Source code for indexOf method:
<script>
var arr=["c","c++","python","c++","java"];
var res1=arr.indexOf("c++"); // finding a value of first index
document.writeln(res1);
</script>
Output:
7. Aim: write a javascript program to add Jquery at the end of the array.
Source code for push function:
<script>
var arr=["angular js","node.js"];
document.writeln(arr+"<br>");
arr.push("jquery");
document.writeln("<b>elements after push operation: </b>"+arr);
</script>
Output:
8 Aim: write a javascript program to add a value at the starting of the array.
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Source code for unshift function:
<script>
var arr=["angular js","node.js"];
document.writeln("<b>Elements:</b> “arr+”<br>”);
arr.unshift("jquery");
document.writeln("<b>After unshift operation adding value starting of the array:</b> "+arr);
</script>
Output:
9. Aim: write a javascript program to remove the last element in the array.
Source code for pop function:
<script>
var arr=["angular js","node.js","jquery"];
document.writeln(arr+"<br>");
arr.pop();
document.writeln("<b>Remaining elements after pop operation: </b>"+arr);</script>
Output:
10. Aim: write a javascript program to remove the first element in the array.
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Source code for shift function:
<script>
var arr=["angular js","node.js","jquery"];
document.writeln(arr+"<br>");
arr.shift();
document.writeln("<b>elements after shift operation: </b>"+arr);
</script>
Output:
11. Aim: write a javascript program to reverse a given elements in aarray.
Source code for reverse function:
<script>
var arr=[1,2,3,4,5,6,7,8];
document.writeln(“<b>elements:</b>”+arr+"<br>");
arr.reverse();
document.writeln(“elements after reverse operation:</b> "+arr); </script>
Output:
12. Aim: write a javascript program to sort a given elements in a array.
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Source code for sort function:
<script>
var arr=[4,3,7,5,2,9,1,8,0];
document.writeln("<b> elements:</b> "+arr+"<br>");
arr.sort();
document.writeln("<b>elements after sort operation: </b>"+arr);
</script>
Output:
WEEK-5C
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
Aim: Validate the user by creating a login module. Hints: (i) Create a file login.js with a
User class. (ii) Create a validate method with username and password as arguments.
(iii) If the username and password are equal it will return "Login Successful" else wrong
Source code:
<body>
<script>
class login{
constructor(uname,pwd)
{
this.uname=uname;
this.pwd=pwd;
}
success()
{
if (this.uname == this.pwd)
{
document.writeln("Login Successful");
}
else {
document.writeln("wrong");
}
}
}
var l=new login("rani","rani");
l.success();
</script>
</body>
Output:
WEEK-5B
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
1.Aim: Introduction to Asynchronous Programming, Callbacks, Promises, Async and Await,
Executing Network Requests using Fetch API.
Source code for asynchronus:
let a=10;
console.log(a);
Output:
Source code for callbacks:
console.log(10);
const goodFunc=()=>{
console.log('good'); }
const bestFunc=()=>{
goodFunc();
console.log('best'); }
bestFunc();
Output:
Source code for promises:
const count=true;
let countvalue=new Promise(function(reslove,
if(count){
reslove("there is a count value");}
else{ reject("there is no count value");} });
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
console.log(countvalue);
Output:
Source code for fecth api:
<html><body>
<div id="foo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">
<script>
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("foo")
else { document.getElementById(“foo”)
xhttp.open("GET", "content.txt", true);
xhttp.send(); }
</script></body></html>
Output:
Figure 1: output for content changing button Figure 2: output for displaying a message
Submitted by: 20KT1A4247 Page no:
MST LAB PSCMR college of Engineering and Technology
2.Aim: Simulate a periodic stock price change and display on the console. Hints: (i) Create a
method which returns a random number - use Math.random, floor and other methods
to return a rounded value. (ii) Invoke the method for every three seconds and stop
when.
Source code:
<script>
var time = 3670;
window.setInterval(function(){
var h = Math.floor(time / 3600);
var m = Math.floor(time % 3600 / 60);
var s = Math.floor(time % 3600 % 60);
document.getElementById("demo").innerHTML = h + "h "+ m + "m " + s + "s ";
if (time < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED"; }
time--; }, 1000);
</script>
<body><div id='demo'></div></body>
Output:
Submitted by: 20KT1A4247 Page no:
