JAVASCRIPT in One Video - CodeWithHarry

August 14, 2020

JAVASCRIPT in One Video - CodeWithHarry

This is a reference for a video posted by CodeWithHarry. This video is about learning JAVASCRIPT in one video

HTML Code is Here:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript in One Video</title>
</head>
<body>
<h1>
JavaScript Tutorial</h1>
<div id="firstContainer" class="container">
<button id="click">Click Me</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit necessitatibus, aspernatur error vitae deleniti laboriosam reiciendis ipsum consequatur voluptate, cupiditate ducimus quasi. Beatae nobis rem eaque ad. Facere, alias expedita?</p>
</div>
<div class="container">
<p>
This is a paragraph</p>
</div>
<script src="app.js"></script>
</body>
</html>

Javascript Code is Here:

/* We can easily run our Javascript
code using browser.
We can use Developer tools of
Browser to run JS code.
*/
/*
We can use console in developer
tools to run JS.

We can use console as a calculator.
There are many things that you can
do with Js.

We can click programmatically on an
element in DOM using click() function
of Javascript.

We can run JS on brower as well as
on Server.
*/


// COMMENTS IN JAVASCRIPT

// EXAMPLE OF SINGLE LINE COMMENT
/*
 EXAMPLE
 OF 
 MULTI 
 LINES 
 COMMENT
*/

// 1. WAYS TO PRINT IN JAVASCRIPT
// Write anything to DOM
// document.write("Hello World");

// Give an alert
// alert("This is an alert box");

// We can use JS to control CSS

// We can change the style of any element
document.getElementsByTagName("h1")[0].style.fontSize = "29px";
document.getElementsByTagName("h1")[0].style.background = 'green';



// 2. JAVASCRIPT CONSOLE API
// API = Application Programming Interface

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

// Give a warning on console
// console.warn("This is a warning");

// Give an error on console
// console.error("This is an ERROR example");

// Clear the console
// console.clear();

// Give an error if any condition is wrong
// Following Condition is true so there is no error
// console.assert(4==(6-2));


// 3. VARIABLES IN JAVASCRIPT
// Variables - Containers to store data values
// WE USE "var", "let" and "const" keyword in JS to create variables
var num1 = 65;
var num2 = 35;
// console.log(num1+num2);

// 4. DATA TYPES IN JAVASCRIPT
// Number
var number = 45;
var decimal = 43.3;

// String
var str = "This is a string";

// Boolean
var boolean1 = true;
var boolean1 = false;

// Objects
var marks = {
 usman: 45,
 usama: 46,
 rafay: 50
}

// undefined
var un = undefined;

// null
var nu = null;
// console.log(nu);

// Array
var numbers = [34, 56, 34]; 

// To check the type of the variable we use typeof keyword
// console.log(typeof marks);

/* 
At high level, there are two types of data types

 1. Primitive
 String, Number, Undefined, Null, Boolean, Symbol

 2. Reference
 Arrays, Objects
*/

// 5. OPERATORS IN JAVASCRIPT

// i. Arthematic Operators
// (+, -, *, /)
var a = 56;
var b = 4;
// console.log(a, " + ", b, " = ", a+b);
// console.log(a, " - ", b, " = ", a-b);
// console.log(a, " * ", b, " = ", a*b);
// console.log(a, " / ", b, " = ", a/b);

// ii. Assignment Operators
// =, +=, -=, *=, /=
var assign = 4;
// console.log(assign);
// assign += 2; // add 2 in assign
// assign -= 2; // subtract 2 from assign
// assign *= 2; // multiply 2 by assign
// assign /= 2; // divide assign by 2
// console.log(assign);

// iii. Comparsion Operators
// ==, >, <, >=, <=, !=
var q = 7;
var r = 2;
if (q>4) {
 // console.log("q is not equal to 4")
}
// console.log(q != r);


// iv. Logical Operators

// AND - &&
// console.log(true && true);
// console.log(true && false);
// console.log(false && true);
// console.log(false && false);

// OR - ||
// console.log(true || true);
// console.log(true || false);
// console.log(false || true);
// console.log(false || false); 

// NOT - !
// console.log(!false);
// console.log(!true);


// 6. FUNCTIONS IN JAVASCRIPT
// DRY PRINCIPLE => Do not repeat yourself
function avg(a,b){
 return (a+b)/2;
}

// c = avg(4, 6)

// console.log(c)
function drive(age){
 if (age>=18){
 document.write("You can drive");
 return "You can drive";
 }
 else {
 document.write("You cannot drive");
 return "You cannot drive";
 }
}
// console.log(drive(67));

// 7. CONDITIONAL STATEMENTS IN JAVASCRIPT

// Single IF Statement
var age = 14;
// if (age>=18){
//  console.log("You can drive the car.");
// }

// IF - ELSE Statement
/*
if (age >= 18){
 console.log("You can drive the car.");
}
else{
 console.log("You cannot drive the car.");
}
*/

// IF - ELSE Ladder
var marks = 91;
/*
if (marks>=90){
 console.log("Grade: A+");
}
else if (marks>=80){
 console.log("Grade: A");
}
else if (marks>=70){
 console.log("Grade: B");
}
else if (marks>=60){
 console.log("Grade: C");
}
else if (marks>=50){
 console.log("Grade: D");
}
else if (marks>=40){
 console.log("Grade: E");
}
else{
 console.log("Grade: F");
}
*/

// QUIZ - Write a function that input age as argument and tell the user if he can drive the car or not?

/*
function drive(age){
 if(age>=18){
  console.log("You can drive the car.");
 }
 else{
  console.log("You cannot drive the car.")
 }
 return 0;
}

drive(4);
*/


// 8. LOOPS IN JAVASCRIPT

let arr1 = [1,2,3,4,5];
// Iterate the array using FOR loop

/*
for (var i =  0; i < arr1.length; i++) {
 console.log(arr1[i]);
}
*/


// Best way to iterate array
var webTechnologies = ["HTML", "CSS", "JavaScript", "jQuery", "Bootstrap"]
/*
webTechnologies.forEach(function(element){
 console.log(element);
})
*./


// Printing table of 2
/*
for (var i = 1; i <= 10; i++) {
 document.write("2 x ",i," = ",2*i, "<br>");
}
*/

// WHILE LOOP
let j = 0;
/*
while(j<=10){
 console.log(j);
 j++;
}
*/

// DO - WHILE LOOP
/*
do
{
 console.log(webTechnologies[j]);
 j++;
}
while(j<webTechnologies.length)
*/


// 9. BREAK & CONTINUE Statement in JavaScript

// CONTINUE means stop this iteration and go to thes next iteration.

// BREAK means stop executing the loop
/*
for (var i = 0; i <= 5; i++) {
 if(i==3){
  continue;
 }
 if(i==1){
  // break;
 }
 console.log(i);
}
*/

// 10. ARRAY METHODS
let myArr = ["String", 25, 3.14, true, null, undefined];

// Print the length of the array
// console.log(myArr.length);

// Delete the last element from the array
// myArr.pop();
// console.log(myArr);

//Delete the first element from the array
// myArr.shift();

// Insert element at the start of the array
// myArr.unshift("Hus");
// console.log(myArr);
/*
let arrLen = myArr.unshift("Hus");
console.log(arrLen); // Return new length of the array
*/


// Insert an element in the array
// myArr.push(undefined);
// console.log(myArr);

// Convert the array into string
// let strr = myArr.toString();
// console.log(strr);

// Sorting the array
// This function first convert all elements of the array into string and then sort it alphabetically.
// let numbers1 = [1,4,5,2,6454,8,9];
// numbers1.sort();
// console.log(numbers1);

// There are many other methods for array execpt these which we can easily see on the internet.

// 11. STRING METHODS
let mystr = "Usman is a good boy Usman";

// Return the length of the string
// console.log(mystr.length);

// Search for any character or word in the string.
// Return first occurance.
// console.log(mystr.indexOf("Usman"));
// Return Last Occurance.
// console.log(mystr.lastIndexOf("Usman"));

// Return any desired part from the string
// console.log(mystr.slice(0,5));

// Replace any first occurance of the word in the string
let d = mystr.replace("Usman", "Hafiz");
// console.log(d);


// 12. DATES in JavaScript
let date = new Date();
// Return current date and time
// console.log(date);

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

// Return index of the current month
// console.log(date.getMonth());

// Return current year
// console.log(date.getFullYear());

// Return index of the current day
/*
0 - Sunday, 1 - Monday, 2 - Tuesday, 3 - Wednesday
4 - Thursday, 5 - Friday, 6 - Saturday
*/
// console.log(date.getDay());

// Return minutes of current time
// console.log(date.getMinutes());

// Return Hours of current time
// console.log(date.getHours());
// There are more methods of DATES available on the internet


// 13. DOM in JavaScript
// DOM - Document Object Model
let elem = document.getElementById('click');
// console.log(elem);

let elemClass = document.getElementsByClassName("container");
// console.log(elemClass[0]);

// Changing background of first container
// elemClass[0].style.background = "yellow";

// Add a class to an element
elemClass[0].classList.add("bg-primary");
elemClass[0].classList.add("text-success");

// Remove a class from an element
// elemClass[0].classList.remove("text-success");

// Access text and HTML code of an element
// console.log(elemClass[0].innerText);
// console.log(elemClass[0].innerHTML);

// Accessing all elements with same tag
let tn = document.getElementsByTagName("div");
// console.log(tn);

// Creating an element
createdElement = document.createElement("p");
createdElement.innerText = "This is created para element";

// Adding it as a child
tn[0].appendChild(createdElement);

// Replacing a child
// createdElement2 = document.createElement("i");
// createdElement2.innerText = "This is created itallic element";
// tn[0].replaceChild(createdElement2, createdElement);

// Removing a child
// tn[0].removeChild(createdElement);

// There are many other ways to add or remove element from the document


// PROPERTIES OF DOCUMENT
// console.log(document.location);

// Give URL of the document
// console.log(document.URL);

// Give title of the document
// console.log(document.title);

// Give all scripts of the document
// console.log(document.scripts);

// Give all links from the document
// console.log(document.links);

// Give all forms from the document
// console.log(document.forms);

// Give all images from the document
// console.log(document.images);

// Give domain of the document without port or slash
// console.log(document.domain);

// Selecing element using querySelector
// Give first element with class container
let sel = document.querySelector(".container");
// console.log(sel);

// Give all elements with class container
// It returns Node list
sel = document.querySelectorAll(".container");
// console.log(sel);

window.onload = function() {
 // console.log("The document was loaded.");
}


// 14. EVENTS IN JAVASCRIPT

// Adding an event listener to container

/*
firstContainer.addEventListener("click", function(){
 document.querySelectorAll(".container")[1].innerHTML = "<b>Change</b>";
 console.log("Clicked on container");
});

firstContainer.addEventListener("mouseover", function(){
 console.log("mouseover event");
})

firstContainer.addEventListener("mouseout", function(){
 console.log("mouseout event");
})

let prevHTML = document.querySelectorAll(".container")[1].innerHTML;
firstContainer.addEventListener("mouseup", function(){
 document.querySelectorAll(".container")[1].innerHTML = prevHTML;
 console.log("mouseup when clicked on container");
});

firstContainer.addEventListener("mousedown", function(){
 document.querySelectorAll(".container")[1].innerHTML = "<b>Change</b>";
 console.log("mousedown when clicked on container");
});
*/


// 15. ARROW FUNCTION IN JAVASCRIPT

// Simple Function
function sum(a,b){
 return a+b;
}
// Arrow Function
summ = (a, b) => {
 return a+b;
}

// 16. setTimeout & setInterval in JavaScript
logFunction = () => {
 document.querySelectorAll(".container")[1].innerHTML = "<b>Set Time Out Fired</b>";
 console.log("This function will run after 2 seconds.")
}

// setTimeout execute code after some specified amount of time
// setTimeout(logFunction, 2000);

// To cancel setTimeout function
// timeOut = setTimeout(logFunction, 2000);
//clearTimeout(timeOut);

// setInterval execute code repeatedly after some specified amount of time.
// setInterval(logFunction, 2000);

// When setInterval starts executing code, it returns an id. We will store this id into a variable and give the variable to clearInterval() function to stop executing function repeatedly. For Example:
// clr = setInterval(logFunction, 2000);
// clearInterval(clr);


// 17. LOCAL STORAGE IN JAVASCRIPT
// LOCALSTOAGE is a space where we can store some data.
// Storing item in localStorage
// localStorage.setItem("name", "Usman");

// Retriving an item in localstorage
data = localStorage.getItem("name");
// console.log(data);

// Removing an item from localStorage
// localStorage.removeItem("name");

// Clear the localStorge
// localStorage.clear();


// 18. JSON - JavaScript Object Notation
obj = {
 name: "Usman",
 age: 18
}

// Convert an object into string
// json = JSON.stringify(obj);
// console.log(json);

// Convert string into object
// parsed = JSON.parse(`{"name":"Usman","age":18}`);
// console.log(parsed);

// 19. Templete Literals - Backticks (``)
let a = 34;
console.log(`The value of a is: ${a}`);


// 20. ECMAscript - ES
// It is a standard to maintain Javascript with new features
// ES5 to onwards is Modern JavaScript with new and updated features.
// New versions of ES are coming with new features than first version.
// Latest Version is ES10 with respect to 14 August 2020.

This video also contains 2 awesome projects that are given below:

1. Clock Application Using HTML, CSS, JavaScript & Bootstrap
2. To Do List Using HTML, JavaScript & Bootstrap

Search This Blog

Coding References of a Programmer

JAVASCRIPT in One Video - CodeWithHarry

This video also contains 2 awesome projects that are given below:

Comments

Post a Comment

Popular Posts

Environment Setup for Machine Learning in Python - ML #00

File CRUD Application - Python Project #07 - Project #29