2. JavaScript:
• Client-side Scripting using JavaScript
• JavaScript Language basis:
– variable, operator
– conditions, loops
– string, array
– object, event
– functions
• DOM Manipulation
• Client-side form validations
19 November 2023
WT
2
3. Introduction to JavaScript (JS):
• JavaScript is the world's most popular programming language
• JavaScript is the programming language of the Web
• JavaScript is easy to learn
• JavaScript accepts both double and single quotes
• JavaScript Can
– Change HTML Content
– Change HTML Attribute Values
– Change HTML Styles (CSS)
– Can Hide HTML Elements
– Can Show HTML Elements
19 November 2023
WT
3
4. Where to write JavaScript:
• In HTML, JS code is inserted between <script> and </script> tags
• You can place any number of scripts in an HTML document
• A JS function is a block of code, that can be executed when "called"
for
• A function can be called when an event occurs like button click
• Scripts can be placed in the <body>, or in the <head> section of an
HTML page, or in both
• Scripts can also be placed in external files (with .js extension)
• Placing scripts in external files has some advantages:
– It separates HTML and JS code
– It makes HTML and JS easier to read and maintain
– Cached JS files can speed up page loads
19 November 2023
WT
4
5. JavaScript Output:
• JavaScript can "display" data in different ways:
– Writing into an HTML element, using innerHTML
– Writing into the HTML output using document.write()
– Writing into an alert box, using window.alert()
– Writing into the browser console, using console.log()
• The document.write() method should only be used for testing
• In JS, the window object is the global scope object
• Variables, properties, and methods by default belong to the window
object
• Specifying the window keyword is optional
19 November 2023
WT
5
6. JavaScript Variables:
• There are 3 ways to declare a JavaScript variable:
– Using var, let, const
• Variables are containers for storing data (values)
JavaScript Identifiers:
• All JavaScript variables must be identified with unique names
• These unique names are called identifiers
• The general rules for constructing names for variables are:
– Names can contain letters, digits, underscores, and dollar signs
– Names must begin with a letter
– Names can also begin with $ and _
– Names are case sensitive (y and Y are different variables)
– Reserved words cannot be used as names
19 November 2023
WT
6
7. JavaScript Variables (let):
• Variables defined with let cannot be redeclared
• 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
JavaScript Variables (const):
• Variables defined with const cannot be Redeclared
• Variables defined with const cannot be Reassigned
• Variables defined with const have Block Scope
• Always use const when you declare:
– A new Array, A new Object, A new Function, A new RegExp
19 November 2023
WT
7
8. JavaScript Operators:
• JavaScript Arithmetic Operators
• JavaScript Assignment Operators
• JavaScript String Operators
• JavaScript Comparison Operators
• JavaScript Logical Operators
• JavaScript Type Operators
– Typeof- Returns the type of a variable
– Instanceof- Returns true if an object is an instance of an object
type
• JavaScript Bitwise Operators
19 November 2023
WT
8
9. JavaScript Conditional Statements:
• In JavaScript we have the following conditional statements:
– Use if to specify a block of code to be executed, if a specified
condition is true
– Use else to specify a block of code to be executed, if the same
condition is false
– Use else if to specify a new condition to test, if the first condition
is false
– Use switch to specify many alternative blocks of code to be
executed
19 November 2023
WT
9
10. JavaScript Loops:
• Loops can execute a block of code a number of times
• JavaScript supports different kinds of loops:
– for - loops through a block of code a number of times
– for/in - loops through the properties of an object
– for/of - loops through the values of an iterable object
– while - loops through a block of code while a specified condition
is true
– do/while - also loops through a block of code while a specified
condition is true
19 November 2023
WT
10
11. JavaScript Events:
• HTML events are "things" that happen to HTML elements
• When JS is used in HTML pages, JS can "react" on these events
• An HTML event can be something the browser does, or something a
user does
• Examples of HTML events:
– An HTML web page has finished loading
– An HTML input field was changed
– An HTML button was clicked
• JavaScript lets execute code when events are detected
• HTML allows event handler attributes, with JS code, to be added to
HTML elements
19 November 2023
WT
11
12. JavaScript Events:
• HTML events are "things" that happen to HTML elements
• When JavaScript is used in HTML pages, JavaScript can "react" on
these events
• Event Description
– Onchange An HTML element has been changed
– Onclick The user clicks an HTML element
– Onmouseover The user moves the mouse over an HTML element
– Onmouseout User moves the mouse away from HTML element
– Onkeydown The user pushes a keyboard key
– Onload The browser has finished loading the page
19 November 2023
WT
12
13. JavaScript HTML DOM:
• With the HTML DOM, JS 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
• The HTML DOM model is constructed as a tree of Objects
19 November 2023
WT
13
14. What is the HTML DOM:
• 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
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.
19 November 2023
WT
14
15. 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)
• getElementById is a method, while innerHTML is a property
• The most common way to access an HTML element is to use the id of
the element
• The easiest way to get the content of an element is by using
the innerHTML property
19 November 2023
WT
15
16. JavaScript HTML DOM Document:
• The HTML DOM document object is the owner of all other objects in your
web page
• The document object represents your web page
• If you want to access any element in an HTML page, you always start
with accessing the document object
• The document object can access and manipulate HTML
Finding HTML Elements
• Method Description
• document.getElementById(id) Find an element by element id
• document.getElementsByTagName Find elements by tag name
• document.getElementsByClassName Find elements by class name
19 November 2023
WT
16
17. Changing HTML Elements
• Property Description
• element.innerHTML = new html content Change the inner HTML of an
element
• element.attribute = new value Change the attribute value of an HTML
element
• element.style.property = new style Change the style of an HTML
Element
• Method Description
• element.setAttribute(attribute, value) Change the attribute value of
an HTML element
19 November 2023
WT
17
18. Adding and Deleting Elements
• Method Description
• document.createElement(element) Create an HTML element
• document.removeChild(element) Remove an HTML element
• document.appendChild(element) Add an HTML element
• document.replaceChild(new, old) Replace an HTML element
• document.write(text) Write into the HTML output stream
Finding HTML Elements
• Often, with JavaScript, you want to manipulate HTML elements
– Finding HTML elements by id
– Finding HTML elements by tag name
– Finding HTML elements by class name
– Finding HTML elements by CSS selectors
– Finding HTML elements by HTML object collections
19 November 2023
WT
18
19. Client side validation using JS
• HTML form validation can be done by JavaScript
• Data validation is the process of ensuring that user input is clean,
correct, and useful
• Typical validation tasks are:
– has the user filled in all required fields?
– has the user entered a valid date?
– has the user entered text in a numeric field?
19 November 2023
WT
19
