Click to edit Master title style
JavaScript
1
What
Click tois JavaScript
edit Master title style
JavaScript is a high-level programming language
that enables you to create dynamic and
interactive web pages. It runs in the browser and
allows you to manipulate web content, handle
user interactions, and perform various tasks on
the client side.
2 2
Roleto
Click ofedit
JavaScript
Master title style
JavaScript enhances web pages by adding
functionality that HTML and CSS alone can't provide.
It allows you to:
• Create interactive elements like buttons and forms.
• Validate user inputs and provide real-time feedback.
• Manipulate and update the content and structure of
web pages.
3 3
Click to edit Master title style
Syntax of JavaScript code Comments:
JavaScriptUsed forrefers
syntax code documentation and
to the rules and
ignored during execution.
conventions for writing JavaScript code.
JavaScript code is executed by the browser's
JavaScript engine.
JavaScript statements are executed line by
line.
JavaScript is case-sensitive and;
Key points include:
Statements: Instructions that perform actions,
ending with a semicolon (`;`).
4 4
Embedding
Click JavaScript
to edit Master title style
You can add JavaScript to your HTML documents in three
ways:
1. Inline: Directly within HTML elements using attributes
like onclick.
2. Internal: Within <script> tags in the HTML document.
3. External: By linking to an external .js file.
5 5
Variables
Click to edit Master title style
Variables store data values and are declared using var, let,
or const.
1. var: Traditional way to declare variables (less
commonly used now).
2. let: Allows variable values to be changed.
3. const: Creates variables whose values cannot be
changed.
6 6
Data
ClickTypes
to edit Master title style
JavaScript supports several data types:
• Number: Represents numeric values.
• String: Represents text.
• Boolean: Represents true or false.
• Undefined: indicates that a variable has been declared but has not been assigned
a value.
• Null: is a special value that represents the intentional absence of any object
value.
• Array: Represents a list of values.
• Object: Represents a collection of key-value pairs.
7 7
Operators
Click to edit Master title style
JavaScript supports several data types:
• Arithmetic Operators: Used for basic math
operations.
• Comparison Operators: Used to compare values.
• Logical Operators: Used for logical operations.
8 8
Functions
Click to edit Master title style
Functions are reusable blocks of code that perform a
specific task.
They are defined using:
• function keyword.
• Function expression
• Arrow function
9 9
Events
Click to edit Master title style
Events are actions that occur in the browser, such as clicks, key
presses, or page loads. You can use JavaScript to handle these
events.
JavaScript can handle events to create interactive web
experiences.
Common Events:
• click: Fired when an element is clicked.
• mouseover: Fired when the mouse is over an element.
• mouseout: Fired when the mouse leaves an element.
• keyup: Fired when a key is released.
• submit: Fired when a form is submitted.
10
10
DOM
Click (Document Object
to edit Master Model)
title style
The DOM is a representation of the HTML document structure as
a tree of objects. JavaScript can interact with the DOM to change
the content, structure, and style of web pages.
You can use JavaScript to access and modify DOM elements.
Selecting DOM Elements:
• getElementById: Selects an element by itsID.
• getElementsByClassName: Selects all elements with a
specified class.
• querySelector / querySelectorAll: Select elements using CSS
selectors.
11
11
DOM
Click (Document Object
to edit Master Model)
title style
You can use JavaScript to access and modify DOM
elements.
Manipulating DOM Elements:
• Changing Content
• Changing Style
• Creating and Appending Elements
• Removing Elements
12
12
Form
Click Validation
to edit Master title style
Why Form Validation?
• Ensures that user input is accurate and complete before
submission.
• Prevents errors, improves data quality, and enhances security.
Example: Simple Form Validation:
• HTML Form:
• JavaScript Validation:
Key Points for Form Validation:
• Check for empty fields.
• Validate length, pattern, or format of input data.
• Provide feedback to users for better user experience.
13
13
Click to edit Master title style
Thank You
14