[go: up one dir, main page]
Scribd
Upload
10 views16 pages

Lecture Six Web

Uploaded by

shafiqktk
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
10 views16 pages

Lecture Six Web

Uploaded by

shafiqktk
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/ 16

Web Development Advanced Diploma

Lecture 06
Iqra Akhtar
Module 2: Programming with Javascript and jQuery
Outline:
 Variables
 Conditions
 Loops
 Arrays
 Functions
 Query Selector
 DOM Manipulation
What is JavaScript?
JavaScript is a high-level, versatile programming language primarily used for creating
interactive elements on web pages. It enables developers to manipulate HTML content,
handle events, validate data, perform calculations, and more. JavaScript can run on both
client-side (in the browser) and server-side (with platforms like Node.js).
Variables :
Variables store data values that can be used later.
Example:
Conditions (if-else)
Conditional statements control code flow based on conditions.
Example:
Loops
Loops execute code repeatedly until a condition is met.
Example (for loop):
Arrays
Arrays store multiple values in a single variable.
Example:
Functions
Functions are blocks of code designed to perform a specific task.
Example:
What is jQuery Query Selector?
In jQuery, a "Query Selector" is a method used to select and manipulate
HTML elements based on various criteria like IDs, classes, element types,
attributes, and more. It simplifies selecting DOM elements and performing
actions on them (e.g., changing their content, style, or handling events)
with less code compared to plain JavaScript.
The main syntax of a jQuery query selector looks like this:
Examples of jQuery Selectors
 Select by ID
 Select by Class
 Select by Element
 Select by Attribute
Select All Elements
 Syntax: $(' * ')
 Description: Selects all elements in the DOM.
Why Use jQuery Selectors?
Simplifies DOM Manipulation: jQuery allows concise, readable code compared to
traditional JavaScript.
Cross-browser Compatibility: jQuery abstracts away browser differences.
Rich Functionality: jQuery selectors can target elements more effectively with various
options like child elements, attributes, or even advanced filters.
What is DOM Manipulation?
DOM (Document Object Model) Manipulation refers to the process of
using JavaScript or jQuery to dynamically change the content, structure, or
style of a webpage. It allows developers to modify elements, add new content,
update existing content, and respond to user interactions.
By manipulating the DOM, you can create interactive, dynamic web pages
that respond to user actions like clicks, input events, or other changes.
Key DOM Manipulation Methods:
JavaScript:
 getElementById(): Select an element by its ID.
 innerHTML: Modify the content of an element.
 classList.add(): Add a class to an element.
 createElement(): Create a new HTML element.
 appendChild(): Add a new element to the DOM.
 jQuery:
 $(selector): Select an element with jQuery.
 .text(): Set or get the text content of an element.
 .addClass(): Add a class to an element.
 .append() / .appendTo(): Add a new element to the DOM.
Thanks
Any Question?

You might also like