Download presentation
Presentation is loading. Please wait.
1
Creating dynamic/interactive web pages
JavaScript Creating dynamic/interactive web pages
2
What is JavaScript? JavaScript is a client-side scripting language that allows for interactive web pages. It differs from PHP because it executes through the web-browser on the client’s machine. PHP runs on the web server. What this means to us is that JavaScript can make incremental changes to the web page, whereas PHP has to rebuild the entire page and transmit it over the web. Developers must be aware that JavaScript may be disabled on the client’s browser or may not be supported on certain devices. JavaScript has a history of facilitating malicious activity through the web browser, but browsers now limit such activity.
3
How does JavaScript fit into web development?
HTML = structural layer of a web page CSS = presentation layer JavaScript = behavioral layer JavaScript can alter: content CSS styles behavior request data from the server and inject it into the webpage without reloading the page (known as Ajax) create collapsible content areas test for individual browser’s features
4
How do you code JavaScript?
To add JavaScript: use <script> </script> tags. Ex: <script scr=”myJavaScript.js”> </script> JavaScript can appear anywhere in the document. Most common in head or at bottom of body. Predefined functions: alert() confirm() prompt() JavaScript is case sensitive. Statements end in ; Comments: // and /* */
5
The Browser Object (window)
6
Window Events <button label="Press Me"
onclick="alert('You pressed me!');">Press me!</button> <body onclick=”myFuntion();”>
7
Example
8
Chapter 20 The DOM Document Object Model (DOM)
Gives us a means to access HTML elements by their names or their attributes to add, modify or delete elements and their content. Easiest way to access elements: document.getElementById(“myParagraph”); .innerHTML gets the contents of an element. For example: <p id="demo">This is a paragraph.</p> to update the above document.getElementById("demo").innerHTML=Date();
9
The DOM hierarchy
10
Updating the DOM Manipulating nodes: setAttribute( )
Ex. Var bigImage = document.getElementByID(“test-image”); bigImage.setAttribute(“scr”, “largerImage.jpg”); Changing style: document.getElementById(“heading”).style.color = “#ffff00” Adding or removing elements Using createELement() Ex var newDiv = document.createElement(“div”); createTextNode(“test text line”); appendChild(newDiv) + more …
11
Polyfill Polyfill- A term referring to JavaScript that normalizes website behavior from browser to browser (to make for out of date browsers). Ex HTML5 shiv – allows older browsers to recognize HTML5 elements. Modernizr – test suite that can be used to detect the presence of browser features and load polyfills as needed. Selectivizr – Allows older versions of IE to understand complex CSS3 elements. Resond.js – used with responsive design and older browsers.
12
AJAX AJAX – Asynchronous Javascript and XML.
Rather than using server-side languages, like PHP for data queries and reload the web page, Javascript can create data access and update relevant portions of the web page. XML or JSON (Javascript Object Notation) is used for data access from server.
13
JavaScript Libraries Pp
Similar presentations
