desain web 04 dom javascript and jquery

7/25/2019 Desain Web 04 DOM Javascript and JQuery

1/80

DOM, Javascript,and jQueryAryo Pinandito, ST, M.MT

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya


2/80

HTML DOM! DOM stands for the Document Object Model.

! The HTML DOM is the Document Object Model forHTML.

!

The HTML DOM defines a standard set of objectsfor HTML, and a standard way to access andmanipulate HTML objects.

! Traversing, editing and modifying DOM nodes

! Editing text nodes


3/80

HTML DOM! The HTML DOM is a platform and language independent

API (application program interface) and can be used byany programming language

! The HTML DOM is used to manipulate HTML documents

!

DOM makes all components of a web page accessible! HTML elements

! their attributes

! text

! They can be created, modified and removed withJavaScript! We will use Javascript to interface with the HTML DOM


4/80

DOM Objects! DOM components are accessible as objects or

collections of objects

! DOM components form a tree of nodes! relationship parent node children nodes

!

!"#$%&'(is the root node

! Attributes of elements are accessible as text

!

Browsers can show DOM visually as an expandabletree!

Firebug for Firefox

! in IE -> Tools -> Developer Tools


5/80

DOM Standards! W3C www.w3.orgdefines the standards

! DOM Level 3 recommendation

! www.w3.org/TR/DOM-Level-3-Core/

! DOM Level 2 HTML Specification!

www.w3.org/TR/DOM-Level-2-HTML/

! additional DOM functionality specific to HTML, inparticular objects for XHTML elements

! But, the developers of web browsers

!

don't implement all standards! implement some standards differently

! implement some additional features


6/80

Accessing Nodes by id! Access to elements by their id! !"#$%&'()*&(+,&%&'(-./!012!34

! returns the element with2! 12!3

! 2!attribute can be defined in each start tag

!

!26 element with 2! attribute can be used as an rootnode for a dynamic DOM subtree

! 789'element with 2!attribute can be used as adynamic inline element

! The preferred way to access elements


7/80

Other Access Methods! Access by elements' tag

! there are typically several elements with the same tag

! !"#$%&'()*&(+,&%&'(7-.:9*;9%&01(9*34

! returns the collection of all elements whose tag is

!

the collection has a ,&'*(


8/80

Other Node Properties! '"!&;9%&property

! '"!&C9,$&property

! 9((D2E$(&7property

! 2''&DF:GHproperty!

not standard, but implemented in major browsers! very useful

! 7(.,&property

! object whose properties are all style attributes, e.g.,those defined in CSS


9/80

Accessing JS Object'sProperties

!

There are two different syntax forms to accessobject's properties in JS (

! 1"EI(3)18D"8&D(.3

! dot notation, e.g., !"#$%&'()'"!&:.8&

!

1"EI(3?18D"8&D(.J'9%&3A

! brackets notation, e.g., !"#$%&'(?>'"!&:.8&KA

! this is used in L"DJ2'loops

!

this works for properties of DOM objects, too


10/80

Attributes of Elements!

Access through 9((D2E$(&7property! 9((D2E$(&7is an array

! has a ,&'*(


11/80

Text Nodes!

Text node! can only be as a leaf in DOM tree

! its '"!&C9,$&property holds the text

! 2''&DF:GHcan be used to access the text


12/80

Modifying DOM Structure!

!"#$%&'()#D&9(&+,&%&'(01(9*34! creates a new DOM element node, with tag.! the node still needs to be inserted into the DOM tree

! !"#$%&'()#D&9(&:&N(;"!&01(&N(34! creates a new DOM text with ! the node still needs to be inserted into the DOM tree

!

189D&'(3)988&'!O


13/80

Modifying Node Attributes!

1'"!&3)7&(M((D2E$(&01'9%&3P169,$&34

! sets the value of attribute to

! e.g.! !"#$%&'()2%9*&7?@A)7&(M((D2E$(&0>7D#>P>Q&2Q2)I8*>4B

! That's the standard

! but it doesn't work in IE, there you have to use! 7&(M((D2E$(&01'9%&=69,$&34

!

e.g.! !"#$%&'()2%9*&7?@A)7&(M((D2E$(&0>7D#=R>Q&2Q2)I8*

R>>4B


14/80

W3C Document Object Model


15/80

Special DOM Objects!

S2'!"S! the browser window

! new popup windows can be opened

! !"#$%&'(! the current web page inside the window

!

E"!.! element of the document

!


16/80

HTML DOM


17/80

An HTML DOM ExampleThis coding example shows how the background color of an HTMLdocument can be changed to yellow when a user clicks on it:

1O


18/80

HTML DOM

! DOM Event

! onBlur, onClick, onChange, onFocus, onKeyDown,onKeyUp, onKeyPress, onLoad, onMouseDown, on

MouseMove, onMouseOut, onMouseOver,onSubmit, ...

! http://science.slc.edu/~sallen/s05/examples/

events.html


19/80

JavaScript


20/80

Introduction to JavaScript!

NOT Java! JavaScript was developed by Netscape

! Java was developed by Sun

! Designed to plug a gap in the techniques

!

available for creating web-pages

! Client-side dynamic content

!

Interpreted


21/80

JavaScript!

JavaScript was designed to add interactivity toHTML pages

! JavaScript is a scripting language - a scriptinglanguage is a lightweight programming language

!

A JavaScript is lines of executable computer code!

A JavaScript is usually embedded directly in HTMLpages

! JavaScript is an interpreted language (means thatscripts execute without preliminary compilation)

!

Everyone can use JavaScript without purchasing alicense

! JavaScript is supported by all major browsers.


22/80

JavaScript!

JavaScript gives HTML designers a programming tool.! JavaScript can put dynamic text into an HTML page like this:!"#$%&'()SD2(&0>1 Y '9%& Y >1V4

! can write a variable text into an HTML page

! JavaScript can react to events - A JavaScript can be set to

execute when something happens, like when a page hasfinished loading or when a user clicks on an HTML element

! JavaScript can read and write HTML elements - A JavaScriptcan read and change the content of an HTML element

! JavaScript can be used to validate data - A JavaScript can be

used to validate form data before it is submitted to a server,this will save the server from extra processing


23/80

JavaScript vs. Java!

JavaScript! Cannot draw, multi-thread, network or do I/O

! Java! Cannot interact with Browser or control content

!

JavaScript is becoming what Java was originallyintended to be! Java Applets are meant to be lightweight downloadable

programs run within the browser for cross-platformcompatibility

!

Java = Bloated! JavaScript is actually lightweight and accomplish most of

what Applets do with a fraction of the resources


24/80

What is it used for today?!

Handling User Interaction! Doing small calculations! Checking for accuracy and appropriateness of data entry

from forms! Doing small calculations/manipulations of forms input

data!

Search a small databased embedded in the downloadedpage

! Save data as cookie so it is there upon visiting the page! Generating Dynamic HTML documents! Examples

!

Bookmarklets! Google Maps! Google Suggest


25/80

JavaScript!

How to Put a JavaScript Into an HTML Page

1


26/80

JavaScript!

Scripts in a page will be executed immediatelywhile the page loads into the browser.

! This is not always what is wanted. Sometimes wewant to execute a script when a page loads, other

times when a user triggers an event.! Scripts in the head section will executed when they

are called, or when an event is triggered

!

When you place a script in the head section, you

will ensure that the script is loaded before anyoneuses it.


27/80

JavaScript!

If you want to run a script on several pages, you can write ascript in an external file, and save it with a .js file extension, likethis:

! document.write("This script is external") Save the external file asexternalJS.js.

! Note: The external script cannot contain the tag

!

This script can be called using the "src" attribute, from any ofyour pages:

1


28/80

JavaScript!

Variables

! A variable is a "container" for information you wantto store. A variable's value can change during thescript. You can refer to a variable by name to see its

value or to change its value.! Rules for Variable names:! Variable names are case sensitive

! They must begin with a letter or the underscore

character

! http://www.w3schools.com/js/tryit.asp?filename=tryjs_variable


29/80

JavaScript!

You can create a variable with the var statement:69D 7(D'9%& = 7"%& 69,$&

!

You can also create a variable without var:7(D'9%& = 7"%& 69,$&

!

Assigning a Value to a Variable69D 7(D'9%& = K\9%>

! Or like this:7(D'9%& = K\9%>

! The variable name is on the left side of theexpression and the value you want to assign to thevariable is on the right. Now the variable "strname"has the value Sam".


30/80

JavaScript!

Functions

! A function contains some code that will be executedby an event or a call to that function.

!

A function is a set of statements. You can reuse

functions within the same script, or in otherdocuments.

! You define functions at the beginning of a file (inthe head section), and call them later in the

document.


31/80

JavaScript!

To create a function you define its name, any values("arguments"), and some statements:

L$'#(2"' %.L$'#(2"'09D*$%&'(XP9D*$%&'(]P&(#4 TVV 7"%& 7(9(&%&'(7

U

! A function with no arguments must include theparentheses:

L$'#(2"' %.L$'#(2"'04 TVV 7"%& 7(9(&%&'(7U


32/80

JavaScript!

Arguments are variables used in the function. Thevariable values are values passed on by the functioncall.

!

By placing functions in the head section of the

document, you make sure that all the code in thefunction has been loaded before the function iscalled.


33/80

JavaScript!

A function is not executed before it is called.

! You can call a function containing arguments:

%.L$'#(2"'09D*$%&'(XP9D*$%&'(]P&(#4

! To call a function without arguments:

%.L$'#(2"'04


34/80

Javasript Framework

Laboratorium Web dan Mobile App PTIIK Universitas Brawijaya


35/80

A Little Bit About jQuery

! jQuery is an Open-Source JavaScript frameworkthat simplifies cross-browser client side

scripting.! Animations

! DOM manipulation

! AJAX

! Extensibility through plugins

!

jQuery was created by John Resig and releasedJanuary 2006

! Most current release is 1.8.3 (2012)

!

What is jQuery?


36/80

Why should you use it?!

Easy to learn! It uses CSS syntax for selection

! Its tiny 252KB (32KB, minified and Gzipped)

! Documented api.jquery.com& Supportedforum.jquery.com

!

Cross browser compatibility: IE 6+, FF 2+

! It is the most used JavaScript library on the webtoday

! 39% of all sites that use JavaScript use jQuery.

!

trends.builtwith.com/javascript/JQuery


37/80

PWNS All Other Frameworks


38/80

Who Uses jQuery?

Google Amazon IBM

Microsoft Twitter Dell

docs.jquery.com/Sites_Using_jQuery


39/80

What is the DOM?Document Object Model (DOM): noun

Blah blah blah long definition that makes little sense.


40/80

What Is The DOM?!

Long story short, the DOM is your html document code.From the

! to the

! The DOM is loaded top to bottom, so include your

scripts at the bottom of the page for best performance.

! The DOM is "ready" when everything on the page hasloaded.

! Stylesheets!

JavaScripts! Images


41/80

Wait!!!

In order to make sure that jQuery can find theelement you asked it for, your browser needs tohave loaded it (the DOM needs to be ready).

!

Q. How can I be sure my code runs at DOM ready?!

A. Wrap all your jQuery code with the documentready function:

!"#$%&'()*+,-(.#/"0&)%*1$)"+2

44 1)5(-* 6.7.5%-18*469&(-/ %$#( :(-(

;+ !"#$%&'()*+,-(.#/"0&)%*1$)"+2

;+??A


51/80

Hide and Seek!

jQuery:!"?#17?+,5:$L"+?#158C./M)$)(


52/80

I'm Not Lame, Am I?

! jQuery:!"?O.-/$?+,*(P*"?F5 K$$C?+?.-/$?AF5 Q.'(=48A

!

After:

=8 1#>?.-/$?AF5 K$$C=48A

You Can Chain Most Methods


53/80

You Can Chain Most MethodsTogether

!"?8?+

,.##KC.55"?5$8:15*1%.*(#?+

,*(P*"?B(CC$ D$-C#E?+

,5:$L"+ O8.)#.

.C(-*"?V.I( *:.* W$$E?+?5$'( $*:(- 5*/C(5

2-(@&1-(#M*-&(Z'1)Q()J*:M_;? 4A

=1)8&* 1#>?%('.1C? ).'(>?('.1C?

%C.55>?2-(@&1-(#M*-&(Z('.1CM*-&(;? 4A


79/80

Great References!

John Resig's introductionslides

! jQuery 1.4 Cheat Sheet

!

jQuery API

!

jQuery Forums! YAYquery Podcast

(explicit)


80/80

Questions?

desain web 04 dom javascript and jquery

Documents