DOUG LLOYD: áá ááááá, áááááááá áááá£á¬ááááá áªáááá á§á£á ááá¦áááá¡ á«ááááá ááááá áá¢á£áá ááááááá¢áá¡ JavaScript á áá áá¥ááá á¨ááá«áááá ááá¡áá®áá á®ááááá á áááá¡ááª áá¥ááá ááá¬á§ááá£áá áá£á¨áááá áááááá£ááá áááá¡ ááá áááá áááá áá á¨ááªáááá¡ á¨ááááá á¡á áá¥áááá ááá áááá áá on the fly. áá áá¡ áªáááá áááá£áááá¢áá¡ ááááá¥á¢á£á á ááááááá¡. áá¡á á áá, á áááá áª á©ááá áááá®áá á©áááá ááááá JavaScript, ááááá¥á¢áááá¡ á«ááááá ááá¥áááá. áá áá¡ááá á¨ááá«áááá á¨áááªááááá¡ á¡á®ááááá¡á®áá á¡á¤áá áá¨á. ááá£á®áááááá áááá¡á, á áá á©ááá áá  á¬áá¡áááá¡ áááá á ááá¢ááá£á áá, áá á¡á¤áá áááá¨á áá áááá¡ááááá, á áá á©ááá, ááááá, á£á¤á á á¡áááááááá áááá£á¬ááááá ááá áááá¢áá¥á¡á¢á¨á ááááá¥á¢á, ááá¨ááááª áá, áá áááá¡ááááá¡ á¨ááá«áááá áá§áá¡ á¡á®áá ááááá¥á¢ááá. áá á¨ááááá áá ááááá¥á¢áááá¡ á¨ááá«áááá á¡á®áá ááááá¥á¢ááá. 

áá¥ááá áá¡ á«ááááá áááá ááááá¥á¢á áááá á á¡á®áá ááááá¥á¢ááá á¨ááááá, á ááááááª áá ááááá á á¥áááá¡ áá¡ áááá áááá á®á. áá®áá, áááá£áááá¢á ááááá¥á¢á áá áá¡ áááá¡ááá£áá ááá£áá ááááá¥á¢á JavaScript á ááááááª áá ááááááááá¡ áá¥áááá ááá áááá áá áááááááá¡ áá á¡áá®áá¡ á¥áááá ááááá¥á¢á. áá¡á á áá, á¨ááááá áááá£áááá¢á ááááá¥á¢áá¡ ááááá¥á¢ááá á¬áá áááááá¡ á®áááá«á¦áááááá áá á¡á®áá£ááá¡ áá¥áááá¡ ááá áááá ááá. 

Inside áá á¡á®áá ááááá¥á¢áááá¡ áá á.á¨., áá á.á¨., á¡áááá áá¥áááá ááá áááá áá áá¥áá¡ áá áááááááá£áá áá§á áá áááá ááááá¥á¢á. á á áá áá¡ áááááá§áá á áá¥, áá á? ááá ááá áááªáá, áá£ á áááá  á£ááá ááá£á¨ááá¡ ááááá¥á¢áááá¡ JavaScript. 

áá¡á á áá, áá£ á©ááá áááá¥áá¡ ááááá¥á¢á, á ááááááª áá®ááá ááááá á©áááá ááá-áááá áá, á ááááááª ááá¨áááá¡ ááá ááááá á¡á¬áá á áááááááá áááááá£ááá ááá, á áá ááááá¥á¢á áá á¨ááªáááá¡ ááá áááá£áá ááá¡á áááá¡ááááá, á©ááá á¨áááá«áááá á¨ááªááááá ááááááá¢ááá á©áááá áááá áá áá ááá ááá£ááá ááááá§áááááá JavaScript áááªáááá, á áááááááª ááááá¥á¡áá¡ á áá, ááá¥ááá, HTML. áá¡á á áá, áá¥ ááááááááá á«ááááá ááá á¢ááá ááá áááá áá, áá á? áá¡ ááááá¦á HTML tags, á®áááá«á¦áááááá. 

á¨ááááá áá áá¡ á¡áá®ááá¬ááááá, Hello World. ááá¨áá áá áá áááá. á¨ááááá á áá, áá ááá¥áá¡ á¡ááá á¡á®ááááá¡á®áá á áá. ááá¥áá¡ h2 header tag, áá£áá¥á¢áá¡, áá ááá£áá. áá¡ áá áá¡ á«ááááá ááá á¢ááá ááá-áááá ááá. 

áá¡á, á á á¨ááá«áááá áááá£áááá¢á á¬ááááá¦ááááá áá á°áááá¡? áá¡á, áá¡ ááá¢áá á á¡áá¨ááááá áá¥ááá ááá áááá. áááá áá áá¡ ááááááááá áááá á®á. áá á«ááááá root áá¡ áá áá¡ áááá£áááá¢á. 

Inside áááá£áááá¢áá¡ á¡á®áá ááááá¥á¢áá¡ áá£ááá¡á®ááááá HTML á©ááá¡ áááá ááá. áá HTML á©ááá áááá áá áá áá¡ á§áááá áá. áá á¨ááááá á¨ááááá HTML ááááá¥á¢á, ááá¥áá¡ á®áááá«á¦áááááá ááááá¥á¢á, á ááááááª áá®ááá á§ááááá¤áá á. 

áá á¨ááááá áá á¡ááááá¡, ááá¥áá¡ á¡áááá£á á ááááá¥á¢á. áá á¨ááááá áá á¡ááááá¡, ááá¥áá¡ ááááá áá áá á¬ááááá¦ááááá, á áá á£áá áááá áááá¡áááááá áá¡áá¤áááá¨á. áá á¨ááá«áááá á©ááá á¡á®áá£áá á¬áá áááááááááá ááá¡á¬ááá¡ áá¡. 

á©ááá¡ á¡á®áá£áá¨á, ááá¥áá¡ h2 ááááá¥á¢á áá p ááááá¥á¢á áá£áá¥á¢áá¡ áá ááááá¥á¢á ááá£áá¡. áá¡á á áá, áá¡ ááááá ááá áá á¥áá á¨ááá«áááá á¬áá ááááááááá áá§áá¡ á áááá áª áááá á®á á£ááá ááá ááá¢áá á ááá¢áá á á áá ááááááá¡ ááá. áá®áá, á á áá¥áá á£ááá, á áááá¡ááª á©ááá áá ááá áááá ááá, á©ááá áá  áá¤áá¥á áá, á áá, á áááá ááªáá áááá á®á. á©ááá áááááá, á áá á¤áá¥á¢ááá ááá áááá áááááá¨áá ááá£áá á áá. 

áá á¡áááááááá áá, á©ááá á¨ááááá«ááá áááááá§áááá á©áááá ááááááááá á ááá¡á¢á á£áááá¢ááá á áááá£á áá á¨ááá®áááá áá ááá áááá£áááá¢á ááááá¥á¢á. áá ááááá ááááááááá, á áá. áá¡á á áá, áá ááá®á¡ááá¡ áá áá£ááá áá¡ tab. 

áá áá ááá®á¡ááá¡ á¨ááá¥ááááá ááá¡á¢á á£áááá¢ááá. áá á©ááá ááááá JavaScript, áá áá¦áááá¨áá, á áá áááá¡ááá áá  áá áá¡ áá®áááá á áá¦ááª ááááááá¡, á¡ááááª á©ááá ááá­ááá ááá¤áá áááªááá, áá¡ áá¡ááá áá áá¡ áááááá, á¡ááááª á©ááá á¨áá§ááááá¡ ááá¤áá áááªáá. áá áááá¢áá¥á¡á¢á¨á, á á áá ááááá áá ááá¥áá, ááááá áááá£áá á£áááá áááá£áááá¢áá¡ ááááá¥á¢áááá¡, áá¡á, á áá á¨ááá«áááá áááá¬á§áá¡ áá¥áá¡ á¨ááá®áááá ááá¡. áá¡á á áááá  á¨ááá«áááá áááá¡ áááááááá? áá¡á, áá£ ááááá áá áááááááá ááááááááá ááááááá, áá ááááá áá ááá¥áá console.dir, D-I-R. áá®áá, áá console.log á£áá áááá ááá­ááááá á áá¦ááª á«ááááá ááá á¢áááá. áááá áá áá£ áá ááááá, á áá áá á¦áááá¡á«ááááá¡ ááá áá á¥áá£ááá, á áááá áª ááááá¥á¢á, ááááá, á áá áá¡ áá ááááá á á¡á¢á á£á¥á¢á£á á áá¡ááá á áááá áª á¡á¢á á£á¥á¢á£á áá¡. 

áááá¢áá, áá ááááá console.dir áááá£áááá¢á. áá ááááá áá áááá­áá áá. áá áááá¡ á¥ááááá, áá®áá, áá áá ááá£áá®áááááá áá¥, ááá¥áá¡ áá á¡áááá¡á£á®á áááá£áááá¢á ááá¢áá á áá¡áá á¡ ááá. áá®áá, á áááá¡ááª áá ááá®á¡áá arrow, áá¥ áá¥áááá áááá á ááá á¡ááááá. 

áááá áá á©ááá ááááá ááá ááááá áá ááá áááá á áá¡ áá áá®áááá á¡áá®áá¡ áá¥áªááá¢á á¬ááá¡ á§áááááá áááá¨ááááááááá ááá¬ááá, áááá¢áá á©ááá á¨ááá«áááá áááá¬á§áá¡ áááááááªáá áá áááá£áááá¢á¡. áá á¡ááááá¡ ááááá áááá á DOM áááá á á£áá áááá áá¨ááááá ááááá«áááá¡ áá áááá¨ááá¡ ááááá«áááá¡. áá á¡ááááá¡ á£ááá ááá áááá®ááá á ááá á¡ááááá. 

áááá¢áá, áá ááááá áá ááá®á¡áá áá ááá. áá áá¥ ááááá áááá á ááá á¡ááááá, á áá pops up. áááá áá á§áááá áá áááá¢áá áá¡ááá¡ áá áá¡ á¡á¬áá áá áá¥, áááá¨ááá¡ ááááá«áááá¡. ááááá ááá®á¡áá á áá. 

á¨ááááá áá á¡ááááá¡ áá®áááá á áá¦ááª áááªáááá, HTML. áá¡á á áá á¨ááááá á©áááá áááá£áááá¢á áá á áááááá á¥ááááá, HTML. áááá®á¡áá á áá. á á áá áá¡ á©ááá ááááááááá? 

áá£ ááááá®á¡ááááá á©áááá á¡á¥ááá, á á á£ááá áááááá¡ á¨ááááá HTML? á á áá á ááááá«áááá¡ á¥ááááá á®á? ááááá ááááá ááááá. á©ááá ááá®á¡áááá HTML. á©ááá áááªáááá¡ ááá¡á á¨áááá ááááá«áááá¡. 

Pop, á áá á¦áá. áá á¡ááááá¡ á®áááá«á¦áááááá áá á¡á®áá£ááá¡. á©ááá á¨ááá«áááá áááá®á¡ááá¡ á®áááá«á¦áááááá. á¢á£á áááá ááá¡á áááá¨ááá¡ ááááá«áááá¡. áá¡á, áá á¡ááááá¡ á¢áá¢á£áá. 

áá á©ááá ááá  áááá á«áááááá áá ááá¡á¬ááá¡ áá¡ á¡ááá£ááááá. á©ááá á¨ááááá«áá áááá¡ áááááááá áá ááááá¡ áá¡ááá. áááá áá áá áá¡ á¡áá¨á£ááááá, á áá á¨ááá®áááá áááá£áááá¢áá¡ áá áááááááá£áá á áááá áª áááá ááááá¥á¢á. áá áá£ á©ááá áááááá®ááááá áááá ááááá¥á¢á, á ááááááª áááááá§á£á ááá áááá á á áááá ááªáá áááá, á ááª áááá¡ ááá¨áááá¡, á áá á©ááá á¨ááááá«ááá ááááá¬á§áá áááááá£ááá ááá áá áááá ááááá¥á¢á áááá¡ á¨ááªáááá¡, á á áá áá¡ á©áááá ááá®áá áááááá§á£á ááá áá ááá á«áááá. 

áá¡á á áá, á¡áááááá á«áááá á ááá¡á¢á á£áááá¢á á©ááá á©áááá¡ á®ááá áá áá¡. áá¡á á áá, á áááá áª á©ááá áááá®áá, á áá áááá£áááá¢áá¡ ááááá¥á¢á ááááá áá á§áááá ááááá¥á¢áááá¡ á¨ááááá áá¥áá¡ áááá¡ááááá áá áááááááá, á£áá áááá áá¡ááá á áááá áª ááááá¡áááá á á¡á®áá ááááá¥á¢á, á ááááááª á©ááá áá£á¨áááá¡ JavaScript. áááá áá á©ááá á¨ááááá«ááá ááááááá§áááá áá áááá¡ááááá¡ áá áá§áááááá áá áááááááá¡, á ááá áá ááááá á á¡ááá£á á¦á á¥ááááá áááá áááá£áááá¢á áá áááá¦áá á¥áááá áá á¥áááá áá á¥áááá, finer áá finer ááá áªáááá ááá¢ááá£á áá, á¡áááá á©ááá ááá¡áá¦áááá á«ááááá ááááá áá¢á£áá ááá¬ááá á©áááá ááá áááá ááá, á áá á©ááá áááááá, á áá á¨áááªááááá¡. 

á®ááá á áááá¡ááª á©ááá ááááá®áááá áááá¡ááááá áááá£áááá¢áá¡ ááááá¥á¢á áá áááá£á¬ááááá ááá, áááááááá, á áá á¨ááá«áááá ááá®ááá¡ á©áááá¡ ááá-áááá ááá. áá á©ááá áá  ááá­áá áááá á áááá áááááá ááááááá áá¥áá¡ áá áªááááááááá á«áááá¨á. 

áá áá¡ á¡áááááá ááááá á á£ááá á áá¥áá¡, á áááá¡ááª á©ááá ááá£á¨áááá áááá. á á áá áá¡ áááááá áá áááá¡ááááá á áááááááª ááá¬ááá áááá£áááá¢á ááááá¥á¢á? áá¡á, ááááá, áááááá®á á áááááááá ááááááá ááá ááááª á¡á¬á áá¤áá á áááá áª á©ááá zipping ááá¨áááááá áááááá¢á£á á áááá£áááá¢á ááááá¥á¢áá¡ á©ááá áááá®áá áá áá£ááá á¨á. 

áááá áá á áááááááá áá áááá¡ááááá á¨ááá«áááá áá§áá¡ á áá, á áááá ááªáá á¨ááá HTML. áá áá¥ááá á¨ááá«áááá ááááá®á¡áááá me ááááá§áááááá áá JavaScript, ááááá á«ááááá ááááá¡, á áááá¡ááª áá ááááá ááá áá§á ááááááááá. á á áá§á áá¡ á¨ááá HTML? áá¡á, áá¡ áá®áááá áá¡, á ááª áá áá¡ á¨áá áá¡ tags. 

áá¡á á áá, á¨ááá HTML, ááááááááá, á¡áááá£á á tag, áá£ á©ááá áááá®ááá áááá ááá¡ á áá ááááááááá áááááá¢á¨á á¬áá, áá¥áááááá áááá¡áááááá áá¡áá¤áááá¨á. áá¡ áá§á á¡áááá£á áá á©áááá áááá áá. á¡á®áá áááá¡ááááá ááááªááá¡ ááááá«áá¡ á¡áá®ááá, á ááááááª áá áá¡ á¡áá®ááá¬ááááá HTML ááááááá¢á¡, á áááá ááªáá á¢áá¢á£áá. ID, á ááááááª ID áá¢á ááá£á¢á HTML- áá¡ ááááááá¢á. 

á¨áááá®á¡ááááá, á áá á©ááá á¨ááááá«ááá á¡áááªáááá£á áá ááá£áááááá¡ ááááá áá¢á£áá ááááááá¢ááá á©áááá HTML ááá áááááá¡ áá¢á ááá£á¢á, á ááª, á áááá áª á¬áá¡á, ááááá¡ ááá¡áá®áá á®ááááá áááá¢áá¥á¡á¢á¨á CSS, ááááá áá¢á£ááá. áá¨ááááá ááááá«á, á ááááááª áá áá¡ ááááá¨áááá á á áá áá¡ á£áá áááá ááááá á©áááááá¡ DOM. áá áááá¨ááá¡ ááááá«áááá¡, á ááááááª áá áá¡ ááááá¨áááá á á áá áá¡ á¥ááááá á©áááááá¡. áá á©ááá áááá®áá áááá á, á áá á£áá áááá ááááá®áááá. áááá¨ááá¡ ááááá«áááá¡, á áá, áá£ á áááá  ááááá¦áá á¥áááá áá á¥áááá á¨ááááá á®á. 

áá¢á ááá£á¢ááá, á áá á£áá áááá ááá¡ááá áá¢á ááá£á¢ááá HTML ááááááá¢á¡. áá¡á ááááááááá áá¢á ááá£á¢ááá á¨ááá«áááá áá¥áááá áá£ áá¥ááá ááá¥áá áááá¯á áá¥áá¡, áá¡ á©ááá£áááá áá áá¥áá¡ á¬á§áá á áá¢á ááá£á¢á, áá¥ááá á¡áááá¦áá áá á¡ááááá áá¢á ááá£á¢á. áá áá¡á á áá áá®áááá ááá¡ááá á§áááá áá¢á ááá£á¢ááá á£áááá¨áá áááá á áá ááááááá¢á. 

á¡á¢ááá áá áá¡ ááááá áá áá, á áá ááá¯áááá á¬áá áááááááá¡ CSS á¡á¢áááá¡ ááááá áá¢á£áá ááááááá¢á¡. ááááááááááá áá ááááá, á©ááá ááááá áá¢á£ááá ááá ááá¢á á¡á¢ááá, á áá á áááááááá áªááááááááá á©áááá ááá®áá. áá¡á á áá, áá¡ áá áá¡ ááá áááá£áá áááá¡ááááá. 

áá áá á¡ááááá¡ áá¡ááá áááááá áá áááááááá, á áá á©ááá á¨ááááá«ááá áááááá§áááá á£á¤á á á¡á¬á áá¤áá áá¥ááá áááááá ááá ááááááá¢ááá áááá£áááá¢á ááááá¥á¢á. ááááá, á§áááááá áá áááááá®á ááá áá á§áá¤ááá¡ getElementById. áá¡á á áá, á¨ááá«áááá ááá¥ááá¡, á áá¦ááª, á ááááá áááá®á¡ááááá¡, á áá áá¡ áááááá áááá£áááá¢á ááááá¥á¢á, document.getElementById. 

áá á¨ááááá áá á¤á á©á®ááááá¨á, áááá¡ááá¦áá áá¡ HTML- áá¡ ááááááá¢á ááááá áá¢á£áá ID áááá¬áá á, á áá áá ááá á áááááááá£áá, áá áá ááá¨áááá á¬áááááá á£á¤áááá, á áá ááááááá¢á¡ á¡ááá áá ááááááá ááá. áá¡á á áá, áá áá  ááá¥áá¡, áá¥ááá á¡ááá£á á¦á á¥ááááá ááá¨áááááá áááááá£áá á¤ááá. áá á¨áááá«ááá áá®áááá áá ááááááá¡ ááááá§ááááá ááááááá¡, áá ááááá á ááá¡á¬ááá¡ á¡ááááá¡ áá«ááá¡ á áááá¢á, áá á? áá¡ áá®áááá ááááá¡ áá áá¦áááá©ááá¡ áá£á¡á¢áá áá¡, á ááª áá«ááá¡. 

GetElementsByTagName áá áá¡ á«ááááá áá¡áááá¡á á¡á£ááá¡ááááááá. á¨áá¡áá«ááá, áá¡ áá¥áááá á§áááá áá áááááá tags áá á§áááá p tags áá áááááªá ááá¡ááá á§ááááá¤áá á á áá áá ááá  áá£á¨ááááá. appendChild ááá¡á«ááá¡ á áá¦ááª áá á áááááá á¥ááááá á®á. 

áá¡á á áá, áá á¨áááá«áááá ááááá áá®ááá ááááááá¢áá¡ áá á áááááá ááááááá. áá á¨áááá«ááá ááááá¦áá ááááááá¢á¡, á áá áá á áááááá ááááááá, áá¡ááá, áá£ ááááá, á¬áá¨áá á áá¦ááª á©ááá ááá-áááá ááá. áá®áá, á¡á¬á áá¤á ááááá áááá¡ á¨áááá¨ááá áá á¡á¬á áá¤á ááááá¡ á¢áááááá ááááá á©áááá¡ á¨áááá¨ááá, áááááá. 

getElementById-- á áá áá¡ áááá¡. áá ááá  ááá¢á§ááá á áááááá¯áá  ááá¥áá¡ áááá ááá getElementById áá ááááá á£áá á áá á¡ááááá¡. áááá¡ áááá, á áá áá¡ ááá ááááª áááá áªááááá£áá. áá£ á©ááá á¬áá áá á¡áá¢á§áá ID, á áá áá¡ á áááá áª á¬áá¡á, ááááá¢áááá¡ ááááá¢ááá á á©ááá áááá á£áá áááá áá  áá£á¨áááá¡. áá áá ááá  áááá ááááá, áá£ á áá¢áá. áá¡ áá áá¡ ááááááááá, ááááááááá, ááááááááá á¡ááá áá bug á áá á§ááááá¡ ááááááá¡, ááá¨ááááª áá, áá¥á¡ááá á¢ááá, á áááááá¡ááª áá¥áá áááá á¡ááá£ááááá. áá¡á á áá, á£áá áááá á£ááá ááªáááá¡, getElementById, á áá á áá áá¡ áááá¡. áá áááááá, á áá áááááá¡ á áááááááá á¬á£ááá¡ áááááá£á áá£ááá¡á¢áááááá¡. 

áá¡á á áá, á á á§áááá áá ááááá®á áá? á©ááá ááá§ááá¡ áá ááááááááá¡ ááááá§áááááá. á©ááá áááá¥áá¡ áá¡ áááá¡ááááá. áá®áá áá, áá£ á©ááá ááááá¬á§ááá áááá£áááá¢á, áááá£áááá¢á. á ááª áá  á£ááá, á©ááá á¨ááááá«ááá áá®áá áááá¦áá¡ ááááá¡áááá á áá áá ááá­áá á á©áááá¡ ááá áááá ááá á©ááá áááááá, á áá ááááá§áááááá JavaScript áá®áááá ááá£á¬áááááá áá ááááááááá¡ áá áááá ááªáá£áá áááá¡ááááá á áá á©ááá á¡á®ááááá¡á®áá áááááááá¨á. 

áá¡ á¨ááá«áááá áááá¦áá¡ á¡áá¢á§áááá á, áá¡ document.getElementByID, áá¥ááá áá¥áá¡ á®áááá á«áááá tag á¡áá®ááá, áá¥ááá áá¥ááá á£á¤á á ááá ááá ááááááááááá. á áá á¨ááá«áááá ááááá áªáá¢á wordy. áá á áááá áª áá ááá áááá¡á¢ááá, áá¥ááá ááááá ááááá®ááá¡ áááá á áá ááááá, á©ááá áá  ááááá¬ááá¡ á¡áá¢á§áááá á á áá. 

á©ááá ááá¡á£á á¡, á áá áá§áá¡ ááá  ááááááááá¡ á áá á¡á¬á áá¤áá. áá¡á á áá, á©ááá ááááá á£á¤á á ááááá ááá ááá¥áá á áá¦ááª. áá¡á á áá, áá¡ áá ááááá á áááá§áááá á áªáááá á áá¦ááª ááá£á¬ááá jQuery. áá®áá jQuery áá  áá áá¡ JavaScript. áá¡ áá  áá áá¡ ááá¬ááá JavaScript. 

áá¡ áá áá¡ áááááááááá, á ááááááª áááá¬áá á áááááá áá JavaScript áá ááá áááá¡á¢áááá¡ áááá®áááááá 10 á¬ááá¡ á¬áá. áá ááá¡á ááááááá áááááá á¢áááá¡ áá¡ á á áá áá¡ ááá£á¬ááá áááááá¢áá¡ áá®áá áá¡ á¡áá áá¤á¢ááááá¡, á ááááááª á«áá áááááá á á á©ááá áá®áááá áá¡áá£áá ááá DOM áááááá£áááªáá. áá¡á á áá, áá£ ááááááá áªááááááááá á¤áááá¡ á¤áá á á©ááá ááá áááá áá, á¨áá¡áá«ááá, ááááá áá¢á£áá áááá§áá¤. 

áá¥, áá á áááá áª á©ááá¡ ááá¦áááá¡ ElementById colorDiv. áá áá ááááá, á áá áááááááá£áá ááá¡á á¤áááá¡ á¤áá á. áá£ áá á£áá áááá ááááá§áááááá á¡á£á¤áá JavaScript ááááá§áááááá áááá£áááá¢áá¡ ááááá¥á¢á£á á ááááááá¡, á áá áá áá¡ áááá á á áá, áá á? document.getElementByID colorDiv.style.backgroundColor = áá¬áááá. 

ááá. áá¡ áá§á áááá á ááá¥áá. áá¡ áá áá¡ áááá á á¢áááá¡, á«ááááá. áá¡á á áá, jQuery, á©ááá á¨ááááá«ááá, á¨áá¡áá«ááá ááá¥ááá¡, áá¡ áªáá¢á á£á¤á á áááááá. á¡áááá­á á off, á áá áá¡ á¨áá¡áá«ááá, áªáá¢á áªáá¢á ááá¢á cryptic á£ááªá áá, áá á? 

á§áááá á¨áááá®ááááá¨á, á®áááá á«áááá áªáá¢á ááá¢á áááááá á¢ááááá á áááá áª, á áá¡ááª á©ááá áááááááá. áá¡ ááááá áá¡ ááá¨ááá, á¤á á©á®ááááá¨á, áá áá áááªááá, hash, colorDiv, áá á? á áá¡ ááá¨áááá¡ áá¡? áá¡á, á áá, á«áá áááááá, áá®áááá document.getElementByID colorDiv. 

áááá áá áá¡ áá á¡áá®áá¡ á¡á¢ááááá áááá¡ ááá áááá¡ áááááááá ááááá§áááááá jQuery. ááááá, á£áá áááá á¨ááá®áááá áá®áá áá áá¡ á áááááááá á¡á®ááááá¡á®áá ááá á áá áá á¨ááá«áááá á áááá£á áá áááááá§áááá¡ áá¡ áááá£áááá¢á ááááá¥á¢á áááááá áááááá£ááá ááá áªááá á©ááá á¡ááá¢á. ááá á«áá, á©ááá ááááá ááá á£ááá áá£á¨áááá áááááá£ááá áááá¡ á¤áá á ááááá áá¢á£áá Div, colorDiv, ááá áááá ááá. ááááá á¨ááá®áááá, á áá. á§áááá á£á¤áááá. áá¡á á áá, áá áááá ááá. áá¡ á.á¬. test.html á áááá¡ááª áá¥ááá á©áááá¢ááá ááá áá£ áá¡á£á á Tinker áá ááá áá¡. áá ááá¥áá¡ á ááááááááá á¦ááááááá áá áááá ááá. áá áá áááááá, áááááááá£ááá£á á á¤á£áá¥áªááááá á¤áááá¡ á¤áá á, ááá¡á¤áá á, áá¬áááá, ááá ááá¯áá¡á¤áá á, á¬ááááá, áá£á á¯á, áá áá á¤á£áá¥áªáá á¤áááá¡ á¤áá á, á¦áááá¡á«áááá ááááá£á¨ááááááá¡ á¤áááá¡ á¤áá á, áá ááááá§áááááá jQuery. á á ááá  áá ááááá ááá á áááá¡ááª áá áááá? áá¡á á áá, á©ááá áááá®áá á¦ááááááá. áá®áá, ááááá á¨ááá®áááá áááááá áá ááááá¡ áá¥. á©ááá ááááá¬á§ááá test.html. áá¡á á áá, áááááááá£ááá£á á á¤á£áá¥áªááááá á¤áááá á¤áá á áá áá¡ áá¡, á ááª áá ááá áá¤ááá áá¥. áááá áááááªáá ááááá®áááá áªáá¢á. 

áá¥ááá á¨áááá©áááá, á áá áá áá  áá áá¡ áááá¡ááá¦áá á£áá áá á¦áááááááááá á áá ááá¥ááá, á áááá¡ááª áá á¦áááááá áááá¬áááá£áááá, áááá£á¬ááááá á¤á£áá¥áªáá á©áá ááá purple. á áááá¡ááª áá á¦áááááá ááá­áá áá, á£á¤á á á¡á¬áá áá, áááá£á¬ááááá á¤á£áá¥áªáá á©áá ááá áá¬áááá, áá¥áªáá¡ á¤áá ááá®ááá, ááá®ááá¡ á¬ááááá, áá¥áªááá¡ áá£á á¯á. ááááá, á®áááááá, á áá áá¡ ááááá áá  áá áá¡ á¡áá£ááááá¡á áááááááá¡ áá á«áááá, áá á? 

ááá áá áá¥áááá, áá£ á¨ááá«áááá áá¥áá¡ á£á¤á á áááááá ááááááá. áá¡á, ááá ááá á ááá¨á, á©ááá á¨ááá®áááá á á áá á®á£á á¤á£áá¥áªáááá document.getElementByID colorDiv.style.background = purple, áá¬áááá, ááá ááá¯áá¡á¤áá á, á¬ááááá, áá áá£á á¯á, á¨áá¡áááááá¡áá. áá¡á á áá, áá  áá áá¡ áááá¡ááá£áá áááá á¡áá£ááááá¡á áááááááá¡. 

á¨áááááá ááááááá¥á¢á á¦ááááááá áá áá  áá áá¡ áá ááá¬áá ááá áá áá á¤á£áá¥áªáá ááá£á¬ááá á¨áááªááááá¡ á¤áá á, á ááááááª, á áááá áª á©ááá¡, áááá¡á¢á£á ááá¡ á¡áááááááá á áááá áª ááá¡á áá áá£áááá¢á. áá¡á á áá, áá¡ áªáá¢á á£ááááá¡á. Purple, áá¬áááá, ááá ááá¯áá¡á¤áá á, á¬ááááá, áá£á á¯á áá áá¡ áá áá£áááá¢á. áááá¢áá áá ááá¬áá ááá á£á¤á á áááááá á¨áááá®ááááá¨á JavaScript á¤á£áá¥áªáá, á ááááááª á¨ááá«áááá áá¡á áááááá§á£á ááá. áá ááááááá¡. áá¡ á¤á£áá¥áªáá áªááááááá á¤áá á ááááááááá áá áá£áááá¢á áá¬ááááá á¤áá á. áá áá áááááá áááááááá£áá á¤áááá¡ á¤áá á á¤áá á. áá¡á á áá, áá¥ á¬áá áááááááá¡ á á ááá¥áá¡ áá¥. áá¡á á áá, áªáá¢á á£ááááá¡á. 

áááá áá áá á¨ááá«áááá á¨áá«áááá¡ á£ááááá¡áá á áá. áá£ ááá¨ááááá á¨ááá®áááá á¦áááá¡á«áááááá ááááá£á¨ááááááá¡ á¡áá¢á£ááªáá, áá®áá á§áááá áá¡ ááá ááá áááááá§á£á ááá ááááá. áá£ ááááá®á¡ááááá á©áááá ááá¡áá£á¡áá áááááá¢áááááá¡, áá á¨áá£á«ááá áááá¦áá¡ ááá¤áá áááªáá, á ááááááª áá á¦áááááááááá áááá¬áááááá áá ááááááá§áááá á áá. 

áá¡á á áá, event.JavaScript, áá á¬áá ááááááá áªááááááá á¤áá á á¦áááá¡á«áááá, á ááááááª ááááááá, á ááááááª á¦ááááá¡ áá§á ááá¬áááááá. á¡á¬áá áá áááááá¬áááá¡ ááááá¥á¢á áááááá. áá ááá á áá¥, ááá ááá wordy. áááá áá, á áá¡ááª áá ááááááá áá áá¡ áá á¨áá¥áááá¡ á¤áááá á¤áá á triggerObject inner.HTML. áá¡ áá áá¡ á¢áá¥á¡á¢á á¨áá áá¡ á¦ááááá¡ tags. 

áá ááá á áá¨ááá áá áá¥áá¡ á¨áá¥áááá¡ ááá áááá¡. áá áá¡ á áááá  á¨áááá«ááá ááá ááá¥áááá¡ ááááá á¡áááááááá áááá¡ in JavaScript ááááá§ááááá áá¡ áááááá áááá¡. áááá¡ áááá, á áá, á áááá¡ááª áá áááááááá£áá á¤áá á, á áááá áª áá ááªááááá áá¥, á¤áá á á£ááá áá§áá¡ á§áááá áááá¡. 

áááá áá á¦ááááá¡, á ááááááª áá áá¥áááá, áá£ áááá¦ááá á¡á®áá á¡áá®á, á¨áááá©ááá, á áá á¢áá¥á¡á¢á¨á áá  áá áá¡ ááá¬áá áááá ááááá¥áááá¥á P ááá¬ááá£áá. áá ááá¨áá á«ááááá ááááá¨á áá¥, áá, á áááá áª á©ááá¡, áªááááááá áá áááá¡ áááááááá ááááá§áááááá jQuery áá¡ááá. áá áá á¨áááá®ááááá¨á, áá áá  ááá  á áááá£á áá ááá£á¬áááááá á¤á£áá¥áªáá á§áááá. áá á£áá áááá áááááªá®ááá áááá¡á, á áá áá ááá  ááááá§áááááá áá á¦ááááá¡ áá áá¡ JQ á¦ááááá¡. áá¡ áá áá¡ áá¡. 

áá¡á á áá, á áááá  jQuery áááªá, á áá¡ááª áá ááááááá? áá¡á, áá¡ áá áá¡ áá á-áá áá á£ááá áá¢áá¡ááá á¡ááá¨á ááááááááááááá jQuery. ááá¡ á¨áá£á«ááá áááá ááááá«áá ááááááááá á áá á«ááááá áááááá, áááá áá áá¥ááá áá  á áááá áª ááá¢á£ááªáá£á áá. áá¥ááá áá¡ á¡á®áá á¡ááá, á ááá á£á¤á á ááá¢á áá á«áááá, á áá¡ááª áá ááááááá. áá¥, áá£ááªá, á á á®áááá? 

á áááá áª á©ááá¡, á¨áá¥ááá ááááááá£á á á¤á£áá¥áªáá á áá á¢ááá ááá¡ á áááá¡ááª á©ááá áááá£áááá¢á áááá áá áá¡, áá¡á document.ready, áááááá áá á¤á£áá¥áªáá ááá®áááá. á«áá áááááá, á áááá¡ áá áá¡ áááá£áááá¢á áááá áá áá¡? áá¡ ááá¨áá, á áááá¡ááª á©ááá áááá áá ááá¢ááá áá£áá. 

áá¡á á áá, á áááá áª áá á©ááá áááá áá ááá¢ááá áá£áá, á¨áááááá á¤á£áá¥áªáá á§áááááááá¡ áááá áá áá¡. ááá ááªá®ááááá¡, á áá áá á¨áááá®ááááá¨á, áá£ ááááá¥á¢á á¢áááá¡ jQButton, áá áá£ áááá¡áá¡ jQButton á£ááá áááá¬áááááá, á¨ááá¡á á£ááá¡ áá¡ á¤á£áá¥áªáá. áá¡á á áá, áá¥ áá áá¡ áá á ááááááá£á á á¤á£áá¥áªáááá, áá á ááááá¡ááá¦áá á á¨ááááá á¡á®áá. 

áá¡á á áá, á©ááá ááááá áááá¢áá¥á¡á¢á¨á áá¥ á¯áá á¯áá áááá á©ááá áááá áá á áááá¡ááª áá¡ á¢ááá áááá¡ áá¡ ááá£á¬ááááá¡ áá á¤á£áá¥áªááá¡. áá áá á¤á£áá¥áªááá¡ ááááááá áááá¡áááá¡ á¦ááááá¡ á£ááá áááá¬áááááá. áá á áááá¡ááª á¦ááááá ááá¬áááááá, JQ á¦ááááá¡ ááááá áá¢á£ááá áááá¬áááááá, áá¡ ááá£á¬ááááá¡ áá á¡á®áá á¤á£áá¥áªáá, á ááááááª áááá ááá¡ áááááááá£áá á¤áááá á¤áá á colorDiv áá§áá¡ á áá¡ááª á¢áá¥á¡á¢á á¨áá áá¡ tags. 

áá¡ áá áá¡ áªáááá á ááááááª á¦ááááá¡ áá§á ááá¬áááááá. áááá áá á¡á®áááááá áá, áá¡ áá áá¡ áá ááááá á áá¥áªááá áá¡áááá¡á á¦áááá¡á«áááá. áá¡ áá®áááá áááááááá£á áá áá á áá ááááá®áá¢áá¡ áá¡ jQuery. áá¡áá áá áá¡áá, áá¡, ááááá, áááá á á£á¤á á ááá¨áááááá¡. áá¡ áá  áá áá¡, á áááá áª áááááá, á áááá áª á áá¦ááª event.js, á ááááááª á¨áá¡áá«ááá áªáá¢á ááá¢á verbose, áááá áá áªáá¢á ááááááá ááá¨áááááá¡. 

áááá áá áá£ á©ááá ááá á£ááá á©ááá¡ áá áá£ááá á¨á á¤ááá¯áá á, áá£ ááááá¬á§áá clicking-- ááá ááá, á áá á¨áááªáááá ááá ááá¡á¤áá á. áá¡ áá áá¡ áá¬áááá ááááá§áááááá string áááááá¡. áá¡ áá áá¡ á¤áá ááá®ááá ááááá§áááááá á¦áááá¡á«áááá ááááá£á¨ááááááá¡. 

áá¡ áá áá¡ á¬ááááá ááááá§áááááá jQuery, áá á? áá¡ááá á§áááá áá¥áªááááá áá£á¡á¢áá. áá¡ááá á£áá áááá áááá¡ ááááá§áááááá á¡á®ááááá¡á®áá á£áá®ááááááá áá ááááááá¡ áááááá ááá. áá á¡ááááá¡ ááááá áááá á jQuery ááá¨áá á©ááá, á á áá¥áá á£ááá ááááá áá ááá¡áá£áá á áá ááááá. áááá áá áá£ áááááá, á áá á£á¤á á ááá¢á, áá¥ááá á¨áááá«áááá á¬áá¡ááá jQuery á¡áá®áá¡ áááá£áááá¢ááªáá áá ááá¡á¬ááááá á¡áááááá áªáá¢á ááá¢á áá¡ á«ááááá ááá¥áááá áááááááááá, á ááááááª áááá ááááááá¡ áááááá¢áá¡ áá®áá áá¡ á¡áá ááá¢áá áááá¡, á áááá ááªáá á áá¡ áááááááááá áááááá£ááá ááá á¡áá®á áá ááá á«áááá á©áááá¡ ááá áááá ááá áá ááá áááá£áááá¢áá¡ ááááá¥á¢á£á á áááááá. áá Doug Lloyd. áá¡ áá áá¡ CS50.