ITM 352 Javascript and Dynamic Web Pages Client
ITM 352 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 Java. Script), a presentation definition language (such as CSS), and the Document Object Model.
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 • Java. Script for client side processes web page file after browser gets it Do Exercise #1, #2
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 Java. Script 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. get. Element. By. Id("demo"). inner. HTML ) – You can find the properties and methods for DOM objects in a reference such as http: //www. w 3 schools. com/jsref/ • Tip: Netbeans and Chrome developer tools will show available properties/methods when you try to access an object Do Exercise #3
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 Do Exercise #4
- Slides: 6