Scribd
Upload
5 views9 pages

Lesson 3 - Client-Side Scripting, JavaScript & JQuery

The document discusses client-side scripting, focusing on JavaScript and jQuery as tools for enhancing web interactivity and user experience. It outlines the purposes of client-side scripting, key features of JavaScript, and the advantages of using jQuery for simplified coding and cross-browser compatibility. Sample code snippets illustrate how both JavaScript and jQuery can be used to create dynamic content on web pages.

Uploaded by

irangjrfernando09
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
5 views9 pages

Lesson 3 - Client-Side Scripting, JavaScript & JQuery

The document discusses client-side scripting, focusing on JavaScript and jQuery as tools for enhancing web interactivity and user experience. It outlines the purposes of client-side scripting, key features of JavaScript, and the advantages of using jQuery for simplified coding and cross-browser compatibility. Sample code snippets illustrate how both JavaScript and jQuery can be used to create dynamic content on web pages.

Uploaded by

irangjrfernando09
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

ITP110

Web Technologies
Lesson 3
Client-Side Scripting, JavaScript & jQuery
Client-Side Scripting
Client-side scripting involves scripts executed on the user's browser, enhancing interactivity and
dynamic content.

Purpose:
1. Enhances Interactivity: Allows for dynamic, interactive features like form validation and
animations within the browser.
2. Improves User Experience: Provides real-time feedback and responsive interfaces without
reloading the page.
3. Reduces Server Load: Handles tasks locally in the browser, minimizing the need for server
interactions.
4. Enables Real-Time Updates: Facilitates asynchronous data updates, allowing parts of a
webpage to refresh without a full reload.
JavaScript
JavaScript
JavaScript is a high-level, interpreted programming language used for
creating dynamic and interactive content on web pages.

Key Features:
• Interactivity: Responds to user actions (e.g., clicks, form submissions).
• Manipulation: Alters HTML and CSS in real time.
• Event Handling: Captures and responds to browser events.
• Asynchronous Operations: Supports AJAX for dynamic content
updates.
Sample JavaScript Source Code
<button id="my-button">Click me</button>
<div id="my-div">Hello, World!</div>

<script>
[Link]('my-button').addEventListener('click', function() {
[Link]('my-div').innerHTML = 'You clicked the button.';
});
</script>
jQuery
jQuery
jQuery is a fast, lightweight JavaScript library that simplifies HTML document
traversal, event handling, and animation.

Key Features:
• Simplified Syntax: Less code for common tasks.
• Cross-Browser Compatibility: Consistent behavior across different
browsers.
• AJAX Support: Simplifies asynchronous requests.
Sample jQuery Source Code
<button id="my-button">Click me</button>
<div id="my-div">Hello, World!</div>

<script>
$(document).ready(function() {
$('#my-button').click(function() {
$('#my-div').html('You clicked the button.');
});
});
</script>
JavaScript vs. jQuery
[Link]('app').addEventListener('click', function(event) {
if ([Link]('my-button')) {
[Link]('my-div').innerHTML = 'Hello world!';
}
});

$(document).ready(function() {
$('#app').on('click', '.my-button', function() {
$('#my-div').html('Hello world!');
});
});

You might also like