SlideShare a Scribd company logo
Programming Web Pages with JavaScript
Objectives
Explore the Document Object Model
Access elements and properties using
JavaScript
Create statements
Store and access data in variables
2HTML5 and CSS3 – Illustrated, 2nd
Edition
Objectives (continued)
Create a function
Add an event listener
Change CSS with JavaScript
Create an if statement
3HTML5 and CSS3 – Illustrated, 2nd
Edition
Explore the Document
Object Model
JavaScript: the most widely used
programming language for modern
web browsers
Document Object Model (DOM):
standardized way of referring to parts
of a web page
 Creates a hierarchical arrangement
known as a DOM tree
 Each part of HTML document
represented by a node
4HTML5 and CSS3 – Illustrated, 2nd
Edition
Explore the Document
Object Model (continued)
Object: HTML element in DOM
 Specific object must be identified in order
to manipulate it using JavaScript
Property: piece of a standard set of
information associated with DOM
node
 Attributes are considered their own
nodes and are associated with their own
properties
5HTML5 and CSS3 – Illustrated, 2nd
Edition
Explore the Document
Object Model (continued)
Method: action that can be performed
for a node
 Method names are followed by
parentheses between which you specify
information specific to the method
 querySelector() method lets you
access any HTML element by specifying
a CSS selector
• Example:
querySelector("#nameinput") selects
the element with the id value nameinput
6HTML5 and CSS3 – Illustrated, 2nd
Edition
Explore the Document
Object Model (continued)
A DOM Tree
7HTML5 and CSS3 – Illustrated, 2nd
Edition
Access Elements and
Properties Using JavaScript
querySelector() method lets you
reference objects and properties
 querySelector() is a child of the
Document object
To use a method, specify its parent
object, a period, and method name:
document.querySelector()
8HTML5 and CSS3 – Illustrated, 2nd
Edition
Access Elements and Properties
Using JavaScript (continued)
Specify CSS selector within
parentheses of method to reference
an object
 To select the aside element:
document.querySelector("aside")
To access a property, add dot and
property name after method:
document.querySelector("aside").textContent
9HTML5 and CSS3 – Illustrated, 2nd
Edition
Access Elements and Properties
Using JavaScript (continued)
Console: part of developer tools in
modern browsers; can be used to
enter test code and view error
messages related to JavaScript
The browser console in Chrome:
10HTML5 and CSS3 – Illustrated, 2nd
Edition
Create Statements
Statement: a JavaScript instruction
that performs an action:
Assignment operator (=): Part of a
statement that lets you assign a new
property value
 Code on left of = accesses property
 Code on right of = specifies new value
• often enclosed in quotes
11HTML5 and CSS3 – Illustrated, 2nd
Edition
Create Statements
(continued)
Every JavaScript statement ends with
a semicolon (;)
Statements created in external
JavaScript file
 Text file with .js extension
 Referenced within HTML document using
script element
12HTML5 and CSS3 – Illustrated, 2nd
Edition
Create Statements
(continued)
Statements added to file:
script element in HTML document:
13HTML5 and CSS3 – Illustrated, 2nd
Edition
Store and Access Data in
Variables
Variables: Stored values you can
access with a name you specify
 Can store many types of information
 Create with var keyword followed by
name, equal sign, and value:
14HTML5 and CSS3 – Illustrated, 2nd
Edition
Store and Access Data in
Variables (continued)
Shorter statements easier to work with
 Common to store object references as
variables, then reference in other
statements using variable names:
15HTML5 and CSS3 – Illustrated, 2nd
Edition
Create a Function
Function: Group of one or more
statements with an assigned name
 Statements in function referenced as a
single unit
 Create with function keyword, followed
by name of function and ()
 Statements enclosed in a single pair of
braces {}
16HTML5 and CSS3 – Illustrated, 2nd
Edition
Create a Function
(continued)
Function call: reference to a function
name elsewhere in code to indicate
when function should be executed
Creating and calling a function:
17HTML5 and CSS3 – Illustrated, 2nd
Edition
Add an Event Listener
Events: actions commonly performed
on a web page
 Can write JavaScript that responds to
events
Commonly used events:
18HTML5 and CSS3 – Illustrated, 2nd
Edition
Add an Event Listener
(continued)
Event listener: a statement that
specifies an object, an event, and
function to call in response to event
19HTML5 and CSS3 – Illustrated, 2nd
Edition
Change CSS with JavaScript
Can use JavaScript to change
element's CSS in response to event
 Create style rule using class selector,
then use JavaScript to add/remove class
values from element based on events:
20HTML5 and CSS3 – Illustrated, 2nd
Edition
Create an if Statement
operators: symbols to compare or
change values of multiple objects or
properties
 assignment operator (=)
 comparison operators: determine
whether 2 values same or different
if statement: compares 2 values; if
result is true, statements are executed
21HTML5 and CSS3 – Illustrated, 2nd
Edition
Create an if Statement
(continued)
Syntax for creating an if statement:
Operators:
22HTML5 and CSS3 – Illustrated, 2nd
Edition
Summary
DOM is a standardized way of
referring to parts of a web page
The querySelector() method lets
you reference objects and properties
Script code is created by combining
DOM objects, properties, and
methods
A statement is a JavaScript instruction
that performs an action
23HTML5 and CSS3 – Illustrated, 2nd
Edition
Summary (continued)
The assignment operator lets you
assign a new property value
Variables are stored values you can
access with a name you specify
A function is a group of one or more
statements with an assigned name
A function must be called for its
statements to be executed
24HTML5 and CSS3 – Illustrated, 2nd
Edition
Summary (continued)
An event listener is a statement that
specifies an object, an event, and
function to call in response to event
You can use JavaScript to change the
CSS for an element in response to an
event
An if statement compares 2 values
and executes statements only if the
comparison result is true
25HTML5 and CSS3 – Illustrated, 2nd
Edition

More Related Content

PPT
Laying Out Elements with CSS
PPT
Formatting text with CSS
PPT
Working with Links
PPT
Structure Web Content
PPT
Testing and Improving Performance
PPT
Creating Visual Effects and Animation
PPT
Getting Started with your Website
PPT
Working with Images
Laying Out Elements with CSS
Formatting text with CSS
Working with Links
Structure Web Content
Testing and Improving Performance
Creating Visual Effects and Animation
Getting Started with your Website
Working with Images

What's hot (20)

PPT
Getting Started with CSS
PPT
Optimizing a website for search engines
PPT
Working with Video and Audio
PPT
Creating and Processing Web Forms
PPT
Social media and your website
PPTX
C# Crystal Reports
PPTX
Crystal report
PPTX
Crystal report generation in visual studio 2010
PPT
Introduction To Flex
PPT
M02 un12 p01
PPTX
Presentation on HTML
PPT
Dreamweaver Ch03
PDF
Quickstart Microsoft access 2013
PDF
Content Architecture
PPTX
New Features of HTML 5.1 to Create More Flexible Web Experiences
PDF
Syncronizing with outlook
PPTX
MarcEdit for Illinois Library Association conference 2011
PPT
Css 2010
Getting Started with CSS
Optimizing a website for search engines
Working with Video and Audio
Creating and Processing Web Forms
Social media and your website
C# Crystal Reports
Crystal report
Crystal report generation in visual studio 2010
Introduction To Flex
M02 un12 p01
Presentation on HTML
Dreamweaver Ch03
Quickstart Microsoft access 2013
Content Architecture
New Features of HTML 5.1 to Create More Flexible Web Experiences
Syncronizing with outlook
MarcEdit for Illinois Library Association conference 2011
Css 2010
Ad

Similar to Javascript programming using the document object model (20)

PPTX
Introduction to JavaScript, functions, DOM
PPTX
Internet protocol second unit IIPPT.pptx
PPTX
Javascript note for engineering notes.pptx
PPTX
Learning About JavaScript (…and its little buddy, JQuery!)
PPTX
ppt- u 2.pptx
PPT
9781305078444 ppt ch05
PPTX
Javascript for web Programming creating and embedding with html
PPT
lecture 6 javascript event and event handling.ppt
PPTX
Javascript
PDF
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
PPTX
Web technologies-course 07.pptx
PPTX
Java script
PPTX
javaScript and jQuery
PPTX
04-JS.pptx
PPTX
04-JS.pptx
PPTX
04-JS.pptx
PDF
JAVA SCRIPT
PPTX
Introduction to JavaScript DOM and User Input.pptx
PPTX
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
PPTX
WTA-MODULE-4.pptx
Introduction to JavaScript, functions, DOM
Internet protocol second unit IIPPT.pptx
Javascript note for engineering notes.pptx
Learning About JavaScript (…and its little buddy, JQuery!)
ppt- u 2.pptx
9781305078444 ppt ch05
Javascript for web Programming creating and embedding with html
lecture 6 javascript event and event handling.ppt
Javascript
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
Web technologies-course 07.pptx
Java script
javaScript and jQuery
04-JS.pptx
04-JS.pptx
04-JS.pptx
JAVA SCRIPT
Introduction to JavaScript DOM and User Input.pptx
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
WTA-MODULE-4.pptx
Ad

More from Nicole Ryan (17)

PPT
Inheritance
PPT
Python Dictionaries and Sets
PPT
Organizing Content with Lists and Tables
PPTX
Chapter 12 Lecture: GUI Programming, Multithreading, and Animation
PPTX
Chapter 11: Object Oriented Programming Part 2
PPTX
Intro to Programming: Modularity
PPT
Programming Logic and Design: Arrays
PPTX
Programming Logic and Design: Working with Data
PPT
Setting up your development environment
PPTX
Dynamic vs static
PPT
Working with Databases and MySQL
PPT
Using arrays with PHP for forms and storing information
PPTX
Tables and forms accessibility and microformats
PPTX
Creating and styling forms
PPTX
Creating and styling tables
PPT
Files and Directories in PHP
PPT
Handling User Input and Processing Form Data
Inheritance
Python Dictionaries and Sets
Organizing Content with Lists and Tables
Chapter 12 Lecture: GUI Programming, Multithreading, and Animation
Chapter 11: Object Oriented Programming Part 2
Intro to Programming: Modularity
Programming Logic and Design: Arrays
Programming Logic and Design: Working with Data
Setting up your development environment
Dynamic vs static
Working with Databases and MySQL
Using arrays with PHP for forms and storing information
Tables and forms accessibility and microformats
Creating and styling forms
Creating and styling tables
Files and Directories in PHP
Handling User Input and Processing Form Data

Recently uploaded (20)

PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
Pre independence Education in Inndia.pdf
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PPTX
Cell Types and Its function , kingdom of life
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PDF
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
PDF
Microbial disease of the cardiovascular and lymphatic systems
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PPTX
Lesson notes of climatology university.
PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
Complications of Minimal Access Surgery at WLH
PPTX
Pharma ospi slides which help in ospi learning
PDF
Anesthesia in Laparoscopic Surgery in India
PDF
VCE English Exam - Section C Student Revision Booklet
STATICS OF THE RIGID BODIES Hibbelers.pdf
Pre independence Education in Inndia.pdf
Supply Chain Operations Speaking Notes -ICLT Program
102 student loan defaulters named and shamed – Is someone you know on the list?
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
Cell Types and Its function , kingdom of life
Module 4: Burden of Disease Tutorial Slides S2 2025
Pharmacology of Heart Failure /Pharmacotherapy of CHF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
Microbial disease of the cardiovascular and lymphatic systems
Final Presentation General Medicine 03-08-2024.pptx
Lesson notes of climatology university.
O7-L3 Supply Chain Operations - ICLT Program
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Complications of Minimal Access Surgery at WLH
Pharma ospi slides which help in ospi learning
Anesthesia in Laparoscopic Surgery in India
VCE English Exam - Section C Student Revision Booklet

Javascript programming using the document object model

  • 1. Programming Web Pages with JavaScript
  • 2. Objectives Explore the Document Object Model Access elements and properties using JavaScript Create statements Store and access data in variables 2HTML5 and CSS3 – Illustrated, 2nd Edition
  • 3. Objectives (continued) Create a function Add an event listener Change CSS with JavaScript Create an if statement 3HTML5 and CSS3 – Illustrated, 2nd Edition
  • 4. Explore the Document Object Model JavaScript: the most widely used programming language for modern web browsers Document Object Model (DOM): standardized way of referring to parts of a web page  Creates a hierarchical arrangement known as a DOM tree  Each part of HTML document represented by a node 4HTML5 and CSS3 – Illustrated, 2nd Edition
  • 5. Explore the Document Object Model (continued) Object: HTML element in DOM  Specific object must be identified in order to manipulate it using JavaScript Property: piece of a standard set of information associated with DOM node  Attributes are considered their own nodes and are associated with their own properties 5HTML5 and CSS3 – Illustrated, 2nd Edition
  • 6. Explore the Document Object Model (continued) Method: action that can be performed for a node  Method names are followed by parentheses between which you specify information specific to the method  querySelector() method lets you access any HTML element by specifying a CSS selector • Example: querySelector("#nameinput") selects the element with the id value nameinput 6HTML5 and CSS3 – Illustrated, 2nd Edition
  • 7. Explore the Document Object Model (continued) A DOM Tree 7HTML5 and CSS3 – Illustrated, 2nd Edition
  • 8. Access Elements and Properties Using JavaScript querySelector() method lets you reference objects and properties  querySelector() is a child of the Document object To use a method, specify its parent object, a period, and method name: document.querySelector() 8HTML5 and CSS3 – Illustrated, 2nd Edition
  • 9. Access Elements and Properties Using JavaScript (continued) Specify CSS selector within parentheses of method to reference an object  To select the aside element: document.querySelector("aside") To access a property, add dot and property name after method: document.querySelector("aside").textContent 9HTML5 and CSS3 – Illustrated, 2nd Edition
  • 10. Access Elements and Properties Using JavaScript (continued) Console: part of developer tools in modern browsers; can be used to enter test code and view error messages related to JavaScript The browser console in Chrome: 10HTML5 and CSS3 – Illustrated, 2nd Edition
  • 11. Create Statements Statement: a JavaScript instruction that performs an action: Assignment operator (=): Part of a statement that lets you assign a new property value  Code on left of = accesses property  Code on right of = specifies new value • often enclosed in quotes 11HTML5 and CSS3 – Illustrated, 2nd Edition
  • 12. Create Statements (continued) Every JavaScript statement ends with a semicolon (;) Statements created in external JavaScript file  Text file with .js extension  Referenced within HTML document using script element 12HTML5 and CSS3 – Illustrated, 2nd Edition
  • 13. Create Statements (continued) Statements added to file: script element in HTML document: 13HTML5 and CSS3 – Illustrated, 2nd Edition
  • 14. Store and Access Data in Variables Variables: Stored values you can access with a name you specify  Can store many types of information  Create with var keyword followed by name, equal sign, and value: 14HTML5 and CSS3 – Illustrated, 2nd Edition
  • 15. Store and Access Data in Variables (continued) Shorter statements easier to work with  Common to store object references as variables, then reference in other statements using variable names: 15HTML5 and CSS3 – Illustrated, 2nd Edition
  • 16. Create a Function Function: Group of one or more statements with an assigned name  Statements in function referenced as a single unit  Create with function keyword, followed by name of function and ()  Statements enclosed in a single pair of braces {} 16HTML5 and CSS3 – Illustrated, 2nd Edition
  • 17. Create a Function (continued) Function call: reference to a function name elsewhere in code to indicate when function should be executed Creating and calling a function: 17HTML5 and CSS3 – Illustrated, 2nd Edition
  • 18. Add an Event Listener Events: actions commonly performed on a web page  Can write JavaScript that responds to events Commonly used events: 18HTML5 and CSS3 – Illustrated, 2nd Edition
  • 19. Add an Event Listener (continued) Event listener: a statement that specifies an object, an event, and function to call in response to event 19HTML5 and CSS3 – Illustrated, 2nd Edition
  • 20. Change CSS with JavaScript Can use JavaScript to change element's CSS in response to event  Create style rule using class selector, then use JavaScript to add/remove class values from element based on events: 20HTML5 and CSS3 – Illustrated, 2nd Edition
  • 21. Create an if Statement operators: symbols to compare or change values of multiple objects or properties  assignment operator (=)  comparison operators: determine whether 2 values same or different if statement: compares 2 values; if result is true, statements are executed 21HTML5 and CSS3 – Illustrated, 2nd Edition
  • 22. Create an if Statement (continued) Syntax for creating an if statement: Operators: 22HTML5 and CSS3 – Illustrated, 2nd Edition
  • 23. Summary DOM is a standardized way of referring to parts of a web page The querySelector() method lets you reference objects and properties Script code is created by combining DOM objects, properties, and methods A statement is a JavaScript instruction that performs an action 23HTML5 and CSS3 – Illustrated, 2nd Edition
  • 24. Summary (continued) The assignment operator lets you assign a new property value Variables are stored values you can access with a name you specify A function is a group of one or more statements with an assigned name A function must be called for its statements to be executed 24HTML5 and CSS3 – Illustrated, 2nd Edition
  • 25. Summary (continued) An event listener is a statement that specifies an object, an event, and function to call in response to event You can use JavaScript to change the CSS for an element in response to an event An if statement compares 2 values and executes statements only if the comparison result is true 25HTML5 and CSS3 – Illustrated, 2nd Edition