JavaScript Day5
JavaScript Day5
Day 5
Scope of variable
Warning
Do NOT create global variables unless you intend to.
Your global variables (or functions) can overwrite window variables (or
functions).
Any function, including the window object, can overwrite your global
variables and functions.
<!DOCTYPE html>
<html> <script>
<body> var x = this;
document.getElementById("demo").i
nnerHTML = x;
<h2>The JavaScript <i>this</i>
Keyword</h2> </script>
<p id="demo"></p>
Example
<!DOCTYPE html>
<html> <script>
<body> "use strict";
var x = this;
<h2>The JavaScript <i>this</i> document.getElementById("demo").i
Keyword</h2> nnerHTML = x;
</script>
<p>In this example, <b>this</b>
refers to the window Object:</p>
</body>
</html>
<p id="demo"></p>
Example
<!DOCTYPE html> }
<html> document.getElementById("demo").
innerHTML = i;
<body>
</script>
<h2>JavaScript let</h2>
</body>
<p id="demo"></p>
</html>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
Rules for let
let x = 2; // Allowed
let x = 3; // Not allowed
Inside function
{
let x = 4; // Allowed
let x = 5; // Not allowed
}
Example
</body>
<script>
</html>
var x = 10;
// Here x is 10
{
Example
<!DOCTYPE html> }
<html> catch (err) {
<body>
document.getElementById("demo").i
<h2>JavaScript const</h2>
nnerHTML = err;
<p>You cannot change a primitive
}
value.</p>
</script>
<p id="demo"></p>
</body>
<script>
</html>
try {
const PI = 3.141592653589793;
PI = 3.14;
Example
<!DOCTYPE html> // Add a property:
<html> car.owner = "Johnson";
<body> // Display the property:
<h2>JavaScript const</h2> document.getElementById("demo").i
nnerHTML = "Car owner is " +
<p>Declaring a constant object
car.owner;
does NOT make the objects
properties unchangeable:</p> </script>
<p id="demo"></p> </body>
<script> </html>
// Create an object:
const car = {type:"Fiat",
model:"500", color:"white"};
// Change a property:
car.color = "red";
Example
<!DOCTYPE html> catch (err) {
<html>
document.getElementById("demo").i
<body>
nnerHTML = err;
<h2>JavaScript const</h2>
}
<p>But you can NOT reassign a
</script>
constant object:</p>
</body>
<p id="demo"></p>
</html>
<script>
try {
const car = {type:"Fiat",
model:"500", color:"white"};
car = {type:"Volvo", model:"EX60",
color:"red"};
}
Example
<!DOCTYPE html> // Add an element:
<html> cars.push("Audi");
<body> // Display the Array:
<h2>JavaScript const</h2> document.getElementById("demo").in
nerHTML = cars;
<p>Declaring a constant array does
NOT make the elements </script>
unchangeble:</p>
</body>
<p id="demo"></p>
</html>
<script>
// Create an Array:
const cars = ["Saab", "Volvo",
"BMW"];
// Change an element:
cars[0] = "Toyota";
Example
<!DOCTYPE html> const cars = ["Saab", "Volvo",
"BMW"];
<html>
cars = ["Toyota", "Volvo", "Audi"];
<body>
}
catch (err) {
<h2>JavaScript const</h2>
document.getElementById("demo").
<p>You can NOT reassign a innerHTML = err;
constant array:</p>
}
</script>
<p id="demo"></p>
</body>
<script>
</html>
try {
Example
const x = 2; // Allowed allowed
const x = 3; // Not x = 3; // Not
allowed allowed
x = 3; // Not var x = 3; // Not
allowed allowed
var x = 3; // Not let x = 3; // Not
allowed allowed
let x = 3; // Not }
allowed
Inside function
{
const x = 2; // Allowed
const x = 3; // Not
Without arrow function
<p id="demo"></p>
</body>
</html>
<script>
With arrow function
<!DOCTYPE html> var hello;
<html>
<body> hello = () => {
return "Hello World!";
<h2>JavaScript Arrow Function</h2> }
<p id="demo"></p>
</body>
</html>
<script>
JavaScript Classes
Data members-variables
Member function- methods,functions
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
}
Example
<script>
</body>
class Car {
</html>
constructor(name, year) {
The Constructor Method
<!DOCTYPE html> a = 5;
<html> b = 6;
<body> c = a + b;
console.log(c);
</body>
<p>With the debugger turned on, the
code below should stop executing </html>
Major Browsers' Debugging Tools
Normally, you activate debugging in your From the menu, select "Developer Tools".
browser with F12, and select "Console" in Finally, select "Console".
the debugger menu.
Opera
Otherwise follow these steps:
Open the browser.
Chrome
From the menu, select "Developer".
Open the browser.
From "Developer", select "Developer tools".
From the menu, select "More tools".
Finally, select "Console".
From tools, choose "Developer tools".
Safari
Finally, select Console.
afari, Preferences, Advanced in the main
FirefoxGo to S
menu.
Open the browser. Check "Enable Show Develop menu in menu
From the menu, select "Web Developer". bar".
Finally, select "Web Console". When the new option "Develop" appears in
Edge the menu:
</body>
<p id="demo"></p>
</html>
<script>
var x = "Hello";
var x = 5;
Example
<!DOCTYPE html> </body>
<html> </html>
<body> //NaN
<p id="demo">My first
paragraph.</p>
<script>
document.getElementById(
"demo").innerHTML =
"Hello" - "Dolly";
</script>
Comparison
<!DOCTYPE html> //x = (1 == "1"); // true
<html> //x = (1 == true); // true
<body> //x = (0 === ""); // false
<p>Remove the comment //x = (1 === "1"); // false
(at the beginning of each //x = (1 === true); // false
line) to test each
case:</p> document.getElementById(
"demo").innerHTML = x;
<p id="demo"></p>
</script>
<script>
</body>
var x;
</html>
//x = (0 == ""); // true
Examples
<!DOCTYPE html> }
<html> document.getElementById("dem
o").innerHTML = myFunction(4);
<body>
<p>Setting a default value to a </script>
function parameter.</p> </body>
<p id="demo"></p> </html>
<script>
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
return x * y;
Example switch
<!DOCTYPE html> break;
<html><body><p id="demo"></p> case 4:
<script> day = "Thursday";
var day; break;
switch (new Date().getDay()) { case 5:
case 0: day = "Friday";
day = "Sunday"; break;
break; case 6:
case 1: day = "Saturday";
day = "Monday"; break;
break; default:
case 2: day = "unknown";
day = "Tuesday"; }
break; document.getElementById("demo").innerHTML
= "Today is " + day;
case 3:
</script></body></html>
day = "Wednesday";
Keywords in javascript
abstract arguments await* boolean
break byte case catch
char class* const continue
debugger default delete do
double else enum* eval
export* extends* false final
finally float for function
goto if implements import*
in instanceof int interface
let* long native new
null package private protected
public return short static
super* switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield
Example
<!DOCTYPE html>
<html> <script>
<body> function myFunction() {
var fruits = ["Banana", "Orange", "Apple",
"Mango"];
<h2>JavaScript Array.isArray()</h2>
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
<p>Click the button to check if "fruits" is an
array.</p> }
</script>
<button onclick="myFunction()">Try
it</button>
</body>
</html>
<p id="demo"></p>
Example
<h2>JavaScript Array.forEach()</h2>
function myFunction(value) {
txt = txt + value + "<br>";
<p>Calls a function once for each array
element.</p> }
</script>
<p id="demo"></p>
</body>
<script> </html>
var txt = "";
Example
<h2>JavaScript Array.map()</h2>
function myFunction(value, index, array) {
return value * 2;
<p>Creates a new array by performing a
function on each array element.</p> }
</script>
<p id="demo"></p>
</body>
<script> </html>
var numbers1 = [45, 4, 9, 16, 25];
Example
<h2>JavaScript Array.filter()</h2>
function myFunction(value, index, array) {
return value > 18;
<p>Creates a new array with all array
elements that passes a test.</p> }
</script>
<p id="demo"></p>
</body>
<script> </html>
var numbers = [45, 4, 9, 16, 25];
Example
<h2>JavaScript Array.reduce()</h2>
function myFunction(total, value, index, array)
{
<p>This example finds the sum of all
return total + value;
numbers in an array:</p>
}
</script>
<p id="demo"></p>
</body>
<script>
</html>
var numbers = [45, 4, 9, 16, 25];
Example
<h2>JavaScript Array.reduceRight()</h2>
function myFunction(total, value) {
return total + value;
<p>This example finds the sum of all
numbers in an array:</p> }
</script>
<p id="demo"></p>
</body>
<script> </html>
var numbers = [45, 4, 9, 16, 25];
Example
<h2>JavaScript Array.indexOf()</h2>
<p>The indexOf() does not work in
Internet Explorer 8 and earlier
versions.</p>
<p id="demo"></p>
</body>
<script> </html>
var fruits = ["Apple", "Orange", "Apple",
"Mango"];
Example
<script> </body>
</body>
<script>
</html>
// Create an object:
Example
<html><head> "language", {
<meta content="text/html; value: "EN",
charset=iso-8859-2" http-
writable : true,
equiv="Content-Type">
enumerable : true,
</head><body>
configurable : true
<h2>JavaScript defineProperty()</h2>
});
<p id="demo"></p>
// Enumerate Properties
<script>
txt = "";
// Create an Object:
for (var x in person) {
var person = {
txt += person[x] + "<br>";
firstName: "John",
}
lastName : "Doe",
document.getElementById("demo").inn
language : "NO",
erHTML = txt;
};// Change a Property:
</script></body></html>
Object.defineProperty(person,
Example
<script>
</body>
var numbers = [4, 9, 16, 25, 29];
</html>
var first = numbers.findIndex(myFunction);