Transcript client side processing using JavaScript presentation

ITM352
Javascript and Dynamic Web Pages:
Client Side Processing
DHTML
• Dynamic HTML, or DHTML, is an umbrella
term for a collection of technologies used
together to create interactive and
animated web sites by using a combination of
a static markup language (such as HTML),
a client-side scripting language (such
as JavaScript), a presentation definition
language (such as CSS), and the Document
Object Model.
Client Side Web Page Processing
•
Browser is the “client” that requests via
http a file from the server
– This is called a “pull” or “get” request
– There is also “push” but this is more
complicated
•
Let’s see this “raw” without a browser
Mac:
Spotlight -> Terminal
telnet itm-vm.shidler.hawaii.edu 80
GET /itm352student/test.html HTTP/1.1
HOST: itm-vm.shidler.hawaii.edu (Hit Enter 2x)
Windows:
Start -> CMD
Telnet
No Telnet?
http://www.wikihow.com/Activate-Telnet-in-Windows-7
(Steps 1-4 only)
•
Browser receives file and processes it as it
has been configured
–
–
E.g. HTML text is “drawn”
Different browsers may process the file differently!
•
E.g. look of buttons, text boxes etc.
Dynamic Web Pages
• Basic web pages are “static”
– They are set in advance, not created or modified at request time
• Dynamic web pages are processed (at least partially) at request time by
scripting code to create the output
– Allows changes at request time
(2)
– There are two opportunities for this
• (1) on the server after request
• (2) on the client after the file received
(1)
– Though a “gateway” (CGI) or internal to
Browser (API, plugin, etc.)
– There are many scripting languages
• PHP is most popular for sever side  processes web page file before browser gets it
• JavaScript for client side  processes web page file after browser gets it
DOM
• The Document Object Model (DOM) is the
way things in markup (HTML, XML, etc.)
documents are represented within a
(standards compliant) browser
– Objects are organized in a tree
• Logically and for a page
• Let’s use Chrome tools to look
– Internal scripting languages such as JavaScript can
access and manipulate the DOM
Javascript, HTML, DOM
• A Javascript “object” is a data structure that is a collection of properties,
and a property is an association between a name (or key) and a value. A
property's value can be a function, in which case the property is known as
a method.
• An HTML tag is is also a kind of ”object” on a page that has data (usually
the stuff between the open/close tags) and attributes which are
properties of the HTML element
• The DOM has a Javascript object representation that is a standard for
getting, changing, adding, or deleting HTML elements on a page
– Access an object through its references to use its properties.methods using the dot “.”
<p id="demo">Hello World!</p>
console.log( document.getElementById("demo").innerHTML )
– You can find the properties and methods for DOM objects in a reference such as
http://www.w3schools.com/jsref/
•
Tip: Netbeans and Chrome developer tools will show available properties/methods when you try to access an
object
Using Javascript
•
You can use Javascript
– Between <script></script>
<script>alert("Hello!")</script>
– As values for an HTML element event attribute
<input type="button" value="Press Me" onclick="alert('Hello!');>
**TIP** You can use different quotes to separate HTML and Javascript quotes
<input type="button" value="Press Me" onclick="alert(this.value + ' says
hello!');">
**TIP** The keyword “this” in Javascript will always reference the HTML element you are in
– In the developer tools console inside a browser
alert('Hello!');
•
Remember Javascript is run by the client e.g. a browser
– You have no control on if the Javascript will actually execute e.g. user denies scripts
– You do not know what version of Javascript is available. Different browsers may have different
versions or may run the script differently
– You cannot access much of anything outside the users browser e.g. you cannot load files from
a users directory