Column1 Column2 Column3
console.log
console.error
console.warn
console.time and console.timeEnd
console.assert(age>180,'Age can not be >180')
Column4 Column5
console.time('mytag')
……………………………
……………………………
…………………………...
console.timeEnd('mytag') Will show time taken in miliseconds
can not be >180')
Column1 Column2 Column3 Column4
String(45) number to String
let Bvar = String(true)
boolean to String
toString() function
const i=43;
console.log(i.toString()) toString() function
let Bvar = String(true)
let STR='345'
console.log(typeof STR)
let num = Number(STR)
console.log(typeof num)
Command
script
console.log()
var num1=2;
console.log(num1);
var num2=5;
console.log(num2);
var num1=2;
var num2=5;
console.log('sum of num1 and num2 is ' + (num1+num2));
var temp = `${num1} and ${num2} 'both' are "numbers"`
var string=" 'this is tutorial' "
var string=' "this is tutorial" '
var len= name.length;
console.log(`length of name is ${len}` );
\n
\t
\b
\v
var str = "this is outer block";
{
let str = "this is inner block";
console.log(str);
}
console.log(str);
const a = "this can not be changed";
console.log(a);
a = "let me try to change it";
console.log(a);
Data types
Primitive Data types
String
Number
Boolean
null
undefined
Symbol in ES6
Reference Data type
Object
Function
Array
Date
description short description
to start a script tag in html body or in html head
to see console in web browser
will print 2 in console
will print 5 in console
+' is used to concatenate strings
` is used to write a string with variables in a better
way
that can also include single quote and doube quote
altogether
use double quote when single quote to be printed
use single quote when double quote to be printed
.length
escape sequence character new line
escape sequence character horizontal tab
escape sequence character backspace
vertical tab
Output:
let is used instead of var for a variable of scope this is inner block
BLOCK this is outer block
TypeError: Assignment to constant variable
Also const should be ininitialised
But elements can be pushed in const type array,
constant but array can not be initialised again
Column2 Column3
data type of null is object Bogus data type
Column1 Column2
tut52
<div id="myid">
</div>
<script>
document.getElementById('myid').innerHTML = '<h3>
this is h3 heading</h3'
</script>
let mm = document.getElementById("contid");
console.log(mm);
let navb =
document.getElementById('navb').innerHTML;
console.log(navb);
let variable =
document.getElementsByClassName('container');
console.log(variable);
console.log(variable);
console.log(variable[0]);
console.log(variable[1]);
let sel = document.querySelector('.container');
console.log(sel);
or
let sel = document.querySelector('#cont');
console.log("selector return: ", sel);
let sel = document.querySelector('#navb>li');
console.log("selectror return ", sel);
let sel = document.querySelectorAll('#navb>li');
console.log("selectror return ", sel);
let sel = document.querySelectorAll('#navb>li');
console.log("selectror return ", sel[0]);
sel[0].innerHTML = "house"
Insert into element dynamically using JS
access an element by id
access element as HTML
access a class as array
access a selector
-> if class is accessed, it will return first occurance of
class in the document
-> if id is accessed , it will return exact id
First element of list of navb(id)
all element of satifying
replace sel[0] with "house "
used to update cart of page dynamically
used to send static information to cart
HTML COLLECTION
Home replaced with House
tut46.html
var string=" 'this is tutorial' "
var string=' "this is tutorial" '
var str= "this is a string"
position= str.indexOf('is');
console.log("position of is is" +position);
var n = str.lastIndexOf("is");
var sub_str = str.slice(3, 12);
console.log(sub_str);
console.log(str[3]);
var sub_str = str.substring(3, 12);
console.log(sub_str);
var sub_str = str.substr(3, 12);
console.log(sub_str);
str = str.replace('string', 'world');
console.log(str);
console.log(str.toUpperCase());
str1.concat(str2);
var str1 = " this text might contain white spaces at the start and end ";
console.log(str1);
var trimmed = str1.trim();
console.log(trimmed);
var poschar = str.charAt(5);
console.log(poschar);
var poscharcode = str.charCodeAt(5);
console.log(poscharcode);
let a = 'rakesh'
let b = 'ahuja'
console.log(a + " " + b)
*******************OR***************
console.log(a.concat(" ").concat(b))
*******************OR***************
let c = [a, b].join(" ");
Concatenat console.log(c)
console.log('rakesh'.charAt(0).toUpperCase() + 'rakesh'.slice(1))
use double quote when single quote to be printed
use single quote when double quote to be printed
this will return first subscript of occurance index starts from zero
this will return last subscript of occurance
Substring from a string from 3 to 12
charater at third position
from 3 to 12
Substring from a string slice and sbstring both work same
Substring from a string from 3 with length of 12
replace a substring from a string
to upper case
function to concatenate + can also be used'
removes white spaces from start and end
charater at fifth position
Gives character code of character at 5th position this will return UTF code
Concatenation
Make first letter to upper case Rakesh
tut47.html
let age = 34;
if (age > 50) console.log("you
can drink coffee")
else console.log("you can drink
milk ");
let age = 34;
if (age > 50) console.log("you
can drink coffee")
else if (age > 45)
console.log("you can drink tea ")
else if (age > 35)
console.log("you can drink cold drink
")
else console.log("you can drink
hot milk ");
const cups = 45;
switch (cups) {
case 40:
console.log("the vale of
cups is " + cups);
break;
case 45:
console.log("the vale of
cups is " + cups);
break;
default:
console.log("the vale of
cups is not aplicable");
break;
}
Conditional if-else
if else ladder
if break is not applied, then wahan ke baad ke sare cases execute ho jate hn
output:
you can drink milk
output:
you can drink milk
tut48.html
let employee = {
name: "rakesh",
empid: 94463,
job: "developer",
location: "hyderabad"
}
console.log(employee);
let emp = ["rakesh", 96643, "developer", "hyderbad"];
console.log(emp);
console.log(emp[0]);
console.log(emp[1]);
console.log(emp[2]);
console.log(emp[3]);
or
let staff = new Array("nisha", 96649, "HR", "hyderbad");
console.log(staff[0]);
console.log(staff[1]);
console.log(staff[2]);
console.log(staff[3]);
console.log(staff);
console.log(staff.length);
staff = staff.sort();
let staff1 = new Array("nisha", 96649, "zz", "hyderbad");
staff1.push("4rating");
console.log(staff1);
let employee = {
name: "rakesh",
empid: 94463,
job: "developer",
location: "hyderabad"
}
console.log(employee);
console.log(employee.job);
let emp = new Array(12);
{ let emp = new Array(11);
console.log(emp);
emp[0] = "rakesh"; emp[1] = "rakesh1"; emp[2] =
"rakesh2"; emp[3] = "rakesh3"; emp[4] = "rakesh4";
emp[5] = "rakesh5"; emp[6] = "rakesh6"; emp[7] =
"rakesh7"; emp[8] = "rakesh8"; emp[9] = "rakesh9";
emp[10] = "rakesh10";
let greettext = "good morning"
console.log(emp);
for (let index = 0; index < emp.length; index++)
{
let element = emp[index];
let string_return = names(element, greettext);
console.log(string_return);
}
function names(ele,greettext="default value if no value is
paased")
{
let string_return = greettext + " " + ele + ", " + ele + "is a
good boy"
return string_return;
}
}
a=document.all
Array.from(a).forEach(function(element){
console.log(element)
})
object
ARRAY
gives length of array
sorts the array in inself
output:
push a value to the end of array {"nisha", 96649, "zz", "hyderbad", "4rating"}
{name: "rakesh", empid: 94463, job: "developer",
location: "hyderabad"}
access value of key from object developer
make an empty array of 12 elements [empty × 12]
create an array with the help of 'a'
tut50
alert("this is a message");
let name = prompt("wt is ur name",
"GUEST");
console.log(name);
confirm
let a = prompt("what is your name")
a = confirm("Are you sure you want to
delete")
alert
prompt
confirm
will ask using prompt
this will assign a boolean to 'a'
tut51
//forin loop for object
for (yyy in emp) {
console.log("hello " + emp[yyy]);
}
// forof loop for array
for (xxx of emp) {
console.log("bye " + xxx);
}
//forrach loop to access elements of array
emp.forEach(function funname(element) {
console.log("hello friend " + element);
})
another syntax:
emp.foreach(element=>console.log(element));
for loop
while
do while
for-in loop to access elements of object
for-of loop to access elements of array
forrach loop to access elements of array
for loop
while
do while
tut53
<!-- List of events -->
<!-- click
contextmenu for righ click of mouse
contextmenu
mousehover/mouseout
mousedown/mouseup
mousemove
submit
focus
DOMContentLoaded
transistionend
-->
para.addEventListener('mouseout', function error() {
console.log("mouse outside");
}
OR
para.addEventListener('mouseout', (e) => {
console.log("out")
console.log(e)
})
tut54
Column1
setTimeout(greet, 5000);
function greet() {
console.log("helllo my dear !!!");
setTimeout(greet, 5000, "RAKESH");
function greet(name) {
console.log("helllo my dear ", name);
setTimeout(greet, 5000, "RAKESH", "good Bye");
function greet(name, msg) {
console.log("helllo my dear ", name, msg);
timeout = setTimeout(greet, 5000, "RAKESH",
"good Bye");
console.log(timeout);
setInterval(greet, 4000, "RAKESH", "good night");
let newdate1 = Date.now();
Column2 Column3
greet function will be called with delay
of 5000 ms
In settimeout write name of function without
paranthesis
greet function will be called with delay
of 5000 ms
and argument passing
Same as above and with multiple
arguments
clearTimeout(timeout_id) Here timeout_id is the id given by timeout
example:If a user is to be asked for signup
after 20 seconds using setTimeout
and he signs-up before that then
clearTimeout to be executed
Repeats the function in every 4seconds
shows a time stamp (in milisecond)
starting from 1970
tut55
Column1
console.log("This id date & Time");
let now = new Date();
console.log(now);
console.log("This id date & Time");
let dt = new Date(0);
console.log(dt);
let dt2 = new Date(5000);
console.log(dt2);
function displayTime() {
time1 = new Date();
document.getElementById('time').innerHTML =
time1;
let time2 = document.getElementById('time');
console.log(time2);
}
setInterval(displayTime, 1000);
let dt3 = new Date("2029-09-25");
console.log(dt3);
let dt4 = newdate.getDate();
let dt5 = newdate.getFullYear();
let dt6 = newdate.getMonth();
let dt7 = newdate.getDay();
let dt8 = newdate.getMinutes();
let dt9 = newdate.getHours();
console.log(dt4);
console.log(dt5);
console.log(dt6);
console.log(dt7);
console.log(dt8);
console.log(dt9);
newdate.setDate(12);
console.log(newdate);
Column2 Column3
Shows current Date and Time
Thu Jan 01 1970 05:30:00
GMT+0530 (India Standard
Time) Refrence Date
Thu Jan 01 1970 05:30:05
GMT+0530 (India Standard
Time) 5 second aage ka time from 1970 wala time
display Time using will also update time on screen as well as
setintervalTime
at console
every second
Tue Sep 25 2029 05:30:00
GMT+0530 (India Standard Get Future Date
Time)
In details
used to update the date
tut56
Column1
greet = () => {
console.log("Greeting from my tutorial");
}
greet();
setTimeout(() => {
console.log("we are in settime out");
}, 5000);
let sum= (a,b)=>{
return a+b;
}
let x = sum(4, 5);
console.log(x);
sum = (c, d) => (c + d);
let x = sum(4, 5);
console.log(x);
let half = a => a / 2;
let y = half(46);
console.log(y);
let greet = () => console.log("greetings");
greet();
const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(material => material.length));
Column2 Column3
replacement of
function greet() {
console.log("Greeting from my
tutorial");
}
Arrow Function shortcut
Another Shortcut using arrow function
// expected output: Array [8, 6, 7, 9]
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
var person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
let x = this
Here this returns global window
tut57
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
The map() method creates a new array with the results of calling a function for every array element.
Column1
const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(material => material.length));
const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(material => material[2]));
var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt)
document.getElementById("demo").innerHTML = x;
var numbers = [65, 44, 12, 4];
var newarray = numbers.map(myFunction)
function myFunction(num) {
return num * 10;
}
console.log(newarray);
var persons = [
{firstname : "Malcom", lastname: "Reynolds"},
{firstname : "Kaylee", lastname: "Frye"},
{firstname : "Jayne", lastname: "Cobb"}
];
function getFullName(item) {
var fullname = [item.firstname,item.lastname].join(" ");
return fullname;
}
function myFunction() {
document.getElementById("demo").innerHTML = persons.map(getFullName);
}
myFunction();
let contacts = new Map()
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
contacts.has('Jessie') // true
contacts.get('Hilary') // undefined
contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete('Raymond') // false
contacts.delete('Jessie') // true
console.log(contacts.size) // 1
_Objects/Map
of calling a function for every array element.
Column2
returns length of each array element
[
8,
6,
7,
9
]
return second character of each array element
"y", "e", "i", "e"
2,3,4,5
Output:
(4) [650, 440, 120, 40]
Malcom Reynolds,Kaylee Frye,Jayne Cobb
let mvar = Math;
console.log(mvar);
Math.round(3.6)
Math.pow(8,2)
Math.sqrt(36)
Math.ceil(5.7)
Math.floor(5.7)
Math.abs(5.666)
Math.abs(-5.666)
Math.sin(Math.pi/2)
Math.min(4,5,6)
Math.max(4,5,6)
Math.random()
let a = 5;
let b = 100;
let r = a + (b - a) *
Math.random();
console.log(r);
4
64
6
6
5
5.666
5.666
1 radian input
4
6
Generating a random number between 0 and 1
randomw number between 5 and 100
tut59
let jsnobj = {
name: "RAKESH",
favfood: "PANEER",
Wife: "Nisha"
}
console.log(jsnobj);
let myjsnstr = JSON.stringify(jsnobj)
console.log(myjsnstr);
myjsnstr = myjsnstr.replace("RAKESH",
"rakesh");
console.log(myjsnstr);
newJSONObj = JSON.parse(myjsnstr);
console.log(newJSONObj);
Purpose of JSON is to convert in to a STRING,
and STRING handeling is easy, then parse it back
Window Column2
let a = window.document This wil show attributes of document
console.log(a)
a = window.innerHeight
Shows height of window
console.log(a)
a = window.innerWidth
Shows width of window
console.log(a)
a=window.scrollX shows x cordinate of horizontal scroll bar
console.log(a)
a=window.scrollY
shows Y cordinate of horizontal scroll bar
console.log(a)
a=window.location
Shows location
console.log(a)
a=window.location.reload
console.log(a) Reloads the page
a=window.location.href
shows URL
console.log(a)
location.href
="https://codewithharry.com" redirects to codewithharry.com
a = window.location.toString() shows location in string form
history.go(-1) Goes back (as back button)
history.go(-2) Goes back to back (2 pages back)
scrollBy()
It will scroll the document by the specified
number of pixels
It will scroll the document to the specified
scrollTo()
coordinates
https://developer.mozilla.org/en-US/docs/Web/API/Document
DOM
a=document
console.log(a)
a=document.all
console.log(a)
a=document.body
a=document.forms
<form name="login">
<input name="email" type="email">
<input name="password" type="password">
<button type="submit">Log in</button>
</form>
<script>
var loginForm = document.forms.login; // Or document.forms['login']
loginForm.elements.email.placeholder = '[email protected]';
loginForm.elements.password.placeholder = 'password';
</script>
a=document.forms[0]
a=document.forms[1]
a=document.forms[2]
a=document.forms[3]
a=document.link
console.log(a)
a=document.link[0]
a=document.link[1]
a=document.link[2]
console.log(a)
document.images
document.script
var a = document.images.length;
var a = document.images[0].src;
var x = document.images.namedItem("myImg").src;
var x = document.images;
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + x[i].src + "<br>";
}
Description Column1
DOM
HTML collection
Shows body
will show all the forms if available (HTML collecton)
Array.from(a).foreach(element=>{con
sole.log(element)
access forms with index (if 4 forms are available in pa element.style.color='blue'}
access links using index
Access all the images
Shows number of images
Get the URL of the first <img> element (index 0) in
the document:
Get the URL of the <img> element with id="myImg"
in the document:
Loop through all <img> elements in the
document, and output the URL (src) of
each image:
Column2
For loop can be used to access HTML
collection
but foreach can not be used.
container is parent
Column1
let cont= document.queryselector(.child)
console.log(cont)
cont= document.queryselector(.container)
console.log(cont.childNodes)
console.log(cont.children)
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.childelementcount)
console.log(container.firstelementchild.nextElementsibling)
var mydiv = document.querySelector('.divcontainer')
var arr = Array.from(mydiv.children)
var arr2 = []
arr2 = (arr.filter((el, indx, array) => (el.className == 'container_')))
console.log(arr2)
Column2 Column3 Column4
cont.childNodes gives next-line and comments as well.
gives only tags
gives children in heirarchy
TEXT
H1
counts number of elelemtns of parent
Gives next sibling
convert node to array to iterate it.
Column1
function set(uname, val, expires) {
const d = new Date();
d.setTime(d.getTime() + expires * 24 * 60 * 60 * 1000)
let expirey = "expires=" + d.toUTCString();
document.cookie = `${uname}="${val}";${expirey}` }
function get(uname) {
let ename = uname + '='
const arr = document.cookie.split(";")
for (let i = 0; i < arr.length; i++) {
let element = arr[i];
if (element.charAt(0) == ' ') element = element.substr(1)
if (element.indexOf(ename) == element.lastIndexOf(ename)) return
element;
}
}
set('name', 'rakesh', 5)
set('name1', 'nisha', 7)
console.log(get('name'))
Service Worker
INDEX.js
if ('serviceWorker' in navigator) {
const webworker = new Worker('./worker.js')
webworker.postMessage('Hello Lets start worker')
webworker.onmessage = (e) =>
document.getElementById('secondDiv').innerText = e.data
}
onmessage = (event => {
if (event.data == 'Hello Lets start worker') {
let sum = 0
for (let i = 0; i <= 10000000000; i++) {
sum += i
}
postMessage(sum)
}
})
https://www.javascripttutorial.net/javascript-regular-expression/
Quantifier Description
n+ Matches any string that contains at least
one n
n* Matches any string that contains zero or
more occurrences of n
n? Matches any string that contains zero or
one occurrences of n
n{X} Matches any string that contains a
sequence of X n's
n{X,Y} Matches any string that contains a
sequence of X to Y n's
n{X,} Matches any string that contains a
sequence of at least X n's
n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning
of it
m(?=n) Matches any string that is followed by a
specific string n
m(?!n) Matches any string that is not followed by
a specific string n
/(?=.{8,})/g atleast 8 character
/(?=.[A-Z]/g var regex = /(?=.[A-Z])/g;
check atleasst one Capital letter console.log('mynamei@srakeAshrake@shahBujaakesh'.match(regex).length)
let yy = /[^a-zA-Z0-9\s]/g
zz = ('rajrja%^*(*(**()))'.replace(yy, ''))
console.log(zz) remove non -alpha numeric values
let kk = /\/\/.*/gmi
let mystr = `<h1>hello</h1>
//commentLine1
<p>this is paragraph</p>
// commentLine2
console.log(mystr.replace(kk, '')) remove // comment lines from the code
var regex = /^(?=.{8,32}$)([A-Za-z0-9]*[A-Z]
([A-Za-z0-9])*)/gim
let ee =
('123123A313abcdsad'.match(regex))
console.log(ee == '123123A313abcdsad')
var regex = new RegExp('\n')
mystr = `mynameis rakesh
how are you
what is your name`
console.log(mystr.match(regex, 'g')) search for \n
