Web Technologies and Programming Lecture 19

1Web Technologies and ProgrammingLecture 192Summary of Previous LectureDialog boxes in JavaScriptAlert boxPrompt boxConfirm boxWhat is DOM? HTML DOMRetrieving HTML elementsgetElementById()innerHTMLgetAttribute()setAttribute()3Summary of Previous LectureHTML DOM ElementsFinding HTML ElementsFind an element by elementFind elements by tag Find elements by class name4Today’s Lecture OutlineControlling the background dynamicallyWorking with imagesDate Object51. Controlling the backgroundThe body tag has the following attributesBgcolorIt is Background ColorBackgroundIt deals with the Background ImageTextIt is the text user sees in the browser61.1 Setting the bgcolorWe can access the bgcolor by following methods:document.body.bgColordocument.getElementById(“id of the body tag”).bgColor71.1 Setting the bgcolorStarting FunctionUser InputSetting bgcolorCalling Function81.1 Setting the bgcolorUser Inputs bgcolor in Prompt BoxAfter Applying bgcolor91.2 Setting the text colorSet a background color for a document:We can access the body text by following methods:document.body.style.colordocument.getElementById(“id of the body tag”).style.color101.2 Setting the text colorExampleSet a background color of a specific element:document.getElementById("myDiv").style.backgroundColor = "lightblue";111.2 Setting the text colorExampleReturn the background color of a specific element:alert(document.getElementById("myDiv").style.backgroundColor);ExampleReturn the background color of a document:alert(document.body.style.backgroundColor);121.2 Setting the text colorSet Text FunctionSetting ColorCalling FunctionPassing Color as Parameter131.2 Setting the text colorBefore Clicking on TextAfter Clicking on Text for Red Color141.3 Setting the backgroundThe background property sets or returns up to eight separate background properties, in a shorthand form.With this property, you can set/return one or more of the following (in any order):background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-sizebackground-originbackground-clip151.3 Setting the backgroundExampleSet a background color for a document:document.body.style.backgroundColor = "red";ExampleSet a background image for a document:document.body.style.backgroundImage = "url('img_tree.png')";161.3 Setting the backgroundExampleSet a background-image to no-repeat:document.body.style.backgroundRepeat = "repeat-y";ExampleSet the background-image to be fixed (will not scroll):document.body.style.backgroundAttachment = "fixed";171.3 Setting the backgroundExampleChange the position of a background-image:document.body.style.backgroundPosition = "top right";181.3 Setting the backgroundWe can access the background by following methods:document.body.backgrounddocument.getElementById(“id of the body tag”).background191.3 Setting backgroundImage AddedFunction CallSrc PassedFunction for Receiving SrcSetting Background201.3 Setting backgroundBefore Clicking on ImageAfter Clicking on Image212. 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 222. 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 webpage232. 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 downloaded242. Working with images.Image ObjectThe Image object represents an HTML element.Access an Image ObjectYou can access an element by using getElementById():252.1 Image MouseMove and MouseOut FunctionFunction StartSetting Image SrcImage AdditionCalling MouseOver FunctionCalling MouseOut Function 262.1 Image MouseMove and MouseOut FunctionOn MouseOutOn MouseOver272.2 Image PreviewMain ImageSmall ImagesImage SrcFunction CallSrc Passed282.2 Image PreviewFunction Gets SrcMain Image Src Changed292.2 Image PreviewOn Page Load302.2 Image PreviewAfter Changing Source312.3 Slide ShowArray of imagesMain imageNext and previous image buttonsNext image and previous image functions 322.3 Slide Show33Array of ImagesLength of Pics ArrayNext PicIncreases Pics IndexChecks for Last Image Changes the ImageSet count to zero incase of last image2.3 Slide Show34Count DecrementChecks for First ImageChanges The ImageSets Count incase of First Image2.3 Slide Show35MainImageNext ImageCall to Next Pic FunctionBack ImageCall to Previous Pic Function2.3 Slide Show362.4 Slide Show (with Self Changing Images)Array of imagesMain imageNext image function372.4 Slide Show (with Self Changing Images)38Image ArrayIncrement the countChecks for the last imageImage changesSet Count to Zero incase of Last ImageTime Based Function Call2.4 Slide Show (with Self Changing Images)39Next Pic Function CallMain Image2.4 Slide Show (with Self Changing Images)403. 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 asvar today=new Date()413. 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)423. 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)433.1 Digital clockDate Object is CreatedGets HoursGets MinutesGets SecondsCalls Check-Time FunctionWrites Time on txt DivSelf Function Call443. Working with date object Concatenate ‘0’ If Time is Less Than 10Start Time Function CallEmpty div to Display Time453. Working with date object 46Summary of Today’s LectureControlling the background dynamicallyBgcolorSET For a documentSET For a specific SET the Text Color Return background color of a specific elementReturn background color of a document:Backgroundbackground color for a documentbackground image for a documentSet a background-image to no-repeatSet the background-image to be fixedChange the position of a background-image47Summary of Today’s LectureWorking with imagesAccess an Image ObjectOn MouseOutOn MouseOverImage RolloverImage PreviewImage Slide ShowDate objectDigital Clock48THANK YOU49