𝐉𝐀𝐕𝐀𝐒𝐂𝐑𝐈𝐏𝐓 𝐍𝐎𝐓𝐄𝐒

------------------

𝐂𝐎𝐍𝐒𝐎𝐋𝐄 𝐎𝐔𝐓𝐏𝐔𝐓
''''''''''''''''''
-->one way of debugging is to use alert messages in browser

𝐚𝐥𝐞𝐫𝐭('𝐡𝐞𝐥𝐥𝐨 𝐰𝐨𝐫𝐥𝐝);
popup in browser window

instead of writing alerts in code file we can write them in console of browser
click on three dots , then click on more tools , then click on developer tools,
choose console.
now we can do this alert and other checking from the console itself.
and use command clear() to clear the console.

𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠('𝐡𝐞𝐥𝐥𝐨 𝐰𝐨𝐫𝐥𝐝') for general console message

--> another way of debugging is to print messages to console

𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐞𝐫𝐫𝐨𝐫('𝐭𝐡𝐢𝐬 𝐢𝐬 𝐚𝐧 𝐞𝐫𝐫𝐨𝐫') for error message

-->the best documentation for javascript is mdn

𝐕𝐀𝐑𝐈𝐀𝐁𝐋𝐄𝐒
'''''''''''
1.var
--> it is used in the beggining of the javascript
--> it is a gloabal variable
--> you cannot use another variable with the same name , even the previous variable
is within different codeblock.
-->so it is not commonly used in js nowadays
ex:- var pi= 3.14;
2.let
--> we can reassign values
ex:- let score =10;
3.const
--> we cannot reassign values , and need to be intialized at the time of creation.
ex:- const name = "Mahi";

𝐃𝐀𝐓𝐀 𝐓𝐘𝐏𝐄𝐒
'''''''''''''
1. strings , numbers , boolean , null , undefined
ex:-const name ="mahi";
const age = 20;
const rating = 4.5;
const iscool = true;
const x= null; //object data type
const y = undefined;
let z ; //undefined

2.checking type of variable

ex:- console.log(typeof age)

3.concatentaion to print variables along with text

console.log('My name is ' + name + ' and I am ' + age + ' years old ');

4.template string / literals instead of concatenation

console.log(`my name is ${name} and Iam ${age}`);
𝐒𝐓𝐑𝐈𝐍𝐆𝐒 𝐀𝐍𝐃 𝐒𝐓𝐑𝐈𝐍𝐆 𝐌𝐄𝐓𝐇𝐎𝐃𝐒
''''''''''''''''''''''''''''''
1.length
-->length is a string property which prints the length of given string
-->it doesn't have paranthesis () , as if anything has paranthesis it is reffered
as function not property.
const s = 'hello world';
console.log(s.length);

2.touppercase
console.log(s.toLowerCase());

3.tolowercase
console.log(s.toUpperCase());

4.making part of substring uppercase/lowercase

console.log(s.substring(0,5).toLowerCase())

5.splitting a string into an array at specific delimeter

console.log(s.split('')); specify the delimeter whatever you want

𝐀𝐑𝐑𝐀𝐘𝐒 𝐀𝐍𝐃 𝐀𝐑𝐑𝐀𝐘 𝐌𝐄𝐓𝐇𝐎𝐃𝐒

''''''''''''''''''''''''''''''
1.creating array using constructor
const numbers = new Array(1,2,3,4,5,6);
console.log(numbers);

2.creating generally
const fruits = ['appples' ,'oranges' ,'pears'];
console.log(fruits);

3. you can have heterogeneous arrays also

const mixed = ['apple',10,'orange',20];
console.log(mixed);

4.accessing single element from the array

arrays are 0-based indexing
console.log(fruits[1]);

note :- we can add new elemnts to our array ven though we have used const
5.adding new element by specifying next index
fruits[3]='grapes';
console.log(fruits)

6.adding the new elemnt directly at the end of array without specifying the index
fruits.push('mango')

7.adding the elemnt at the start

fruits.unshift('berries');

8.poppping last element

fruits.pop();

9.popping first element

fruits.shift();

console.log(fruits);
10.checking whether it is array or not
console.log(fruits); passing an array
console.log('hello') passing a string

11.getting index of specific element

if you give an element that doesn't present in array , then it will give -1 as
output
console.log(fruits.indexOf('oranges'));

𝐎𝐁𝐉𝐄𝐂𝐓 𝐋𝐈𝐓𝐄𝐑𝐀𝐋𝐒
'''''''''''''''''
const person ={
firstName : 'john',
lastName :'Doe',
age:20,
hobbies:['music','movies','sports'],
address :{
street:'main road',
city:'rajanagaram',
state:'AP'
}
}

1.accessing entire object

console.log(person)

2.accessing a single value

console.log(person.firstName);

3.accessing multiple values

console.log(person.firstName,person.lastName)

4.accessing the single elemnt in the array type value

console.log(person.hobbies[1]);

5.accessing the sinlge value in the object literal type value

console.log(person.address.city)

6.structuring to access them in advanced way

const {firstName,lastName} = person;
console.log(firstName)

7.adding additional properties

person.email = '[email protected]';
console.log(person)

𝐀𝐑𝐑𝐀𝐘 𝐎𝐅 𝐎𝐁𝐉𝐄𝐂𝐓𝐒
'''''''''''''''''''
const todos = [
{
id:1,
text:'take out trash',
isComp:true
},
{
id:2,
text:'Meeting with boss',
 isComp:false
},
{
id:3,
text:'reading',
isComp:true
},

1.printing the objects in the array of objects

console.log(todos)

2.printing a speific object in array

console.log(todos[1].text)

𝐉𝐒𝐎𝐍 𝐅𝐎𝐑𝐌𝐀𝐓
'''''''''''''
-->json stands for javascript object notation
--> it is a data format , usd mostly when working in API's
--> these are similar to object literals , but it doesnt use singl quotes

//converting this object literal into json to send it to the server

ex:-
const todoJSON = JSON.stringify(todos);
console.log(todoJSON);
[
{
"id":1,
"text":"take out trash",
"isComp":true
},
{
"id":2,
"text":"Meeting with boss",
"isComp":false
},
{
"id":3,
"text":"reading",
"isComp":true
},
]

𝐋𝐎𝐎𝐏𝐒
'''''''
1.for loop
for(let i=0;i<10;i++){
console.log(`for loop number: ${i}`);
}

2.while loop
let i=0;
while(i<10){
console.log(i);
i++;
}

3.looping through arrays

for(let i=0;i<todos.length;i++){
console.log(`todos text : ${todos[i].text}`)
}

for(let todo of todos){

console.log(todo.isComp);
}

𝐇𝐢𝐠𝐡 𝐎𝐫𝐝𝐞𝐫 𝐀𝐫𝐫𝐚𝐲 𝐌𝐞𝐭𝐡𝐨𝐝𝐬

'''''''''''''''''''''''''

1.forEach
todos.forEach(function(todo){ todo is a prameter of function whihc stores the data
console.log(todo.text)
});

2.map
const todoText=todos.map(function(todo){
return todo.text;
});
console.log(todoText)

3.filter
const comptodos = todos.filter(function(todo){
return todo.isComp==true;
})
console.log(comptodos);

now we can a particular value in the array items returned by filter method by
mapping on the result
it is callled functionla programming
const comptext = todos.filter(function(todo){
return todo.isComp==true;
}).map(function(todo){
return todo.text;
})
console.log(comptext)

𝐂𝐨𝐧𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥𝐬
''''''''''''
1.if else condition
double == : it just comapres the values , os it treats '10' and 10 as same
triple equal === : it compares the datatypes also so '10' not equal to 10
const x='10';
if(x===10){
console.log(`x is 10`)
}
else{
console.log(`x is not 10`)
}

logical operators:- or -> || ,2.and -> &&

2.ternary operators
 const color = x>10?'red':'green';
console.log(color);

3.switches
switch(color){
case 'red':
console.log(`color is red`)
case 'blue':
console.log(`color is blue`)

defeault:
console.log(`colour is not red or blue`)

𝐅𝐔𝐍𝐂𝐓𝐈𝐎𝐍𝐒
'''''''''''
function addNum(num1,num2){
console.log(num1+num2)
}
addNum(5,4);

//setting default parameters for functions

function addNum(num1=1,num2=1){
console.log(num1+num2)
}
addNum(); //if you pass nothing then its goonna use those default values

𝐀𝐫𝐫𝐨𝐰 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬
'''''''''''''''''
const addNums = (num1=1,num2=1) => {
return num1+num2;
}
console.log(addNums(3,4))

const mulNums = (num1=1,num2=1) => console.log(num1*num2)

mulNums(4,2);

without paranthesis
const subtract = (num1=1,num2=1) => num1-num2
console.log(subtract(4,2))

with single paramter

const singlepara = num1 => num1+5;
console.log(singlepara(10));

𝐂𝐨𝐧𝐬𝐭𝐫𝐮𝐜𝐭𝐨𝐫 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 & 𝐏𝐫𝐨𝐭𝐨𝐭𝐲𝐩𝐞𝐬

''''''''''''''''''''''''''''''''''
-->constructor function
function Person(firstName , lastName , dob){
this.firstName=firstName;
this.lastName=lastName;
this.dob=new Date(dob);
methods
this.getBirthYear = function(){
 return this.dob.getFullYear();
}

this.getFullName = function(){
return `${firstName} ${lastName}`;
}
}

-->prototypes
Person.prototype.getBirthYear = function(){
return this.dob.getFullYear();
}

Person.prototype.getFullName =function(){
return `${this.firstName} ${this.lastName}`;
}

-->instantiate object
const person1 = new Person("john","doe","04-11-1920");
const person2 = new Person("mary","com","02/12/2012");

console.log(person1);
console.log(person2.firstName);

-->Date is a default class with some predefined functions

console.log(person2.dob.getFullYear());

-->methods in constructor
console.log(person1.getBirthYear());
console.log(person1.getFullName());

-->observe prototypes and constructors in console output

console.log(person1)

𝐄𝐒𝟔 𝐂𝐥𝐚𝐬𝐬𝐞𝐬
'''''''''''
-->the above constructor functions are all part of es5
-->now with es6 we got the classes

class Person{
constructor(firstName , lastName , dob){
this.firstName=firstName;
this.lastName=lastName;
this.dob=new Date(dob);
}

getBirthYear(){
return this.dob.getFullYear();
}

getFullName(){
return `${this.firstName} ${this.lastName}`;
}
}

-->instantiate of object
const person1=new Person("mahi","dhani",'4-02-2012')
console.log(person1);
𝐖𝐢𝐧𝐝𝐨𝐰 𝐎𝐛𝐣𝐞𝐜𝐭 & 𝐃𝐎𝐌
''''''''''''''''''''''
-->it is parent object of browser
console.log(window)
window.alert(1);

𝐃𝐎𝐌 𝐒𝐞𝐥𝐞𝐜𝐭𝐢𝐨𝐧
''''''''''''''
-->single element selector
console.log(document.getElementById('my-form'));
const form=document.getElementById('my-form')
console.log(form)

console.log(document.querySelector('h1'))

-->multiple element
console.log(document.querySelectorAll('.item')) node list
console.log(document.getElementsByClassName('item')) html collection (we cannot
use array methods directly)

-->looping over each elemnt in items class

const items = document.querySelectorAll('.item');
items.forEach((item) => console.log(item))

𝐌𝐚𝐧𝐢𝐩𝐮𝐥𝐚𝐭𝐢𝐧𝐠 𝐓𝐡𝐞 𝐃𝐎𝐌

'''''''''''''''''''''''
const ul = document.querySelector('.items');

1.removing entire ul list items

ul.remove();

2.only last element removing

ul.lastElementChild.remove();

3.editing content of first element

ul.firstElementChild.textContent='hello'

4.
ul.children[1].innerText='brad'
ul.lastElementChild.innerHTML='<h1>hello</h1>'

const btn=document.querySelector('.btn')
btn.style.background='red';

𝐄𝐯𝐞𝐧𝐭𝐬
'''''''
const btn = document.querySelector('.btn')
btn.addEventListener('click',(e) => {
e.preventDefault(); //to stop form atually submiting
console.log('click')
console.log(e)
console.log(e.target)
console.log(e.target.className)

//modifying background colour of form when button is clicked

 document.querySelector('#my-form').style.background = '#ccc';

//modifying body style

document.querySelector('body').classList.add('bg-dark');

document.querySelector('.items').lastElementChild.innerHTML = '<h1>hello</h1>'
})

-->we have other events like mouseover , mouseout

𝐅𝐨𝐫𝐦 𝐒𝐜𝐫𝐢𝐩𝐭
'''''''''''