Scribd
Upload
13 views14 pages

Javascript & Jquery: Advanced Web Technology 09ce1503

Uploaded by

Leeroy Mugadza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views14 pages

Javascript & Jquery: Advanced Web Technology 09ce1503

Uploaded by

Leeroy Mugadza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Advanced Web Technology

09CE1503

JavaScript & JQuery

1
What is Javascript?
● JavaScript is a high-level, interpreted programming language primarily used for
adding interactivity and dynamic behavior to web pages.
● It is one of the core technologies of the World Wide Web along with HTML
(Hypertext Markup Language) and CSS (Cascading Style Sheets).
● JavaScript allows developers to create interactive elements, manipulate the content
of web pages, handle events, and communicate with servers.
● Important functions of JavaScript:-
○ Alert()
○ confirm()
○ Console.log()
○ Document. write()
○ Prompt()
What is Ajax?
● AJAX (Asynchronous JavaScript and XML) is a technique used in web development
to send and receive data from a web server asynchronously without refreshing the
entire web page.
● It allows for dynamic and interactive web applications by enabling data to be
exchanged between the client and server in the background, without disrupting the
user experience.
● Use of Ajax
○ Fetching Data from a Server
○ Form Submissions
○ Dynamic Content Loading
○ Real-Time Updates
○ Autocomplete and Suggestions
AJAX Request
An AJAX (Asynchronous JavaScript and XML) request is a technique used in web
development to send and receive data from a web server asynchronously without
refreshing the entire web page.

AJAX Request

1. Creating an XMLHttpRequest Object: In traditional AJAX, you create an


XMLHttpRequest (XHR) object to initiate the request. Modern web development
often uses the Fetch API or libraries like Axios for AJAX requests, which simplify the
process.
2. Configuring the Request: Set the request method (GET, POST, PUT, DELETE,
etc.), URL, optional headers, and payload (for POST or PUT requests) if needed.
3. Sending the Request: Send the request to the server using the send() method for
XHR or by chaining .then() for Fetch API.
AJAX Response
1. Server-Side Processing: On the server side, the server processes the AJAX
request, performs any necessary operations (e.g., fetching data from a database,
processing form submissions), and generates a response.
2. Handling the Response: Once the server processes the request, it sends back a
response to the client. The response can be in various formats such as JSON, XML,
HTML, plain text, or binary data.
3. Processing the Response: In the client-side JavaScript code, you handle the
response based on its format. For example, parsing JSON data, updating the DOM
with HTML content, or displaying text or binary data.
4. Error Handling: Handle any errors that may occur during the AJAX request, such as
network errors, server errors (e.g., HTTP status codes 4xx or 5xx), or parsing errors.
Event Handling
● Event handling in web development refers to the process of writing code that
responds to user interactions or system events that occur in a web page.
● These interactions can include mouse clicks, keyboard inputs, form submissions,
page load, window resize, and more.

Event Listener
● The primary mechanism for handling events in JavaScript is through event listeners.
● An event listener is a function that is executed in response to a specific event being
triggered.
● You can attach event listeners to HTML elements to listen for events and perform
actions accordingly.
Event Handling
Event Types

● Mouse Events: click, mouseover, mouseout, mousemove, mousedown, mouseup,


etc.
● Keyboard Events: keydown, keyup, keypress.
● Form Events: submit, change, input, focus, blur.
● Window Events: load, resize, scroll, unload.

Event Object
● When an event is triggered, an event object is created and passed to the event
handler function.
● The event object contains information about the event, such as the type of event,
target element, mouse coordinates, key codes, form data, etc.
Manipulate HTML/CSS using
JavaScript/JQuery
Manipulating HTML Elements
1. Selecting Elements: Use JavaScript or jQuery selectors to target HTML elements
based on IDs, classes, element types, attributes, etc.
Manipulate HTML/CSS using
JavaScript/JQuery
2. Adding or Removing Classes: Change the appearance or behavior of elements by
adding or removing CSS classes.
Manipulate HTML/CSS using
JavaScript/JQuery
3. Modifying Attributes: Change attributes such as src, href, value, etc., to update
element properties dynamically.
Manipulate HTML/CSS using
JavaScript/JQuery
4. Creating New Elements: Generate new HTML elements dynamically and insert them
into the document.
Manipulate HTML/CSS using
JavaScript/JQuery
Manipulating CSS Styles
1. Changing CSS Properties: Modify CSS styles of elements to update their
appearance or layout.

2. Applying CSS Classes: Use classes to apply predefined styles to elements.


Manipulate HTML/CSS using
JavaScript/JQuery
3. Animating Elements: Use jQuery to create animations and transitions for visual
effects.
Manipulate HTML/CSS using
JavaScript/JQuery
Handling Content and Events
1. Changing Inner HTML: Update the content of elements, such as text, HTML, or
input values.

2. Handling Events: Use event listeners or jQuery event methods to respond to user
interactions.

You might also like