Trusted by 2+ million users,
1000+ happy students everyday
Showing pages 1 to 3 of 6 pages
Digital Business Application – Lab ExercisesJavaScript and AjaxEXERCISE 1: PHOTO ALBUM CLIENT-RENDERED VERSION APhoto Album Client-Rendered Version ACreate a new file calledphotoalbum-client-rendered-version-a.htmland put the following HTMLcode in it, changing the text in red to be your name and email address. This file needs to be locatedin the same place as your existing photoalbum scripts so that it has access to the lightbox files andthephotoalbum.cssfile.<!DOCTYPE html><html><head><title>JSON Photo Album</title><meta name='viewport' content='width=device-width, initial-scale=1'><link rel='stylesheet' href=''><link rel='stylesheet' href='lib/lightbox2/css/lightbox.css'><link rel='stylesheet' href='photoalbum.css'><script src=''></script></head><body><header class='w3-container w3-orange w3-center'><h1>My Photo Album</h1><h2>Your Name</h2><p>Here are some photographs and descriptions.</p></header><div id='message'></div><div id='album'></div><footer class='w3-container w3-orange w3-padding-jumbo'><div class='w3-container w3-center'><a href='' class='link'>Contact me</a></div></footer><script src='lib/lightbox2/js/lightbox.js'></script></body></html>Note the following:This is a plain page of HTML not PHP.Although it is declares the top and bottom of the photoalbum page, there is nothing in themiddle. Instead there are two empty divs which have id attributes. We can use JavaScriptrunning in the page to add content to those divs, and this is how this version of thephotoalbum will work.The last line in the <head> of the page imports the JQuery JavaScript library, allowing us tomake use of JQuery functions in this file.Page1of6
Digital Business Application – Lab ExercisesAdd the following code as the last thing inside the <head>...</head> tags:<script>$(document).ready(function() {$('#album').append( "<div style='border: dashed magenta 8px;'><h1>Here is some content for the 'album' div</h1></div>");});</script>This code uses the JQuery library to do a few things. The JQuery library defines a special functiondenoted by a dollar sign. It can take a wide variety of different kinds of parameters and provides awide range of useful functions. The first use in this code is$(document). In this case the parameter isthe predefined JavaScript variable identifying the root DOM element for the currently displayeddocument. The JQuery object returned by the $ function has a function calledready()which is usedto execute some JavaScript code when the page has finished loading. It is very commonly used tostart some script running on a page automatically. It requires as a parameter a JavaScript function,and the code above gives in an anonymous function for this purpose. Anonymous functions have noname and are simply placeholders for code to be executed by the function they are given to.$(document).ready(function() {// code to run in here});In the example above the code to run consists of the line show abbreviated below:$('#album').append("<div ... /div>");This again uses the JQuery $ function, but this time gives it a string containing an ID string. Thisselects the DOM element which has that ID (in this case one of the empty divs in the page) andwraps it in a JQuery object. Then the JQuery functionappend()is called to create new DOMelements and add them to the existing children of the selected element. In this case we give appenda string containing HTML code which is automatically converted to DOM elements and added in.View the page in a web browser (you do not need to upload it to a server to do this) and then usethe developer tools options to inspect the DOM and see that the div with the id album is no longerempty but contains a div and h1 element.Page2of6
Digital Business Application – Lab ExercisesOf course what we want to do is insert a whole grid of photographs so we need a more complicatedfunction. Replace all the code you have already with this version:$(document).ready(function() {for (i = 0; i < 9; i += 3) {var rowDiv = $( "<div class='w3-row'>");$('#album').append( rowDiv);for( j = i; j < i + 3; j++ ) {if ( j < 9) {rowDiv.append( "<div style='border: solid blue 2px;' class='w3-third'>Place for photo</div>");}}}});This code does the following:1.It iterates through two nested loops to counting up to nine in three groups of three..2.For each group of three it prints out a div with the w3-row class and creates a new divelement to represent a row and appends it to the “album“ div.3.For each member of the group of three it appends a div to the row div, with a blue borderand containing a string which says “Place for a photo”.View this in a web browser and inspect the DOM to see the elements which have been added toalbum div.The result is a 3x3 grid of divs with blue borders and the w3-third class. This is more like what wewant, but in fact what we need to do is iterate over a collection of photographs and for each oneadd elements to the page to create the same HTML we have had in earlier versions, that issomething like:<div class='w3-container w3-row w3-col l4'><div class='w3-container w3-card-8 w3-margin-8'><div class='w3-container w3-half w3-image'><a href='images/b1.png'><img src='images/b1.png' class='example-image w3-circle'></a><div class='w3-title w3-text-purple'>John</div></div><div class='w3-container w3-half'><p>This is John Lennon. He was one of the Beatles.</p><p>He was one of the two main song-writers.</p></div></div></div>To do this we need three things:1.the photograph information stored somewhere, for example in an array2.a function to pass to$(document).readywhich iterates over that array and for each item init calls3.a function to create the required HTML elements for a given array elementPage3of6
Desklib Logo
You are reading a preview
Upload your documents to download or

Become a Desklib member to get access