Course Name : Scripting Languages
Course Code: 24MCAN12E01
MCA 2nd
By: Assist. Prof. Rupinder Kaur Grewal
Course Objective and Outcomes
Course Objective: Students become proficient in JavaScript fundamentals, advanced concepts, and practical
application skills, enabling them to develop dynamic and interactive web applications.
Course Outcome:
At the end of the course, students will be able to:
CO1: Understand and apply the basic syntax and structure of JavaScript, including variables, data types, and operators
CO2: Develop and utilize control structures such as conditional statements, loops, and functions to create dynamic and
interactive web applications..
CO3: Manipulate and manage data using arrays, objects, and strings, and apply various methods for effective data handling
CO4: Relevant for software developers who work with databases, providing insights into how databases process queries and
retrieve data efficiently.
CO5: Implement advanced JavaScript concepts, including ES6 features, asynchronous programming, and error handling, to
build robust and efficient web applications
•Using the new Keyword
Introduction to the DOM (What is the DOM?, DOM
Tree Structure)
The HTML DOM (Document Object Model) is a programming interface that represents
the structure of a web page in a way that programming languages like JavaScript can
understand and manipulate.
Think of it as a tree of objects where each part of your HTML document (elements,
attributes, text) is represented as a node, allowing you to dynamically change or interact
with the content and structure of the page.
What Does the HTML DOM Look Like?
Imagine your webpage as a tree
•The document is the root.
•HTML tags like <html>, <head>, and <body> are branches.
•Attributes, text, and other elements are the leaves.
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
Why is DOM Required?
The DOM is essential because
•Dynamic Content Updates: Without reloading the page, the DOM allows content updates (e.g.,
form validation, AJAX responses).
•User Interaction: It makes your webpage interactive (e.g., responding to button clicks, form
submissions).
•Flexibility: Developers can add, modify, or remove elements and styles in real-time.
•Cross-Platform Compatibility: It provides a standard way for scripts to interact with web
documents, ensuring browser compatibility.
How the DOM Works?
The DOM connects your webpage to JavaScript, allowing you to:
•Access elements (like finding an <h1> tag).
•Modify content (like changing the text of a <p> tag).
•React to events (like a button click).
•Create or remove elements dynamically.
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
Properties of the DOM
Properties of the DOM
•Node-Based: Everything in the DOM is represented as a node (e.g., element nodes, text nodes,
attribute nodes).
•Hierarchical: The DOM has a parent-child relationship, forming a tree structure.
•Live: Changes made to the DOM using JavaScript are immediately reflected on the web page.
•Platform-Independent: It works across different platforms, browsers, and programming languages.
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
The HTML DOM Tree of Objects
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
The HTML DOM Tree of Objects
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
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
Commonly Used DOM Methods
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
JavaScript HTML DOM Elements
❮ Pre
Finding HTML Elements
Often, with JavaScript, you want to manipulate HTML elements.To do so, you have to find the
elements first. There are several ways to do this:
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
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
JavaScript HTML DOM Elements
❮ Pre
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
JavaScript HTML DOM Elements
❮ Pre
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
DOM Example
In this example, We use HTML element id to find the DOM HTML element.
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
JavaScript Events
JavaScript Events are actions or occurrences that happen in the browser. They can be
triggered by various user interactions or by the browser itself.
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
JavaScript Events
The onclick attribute in the <button> calls the myFun() function when clicked.
The myFun() function updates the <p> element with id=”gfg” by setting its innerHTML to “GeeksforGeeks”.
Initially, the <p> is empty, and its content changes dynamically on button click.
Event Types
JavaScript supports a variety of event types. Common categories include:
Mouse Events: click, dblclick, mousemove, mouseover, mouseout
Keyboard Events: keydown, keypress, keyup
Form Events: submit, change, focus, blur
Window Events: load, resize, scroll
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
JavaScript Events
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
JavaScript Events
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
JavaScript Event Handling Methods
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
Event Propagation
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
Event Delegation
www.ctuniversity.in Campus: Ludhiana
•Using the new Keyword
Form Validation
www.ctuniversity.in Campus: Ludhiana
