javascript quick understanding

Seite 1

Recap the concept of Javascript

// 1. Ways to print in JavaScript

// console.log("Hello World");

// alert("me");

// document.write("this is document write")

// 2. Javascript console API

// console.log("Hello World", 4 + 6, "Another log");

// console.warn("this is warning");

// console.error("This is an error");

// 3. JavaScript Variables

// What are Variables? - Containers to store data values

/*

multi

line

commment

*/

var number1 = 34;

var number2 = 56;

// console.log(number1 + number2);

// 4. Data types in JavaScript

// Numbers

var num1 = 455;

var num2 = 56.76;

// String

var str1 = "This is a string";

var str2 = 'This is also a string';

// Objects

var marks = {

ravi: 34,

shubham: 78,

harry: 99.977

}

// console.log(marks);

// Booleans

var a = true;

var b = false;

// console.log(a, b);

// var und = undefined;

var und;

// console.log(und);

var n = null;

// console.log(n);

/*

At a very high level, there are two types of data types in JavaScript

1. Primitive data types: undefined, null, number, string, boolean, symbol

2. Reference data types: Arrays and Objects

*/

var arr = [1, 2, "bablu", 4, 5]

// console.log(arr)

// Operators in JavaScript

// Arithmetic Operators

var a = 100;

var b = 10;

// console.log("The value of a + b is ", a+b);

// console.log("The value of a - b is ", a-b);

// console.log("The value of a * b is ", a*b);

// console.log("The value of a / b is ", a/b);

// Assignment Operators

var c = b;

// c += 2;

// c -= 2; // c = c - 2;

// c *= 2;

// c /= 2;

// console.log(c);

// Comparison Operators

var x = 34;

var y = 56;

// console.log(x == y);

// console.log(x >= y);

// console.log(x <= y);

// console.log(x > y);

// console.log(x < y);

// Logical Operators

// Logical and

// console.log(true && true)

// console.log(true && false)

// console.log(false && true)

// console.log(false && false)

// Logical or

// console.log(true || true)

// console.log(true || false)

// console.log(false || true)

// console.log(false || false)

// Logical not

// console.log(!false);

// console.log(!true);

// Function in JavaScript

function avg(a, b) {

c = (a + b) / 2;

return c;

}

// DRY = Do not repeat yourself

c1 = avg(4, 6);

c2 = avg(14, 16);

// console.log(c1, c2);

// Conditionals in JavaScript

/*

var age = 41;

// Single if statement

if(age > 18){

console.log('You can drink rasna water');

}

// if - else statement

// if(age > 18){

// console.log('You can drink rasna water');

// }

// else{

// console.log('You cannot drink rasna water');

// }

age = 25;

// if-else Ladder

if(age > 32){

console.log("You are not a kid");

}

else if(age >26){

console.log("Bachhe nahi rahe");

}

else if(age >22){

console.log("Yes Bachhe nahi rahe");

}

else if(age >18){

console.log("18 Bachhe nahi rahe");

}

else{

console.log("Bachhe rahe");

}

console.log("End of ladder");

*/

var arr = [1, 2, 3, 4, 5, 6, 7];

// console.log(arr);

// for(var i=0;i<arr.length;i++){

// if(i==2){

// // break;

// continue;

// }

// console.log(arr[i])

// }

// arr.forEach(function(element){

// console.log(element);

// })

// const ac = 0;

// ac++;

// ac = ac +1;

// let j = 0;

// while(j<arr.length){

// console.log(arr[j]);

// j ++;

// }

// do{

// console.log(arr[j]);

// j++;

// } while (j < arr.length);

let myArr = ["Fan", "Camera", 34, null, true];

// Array Methods

// console.log(myArr.length);

// myArr.pop();

// myArr.push("harry")

// myArr.shift()

// const newLen = myArr.unshift("Harry")

// console.log(newLen);

// console.log(myArr);

// String Methods in JavaScript

let myLovelyString = "Harry is a good boy good good Harry";

// console.log(myLovelyString.length)

// console.log(myLovelyString.indexOf("good"))

// console.log(myLovelyString.lastIndexOf("good"))

// console.log(myLovelyString.slice(1,4))

d = myLovelyString.replace("Harry", "Rohan");

// d = d.replace("good", "bad");

// console.log(d, myLovelyString)

let myDate = new Date();

// console.log(myDate.getTime());

// console.log(myDate.getFullYear());

// console.log(myDate.getDay());

// console.log(myDate.getMinutes());

// console.log(myDate.getHours());

// DOM Manipulation

let elem = document.getElementById('click');

// console.log(elem);

let elemClass = document.getElementsByClassName("container")

// console.log(elemClass);

// elemClass[0].style.background = "yellow";

elemClass[0].classList.add("bg-primary")

elemClass[0].classList.add("text-success")

// console.log(elem.innerHTML);

// console.log(elem.innerText);

// console.log(elemClass[0].innerHTML);

// console.log(elemClass[0].innerText);

tn = document.getElementsByTagName('div')

// console.log(tn)

createdElement = document.createElement('p');

createdElement.innerText = "This is a created para";

tn[0].appendChild(createdElement);

createdElement2 = document.createElement('b');

createdElement2.innerText = "This is a created bold";

tn[0].replaceChild(createdElement2, createdElement);

// removeChild(element); ---> removes an element

// Selecting using Query

// sel = document.querySelector('.container')

// console.log(sel)

// sel = document.querySelectorAll('.container')

// console.log(sel)

// function clicked(){

// console.log('The button was clicked')

// }

// window.onload = function(){

// console.log('The document was loaded')

// }

// Events in JavaScript

// firstContainer.addEventListener('click', function(){

// document.querySelectorAll('.container')[1].innerHTML = "<b> We have clicked</b>"

// console.log("Clicked on Container")

// })

// firstContainer.addEventListener('mouseover', function(){

// console.log("Mouse on Container")

// })

// firstContainer.addEventListener('mouseout', function(){

// console.log("Mouse out of Container");

// })

// let prevHTML = document.querySelectorAll('.container')[1].innerHTML;

// firstContainer.addEventListener('mouseup', function(){

// document.querySelectorAll('.container')[1].innerHTML = prevHTML;

// console.log("Mouse up when clicked on Container");

// })

// firstContainer.addEventListener('mousedown', function(){

// document.querySelectorAll('.container')[1].innerHTML = "<b> We have clicked</b>"

// console.log("Mouse down when clicked on Container");

// })

// Arrow Functions

// function summ(a, b){

// return a+b;

// }

summ = (a,b)=>{

return a+b;

}

logKaro = ()=>{

document.querySelectorAll('.container')[1].innerHTML = "<b> Set interval fired</b>"

console.log("I am your log")

}

// SetTimeout and setinterval

// clr = setTimeout(logKaro, 5000);

// clr = setInterval(logKaro, 2000);

// use clearInterval(clr)/clearTimeout(clr) to cancel setInterval/setTimeout

// JavaScript localStorage

// localStorage.setItem('name', 'harry')

// localStorage

// localStorage.getItem('name')

// localStorage.removeItem('name')

// localStorage.clear();

// Json

// obj = {name: "harry", length: 1, a: {this: 'tha"t'}}

// jso = JSON.stringify(obj);

// console.log(typeof jso)

// console.log(jso)

// parsed = JSON.parse(`{"name":"harry","length":1,"a":{"this":"that"}}`)

// console.log(parsed);

// Template literals - Backticks

a = 34;

console.log(`this is my ${a}`)

Seite 2

Project: Live Clock Web Page

<!doctype html>

<html lang="en">

<head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"

integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<title>Hello, world!</title>

<script>

let a;

let date;

let time;

const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

setInterval(() => {

a = new Date();

date = a.toLocaleDateString(undefined, options);

time = a.getHours() + ':' + a.getMinutes() + ':' + a.getSeconds();

document.getElementById('time').innerHTML = time + "<br>on " + date;

}, 1000);

</script>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Dropdown

</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

</li>

</ul>

<form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

</nav>

<div class="container my-4">

<div class="jumbotron">

<h1 class="display-4">Current time Is: <span id="time"></span></h1>

<p class="lead">We have got you covered. This is a simple hero unit, a simple jumbotron-style component for

calling extra attention to featured content or information.</p>

<hr class="my-4">

<p>We are here to show you the time for different countries</p>

<a class="btn btn-primary btn-lg" href="#" role="button">Browse Times</a>

</div>

</div>

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"

integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"

crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"

integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"

crossorigin="anonymous"></script>

</body>

</html>

Seite 3

Project 02 : To Do List For Daily Life.

<!doctype html>

<html lang="en">

<head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"

integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<title>TODOs List</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<a class="navbar-brand" href="#">TODOs List</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">About</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Items

</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

<li class="nav-item">

<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact</a>

</li>

</ul>

<form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

</nav>

<div class="container my-4">

<h2 class="text-center">TODOs List</h2>

<div class="form-group">

<label for="title">Title</label>

<input type="text" class="form-control" id="title" aria-describedby="emailHelp">

<small id="emailHelp" class="form-text text-muted">Add an item to the list</small>

</div>

<div class="form-group">

<label for="description">Description</label>

<textarea class="form-control" id="description" rows="3"></textarea>

</div>

<button id="add" class="btn btn-primary">Add to list</button>

<button id="clear" class="btn btn-primary" onclick="clearStorage()">Clear list</button>

<div id="items" class="my-4">

<h2>Your Items</h2>

<table class="table">

<thead>

<tr>

<th scope="col">SNo</th>

<th scope="col">Item Title</th>

<th scope="col">Item Description</th>

<th scope="col">Actions</th>

</tr>

</thead>

<tbody id="tableBody">

<tr>

<th scope="row">1</th>

<td>Get some Coffee</td>

<td>You need coffee as you are a coder</td>

<td><button class="btn btn-sm btn-primary">Delete</button></td>

</tr>

</tbody>

</table>

</div>

</div>

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"

crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"

integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"

crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"

integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"

crossorigin="anonymous"></script>

<script>

function getAndUpdate(){

console.log("Updating List...");

tit = document.getElementById('title').value;

desc = document.getElementById('description').value;

if (localStorage.getItem('itemsJson')==null){

itemJsonArray = [];

itemJsonArray.push([tit, desc]);

localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))

}

else{

itemJsonArrayStr = localStorage.getItem('itemsJson')

itemJsonArray = JSON.parse(itemJsonArrayStr);

itemJsonArray.push([tit, desc]);

localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))

}

update();

}

function update(){

if (localStorage.getItem('itemsJson')==null){

itemJsonArray = [];

localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))

}

else{

itemJsonArrayStr = localStorage.getItem('itemsJson')

itemJsonArray = JSON.parse(itemJsonArrayStr);

}

// Populate the table

let tableBody = document.getElementById("tableBody");

let str = "";

itemJsonArray.forEach((element, index) => {

str += `

<tr>

<th scope="row">${index + 1}</th>

<td>${element[0]}</td>

<td>${element[1]}</td>

<td><button class="btn btn-sm btn-primary" onclick="deleted(${index})">Delete</button></td>

</tr>`;

});

tableBody.innerHTML = str;

}

add = document.getElementById("add");

add.addEventListener("click", getAndUpdate);

update();

function deleted(itemIndex){

console.log("Delete", itemIndex);

itemJsonArrayStr = localStorage.getItem('itemsJson')

itemJsonArray = JSON.parse(itemJsonArrayStr);

// Delete itemIndex element from the array

itemJsonArray.splice(itemIndex, 1);

localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray));

update();

}

function clearStorage(){

if (confirm("Do you areally want to clear?")){

console.log('Clearing the storage')

localStorage.clear();

update()

}

}

</script>

</body>

</html>