JAVASCRIPT SO & JQUERY ett Reel te} Poems culs JON DUCKETTJAVASCRIPT & JQUERY Interactive Front-End Web Development JON DUCKETT Additional materia by GILLES RUPERT & JACK MOORE WILEYMt Published by Joba Wiley & Sons ne 10475 Crosspoint Boulevard Indianapolis, IN 46256 soon Tey.com ©2014 by John Wiley & Sons, ne, Indianapolis, Indiana (aN; 978-1-118-59166-8 ‘Manufactured inthe United States of America 10987654321 Nopatltnis picaton may be repre, sored na eta tn rwanda ny fr ary means leon, mecank Pototoyie cang xanga" thera, ecet eprint Secon 107 oI! he 176Ustus Stes Copy et ‘thou ee per wl person Puhr rasan vou ayes lth porn pero t o Copy Clearance Cert 22 ovens Dive, Durer MA }23 (978) 50-840 (378 66-8600 Raquela uber peso shale aaiesed te Permisions Dupre ln Wey & Ser. ee Roe Set Hebien,W) O73, (20 7a {607 fae 200 78-4008 or ones Htp// wane. cm/o/oemio Unit Ubity/Diclaer of Waray: Te abs pdb our make rorereseraens warns wh respel tote acre ‘rronpistrest ol comers ewok andspeccly cco s.r alr hat mean waar reset Spree pron Howrarymoy be etd aetna bys pramnosimatass Tha yoece ond seis conned arena ate utaelorevery tuations wok aso tthe uncrstndeg tthe pba iat engaged enn eh scouting. cher rlsiona serves. paeseal asstance rege heserdcesol compete prlesson prion sos ‘aout Nate the pbloer othe autor alt blo drapes aig heron TR lc ht ncrgoianor Web tes ‘eredo ins wre oe atatn a/b 3 oer sauce helms dest mean tha he uo ube enor \westes ian ths worky hve hanged Gsopenred betwee whens wok ws Won and Wien i538. gens rman enous products nd erics lace cntet ow Customer Cav Deparimenwihinthe Unt Sts (877) “7629976 co tha Unto Siar (317) S72 993 0c 572-4002 Wiley aes avait of pita elev ort aby pica dean Some materi ced wih standard pint esr ‘paboak oy otbecucedine oats rn pron deroné thi book lerto med suenas scD 0" OVD atishl add nthe ‘rtonyoupucaed, you ny mrad ha matra t Mo//Soksupporeycom. Fr mere nomaon tot Wey products is setey com Ua ConrssComrelNumber 2018985952 “ademas: Wer ane Wey log se adem cretred ademars foe Wy & Sons, Ine and/or fies, ne Ud Sse ante cures ray bese et writen gemson Jers sere ode of Oral ei: thr vasenae the prperty hor pete oer hn Win Sens ea esate way precutr ent mentionedTABLE OF CONTENTS eer tay Ce Ceri ree ea ar Chapter 3: Functions, Methods & Objects Chapter 4: Decisions & Loops ore ae ese oe ae Tcl eat ag eee ae et ere] eae Cea a eee Cee Oa Chapter 12: Filtering, Searching & Sorting er aE ee id oly DOWNLOAD Biome as Reel Rul cere ARIE eg N i www. javascriptbook.comCREDITS For John Wiley & Sons, ne For Wagon Ltd. Executive Ealtor Author Carol Long Jon Duckett Project Editor co-Authors Kevin Kent Jack Moore ‘Chapters 1.612) Production Editor Daniel Scribner Giles Ruppert (Chapter 13) Editorial Manager Mary Beth Wakefield Technical Review ‘Mathias Bynens Associate Director of Marketing David Mayhew Review Team Chris Ullman ‘Marketing Manager David Lean Lorna Min Harison Tht Jay Bursky Business Manager Richard Eskins “Amy Koies Scott Robin Stachu Korck Vice President and Executive Group Publisher Thank you Richard Swadiey ‘Annette Loudon ‘Michael Tomko Associate Publisher ‘Michael Vella Zarb Jin Minate Pam Coca Rishabh Pugalia Project Coordinator, Cover Toca klemme ‘cover Desien Fmme Stone Design Emme Stone Jon Duckett Photography Joh Stewardson Jobnstevardson.con IMstration Matthew Cancich (Hotel in Chapter3) Emme tone (Teacher in Chapter 4) ‘Additional Photography Electronics in Chapters 8 & 9: ‘Aaron Nielsen Arkadiusz Jan Sikorski Matt ers Mirsad Dedovie Steve Lodetink Javascriptbook.con/ereditsINTRODUCTIONThis book explains how JavaScript can be used in browsers to make websites more interactive, interesting, and user-friendly. You will also learn about iQuery because it makes writing JavaScript a lot easier. To get te most out ofthis book, you wl need to know howto bul webpages Using HTML ‘and CSS, Beyond that, o prior experience with programming is necessary, Learning to rogram with lavaScript involves 1 2 3 Understanding some basie Learning the language tse, Gecoring familia with how programming concepts and and ike allanguages, you itis applied by looking at theterms that JavaScript need toknowits vocabulary examples of how lovaSeriot programmers useto andhow tostructure your iscommonly usedin describe them, sentences, websites today ‘The only equipment you need touse this book re a computer with s modern wab browser Install, and your favorite code editor, (eg. Notepad, TextEdit, Sublime Testor Cod). @ wrenIntroduction pages come atthe beginning of each chapter. They inlroduce the key topes ou wil lara out Background pages appear on white. They explain the contest ofthe topics covered that are discussed Ingach chapter. Fa Example pases bring together the topics youhave learned in that chapter and demonstrate how they canbe applies Reference pages introduce key peces of JavaScript HTML code is shown in bi, CSS code in pink and JavaScript in green Diagram and infographics pages are shown on 8 dark background. They provide a simple, vis reference to opis discussed. Summary pages com atthe end ol each chapter They remind youcf thekey topics that were covered Ineach chapter.Pa ea PC aes eoauc ee eee) modifying the content and Doge eae Rete while it is being viewed in ee 1 ESS CONTENT we tert inside al ofthe 2 MODIFY CONTENT You conse jmaScript to xt tothe elements, ati class new CSS rulesceeaiag Oey CCCI tag ec Ree CUR acl REACT TO EVENTS interactive by responding y OU UL es oeEXAMPLES OF JAVASCRIPT IN THE BROWSER Being able to change the content of an HTML page while it is loaded in the browser is very powerful. The examples below rely on the ability to: ‘Access the content of the page ‘Modify the content of the page Program rules or instructions the browser can follow React to events triggered by the user or browser SLIDESHOWS Shown in Chapter) Slideshows can display 8 number of diferent images (orother HTMIL content) within the same space ‘ona given page. They can ploy automatialy as ‘sequence, or users can click through the sides ‘manualy They allow more content tobe displayed \ithina limited amount of space, React: Script triggered when the page loads ‘Access: Get each side rom the slideshow ‘Modify: Only show the fist slide chide others) Program: Seta timer: when to show next slide ‘Modify: Change which sides shown React: When user clicks button for cilerent slide rogram: Determine which side to show ‘Modify: Show the requested side © mrnooverion FORMS Shown in Chapter 13 Validating forms checking whether they have been filled in corect) important when information is supplied by users. avaSerpt ets you alert the user if mistakes have been made lt can also perform sophisticated calculations based on any data entered ‘and reveal the results tothe use React: User presses the submit button when they have entered teirname ‘Access: Get value from form Held Program: Check thatthe name long enaugh Medify: Show s warsing message ifthe name is not long enough‘The examples on these two pages sive youa taste of what JavaScript can dowithin a web page, and ofthe techniques you willbe learning throughout this book. RELOAD PART OF PAGE Showin Chapter 8 ‘You might nat want to force vistors to reload the content ofan entire web page, particularly if you only need to refresh a ema portion of page Just reloading a section ofthe page can make a site fe! ike tis aster to load and more ike an application React: Script triggered when user clicks on nk ‘Access: Thelin tot they clicked on Program: Load the new content that was requestes from that ink ‘Access Find the elament toreplce inthe page ‘Modify: Replace tat content with the new content Inthe coming chapters. you wil learn how and when to accessor modily content, ad programming rues, and react to events ce 7a i. ia SE at & FILTERING DATA Shown in Chapter 12 HH youhave 2 lt of information to display on 3 page, you an help uses find information they need by Providing fiers. Here buttons are generated using fata inthe attributes ofthe HTML elements. ‘When the user clicks on one ofthe butions, they are only shown the images with that keyword. React: Serio triggered when page loads Program: Collect keywords trom images Program: Turn the keywords into buttons the user canclickon React: User clicks on one ofthe buttons Program: Fins the relevant subset of imoges that should be shown ‘Modify: Show the subse of images that use that tg wermosuenon (7)THE STRUCTURE OF THIS BOOK In order to teach you JavaScript, this book is divided into two sections: CORE CONCEPTS “Theft nine chapters introduce you tothe bases ‘of programming and the JavaScrit language. Along ‘the way youwil learn how itis used to create more ‘engaging. interactive, and usable websites. Chapter tlooks at some key concepts in computer programming showing you how computers create models of the word using daa, and how JavaScript isused to change the contents ofan HTML page ‘Chapters 2-4 cover the basis ofthe JavaScrot lanavoee. ‘Chapter 5 explains how the Document Object Model (DON) ets you access and change a document's contents while it is loaded into the browser. (Chapter 6 discusses how events canbe used to trigger code. {Chapter 7 shows you how {Query can make the process of wing script faster and easier ‘Chapter introduces youto Ajax ast of techniques that allow you to ust change part of ‘web page without eloacing the entire page. Chapter 9 covers Applicaton Programming Interfaces (APIs, including new APIs that are port of IMLS and thoseof sites ike Google Maps. @ wroouerion PRACTICAL APPLICATIONS By this point you wil already have seen meny ‘examples of how JavaScrintis used on popular ‘websites This section brings together al ofthe techniques you hae earned so fa, to give you practical demonstrations af how lavaScrptis used by professional developers. Not ony wil you see & selection of in-depth examples you wills learn more about the process of dsigrng and writing scripts from scratch ‘Chapter 10 deale with errorhanding ond debuasing, and explains more about how JavaScript is processed. ‘Chapter Tt shows you techniques for creating content panels such as siers, moda windows, tabbed panes, and accordions. Chapter 12 demonstrates severl techniques for fering an sorting dato, This includes filtering 3 szaliery of images, and re-ordering the rows ofa table by cieking onthe column headings ‘Chapter 13 deals with form enhancements and how toaldate form entries Uniess you ae already a confident programmer. you vill probably init helpful to read the book from start ois the fst ime, However, once youhave srasped the basis, we hopeit ill continue to bea helptl elerence as you create your own sitsHTML & CSS: A QUICK REFRESHER Cee ae er ee a ee Dee RU ce ROE cela RCAC oe pee td Dees ee ee ee ced ee ee ec aera ert eee ee eee en ee pee eee ceemaneaeres) ceo eaten Pree peice et ae ee ce

peach

n ee See ee em cee ee ere as ieee which elements) the Peete eee apples o, The declaration block (the aspect you want to contro, rien ee eee re cr ee RC selector andadeciaratonblock. those elements shouldappear. _forthat propery. aaa ahem clr Leet fa Sy rar tne)BROWSER SUPPORT Some early examples i this book do not work with Internet Explorer 8 and earlier (but alternative code samples that work in IE8 are available to download from http: //javascriptbook. com). We explain techniques for dealing with older browsers in later chapters. Each version ofa web browser adds new features, Often these new features make tasks easier, or are considered beter, than using older techniques But, wobsite vistors do not always keep up with the atest browser releases, so website developers cannot aay ely upon the latest technologies. ‘As you wll see, there are many inconsistencies between browsers that affect JavaScript develoners Query wll help you deal with cross-browser Inconsistencies (its one ofthe major easons why Query rapidly gained popularity amongst wed = == =) =. You need to learn to “think” like a computer because they solve tasks in different ways than you or I might approach them, Computers solve problems programmatically, they follow series of instructions, one after another. The typeof instructions they need are often cifferent to the typeof instructions you might give to another human. Therefore, thoughout th book you wil not ‘only learn the vocabulary and syntax that lavaScript uses, but you will also learn howto wt nstuctions that computers can follow. For example, when you lok tthe picture on the left how de you tll wich person s the tallest? ‘Acomputer would need expt, step-by-step Instructions, such as: 1. Find the height ofthe fst person 2.Assumehe or she the “tallest person” 3 Look atthe height ofthe remaiing people one- by-one and compare their height tothe tallest person" you have found so far 4,At each step, you find someone whose heights ‘reater than the curent “tallest person’ he or she ‘becomes the new tallest person 5.Once you have checked alhe people tel me which one the tallest So the computer needst ook at each person in turn, and foreach ont performs atest Ave they taller than the curent alles! person?" Once it has done this foreach person it can give ts answer. rae asc ormocnasmns (8)DEFINING A GOAL & DESIGNING THE SCRIPT Consider how you might approach a different type of script. This example calculates the cost of a name plaque. Customers are charged by the letter. The ist thing you should do is deta your gals for the serot Ghat you wantit to schieve) Customers can have aname added toa plaque: each letter costs $5. When a ser enters aname, show them how much t wil eos Next, break tnt a saris of asks that have tobe performed n order to achieve te gals 1. The sritis triggered when the button sccked. 2tcallecs the name entered int the form fi 3: thehecks thatthe user has entered value 4. the user has not entered anything, message wil appear tling them to enter aname. 5a name hasbeen entered calculate the cost of ‘the sign by multiplying the numberof letters by the cost per letter 6. Show how much the plaque costs. (These numbers correspond with the flowchart on the iaht-hand page) CUSTOM SIGNAGE Enter name: CUSTOM SIGNAGE Enter name: rin ers nnsben ae a CUSTOM SIGNAGE Ls i HOMASSKETCHING OUT THE TASKS IN A FLOWCHART Often scripts will need to perform different tasks in different situations. You can use flowcharts to work out how the tasks fit together. The flowcharts show the paths between each step. i ‘Get he name eter int the fom t ' Ginn> @ Ccalelate the cost of he son ters rice) t ‘hoy the cout ofthe sl on te sereen ‘Arrows show how the script moves om one task tothe next. The cifferent shapes represent diferent ‘types of tasks. In some places there ave decisions which cause the code to follow eifterent paths. ‘You wil learn how to turn this exampleinto code in Chapter 2. You will also see many more examples of diferent lowchars throughout the book, and you wil meet code that helps you deal wit each of these types of situations, Some experienced programmers use move complex cancal reservations canceled |cancelBooking) | eating 4 rooms a2 werHoD what doce: cam » © | errr conser vane ot rooting roperty | gym tase ‘cancelBookingO) decreases value of bookings sroverty | boat we heckAvalabity()_sbtrct value of Bookings property ‘fom seus of rooms property ana Totus number of eam avBtaDie Ga) THE ABC OF PROGRAMMINGHOTEL OBJECT 1. When a reservations made, the book event res 2.The book event riggers the nakeBooking() method, which inreases the value ofthe bookings property 23. The vale ofthe bookings prop \yischangedto rellect how many rooms the hotel has avaiable, ‘OBJECT TYPE: CAR EVENT happens when: method call PROPERTIES brake driverslows down changespoed) | make eww GERI iver speeds up changespecso | QUIEN and closing tag for that web page, and the 1astHodi fied property ofthe dacurent object tells youthe date this page was last update,‘OBJECT TYPE: WINDOW location. http//mwwiavascripthock com/ PROPERTIES ur. hetes/wurjavascriptook com/ lastModitied 09/04/2014 15:58:57 tile Learn Javascript & jquery ‘Abook that toaches you inanicerway Se aa ne}THE DOCUMENT OBJECT REPRESENTS AN HTML PAGE Using the document object, you can access and change what content users see on the page and respond to how they interact with it Like other objects that represent real-world things, the docunent object has: PROPERTIES Properties describe characteristics of the curent web page (such as the tte ofthe page). METHODS: Methods perform asks associated with the ‘document currently leaded in the browser (such ‘8 geting information rom a specified element or ‘adding pew content) EVENTS You can respond to events, suchas a user clicking tapping onan element @ wenscor ocearne Because all major web browsersimplement the docunent abjectin the same way, the people who ‘reat the browsers hove alrend: ‘© implemented properties that you can access to find out about the curent page in the browser '© Written methods that achieve some common tasks that you are likely to want todo with an HTML page So you wil elearning how to work with this object. Infact the docunent objects just on of set of objects that all mor browsers support. When the browse ereatesamedel ofa web page, tnt oly creates a document object, butt also creates 2 new object foreach element on the page Together these objects ar described inthe Document Object ‘Model, which yu will meetin Chapter 5HOW A BROWSER SEES A WEB PAGE In order to understand how you can change the content of an HTML Pee Seg ee OL ean Pe ee seas Toa Ce eo Tad create Usa ET ar ad Perna) ead a ee Pe acre mS ag instructions (in JavaScript) into instructions the computer can follow. eee Tee aThe bro St) Lo]SUMMARY THE ABC OF PROGRAMMING B: How do computers fit in with the world around them?HOW DO! WRITE A SCRIPT FORA WEB PAGE?HOW HTML, CSS, & JAVASCRIPT FIT TOGETHER Before diving into the JavaScript language, you need to know how it will fit together with the HTML and CSS in your web pages. Web developers usually tak about tvee languages that ar ured to create web pages: HTML, CSS, and JavaScript CONTENT LAYER hte files ‘This is where the content of the page ives. The HTML gives the page structure and adds, semantics, Where posible, am to keep the ‘te languages in separates, with the HTML page linking to CSS and JavaScript fies {css} PRESENTATION LAYER ses fies ‘The CSSenhances the HTML age with ules that statehow the HTML conten is presented ackarounds, borders, box dimensions, colors fonts, te.) Programmer olten lero this 88 separation of concerns Each lanauage forms a separate layer wth citferent purpose, Each ayer, from ett right, bulds on the previous one. javascript () BEHAVIOR LAYER ‘Thisis where we can change how the page behaves, adding interactivity. We wil im to keep ‘as much of our JavaScript as possible in separate es.‘Asmore and more web-enabled element to tell the browser it is coming across a script. Its sr attribute tells people where the JavaScript file is stored. -<100cT¥PEhem> “ht head “ ‘nto the page Ithas an atribute tht the script you crated. ne pat ty This tls the browser to find and load the seit le Gust ke the srcattribute onan 9g) @ Open the HTL file in your browser You should see thatthe JavaScript has added a gresting inthis ease, Good Afternoon! to the page. (These greetings are coming from the JavaScript fie they ae notin the HTML file) Pleate note internet Exlorer sometimes prevens avaScrist running when you open page stored on your hard dive. tis alfects you, please try Chrome, Felox, Opera or SafrinsteadTHE SOURCE CODE IS NOT AMENDED If you look at the source code for the example you just created, you will see that the HTML is still exactly the same the browser) © The source ofthe web page does not actualy show the new clement that ha been added into the page; it just shows the nto the avaSerot le the book Ge) THe ABc oF PROGRAMMINGPLACING THE SCRIPT IN THE PAGE You may see JavaScript in the HTML between opening tags (but it is better to put scripts in their own files). stocriee wst= Frat. ey opning te aoe" ratiremvng te se aicscanstrative sep co. - itt mbterteteet” heefe‘essfotast ponontashornen bas = ep uoonebe sero! tag and the closing ‘Scriancnet wt secon ) ta The eration Sete leer nededbecasethe Bron a orders and toutes plese eat Inaction the TL poe cosabaeenye siete \s noted on p44, itis better it saad ono not to ma JavaScript in your HTML pageslite this, but ts ‘mentioned ee a you may comeacros ths technique © open the TM fein your web rower and tin were @ ‘etn wten othe pe Conroe & Co. AAs you may have guess, docunent.writel) writes iaccoaa ‘content into the document (he web page. tis simple way “acta toadd content to a page, but not always the best Chapter S discusses various ways to Update the content ofa page.HOW TO USE OBJECTS & METHODS Be Ree Se cn a eee ed Programmers refer to this as calling a method of an object. Ce eee Sea one cree resent: eee eres peers ———— — document.write('Good afternoon!' (javier Siena ee ot ret eer pee Pere Cee ee eee ete See fener callthe object and method, andthe dacunent object, and lots the words appear on the screen, et ee er) fee eeeernr ire meee i Sete aa et en arte ee Peart epee (OmenJAVASCRIPT RUNS WHERE IT IS FOUND IN THE HTML MTree eee ea et ace eC) cu eee ea ee cs Pas GOOD AFTERNOON! SeaSUMMARY THE ABC OF PROGRAMMING C: How do | write a script for a web page? >JAVASCRIPT INSTRUCTIONSIn this chapter, you will start learning to read and write JavaScript. You will also learn how to give a web browser instructions you want it to follow. ‘THE LANGUAGE: GIVING INSTRUCTIONS: SYNTAX AND GRAMMAR, FOR A BROWSER TO FOLLOW Like any new language, there are new Web browsers (and camputersin genera words to learn (the vocabulary) and ules approach tasks ina very diferent way than forhow these canbe put together (he ‘ahuman might Your instructions need to srommar and syntax of the language). refiect how computers get things done. ‘We wilstar with few of the key building blocks ofthe langage dnd look at how they con be used to wrte some very basic scrips consisting ofa fw simple steps) before going onto look at some more complex concep in subsequent chapters. (Gy msec anvearnrvereer keSTATEMENTS A script is a series of instructions that a computer can follow one-by-one. Each individual instruction or step is known as a statement Statements should end with a semicolon, ‘We wllook at what the cade onthe right does shot but forthe momeat note tat ‘© Eachol the lines ofcodein green sa statement (©The pink curly braces indicate the start and end cof cade black (Each code block could contin ‘many more statements) 1© The code in purple determines which code should run (es you ill se on p145). JAVASCRIPT IS CASE SENSITIVE JavaScripts case sensitive so hourNow means ‘something diferent to Hour or HOURKOW. ‘STATEMENTS ARE INSTRUCTIONS AND EACH ONE STARTS ON A NEW LINE Atatementis an indviual instruction that the ‘computer shoud follow. Each one shoud start on 9 ‘ew line and end witha semicolon. This makes your ‘code casero read and oo The semicolon aso tls the JavaScript interpreter when astep is over indicating that it should move tothe nest step. var today = new Date(); var hourNow = today.getHours(); var greeting if (bourtow > 18) ( greeting = ‘Good evening's } else if (hourtow > 12) ( greeting = ‘Good afternoon’ | else if (hourtiow > 0) ( greeting = "Good morning’; } else ( greeting = 'Welcone'; docunent..write(greet ing) STATEMENTS CAN BE ORGANIZED INTO CODE BLOCKS Some statements ae surrounded by curly braces ‘these are known a code blocs, The closing curly braces not followed bya semicolon ‘Above, each code block contains one statement related to what the current time i. Code blocks willoften beused to group tegether many more statements, Ths helps programmers organize their ‘code and makesit more readable.COMMENTS You should write comments to explain what your code does. They help make your code easier to read and understand. This can help you and others who read your code. (* This script displays a greeting to the user based upon the current tine. It 4s an example from JavaScript & jQuery book */ var today = new Date(s var hourtow » today getHours greetings /f Create 2 +1] Find the // Display the appropriate greeting based on 44 (hourkow > 18) { greeting ~ "Good evening's ) else if (nourtow > 12) { greeting = "Good afternoon's } else if (nourtow > 0) { 1 Seton = Cotsen greeting = ‘Welcome; 1 document write(areet ing); MULTI-LINE COMMENTS To write 2 comment that stretches ver more than one line, you use multitine comment, starting with the /* characters and ending withthe */ characters. ‘Anything between these characters isnot processed by the JavaScript interpreter. ‘Mult-ine comments ar aften used for descriptions ‘of how the seript works, orto prevent a section of the script from runing when testing it new date object current hour the current tine JavaScript code is green Multiline comments re pink Single-fine comments are gray ‘SINGLE-LINE COMMENTS Ira singletine comment, anything that follows the two forward slash characters //on that line wil not bbe processed by the JavaScript interpreter. Single- line comments are often used for short descriptions ‘of what the code doing {Good use of comments willhelp you you come back o your code aller severa days or months. ‘They aso lp those who are new to your code.WHAT IS A VARIABLE? Ascript store the bits of information it needs to do its job. It can store this data in variables. ill have to temporarily ‘When you write JavaScript, youhave to tele Interpreter every individual step that you want it to perform. This sometimes involves more deal than you might expect Think bout calculating the area of wall ia math the area of arectange is obtained by muipying two with x height = oreo You may beable to de calculations Wie thisin your head, but when writing 9 erp to de this ‘aleulation, you need to give the computer very detailed instructions. You might elt to perform the {allowing four steps inorder: 1. Remember the vale for width 2.Remember the value for height ‘3. Multiply width by height to get the oreo 4.Retuen the result othe user Inthis case, you would use variables to“ernember the values for width and eight. This ls ilustrates how a script contains very explicit instructons about ‘exactly what you want the computer todo.) You can compare variables to short-term memory, because once you leave the page the browser will forget any information holds,A variable is a good name for this, concept because the data stored ina variable can change (or vary) each time a script runs. No matter what the dimensions of any inaviduat wallare you know that you find its ara by tiplyingthe width ofthat wal by its height Similarly, serps often need to achieve thesame soa even when they are run wih liferent data, so ‘arabes canbe used to represent values in your scp that are likely ochonge. The results ai to be calelated 0” computed using the data stored in the variables, The use of variables to represent numbers or other nds of datas very ilar tothe concept of algebra (here eters are used to represent numbers. There one key ditterence, however. The equals sign does something very diferent in programming (as you wil see.on the next two pages. BASIC JAVASCRIPT INS ns (59)VARIABLES: HOW TO DECLARE THEM Before you can use a variable, you need to announce that you want Ce a eee eee ee eee ens DRE Soca quantity; itn 6 on ee ee aa edVARIABLES: HOW TO ASSIGN THEM A VALUE CNM te ERC aCe Oa aun] PO Oa Rae Ce UE ue Rea the variable. (ofr Ua aA = er See) ere ssignment opera rrr valueto peer ee een reeDATA TYPES JavaScript distinguishes between numbers, strings, and true or false values known as Booleans. NUMERIC DATA TYPE “The numeric datatype handles numbers. 0.75 For tasks that involv counting ‘or calculating sums, you wil use numbers 0-9, Fr example, Five thousand, two hundeed ond Seventy-two would be written 5272 (note there smo comma betwoen the thousands and the hundreds. You can also have negative numbers (such .35-23678) and decimals (hee quarters is witen 8 0.75) Numbers are not ony used for ‘things like caleuatrs;they ‘are ago used for tasks such 25 determining the sie ofthe screen, moring the position of anelement ona page, or setting the amount of time an element should take to fade, STRING DATA TYPE ‘Thestrings data type consists of letters and ether charactor, "Hi, Ivy!" Note how the string datatypes ‘enclosed withina pair af quotes. These canbe single or double quotes, but the opening quote ‘must match the closing quot, ‘Strings can be used when working with any kind of tot ‘They are fequertly used toadd ‘new content into a page and they {an contain HTML markup. BOOLEAN DATA TYPE Boolean datatypes can have one oftwo values: true or false. true Itmight seem alittle abstract at first, but the Boolean datatypes actully very helpful. You canthinkof tattle tke 2 light switch itis ether on or of ‘Asyou wll seein Chapter 4, Booleans ae helpful when etermining which part ofa script shoul un Inaddtion to these tree data types, JavaScript aso as others (arrays, ‘objects, undefined nd nul) that you wll met in later chapters. Unlike some other programming languages, when declaring avaiable in JavaScript, you donot need to specify what typeof dat ll hold JASIC JAVASCRIPT INSTRUCTIONS.USING A VARIABLE TO STORE A NUMBER nm cat/is/nnericorariabie.ja Heft thre variables are created teaver sar an var pees peal Sheet: Invi He : © quantity holds the number hie Sissons auantity = 4s ta tle ctl ‘total = price * quantity; the tiles var el = docunent.getélenentById("cost") "Note that the numbers ae not Meeatontent = totals trunnion nets reste as eed ‘Srvutleyoucan unto = theron e st EST aa at Value (much ike you might have done in aigebra). Here, the total costs calculated by mutilying the pice ofa single tile by the numberof es the customer wants, “Elderflowers/ni>

Cost: $5 per tile

“images/preview.jpg” alt=*Sign* /> ‘The raul then writen into the page onthe final two lines. ‘Yu see tis technique in more eta on p94 and 216, The fist ofthese two lines finds the clement whose id attribute has value of cost, and the final CUSTOM SIGNAGE line replaces the content ofthat ‘element with new content, ie am "Note: There are many ways to MONTAGUE+HOUSE mime cones tune peat oad several places youcan place your script. The advantages and disadvantages ofeach technique are dscussed on p226, This technique willnt workin IES, BASIC JAVASCRIPT INSTRUCTIONSUSING A VARIABLE TO STORE A STRING For the moment concentrate on siaaaeatiadi the first four lines of JavaScript hi latinas EX Two variables ae declared (asernane andiessage) and they are used to hold strings (the tsers mame and a message for that use. var usernane; var message; username = 'Wolly's Inessage = ‘See our upcoming range’ var elName = docunent.getElenent8yld (‘nare! elllane.textContent » usernanes var elNote = docunent.getflenent8y Id (‘note elllote.textContent = messages ‘The code to update the page (shown inthe lat four lines) Fs giscussed flyin Chapter 5. ‘Thiscode selects two elements sing the values oftheir attributes. The text in those Semens supantedusngtne stings = values stored in these variables. aastimaenies

Hondy ‘friend1

Take a Took around. .. [Note how the string is placed Inside quote marks. The quotes canbe single or double quotes. ‘but they must match. Hyou start with single quot, you must end with single quote, and if you start with a double quote, you ‘must end with double quote: © "hello" © "hello! © “hello! © *hetto* Quotes should be stright (not curly quotes: + Oun Oo Stings must always be written conone line © ‘See our upcoming range’ © "See our upcoming range’USING QUOTES INSIDE nn ct2/s/strieg var title: var messages title = "Molly's Special offers*; message = ‘"s ehquntes 38 ver elTitle = docunent getElenentsyld("titie'); elTitle.innerHTM = titles ver elllote = docunent.getElement8yfd (‘note’); elNote, imertTML = messages Pir) t/stringoth-qotes hal Elderflowers/hi>

Spectal Offersé/div>

Second, Booleans are used when your code can take more than (one path. Remember, diferent code may tun indifferent circumstances (as shown in the flowcharts throughout the book). ne aL Ce ae t ‘The path the code takes depends ‘on atest or condition BASIC JAVASCRIPT INSTRUCTIONSSHORTHAND FOR CREATING VARIABLES Davascairn | sear @ var price var quantity = 14; var total = price * quantity; @ var price, quantity, tote price quantity = 145 total = price * quantity; © var price = 5, quantity = 14; var total = price * quantity; ® // Write total into the elenent with id of cost var el = document gett lenent8yld( cost); eltextContent = '§' + total; fs Oe ae CUSTOM SIGNAGE ome o MONTAGUE*HOUSE Programmers sometimes use shorthand to creat variables Hee ae three vatations of how ta declore variables and assign them values: 1. Variables are declared and values assigned inthe same statement 2. Three vaclabes are declared onthe ameting, thn vals assigned to each, 23. Two variables are declored and asigned values onthe same line. Then one is declared and ‘sslgned a value onthe next ine. (The third example shows two numbers, but you can declare variables that hold ferent types of data onthe same line, eg. astringanda number) 4. Hore, avaiable used to hold aeference to an element in the HTML page. This allows you te work directly with the element storedinthat variable. Gee ‘more about this on 190) ‘While the shorthand might save you te bt of typing it can make your code alittle harder to follow. So, when you are starting of, you wil ind teaser tespread your code over afew ‘more ines to make easiero read and understandCHANGING THE VALUE OF A VARIABLE Once you have signed a vale lanl toa variable. youcanthen MLE ry EX change whats stored inthe var instocks ‘viable later inthe same scrip. var shipping; (Once the varible has been instock = true; created, you donot need to use the var keyword to assign ane ast apm a outset spe other processing might go here and as creme, te Srp igh edt ge is Sona bene inStock » false; shipping = trues Forexample the value of shipping variable might start outasbeing false. Then somethingin the code might change the abilty to ship the Item and you coud therefore change the value to true. var elStock * document .getElementayId(stock'); elstock.classlane = instock; var elShip = docunent.getElenent8yid(’shipping')s elShip-classNane = shipping; Inthis code example, the values ro af the twovariabes are bth “wapped trom beng true to false andvie versa rf BLD CU ROL UG, svatabie: © Shipping: @ @ asic avasemor meraucrionsRULES FOR NAMING VARIABLES Here are six rules you must always follow when giving a variable a name: 1 ‘Thename must begin with letter, dollar sign (8),oran underscore (It must not start witha rumber 4 Allvariabes ce case sensitive, 50 score and Score wouldbe Geren variable names, but itis bad practice to createtwo ‘arabes that have the same nameusing diferent cases. 2 The name can contain letters, ‘eumbers, dollar sign (8), or an underscore), Note that you ‘must nat useadash (ora period () na variable name. 5 Use aneme tht describes the Kind of information that the variable stores. For example, ‘irsthiane might be used to store a person's fist name, Jastiane for thei last name, and age for their age. 3 You cannot use keywords or reserved words. Keywords are special words that tll the interpreta todo something. For example, varisa keyword used to declare a variable. Reserved words are ones that may be used ina future version of JavaScript. ONLINE EXTRA ‘View afllist of keywords and reserved words in JavaScrit. 6 Ifyour variable name is made ‘up of more than one word, use2 capital letter forthe fest eter of every word ofterthe first word. For example, Firsthane rather than firstrane (this is efetred toascamelcase) You can also use an underscore between each word (you cannot use a dash)ARRAYS An array is a special type of variable. It doesn't just store one value; it stores a list of values. You should consider using an For example, an array canbe ‘As you willseeon thenext page, array whenever you are working suited to string the individual valuesinan array are separated withalistorasetof values that tems on ashoppnglist because by commas. arerelated to each other ita let of ralated tems. In Chapter 12, you willse that ‘rays re especialy helpful Adutonaly each ie you wtte —_acrays canbe very helpfulwhen ‘when you donot know how ‘anew shoppinglist the number representing complex data, ‘any items alist wll contain cofitems.onit may cite. ‘because, when you create the array, you donot need to specity how many values it wil hold Hf youdon't know how many itemsa ist wll contain, rather than creating enough variables fora long list (when you might only use a small percentage ofthe), using an array is considered a beter solution.CREATING AN ARRAY ‘You create an array and give it ‘name just tke you would any EU sf injaeaytis var colors other vibe ing the vir Colors = ['white', ‘black, ‘custon']s Keyword flamed bythe amet " a the array). var ef = document. get€ enentByid(‘colors")s s eae ‘The values are assigned to the el.textContent = colors[o]; ray inside alr of square brackets and each valves separated by a comma. The ro value inthe array donot need tobe the samedata type, so you Can store astrng. a number and ‘3 Boolean alin the same aay “histechniquefor creating an xrays known as an array teal. tis usually the preferred ‘method for reating an array. Color: white Yow can also write each value on aseparatine colors = ['vhite', ‘ptack’, custom); En //array-constructor COnthe ltt, you can see an var colors = new Array( white’, array created using a diferent "black", ‘technique called an aray “euston’); constructor This uses the new keyword followed by array) var el = docunent. gett TenentByld("colors'); The values are then specified el. innerHIML = colars.iten(0)s Inparentheses (oot square brackets) and each values separated by acomma,Youcan ‘The arayIteal shown in the fist code sample) is preferred over the ‘also use a method called tte) aay constructor when creating arrays tretrieve data om the array. (The index number ofthe items spectied inthe parentheses)VALUES IN ARRAYS Values in an array are accessed as if they are in a numbered list. It is important to know that the numbering of this list starts at zero (not one). NUMBERING ITEMS IN ACCESSING ITEMS IN. NUMBER OF ITEMS IN AN ARRAY AN ARRAY, AN ARRAY Eachiteminan arrays Toretrievethethrditemonthe _Eacharray has a property called automatically given a number list the aray names speciied _Tength, which holds the number called anindex.Thiscanbbe used alongwiththeindexnumberin_of tems inthe arc. toaccess specific items inthe sauore brackets. array. Consider the flowing Below you can see that variable array which holds tee colors: Hee youcan see avaiable called nunColors ie declared. ks called itenThreeis declared. ‘ale is sett be the number of var colorss Its values sett be the tied the items inthe array. colors = [white’, color frm the colors acray. “pack*, ‘The name ofthe array is custon" var itexthr followed bya period symbol or Steathree = colors(2]i ful stop) which then followed Contusingy index values start at bythe length keyword. 0 (not, 50 the folowing table shows items from the aeay and var nuntolorss their corresponding index values: runcolors = colors.tength; Inpex VALUE © ‘white! 1 ‘black* 2 ‘custon’ ‘Throughout the book (especialy in Chapter 12) you meet more features of arrays, which are very flexible and powerul feature of JavaScriptACCESSING & CHANGING VALUES IN AN ARRAY Piavasceirr | ishmdatearray.js Telistlines of code on thet elie fmdatearr 3s create an array containing ist of three colors. The values can be added onthe same ine orn separate ines as shown here) JJ Create the array var colors = [‘white’, "plack'y ‘custom's custom) Having create the aay the thir item onthe ist is changed J Update the third item in the array Smee colors(2] = ‘beige’: Toaccess value from an aray, after the aray name you specify ‘the index number fr that value Inside square brackets. Jf Get the elenent with an id of colors ‘var el = docunent .getElementByld('colors'); ‘J Replace with third item fron the array fel.textContent = colors(2]s eerie ivaiten item an array by selecting it and signing anew valuejust as you would anyother variable (sing the equals sign andthe ew vale for thatitem. Inthe last two statements the ‘newly undated third item inthe aray is added othe page you wanted to write cut allot Color: beige theitemsin an array, you would ‘use loop, which you wll meet ‘onpi70. [BASIC JAVASCRIPT INSTRUCTIONS (73)EXPRESSIONS An expression evaluates into (results in) a single value. Broadly speaking there are two types of expressions. 1 EXPRESSIONS THAT JUST ASSIGN A VALUE TO A VARIABLE Inorde for variable tobe seul needs tobe sivena value As youve seen tisis done using the assignment operator th eal sig var color = 'beige'; The value of color is now befge. ‘When you frst declare a variable using the var beywor itis gvena special value of undefined. This wll change when you assigna value to it Technically undefined sa datatype ikea number, string, Boolean @ taste snvasener nerves 2 EXPRESSIONS THAT USE TWO OR MORE VALUES TO RETURN A SINGLE VALUE You can perform operations on any numberof individual values (so next page to determine a single value. For example: var area = 3 * 2; The valu of reais now 6 Here the expression 3* 2 evaluates into. This ‘example also uses the assignment operator, so the result ofthe expression 3" 2s stored inthe variable called area ‘Another example where an expression uses two ‘values to yield single value would be where two Steins are joined to create a single stigOPERATORS Expressions rely on things called operators; they allow programmers to create a single value from one or more values. Covered in this chapter: ASSIGNMENT OPERATORS, ‘Assign avalueto avaiable ‘The valve of colorisnow beige. ARITHMETIC OPERATORS, Perform basi math area = 3 * 2; ‘The value of area snow 6 STRING OPERATORS Combine we stings "HE + "Molly's, The value of greeting ismow Hi Wolly. Covered in Chapter 4: COMPARISON OPERATORS Compare two voles and rtuen true or false buy = 3 > 5; The value of buys False Gee 150) LOGICAL OPERATORS Combine expressions and return true or false buy = (5 > 3) && (2 < 4); “The value of buy is now true. Gee 156) sastcnvasemr msravcrons (2)ARITHMETIC OPERATORS JavaScript contains the following mathematical operators, which you can use with numbers. ‘You may remember some from math class. ADDITION di ‘Adds one value to another w+s 5 mecean E eneatatelciavoke : DIVISION J passives w/s 2 INCREMENT, + Adds one to the current number n ee eee rae : ORDER OF EXECUTION Several arithmetic operations canbe performed in one expression, butt isimportant tounderstand how the result willbe calculated. Multiplication ‘and division are performed before odin or subtraction, “Thiscan affect the number that you expect tosee. Toilustrate this effect, lok tthe folowing examples. remainder Here the numbers are calculated left right, sothe totals 16: total = 26 44 105 But in the following example the totais 42 (not 60): total = 244 * 10; ‘Thisis because muitiation and division happen before addition and subtraction, east avascmir msraverions ‘Tochange te order in which ‘operation are performed, place ‘the calelation you want done fist inside parentheses. So for the flowing the totals 60: total = (2+ 4) * 1 The parentheses indicate that the 2is added othe 4, and then ‘the resulting figures multiplied by10.USING ARITHMETIC OPERATORS Ex Benet ator jx TH @cample demonstrates how Hefertimetic-opereor-3+ mathematical operators are used var subtotal = (13 + 1) * 5; // Subtotal is 70 withnumbers to calculate the var shipping = 0.5 * (13 +1); // Shipping is 7 combined values of two cost. var total = subtotal + shipping; // Total ts 71 Theis couple of ines create iinieialiamiail two variables: net store the var elSub = document getETesent8yI4( subtotal): subtotal ofthe order the other sites tohold the cost of shipping the order: so the variables are named accordingly: subtotal ‘and shipping. Sub. textContent var elShip = docunent. get] enent8yid( shipping’ elship.textContent = shipping: var elTotal + docunent.getEementByid(*total'); On the thidtine, the totais elTotal textContent calculated by adding together these two values This demonstates how the mathematical operators can use variables that represent numbers. (That's, the numbers ‘donot need to be writen ‘eolctly into the code) The remaining ss tines of code ‘wit the results tothe scree, sasicavasenr nsrmucrons (@)STRING OPERATOR There is just one string operator: the + symbol. It is used to join the strings on either side of it. There are many occasions where For exemple, you might havea first and lst name in two separate youmay need join twoor ‘variables and want to jin them to show afllname. In ths examplo, the ‘merestrings to createasngle variable called fu INane would hald the tring Ivy Stone value Programmers callthe process fjoiningtogether two var firstilane = ‘Ivy " ‘or more stings to create one var LastName = *Stone's now string concatenation var fullNane = firstNane + TastNanes MIXING NUMBERS AND STRINGS TOGETHER When youplace quotes around —fyoutry toad anumeric data you ry to use any the other number itis asting not typetoastring.thenthenumber arithmetic operators ona sting, ‘a numeri datatype), and becomes partofthestiing.eg., then the value that results is you cannot perform alton adding ahouse number toa usualy a value called NaN This ‘operations on stings. strvet name: rmeans"not a number” var cost = 17's var number = 125 var score * "seven var cost2 = *9'; var street = "Ivy Road! var score? = ‘nine’ var total = costl + cost2; var add = munber + street; var total = score * score2s Youwouldendupwitha string Youwouldend upwithastring You would end up withthe value saying "79: saying *12Ivy Road” va sate nvatcpr MermicrONEUSING STRING OPERATORS strig-opertorjs THsesamplevil ply @ EE coe) sfstria-oerator 3s naaed welcome message var greeting = ‘Howdy "; oe var ane = "Molly's enn The first line creates a variable called greeting, which stores the message forthe user, Here var el = docunent getElenentById(*greeting'); the greeting is the word Hon. el.textContent = welcomelessage; var welconeHessage = greeting + nane + ' ‘The second ine creates a ‘arable that stoves the name of the user. The variables called name, ad the userin tis cases Molly. Ps) ep srigapr Elderflowers/hi>

Hel10 friend!

class="action">Pay Nows/a> @ erste savascnier mstRUcTIONS Basic JavaScript Instructions ~EXAMPLE BASIC JAVASCRIPT INSTRUCTIONS This example combines several techniques that you have seen throughout this chapter. You can se the code fr this example on the next two pages. Single line comments ae used to describe what each section ofthe cade does. ‘Tostart, three variables are created that store informatio thats used ‘nthe weleome message. These variables ar then concatenated (ined together to creat the fullmessagethe user sees The next part ofthe example demonstrates how basic math is performed on numbers to calculate the cost of sign. '© A variable called sign holds the text the sgn will show. 1© A property called Tength is used to determine how many characters, aein the string (you will meet his property on e128). 1 The cos ofthe sign (the subtotal is calculated by multipying the ‘umber of tes by the cost ofeach one. ‘© The grand totais created by adding $7 for shipping Finally, the information is witten into the page by selecting elements and then replacing the content ofthat element (sing technique you ‘meet flyin Chapter), lt selects elements rom the HTML page using ‘the vale oftheir 1d attributes and then updates the text inside those clements ‘Once you have worked your way through his example, you should have good basic understanding of how dat is stored vaables and how to perform basic operations with the data those variables. sasicsavascaprinstmucTionS (fiEXAMPLE BASIC JAVASCRIPT INSTRUCTIONS a2/ecnple. tent i -<1D0CTYPE htmi> Elderflower

‘

Hellol

table> tr ‘ jserSign'*> JQuery - Chapter 2: Baste JavaScript Instructions - tiles: $ Shipping: $ Pay Nowe/a> "js/example.js*> On eeSUMMARY BASIC JAVASCRIPT INSTRUCTIONS.EXAMPLE BASIC JAVASCRIPT INSTRUCTIONS Ea a/Js/eramptenis // Greate variables for the welcove message var greeting = "Howdy"; var name = ‘Molly's var message = ', please check your order:'; // Concatenate the three variables above to create the welcone message ‘var welcome = greeting + nae + nessa; Jf Greate variables to hold detatls about the sign ‘var sign = ‘Montague House's var tiles = sign.lengt var subTotal = tiles * 55 var shipping = 75 var grandTotal = subTotal + shipping: J/ Get the elenent that has an id of greeting ‘var el = docunent .getélenentByld('greeting') ; // Replace the content of that elenent with the personal ized welcone message el. textContent = welcome; // Get the elenent that has an id of userSign then update its contents. ‘var elSign = dociment.getE]enentById(*userSign')¢ elSign.textContent = sign; // Get the elenent that has an id of tiles then update its contents var elTiles = document getElenentByld(*tiTes'); elTiles.textContent = tiles; J Get the elenent that has an 1d of subTotal then update its contents ‘var elSubTotal = docunent.getElenentByld{'subTotal'); elSubTotal.textContent = '5' + subTotal; J/ Get the element that has an id of shipping then update its contents ‘var elSubTotal = docunent .getElenentById(' shipping" elSubTotal.textContent = 'S' + shipping: // Get the elenent that has an id of grandTotal then update its contents var elGrandTotal = docunent .getElenent8yId (‘grandTotal"); elGrandTotal.textContent = ‘$* + grandTotal; asic mvasenrineravcnions (@)SUMMARY BASIC JAVASCRIPT INSTRUCTIONS (@3) BASIC JAVASCRIPT INSTRUCTIONS. FUNCTIONS, METHODS & OBJECTSBrowsers require very detailed instructions about what, we want them to do. Therefore, complex scripts can run to hundreds (even thousands) of lines. Programmers use functions, methods, and objects to organize their code. This chapter is divided into three sections that introduce: FUNCTIONS & OBJECTS, BUILT-IN METHODS OBJECTS Functions consis ofa In Chapter yousaw that The browser comes with sie of statements prowrammersuse bjects ast of objects that act thathave been groupes __—_—tocreatemodelsaf he lea tol to creating together because they word using data, andthat interactive web pages. periorm aspecific task. objects are made up of This section introduces Amethodisthe same 3s® properties and methods. __youtoanumber of ulin function. exceptmethods _inthissection, youlearn “abject, wich you wil recreated inside (andare how tocreateyourown then see used throughout part of) an object. objects using JavaScript. theres ofthe book. @ smerons nemons woesWHAT IS A FUNCTION? Functions let you group a series of statements together to perform a specific task. If different parts of a script repeat the same task, you can reuse the function (rather than repeating the same set of statements). Grouping together the statements that are requited to answer a question or perform a taskhhelps organize your code Furthermore, the statements ina function ae not always executes wena page loads, so functions aso offer a way toto the steps ‘needed to achieve a task. The script can then ask the function te perform alot those steps as and wien they are required, For example, you might have ‘tos that younly went to perform f the user clicks on a pectic element the page Ifyou ae going to ask the function to perform ts task later, you ned to give your funtion aname. That ame should describe the task tis performing. When you skit perform ts task, tis known 2s calling the function. ‘The steps that the function needs to perform in order to perform ts task re packaged ‘pina code block. You may remember from thelast chapter that acode block consists of one ‘or mote statements contained within curly braces. (And you do ‘ot writea semicolon after the closing erly brace = ke you do attr statement) Some functions need tobe provided with information in ‘arder to achiovea given task For sample a function to caeulate the aea of abox wouldneed to know its width an height. Pieces of information passed toa lunetion ae known as parameters ‘When you write function and you expect ito provide you with an answer, the response is own 353 return value. ‘On the right theres an example of afunetion in the JavaScript file: scaled updatedessage(). Dorit wor ifyoudo not understand the syrtaxof the ‘example onthe ight: you wll ‘take close look at how to write and use functions inthe pages that follow. Remember that programming languages often rely upon on rname/vae pis. The function has 8 name, updatekessage and the vale is the code Bick (ich consists of statements). (Wen you cal the function by ts fname, those statements wilrun ‘Yu canals have sronymous functions. They donot have a ‘name 50 they cannot be called Instead, they are executed as soon a the interpreter comes across them.A BASIC FUNCTION Inthis example, the users Belore the closing shownamessone atthe topo! tag, oun see the link tothe ‘the page. The meszage i el JavaScript ile. The JavaScript InanHTML clement whose 1d _fllestarts with avarable used attributehasa value ofmessage, _toholdenew message, andi ‘The message is ging tobe followed by afunction called changed using JavaScript. updatenessase() <1D0CTYPE heml>