JS

 Data Types in JS

We assigned data to the variable by using the assignment operator "=". Datatypes in JavaScript are:

1. Number i.e., 11,23,45,6

2. Strings, i.e., "Hello World."

3. Boolean, i.e., true, false

4. Undefined

5. Null

6. Any of the complex data structures (Array and Objects)

Let

Block level scope, it works under block { }

if call outer side of block the global let value will call

console.log('tut3');
// Variables in js
// var, let, const
var name = 'harry';
var channel;
var marks = 3454;
marks = 0;
channel = 'CodeWithHarry'
console.log(name, channel, marks);
// Rules for creating JavaScript Variables
/*
1. Cannot start with numbers
2. Can start with letter, numbers, _ or $
3. Are case sensitive
*/
var city = 'Delhi';
console.log(city);

const ownersName = 'Hari Ram';
// ownersName = 'Harry'; // Cannot do this (error)
console.log(ownersName);
const fruit = 'Orange';

Const

Can't redeclare again however we can push in inside array

const arr1 = [12,23,12,53, 3];
// arr1.push(45);
console.log(arr1)

//can't const arr1[23,45,56]




* Most common programming case types:

1. camelCase  (firstName)
2. kebab-case (first-name)
3. snake_case  (first_name)
4. PascalCase  (FirstName)

//Variable declare style type
*/

Type Conversion String to Number, boolean, parseInt, parseFloat, toFixed

// Type conversion 
console.log('Welcome to tut5');
let myVar;
myVar = String(34);
// console.log(myVar, (typeof myVar));
let booleanVar = String(true);
// console.log(booleanVar, (typeof booleanVar));

let date = String(new Date());
// console.log(date, (typeof date));

let arr =  String([1,2,3,4,5]);
// console.log(arr.length, (typeof arr));

let i = 75;
// console.log(i.toString())

let stri = Number("3434");
stri = Number("343d4");
stri = Number(false);
stri = Number([1,2,3,4,5,6,7,8,9]);
// console.log(stri, (typeof stri));

let number = parseFloat('34.098');


console.log(number.toFixed(2), (typeof number));

// Type coercion meaning String will add number , and print will 69834 

let mystr = Number("698");
let mynum = 34;

console.log(mystr + mynum);

JavaScript String Methods

Most Used

Slicing methods, :

https://www.w3schools.com/js/js_string_methods.asp

html.charAt(4)

html.endsWidth('sdgasdg')

html.includes('ssdfg')

html.substring(1,4)  // first positon , last n-1

console.log(html.indexOf('k'));  // first occurrence of 'k' in string

console.log(html.lastIndexOf('k'); // Last occurrence of k

console.log(html.indexOf('t'))

console.log(html.lastIndexOf('and'));

console.log(html.slice(3)) //Shure se utna chor kar baki pura string

console.log(html.substring(1,5)) // first place value, then last value n-1

console.log(html.split('.')) // sperate all string into array with use of comma, space or any charc

console.log(html.replace('in', 'love'))  //replace only first occrunce

Template Literals

let myHtml = ` Hello 

    <h2>This is ' "heading"

    </h2>

    <p> You like ${fruit1} and ${fruit2}</p>`;

document.body.innerHTML = myHtml;

// ' '' adding in  using dynamic values

Arrays & Objects

console.log("Array Chapter")

console.clear()

//How to declare and call array

let marks = [23,33,54,67,34,65,67,93,34,54];

const fruit = ['Orange', 'Banana', 'Kiwi', 'Tomato', ]

const mix = [23, 'ravi', [64, 343]]; //Declaring

const yes = new Array(23,434,'Orange');

console.log(yes[1]);

console.log(mix[2]);

console.log(marks[0]); //Calling by placevalue

console.log(fruit[2]);

console.log(Array.isArray(mix))

/// Index of Method

console.log(marks);

let value = marks.indexOf(39797);

console.log(value);

//Mutating means modifying the array

marks.push(98);

console.log(marks); //This will add value in last of array

marks.unshift(1009);

console.log(marks); //This  will add the value at first

//Remove element from end

marks.pop();

console.log(marks); //This will remove element from last

//Remove element from start

marks.shift();

console.log(marks); //This will remove the elements from start

//Remove elements from one point to another

marks.splice(1,2);

console.log(marks);

//Reverse all array order

marks.reverse();

console.log(marks); //It change originally array

//Concat of array

let marks2 =[2,4,65,45999];

marks = marks.concat(marks2);

console.log(marks);

//Objects type two times for format learn 

let obj = {

    name : "Harry",

    section : "Btech1",

    age :'34'

}

console.log(obj)

console.log(obj.age)

//We use objects when we need to store key value pairs

//We use Arrays when we need to store elements

To add we use push, element in last and pop for delete a element

Second Examples: Nested Objects

console.clear()

// var mCars = {

// "p1" : "350 kmph",

// "gallardo" : '320 kmph',

// "veyron" : '409 kmph',

// "agera" : '429 kmph'

// }

// console.log(mCars)

// console.log(typeof(mCars))

var mAgera = {

name: "Agera",

manufacturer: {

name: "Koenigsegg",

loaction: "Sweden"

},

topSpeed: 429,

color: "Black",

spoilers: false,

applyBrakes: function() {

setTimeout(function() {

console.log('Car Stopped');

}, 5000)

}

}

console.log(mAgera.name)

console.log(mAgera.topSpeed)

console.log(mAgera.manufacturer)

console.log(mAgera.manufacturer.name)

console.log(mAgera.applyBrakes())

console.log(mAgera.applyBrakes)

Loops, For,  forEach, break & continue, Itteration in array via two method, 

extra arguments in function(elements), Access into array

console.clear();

//For loop understand how works

for(i=7;i<=10;i++){

    console.log(i)

}

/// Inside do while break and contine

let k =0;

do {

    if(k===5){

        break;

       

    }

    console.log(k);

    k++;

} while(k<10)

console.log("Done break")

do {

    if(k===5){

        k++;

        continue;

       

    }

    console.log(k);

    k++;

} while(k<10)

console.log("Done continue" )

//Iteration in array via for loop, access in array

let arr  = [2,3,4,5,6,7,8];

for(l=0;l<arr.length;l++){

    const element = arr[l];

    console.log(element);

}

console.log(" Done array iteration via for loop")

//foreach loop for access in array

arr.forEach(function(element){

    console.log(element);

})

console.log(" Done For each")

//foreach loop for access in array, some more arguments in element part

arr.forEach(function(element, index, array){

    console.log(element,index, array);

})

console.log(" Done For each more argument")

//Iteration in object, access in object values

let obj = {

    name : "Rohan Das",

    age :78,

    type : "Dangerous Programer",

    os: "Obantu"

}

//Method one

for(let key in obj){

    console.log(obj[key])

}

console.log("Done Iteration in object first way")

//Method two

for(let key in obj){

    console.log(`The ${key} of object is ${obj[key]}`)

}

console.log("Done Iteration in object second way")

Var Scope:

if declare in open then it will work like a global and if declared in function then it will work as a 

local

Let and Const:

Both are work for block level scope

console.clear()

// Write function and call Way one

let name = 'Hzt Umar RAZ';

let name1 = "The undfeated commander"

function greet(name, thank='Default Thanks'){

    console.log(`We love you ${name} from the bottom of the hearts, ${thank}`);

}

greet(name,"We always thankfull to you");

greet(name1,"We always thankfull to you");

// Way two

let name = 'Hzt Umar RAZ';

let name1 = "The undfeated commander";

function mygreet(name, thank='Default Thanks'){

    let msg =`We love you ${name} from the bottom of the hearts, ${thank}`;

    return msg;

}

let val = mygreet(name, "Jazaka")

console.log(val)

// Way three

let name = 'Hzt Umar RAZ';

let name1 = "The undfeated commander";

const mygreet = function(name, thank='Default Thanks'){

    let msg =`We love you ${name} from the bottom of the hearts, ${thank}`;

    return msg;

}

let val = mygreet(name, "Jazaka")

console.log(val)

Null and Unassingened:

console.clear()

var mVar //mvar holds no value

console.log(mVar)

give= undefiend

mVar = null //mVar holds the value null

console.log(mVar)

give= null

Manipulating DOM, using Window command, document, 

innerheight, innerWeight, links, image, scripts in js

let a = window;

// console.log(a)

// alert("First alert")

// window.alert("Second Alert")

// b = prompt("This will destroy your computer")

// console.log(b);

// c= confirm("Are you sure you want to delete this page")

// console.log(c);

// d = window.document

// d = window.innerHeight

// d = window.innerWeight

// d = scrollX

// d = scrollY

// d= location

// d =location.toString();

// Explore location, history and windows in console.log

// location.href = '//facebook.com' //It will redirect on website

// history.go // will work like back button

// console.log(d);

All form, body access

 let a = document;

a = document.all;

// a = document.body;

// a= document.forms[0];

Array.from(a).forEach(function(element){

    console.log(element); //Array.form(a) create an array

})

console.log(a)

//Good command to access all elements of a website

//documents.link and documents.scripts & documents.images

HTML selectors 

console.log('Welcome to tutorial 14');

/*

element selectors:

1. Single element selector

2. Multi element selector

*/

// 1. Single element selector

let element = document.getElementById('myfirst');

// element = element.className;

// element = element.childNodes;

// element = element.parentNode;

element.style.color = 'red';

element.innerText = 'Harry is a good boy';

element.innerHTML = '<b>Harry is a good boy</b>';

// console.log(element.innerText);

let sel = document.querySelector('#myfirst');

sel = document.querySelector('.child');

sel = document.querySelector('div');

sel.style.color = 'green';

console.log(sel)

// 2. Multi element selector

let elems = document.getElementsByClassName('child');

elems = document.getElementsByClassName('container');

elems = document.getElementsByTagName('div');

console.log(elems)

for (let index = 0; index < elems.length; index++) {

    const element = elems[index];

    console.log(element);

   element.style.color = 'blue';

}

// Array.from(elems).forEach(element => {

//     console.log(element);

//    element.style.color = 'blue';

// });

// console.log(elems[0].getElementsByClassName('child'))

Children, Parent & Traversing, selectors the DOM

console.log('Welcome to tutorial 15');

let cont = document.querySelector('.no');

cont = document.querySelector('.container');

console.log(cont.childNodes);

console.log(cont.children)

 

let nodeName = cont.childNodes[3].nodeName;

let nodeType = cont.childNodes[11].nodeType;

console.log(nodeName)

console.log(nodeType)

Node types

1. Element

2. Attribute

3. Text Node

8. Comment

9. document

10. docType

console.log(cont.childNodes);

console.log(cont.children);

let container = document.querySelector('div.container');

console.log(container.children[1].children[0].children);

console.log(container.firstChild);

console.log(container.firstElementChild);

console.log(container.lastChild);

console.log(container.lastElementChild);

console.log(container.children);

console.log(container.childElementCount); // Count of child elements

console.log(container.firstElementChild.parentNode);

console.log(container.firstElementChild.nextSibling);

console.log(container.firstElementChild.nextElementSibling);

console.log(container.firstElementChild.nextElementSibling.nextElementSibling);

Creating, Removing & Replacing Elements 

console.log('this is tut 16');
let element = document.createElement('li');
let text = document.createTextNode('I am a text node');
element.appendChild(text)

// Add a class name to the li element
element.className = 'childul';
element.id = 'createdLi';
element.setAttribute('title', 'mytitle');
// element.innerText = '<b>Hello this is created by harry</b>';
// element.innerHTML = '<b>Hello this is created by harry</b>';

let ul = document.querySelector('ul.this');
ul.appendChild(element);
// console.log(ul)
// console.log(element)

let elem2 = document.createElement('h3');
elem2.id = 'elem2';
elem2.className = 'elem2';
let tnode = document.createTextNode('This is a created node for elem2');
elem2.appendChild(tnode);

element.replaceWith(elem2);
let myul = document.getElementById('myul');
myul.replaceChild(element, document.getElementById('fui'));
myul.removeChild(document.getElementById('lui'));
let pr = elem2.hasAttribute('href');
elem2.removeAttribute('id');
elem2.setAttribute('title', 'myelem2title');
console.log(elem2, pr);

// quick quiz
// create a heading element with text as "Go to CodeWithHarry" and create an a tag outside it with href = "https://www.codewithharry.com"

Previous

last line