Scribd
Upload
53 views19 pages

3 BOM Class Exception

The document discusses the Browser Object Model (BOM) and includes examples of using the setTimeout() and clearTimeout() methods to delay execution of functions in JavaScript. It also includes examples of using classes, constructor methods, class methods, Maps, Sets, and try/catch for exception handling in JavaScript.

Uploaded by

Pritika Parmar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
53 views19 pages

3 BOM Class Exception

The document discusses the Browser Object Model (BOM) and includes examples of using the setTimeout() and clearTimeout() methods to delay execution of functions in JavaScript. It also includes examples of using classes, constructor methods, class methods, Maps, Sets, and try/catch for exception handling in JavaScript.

Uploaded by

Pritika Parmar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

BOM(Browser Object Model)

A Map holds key-value pairs where the keys can be any datatype.
A Map remembers the original insertion order of the keys.

Method Description
new Map() Creates a new Map
set() Sets the value for a key in a Map
get() Gets the value for a key in a Map
delete() Removes a Map element specified by the key
has() Returns true if a key exists in a Map
forEach() Calls a function for each key/value pair in a Map
entries() Returns an iterator with the [key, value] pairs in a Map
Property Description
size Returns the number of elements in a Map

setTimeout()
<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>


<h2>The setTimeout() and clearTimeout() Methods</h2>

<p>Click "Stop" to prevent myGreeting() to execute. (You have 5 seconds)</p>

<button onclick="myStopFunction()">Stop!</button>

<h2 id="demo"></h2>

<script>
const myTimeout = setTimeout(myGreeting, 5000);

function myGreeting() {
document.getElementById("demo").innerHTML = "Happy Birthday!"
}

function myStopFunction() {
clearTimeout(myTimeout);
}
</script>
</body>
</html>

(2)

<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>


<h2>The setTimeout() Method</h2>

<p>Click the button. Wait 3 seconds for alert "Hello".</p>

<button onclick="myFunction()">Try it</button>

<script>
let timeout;

function myFunction() {
timeout = setTimeout(alertFunc, 3000);
}

function alertFunc() {
alert("Hello!");
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>


<h2>The setTimeout() Method</h2>

<p>The input field will tell you when two, four, and six seconds have passed.</p>

<input type="text" id="txt">

<script>
let x = document.getElementById("txt");
setTimeout(function(){ x.value="2 seconds" }, 2000);
setTimeout(function(){ x.value="4 seconds" }, 4000);
setTimeout(function(){ x.value="6 seconds" }, 6000);
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>


<h2>The setTimeout() Method</h2>

<p>Click the button to open a new window and close the window after three seconds (3000
milliseconds)</p>

<button onclick="openWin()">Open "myWindow"</button>

<script>
function openWin() {
const myWindow = window.open("", "", "width=200, height=100");
setTimeout(function() {myWindow.close()}, 3000);
}

</script>

</body>
</html>

Class
<!DOCTYPE html>
<html>
<body>

<p>How to use a JavaScript Class.</p>

<p id="demo"></p>

<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}

const myCar = new Car("one", 2015);


document.getElementById("demo").innerHTML =
myCar.name + " " + myCar.year;
</script>

</body>
</html>
Constructor Method
The constructor method is a special method:
 It has to have the exact name "constructor"
 It is executed automatically when a new object is created
 It is used to initialize object properties

Class Methods
Class methods are created with the same syntax as object methods.
Use the keyword class to create a class.
Always add a constructor() method.

(2)
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;

}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}

let myCar = new Car("One", 2010);


document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>
(2)

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Class Method</h2>

<p>Pass a parameter into the "age()" method.</p>

<p id="demo"></p>

<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}

let date = new Date();


let year = date.getFullYear();

let myCar = new Car("One", 2021);


document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>

</body>
</html>

Map
<!DOCTYPE html>
<html>
<body>
<p>Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

(2)

<!DOCTYPE html>
<html>
<body>
<p>Map.set():</p>

<p id="demo"></p>

<script>
const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

(3)
<!DOCTYPE html>
<html>
<body>
<p>Map.get():</p>

<p id="demo"></p>

<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>
(4)
<!DOCTYPE html>
<html>
<body>
<p>Map.size:</p>

<p id="demo"></p>

<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

(5)

<!DOCTYPE html>
<html>
<body>
<p>Deleting Map elements:</p>

<p id="demo"></p>

<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);

fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

(6)
<!DOCTYPE html>
<html>
<body>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

(7)

<!DOCTYPE html>
<html>
<body>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);

fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

SET

A JavaScript Set is a collection of unique values.


Each value can only occur once in a Set.
Method Description
new Set() Creates a new Set
add() Adds a new element to the Set
delete() Removes an element from a Set
has() Returns true if a value exists in the Set
forEach() Invokes a callback for each element in the Set
values() Returns an iterator with all the values in a Set

<!DOCTYPE html>
<html>
<body>
<p>Set from an Array:</p>

<p id="demo"></p>

<script>
const letters = new Set(["a","b","c"]);
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

(2)

<!DOCTYPE html>
<html>
<body>
<p>Add values to a Set:</p>

<p id="demo"></p>
<script>
const letters = new Set();

letters.add("a");
letters.add("b");
letters.add("c");

document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p>Add variables to a Set:</p>

<p id="demo"></p>

<script>
const letters = new Set();

const a = "a";
const b = "b";
const c = "c";
letters.add(a);
letters.add(b);
letters.add(c);

document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

(3)

<!DOCTYPE html>
<html>
<body>
<p>forEach() calls a function for each element:</p>

<p id="demo"></p>

<script>
const letters = new Set(["a","b","c"]);

let text = "";


letters.forEach (function(value) {
text += value + "<br>";
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

(5)

<!DOCTYPE html>
<html>
<body>
<p>Iterating Set values:</p>

<p id="demo"></p>

<script>
const letters = new Set(["a","b","c"]);

let text = "";


for (const x of letters.values()) {
text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

The values() Method


The values() method returns a new iterator object containing all the values in a Set:

Exception Handling- Error Handling

The try statement defines a code block to run (to try).


The catch statement defines a code block to handle any error.
The finally statement defines a code block to run regardless of the result.

The throw statement defines a custom error.

The try statement allows you to define a block of code to


be tested for errors while it is being executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in the
try block.

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

Try -Catch

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">


<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
const message = document.getElementById("p01");
message.innerHTML = "";
let x = document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>

</body>
</html>

(2)
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">


<button type="button" onclick="myFunction()">Test Input</button>

<p id="p01"></p>

<script>
function myFunction() {
const message = document.getElementById("p01");
message.innerHTML = "";
let x = document.getElementById("demo").value;
try {
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Input " + err;
}
finally {
document.getElementById("demo").value = "";
}
}
</script>

</body>
</html>

Variable Scope

Local Scope
Variables declared within a JavaScript function, become LOCAL to the function.

<!DOCTYPE html>
<html>
<body>

<p><b>carName</b> is undefined outside myFunction():</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
let carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML = typeof carName;


</script>

</body>
</html>

Global Variable Scope

<!DOCTYPE html>
<html>
<body>

<p>A GLOBAL variable can be accessed from any script or function.</p>

<p id="demo"></p>

<script>
let carName = "Volvo";
myFunction();

function myFunction() {
document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script>

</body>
</html>

(2)

<!DOCTYPE html>
<html>
<body>

<p>In HTML, global variables defined with <b>var</b>, will become window variables.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";

document.getElementById("demo").innerHTML = "I can display " + window.carName;


</script>

</body>
</html>

Object Iterable
This iterable returns never ending: 10,20,30,40,.... Everytime next() is called:

<!DOCTYPE html>
<html>
<body>
<p>Iterable:</p>

<p id="demo"></p>

<script>
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}

const n = myNumbers();
n.next();
n.next();
n.next();
n.next();

document.getElementById("demo").innerHTML = n.next().value;
</script>
</body>
</html>

(2)

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
myNumbers = {};
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}

let text = ""


for (const num of myNumbers) {
text += num +"<br>"
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

(3)

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
myNumbers = {};

myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}

let iterator = myNumbers[Symbol.iterator]();

let text = ""


while (true) {
const result = iterator.next();
if (result.done) break;
text += result.value +"<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body></html>

You might also like