Object.keys(obj-name).

lenght
Const mean=(a,b,c,d)=>{
Return a+b+c+d}
Internal style in head
External style in next page
Inline style in same line
2 types of selectors (.) (#)
Class can be called multiple times
Id called only once
Center in center
Sup superscribt
Sub subscript
Alt write in exchange for image
Meter bar with value filled
Table
tr
Thead
th
Tbody
Td
name=”gender”
Select
Option
Optgroup
File
Fieldset
Legend
Required
placeholder
Autofocus
Readonly
Disabled
Check
Min
Max
Maxlength
Video
Control
Preload
Muted
Loop
Poster
Iframe
Details
Summary
Datalist
Input list=id name id datalist
©
™
®
 
 
 
background: url('download (1).jpg') no-repeat top center;
background-size: cover;
background-attachment: fixed;

Linear gradient
Text shadow
text-shadow: x-axis y-axis blur color;
Background-size:cover image on whole page
box-shadow: x-axis y-axis blur range red;
Excess paragraph
overflow-y: scroll;
 overflow-x: hidden;
Transform
Used only once
transform: translate(100px,100px);

transform: skew(0.3turn,0.3turn);
transform: skew(30deg,30deg);
transform: skew(30rad,30rad);
transform: rotate(90deg);
Size
transform: scale(1.5);
transform: scaleX(1.5);
transform: scaleY(1.5);

Position absolute
Position of parent
Left right to parent

Position relative
Position to itself
Left and right to itself

Position fixed
Position of parent
Left right to parent

clear: both;
No text on left and right
position: sticky;
top: 0px;

Always on top
Always give top
column-count: 5;
column-gap: 14px;
column-fill: auto;
First fill data in given width then remaining and adjust the column count accordingly
column-rule: 5px solid;
Border between columns
column-width: 50px;
Only works when column count is not used
h2{
column-span: all;
}

First h2 text and next things will be divided into columns

.vain:hover{
opacity: 1;
transition: 1s;
}
Change opacity after 1s

Display block: take whole line e.g h2

Display inline: in one line e.g. span
Display inline-block: in one line but space on top and bottom
Display list-item: in another line with dot
Float left: in line only for specific width extra div will appear in next line
Display flex: in one line irrespective of width

Resize:both: change width and height of text if excess text by using icon
Text-indent: give space before first word

animation-name: contain;
animation-duration: 5s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-direction: alternate-reverse;
animation-timing-function: linear;
/* or ease */
Grid
display: grid;
grid-template-columns:150px 150px 150px 150px 150px;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-column-start: 1;
grid-column-end: 3;
Join two columns from 1 grid to second grid

Min-height
max-height

<script type="text/javascript">
alert("welcome to fbise");
</script>
Option ok

confirm("login to fbise");
Option ok and cancel

console.log("fbise javascript tutorial");

For debugging purpose

document.write("<h1> fbise </h1>");

Write on website page

prompt("Enter your name","ayesha batool");

Take input from user on the same page

// for commenting in js not in html css

var name;
name="ayesha batool";
document.write(name);
alert(name);

<div id="main">
sdada
</div>
<script type="text/javascript">
var x= document.getElementById("main").innerHTML;
console.log(x);
</script>
Result only sdada
If not used innerHTML so it will result whole code of div on console

document.getElementById("main").innerHTML="<h1> welcome to fbise</h1>";

Add data to main id

<div id="main">
ayesha
</div>
<div id="main">
batool
 </div>
var x = document.getElementById("main").innerHTML;

Will give batool

<div class="main">
<h1>ayesha</h1>
</div>
<div class="main">
<h1>batool</h1>
</div>

var x = document.getElementsByClassName("main")[0].innerHTML;

Result is ayesha

var x="hello";
var y="everyone";
console.log(x+y);
Result helloeveryone
<input type="text" name="name" id="name">
<button onclick="funname()">greet</button>

function funname(){
var x=document.getElementById("name").value;
alert(x);
}

parseInt(val1)
name: <i id="whatever">whatever</i>

var res= prompt("enter your name","");

document.getElementById("whatever").innerHTML=res;
document.write(res);</script>

array
var cars = [];
cars = ["sdfdsa", "DSfsd", "sdfs"];
alert(cars[0]);
var house = new Array();
 house = ["asda", "sdas", "asda"];

for(var i=10;i<10;i++){
document.write(i+"</br>");

}
No output

while(i<5){
document.write(i++);
}

var cars = ["c1", "c2", "c3", "c4", "c5", "c6", "c7"];

cars.forEach(car);
function car(item, index, array) {
document.write(item + "\n" + index + "\n" + array + "</br>");
}

var arr=["m","S","s","w","q","a"];
alert(Array.isArray(arr));

Result true

var arr = ["m", "S", "s", "w", "q", "a"];

var flag = arr.valueOf();
alert("flag: " + flag);

var arr = ["m", "S", "s", "w", "q", "a"];

flag = arr.join("||");
Format

var arr = ["m", "S", "s", "w", "q", "a"];

var arr1 = ["d", "e", "d", "q", "f"];
var flag = arr1.concat(arr);
Combine

var arr = ["m", "S", "s", "w", "q", "a"];

var arr1 = ["d", "e", "d", "q", "f"];
 var flag = arr.indexOf("m");

var arr = ["m", "S", "s", "w", "q", "a"];

var arr1 = arr;
alert(arr1.pop());

Remove a

var arr = ["m", "S", "s", "w", "q", "a"];

var arr1 = arr;
alert(arr1.push("e"));
Result 7

var arr = ["m", "S", "s", "w", "q", "a"];

var arr1 = arr;
var flag=arr1.slice(4);
result=flag: q,a,e

// var flag=arr1.reverse();

var flag=arr1.shift();
alert("flag: " + flag);

flag=arr1.shift();
alert("flag: " + flag);
Result m,S

var flag=new Date();

flag: Tue Jun 11 2024 13:40:47 GMT+0500 (Pakistan Standard Time)

var flag=new Date();

flag=flag.getFullYear();
flag: 2024

var flag=new Date();

flag=flag.getMonth();
flag: 5

var flag=new Date();

flag=flag.getHours();
flag: 13
 var arr = ["m", "S", "s", "w", "q", "a"];
alert(typeof arr);
Object

name: <input name="whatever">whatever</input>

<button onclick="getName()">Submit</button>
<h1></h1>
function getName() {
var nam = document.getElementsByName('whatever')[0];
document.getElementsByTagName("h1")[0].innerHTML = nam.value;
}

function test() {
setInterval(function () {
alert("hello");
}, 5000)
}
Show after 5s after one press

function test() {
setTimeout(function () {
alert("hello");
}, 2000)
}
Show after delay of 2s one time

function showTime() {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var session = "AM";
console.log(d);
if (h > 12) {
h = h - 12;
}
if (h >= 12) {
session = "PM";
}
h = h < 10 ? "0" + h : h;
 m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
var time = h + ":" + m + ":" + s + ":" + session;
document.getElementsByTagName('h1')[0].innerHTML = time;
setTimeout(showTime, 1000);
}
Clock ticking

#main{
margin-top: 50px;
cursor: pointer;
transition: 2s;
background-color: aquamarine;
}

<div id="main" onmouseenter="modify()"

onmouseleave="unmodify()">fsfs</div>

function modify() {
document.getElementById("main").style.fontSize = "100px";
}
function unmodify() {
document.getElementById("main").style.fontSize = "50px";
}
Change fontsize of div

<button onclick="start()">start</button>
<button onclick="stop()">stop</button>
var my;
function start() {
my = setTimeout(
function () {
document.write("sda")
}, 5000
)
document.getElementById("main").style.fontSize = "100px";
}
function stop() {
clearTimeout(my);
 alert("time stopped");
}

<h1 id="h1"></h1>
<button onclick="stop()">stop</button>
var my = setInterval(count, 1000);
var c = 0;
function count() {
document.getElementById('h1').innerText = c;
c++;
}
function stop() {
clearInterval(my);
}
Stop watch

function test(){
var height=screen.availHeight;
alert(height);
}

function test(){
var height=Math.PI;
alert(height);
}

var x = {
firstName: 'John',
secondName: 'Bagira',
fullName: function () {
return this.firstName + ' ' + this.secondName;
}
};
alert(x.fullName());

<button onclick="this.style.display='none'">aval </button>

<button onclick="remove(this)">aval </button>
function remove(element) {
element.style.display='none';
}

<button id="btn"> click</button>

<button id="stop" onclick="stop()">Stop</button>
var i = 0;
document.getElementById("btn").addEventListener("click", counter);

function counter() {

document.getElementById("counter").innerText = i;
i++;
}

document.getElementById('btn').addEventListener('mouseenter', function
() {
document.getElementById('counter').style.background = "red";
})
document.getElementById('btn').addEventListener('mouseleave', function
() {
document.getElementById('counter').style.background = "black";
document.getElementById('counter').style.color = "white";
})
function stop() {

document.getElementById('btn').removeEventListener('click',counter);
alert('stop');
}

function printPage() {
window.print();
}

function val(elem) {
document.getElementById('res').innerText = elem.value
if (isNaN(elem.value) || elem.value.length > 10) {
alert("Please enter a valid");
 }
}

var num = document.getElementById("num");

function test() {
var data = num.value;
try {
if (isNaN(data)) {
throw "no a number";
}
else {
if (data < 5 || data > 10) {
throw "out of range";
}
}
}
catch (err) {
document.getElementById('res').innerText = err;
}
finally {
num.value = "";
}

function testing() {
var clas = test.getAttribute('class');
// document.getElementById("res").innerHTML = clas;
if (clas == 'red') {
test.setAttribute('class', 'blue');

}
else{
test.setAttribute('class', 'red');
 }
}

var password = document.getElementById('pass');

function toggle(elem) {
password.setAttribute('type', 'text');
}

const isCapsLockOn = (event) => {

return event.getModifierState('CapsLock');
};

pattern.exec(str);

const regex = new RegExp('pattern');

const result = regex.test(string);

var student={
firstName:"john",
lastName:"dsdds" ,
Age:2,
greeting: function () {
return this.firstName + " " + this.lastName;
}
};
console.log(student['firstName']);
console.log(student.greeting());
Result john

var student1=new Object();

student1.firstName = "sdf";
student1.lastName = "dss";
student1.age =32;
console.log(student1['firstName']);

Another way of above process

function Student(firstName,lastName,age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.greeting=function(){
return this.firstName+" "+this.lastName;
}
}
var obj1=new Student("AAA","DDD",2);
console.log(obj1.greeting());

var obj1=new Student("AAA","DDD",2);

students.push(obj1);
var stu=students[0];
for(var key in stu){
console.log(key+"="+stu[key]);
}

this.car = "Honda";
var garage = {
car: "suzuki",
getcar: function () {
return this.car;
},
};
console.log(garage.getcar());
var obj=garage.getcar;
console.log(obj());
var newgarage=garage.getcar.bind(garage);
console.log(newgarage());

Result suzuki honda suzuki

{
var x = 2;
}
// x CAN be used here

{
let x = 2;
}
// x can NOT be used here

With let you can not do this:

let x = "John Doe";

let x = 0;

var x = "John Doe";

var x = 0;

Example
var x = 2; // Allowed

let x = 3; // Not allowed

let x = 2; // Allowed

let x = 3; // Not allowed

let x = 2; // Allowed

var x = 3; // Not allowed

}
 Meaning: You can use the variable before it is declared:

Example

This is OK:

carName = "Volvo";

var carName;

Meaning: Using a let variable before it is declared will result in a

ReferenceError:

Example

carName = "Saab";

let carName = "Volvo";

JavaScript const variables must be assigned a value when they are declared:

Correct

const PI = 3.14159265359;

Incorrect
const PI;

PI = 3.14159265359;

Constant Arrays
You can change the elements of a constant array:

Example

// You can create a constant array:

const cars = ["Saab", "Volvo", "BMW"];

// You can change an element:

cars[0] = "Toyota";

// You can add an element:

cars.push("Audi");

But you can NOT reassign the array:

Example

const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];

//Create an Object
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}

// Create a copy
const x = person;

// Change Age in both

x.age = 10;_

const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

delete person.age;

// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};

// Create an Array
const myArray = Object.values(person);
 // Display the Array
document.getElementById("demo").innerHTML = myArray;

Example
const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";

for (let [fruit, value] of Object.entries(fruits)) {

text += fruit + ": " + value + "<br>";

// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};

// Stringify Object
let myString = JSON.stringify(person);

// Display String
document.getElementById("demo").innerHTML = myString;

Adding a Property to a Constructor

You can NOT add a new property to an object constructor:

Example

Person.nationality = "English";
 Try it Yourself »

To add a new property, you must add it to the constructor function prototype:

Example

Person.prototpe.nationality = "English";

Example

Person.changeName = function (name) {

this.lastName = name;

myMother.changeName("Doe");

TypeError: myMother.changeName is not a function

Adding a new method must be done to the constructor function prototype:

Example

Person.prototype.changeName = function (name) {

this.lastName = name;
}

myMother.changeName("Doe");

<button onclick="this.innerHTML = Date()">The time is?</button>

Example
let answer1 = "It's alright";

let answer2 = "He is called 'Johnny'";

let answer3 = 'He is called "Johnny"';

let text = `He's often called "Johnny"`;

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let length = text.length;

The backslash escape character (\) turns special characters into string
characters:

Code Result Description

\' ' Single quote

\" " Double quote

\\ \ Backslash
 Templates are strings enclosed in backticks (`This is a template string`).

Templates allow multiline strings:

Example

let text =

`The quick

brown fox

jumps over

the lazy dog`;

// x is a string

let x = "John";

// y is an object

let y = new String("John");

When using the == operator, x and y are equal:

let x = "John";

let y = new String("John");

Try it Yourself »

When using the === operator, x and y are not equal:

let x = "John";

let y = new String("John");

(x == y) true or false?

let x = new String("John");

let y = new String("John");

Try it Yourself »

(x === y) true or false?

let x = new String("John");

let y = new String("John");

 Try it Yourself »

Comparing two JavaScript objects always returns false.

let text = "HELLO WORLD";

let char = text.charAt(0);

//H result

let text = "HELLO WORLD";

let char = text.charCodeAt(0);

//72 result

Get the third letter of name:

const name = "W3Schools";

let letter = name.at(2);

Get the third letter of name:

const name = "W3Schools";

let letter = name[2];

 ● It is read only. str[0] = "A" gives no error (but does not work!)

let text = "Apple, Banana, Kiwi";

let part = text.slice(7, 13);

//result banana

If a parameter is negative, the position is counted from the end of the string:

let text = "Apple, Banana, Kiwi";

let part = text.slice(-12);

let text = "5";

let padded = text.padStart(4,"x");

//result xxx5

let text = "Please visit Microsoft!";

let newText = text.replace("Microsoft", "W3Schools");

To replace all matches, use a regular expression with a /g flag (global match):

Example
let text = "Please visit Microsoft and Microsoft!";

let newText = text.replace(/Microsoft/g, "W3Schools");

To replace case insensitive, use a regular expression with an /i flag

(insensitive):

Example

let text = "Please visit Microsoft!";

let newText = text.replace(/MICROSOFT/i, "W3Schools");

text.split(",") // Split on commas

text.split(" ") // Split on spaces
text.split("|") // Split on pipe

let text = "Please locate where 'locate' occurs!";

let index = text.indexOf("locate");
//result 7

let text = "Please locate where 'locate' occurs!";

let index = text.lastIndexOf("locate");
//result 21

let text = "The rain in SPAIN stays mainly in the plain";

text.match("ain");
//result 1 ain

let text = "The rain in SPAIN stays mainly in the plain";

text.match(/ain/g);
Result 3 ain,ain,ain
 A start position for the search can be specified:

Returns false:

let text = "Hello world, welcome to the universe.";

text.startsWith("world", 5)

Integers (numbers without a period or exponent notation) are accurate up to 15

digits.

Example

let x = 999999999999999; // x will be 999999999999999

let y = 9999999999999999; // y will be 10000000000000000

NaN is a number: typeof NaN returns number: