MST (New)

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:

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:

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:

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:

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

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

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

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>

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>
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> 
document.writeln("<br/>screen.width: "+screen.width);
document.writeln("<br/>screen.height: "+screen.height);
document.writeln("<br/>screen.availWidth: "+screen.availWidth);

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> 
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:

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.

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.

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

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

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;}

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:

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.

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.

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"];
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.

Source code for shift function:
<script>
var arr=["angular js","node.js","jquery"];
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.

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

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

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");} });

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

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:

MST (New)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MST (New)

Uploaded by

Copyright:

Available Formats

MST LAB PSCMR college of Engineering and Technology

Source code for creation of object:

emp = {id:102,name:"Shyam Kumar",salary:40000},

document.writeln(emp.id+" "+emp.name+" "+emp.salary);

var emp = new Object();

document.writeln(emp.id+" "+emp.name+" "+emp.salary);

Submitted by: 20KT1A4247 Page no:

2. Aim: write a javascript program to types of objects.

Source code for types of objects:

document.writeln("type of a is: "+typeof(a)+"<br>");

var b = new Boolean(false);

document.writeln("Type of b is: "+typeof(b)+"<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>");

Submitted by: 20KT1A4247 Page no:

Source code date & time and also time alone:

Current Date and time: <span id='txt'></span><br>

Current time: <span id="txt1"></span>

var today = new Date();

Submitted by: 20KT1A4247 Page no:

Source code day, month & year:

var d = new Date();

5. Aim: write a javascript program to print ‘Hello World’ in a special window.

Source code window.alert:

Submitted by: 20KT1A4247 Page no:

Source code confirm:

var v = confirm("Are you sure: ");

<input type="button" value="Delete Record" onclick="msg();">

Figure 1: output for delete button

Figure 2: output for after clicks on delete button

Submitted by: 20KT1A4247 Page no:

Figure 3: output for after clicks on ok button

Figure 4: output for after clicks on cancel button

Source code for username in a special window:

var v = prompt("Who are you?");

alert("I am, "+v);} </script>

<input type="button" value="Click" onclick="msg();"></body>

Figure 1: output for click button

Submitted by: 20KT1A4247 Page no:

Figure 3: output for username displaying in a special window

Source code for search:

<input type="button" value="Search" onclick="msg();">

Figure 1: output for search button

Submitted by: 20KT1A4247 Page no:

alert("Welcome to JavaScript after 2 seconds"); },2000); }

</script> <input type="button" value="Click" onclick="msg();"></body>

Figure: output for click button

Source code close:

<input type="button" value="Close" onclick="msg();"></body>

Submitted by: 20KT1A4247 Page no:

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>

<script>

Submitted by: 20KT1A4247 Page no:

12. Aim: write a javascript program for history.

Source code for history:

<script>

history.back();//for previous page