𝐉𝐀𝐕𝐀𝐒𝐂𝐑𝐈𝐏𝐓 𝐍𝐎𝐓𝐄𝐒
------------------
𝐂𝐎𝐍𝐒𝐎𝐋𝐄 𝐎𝐔𝐓𝐏𝐔𝐓
''''''''''''''''''
-->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
𝐕𝐀𝐑𝐈𝐀𝐁𝐋𝐄𝐒
'''''''''''
[Link]
--> 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;
[Link]
--> we can reassign values
ex:- let score =10;
[Link]
--> 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
[Link] type of variable
ex:- [Link](typeof age)
[Link] to print variables along with text
[Link]('My name is ' + name + ' and I am ' + age + ' years old ');
[Link] string / literals instead of concatenation
[Link](`my name is ${name} and Iam ${age}`);
𝐒𝐓𝐑𝐈𝐍𝐆𝐒 𝐀𝐍𝐃 𝐒𝐓𝐑𝐈𝐍𝐆 𝐌𝐄𝐓𝐇𝐎𝐃𝐒
''''''''''''''''''''''''''''''
[Link]
-->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';
[Link]([Link]);
[Link]
[Link]([Link]());
[Link]
[Link]([Link]());
[Link] part of substring uppercase/lowercase
[Link]([Link](0,5).toLowerCase())
[Link] a string into an array at specific delimeter
[Link]([Link]('')); specify the delimeter whatever you want
𝐀𝐑𝐑𝐀𝐘𝐒 𝐀𝐍𝐃 𝐀𝐑𝐑𝐀𝐘 𝐌𝐄𝐓𝐇𝐎𝐃𝐒
''''''''''''''''''''''''''''''
[Link] array using constructor
const numbers = new Array(1,2,3,4,5,6);
[Link](numbers);
[Link] generally
const fruits = ['appples' ,'oranges' ,'pears'];
[Link](fruits);
3. you can have heterogeneous arrays also
const mixed = ['apple',10,'orange',20];
[Link](mixed);
[Link] single element from the array
arrays are 0-based indexing
[Link](fruits[1]);
note :- we can add new elemnts to our array ven though we have used const
[Link] new element by specifying next index
fruits[3]='grapes';
[Link](fruits)
[Link] the new elemnt directly at the end of array without specifying the index
[Link]('mango')
[Link] the elemnt at the start
[Link]('berries');
[Link] last element
[Link]();
[Link] first element
[Link]();
[Link](fruits);
[Link] whether it is array or not
[Link](fruits); passing an array
[Link]('hello') passing a string
[Link] index of specific element
if you give an element that doesn't present in array , then it will give -1 as
output
[Link]([Link]('oranges'));
𝐎𝐁𝐉𝐄𝐂𝐓 𝐋𝐈𝐓𝐄𝐑𝐀𝐋𝐒
'''''''''''''''''
const person ={
firstName : 'john',
lastName :'Doe',
age:20,
hobbies:['music','movies','sports'],
address :{
street:'main road',
city:'rajanagaram',
state:'AP'
}
}
[Link] entire object
[Link](person)
[Link] a single value
[Link]([Link]);
[Link] multiple values
[Link]([Link],[Link])
[Link] the single elemnt in the array type value
[Link]([Link][1]);
[Link] the sinlge value in the object literal type value
[Link]([Link])
[Link] to access them in advanced way
const {firstName,lastName} = person;
[Link](firstName)
[Link] additional properties
[Link] = 'mahi28@[Link]';
[Link](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
},
[Link] the objects in the array of objects
[Link](todos)
[Link] a speific object in array
[Link](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 = [Link](todos);
[Link](todoJSON);
[
{
"id":1,
"text":"take out trash",
"isComp":true
},
{
"id":2,
"text":"Meeting with boss",
"isComp":false
},
{
"id":3,
"text":"reading",
"isComp":true
},
]
𝐋𝐎𝐎𝐏𝐒
'''''''
[Link] loop
for(let i=0;i<10;i++){
[Link](`for loop number: ${i}`);
}
[Link] loop
let i=0;
while(i<10){
[Link](i);
i++;
}
[Link] through arrays
for(let i=0;i<[Link];i++){
[Link](`todos text : ${todos[i].text}`)
}
for(let todo of todos){
[Link]([Link]);
}
𝐇𝐢𝐠𝐡 𝐎𝐫𝐝𝐞𝐫 𝐀𝐫𝐫𝐚𝐲 𝐌𝐞𝐭𝐡𝐨𝐝𝐬
'''''''''''''''''''''''''
[Link]
[Link](function(todo){ todo is a prameter of function whihc stores the data
[Link]([Link])
});
[Link]
const todoText=[Link](function(todo){
return [Link];
});
[Link](todoText)
[Link]
const comptodos = [Link](function(todo){
return [Link]==true;
})
[Link](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 = [Link](function(todo){
return [Link]==true;
}).map(function(todo){
return [Link];
})
[Link](comptext)
𝐂𝐨𝐧𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥𝐬
''''''''''''
[Link] 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){
[Link](`x is 10`)
}
else{
[Link](`x is not 10`)
}
logical operators:- or -> || ,[Link] -> &&
[Link] operators
const color = x>10?'red':'green';
[Link](color);
[Link]
switch(color){
case 'red':
[Link](`color is red`)
case 'blue':
[Link](`color is blue`)
defeault:
[Link](`colour is not red or blue`)
𝐅𝐔𝐍𝐂𝐓𝐈𝐎𝐍𝐒
'''''''''''
function addNum(num1,num2){
[Link](num1+num2)
}
addNum(5,4);
//setting default parameters for functions
function addNum(num1=1,num2=1){
[Link](num1+num2)
}
addNum(); //if you pass nothing then its goonna use those default values
𝐀𝐫𝐫𝐨𝐰 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬
'''''''''''''''''
const addNums = (num1=1,num2=1) => {
return num1+num2;
}
[Link](addNums(3,4))
const mulNums = (num1=1,num2=1) => [Link](num1*num2)
mulNums(4,2);
without paranthesis
const subtract = (num1=1,num2=1) => num1-num2
[Link](subtract(4,2))
with single paramter
const singlepara = num1 => num1+5;
[Link](singlepara(10));
𝐂𝐨𝐧𝐬𝐭𝐫𝐮𝐜𝐭𝐨𝐫 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 & 𝐏𝐫𝐨𝐭𝐨𝐭𝐲𝐩𝐞𝐬
''''''''''''''''''''''''''''''''''
-->constructor function
function Person(firstName , lastName , dob){
[Link]=firstName;
[Link]=lastName;
[Link]=new Date(dob);
methods
[Link] = function(){
return [Link]();
}
[Link] = function(){
return `${firstName} ${lastName}`;
}
}
-->prototypes
[Link] = function(){
return [Link]();
}
[Link] =function(){
return `${[Link]} ${[Link]}`;
}
-->instantiate object
const person1 = new Person("john","doe","04-11-1920");
const person2 = new Person("mary","com","02/12/2012");
[Link](person1);
[Link]([Link]);
-->Date is a default class with some predefined functions
[Link]([Link]());
-->methods in constructor
[Link]([Link]());
[Link]([Link]());
-->observe prototypes and constructors in console output
[Link](person1)
𝐄𝐒𝟔 𝐂𝐥𝐚𝐬𝐬𝐞𝐬
'''''''''''
-->the above constructor functions are all part of es5
-->now with es6 we got the classes
class Person{
constructor(firstName , lastName , dob){
[Link]=firstName;
[Link]=lastName;
[Link]=new Date(dob);
}
getBirthYear(){
return [Link]();
}
getFullName(){
return `${[Link]} ${[Link]}`;
}
}
-->instantiate of object
const person1=new Person("mahi","dhani",'4-02-2012')
[Link](person1);
𝐖𝐢𝐧𝐝𝐨𝐰 𝐎𝐛𝐣𝐞𝐜𝐭 & 𝐃𝐎𝐌
''''''''''''''''''''''
-->it is parent object of browser
[Link](window)
[Link](1);
𝐃𝐎𝐌 𝐒𝐞𝐥𝐞𝐜𝐭𝐢𝐨𝐧
''''''''''''''
-->single element selector
[Link]([Link]('my-form'));
const form=[Link]('my-form')
[Link](form)
[Link]([Link]('h1'))
-->multiple element
[Link]([Link]('.item')) node list
[Link]([Link]('item')) html collection (we cannot
use array methods directly)
-->looping over each elemnt in items class
const items = [Link]('.item');
[Link]((item) => [Link](item))
𝐌𝐚𝐧𝐢𝐩𝐮𝐥𝐚𝐭𝐢𝐧𝐠 𝐓𝐡𝐞 𝐃𝐎𝐌
'''''''''''''''''''''''
const ul = [Link]('.items');
[Link] entire ul list items
[Link]();
[Link] last element removing
[Link]();
[Link] content of first element
[Link]='hello'
4.
[Link][1].innerText='brad'
[Link]='<h1>hello</h1>'
const btn=[Link]('.btn')
[Link]='red';
𝐄𝐯𝐞𝐧𝐭𝐬
'''''''
const btn = [Link]('.btn')
[Link]('click',(e) => {
[Link](); //to stop form atually submiting
[Link]('click')
[Link](e)
[Link]([Link])
[Link]([Link])
//modifying background colour of form when button is clicked
[Link]('#my-form').[Link] = '#ccc';
//modifying body style
[Link]('body').[Link]('bg-dark');
[Link]('.items').[Link] = '<h1>hello</h1>'
})
-->we have other events like mouseover , mouseout
𝐅𝐨𝐫𝐦 𝐒𝐜𝐫𝐢𝐩𝐭
'''''''''''