print on console :
[Link]("string/text");
variables declare and assign :
let a = 10; // we cannot declare duplicate variable
var a = 20; // we can declare duplicate variable
const a = 30 // we cannot change the value of this type of
variable
functions in JavaScript :
function a1(){
// statements...
}
objects in JavaScript :
let obj1 = {
age : 34,
name : “ayush”
}
arrays in javascript :
var/let/const variableName = [value1, value2, ...]
-> here var, let, and const are keyword
-> here in curly braces we can put same or different data types
value...
Ex1:
let arr1 = [1,3,5,7,4,2,5]
var arr2 = [1,"ayush",true, {}]
forEach loop in javascript :
[Link](function(){
// statements . . .
})
Ex2:
Const arr = [2,3,4,5,6]
[Link](function(val){
[Link](val)
})
Array map method :
Const arr = [2,3,4,5,6]
[Link](function(val){
[Link](val)
})
for of loop ----> for retrieve characters from the string.
Ex1. For of loop that prints the all characters in the console
on the browser and here size variable is used to get the length
of the string…
let size = 0
let str = "ayush"
for(let i of str){
[Link](i)
size++
}
[Link]("size of string is ",size)
for in loop --->
let student = {
Name : "ayush fataniya",
age : "20",
isPass : true,
cgpa : 7.35
}
for(let key in student){
[Link]("key ",key,"value ",student[key])
}
Ex.2 print even and odd numbers in console up to 100
for(let i=0;i<=100;i++){
if(i % 2 === 0){
[Link]("even number ",i)
}else{
[Link]("odd number ",i)
}
}
Ex3 create a game where you start with any random game
number. Ask the user to keep guessing the game number
until the user enters correct value.
let gameNum = 25
let userNum = prompt("guess the number ")
while(userNum !== gemeNum){
userNum = prompt("you entered wrong number. enter again :
")
}
[Link]("congrats ! you entered right number")
Template literals :
let obj = {
item : "pen",
price : 10,
};
// print this details with normal string :
let result1 = [Link]("the cost
of",[Link],"is",[Link],"rupees ")
// print this details with template literal (template literal
is a special type of string) :
let result2 = `the cost of ${[Link]} is ${[Link]} rupees`
[Link](result2)
we can also put expressions inside ${} like, ${1+2+3}. This
will output 6 in browser.
we also can use escape characters inside ${} like, /n /t
String methods/functions
[Link]()
[Link]()
[Link]()
[Link](start,end?) // returns part of string
[Link](str2) // joins str2 with str1
[Link]( searchVal , newVal)
[Link](index)
replace method
let intro = "my name is ayush ayush ayush"
let rep1 = [Link]("ayush","mahi")
let rep2= [Link]("ayush","mahi")
[Link](rep1)
[Link](rep2)
Concate strings
Ex1.
Let str1 = “ayush “
let str2 = “fataniya”
let result = str1 + str2
[Link](result)
Ex2.
let str1 = "ayush "
let str2 = "fataniya"
let result = [Link](str2)
[Link](result)
Difference between property and method/function
Property returns value
Method does some work
Ex3. For loop (for a given array with prices of 5
items -> [250,645,300,900,50]. All items have an offer
of 10% OFF on them. Change the array to store final
price after applying offer.)
Method 1 :
let arr = [250,645,300,900,50]
for(let i=0;i<[Link];i++){
let offer = arr[i] / 10
arr[i] = arr[i]-=offer
[Link](arr[i])
}
Method 2 :
let items = [250,645,300,900,50]
let i = 0
for(let val of items){
let offer = val / 10
items[i]-=offer
[Link](`value after offer = ${items[i]}`)
i++
}
Arrays methods in JavaScript
Push() : add to end. This method is used to add one or multiple
items in array.
Ex. [Link](“toy”)
Pop() : delete from end & return. This method is used to delete
one item from the end of array.
Ex. [Link]()
toString() : converts array to string. This method is used to
convert any type of array into string. This method do not
change original array.
Ex. [Link]()
Concat() : joins multiple arrays & returns result
Example : WRITE A PROGRAM TO THAT RETURNS HOW MANUY
VOWELS IN THE STRING ENTERED BY USER BY ARGUMENT.
function count(str){
let i=0
for(const char of str){
[Link](char)
if(char === "a" || char === "e" || char === "i" || char
=== "o" || char === "u" ){
i++
}
}
[Link](i)
}
Ex1. Take a number n as input from user. Create an
array of numbers from 1 to n.
let n = prompt("enter a number : ")
let arr = []
for(let i=1;i<=n;i++){
arr[i-1] = i
}
[Link](arr)
result :
(5) [1,2,3,4,5]
0 : 1
1 : 2
2 : 3
3 : 4
4 : 5
forEach method(loop) array method
syntax :
[Link](callBackFunction)
[Link]((val)=>{
[Link](val)
})
Ex1.
const arr = ["ayush","mahi","raj","lakshit","pradhum"]
[Link]((val)=>{
[Link](val)
})
Ex2.
const arr = ["ayush","mahi","raj","lakshit","pradhum"]
[Link](function printVal(val){
[Link](val)
})
Ex3. There can be 3 parameters in forEach loop. These
are optional and given below :
[Link]
[Link]
[Link] variable itself
const arr = ["ayush","mahi","raj","lakshit","pradhum"]
[Link](function printVal(val,index,arr){
[Link]([Link](),index,arr)
})
Ex4. Write a program that returns square of number
from an existing array.
let arr = [1,2,3,4,5]
[Link]((val)=>{
[Link](`square of ${val} is ${val*val}`)
})
What is higher order function / method ?
-> it is a type of function that takes other function as a
parameter or returns any/another function as the output.
-> forEach loop is the higher order function.
-> we also can say that any function that have any callback
function is called as higher order function/method.
Array map method :
creates a new array with the results of some operation. The
value its callback returns are used to form new array.
Syntax :
[Link]( callback Function(value,index,array) )
example :
let newArr = [Link]( (val)=>{
return val*2
})
there is a difference between forEach loop and [Link]
method. forEach does not create a new array , it just
returns an [Link] [Link] method returns an output
in the form of new array. It means [Link] method
creates a new array.
Ex1.
let nums = [67,52,39]
[Link]((val)=>{
[Link](val)
})
Ex2. We can make new array that returns the values of existing
array.
let nums = [67,52,39]
let newArr = [Link]((val)=>{
return val
})
[Link](newArr)
Filter method of array :
Creates a new array of elements that give true for a
condition / [Link] it makes the copy of original
array after the filter. It doesn’t affect/change original
array.
Ex.1 All even elements (it makes new array called
newArr in below example)
arr = [1,2,3,4,5,6,7,8,9,10]
let newArr = [Link]((val)=>{
return val % 2 === 0
})
[Link](newArr)
explanation : here filter method checks the condition( return
val % 2 === 0). If condition is true than it stores the matched
value in the new array and if condition becomes false then the
value is being ignored.
Reduce method of array :
Performs some operations & reduces the array to a single value.
It returns that single value.
Ex1. It returns the sum of all elements.
arr = [1,2,3,4,5]
const output = [Link]((previous,current)=>{
return previous + current
})
[Link](output)
explanation :
here array element ‘1’ is stored in ‘previous’ parameter and
element ‘2’ is stored in current parameter. At the end it
returns final single value.
Ex2. It returns larges number from the array.
let arr = [4,6,2,10,9,3]
const output = [Link]((prev,curr)=>{
return prev > curr ? prev : curr
})
[Link](output)
window object :
the window object represents an open window in a browser. It is
browser’s object (not JavaScript’s) & is automatically created
by browser.
-> it is a global object with lots of properties & methods.
What is DOM ?
-> when a web page id loaded, the browser creates a Document
Object Model(DOM) of the page
Dom Manipulation
1) selecting with id
[Link](“myId”)
-> it returns single element of html that have unique id.
2) selecting with class
[Link](“myClass”)
-> it returns HTML collection. That can be multiple elements.
3) selecting with tag
[Link](“p”)
-> it returns all elements that have the specified tag name(ex.
P, br, h1, etc.)
4) query selector
[Link](“ idName/className/tagName ”)
-> it returns first element
[Link](“id/class/tag”)
-> it returns NodeList (it means all elements that match)
Note : when we need to access class than we need to put dot
before class name.
Ex. [Link](“.element”)
In the case of id it is same like above :
Ex. [Link](“#idName”)
We also can check/access/change the element’s properties
values. Simply we can get or set or update value of property.
1) tagName : returns tag for element nodes. Simply it returns
tag name of the specified.
2) innerText : Returns the text content of the array and all
its children.
3) InnerHTML : returns the plain text or html contents in the
element.
4) textContent : Returns textual content even for hidden
elements. Its working like innerText.
Examples :
Ex1.
let app = [Link]("h2")
[Link]([Link])
[Link] += "from ayush fataniya . . ."
[Link]([Link])
Ex2.
let all = [Link](".box")
[Link](all)
// simple way :
// all[0].innerText = "i am changed first class"
// all[1].innerText = "i am changed second class"
// fall[2].innerText = "i am changed third class"
// advanced way
let index = 1;
for(div of all){
[Link]([Link] ,`is ${index}`)
index++
}
[Link](all)
getAttribute(attr) :
we can get value of attribute of any element from the html in
the JavaScript.
Example.
let scr = [Link]("script")
[Link](scr)
let attr = [Link]("src")
[Link](attr)
output : it will return the value of src attribute of script
tag(element).
setAttribute(attr,value)
we can set/change the value of attribute of any element in
the HTML.
Example :
let para = [Link]("div")
[Link]([Link]("class","boxes"))
we can change the style of any element :
example :
let div = [Link]("div")
[Link]="seaGreen"
[Link] = "lightGray"
[Link] = "century"
INSERT ELEMENTS :
FOR THAT WE NEED TO CREATE AN ELEMENT BY FOLLOWING BELOW SYNTAX
:
Let el = [Link](“div”)
1) [Link](el) :
Adds at the end of node (inside)
Example :
let newBtn = [Link]("button")
[Link] = "click Me!"
[Link](newBtn)
let div = [Link]("div")
[Link](newBtn)
2) [Link](el)
adds at the start of node (inside)
Example :
let newBtn = [Link]("button")
[Link] = "click Me!"
[Link](newBtn)
let div = [Link]("div")
[Link](newBtn)
3) [Link](el)
Adds before the node (outside)
Example :
let newBtn = [Link]("button")
[Link] = "click Me!"
[Link](newBtn)
let div = [Link]("div")
[Link](newBtn)
4) [Link](el)
Adds after the node (outside)
Example :
let newBtn = [Link]("button")
[Link] = "click Me!"
[Link](newBtn)
let div = [Link]("div")
[Link](newBtn)
other examples
Ex1.
let nH = [Link]("h1")
[Link] = "<i>hi!my name is ayushS</i>"
[Link]("body").append(nH)
Ex2.
let a = [Link]("ul")
[Link] ="<li>hello</li> <li>gojo</li>"
let b = [Link]("ul")
[Link](a)
Delete element :
[Link]()
Removes node
Example : that can delete an element.
let nH = [Link]("h1")
[Link] = "<i>hi!my name is ayushS</i>"
[Link]("body").append(nH)
let a = [Link]("ula")
[Link]()