Scribd
Upload
23 views

Web Development Day4 Assignment

The document provides examples of JavaScript concepts including: 1. Class definitions and inheritance using the Person and Employee classes. 2. DOM event handling with onclick, onmouseover, etc. and examples. 3. Array methods like push, pop, sort, slice etc applied to a numbers array.

Uploaded by

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

Web Development Day4 Assignment

The document provides examples of JavaScript concepts including: 1. Class definitions and inheritance using the Person and Employee classes. 2. DOM event handling with onclick, onmouseover, etc. and examples. 3. Array methods like push, pop, sort, slice etc applied to a numbers array.

Uploaded by

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

1.

Demo on following code


class and class inheritance in javascript
create class person and inherit it into class employee

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

}
class Employee extends Person {
constructor(name, age, jobTitle) {
super(name, age);
this.jobTitle = jobTitle;
}

-------------------------------------------------------
2.DOM events
onclick
onmouseover
onmouseout
onchange
onload 
HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASSIGNMENT</title>
<script src="main.js"></script>
</head>

<body>
<button id="myButton" onclick="alert('Button Clicked')">Click Me</button>
<div id="myDiv" onmouseover="changeColor('green')"
onmouseout="changeColor('black')">Hover Over Me</div>
<select id="mySelect" onchange="alertSelection()">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

</body>

</html>
JS File:
function changeColor(color) {
document.getElementById("myDiv").style.color = color;
}
function alertSelection() {
var select = document.getElementById("mySelect");
var selectedOption = select.options[select.selectedIndex].value;
alert("Selected option: " + selectedOption);
}

window.onload = function() {
alert("Page loaded");
}

--------------------------------------
3. Create Array in javascript and apply following methods
Arrays methods
push
pop
shift
unshift
concat
splice
slice
sort

let numbers = [1, 2, 3, 4, 5];

numbers.push(6);
console.log(numbers);

numbers.pop();
console.log(numbers);

numbers.shift();
console.log(numbers);

numbers.unshift(1);
console.log(numbers);

let moreNumbers = [6, 7, 8];


let combinedNumbers = numbers.concat(moreNumbers);
console.log(combinedNumbers);

numbers.splice(2, 0, 6, 7);
numbers.splice(2, 2);
let subNumbers = numbers.slice(1, 3);
console.log(subNumbers);

numbers.sort();
console.log(numbers);

-----------------------------------------------------------------------------------
-------
4.Date Object and methods of date getFullYear()    
getMonth()    
getDate()    Get day as a number (1-31)
getDay()    Get weekday as a number (0-6)
getHours()    Get hour (0-23)
getMinutes()    Get minute (0-59)
getSeconds()    Get second (0-59)
getMilliseconds()    Get millisecond (0-999)
getTime()    Get time (milliseconds since January 1, 1970)

let yr = new Date();


console.log(yr.getFullYear());

let mn = new Date();


console.log(mn.getMonth());

let dt = new Date();


console.log(dt.getDate());

let hr = new Date();


console.log(hr.getHours());

let min = new Date();


console.log(min.getMinutes());

let sc = new Date();


console.log(sc.getSeconds());

let ms = new Date();


console.log(ms.getMilliseconds());

let tm = new Date();


console.log(tm.getTime());

5.)create a jquery code which hide a paragraph on click of hide button and shows
the paragraph on
click of show button

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#hide-button").click(function () {
$("p").hide();
});
$("#show-button").click(function () {
$("p").show();
});
});

</script>

</head>

<body>
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat tenetur
dolore quidem beatae earum nesciunt.</p>
</body>

</html>
-----------------------------------------------------------------------------------
----------------------------------------
6.)create a jquery which changes the text and fontcolor of a paragraph on mouser
and on mouseout
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$(this).text("New text on mouseover");
$(this).css("color", "red");
});
$("p").mouseout(function(){
$(this).text("Original text on mouseout");
$(this).css("color", "black");
});
});

</script>

</head>

<body>
<!-- <button id="hide-button">Hide</button>
<button id="show-button">Show</button> -->
<p style="color: black;">Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Placeat tenetur dolore quidem beatae earum nesciunt.</p>
</body>

</html>
7.)Apply different effects on elements like
slideup,slidedown,animate,stop,fade
toggle
and callfunction to implemented

<!DOCTYPE html>
<html>

<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#slideUpBtn").click(function () {
$("#element1").slideUp();
}); $("#slideDownBtn").click(function () {
$("#element1").slideDown();
}); $("#animateBtn").click(function () {
$("#element2").animate({ width: "300px" });
}); $("#stopBtn").click(function () {
$("#element2").stop();
}); $("#fadeOutBtn").click(function () {
$("#element3").fadeOut();
}); $("#fadeInBtn").click(function () {
$("#element3").fadeIn();
}); $("#toggleBtn").click(function () {
$("#element4").toggle();
}); $("#element5").click(function () {
alert("Element clicked!");
});
});</script>
</head>

<body><button id="slideUpBtn">Slide Up</button><button id="slideDownBtn">Slide


Down</button>
<div id="element1" style="height: 100px; width: 100px; background-color:
red;"></div><button
id="animateBtn">Animate</button><button id="stopBtn">Stop</button>
<div id="element2" style="height: 100px; width: 100px; background-color:
green;"></div><button id="fadeOutBtn">Fade
Out</button><button id="fadeInBtn">Fade In</button>
<div id="element3" style="height: 100px; width: 100px; background-color:
blue;"></div><button
id="toggleBtn">Toggle</button>
<div id="element4" style="height: 100px; width: 100px; background-color:
yellow;"></div>
<div id="element5" style="height: 100px; width: 100px; background-color:
purple;"></div>
</body>

</html>
-----------------------------------------------------------------------------------
----------------------------------------------------
8)write a jquery code demonstrating travering like
first(),parent(),next()
jquery filtering
first(), last(), eq(), filter() and not() Methods

<!DOCTYPE html>
<html>

<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// Traversing
$("#firstBtn").click(function () {
$("#list").find("li").first().css("background-color", "yellow");
}); $("#parentBtn").click(function () {
$("#list").find("li").parent().css("background-color",
"lightblue");
}); $("#nextBtn").click(function () {
$("#list").find("li").next().css("background-color", "pink");
});       // Filtering
$("#firstBtn").click(function () {
$("#list").find("li").first().css("background-color", "yellow");
}); $("#lastBtn").click(function () {
$("#list").find("li").last().css("background-color", "green");
}); $("#eqBtn").click(function () {
$("#list").find("li").eq(2).css("background-color", "orange");
}); $("#filterBtn").click(function () {
$("#list").find("li").filter(".special").css("background-color",
"purple");
}); $("#notBtn").click(function () {
$("#list").find("li").not(".special").css("background-color",
"gray");
});
});</script>
</head>

<body><button id="firstBtn">First</button><button
id="parentBtn">Parent</button><button
id="nextBtn">Next</button><button id="lastBtn">Last</button><button
id="eqBtn">Eq</button><button
id="filterBtn">Filter</button><button id="notBtn">Not</button>
<ul id="list">
<li>Item 1</li>
<li class="special">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>

</html>

You might also like