Assignment 4

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 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