Working with background, images and date object

Working with background, images and date objectBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan1Summary of the previous lectureDialog boxes in JavaScriptHTML DOMRetrieving HTML elementsSetting HTML elementsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan2OutlineControlling the background dynamicallyWorking with imagesDate ObjectBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan31. Controlling the backgroundThe body tag has the following attributesbgcolorBackgroundtextBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan41.1 Setting the bgcolorWe can access the bgcolor asdocument.body.bgColorOrdocument.getElementById(“id of the body tag”).bgColorBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan51.1 Setting the bgcolorStarting the functionUser inputSetting the bgcolorCalling the functionBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan61.2 Setting the text colorWe can access the body text asdocument.body.style.colorOrdocument.getElementById(“id of the body tag”).style.colorBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan71.2 Setting the text colorSet text functionSetting the colorCalling the functionPassing color as parameterBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan81.3 Setting the backgroundWe can access the background asdocument.body.backgroundOrdocument.getElementById(“id of the body tag”).backgroundBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan91.3 Setting backgroundImage is addedFunction is calledSrc is passed Function received the srcBackground is setBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan102. Working with imagesJavaScript has a built-in object called ImageThe Image object allows you to create objects that represent images created using the elementProperties: name, border, height, width, hspace, vspace, src Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan112. Working with imagesAn image object can be created asvar objname= new image()The most important property of an image object is srcThis designates the actual image file you will use as a source for your Image objectobjname.src= “abc.jpg”This property can be used to dynamically change an image on the webpageBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan122. Working with images.The primary use for an Image object is to download an image into the cache before it is actually needed for displayInstance of image object is createdSrc property is set to the name of the image to be downloadedBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan132.1 Image RolloverFunction startsSetting the SrcImg tagCalling the function Again calling the functionBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan142.2 Image PreviewMain imageSmall imagesImage srcCall to the functionSrc is passedBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan152.2 Image PreviewFunction gets the srcSrc of main image is changedBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan162.3 Slide ShowArray of imagesMain imageNext and previous image buttonsNext image and previous image functions Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan172.3 Slide ShowBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan18Array of imagesLength of pics arrayNext PicIncrease the index of picsChecks for last image Changes the imageSet count incase of last image2.3 Slide ShowBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan19Decrements the countChecks for the first imageChanges the pictureSets the count incase of first image2.3 Slide ShowBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan20Main imageNext imageCall to the next functionBack imageCall to the previous functions3. Working with date object The Date object is used to work with dates and timesIt can be used to find the current time and date Many time based tasks can be performedDate objects are created as var today=new Date()Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan213. Working with date object Date object methods:getDate():Returns the day of the month (from 1-31)getDay():Returns the day of the week (from 0-6)getFullYear():Returns the year (four digits)getMonth():Returns the month (from 0-11)Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan223. Working with date object getHours():Returns the hour (from 0-23)getMilliseconds():Returns the milliseconds (from 0-999)getMinutes():Returns the minutes (from 0-59)getSeconds():Returns the seconds (from 0-59)Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan233.1 Digital clockDate object is createdGets hoursGets minutesGets secondsCalls check-time functionWrites time on txt divFunction calls itselfBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan243. Working with date object Concatenate ‘0’ if time is less than 10First call to the functionEmpty div to display timeBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan25SummaryControlling the background dynamicallyBgcolorTextbackgroundWorking with imagesImage rolloverImage previewImage slide showDate objectDigital clockBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan26Chapter 11. Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. Chapter 4,5,7. Learn JavaScript, by Chuck Easttom, Wordware Publishing; 2002, ISBN 1-55622-856-227Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, PakistanReferences