Scribd
Upload
53 views10 pages

Assignment 4

The document describes code for demonstrating string, array, date, and math methods in JavaScript. It includes HTML, CSS, and JavaScript files that create a user interface for inputting values and displaying outputs of various method calls on strings, arrays, dates, and numbers. The code takes user input and uses built-in JavaScript methods like slice(), substring(), concat(), pop(), Date(), and Math functions to manipulate the data and display the results.

Uploaded by

om.lohade23
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
53 views10 pages

Assignment 4

The document describes code for demonstrating string, array, date, and math methods in JavaScript. It includes HTML, CSS, and JavaScript files that create a user interface for inputting values and displaying outputs of various method calls on strings, arrays, dates, and numbers. The code takes user input and uses built-in JavaScript methods like slice(), substring(), concat(), pop(), Date(), and Math functions to manipulate the data and display the results.

Uploaded by

om.lohade23
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/ 10

Assignment No.

4
Lohade Om Manoj (SEDA IT C) (Roll No. 3)

1) String methods in Javascript

I. HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="Operations.js"></script>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1 id="heading">String Functions in Javascript:</h1>

<form >
<label for="strinp" id="label1">Enter Your Name : </label>
<input type="text" id="strinp" placeholder="Enter Your Name">
<br><br>
<input type="button" class="buttons" value="Submit"
onclick="display('strinp')">
</form>

<h3 id="strlen"></h3>
<h3 id="firstname"></h3>
<h3 id="substring"></h3>
<h3 id="substr"></h3>
<h3 id="replace"></h3>
<h3 id="upper"></h3>
<h3 id="lower"></h3>
<h3 id="concat"></h3>
<h3 id="trim"></h3>
<h3 id="characterat"></h3>
<h3 id="charcodeat"></h3>
<h3 id="splitstr"></h3>
</body>

</html>
II. CSS FILE (styles.css)
#heading{
text-align: center;
}

#label1{

font-size: x-large;
}

#strinp{
width: 250px;
height: 20px;
font-size: large;
}

.buttons{
width: 100px;
background: #e3362c;
color: #fff;
padding-left: 12px;
padding-right: 12px;
padding-top: 5px;
padding-bottom: 5px;
margin: 10px;
border-radius: 5px;
cursor:pointer;
text-align: center;
font-size: large;
}

III. JAVASCRIPT FILE (Operations.js)


function display(elem){
val = document.getElementById(elem).value;

document.getElementById('strlen').innerHTML = "Length of String :


"+val.length;
document.getElementById('firstname').innerHTML = "First Name :
"+val.slice(0,5);
document.getElementById('substring').innerHTML = "Middle Name :
"+val.substring(6,11);
document.getElementById('substr').innerHTML = "Last Name :
"+val.substr(12,6);
document.getElementById('replace').innerHTML = "Replaced :
"+val.replace("Suraj","Piyush");
document.getElementById('upper').innerHTML = "Upper Case :
"+val.toUpperCase();
document.getElementById('lower').innerHTML = "Lower Case :
"+val.toLowerCase();

let t1 = val.slice(0,5);
let t2 = val.substr(12,6);

document.getElementById('concat').innerHTML = "Shortend Name :


"+t1.concat(" ", t2);
document.getElementById('trim').innerHTML = "Trimmed : "+val.trim();
document.getElementById('characterat').innerHTML = "Initials :
"+val.charAt(0)+val.charAt(6)+val.charAt(12);
document.getElementById('charcodeat').innerHTML = "Initials Unicode :
"+val.charCodeAt(0)+val.charCodeAt(6)+val.charCodeAt(12);

namearr = val.split(" ");

document.getElementById('splitstr').innerHTML = "Your Name :


"+namearr[0]+" "+namearr[1]+" "+namearr[2];

return;
}

OUTPUT:
2) Array Methods in Javascripts

I. HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrays</title>
<script src="operations.js"></script>
</head>
<body>
<h1 style="text-align: center;">Array Functions in Javascript:</h1><br>
<h3>Array : [10, 15, 20, 25, 30]</h3><br>

<h3 id="arrlen"></h3>
<h3 id="tostring"></h3>
<h3 id="pop"></h3>
<h3 id="push"></h3>
<h3 id="shift"></h3>
<h3 id="unshift"></h3>
<h3 id="concat"></h3>
<h3 id="splice"></h3>
<h3 id="slice"></h3>

<input type="button" value="Click Me" onclick="disp()">

</body>
</html>

II. JAVASCRIPT FILE (operations.js)


function disp(){

var arr = ["10","15","20","25","30"];


document.getElementById('arrlen').innerHTML = "Length : "+arr.length;
document.getElementById('tostring').innerHTML = "To String :
"+arr.toString();
document.getElementById('pop').innerHTML = "Popped Element : "+arr.pop();
document.getElementById('push').innerHTML = "Pushed Element at Index :
"+arr.push(30);
document.getElementById('shift').innerHTML = "Shifted Element :
"+arr.shift();
document.getElementById('unshift').innerHTML = "Unshifted Element at Index
: "+arr.unshift(10);
var newarr = [35,40,45,50];
var result = arr.concat(newarr);

document.getElementById('concat').innerHTML = "Concatenated Array :


"+result;

arr.splice(2,0,17);

document.getElementById('splice').innerHTML = "Spliced Array : "+arr;


document.getElementById('slice').innerHTML = "Sliced Array :
"+arr.slice(1);
}

OUTPUT:
3) Date Methods in JavaScript

I. HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date</title>
<script src="operation.js"></script>
</head>
<body>
<h1 style="text-align: center;">Date Functions in JavaScript</h1>
<input type="button" value="Click" onclick="display()"></button>
<h3 id="disp1"></h3>
<h3 id="disp2"></h3>
<h3 id="disp3"></h3>
<h3 id="disp4"></h3>
<h3 id="disp5"></h3>
<h3 id="disp6"></h3>
<h3 id="disp7"></h3>
<h3 id="disp8"></h3>
<h3 id="disp9"></h3>
</body>
</html>

II. JAVASCRIPT FILE (operations.js)


function display(){
document.getElementById('disp1').innerHTML = "Full Date : "+Date();
document.getElementById('disp2').innerHTML = "Date String : "+Date("Oct
07, 2023 11:13:00");
document.getElementById('disp3').innerHTML = "Year Month :
"+Date(2023,12,24,10,33,30,0);
document.getElementById('disp4').innerHTML = "Year Month Day :
"+Date(2023,11);
document.getElementById('disp5').innerHTML = "Year Month Day Hour :
"+Date(2023,11,4,13);
document.getElementById('disp6').innerHTML = "Year Month Day Hours Minutes
: "+Date(2023,11,4,13,30);
document.getElementById('disp7').innerHTML = "Year Month Day Hours Minutes
Seconds : "+Date(2023,11,4,13,30,15);
document.getElementById('disp8').innerHTML = "Year Month Day Hours Minutes
Seconds Ms : "+Date(2023,11,4,13,30,15,12);
document.getElementById('disp9').innerHTML = "Milliseconds : "+Date(925);
}

OUTPUT:
4) Math Methods in JavaScript

I. HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math</title>
<link rel="stylesheet" href="styles.css">
<script src="action.js"></script>
</head>
<body>
<h1 style="text-align: center;">Array Functions in
Javascript:</h1><br>
<form >
<label for="numinp" id="label1">Enter A Number : </label>
<input type="number" id="numinp" placeholder="Enter a Number">
<br><br>
<input type="button" class="buttons" value="Submit"
onclick="display('numinp')">

<h3 id="disp1"></h3>
<h3 id="disp2"></h3>
<h3 id="disp3"></h3>
<h3 id="disp4"></h3>
<h3 id="disp5"></h3>
<h3 id="disp6"></h3>
<h3 id="disp7"></h3>
<h3 id="disp8"></h3>
<h3 id="disp9"></h3>
<h3 id="disp10"></h3>
<h3 id="disp11"></h3>
<h3 id="disp12"></h3>
<h3 id="disp13"></h3>
<h3 id="disp14"></h3>
</form>

</body>
</html>

II. CSS FILE (styles.css)


#label1{

font-size: x-large;
}

#numinp{
width: 250px;
height: 20px;
font-size: large;
}

.buttons{
width: 100px;
background: #e3362c;
color: #fff;
padding-left: 12px;
padding-right: 12px;
padding-top: 5px;
padding-bottom: 5px;
margin: 10px;
border-radius: 5px;
cursor:pointer;
text-align: center;
font-size: large;
}

III. JAVASCRIPT FILE (action.js)


function display(elem){
val = document.getElementById(elem).value;

document.getElementById('disp1').innerHTML = "Round value of the


Number : "+Math.round(val);
document.getElementById('disp2').innerHTML = "Ceil value of the Number
: "+Math.ceil(val);
document.getElementById('disp3').innerHTML = "Floor value of the
Number : "+Math.floor(val);
document.getElementById('disp4').innerHTML = "Trunc value of the
Number : "+Math.trunc(val);
document.getElementById('disp5').innerHTML = "Sign of the Number :
"+Math.sign(val);
document.getElementById('disp6').innerHTML = "Number to the power 2 :
"+Math.pow(val,2);
document.getElementById('disp7').innerHTML = "Sqrt of the Number :
"+Math.sqrt(val);
document.getElementById('disp8').innerHTML = "Absolute value of the
Number : "+Math.abs(val);
document.getElementById('disp9').innerHTML = "Sin of the Number :
"+Math.sin(val);
document.getElementById('disp10').innerHTML = "Cos of the Number :
"+Math.cos(val);
document.getElementById('disp11').innerHTML = "Log of the Number :
"+Math.log(val);
document.getElementById('disp12').innerHTML = "Min Value (15,10,-
30,7,22) : "+Math.min(15,10,-30,7,22);
document.getElementById('disp13').innerHTML = "Max Value (15,10,-
30,7,22) : "+Math.max(15,10,-30,7,22);
document.getElementById('disp14').innerHTML = "Random Number from 0 to
100 : "+Math.floor(Math.random()*100);
}

OUTPUT:

You might also like