Content

  • JavaScript Classes
  • JavaScript Modules
  • JSON in JavaScript
  • JavaScript Debugging
  • Local Storage in JavaScript
  • Mini Project : Phonebook App

JavaScript Classes

  • JavaScript Classes are templates for JavaScript Objects.
  • Use the keyword class to create a class.
  • When you have a class, you can use the class to create objects
  • Always add a method named constructor() which is executed when we create object
  • constructor() is used to initialize object properties
Example :
//create class
class Car {
    constructor(name, year) {
        this.name = name;
        this.year = year;
    }
}

//create object of class       
const myCar = new Car("Ford", 2014);

JavaScript Modules

  • JavaScript modules allow you to break up your code into separate files.
  • This makes it easier to maintain the code-base.
  • You can export a function or variable from any file.
  • You can import modules into a file
Example
//export (filename : person.js)
const name = "ABC";
const age = 30;
//at the bottom of person.js
export {name, age};

//import
import { name, age } from "./person.js";

JSON in JavaScript

  • JSON is a format for storing and transporting data.
  • JSON is often used when data is sent from a server to a web page.
  • JSON stands for JavaScript Object Notation
  • JSON is language independent.
  • The JSON format is syntactically identical to the code for creating JavaScript objects.
  • JSON data is written as name/value pairs, just like JavaScript object properties.
{
"employees":[
    {"firstName":"ABC", "lastName":"DEF"},
    {"firstName":"HIJ", "lastName":"KLM"},
    {"firstName":"NOP", "lastName":"QRS"}
]
}

JavaScript Debugging

  • Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs.
  • With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing.
  • If your browser supports debugging, you can use console.log() to display JavaScript values in the debugger window
  • In the debugger window, you can set breakpoints in the JavaScript code.
  • At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values.
Example

we will set breakpoint from console and debug code on below button click event


Local Storage in JavaScript

  • 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);
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.
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

Mini Project : Phonebook App

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 (app.js)
  3. Save new contact in localStorage
  4. Show contacts saved in localStorage
  5. Delete contact from localStorage
  6. Search functionality