Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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