Scribd
Upload
38 views42 pages

Client-Side Programming: Javascript & Ajax: Ganjil 2014/2015

ajax

Uploaded by

pegasus19m
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
38 views42 pages

Client-Side Programming: Javascript & Ajax: Ganjil 2014/2015

ajax

Uploaded by

pegasus19m
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/ 42

GANJIL 2014/2015

CLIENT-SIDE
PROGRAMMING:
JavaScript & AJAX

Week # 06 E-Business & Web-Based Programming

FTIK, Universitas Bakrie, 2014. GPK

Topics
Client-side Programming (technology)
JavaScript
Asynchronous JavaScript and XML (AJAX).

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

JavaScript
JavaScript isTHEscripting language of the Web.
JavaScript is used in billions of Web pages to add functionality,
validate forms, communicate with the server, and much more.
JavaScript is the most popular scripting language in the world.
It is the standard language of the web, and widely used in
servers, desktops, and mobile phones.

FTIK, Universitas Bakrie, 2013.


2014. GPK

GANJIL 2014/2015
2013/2014

JavaScript
A scripting language is a lightweight programming language
that supports the writing of scripts.
JavaScript was designed to add interactivity to HTML pages.
JavaScript is programming code that can be inserted into
HTML pages to be executed by web browser.
Many HTML designers are not programmers, but JavaScript is a
language with a very simple syntax. Almost anyone can put
small "snippets" of JavaScript code into HTML pages.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

JavaScript
What kinds of tasks can programmers expect them to
perform?
Manage input and output.
Perform arithmetic operations on numbers.
Perform operations on characters and strings of characters.
Make decisions based on comparing values.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

JavaScript
Definitions of some essential programming language terms

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

JavaScript
Definitions of some essential programming language terms

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

JavaScript
Definitions of some essential programming language terms

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

JavaScript
These terms define the building blocks of a JavaScript script,
starting with tokens:
tokens (identifiers, keywords, literals, operators) ! expressions !
statements ! script

Individual tokens form expressions.


Expressions form statements.
A script consists of a collection of statements.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

10

JavaScript
A JavaScript is surrounded
by a <script> and </script>
tag. The <script> and </
script> tells where the
JavaScript starts and ends.
JavaScript is typically used
to manipulate HTML
elements.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

11

JavaScript
Some examples have type="text/javascript" in the <script> tag.

JavaScript is the default scripting language in all modern


browsers and in HTML5.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

12

JavaScript
Where to put?
A JavaScript can be put in the <body> and in the <head>
section of an HTML page.
Scripts can also be placed in external files. External files
often contain code to be used by several different web
pages. External JavaScript files have the file extension .js.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

13

JavaScript
JavaScript Statement
Instructions in JavaScript are conveyed through a series of
statements. Statements (the calls to document.write()) are built
from expressions consisting of tokens.
JavaScript is a free-format language. This means that
statements can appear anywhere on a line. As long as you
terminate each statement with a semicolon, you can even put
multiple statements on a single line.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

14

JavaScript
JavaScript Statement
JavaScript statements are "commands" to the browser. The
purpose of the statements is to tell the browser what to do.

These blocks begin and end with curly brackets:

{
statements go here;
}
Example:{
}
FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

15

JavaScript
JavaScript Statement block
JavaScript statements can be grouped together in blocks.
A good example of statements grouped together in blocks,
are JavaScriptfunctions.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

16

JavaScript

Example of Function (block)

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

17

JavaScript
Because a JavaScript interpreter ignores comments when it
executes statements, comments can occur on separate lines
or on the same line as a statement.
Comments started with a double slash cannot be placed at
the beginning of a statement because JavaScript has no way
of knowing where the comment ends and the code begins.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

18

Data Types
JavaScript supports Data types: String, Number, Boolean (data
that have one or two values: true or false), Array, Object, Null &
Undefined (Undefinedis the value of a variable with no value;
Variables can be emptied by setting the value tonull).
JavaScript stores all numbers in a floating point format.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

19

Data Types
Data Declarations and Variables.
Variables must be declared before they are
used elsewhere in a program.
Data declaration assigns an identifier (a
variable name) to a data container and
associates the identifier with a particular
location in your computers memory.
The data declaration process, whether explicit
or implicit, is required to enable a programming
environment to manage its memory resources
and perform appropriate operations.
FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

20

Data Types
Data Declarations and Variables.
In JavaScript, without the keyword var, we can
declare variables and their identifiers
Example (implicit): is an implicit data
declaration for the variable identifier pi.
pi=3.14159;

So, to avoid potential problems, it is best to be


diligent about explicitly declaring all variables,
using the var keyword, before you use them.
FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

21

JavaScript
Some properties and methods of the document object

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

22

JavaScript
JavaScript can
react to events:
The JavaScript is
executed by the
web browser.
In this case, the
browser will
access the HTML
element with
id=test", and
replace its
content
(innerHTML) with
"My First
Example".

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

23

JavaScript
JavaScript
can react
to events:
(Result)

FTIK, Universitas Bakrie, 2014. GPK

1
2

GANJIL 2014/2015

24

Operators
Operators
The assignment operator=is used to assign values to
JavaScript variables.
The arithmetic operator + is used to add values together.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

25

JavaScript
ArithmeticOperators are used to perform arithmetic between
variables and/or values.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

26

JavaScript
Assignment Operators: used to assign values to
JavaScript variables.

FTIK, Universitas Bakrie, 2013.


2014. GPK

GANJIL 2014/2015
2013/2014

27

JavaScript
Comparison
operators are used
in logical
statements to
determine equality
or difference
between variables
or values.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

28

JavaScript
Conditional Statements
Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
if statement- use this statement to execute some code only if a specified
condition is true
if...else statement- use this statement to execute some code if the condition is
true and another code if the condition is false
if...else if....else statement- use this statement to select one of many blocks of
code to be executed
switch statement- use this statement to select one of many blocks of code to be
executed

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

29

JavaScript
For and while loop
In JavaScript, there are different kinds of loops:
for- loops through a block of code a specified number of
times
while- loops through a block of code while a specified
condition is true
do...while- also loops through a block of code while a
specified condition is true

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

30

JavaScript
JavaScript has three kind of popup boxes: Alert box,
Confirm box, and Prompt box.
Alert box
An alert box is often used if you want to make sure
information comes through to the user.
When an alert box pops up, the user will have to
click "OK" to proceed.

FTIK, Universitas Bakrie, 2013.


2014. GPK

GANJIL 2014/2015
2013/2014

31

JavaScript
Example

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

32

AJAX
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to
use existing standards.
AJAX is the art of exchanging data with a server, and updating
parts of a web page - without reloading the whole page.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

33

AJAX
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by
exchanging small amounts of data with the server behind the
scenes. This means that it is possible to update parts of a web
page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the
entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail,
Youtube, and Facebook tabs.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

34

AJAX

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

35

AJAX
AJAX is based on internet standards, and uses a combination
of:
XMLHttpRequest object (to exchange data asynchronously with a
server)
JavaScript/DOM (to display/interact with the information)
CSS (to style the data)
XML (often used as the format for transferring data)

AJAX applications are browser- and platform-independent!

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

36

AJAX
The XMLHttpRequest object is used to
exchange data with a server behind
the scenes. This means that it is
possible to update parts of a web
page, without reloading the whole
page.
Create an XMLHttpRequest Object, All
modern browsers (IE7+, Firefox,
Chrome, Safari, and Opera) have a
built-in XMLHttpRequest object
Old versions of Internet Explorer (IE5
and IE6) uses an ActiveX Object:

FTIK, Universitas Bakrie, 2014. GPK

Example

GANJIL 2014/2015

37

AJAX
AJAX - Send aRequestTo a Server.
The XMLHttpRequest object is used to
exchange data with a server.
To send a request to a server, we use
the open() and send() methods of the
XMLHttpRequest object:

Example
FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

38

AJAX
GET or POST?
GET is simpler and faster than POST, and can be used in most
cases.
However, always use POST requests when:
A cached file is not an option (update a file or database on the
server)
Sending a large amount of data to the server (POST has no size
limitations)
Sending user input (which can contain unknown characters), POST
is more robust and secure than GET

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

39

AJAX
Server Response
To get the response from a server, use the responseText or
responseXML property of the XMLHttpRequest object.

If the response from the server is not XML, use the responseText
property.
If the response from the server is XML, and you want to parse it
as an XML object, use the responseXML property.

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

40

AJAX
A callback function is a function passed as a
parameter to another function.
If you have more than one AJAX task on your
website, you should create ONE standard function
for creating the XMLHttpRequest object, and call this
for each AJAX task.
The function call should contain the URL and what to
do on onreadystatechange (which is probably
different for each call).

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

41

AJAX
Example of a callback function

FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

42

References
Brooks. (2011). Guide to HTML, JavaScript and PHP: For Scientists and
Engineers. Chapter 1, 4, 5 & 6
Harvey M. Deitel, P. J. (2001). Internet & World Wide Web How to
Program: Second Edition. Deitel. Chapter 7-10
Tosa, F. C., Darie, C., Bucica, M., & Bogdan, B. (2006). AJAX and PHP:
Building Responsive Web Application. Birmingham: Packt Publishing.
Chapter 2 & 3
W3schools, 2012, AJAX tutorial, URL:
http://www.w3schools.com/ajax/default.asp (last accessed:
8/10/2012)
W3schools, 2012, JavaScript tutorial, URL:
http://www.w3schools.com/js/default.asp (last accessed:
8/10/2012)
FTIK, Universitas Bakrie, 2014. GPK

GANJIL 2014/2015

You might also like