Functions
- What is a function?
- Pre-defined functions
- Scope of Variables
- Function Expressions
- Anonymous Functions
- Callback Functions
Objects
- What is an object?
- Accessing Object Properties
- Calling an Object’s Methods
- Altering Properties/Methods
Array Properties and Methods
- The length property
- Stack Methods
- Queue Methods
- Reordering Methods
- Manipulation Methods
- Location Methods
- Iterative Methods
- Working with array of objects
DOM
- The Document Object Model
- Node Relationships
- Working with the Contents of Elements
- Getting Elements by ID, Tag Name, or Class
- Adding and removing element
Built-in Objects
Using Events in JavaScript
Handling Input and Output
Ajax and JSON
Below are some examples of DOM manipulation using events.
1. Create a paragraph element with some text and change the font size by attaching an event handler to a button using addEventListener.
<html>
<head></head>
<body>
<p id="para">This is a paragraph</p>
<button id="btn">Change font size</button>
<script>
var para = document.getElementById('para');
var btn = document.getElementById('btn');
btn.addEventListener('click', changeFont);
function changeFont() {
para.style.fontSize = '24px';
}
</script>
</body>
</html>2. Create a div element of preferred height and width and change its background color using three different buttons.
<html>
<head>
<style>
#d1{
width:200px;
height:100px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="d1">
</div>
<button onclick="colorit('red')">Red</button>
<button onclick="colorit('green')">Green</button>
<button onclick="colorit('blue')">Blue</button>
<script>
function colorit(c){
var x = document.getElementById("d1");
x.style.backgroundColor = c;
}
</script>
</body>
</html>3. Take an array of strings and display the first string in a h1 tag. When clicked on the ‘next’ button, it should be able to cycle through all the strings and display it in the h1 tag.
<html>
<head></head>
<body>
<h1 id="d1"></h1>
<button onclick="nextitem()">Show Next</button>
<script>
var ar = ['kiran', 'sam', 'ramu', 'vijay'];
var i = 0;
var d1 = document.getElementById('d1');
d1.innerHTML = ar[i];
function nextitem() {
if (i < 3) {
i++;
d1.innerHTML = ar[i];
} else {
i = 0;
d1.innerHTML = ar[i];
}
}
</script>
</body>
</html>4. Take an image url string in a variable. Set the src attribute of an image with that url on clicking a button.
<html>
<head></head>
<body>
<button onclick="setSrc()">Show image</button><br>
<img id="image" src="">
<script>
var imgUrl = "https://www.shutterstock.com/image-vector/peace-symbol-made-common-metal-600w-2161215447.jpg";
var image = document.getElementById('image');
function setSrc(){
image.src = imgUrl;
image.style.height = '100px';
}
</script>
</body>
</html>Show image
5. Create a calculator that can take two inputs and perform addition, subtraction, multiplication and division of the two numbers.
<html>
<head></head>
<body>
Input 1: <input type="text" id="num1" /><br />
Input 2: <input type="text" id="num2" /><br /><br />
<button id="addition">Add</button>
<button id="subtraction">Sub</button>
<button id="multiplication">Mul</button>
<button id="division">Div</button>
<br /><br />
Output: <input type="text" id="res" />
<script>
var addBtn = document.getElementById('addition');
var subBtn = document.getElementById('subtraction');
var multiBtn = document.getElementById('multiplication');
var divBtn = document.getElementById('division');
addBtn.addEventListener('click', function () {
var val1 = +document.getElementById('num1').value;
var val2 = +document.getElementById('num2').value;
var result = val1 + val2;
document.getElementById('res').value = result;
});
subBtn.addEventListener('click', function () {
var val1 = +document.getElementById('num1').value;
var val2 = +document.getElementById('num2').value;
var result = val1 - val2;
document.getElementById('res').value = result;
});
multiBtn.addEventListener('click', function () {
var val1 = +document.getElementById('num1').value;
var val2 = +document.getElementById('num2').value;
var result = val1 * val2;
document.getElementById('res').value = result;
});
divBtn.addEventListener('click', function () {
var val1 = +document.getElementById('num1').value;
var val2 = +document.getElementById('num2').value;
var result = val1 / val2;
document.getElementById('res').value = result;
});
</script>
</body>
</html>
6. Create two buttons which can open and close a URL window using the window.open()/close() methods.
<html>
<head></head>
<body>
<button onclick="openUrl()">Open Wikipedia</button>
<button onclick="closeUrl()">Close Wikipedia</button>
<script>
var wref;
function openUrl() {
wref = window.open(
'https://en.wikipedia.org',
'wiki',
'300px',
'300px'
);
}
function closeUrl() {
wref.close();
}
</script>
</body>
</html>7. Create a toggle button to show or hide a paragraph text.