Content

• Functions in JavaScript
• HTML Element Selectors In JavaScript
• Local Storage in JavaScript
• Manipulating HTML using JavaScript
• EventListener in JavaScript
• Small Application (Creating own Phonebook) using HTML,CSS,Bootstrap,JavaScript

Functions in JS

function is a group of reusable code which can be called anywhere in the program.

Example :

function multiply(a, b) 
{
return a * b;
}
console.log(multiply(5,5));
//check log in browser for output

HTML Element Selectors In JS

JavaScript is most commonly used to update the content or value of the HTML (DOM-Document Object Model) elements

To update the HTML DOM, we need to select elemnts in our JavaScript program

Example : Different ways of selecting the elements on a page

// Syntax to select element whose id is demoelement
var a = document.getElementById(demoelement);
//Syntax to select element whose id is myclass
document.querySelector('#myclass');
//Syntax to select first element whose class is myclass
document.querySelector('.myclass');
//Syntax to select first li element
document.querySelector('li');

Example : Multiple Element Selector

// Syntax to select all elements whose class card
document.querySelectorAll('.class')
//Syntax to select all p element whose class is center
document.querySelectorAll("p.center");

Local Storage in JS

The localStorage object stores data in browser memory with no expiration date.

The localStorage allows us to save the key/value pairs in a web browser

Example :

// Store
localStorage.setItem("Company", "Revolution IT Solutions");
// Retrieve
let company = localStorage.getItem("Company");
console.log(company);
//check log in browser for output

Only strings can be stored with localStorage or sessionStorage, but we can use JSON.stringify to store more complex objects and JSON.parse to read them.

JSON - JavaScript Object Notation is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications

Example :

// Create object:
let student = { rollno: 71, standard: 10 };
localStorage.setItem(key, JSON.stringify(student));
// Read Object:
let item = JSON.parse(localStorage.getItem(student));
console.log(item);
//check log in browser for output

Manipulating HTML using JavaScript

As we have seen, we can update / manipulate HTML using JavaScript

Example :

let a = document.getElementById("demoelement");
a.style.color = "red";
a.className = "card";
a.innerText = "Welcome to JavaScript Session";
a.innerHTML = "Revolution IT Solutions";

EventListener in JavaScript

The addEventListener() method allows you to add event listeners (to perform required action) on any HTML element

Example:

//Code to show current date on user click (event)
<button id="showDate">Show Date</button>
<p id="dateinfo"></p>
document.getElementById("showDate").addEventListener("click", displayDate);
function displayDate() 
{
document.getElementById("dateinfo").innerHTML = Date();
}

Small Web Application using HTML,CSS,Bootstrap,Javascript

We have to create web application to store and view Name and Contact Number

Click here to Show final Output

Steps to develop this project

1. Design html webpage - Add new contact form,Design of contact list
2. Create external JS file
3. Save new contact in localStorage
4. Show contacts saved in localStorage
5. Delete contact from localStorage
6. Search functionality