Scribd
Upload
26 views51 pages

Advanced Internet Technologies Part6 and 7

The document provides an overview of JavaScript and AJAX, detailing JavaScript as a dynamic programming language used for client-side scripting on websites, including its syntax, variables, arrays, functions, and objects. It also explains AJAX as a technique for asynchronous web application development that allows for dynamic user interactions without reloading the entire page, highlighting the XMLHttpRequest object and its properties. The document includes examples of JavaScript code and AJAX functionality to illustrate these concepts.

Uploaded by

HUNG Do
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
26 views51 pages

Advanced Internet Technologies Part6 and 7

The document provides an overview of JavaScript and AJAX, detailing JavaScript as a dynamic programming language used for client-side scripting on websites, including its syntax, variables, arrays, functions, and objects. It also explains AJAX as a technique for asynchronous web application development that allows for dynamic user interactions without reloading the entire page, highlighting the XMLHttpRequest object and its properties. The document includes examples of JavaScript code and AJAX functionality to illustrate these concepts.

Uploaded by

HUNG Do
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/ 51

Part 6 and 7 – JavaScript, AJAX

Mariusz Zawadzki
JavaScript
JavaScript is a dynamic programming language that is
most commonly used as scripts on parts of websites.
These implementations allow client-side scripts to
interact with the user and create dynamic pages.
JavaScript is an interpreted programming language
with object-oriented functions.
The most common form of JavaScript is its client-side
(front-end) operation.
The script should be contained in or refer to an HTML
document. The JavaScript code is interpreted by the
web browser.
JavaScript
JavaScript code must be placed between the <script ...> </script>
tags on the web page.
Although JavaScript code can be placed anywhere on a web page, it
is recommended that it is placed inside the <head> section.
The JavaScript syntax is as follows:
JavaScript
In this example, document is an object referring to the current web
page, but the write() method is responsible for displaying any text.

The text can be enclosed in inverted commas or single apostrophes.


JavaScript
You can assign text to the <p> tag denoted by the id value using the
getElementById() method with the innerHTML property as follows:
JavaScript
JavaScript - variables

JavaScript uses the reserved keyword var or let to declare a variable.


The name of the variable must be unique.

var <variable-name>; - variable declaration

let <variable-name>; - variable declaration

var <variable-name> = <value>;

let <variable-name> = <value>;

- above variable declaration and initialisation


JavaScript
JavaScript - variables
JavaScript
JavaScript - variables

In the following example, 2 variables with assigned values are declared


and the last variable is their sum. This example shows how to display
a simple mathematical equation using the write() method.
JavaScript
JavaScript – array
The syntax for creating an array using the new keyword is as follows:
var array_name = new Array(item1, item2, ..., itemn);

This example shows two ways of creating arrays.


JavaScript
JavaScript – array of pictures
The following example shows how to store information about images in an
array
JavaScript
JavaScript – array of pictures
JavaScript
JavaScript – array methods

The following array methods exist in JavaScript:

 toString() - converts an array to a string of comma-separated array


values

 join() - converts an array to a string of array values with the selected


separator

 pop() - removes the last element from the array

 push() - adds a new element to the array (at the end)

 shift() - removes the first element from the array

 unshift() - adds a new element to the array (at the beginning)


JavaScript
JavaScript – array methods
JavaScript
JavaScript – array
JavaScript
JavaScript – functions

 In JavaScript, functions are defined using the keyword function.

 A JavaScript function can be declared using the following syntax:

function functionName(parameters){

// function body

}
JavaScript
JavaScript – functions

The function displaying the current date is shown below.


JavaScript
JavaScript – functions

A JavaScript function can be defined using the following expression:

let sum = function (x, y) {return x + y};


JavaScript
JavaScript – the Function() constructor

 A function in JavaScript can also be defined using the Function()


constructor as follows:

var myFunction = new Function(”x”, ”y”, ” return x + y ”);

 The use of myFunction is shown below .

var z = myFunction(5, 13);


JavaScript
JavaScript – the Function() constructor
JavaScript
JavaScript – primitives

A primary value is a value that has no properties or methods. A primary


data type is data that has a primary value.

There are 5 primitive data types defined in JavaScript:


 string
 number
 boolean
 null
 indefined
JavaScript
JavaScript – objects

In JavaScript, all values are objects except primitives. JavaScript objects


can contain multiple values. A JavaScript object is a collection of
named values. The values of an object are stored as name: value
pairs. The named values of JavaScript objects are called properties.
In JavaScript, objects can be defined literally (literal), using a constructor.
Below is a literal definition of the student object.
const student ={fName: ”Jeremy”, lName: ”Brown”, studentID: 45123};

JavaScript objects can contain object methods that can be executed on


objects. An object method is a property of an object that contains a
function definition.
JavaScript
JavaScript – objects

Below is an example of an object containing the method

const student = {
firstName: ”Jeremy”,
lastName: ”Brown”,
studentID: 45123,
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
};
JavaScript
JavaScript – objects

object constructor

function Student(fName, lName, studentID) {


this.fName = fName;
this.lName = lName;
this.studentID = studentID;
}

var student1 = new Student("John", "Bayle", 46122);


JavaScript
JavaScript – objects
JavaScript
JavaScript – objects
Below you can see the Student objects stored in the array.
AJAX
AJAX (Asynchronous JavaScript and XML) - a web
application development technique in which the user's
interaction with the server takes place without reloading
the entire document, asynchronously. This is intended to
allow a more dynamic interaction with the user than in the
traditional model, in which each request for new data
involves uploading the entire HTML page.
AJAX
AJAX is an acronym for asynchronous JavaScript and XML.
AJAX
Basic elements of AJAX

XMLHttpRequest - a class that allows asynchronous data


transfer; with asynchronous data retrieval, the user can
perform other activities, and it is also possible to retrieve
data from multiple locations simultaneously.
AJAX
Basic elements of AJAX

JavaScript - despite its use in the name, it can actually be any scripting
language that functions on the user side (e.g. JScript or VBScript).

XML - a markup language by which the received information is described.


In practice, however, data is often sent in a different format and is then
viewed as text. This can range from ready-made HTML code snippets
to JavaScript code snippets (JSON) or an application-specific format.
AJAX
XMLHttpRequest object

Syntax creating an object of type XMLHttpRequest:

var variable = new XMLHttpRequest();

e.g.

var xhttp = new XMLHttpRequest();


let xhttp = new XMLHttpRequest();
AJAX
XMLHttpRequest Object Methods
AJAX
XMLHttpRequest Object Properties
AJAX
XMLHttpRequest Object - example
AJAX
XMLHttpRequest Object - example

The response from the server (xhttp.responseText) can be assigned to a


variable or placed directly in the html tag.
AJAX
XMLHttpRequest Object - example

The onreadystatechange property defines the function that will be called


when the readyState property changes.
This.readyState = 4 means that the request has completed and the
response is ready.
This.status = 200 means that the request is OK.
AJAX
XMLHttpRequest Object - example

To send the request to the server, the open() and send() methods of the
XMLHttpRequest object are used.
AJAX
Server Response Properties

The responseText property returns the server response as a JavaScript


string.

The responseXML property returns the server response as an XML DOM


object.
AJAX
AJAX – responseText property
AJAX
AJAX – responseText property
AJAX
AJAX – responseText property
In the following example, the div element (id=‘div1’) will be populated with
a table containing images. The html code of the table is stored in a text
file.
AJAX
AJAX – responseText property
Since the table code is stored in a text file, use the responseText property
on the xhttp object.
AJAX
AJAX – responseText property
Below you can see the effect of using AJAX technology.
AJAX
AJAX – responseXML property

Another way to use AJAX technology to update some part(s) of an HTML


page is to use an XML file. In this case, use the responseXML property
on an object of type XMLHTTPReguest.

To read the value from the specified tag, use the


getElementsByTagName() method and the childNodes and nodeValue
properties.
AJAX
AJAX – responseXML property - example of use
AJAX
AJAX – responseXML property - example of use
AJAX
AJAX – responseXML property - example of use
AJAX
AJAX – responseXML property – next example
AJAX
AJAX – responseXML property – next example
AJAX
AJAX – responseXML property – next example
AJAX
AJAX – responseXML property – next example
AJAX
AJAX – responseXML property – next example

You might also like