Scribd
Upload
4 views

JS Notes

The document provides a comprehensive overview of JavaScript concepts, including loops, array methods, HTML attributes, and VS Code setup. It covers variable declarations, data types, type conversion, string manipulation, and array properties, along with practical examples. Additionally, it introduces Emmet for code expansion and emphasizes the importance of using modern JavaScript practices.

Uploaded by

NARESH BADWE
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

JS Notes

The document provides a comprehensive overview of JavaScript concepts, including loops, array methods, HTML attributes, and VS Code setup. It covers variable declarations, data types, type conversion, string manipulation, and array properties, along with practical examples. Additionally, it introduces Emmet for code expansion and emphasizes the importance of using modern JavaScript practices.

Uploaded by

NARESH BADWE
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

MOST IMPORTANT NOTE

Study all for loop


1. Array. from used to convert html object into array so that we can store all data into
database
// let fName="Naresh"
// let arr=Array.from(fName)
// console.log(arr)
2. “for…of” is the alternate of simple “for” loop. Using that we can access each element of
array.
// a.forEach((Element) =>{
// console.log(Element*Element);
// })
3. //access array using "for in" method. It always return index number
for(i in a ){
console.log(i)
}

Study all array methods. Its too important during development;


1. reduce()
2. filter
3. map

HTML methods and attributes :


let a=first.getAttribute('class')
console.log(a)
using id we are accessing the class name

console.log(first.hasAttribute('class'))
console.log(first.hasAttribute('style'))
it return true/false if this attribute use whose id is ‘first’
Class 1 01.Installing VS Code, Extensions &
After installing VSCode add extension “Liver server”

1) Add another extension “JavaScript (ES6) snippet.


What is Emmet in Visual Studio Code ?
2) Emmet uses different abbreviations and short expressions depending on what's
passed, and then dynamically converts the abbreviations into the full code
Example : if we write “ ! “ in VSCode and press enter key, it shows below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

3) Update mouse wheel setting that help to zoom the font


4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
4)
On the “Word wrap” setting
Above both the setting update the “Setting.json” file. We can use this file in other system also to
use same setting.

5) Live server  run program with the help of live server. The main benefit of live server
option is that no need to refresh the web page every time. Once we save the code,
automatically changes update the webpage.
Class 2 02.Console Logs, Errors, Warnings & More –
Console.log show the message on console. Should write in between script tag.
6) Add java script file in html page  used to take input from external file. If we have 2-3
line script code then we can directly put in html file but if we have too large code then
need to create external file.
(Use script:src and press enter key)

Using external file


7) Various methods of console

Clear method will clean the console


8) Time taken for the execution
Never use console.clear method with console.time(). It shows error and time not calculated

Comment the clear method and then save the code


9) We can see the result status category wise

10) Ctrl + /  for comment and uncomment the line


Class 3 03.Variables- let, const & var in JavaScript
11) Variable can be created using 3 keywords
Let, const and var.
Now the “var” is outdated and not used in latest javascript. In latest java script “let” and “ const”
is used.
var  “var” is having global scope

“const” once variable is created we can not change its values


Example  const name=”naresh”;
name=”badve”  this is wrong. Once we assign values to const variable
we cannot modify. Redeclaration not allowed
let’s see one more example
const arr1=[2,5,7,9,22,5];
arr1=[5,7,2,6];  this is not allowed
but we can push the element in to array using “push” method
arr1.push(75);

let use to create variable having local scope

most common programming cases types


1. camelCase  most commonly used
2. kabab-case
3. PascalCase
4. snake_case
let see the sample code with respected output.
Class 4
Data types in JS
Primitive data types  string, numbers, Boolean, null, undefined, symbol
Reference data types  array, object literals, function, dates
Symbol data type are introduced in ES6 version
Class 
Type conversion and type coercion
After converting we can apply the string related functions.
Convert string to number 
Can’t convert array to number.
Convert string to number using parstInt () and parseFloat()
strA=parseInt('453.678'); //453
console.log(strA, typeof strA);
strA=Number('456.789'); // 456.789
console.log(strA, typeof strA);
output
1234533 string
tut5.js:52 453678 'number'
tut5.js:55 453 'number'
tut5.js:57 456.789 'number'
// Type conversion and type coercion 35 'number'
//convert number to string tut5.js:8 90 string
tut5.js:12 true 'boolean'
let myVar; tut5.js:14 true string
myVar=35; tut5.js:18 Tue Feb 14 2023 16:18:44
console.log(myVar,typeof(myVar)); GMT+0530 (India Standard Time)
myVar=String(90); 'object'
console.log(myVar,typeof(myVar)); tut5.js:20 Tue Feb 14 2023 16:18:44
GMT+0530 (India Standard Time)
//convert boolean to string
string
let booleanVar=true;
tut5.js:24 (5) [1, 3, 5, 7, 9] 'object'
console.log(booleanVar,typeof(booleanVar));
tut5.js:26 1,3,5,7,9 string
booleanVar=String(true);
Length of string : 9
console.log(booleanVar,typeof(booleanVar));
tut5.js:31 12345 string
//convert date to string tut5.js:33 45678 'number'
let dateVar=new Date(); tut5.js:35 456.78 'number'
console.log(dateVar, typeof dateVar); tut5.js:37 NaN 'number'
dateVar=String(dateVar); tut5.js:40 NaN 'number'
console.log(dateVar, typeof dateVar); tut5.js:42 true 'boolean'
tut5.js:44 0 'number'
//convert array to string tut5.js:46 1 'number'
let myArr= [1,3,5,7,9]; tut5.js:50 1234533 string
console.log(myArr,typeof myArr); tut5.js:52 1234533 string
myArr=String(myArr); tut5.js:55 453 'number'
console.log(myArr,typeof(myArr),'\nLength of tut5.js:57 456.789 'number'
string : ', myArr.length); tut5.js:60 8966.234 string
tut5.js:62 122.453 'number'
//conert string to number tut5.js:63 122.45 number
tut5.js:64 122 number
let str='12345'; tut5.js:65 122.453000000000003
console.log(str, typeof str); number
str=Number('45678'); tut5.js:71 string 556650
console.log(str, typeof str);
str=Number('456.78');
console.log(str,typeof str);
str=Number('45a678');
console.log(str,typeof str);
//can't convert array to number
str=Number([1,3,5,6,7,8,9,2]);
console.log(str,typeof str);
let bVar=true;
console.log(bVar,typeof bVar);
bVar=Number(false);
console.log(bVar,typeof bVar);
bVar=Number(true);
console.log(bVar,typeof bVar);

//Convert string to number using parstInt () and parseFloat()


let strI='1234533';
console.log(strI, typeof strI);
strA=parseInt('453678');
console.log(strI, typeof strI);
//After decimal point , values not consider
strI=parseInt('453.678'); //453
console.log(strI, typeof strI);
strI=Number('456.789'); // 456.789
console.log(strI, typeof strI);

let strF='8966.234';
console.log(strF, typeof strF);
strF=parseFloat('122.453');
console.log(strF, typeof strF); //122.453
console.log(strF.toFixed(2), typeof strF); //122.45
console.log(strF.toFixed(), typeof strF); //122
console.log(strF.toFixed(15), typeof strF);
//122.453000000000003

//TYPE COERCION

let myStr1='5566';
let myStr2=50;
console.log(typeof(myStr1 + myStr2),(myStr1 + myStr2)); //string
556650

class 6
let greeting="Hello";
let fName="Naresh";
//let merge; --> if we use this then shows error while using concat
method
let merge='';
console.log(greeting.toLocaleLowerCase()); //hello
console.log(greeting.toUpperCase());//HELLO
console.log('Length of First Name '+ fName.length);//Length of First Name
6

merge=merge.concat(greeting,fName); //HelloNaresh
console.log(merge);//e
console.log(merge[1]); // 2 access charector using index number
//if string is not present then return -1
console.log(merge.indexOf('llo')); //2
console.log(merge.charAt(5)); //N
console.log(merge.lastIndexOf('e')); //8
console.log(merge.lastIndexOf('e453')); //-1
console.log(merge.endsWith('esh')); //true
console.log(merge.includes('are')); //true
console.log(merge.substring(1,7));//elloNa
console.log(merge.slice(-4));//resh
console.log(merge.slice(0,-4)); //HelloNa
console.log(merge.split('e')); //['H', 'lloNar', 'sh']
console.log(merge.replace('e','E'));//replace only first occurence --
>HElloNaresh
console.log(merge.replaceAll('e','E'));//replace all occurence --
>HElloNarEsh

//TEMPLATE LITERALS
//using back ticks we can use html tags also
let fruits1='Apple';
let fruits2='Mango';
let test=`This is ${fruits1} and I like ${fruits2}`;
console.log(test); //This is Apple and I like Mango

let sample=`This is ${fruits1} and I like ${fruits2} <h1> This is


heading tag </h1> <p> This is paragragh </p>`;
document.body.innerHTML=sample;
//console.log(sample);

Output
hello
tut6.js:6 HELLO
tut6.js:7 Length of First Name 6
tut6.js:10 HelloNaresh
tut6.js:11 e
tut6.js:13 2
tut6.js:14 N
tut6.js:15 8
tut6.js:16 -1
tut6.js:17 true
tut6.js:18 true
tut6.js:19 elloNa
tut6.js:20 resh
tut6.js:21 HelloNa
tut6.js:22 (3) ['H', 'lloNar', 'sh']
tut6.js:23 HElloNaresh
tut6.js:24 HElloNarEsh
tut6.js:31 This is Apple and I like Mango

class 7
Array and its properties and objects
shift add the values at the beginning of array
unshift  add the element at the last of the array
splice remove the element from the array start from the specified index and remove the total
no. of element specified with function
//Array and their properties

const marks=[10,40,80,33,60];
let fruits=['Apple','Mango','orange'];
let mixed= [2,5,['Naresh',56],'Badve',90];
console.log(marks); //[10, 40, 80, 33, 60]
console.log(fruits); //['Apple', 'Mango', 'orange']
console.log(mixed); //[2, 5, Array(2), 'Badve', 90]
marks[1]=400;
console.log(marks);//[10, 400, 80, 33, 60]

const arr=new Array(5,10,80,90);


console.log(arr); //[5, 10, 80, 90]
arr.push(35,85); //[5, 10, 80, 90, 35, 85]
console.log(arr);//[5, 10, 80, 90, 35]
console.log(arr[9]); //undefined
console.log(arr[4]); //35
//unshift add element at the begining only
arr.unshift(45);
console.log(arr); //[45, 5, 10, 80, 90, 35, 85]
//shift remove the first element only from the array
arr.shift();
console.log(arr); // [5, 10, 80, 90, 35, 85]
//splice remove the no. of element from array start from
specified index number.
arr.splice(7,3);
console.log(arr);[5, 35, 85]
marks.reverse();
console.log(marks); //[60, 33, 80, 400, 10]
mixed=mixed.concat(fruits);
console.log(mixed); //[2, 5, Array(2), 'Badve', 90, 'Apple',
'Mango', 'orange']

//create object
let details={
fName:'Naresh',
lName:'Badve',
age:38,
city:'Nagpur'
}
console.log(details);//{fName: 'Naresh', lName: 'Badve', age:
38, city: 'Nagpur'}
console.table(details);// print details in the form of table
Points to remember:
1. Access values and key using object.key function (Simple for
loop)
2. //WAP to print the marks of a students on an object using for loop
3. let marks={
4. nares:67,
5. vishu:90,
6. vrishang:99,
7. vritika:100
8. }
9. console.log(Object.keys(marks).length);
10. for(let i=0;i<Object.keys(marks).length;i++){
11. console.log(Object.keys(marks)[i] + " : "+
marks[Object.keys(marks)[i]]);
12. }

2. Arrow function
4. fine the mean of 5 nummber

Avg =(a,b,c,d,e)=>{
return ((a+b+c+d+e)/5)
}
console.log(Avg(4,8,6,3,2));

3. Template literals
//Template literals
let sentence=`${name1} is the father of ${name2}`
console.log(sentence);

5. string methods and array method

String length String toUpperCase()


String charAt() String toLowerCase()
String charCodeAt() String concat()
String at() String trim()
String [] String trimStart()
String slice() String trimEnd()
String substring() String padStart()
String substr() String padEnd()
String repeat()
String replace()
String replaceAll()
String split()

6. Array methods

Array length Array shift()


Array toString() Array unshift()
Array at() Array delete()
Array join() Array concat()
Array pop() Array copyWithin()
Array push() Array flat()
Array splice()
Array toSpliced()
Array slice()

7. after delete the element from array, size not change


8. let test=[1,4,6,8,9,12,45,8];
9. console.log(delete test[0]);
10.console.log(test)
11.console.log(test.length)
output :
[empty, 4, 6, 8, 9, 12, 45, 8]
8

8. sort() , sort alphabetically sort the value


let test1=[1,4,6,8,9,12,45,8];
console.log(test1.sort())

(8) [1, 12, 4, 45, 6, 8, 8, 9]

9. compare method for sorting


let test1=[1,4,6,8,9,12,45,8];
let compare =(a,b)=>{
return (a-b);
}
test1.sort(compare);
console.log(test1)
output :
[1, 4, 6, 8, 8, 9, 12, 45]

descending order just write :


let test1=[1,4,6,8,9,12,45,8];

let compare =(a,b)=>{


return (b-a);
}
test1.sort(compare);
console.log(test1)

You might also like