Scribd
Upload
30 views84 pages

Int222 JS Primerunit1

The document discusses JavaScript including why it is called JavaScript, what JavaScript is used for, code editors for JavaScript, JavaScript syntax, variables and data types in JavaScript, operators in JavaScript, and loops in JavaScript. It provides details on each of these topics in JavaScript.

Uploaded by

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

Int222 JS Primerunit1

The document discusses JavaScript including why it is called JavaScript, what JavaScript is used for, code editors for JavaScript, JavaScript syntax, variables and data types in JavaScript, operators in JavaScript, and loops in JavaScript. It provides details on each of these topics in JavaScript.

Uploaded by

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

INT222

Advance Web Development

BY : DIVYA THAKUR
UID:28300
JAVASCRIPT PRIMER
Why is it called JavaScript?
• When JavaScript was created, it initially had another name: “LiveScript”.
• But Java was very popular at that time, so it was decided that positioning a new
language as a “younger brother” of Java would help.
• But as it evolved, JavaScript became a fully independent language with its own
specification called ECMAScript, and now it has no relation to Java at all.
JAVASCRIPT
• JavaScript was initially created to “make web pages alive”.
• The programs in this language are called scripts. They can be written right in a web
page’s HTML and run automatically as the page loads.
• Scripts are provided and executed as plain text. They don’t need special preparation or
compilation to run.
• In this aspect, JavaScript is very different from another language called Java.
• Today, JavaScript can execute not only in the browser, but also on the server, or actually
on any device that has a special program called the JavaScript engine.
• The browser has an embedded engine sometimes called a “JavaScript virtual machine”.
CODE EDITORS
• There are two main types of code editors: IDEs and lightweight editorS :
IDE
• The term IDE (Integrated Development Environment) refers to a powerful editor
with many features that usually operates on a “whole project.” As the name
suggests, it’s not just an editor, but a full-scale “development environment.”

• An IDE loads the project (which can be many files), allows navigation between
files, provides autocompletion based on the whole project (not just the open
file), and integrates with a version management system (like git), a testing
environment, and other “project-level” stuff.

• Consider the following options:


• Visual Studio Code (cross-platform, free).
• WebStorm (cross-platform, paid).
Lightweight editors

• “Lightweight editors” are not as powerful as IDEs, but they’re fast, elegant
and simple.
• They are mainly used to open and edit a file instantly.
• The main difference between a “lightweight editor” and an “IDE” is that an
IDE works on a project-level, so it loads much more data on start, analyzes the
project structure if needed and so on. A lightweight editor is much faster if we
need only one file.
• There are many options, for instance:
• Sublime Text (cross-platform, shareware).
• Notepad++ (Windows, free).
• Vim and Emacs .
JAVASCRIPT SYNTAX
• JavaScript programs can be inserted almost anywhere into an HTML document (HEAD &
BODY)using the <script> tag.
• The type and language attributes are not required.
• A script in an external file can be inserted with <script src="path/to/script.js"></script>.
• EXAMPLE:
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>
VARIABLES
• Most of the time, a JavaScript application needs to work with information. Here
are two examples:
• An online shop – the information might include goods being sold and a shopping cart.
• A chat application – the information might include users, messages, and much more.
• Variables are used to store this information.
• A variable is a “named storage” for data. We can use variables to store goodies,
visitors, and other data.
• To create a variable in JavaScript, use the let keyword.
• The statement below creates (in other words: declares) a variable with the name
“message”:
let message;
Constants:
• To declare a constant (unchanging) variable, use const instead of let:
const myBirthday = '18.04.1982';
• Variables declared using const are called “constants”. They cannot be reassigned.
An attempt to do so would cause an error:
const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // error, can't reassign the constant!
• When a programmer is sure that a variable will never change, they can declare it
with const to guarantee and clearly communicate that fact to everyone.
SCOPE
• Scope determines the accessibility (visibility) of variables.
• Before ES6 (2015), JavaScript had only Global Scope and Function
Scope(local scope)
• ES6 introduced two important new JavaScript keywords: let and const.
• These two keywords provide Block Scope in JavaScript.
• JavaScript has 3 types of scope:
• Block scope
• Function scope
• Global scope
• 1. Block Scope:
• Variables declared inside a { } block cannot be accessed from outside the
block:
• Variables declared with the var keyword can NOT have block scope.
• Variables declared inside a { } block can be accessed from outside the block.

EXAMPLE: {
var x = 2;
}
// x CAN be used here
• 2. Local Scope
• Variables declared within a JavaScript function, become LOCAL to the function
, i.e it can only be accessed within a function.
• Example:
let a = "hello";
function greet()
{
let b = "World"
console.log(a + b);
}
greet();
console.log(a + b); // error

• In the above program, variable a is a global variable and variable b is a local


variable. The variable b can be accessed only inside the function greet. Hence,
when we try to access variable b outside of the function, an error occurs.
• let is Block Scoped:
• The let keyword is block-scoped (variable can be accessed only in the
immediate block).
• Example:
// global variable
let a = 'Hello';
function greet() {
let b = 'World'; // local variable
console.log(a + ' ' + b);
if (b == 'World') {
let c = 'hello'; // block-scoped variable
console.log(a + ' ' + b + ' ' + c);
}
console.log(a + ' ' + b + ' ' + c); // variable c cannot be accessed here
}
greet();
• In the above program, variable
• a is a global variable. It can be accessed anywhere in the program.
• b is a local variable. It can be accessed only inside the function greet.
• c is a block-scoped variable. It can be accessed only inside the if statement block.
• Hence, in the above program, the first two console.log() work without any
issue.
• However, we are trying to access the block-scoped variable c outside of
the block in the third console.log(). This will throw an error.
• 3. GLOBAL SCOPE
• A variable declared at the top of a program or outside of a
function is considered a global scope variable.
• Example:
let a = "hello";
function greet () {
console.log(a);
}
greet(); // hello
• In the above program, variable a is declared at the top of a program and is a
global variable. It means the variable a can be used anywhere in the program.
• Note: It is a good practice to avoid using global variables because
the value of a global variable can change in different areas in the
program. It can introduce unknown results in the program.
• In JavaScript, a variable can also be used without declaring it. If a
variable is used without declaring it, that variable automatically
becomes a global variable.
JAVASCRIPT DATATYPES
• A value in JavaScript is always of a certain type. For example, a string or a
number.
• There are eight basic data types in JavaScript.
• We can put any type in a variable. For example, a variable can at one moment be a
string and then store a number:
let message = "hello";
message = 123456;
• Programming languages that allow such things, such as JavaScript, are called
“dynamically typed”, meaning that there exist data types, but variables are not
bound to any of them.
Seven primitive data types:
• number for numbers of any kind: integer or floating-point, integers are
limited by ±(253-1).
• bigint for integer numbers of arbitrary length.
• string for strings. A string may have zero or more characters, there’s no
separate single-character type.
• boolean for true/false.
• null for unknown values – a standalone type that has a single value null.
• undefined for unassigned values – a standalone type that has a single
value undefined.
• symbol for unique identifiers.
And one non-primitive data type:
• object for more complex data structures.
OPERATORS
• An operand – is what operators are applied to. For instance, in the multiplication
of 5 * 2 there are two operands: the left operand is 5 and the right operand is 2.
Sometimes, people call these “arguments” instead of “operands”.
• ASSISGNMENT OPERATORS:
LOOPS
• Loops are a way to repeat the same code multiple times.
The “while” loop:
The purpose of a while loop is to execute a statement or code block
repeatedly as long as an expression is true. Once the expression becomes false, the
loop terminates.
The while loop has the following syntax:
while (condition) {CODE}
The “do…while” loop
• The condition check can be moved below the loop body using the do..while syntax.
• The loop will first execute the body, then check the condition, and, while it’s
truthy, execute it again and again.
• Syntax:
do {
// loop body
} while (condition);
The “for” loop
• The for loop is more complex, but it’s also the most commonly used loop.
for (begin; condition; step) {
// ... loop body ...
}
Functions
• Functions are the main “building blocks” of the program. They allow the code to
be called many times without repetition.
• We’ve already seen examples of built-in functions, like alert(message),
prompt(message, default) and confirm(question). But we can create functions of
our own as well.
Function Declaration
• To create a function we can use a function declaration.
function showMessage() {
alert( 'Hello everyone!' );
}
• The function keyword goes first, then goes the name of the function, then a list of
parameters between the parentheses (comma-separated, empty in the example )
and finally the code of the function, also named “the function body”, between
curly braces.
JavaScript Arrow Function
• Arrow function is one of the features introduced in the ES6 version of
JavaScript. It allows you to create functions in a cleaner way compared to
regular functions. For example,
• This function
// function expression
let x = function(x, y) {
return x * y;
}
can be written as
// using arrow functions
let x = (x, y) => x * y;

using an arrow function.


• Arrow Function Syntax
The syntax of the arrow function is:
let myFunction = (arg1, arg2, ...argN) => {
statement(s)
}
• Here,myFunction is the name of the function arg1, arg2, ...argN are
the function argumentsstatement(s) is the function body
• If the body has single statement or expression, you can write arrow
function as:

let myFunction = (arg1, arg2, ...argN) => expression


Java Script Objects

• As we know from the chapter Data types, there are eight data types in JavaScript.
Seven of them are called “primitive”, because their values contain only a single
thing (be it a string or a number or whatever).
• In contrast, objects are used to store keyed collections of various data and more
complex entities. In JavaScript, objects penetrate almost every aspect of the
language. So we must understand them first before going in-depth anywhere else.
• An object can be created with figure brackets {…} with an optional list of
properties. A property is a “key: value” pair, where key is a string (also called a
“property name”), and value can be anything.
• We can imagine an object as a cabinet with signed files. Every piece of data is
stored in its file by the key. It’s easy to find a file by its name or add/remove a file.
• An empty object (“empty cabinet”) can be created using one of two syntaxes:
let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax
• Usually, the figure brackets {...} are used. That declaration is called an object
literal.
• JavaScript object is a non-primitive data-type that allows you to store multiple
collections of data.
• Note: If you are familiar with other programming languages, JavaScript objects
are a bit different. You do not need to create classes in order to create objects.
• Example:
// object
const student = {
firstName: 'ram',
class: 10
};
Here, student is an object that stores values such as strings and numbers.
• JavaScript Object Declaration
• The syntax to declare an object is:
const object_name = {
key1: value1,
key2: value2 }
• Accessing Object Properties:
• You can access the value of a property by using its key.
1. Using dot Notation
• Here's the syntax of the dot notation.
objectName.key
2. Using bracket Notation
• Here is the syntax of the bracket notation.
objectName["propertyName"]
JavaScript Methods and this Keyword
• In JavaScript, objects can also contain functions. For example,
// object containing method
const person = {
name: 'John',
greet: function() { console.log('hello'); }
};
• In the above example, a person object has two keys (name and greet), which have
a string value and a function value, respectively.
• Hence basically, the JavaScript method is an object property that has a function
value.
Accessing Object Methods
• You can access an object method using a dot notation. The syntax is: objectName.methodKey()
• You can access property by calling an objectName and a key. You can access a method by calling an objectName
and a key for that method along with (). For example,
// accessing method and property
const person = {
name: 'John',
greet: function() { console.log('hello'); }
};
// accessing property
person.name; // John
// accessing method
person.greet(); // hello

Here, the greet method is accessed as person.greet() instead of person.greet.


If you try to access the method with only person.greet, it will give you a function definition.
JavaScript this Keyword
• To access a property of an object from within a method of the same
object, you need to use the this keyword. Let's consider an example.
const person = {
name: 'John',
age: 30,

// accessing name property by using this.name


greet: function() { console.log('The name is' + ' ' + this.name); }
};
person.greet();
• In the above example, a person object is created. It contains
properties (name and age) and a method greet.
• In the method greet, while accessing a property of an object, this
keyword is used.
• In order to access the properties of an object, this keyword is used
following by . and key.
• Note: In JavaScript, this keyword when used with the object's
method refers to the object. this is bound to an object.
Literals and properties
• We can immediately put some properties into {...} as “key: value” pairs:
let user = { // an object
name: "John", // by key "name" store value "John"
age: 30 // by key "age" store value 30
};
• A property has a key (also known as “name” or “identifier”) before the
colon ":" and a value to the right of it.
• In the user object, there are two properties:
• The first property has the name "name" and the value "John".
• The second one has the name "age" and the value 30.
• We can add, remove and read files from it at any time.
• Property values are accessible using the dot notation:
// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30
• The value can be of any type. Let’s add a boolean one:
user.isAdmin = true;
• To remove a property, we can use the delete operator:
delete user.age;
• We can also use multiword property names, but then they must be quoted:
let user = {
name: "John",
age: 30,
"likes birds": true // multiword property name must be quoted
};
• The last property in the list may end with a comma:
let user = {
name: "John",
age: 30,
}
• That is called a “trailing” or “hanging” comma. Makes it easier to
add/remove/move around properties, because all lines become alike.
JavaScript Constructor Function
• In JavaScript, a constructor function is used to create objects. For
example,
/ constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// create an object
const person = new Person();
• In the above example, function Person() is an object constructor function.
• To create an object from a constructor function, we use the new keyword.
• JavaScript this Keyword
• In JavaScript, when this keyword is used in a constructor function, this
refers to the object when the object is created. For example,
// constructor function
function Person () {
this.name = 'John',
}
// create object
const person1 = new Person();
// access properties
console.log(person1.name); // John
• Hence, when an object accesses the properties, it can directly access the
property as person1.name.
Create Objects: Constructor Function Vs Object Literal
• Object Literal is generally used to create a single object. The constructor function is
useful if you want to create multiple objects. For example,
// using object literal
let person = {
name: 'Sam'
}
// using constructor function
function Person () {
this.name = 'Sam'
}
let person1 = new Person();
let person2 = new Person();
Working With Arrays
• An array is an object that can store multiple values at once. For
example,
const words = ['hello', 'world', 'welcome'];
• Here, words is an array. The array is storing 3 values.
• Create an Array:
• You can create an array using two ways:
1. Using an array literal
• The easiest way to create an array is by using an array literal []. For
example,
const array1 = ["eat", "sleep"];
Events
• An HTML event can be something the browser does, or something a user does.
• Here are some examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
• Often, when events happen, you may want to do something.
• JavaScript lets you execute code when events are detected.
Common HTML Events
• Here is a list of some common HTML events:
Java Script Function Example :
<html>
<head> <title>Add function</title> </head>

<body onload="add()"> // Execute a JavaScript immediately after a page has been loaded
<script>
var i=Number(prompt("Enter 1st variable"));
var j=Number(prompt("enter 2nd varialbe"));
function add()
{
document.write("the sum is ",(i+j));
}
</script>
</body>
</html>
Javascript Event Example:

<html>
<input type="button" value="Hover" id="btn"
onmouseover="this.style.background='red'; this.style.color='yellow'"
onmouseout="this.style.background='cadetblue';
this.style.color='white'"/>
</html>
Javascript Example 2 :
<html> <input type="button" value="Click me" id="btn"
onmouseover="changeColorOnMouseOver(this)"
onmouseout="changeColorOnMouseOut(this)"/>
<script type="text/javascript">
function changeColorOnMouseOver(x)
{
x.style.background='red';
x.style.color='yellow';
}
function changeColorOnMouseOut(x)
{
x.style.background='cadetblue';
x.style.color='white';
}
</script>
</html>
2. Using the new keyword
• You can also create an array using JavaScript's new keyword.
const array2 = new Array("eat", "sleep");
• In both of the above examples, we have created an array having two
elements.
Note: It is recommended to use array literal to create an array.
• Here are more examples of arrays:
// empty array
const myList = [ ];
// array of numbers
const numberArray = [ 2, 4, 6, 8];
// array of strings
const stringArray = [ 'eat', 'work', 'sleep'];
// array with mixed data types
const newData = ['work', 'exercise', 1, true];
• You can also store arrays, functions and other objects inside an array. For example,
const newData = [
{'task1': 'exercise'},
[1, 2 ,3],
function hello() { console.log('hello')}
];

• Access Elements of an Array


• You can access elements of an array using indices (0, 1, 2 …). For example,
const myArray = ['h', 'e', 'l', 'l', 'o'];
// first element
console.log(myArray[0]); // "h"
// second element
console.log(myArray[1]); // "e"
• Add an Element to an Array
• You can use the built-in method push() and unshift() to add elements to an array.
• The push() method adds an element at the end of the array. For example,
let dailyActivities = ['eat', 'sleep'];
// add an element at the end
dailyActivities.push('exercise');
console.log(dailyActivities); // ['eat', 'sleep', 'exercise']

• The unshift() method adds an element at the beginning of the array. For example,
let dailyActivities = ['eat', 'sleep'];
//add an element at the start
dailyActivities.unshift('work');
console.log(dailyActivities); // ['work', 'eat', 'sleep']
• Change the Elements of an Array
• You can also add elements or change the elements by accessing the
index value.
let dailyActivities = [ 'eat', 'sleep'];
// this will add the new element 'exercise' at the 2 index
dailyActivities[2] = 'exercise';
console.log(dailyActivities); // ['eat', 'sleep', 'exercise']
• Remove an Element from an Array
• You can use the pop() method to remove the last element from an array.
The pop() method also returns the returned value. For example,
let dailyActivities = ['work', 'eat', 'sleep', 'exercise'];
// remove the last element
dailyActivities.pop();
console.log(dailyActivities); // ['work', 'eat', 'sleep']
• If you need to remove the first element, you can use the shift() method.
• The shift() method removes the first element and also returns the removed
element. For example,
let dailyActivities = ['work', 'eat', 'sleep'];
// remove the first element
dailyActivities.shift();
console.log(dailyActivities); // ['eat', 'sleep']

Array length
You can find the length of an element (the number of elements in an array) using the
length property. For example,

const dailyActivities = [ 'eat', 'sleep'];


// this gives the total number of elements in an array
console.log(dailyActivities.length); // 2
Array Methods
JavaScript Multidimensional Array
• A multidimensional array is an array that contains another array. For example,
// multidimensional array
const data = [[1, 2, 3], [1, 3, 4], [4, 5, 6]];
Create a Multidimensional Array:
Example 1
let studentsData = [['Jack', 24], ['Sara', 23], ['Peter', 24]];
Example 2
let student1 = ['Jack', 24];
let student2 = ['Sara', 23];
let student3 = ['Peter', 24];
// multidimensional array
let studentsData = [student1, student2, student3];
Error Handling
• Types of Errors
• In programming, there can be two types of errors in the code:
• Syntax Error: Error in the syntax. For example, if you write consol.log('your
result');, the above program throws a syntax error. The spelling of console is a
mistake in the above code.
• Runtime Error: This type of error occurs during the execution of the program.
For example,
calling an invalid function or a variable.
• These errors that occur during runtime are called exceptions. Now, let's see
how you can handle these exceptions.
JavaScript try...catch Statement

• The try...catch statement is used to handle the exceptions. Its syntax


is:
try { // body of try }
catch(error) { // body of catch }
• The main code is inside the try block. While executing the try block, if any error
occurs, it goes to the catch block. The catch block handles the errors as per the
catch statements.
• If no error occurs, the code inside the try block is executed and the catch block is
skipped.
Example 1: Display Undeclared Variable
• // program to show try...catch in a program
const numerator= 100, denominator = 'a';
try {
console.log(numerator/denominator);
// forgot to define variable a
console.log(a); }
catch(error) {
console.log('An error caught');
console.log('Error message: ' + error);
}
JavaScript try...catch...finally Statement
• You can also use the try...catch...finally statement to handle exceptions. The
finally block executes both when the code runs successfully or if an error occurs.
• The syntax of try...catch...finally block is:
try { // try_statements}
catch(error) { // catch_statements }
finally() { // codes that gets executed anyway}

Note: You need to use catch or finally statement after try statement. Otherwise,
the program will throw an error Uncaught SyntaxError: Missing catch or finally
after try.
Example 2: try...catch...finally Example
const numerator= 100, denominator = 'a';
try {
console.log(numerator/denominator);
console.log(a);
}
catch(error) {
console.log('An error caught');
console.log('Error message: ' + error);
}
finally {
console.log('Finally will execute every time');
}
JavaScript throw Statement
• In JavaScript, the throw statement handles user-defined exceptions. For example,
if a certain number is divided by 0, and if you need to consider Infinity as an
exception, you can use the throw statement to handle that exception.
• The syntax of throw statement is:
throw expression;
Here, expression specifies the value of the exception.
For example,
const number = 5;
throw number/0; // generate an exception when divided by 0
JavaScript throw with try...catch
• The syntax of try...catch...throw is:
try { // body of try
throw exception; }
catch(error) { // body of catch }
Note: When the throw statement is executed, it exits out of the block
and goes to the catch block. And the code below the throw statement
is not executed.
Example 1: try...catch...throw Example
const number = 40;
try {
if(number > 50) {
console.log('Success');
}
else {
throw new Error('The number is low'); // user-defined throw statement
}
// if throw executes, the below code does not execute
console.log('hello');
}
catch(error) {
console.log('An error caught');
console.log('Error message: ' + error);
}
Java Script DOM:
• With the HTML DOM, JavaScript can access and change all the elements of
an HTML document.
• When a web page is loaded, the browser creates a Document Object Model
of the page.
• With the object model, JavaScript gets all the power it needs to create
dynamic HTML:
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page
Changing HTML Content

• The easiest way to modify the content of an HTML element is by


using the innerHTML property.
• To change the content of an HTML element, use this syntax:
• document.getElementById(id).innerHTML = new HTML
• Example
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Changing the Value of an Attribute
• To change the value of an HTML attribute, use this syntax:
• document.getElementById(id).attribute = new value
• Example
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "img.jpg";
</script>
</body>
</html>
Form Validation
• <html> <head>
• <script>
• function validateForm() {
• let x = document.forms["myForm"]["fname"].value;
• if (x == "") {
• alert("Name must be filled out");
• return false; } }
• </script>
• </head>
• <body>
• <h2>JavaScript Validation</h2>
• <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
• Name: <input type="text" name="fname">
• <input type="submit" value="Submit">
• </form> </body></html>
Automatic HTML Form Validation

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
• The HTML DOM is a standard object model and programming
interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
• In other words: The HTML DOM is a standard for how to get, change,
add, or delete HTML elements.
Dom Object
• When an HTML document is loaded into a web browser, it becomes a
document object.
• The document object is the root node of the HTML document.
• The document object is a property of the window object.
• The document object is accessed with:
• window.document or document
Example: The url property
• <!DOCTYPE html>
• <html>
• <body>
• <h1>Window Document Object</h1>
• <h2>The URL Property</h2>
• <p id="p1"></p>
• <script>
• let url = window.document.URL;
• document.getElementById("p1").innerHTML = url;
• </script>
• </body>
• </html>
JavaScript - HTML DOM Methods
• HTML DOM methods are actions you can perform (on HTML Elements).
• HTML DOM properties are values (of HTML Elements) that you can set
or change.
• The DOM Programming Interface:
• The HTML DOM can be accessed with JavaScript (and with other programming
languages).
• In the DOM, all HTML elements are defined as objects.
• The programming interface is the properties and methods of each object.
• A property is a value that you can get or set (like changing the content of an
HTML element).
• A method is an action you can do (like add or deleting an HTML element).
• <html><body>
• <p id="id"></p>
• <script>
• document.getElementById("id").innerHTML = "This is a paragraph";
• </script></body></html>

• In the example above, getElementById is a method, while innerHTML


is a property.
• The getElementById Method:
• The most common way to access an HTML element is to use the id of the
element.
• In the example above the getElementById method used id="demo" to find the
element.
• The innerHTML Property
• The easiest way to get the content of an element is by using the innerHTML
property.
• The innerHTML property is useful for getting or replacing the content of HTML
elements.
Event Handler Using DOM
<html>
<input type="button" value="Hover" id="btn"
onmouseover="changeColorOnMouseOver()"
onmouseout="changeColorOnMouseOut()"/>
<script type="text/javascript">
function changeColorOnMouseOver()
{
document.getElementById("btn").style.background='red';
document.getElementById("btn").style.color='yellow';
}
function changeColorOnMouseOut()
{
document.getElementById("btn").style.background='cadetblue';
document.getElementById("btn").style.color='white';}</script></html>
JavaScript HTML DOM EventListener
• The addEventListener() method:

• The addEventListener() method attaches an event handler to the specified element.


• The addEventListener() method attaches an event handler to an element without
overwriting existing event handlers.
• You can add many event handlers to one element.
• You can add many event handlers of the same type to one element, i.e two "click" events.
• You can add event listeners to any DOM object not only HTML elements. i.e the window
object.
• The addEventListener() method makes it easier to control how the event reacts to bubbling.
• When using the addEventListener() method, the JavaScript is separated from the HTML
markup, for better readability and allows you to add event listeners even when you do not
control the HTML markup.
• You can easily remove an event listener by using the removeEventListener() method.
Syntax:
• element.addEventListener(event, function);

• The first parameter is the type of the event (like "click" or "mousedown" or any
other HTML DOM Event.)
• The second parameter is the function we want to call when the event occurs.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to execute a function when a user
clicks on a button.</p>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
</body>
</html>
Example :

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate());
function displayDate() {
document.getElementById("demo").innerHTML = Date();}
</script>
</body>
</html>
Add Many Event Handlers to the Same Element
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to add many events on the same button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p> <script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>";
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>";
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>";
} </script> </body> </html>
Using the removeEventListener() method
• The Javascript removeEventListener() is an inbuilt function that is
used to remove removes an event handler that was previously added
using the addEventListener() function from the element.
• element.removeEventListener(event, listener)

You might also like