Scribd
Upload
345 views

MST (New)

The document contains source code for 15 JavaScript programs that demonstrate different JavaScript concepts and functions. The programs cover creating objects, working with dates and times, alerts, prompts, opening windows, timers, navigator and screen properties, history functions, and counting elements. Each program includes the source code, expected output screenshots, and a description of the program's aim.

Uploaded by

Haripriya Pandanaboina
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
345 views

MST (New)

The document contains source code for 15 JavaScript programs that demonstrate different JavaScript concepts and functions. The programs cover creating objects, working with dates and times, alerts, prompts, opening windows, timers, navigator and screen properties, history functions, and counting elements. Each program includes the source code, expected output screenshots, and a description of the program's aim.

Uploaded by

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

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:

You might also like