An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON

The Document Object Model
(DOM)
An introduction to the concept
Presented By Syed Moosa kaleem

"The Document Object Model is
a platform- and language-neutral interface
that will allow programs and scripts
to dynamically access and update
the content, structure and style of documents.
The document can be further processed
and the results of that processing
can be incorporated
back into the presented page."
—World Wide Web Consortium (W3C)

"A tree of nodes"
• A document is represented as a tree of
nodes of various types.
• Many nodes have 'child' nodes (and any child has a direct
"parent").
• A child is a node. Any node may have "children."
• The "sibling of a node is a node that is on the same level or line,
neither above it or below it.

An idea to understand
<div>
<p> This is a <em>new</em> paragraph in an HTML document.
</p>
</div>
The <p>is a child of the <div>.
The <em> is a child of the <p>.

Introduction to JavaScript
Programming

What is JavaScript?
• Interpreted programming or scripting language from Netscape.
• Easier to code than the compiled languages like C and C++.
• Lightweight and most commonly used script in web pages.
• Allow client-side user to interact and create dynamic pages.
• Cross-platform and object-oriented scripting language.
• Most popular programming language in the world.
• High level, dynamic and untyped programming language.
• Standardized in the ECMAScript language specification.
• Used for shorter programs
• Takes longer time to process than compiled languages.

JavaScript Variables
• There are two types of variables: local and global. You declare local variables
using the var keyword and global variables without using the var keyword.
• With the var keyword the variable is considered local because it cannot be
accessed anywhere outside the scope of the place you declare it.
• For example, declaring a local variable inside a function, it cannot be accessed
outside of that function, which makes it local to that function.
• Declaring the same variable without the var keyword, it is accessible
throughout the entire script, not only within that function. Which makes it
global within script tag.
• Declaring a local variable
var num = 10;
• To access the value of the num variable at another point in the script, you
simply reference the variable by name Ex:
document.write("The value of num is: "+ num);

JavaScript Operators
• You need operators when performing any operation in the
JavaScript language.
• Operations include addition, subtraction, comparison, and so
on. There are four types of operators in the JavaScript
language.
• Arithmetic.
• Assignment .
• Comparison .
• Logical

Arrays
• Arrays are similar to variables, but they can hold multiple values.
• There is no limit to the amount or type of data that you can store in a
JavaScript array.
• We can access any value of any item in an array at any time after
declaring it.
• Arrays can hold any data type in the JavaScript language.
• Arrays can store only similar data in any one array.
• Storing similar values in an array
• var colors new Array("orange", ' 'blue", " red", "brown");
var shapes new Array("circle", "square", "triangle", " pentagon");
• Accessing values in an array is easy, but there is a catch. Arrays always start
with an ID of O, rather than 1.
• To access an array item you must use its ID, which refers to the item's
position in the array.

Functions
• Functions are containers for script that is only to be executed by an
event or a call to the function.
• Functions do not execute when the browser initially loads and
executes the script that is included in a web page.
• The purpose of a function is to contain script that has a task so that
you then have the ability to execute that script and run that task at
any time.
• Structuring a simple function
var num 10;
function changeVariableValue() {
num -11;
changeVariableValue();
document.write("num is: "+ num); }

Using JavaScript in HTML code
<!DOCTYPE html>
<html>
<body>
<p>A typical arithmetic operation takes two numbers and produces a new number.</p>
<p id="demo"></p>
<script>
var x = 100 + 50;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

Now it’s time for jQuery
introduction

What is jQuery?
• JavaScript library.
• Cross-browser support.
• Aimed for client-side scripting.
• Released in 2006.
• Most popular JS library today
• FOSS (Free and Open Source Software).
• www.jquery.com

jQuery features
• DOM elements: select, modify .
• Events.
• CSS handling
• Flashy effects
• Ajax
• Very easy to use!

Examples
• $(“div ") Selects all divs
• $(".myClass") Selects all items with myClass class
• $("#myld") Selects all items with myld id (should be just one!)
• $("div.myClass") Selects all divs with myClass class.
• $("div.myClass").append(“<p>Text appended</p>”); Appends
paragraph
• $("#myld").css({font-size:15px});

Test page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

jQuery Event Methods
<!DOCTYPE html>
<html>
<head>
<script>
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

jQuery - AJAX Introduction
• AJAX = Asynchronous JavaScript and XML.
• AJAX is the art of exchanging data with a server, and updating parts of
a web page - without reloading the whole page.
• Examples of applications using AJAX: Gmail, Google Maps, Youtube,
and Facebook tabs.
• jQuery provides several methods for AJAX functionality.
• With the jQuery AJAX methods, you can request text, HTML, XML, or
JSON from a remote server using both HTTP Get and HTTP Post - And
you can load the external data directly into the selected HTML
elements of your web page!

jQuery Ajax Example
<!DOCTYPE html>
<html>
<head>
<script>
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>

jQuery Effects - Animation
<!DOCTYPE html>
<html>
<head>
<script>
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position
property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

AJAX Introduction
• AJAX = Asynchronous JavaScript And XML.
• AJAX is not a programming language.
• AJAX is a developer's dream, because you can:
• Update a web page without reloading the page
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background

Real-Life Examples of AJAX
• Google Maps
- http://maps.google.com/
• Google Suggest
http :/ /www.google.com/
• Gmail
- http://gmail.com/

AJAX Basics
• AJAX uses XMLHttpRequest
• JavaScript communicates directly with the server, through
the JavaScript XMLHttpRequest object .
• With an XMLHTTPRequest, a web page can make a
request to, and get a response from a web server - without
reloading the page.

Ajax Example
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
} </script>
</body>
</html>

Cross Domain Ajax
• A common problem for developers is a browser to refuse access to a
remote resource. Usually, this happens when you execute AJAX cross
domain request using jQuery or plain XMLHttpRequest.

Introduction to JSON
• What is JSON?
• JSON stands for JavaScript Object Notation. JSON objects are used for
transferring data between server and client.
• JSON is a subset of JavaScript. ( ECMA-262 ).
• Language Independent, means it can work well with most of the modern
programming language
• Text-based, human readable data exchange format
• Light-weight. Easier to get and load the requested data quickly.
• Easy to parse.
• JSON is very stable
• official Internet media type for JSON is application/json.
• JSON Is Not XML.
• JSON is a simple, common representation of data.

JSON Syntax
• { "name":"John" }
• JSON Uses JavaScript Syntax
• Because JSON syntax is derived from JavaScript object notation, very
little extra software is needed to work with JSON within JavaScript.
• var person = { "name":"John", "age":31, "city":"New York" };

JSON Data Types
• In JSON, values must be one of the following data types:
• a string
• a number
• an object (JSON object)
• an array
• a boolean
• null

• JSON Strings
• { "name":"John" }
• JSON Numbers
• { "age":30 }
• JSON Objects
• {
"employee":{ "name":"John", "age":30, "city":"New York" }
}
• JSON Arrays
• {
"employees":[ "John", "Anna", "Peter" ]
}
• JSON Booleans
• { "sale":true }
• Accessing Object Values
• myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;

JSON.parse()
• A common use of JSON is to exchange data to/from a web server.
• When receiving data from a web server, the data is always a string.
• Parse the data with JSON.parse(), and the data becomes a JavaScript object.
• Example
• <!DOCTYPE html>
• <html>
• <body>
• <h2>Create Object from JSON String</h2>
• <p id="demo"></p>
• <script>
• var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
• document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
• </script>
• </body>
• </html>

JSON.stringify()
• A common use of JSON is to exchange data to/from a web server.
• When sending data to a web server, the data has to be a string.
• Convert a JavaScript object into a string with JSON.stringify().
• <!DOCTYPE html>
• <html>
• <body>
• <h2>Create JSON string from a JavaScript object.</h2>
• <p id="demo"></p>
• <script>
• var obj = { "name":"John", "age":30, "city":"New York"};
• var myJSON = JSON.stringify(obj);
• document.getElementById("demo").innerHTML = myJSON;
• </script>
• </body>
• </html>

Thank You!
For more info you can visit my YouTube Channel
EPICOP
https://www.youtube.com/channel/UCILksVrhIlS-pxcFqvFHM4A

An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON

More Related Content

What's hot (20)

Similar to An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON (20)

Recently uploaded (20)

An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON