Web Technologies Unit 3 Part 1

Web Technologies
CLIENT SIDE ESSENTIALS

Java Script Objects and Functions – JQuery – Accessing DOM Elements using Java Script
and JQuery Objects – Java Script Event Handling – XML DOM – AJAX Enabled Rich
Internet Applications with XML and JSON – Dynamic Access and Manipulation of Web
Pages using Java Script and JQuery – Web Speech API – Speech Synthesis Markup
Language.
Javascript DOM
• JavaScript can access and change all the elements of an HTML document.
The HTML DOM (Document Object Model)
• When a web page is loaded, the browser creates a Document Object Model of the page.
• The HTML DOM model is constructed as a tree of Objects
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
• Can change all the HTML elements in the page
• Can change all the HTML attributes in the page
• Can change all the CSS styles in the page
• Can remove existing HTML elements and attributes
• Can add new HTML elements and attributes
• Can react to all existing HTML events in the page
• Can create new HTML events in the page
HTML DOM is a standard object model and programming interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
Standard for how to get, change, add, or delete HTML elements
Javascript vs jQuery
• jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM
Manipulation, Event Handling, Animations, and Ajax.
• For more than 10 years, jQuery has been the most popular JavaScript library in the world.
• However, after JavaScript Version 5 (2009), most of the jQuery utilities can be solved with a few lines of standard JavaScript.
jQuery is a framework built using JavaScript capabilities. So, you can use all the functions and other capabilities available in
JavaScript.
A page can't be manipulated safely until the document is "ready."
jQuery detects this state of readiness for you.
Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript
code to execute.
Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM,
is ready.
JQuery makes a use of anonymous functions very frequently as follows −
$(document).ready(function(){
// do some stuff here
});
$("div").click(function() {
// this refers to a div DOM element
});
jQuery
Open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more
precisely the Document Object Model (DOM), and JavaScript.
Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling,
DOM animations, Ajax interactions, and cross-browser JavaScript development.
JQuery is a library to provide better client-side web page development” environment to the developer with the
help of its feature-rich library.
An example of jQuery and JavaScript to change the background color:
JavaScript
function changeColor(color) {
document.body.style.background = color;
}
Onload=“changeColor('blue');”
jQuery
$ ('body') .css ('background', '#0000FF');
code snippets are doing the same work of changing the background color. But jQuery takes less code and in this
way you can work around other examples, which shows that jQuery minimizes the code and is easier to use.
jQuery <!DOCTYPE html>
A jQuery Selector is a function which makes use of <html>
expressions to find out matching elements from a DOM <head>
based on the given criteria. <script
selectors are used to select one or more HTML elements src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jq
using jQuery. uery.min.js"></script>
<script>
Once an element is selected then we can perform various $(document).ready(function() {
operations on that selected element. $("#myid").css("background-color", "yellow");
jQuery selectors start with the dollar sign and $(".myclass").css("background-color", "red");
parentheses − $().
});
The factory function $() makes use of following three </script>
building blocks while selecting elements in a given </head>
document
Tag NameRepresents a tag name available in the DOM. <body>
For example $('p') <div>
<p class = "myclass">This is a paragraph.</p>
Tag IDRepresents a tag available with the given ID in <p id = "myid">This is second paragraph.</p>
the DOM. Eg., $('#some-id') <p>This is third paragraph.</p>
Tag ClassRepresents a tag available with the given class </div>
in the DOM. Eg. $('.some-class') </body>
</html>
With DOM elements the properties and attributes <html>
assigned to those elements are considered. <head>
Most of these attributes are available through JavaScript <script
as DOM node properties. src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jq
uery.min.js"></script>
Some of the more common properties are − <script>
className,tagName,id,href,title,rel,src $(document).ready(function() {
var title = $("em").attr("title");
Set Attribute Value $("#divid").text(title);
The attr(name, value) method can be used to set the });
named attribute onto all elements in the wrapped set </script>
using the passed value. </head>
<body>
<div>
<em title = "Bold and Brave">This is first
paragraph.</em>
<p id = "myid">This is second paragraph.</p>
<div id = "divid"></div>
</div>
</body>
</html>
<!DOCTYPE html> <html>
<html> <head>
<head> <script
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jq
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquer
uery.min.js"></script>
y.min.js"></script>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
$("em").addClass("selected"); $("#myimg").attr("src", "java.jpg");
$("#myid").addClass("highlight"); });
}); </script>
</script> </head>
<style> <body>
.selected { color:red; } <div>
.highlight { background:blue; } <img id = "myimg" src = "java.jpg" alt = "Sample
</style> image" />
</head> </div>
</body>
<body>
<em title = "Bold and Brave">This is first paragraph.</em> </html>
<p id = "myid">This is second paragraph.</p>
</body>
</html>
<html>
jQuery is a very powerful tool which provides a variety of <head>
DOM traversal methods to help us select elements in a <script
document randomly as well as in sequential method. src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.mi
n.js"></script>
<script>
Most of the DOM Traversal Methods do not modify the $(document).ready(function() {
jQuery object and they are used to filter out elements $("li").filter(".middle").addClass("selected");
from a document based on given conditions. });
</script>
filter( selector ) method can be used to filter out all <style>
elements from the set of matched elements that do not .selected { color:red; }
match the specified selector(s). </style>
</head>
<body>
find( selector ) method can be used to locate all the <div>
descendant elements of a particular type of elements <ul>
<li class = "top">list item 1</li>
add( selector ) Adds more elements, matched by the <li class = "top">list item 2</li>
given selector, to the set of matched elements. <li class = "middle">list item 3</li>
<li class = "middle">list item 4</li>
<li class = "bottom">list item 5</li>
<li class = "bottom">list item 6</li>
</ul>
</div>
</body>
</html>
<html> <head>
JQuery provides methods such as .attr(), .html(), and .val() <script
which act as getters, retrieving information from DOM src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.mi
elements n.js"></script>
<script>
$(document).ready(function() {
html( ) method gets the html contents (innerHTML) of the $("div").click(function () {
first matched element. var content = $(this).html();
.text( val ) method sets value of the object using passed $("#result").text( content );
parameter });
});
empty( ) method remove all child nodes from the set of </script>
matched elements where as the method <style>
remove( expr ) method removes all matched elements #division{ margin:10px;padding:12px; border:2px solid #666;
width:60px;}
from the DOM. </style>
</head>
after( content ) method insert content after each of the <body>
matched elements where as the method <p>Click on the square below:</p>
before( content ) method inserts content before each of <span id = "result"> </span>
the matched elements. <div id = "division" style = "background-color:green;">
This is Square!!
</div>
</body>
</html>
<html>
Ability to create dynamic web pages by using events. <head>
Events are actions that can be detected by your Web <script
Application. src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.mi
n.js"></script>
Eg., events − <script>
$(document).ready(function() {
A mouse click, A web page loading, Taking mouse over an $('div').bind('click', function( event ){
element, Submitting an HTML form, A keystroke on your alert('Welcome to Jquery!');
keyboard, etc. });
});
selector.bind( eventType[, eventData], handler)
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666;
hover( over, out ) width:60px;}
</style>
ready( fn )
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;">ONE</div>

<div class = "div" style =
"background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>

Web Technologies Unit 3 Part 1

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologies Unit 3 Part 1

Uploaded by

Copyright:

Available Formats

Web Technologies

CLIENT SIDE ESSENTIALS

<div class = "div" style = "background-color:blue;">ONE</div>

You might also like