1 00:00:00,506 --> 00:00:09,206 [ Silence ] 2 00:00:09,706 --> 00:00:13,496 >> Welcome to Section 4 S-75. 3 00:00:13,626 --> 00:00:16,956 This is July 18th, Wednesday evening. 4 00:00:16,956 --> 00:00:19,786 We're going to be talking about JavaScript this evening 5 00:00:20,536 --> 00:00:24,336 and about JQuery and about the document object model. 6 00:00:24,966 --> 00:00:27,776 So, as always with my sections, 7 00:00:27,896 --> 00:00:30,406 my name is Myer [assumed spelling] 8 00:00:30,636 --> 00:00:33,446 and I'm one of the TFs for S-75. 9 00:00:33,886 --> 00:00:37,386 You can find the code that I talk through tonight 10 00:00:37,886 --> 00:00:42,496 at github.com/codekiln/S75-Sections 11 00:00:42,806 --> 00:00:46,196 and if you just go to that URL and then scroll 12 00:00:46,196 --> 00:00:49,316 down their instructions on how to view the code 13 00:00:49,316 --> 00:00:53,456 in the CS50 Appliance so that it appears for you 14 00:00:53,456 --> 00:00:56,146 like it does for me right here. 15 00:00:56,146 --> 00:00:58,136 This is the CS50 Appliance over to the right. 16 00:00:58,926 --> 00:01:01,946 So first since we're at this page, I'd like to point 17 00:01:01,946 --> 00:01:03,636 out a few new links for this week. 18 00:01:04,036 --> 00:01:09,356 I've put in some links to some JavaScript videos 19 00:01:09,356 --> 00:01:10,456 by Douglas Crockford. 20 00:01:10,986 --> 00:01:12,636 Each one of this is about an hour long, 21 00:01:12,636 --> 00:01:14,576 so you probably don't have enough time 22 00:01:14,576 --> 00:01:17,236 to watch it before next week but all of these are great. 23 00:01:17,896 --> 00:01:21,946 I have a bit here about JSLint specifically 24 00:01:21,946 --> 00:01:23,716 about how to install it. 25 00:01:23,716 --> 00:01:27,346 David talked about that at the end of class and we're going 26 00:01:27,346 --> 00:01:29,726 to go through a little bit of that this evening as well. 27 00:01:30,446 --> 00:01:31,886 Finally, there are some links 28 00:01:31,936 --> 00:01:36,166 to JavaScript documentation generation in the spirit 29 00:01:36,166 --> 00:01:42,156 of JavaDoc or like PHPs documentation 30 00:01:42,156 --> 00:01:43,386 generation capabilities. 31 00:01:44,316 --> 00:01:51,646 And finally, there's a link to JSFiddle which a great place 32 00:01:51,686 --> 00:01:53,876 to test JavaScript online. 33 00:01:53,876 --> 00:01:57,346 Up in the left hand quadrant here you see the HTML 34 00:01:57,346 --> 00:01:59,786 that the JavaScript operates on and here 35 00:01:59,786 --> 00:02:02,476 in the lower left quadrant you see the JavaScript 36 00:02:02,476 --> 00:02:03,536 that you are able to do. 37 00:02:03,936 --> 00:02:06,516 In the upper right quadrant you are able to enter in CSS 38 00:02:06,516 --> 00:02:09,836 and then the result appears in the lower right hand window. 39 00:02:09,836 --> 00:02:13,146 And you can even link to your specific example with JSFiddle. 40 00:02:13,146 --> 00:02:17,936 So, I highly encourage you to mess around with JSFiddle 41 00:02:17,936 --> 00:02:21,166 when you're thinking about a user interface prototype 42 00:02:21,686 --> 00:02:23,546 for one of your assignments. 43 00:02:23,726 --> 00:02:25,146 Maybe you can mock it up here 44 00:02:25,326 --> 00:02:28,516 and then once the interface details are kind of flashed out, 45 00:02:28,556 --> 00:02:31,246 you can move it into production mode. 46 00:02:32,176 --> 00:02:35,546 So this evening we'll be working 47 00:02:35,626 --> 00:02:39,056 through the July 18th code, which is right here. 48 00:02:39,566 --> 00:02:49,626 So I'm going to change directories into July 18th 49 00:02:50,716 --> 00:02:54,906 and let me just get it up here. 50 00:02:55,696 --> 00:02:58,286 So tonight, the first example I wanted to run 51 00:02:58,286 --> 00:03:06,726 through is a quick example of how to make PHP recourse 52 00:03:06,856 --> 00:03:12,406 through the directory tree beneath the directory 53 00:03:12,406 --> 00:03:18,276 that the file that houses a certain PHP code is and print 54 00:03:18,276 --> 00:03:19,716 out the results of the directory tree. 55 00:03:19,716 --> 00:03:22,956 In a sense, that's what Apache does 56 00:03:22,956 --> 00:03:26,986 for us right here except they don't expand the sub 57 00:03:26,986 --> 00:03:28,036 nodes automatically. 58 00:03:28,036 --> 00:03:30,036 You actually have to go to another page in order 59 00:03:30,036 --> 00:03:31,616 to get the listings of the subdirectory. 60 00:03:31,906 --> 00:03:34,336 So here's our first example, 61 00:03:35,106 --> 00:03:38,416 you'll see I've structured the folders a little bit differently 62 00:03:38,756 --> 00:03:44,756 because in our assignments we're now putting the index.php, 63 00:03:44,756 --> 00:03:47,026 that is the point of entry into the application, 64 00:03:47,556 --> 00:03:51,446 in the HTML directory and so we have to step 65 00:03:51,446 --> 00:03:53,676 into the HTML directory in order to see the result. 66 00:03:54,736 --> 00:04:01,866 So when we step in, you can see that these are all the files 67 00:04:01,866 --> 00:04:07,716 that are inside of the folders, private PHP and HTML. 68 00:04:07,836 --> 00:04:13,646 If I go back and go into private underscore PHP you'll see those 69 00:04:13,716 --> 00:04:16,036 files available. 70 00:04:16,746 --> 00:04:21,646 So, I did this structure in order to give a simple example 71 00:04:21,746 --> 00:04:23,196 of what David was talking about. 72 00:04:23,756 --> 00:04:27,596 David mentioned that we want one directory that houses all 73 00:04:27,596 --> 00:04:30,076 of the public facing files. 74 00:04:30,076 --> 00:04:33,936 All of the files that are chmoded 644 world readable 75 00:04:34,166 --> 00:04:37,446 and then the single index.php that's the entry point 76 00:04:37,446 --> 00:04:41,256 into your application and then from there including all 77 00:04:41,256 --> 00:04:43,576 of the other business logic that is stored 78 00:04:43,576 --> 00:04:46,366 in a separate folder that-- 79 00:04:46,366 --> 00:04:51,416 maintaining that separation makes it easier to make sure 80 00:04:51,416 --> 00:04:57,206 that your business logic, which is private to you and private 81 00:04:57,206 --> 00:04:59,266 to the business you're representing if you happen 82 00:04:59,266 --> 00:05:00,886 to be working for a client, 83 00:05:01,396 --> 00:05:06,086 making sure that that business information is actually kept 84 00:05:06,086 --> 00:05:11,646 private in case you flip one line of code in httpd.com 85 00:05:12,236 --> 00:05:18,136 or php.ini that actually spits out all the PHP to the screen 86 00:05:18,236 --> 00:05:21,676 as text rather than processing it. 87 00:05:21,976 --> 00:05:26,236 So, if I use the tree command, I'm not sure-- 88 00:05:26,236 --> 00:05:27,626 yeah, it's installed here. 89 00:05:27,626 --> 00:05:31,046 You can see the directory structure mimicked 90 00:05:31,746 --> 00:05:33,426 like how it is here. 91 00:05:34,046 --> 00:05:36,536 This tree command is kind of the inspiration 92 00:05:36,626 --> 00:05:38,306 for this little application. 93 00:05:38,306 --> 00:05:45,226 If I step inside html/index.php you'll see 94 00:05:46,126 --> 00:05:48,926 that I basically set some constants 95 00:05:49,536 --> 00:05:51,976 and then include the controller. 96 00:05:52,516 --> 00:06:01,646 [ Typing ] 97 00:06:02,146 --> 00:06:04,216 And the controller calls the model, 98 00:06:04,696 --> 00:06:06,506 sets a few configuration variables 99 00:06:06,506 --> 00:06:07,516 and then calls the view. 100 00:06:08,346 --> 00:06:09,836 So let's just take a look at the view 101 00:06:11,146 --> 00:06:18,146 or actually let's take a look at the model. 102 00:06:18,786 --> 00:06:25,746 Inside model.php is two functions, php file tree 103 00:06:26,606 --> 00:06:32,346 and php file tree dir. And both 104 00:06:32,346 --> 00:06:36,226 of these functions are the functions that recourse 105 00:06:36,226 --> 00:06:41,266 through the subdirectories and generate the HTML 106 00:06:41,266 --> 00:06:46,376 that is seen here if I do view page sort or a view page source. 107 00:06:47,736 --> 00:06:53,666 The way that it generates an unordered list with a list item 108 00:06:54,066 --> 00:07:00,806 and then a link and then it closes the unordered list 109 00:07:00,806 --> 00:07:02,036 for HTML. 110 00:07:02,476 --> 00:07:08,366 All of that HTML is generated inside this function 111 00:07:08,696 --> 00:07:11,676 and it calls itself recursively. 112 00:07:11,866 --> 00:07:13,296 I'm not going to walk through these 113 00:07:13,366 --> 00:07:15,646 because we have a lot JavaScript to get through tonight 114 00:07:16,186 --> 00:07:19,686 but this is an example of some business logic 115 00:07:19,686 --> 00:07:26,226 that would be private from the client that is kept 116 00:07:26,226 --> 00:07:29,376 in a separate folder from the point of entry 117 00:07:29,376 --> 00:07:30,416 into your application. 118 00:07:30,976 --> 00:07:36,356 So this is how it looks without JavaScript. 119 00:07:36,446 --> 00:07:39,546 And the next version, we'll add some JavaScript 120 00:07:39,546 --> 00:07:41,676 so that it only shows the directories 121 00:07:41,676 --> 00:07:43,646 and then we'll be able to click into those directories 122 00:07:43,676 --> 00:07:45,046 and just see the files. 123 00:07:46,476 --> 00:07:47,916 So let me-- 124 00:07:48,516 --> 00:07:55,986 [ Typing ] 125 00:07:56,486 --> 00:07:58,366 -- go into 01. 126 00:08:00,006 --> 00:08:01,996 We'll go into 01 in here as well. 127 00:08:02,576 --> 00:08:06,536 If we go on to the HTML directory, 128 00:08:07,006 --> 00:08:13,226 now we see an HTML folder in a private underscore PHP folder 129 00:08:13,656 --> 00:08:18,396 and if we click that it expands and if we go 130 00:08:18,396 --> 00:08:22,856 into the HTML directory, this is the directory that's supposed 131 00:08:22,856 --> 00:08:25,666 to house of the world readable files. 132 00:08:26,626 --> 00:08:29,576 So we see we have a JavaScript folder. 133 00:08:29,576 --> 00:08:30,986 If I have styling in here, 134 00:08:30,986 --> 00:08:32,976 I would put it inside the CSS folder. 135 00:08:33,206 --> 00:08:36,636 If I had images, I would put it inside an image folder inside 136 00:08:36,636 --> 00:08:37,656 this public folder. 137 00:08:38,556 --> 00:08:42,106 I am going to change directory into JavaScript 138 00:08:42,406 --> 00:08:48,946 and look at main.js and-- 139 00:08:49,516 --> 00:08:58,056 [ Typing ] 140 00:08:58,556 --> 00:09:04,746 And inside the view I echo out the directory 141 00:09:04,746 --> 00:09:09,826 that the JavaScript is kept in and this is the style 142 00:09:09,826 --> 00:09:11,316 for including a JavaScript. 143 00:09:11,316 --> 00:09:13,986 David probably went over this in the lecture. 144 00:09:13,986 --> 00:09:19,536 You say script and then SRC equals and then the URL 145 00:09:19,536 --> 00:09:22,316 to the JavaScript file. 146 00:09:22,616 --> 00:09:28,276 The JavaScript file has to be chmoded 604 at least so that 147 00:09:28,276 --> 00:09:31,966 that last byte has that world readable permission. 148 00:09:32,676 --> 00:09:38,826 And for legacy reasons, we don't self-close this tag. 149 00:09:39,226 --> 00:09:41,856 Instead we close the script tag 150 00:09:41,856 --> 00:09:45,636 and then put a closing tag after it. 151 00:09:46,056 --> 00:09:48,196 That just ensures that it loads. 152 00:09:48,796 --> 00:09:50,686 And we know that this is loading 153 00:09:50,756 --> 00:09:52,856 because this functionality is here. 154 00:09:53,506 --> 00:09:56,666 So let's take a look at the JavaScript. 155 00:09:57,516 --> 00:10:27,496 [ Typing ] 156 00:10:27,996 --> 00:10:32,576 So we have one function, init php file tree 157 00:10:33,866 --> 00:10:38,586 and that function spans pretty much the entire document 158 00:10:38,816 --> 00:10:44,176 and then down at the bottom we have window.onload = init php 159 00:10:44,176 --> 00:10:44,746 file tree. 160 00:10:44,966 --> 00:10:53,586 So in this file, what we do is generate a function 161 00:10:53,586 --> 00:11:00,186 or declare a function and then set that function to be executed 162 00:11:00,466 --> 00:11:07,846 when the windows.onload handler files. 163 00:11:08,196 --> 00:11:10,006 So this evening we're going to talk 164 00:11:10,006 --> 00:11:11,746 about the document object model. 165 00:11:11,956 --> 00:11:19,096 The document object model is a model inside the browser 166 00:11:19,096 --> 00:11:23,026 of the page's content and the content 167 00:11:23,156 --> 00:11:25,486 of the document object model, you can think of it 168 00:11:25,486 --> 00:11:29,016 in your head like the HTML file. 169 00:11:29,176 --> 00:11:37,186 It's a hierarchy of parent-child nodes and it really just-- 170 00:11:38,996 --> 00:11:48,466 in the document object model, the HTML content is an object 171 00:11:49,456 --> 00:12:01,836 and the body section is another object and then each one 172 00:12:01,836 --> 00:12:04,826 of these objects has properties 173 00:12:05,376 --> 00:12:12,736 and the properties include placeholders for events 174 00:12:12,736 --> 00:12:19,296 to happen and one of the most important document objects is 175 00:12:19,296 --> 00:12:24,176 the window object, which is JavaScript's representation 176 00:12:24,656 --> 00:12:32,136 of the window that houses the web page and that window 177 00:12:32,136 --> 00:12:39,026 like many of these elements has an onload property 178 00:12:39,026 --> 00:12:47,266 that you are able to set equal to a function 179 00:12:47,266 --> 00:12:49,236 and if you set it equal to a function, 180 00:12:49,616 --> 00:12:54,796 then when the onload event occurs, in this case, 181 00:12:54,796 --> 00:13:00,566 when the window is loaded then whatever function is stored 182 00:13:00,566 --> 00:13:03,806 inside that onload property will be executed. 183 00:13:04,416 --> 00:13:08,026 And it's up to the browser manufacturer to make sure 184 00:13:08,026 --> 00:13:13,416 that that function, the onload function is-- 185 00:13:13,546 --> 00:13:18,986 the function stored in the onload property is called 186 00:13:18,986 --> 00:13:22,266 at the right time and you would have to look 187 00:13:22,266 --> 00:13:26,366 at the documentation of the DOM in order to find 188 00:13:26,366 --> 00:13:27,966 out what those properties are. 189 00:13:28,266 --> 00:13:30,956 Some other properties 190 00:13:31,006 --> 00:13:35,316 that various elements have are onclick 191 00:13:35,926 --> 00:13:39,936 and if you store a function inside an onclick property 192 00:13:39,936 --> 00:13:47,126 of the document object such as an A element then you can have 193 00:13:47,126 --> 00:13:50,366 that function executed when that A element is clicked. 194 00:13:51,156 --> 00:13:56,766 So if we go into this just a little bit more, 195 00:13:57,456 --> 00:14:06,596 we can see our second document object, 196 00:14:06,596 --> 00:14:11,786 this is the global document object, which is the object 197 00:14:11,786 --> 00:14:14,476 that represents the entire HTML document 198 00:14:14,526 --> 00:14:23,086 and it has a function getElementsByTagName. 199 00:14:23,696 --> 00:14:31,356 What that function does is make it so that you can get a list, 200 00:14:31,356 --> 00:14:36,186 technically an array of all of the list item elements. 201 00:14:36,536 --> 00:14:41,116 So what this is finding here is all 202 00:14:41,836 --> 00:14:50,886 of the li elements as an array. 203 00:14:51,856 --> 00:14:56,156 So now aMenus, the variable, has all of the list item elements 204 00:14:56,156 --> 00:14:58,696 and you will recall that we encoded all 205 00:14:58,696 --> 00:15:00,536 of these files as list items. 206 00:15:01,116 --> 00:15:07,716 So when we get all of the elements by tag name 207 00:15:08,236 --> 00:15:12,126 for list items, it's getting this item 208 00:15:12,126 --> 00:15:13,456 and this item and this item. 209 00:15:13,456 --> 00:15:15,416 If we press ctrl shift C in Chrome, 210 00:15:16,296 --> 00:15:19,636 you can see that this is a list item and this is a list item 211 00:15:19,866 --> 00:15:22,936 and now inside aMenus is an array 212 00:15:23,226 --> 00:15:27,426 of the document objects representing this node 213 00:15:27,426 --> 00:15:33,196 and this node and this node and this node. 214 00:15:33,196 --> 00:15:39,996 And every array has a property called length 215 00:15:40,566 --> 00:15:43,726 and you can iterate through it and you-- 216 00:15:43,726 --> 00:15:49,556 Another property that document objects have is the 217 00:15:49,556 --> 00:15:51,116 className property. 218 00:15:51,596 --> 00:15:57,256 The className property contains all of the class names. 219 00:15:57,256 --> 00:16:01,846 You'll see in here, here's a list item 220 00:16:02,466 --> 00:16:07,466 that has an attribute class = pft-file 221 00:16:07,696 --> 00:16:15,366 and also a class name equal to ext-php. 222 00:16:15,366 --> 00:16:30,306 So in this line, we can retrieve an array of all of the classes 223 00:16:30,396 --> 00:16:44,166 for the document object and if the class begins 224 00:16:44,296 --> 00:16:51,486 with pft directory, and this is something that's leveraging off 225 00:16:51,486 --> 00:16:54,306 of what the PHP function does. 226 00:16:54,306 --> 00:17:01,926 It creates a UL-- it creates an li element 227 00:17:02,296 --> 00:17:05,926 that is annotated PFT directory 228 00:17:06,376 --> 00:17:08,626 if it is the name of the directory. 229 00:17:08,626 --> 00:17:15,426 So that logic-- that data is encoded here into the HTML 230 00:17:15,426 --> 00:17:19,676 and we're able to extract that data with this statement. 231 00:17:20,136 --> 00:17:27,716 The index of command is a function that returns the index 232 00:17:27,806 --> 00:17:31,726 of a substring inside another string. 233 00:17:32,116 --> 00:17:37,886 So for instance, in the word string-- 234 00:17:38,056 --> 00:17:44,236 substring, index of string would be zero, 1, 2, 235 00:17:45,156 --> 00:17:57,066 3 because this substring appears here starting at character three 236 00:17:58,146 --> 00:18:02,446 and it returns negative one 237 00:18:02,446 --> 00:18:08,616 if the substring is not found in the string. 238 00:18:09,186 --> 00:18:17,006 So what this is detecting is the following logic will only be 239 00:18:17,006 --> 00:18:22,376 executed if the class name begins with the directory. 240 00:18:22,376 --> 00:18:30,966 So now we're going to handle the directory and in the directory, 241 00:18:31,796 --> 00:18:34,116 we will get the child nodes. 242 00:18:34,256 --> 00:18:36,806 Here's another document object property. 243 00:18:37,216 --> 00:18:42,346 The child nodes document object property contains a reference 244 00:18:42,686 --> 00:18:45,956 to an array that contains all 245 00:18:45,956 --> 00:18:48,146 of the child nodes of the current node. 246 00:18:48,606 --> 00:18:56,946 So in this case, actually it would be easier on the screen, 247 00:18:57,136 --> 00:18:59,626 if you look here at the screen. 248 00:18:59,946 --> 00:19:07,806 List item class equals PFT directory, that is what-- 249 00:19:08,456 --> 00:19:18,476 inside this list item, the list item class equals PFT directory 250 00:19:18,476 --> 00:19:27,116 is aMenus underscore i and we're going to get the child nodes 251 00:19:27,166 --> 00:19:29,986 of this and as you can see how it indents, 252 00:19:30,646 --> 00:19:34,966 it's going to return an array of references to all 253 00:19:34,966 --> 00:19:36,606 of its direct children. 254 00:19:37,356 --> 00:19:45,946 And again, arrays have a length property. 255 00:19:46,436 --> 00:19:48,626 So you're able to iterate 256 00:19:48,626 --> 00:19:52,956 through until the end of the array. 257 00:19:53,436 --> 00:19:56,186 So when you're getting to know JavaScript and getting 258 00:19:56,186 --> 00:19:59,036 to know the document object, you'll pick up a few 259 00:19:59,036 --> 00:20:01,896 of these property names along the way, 260 00:20:01,936 --> 00:20:05,886 and then once you've learned a few you'll have a good handle 261 00:20:07,076 --> 00:20:12,266 on what API the document object model exposes to you. 262 00:20:14,146 --> 00:20:17,846 Here we get all of the sub menus 263 00:20:18,266 --> 00:20:24,036 with tag name equals A. Tag name is the actual name 264 00:20:24,036 --> 00:20:28,016 of the element, so here is an A element, an anchor element, 265 00:20:28,576 --> 00:20:31,946 and so now we're going to handle this anchor element 266 00:20:32,836 --> 00:20:37,756 and set the onclick property of that equal to a function. 267 00:20:38,076 --> 00:20:41,456 Now here is JavaScript we have an anonymous function. 268 00:20:41,806 --> 00:20:44,896 The function is declared right here inside the loop, 269 00:20:44,896 --> 00:20:50,356 you have function and that function goes all the way 270 00:20:50,356 --> 00:20:51,006 to here. 271 00:20:51,006 --> 00:20:52,946 Let me highlight it. 272 00:20:53,436 --> 00:20:55,216 That's the entire function 273 00:20:55,496 --> 00:21:00,496 that is then stored inside the onclick of the sub menu. 274 00:21:00,946 --> 00:21:08,856 And because in JavaScript functions are first class 275 00:21:09,396 --> 00:21:14,776 citizens there are-- functions are first class data 276 00:21:14,776 --> 00:21:17,626 in JavaScript, which means that they can be passed 277 00:21:17,626 --> 00:21:21,836 into a function, return from a function, 278 00:21:21,926 --> 00:21:26,516 in here we're storing a function inside of a variable 279 00:21:26,516 --> 00:21:30,896 and that variable is a property 280 00:21:30,896 --> 00:21:35,406 of whatever object is inside the array submenu[j]. 281 00:21:36,216 --> 00:21:39,746 So sub menu is a an array of objects. 282 00:21:40,336 --> 00:21:44,276 We have one of those objects currently in memory 283 00:21:44,626 --> 00:21:48,126 and we're putting inside a property 284 00:21:48,126 --> 00:21:51,486 of that object a function that would be executed 285 00:21:51,486 --> 00:21:55,316 at a particular time that is arranged by the browser 286 00:21:55,436 --> 00:21:58,666 and onclick happens when you click on it. 287 00:21:58,666 --> 00:22:04,406 And-- so I'm not going to go through all of the code line 288 00:22:04,406 --> 00:22:09,466 by line but basically, what that does is make it so that 289 00:22:09,466 --> 00:22:16,276 when you click on the files themselves it gives you an alert 290 00:22:16,566 --> 00:22:21,176 that actually tells you the name of the file itself. 291 00:22:21,176 --> 00:22:24,186 Inside each of these document objects, 292 00:22:24,666 --> 00:22:30,326 in this case it's an anchor object, 293 00:22:30,886 --> 00:22:37,826 there is an onclick property and inside each 294 00:22:37,826 --> 00:22:42,266 of those onclick properties this is a reference to this function. 295 00:22:43,226 --> 00:22:48,596 So I think we've kind of established the basic point here 296 00:22:49,206 --> 00:22:57,546 so let's retreat out a little bit. 297 00:23:02,796 --> 00:23:09,666 So, when you're writing JavaScript, it's important 298 00:23:09,666 --> 00:23:11,826 to be stylistically consistent. 299 00:23:12,446 --> 00:23:16,556 JavaScript is a language that was made in a hurry, 300 00:23:16,936 --> 00:23:20,426 it was made in a very short period 301 00:23:20,426 --> 00:23:23,836 of time during browser wars between Netscape 302 00:23:23,836 --> 00:23:25,086 and Internet Explorer. 303 00:23:25,476 --> 00:23:29,866 And the browsers were trying to one up each other 304 00:23:29,866 --> 00:23:34,166 and it was developed during a very short period of time. 305 00:23:34,166 --> 00:23:37,806 And so as a result there are lot of good things in JavaScript 306 00:23:37,806 --> 00:23:41,156 but there are also a lot of bad things, 307 00:23:41,386 --> 00:23:46,756 and the bad things are not useless but there are things 308 00:23:46,826 --> 00:23:49,166 that lead to dirty code. 309 00:23:49,856 --> 00:23:52,296 So at the beginning of the section I talked 310 00:23:52,296 --> 00:23:54,616 about these videos by Douglas Crockford. 311 00:23:54,616 --> 00:23:58,406 He is a JavaScript guru that was around at the time 312 00:23:58,406 --> 00:24:01,946 that JavaScript was first blossoming onto the stage 313 00:24:01,946 --> 00:24:04,946 and he was one of the early players in that space. 314 00:24:05,716 --> 00:24:11,406 And Douglas Crockford is I guess most famous 315 00:24:11,466 --> 00:24:17,246 for having invented and-- one could say maybe not invented 316 00:24:17,246 --> 00:24:22,096 but popularized the JSON JavaScript object notation data 317 00:24:22,096 --> 00:24:26,096 format that we're going to use later in this course. 318 00:24:26,586 --> 00:24:31,676 And Douglas Crocfkford is somebody whose program did a lot 319 00:24:31,676 --> 00:24:37,386 of languages and he understands a lot about the interaction 320 00:24:37,386 --> 00:24:43,376 between coding style and a predisposition for errors 321 00:24:43,376 --> 00:24:44,906 to creep into the code. 322 00:24:45,356 --> 00:24:48,406 And with that in mind he wrote this tool originally 323 00:24:48,746 --> 00:24:53,136 as a stylistic enforcer for writing good JavaScript code 324 00:24:53,726 --> 00:24:58,816 that would teach you and enforce 325 00:24:59,186 --> 00:25:02,856 in your own code these certain best practices 326 00:25:02,856 --> 00:25:03,876 with the JavaScript. 327 00:25:04,126 --> 00:25:08,006 Stuff that's written with JSLint doesn't necessarily run faster, 328 00:25:08,326 --> 00:25:14,026 it's just cleaner, easier to maintain and in general, more-- 329 00:25:14,026 --> 00:25:20,136 it tends to reduce the probability 330 00:25:20,136 --> 00:25:27,146 that bugs are difficult to see for predictable reasons. 331 00:25:27,406 --> 00:25:31,136 So its most often used online 332 00:25:31,136 --> 00:25:33,076 because it's a tool that's written in JavaScript. 333 00:25:33,456 --> 00:25:35,546 You can paste some JavaScript right 334 00:25:35,546 --> 00:25:37,366 into here and then lint it. 335 00:25:37,796 --> 00:25:47,616 In fact, if we go back into JavaScript and-- 336 00:25:53,616 --> 00:26:03,846 let's see of it opens up. 337 00:26:04,026 --> 00:26:11,316 So you copy it and here press JSLint then you'll see a list 338 00:26:11,316 --> 00:26:16,006 of all the stylistic things that you could have done differently 339 00:26:16,376 --> 00:26:21,856 but I highly encourage you to re-factor your code with this 340 00:26:21,856 --> 00:26:26,926 in order to learn from Douglas Crockford's experience. 341 00:26:27,466 --> 00:26:30,886 He is very idiosyncratic and he has a certain way 342 00:26:30,886 --> 00:26:32,256 that he likes things coded 343 00:26:32,256 --> 00:26:34,636 and that way is not necessarily the best way 344 00:26:34,986 --> 00:26:38,036 but he is somebody certainly who has a lot of experience 345 00:26:38,036 --> 00:26:42,526 in the space and it can't hurt a JavaScript developer to know 346 00:26:42,526 --> 00:26:48,146 about Douglas Crockford's highly influential style in the space. 347 00:26:48,606 --> 00:26:52,866 So you can certainly correct it here in the browser 348 00:26:52,926 --> 00:26:59,466 by pasting it into this display and then clicking JSLint 349 00:26:59,466 --> 00:27:06,726 or you can integrate it into your actual command line here. 350 00:27:07,106 --> 00:27:09,306 I've included some instructions here 351 00:27:09,306 --> 00:27:11,026 for installing it in the Impliance. 352 00:27:11,766 --> 00:27:13,246 Once you install it 353 00:27:13,246 --> 00:27:17,256 in the appliance then you can do a jslint main.js 354 00:27:17,256 --> 00:27:20,456 and it gives you those same errors 355 00:27:20,816 --> 00:27:23,686 that are right here at the command line. 356 00:27:23,686 --> 00:27:25,816 And because it's in such a predictable format 357 00:27:26,326 --> 00:27:28,906 and because people have been writing code on the command line 358 00:27:28,906 --> 00:27:33,876 for years, there is a syntax called error format that is used 359 00:27:33,876 --> 00:27:37,866 to help parse the output of thees linters. 360 00:27:38,226 --> 00:27:44,186 A linter is a tool that helps you analyze your code and see 361 00:27:44,186 --> 00:27:47,996 if you can improve certain things about it 362 00:27:47,996 --> 00:27:51,686 and it goes all the way back to C, there were linters for C. 363 00:27:52,806 --> 00:27:59,606 And in this case if you know the error format you can write a 364 00:27:59,606 --> 00:28:04,646 little script for Vim, the editor, that will read 365 00:28:04,646 --> 00:28:08,966 through the document and let you process it all in one place. 366 00:28:09,376 --> 00:28:17,726 So I'm going to copy main to main2.js and just open up that 367 00:28:18,256 --> 00:28:24,936 and because I have error format installed, I can press F4 368 00:28:25,296 --> 00:28:29,176 and you can see it jumps to the first error which is 369 00:28:29,176 --> 00:28:35,816 on line 33 column 3 so I can go 33 capital G and then go 370 00:28:35,816 --> 00:28:37,346 to column 3, right here. 371 00:28:37,346 --> 00:28:40,786 It puts your cursor right there and it says missing use 372 00:28:40,836 --> 00:28:42,896 of use strict statement. 373 00:28:43,346 --> 00:28:45,096 So at this point if I was curios about what 374 00:28:45,096 --> 00:28:48,496 that meant I could say use strict JSLint 375 00:28:50,256 --> 00:28:53,056 and usually a Stack Overflow thing comes up 376 00:28:53,056 --> 00:28:55,996 and see 619 people have found this useful. 377 00:28:56,866 --> 00:29:01,076 And so basically, you have to put 378 00:29:01,076 --> 00:29:07,466 that phrase use strict somewhere in your code and you can read 379 00:29:07,466 --> 00:29:12,306 through here in order to figure out why the basic answer is 380 00:29:12,306 --> 00:29:16,186 that there are many different versions of JavaScript 381 00:29:16,226 --> 00:29:18,746 and for backwards compatibility reasons 382 00:29:18,746 --> 00:29:23,766 when they made new versions of JavaScript, they didn't want 383 00:29:23,766 --> 00:29:26,716 to deprecate certain features that were a bad idea 384 00:29:26,716 --> 00:29:28,226 because it would break the code. 385 00:29:28,336 --> 00:29:30,856 So if you do use script 386 00:29:30,986 --> 00:29:34,546 or use strict then it deprecates certain things 387 00:29:34,546 --> 00:29:36,036 and makes available ceratin things. 388 00:29:36,536 --> 00:29:49,776 And so let's go up here to the top and just put use strict 389 00:29:50,496 --> 00:29:58,006 and now I'm going to press F4 again. 390 00:29:58,136 --> 00:30:00,536 And that error has gone away 391 00:30:00,536 --> 00:30:01,976 and now we've moved on to the next one. 392 00:30:02,236 --> 00:30:05,726 It says, expected if at column 5 not column 5, oh, 393 00:30:05,726 --> 00:30:09,996 well E wants us to indent in a certain way, so I'm going 394 00:30:09,996 --> 00:30:13,616 to make it go now, you can see right here, I'm at column 5, 395 00:30:13,616 --> 00:30:16,156 not column 3, press F4 again, 396 00:30:17,256 --> 00:30:20,676 and it says document was used before it was defined, 397 00:30:20,766 --> 00:30:21,996 so again you could Google this, 398 00:30:22,346 --> 00:30:32,106 document used before defined JSLint. 399 00:30:33,286 --> 00:30:38,416 In general, when you have a global variable, 400 00:30:38,416 --> 00:30:41,546 global variables are very, very problematic in JavaScript 401 00:30:41,586 --> 00:30:47,176 because on one page, you can have not only the page authors 402 00:30:47,176 --> 00:30:51,666 JavaScript code array but maybe an ad running 403 00:30:51,956 --> 00:30:54,196 that is loaded dynamically 404 00:30:54,196 --> 00:30:57,926 through a content distribution network where the person 405 00:30:57,926 --> 00:31:01,456 who wrote the JavaScript doesn't even know what page it's running 406 00:31:01,456 --> 00:31:06,726 on and because there is the capability for global variables 407 00:31:06,786 --> 00:31:11,366 to exist in JavaScript, if you make an-- 408 00:31:11,396 --> 00:31:17,726 a variable called foo in your JS file and then 409 00:31:18,006 --> 00:31:23,666 in an ad.js file they, unbeknownst to you, 410 00:31:23,926 --> 00:31:32,156 also make a var foo then which ever one is located lower 411 00:31:32,276 --> 00:31:39,946 on the page when it's actually loaded will clover the earlier 412 00:31:39,946 --> 00:31:43,486 version of the variable. 413 00:31:44,396 --> 00:31:47,486 So this is very problematic in JavaScript. 414 00:31:47,486 --> 00:31:51,596 It's one of the not the good parts of JavaScript but one 415 00:31:51,596 --> 00:31:57,346 of the bad parts and to mitigate that, he wants us to acknowledge 416 00:31:57,446 --> 00:32:01,576 in the code that this is a global variable by putting 417 00:32:01,576 --> 00:32:03,106 in this global directive. 418 00:32:03,516 --> 00:32:06,916 Basically, what he's suggesting here is 419 00:32:06,916 --> 00:32:10,676 that every single global variable you should acknowledge 420 00:32:10,716 --> 00:32:13,146 that it is global and that it could be-- 421 00:32:13,146 --> 00:32:14,806 it could be clobbered. 422 00:32:15,406 --> 00:32:22,496 So, if I press F4 again, it says, document, let me see. 423 00:32:24,306 --> 00:32:30,416 Oh, yeah, you have to say global document, 424 00:32:31,146 --> 00:32:34,226 and it says document was used before was it defined 425 00:32:34,266 --> 00:32:44,396 so if I do var document then, now, we can go on. 426 00:32:44,396 --> 00:32:49,446 It says expected a left brace and instead saw a return, 427 00:32:49,856 --> 00:32:54,166 so here he's saying you need to insert a right brace 428 00:32:54,206 --> 00:32:56,016 and basically, what he's suggesting is 429 00:32:56,376 --> 00:33:01,376 that it's bad coding practice, do not use these braces with ifs 430 00:33:01,446 --> 00:33:07,536 because it lets bugs go into your code more easily. 431 00:33:08,236 --> 00:33:14,116 So, now it says, expected var at column 5 not column 3, 432 00:33:14,436 --> 00:33:18,856 I'll make it go to column 5, combine this 433 00:33:18,856 --> 00:33:20,916 with previous var statement. 434 00:33:21,346 --> 00:33:25,966 So, in JavaScript you can declare all your variables 435 00:33:26,736 --> 00:33:36,206 at once and then we're going to get-- it's-- 436 00:33:36,976 --> 00:33:40,876 the for is expected at column 5, so basically they want 1, 2, 3, 437 00:33:40,876 --> 00:33:45,266 4 spaces for each indent and you can guess that this variable 438 00:33:45,436 --> 00:33:49,486 and this variable as well are also going to come up. 439 00:33:49,486 --> 00:33:53,526 We're going to need to insert I, M class, 440 00:33:53,596 --> 00:33:57,526 all of our variables here at the top. 441 00:33:59,616 --> 00:34:06,376 So, if you move all the way out and complete the cycle. 442 00:34:07,516 --> 00:34:26,676 [ Typing ] 443 00:34:27,176 --> 00:34:30,886 If I press F4 here, you can see it just returns. 444 00:34:31,586 --> 00:34:37,056 I'm completed with linting this and I've-- 445 00:34:37,056 --> 00:34:38,936 You can see that all the variables are defined 446 00:34:38,936 --> 00:34:42,026 at the top of the function. 447 00:34:42,626 --> 00:34:44,626 Here's a global document directive 448 00:34:44,626 --> 00:34:47,276 for the global document object. 449 00:34:47,826 --> 00:34:53,956 Here's another function and this one is pretty different, 450 00:34:54,296 --> 00:34:57,036 this is a pretty significant departure 451 00:34:57,126 --> 00:34:58,896 from the previous version. 452 00:34:58,896 --> 00:35:03,846 Let me just open that one up side by side. 453 00:35:04,516 --> 00:35:15,796 [ Typing ] 454 00:35:16,296 --> 00:35:20,956 So, before you'll note that we looped through 455 00:35:21,366 --> 00:35:29,626 and inside the loop, we declared an anonymous function 456 00:35:30,816 --> 00:35:37,556 that was put inside the onclick handler for, here it is, yeah. 457 00:35:38,016 --> 00:35:46,246 submenu[j].tagName = A then submenu[j].onclick = function. 458 00:35:46,246 --> 00:35:47,736 And then here's this huge function. 459 00:35:48,736 --> 00:35:51,466 Well, this is very problematic and it leads to bugs, 460 00:35:51,466 --> 00:35:54,006 especially with event handling, 461 00:35:54,266 --> 00:36:01,816 because we're storing separate function in every single element 462 00:36:01,816 --> 00:36:07,556 of that array even when JavaScript has the ability 463 00:36:07,556 --> 00:36:10,546 to store a function in an object like this, 464 00:36:10,546 --> 00:36:12,906 submenuOnclickFunc = function. 465 00:36:12,906 --> 00:36:14,766 And then here is that same code. 466 00:36:14,766 --> 00:36:16,976 It goes all the way down to there. 467 00:36:17,236 --> 00:36:19,406 And now, we began looping through. 468 00:36:20,266 --> 00:36:23,466 And now, it's reduced to one line, 469 00:36:23,576 --> 00:36:27,396 submenu[j].onclick = submenuOnclicklFunc. 470 00:36:28,516 --> 00:36:32,876 And not only does it make more readable like you'll notice 471 00:36:32,936 --> 00:36:39,266 that here it has to indent quite far in order to get 472 00:36:39,266 --> 00:36:40,656 through all that nested logic. 473 00:36:41,106 --> 00:36:43,706 But also it makes it, more importantly, 474 00:36:43,706 --> 00:36:47,886 it makes it more correct because when you're dealing 475 00:36:47,886 --> 00:36:51,516 with event handling functions, it's very important 476 00:36:51,516 --> 00:36:54,976 that you're only dealing with one function in memory 477 00:36:54,976 --> 00:36:56,996 and not creating a thousand functions. 478 00:36:57,046 --> 00:37:00,636 Each function has an instantiation cost 479 00:37:00,636 --> 00:37:03,526 so if you instantiate a thousand functions you have 480 00:37:03,586 --> 00:37:05,166 to do that each time. 481 00:37:05,506 --> 00:37:07,746 Also, there's no predictability about events. 482 00:37:08,256 --> 00:37:12,726 I could get into exotic examples that have to do 483 00:37:12,726 --> 00:37:16,206 with timed delays and maybe with things moving around 484 00:37:16,206 --> 00:37:20,356 but you'll have to take my word for it or watch his videos 485 00:37:20,356 --> 00:37:24,546 because he gives a good example of it as well. 486 00:37:24,546 --> 00:37:28,746 So, this is, in general, the way that he wants you 487 00:37:28,746 --> 00:37:30,826 to do it and it's a good idea. 488 00:37:30,826 --> 00:37:36,776 Declare all your variables at the top of the function. 489 00:37:37,366 --> 00:37:41,156 Then-- And then initialize each of your variables. 490 00:37:41,526 --> 00:37:45,876 Here one of our variables is a function that needs 491 00:37:45,926 --> 00:37:47,596 to be initialized with this function. 492 00:37:48,256 --> 00:37:51,976 And then go into the logic of the function itself. 493 00:37:52,116 --> 00:37:59,996 So at this point, I want to take a step back. 494 00:38:04,136 --> 00:38:07,976 And just run you through some slides from a presentation 495 00:38:07,976 --> 00:38:10,156 that Crockford made a few years ago. 496 00:38:10,706 --> 00:38:14,556 This is for YUI Theater. 497 00:38:14,556 --> 00:38:16,836 So we're just going to run through the quick syntax 498 00:38:17,356 --> 00:38:20,846 and some of the pitfalls and some 499 00:38:21,146 --> 00:38:24,066 of the examples of JavaScript. 500 00:38:24,406 --> 00:38:26,256 Again, this is by Douglas Crockford. 501 00:38:26,256 --> 00:38:27,086 These are his slides. 502 00:38:27,556 --> 00:38:31,166 He gets into a lot of really kind of esoteric examples 503 00:38:31,166 --> 00:38:34,626 that we will not get into here but these are some, you know, 504 00:38:34,626 --> 00:38:39,466 some bridge selections from some slides that he's done before. 505 00:38:40,936 --> 00:38:43,246 So, JavaScript has good parts. 506 00:38:43,246 --> 00:38:44,416 We'll get to them later. 507 00:38:44,836 --> 00:38:47,166 Right now, we're going to kind of talk about the bad parts 508 00:38:47,166 --> 00:38:50,676 which come from legacy, good intention and haste. 509 00:38:50,676 --> 00:38:54,496 Haste because it was developed really fast. 510 00:38:54,496 --> 00:39:02,116 And so with numbers, there's no integer types so immediately 511 00:39:03,136 --> 00:39:06,886 with the integer type-- 512 00:39:06,886 --> 00:39:11,326 if you're dealing things with money, you'll have to be aware 513 00:39:11,326 --> 00:39:13,926 that there's going to be some rounding 514 00:39:13,926 --> 00:39:17,526 because there's floating point math all over the place. 515 00:39:18,116 --> 00:39:20,586 Of course, it is 64-bit floating points 516 00:39:20,756 --> 00:39:25,696 so you can achieve a level of precision with it. 517 00:39:26,036 --> 00:39:28,616 But everything is based off of approximations. 518 00:39:28,616 --> 00:39:30,706 And that becomes problematic in certain points. 519 00:39:31,456 --> 00:39:36,656 For example, the associative law does not hold 520 00:39:36,656 --> 00:39:40,326 because of the slight bits of rounding that happen 521 00:39:40,736 --> 00:39:44,346 with the floating point representations of the numbers. 522 00:39:45,066 --> 00:39:48,156 So this actually produces false for some numbers of a, b, 523 00:39:48,156 --> 00:39:52,526 c even though mathematically it's not a false statement. 524 00:39:54,696 --> 00:39:58,866 So, decimal functions are approximate. 525 00:39:59,436 --> 00:40:01,776 That is actually false here. 526 00:40:04,456 --> 00:40:08,386 In JavaScript there is a math object and when we talk 527 00:40:08,386 --> 00:40:12,456 about objects in JavaScript we use dot notation in order 528 00:40:12,456 --> 00:40:15,166 to access the member methods. 529 00:40:15,536 --> 00:40:21,936 So in here you would do math.sqrt and then pass 530 00:40:21,936 --> 00:40:26,776 in parameters in order to get to the square root function. 531 00:40:27,196 --> 00:40:30,096 So be aware that if you want to use any of these functions, 532 00:40:30,096 --> 00:40:36,796 you have to prefix it with that math object names 533 00:40:36,796 --> 00:40:39,626 for the global variable and then the dot operator. 534 00:40:39,986 --> 00:40:41,546 And again, this is, you know, 535 00:40:41,616 --> 00:40:48,936 an example of how fragile the global name space is if some, 536 00:40:48,936 --> 00:40:55,746 you know, malicious JS were to override the math variable 537 00:40:55,846 --> 00:40:57,896 and replace it with its own contents. 538 00:40:58,136 --> 00:41:00,716 Maybe they could even manipulate your code if they knew 539 00:41:00,716 --> 00:41:03,726 that you were using and relying on those functions. 540 00:41:04,746 --> 00:41:12,476 So that's an example of how to call a math function. 541 00:41:12,476 --> 00:41:15,646 NaN, you'll see this inside of your debugging. 542 00:41:15,646 --> 00:41:20,766 This is-- this stands for Not a Number and it's the result 543 00:41:20,766 --> 00:41:23,996 of erroneous operations. 544 00:41:23,996 --> 00:41:32,086 So if you do a 1 divided by 0, then you'll get NaN. 545 00:41:32,086 --> 00:41:35,926 The-- it's toxic so any arithmetic operation with-- 546 00:41:36,566 --> 00:41:42,526 that produces this result will also have NaN as a result. 547 00:41:42,896 --> 00:41:46,906 So that means that if you add 1 to 1 divided 548 00:41:46,906 --> 00:41:51,186 by 0 then the result of that will also be NaN, not a number. 549 00:41:52,076 --> 00:41:54,996 But here are some other bad parts. 550 00:41:55,236 --> 00:42:01,766 NaN is not equals equals equals NaN which is very strange 551 00:42:02,046 --> 00:42:08,216 and even stranger, not a number is not equals equals NaN. 552 00:42:08,466 --> 00:42:10,996 So the difference here between equals equals equals 553 00:42:10,996 --> 00:42:17,516 and equals equals is that the first does not involve type 554 00:42:17,516 --> 00:42:20,436 coercion, it's strictly quality. 555 00:42:20,436 --> 00:42:23,886 But the second does allow type coercion 556 00:42:24,236 --> 00:42:28,856 and by type coercion I mean that you can 557 00:42:28,856 --> 00:42:31,876 in certain cases treat strings like numbers 558 00:42:32,156 --> 00:42:35,566 and in other cases you can treat them as strings. 559 00:42:36,016 --> 00:42:38,376 And we'll get into that a little bit later on. 560 00:42:39,236 --> 00:42:41,986 So in order to test equality 561 00:42:41,986 --> 00:42:50,146 with strings use equals equals equals plus can mean concatenate 562 00:42:50,246 --> 00:42:52,136 two strings or it can mean add. 563 00:42:52,626 --> 00:42:55,606 So here the string dollar sign plus the string 1 plus the 564 00:42:55,606 --> 00:42:59,406 string 2 equals the string dollar sign 1, 2. 565 00:43:00,676 --> 00:43:05,256 And it's equivalent to using the concat function. 566 00:43:05,656 --> 00:43:11,406 And here you'll see this string that's contained in these-- 567 00:43:12,176 --> 00:43:15,836 between these two singles quotes that is actually accessible 568 00:43:15,836 --> 00:43:18,106 as an object using the dot notation. 569 00:43:18,316 --> 00:43:24,166 And it has the concat function as a method of that object. 570 00:43:24,576 --> 00:43:28,246 Everything in functions or everything in object-- 571 00:43:28,246 --> 00:43:33,026 JavaScript is an object/function. 572 00:43:33,796 --> 00:43:37,456 So in order to convert a number to a string, 573 00:43:38,026 --> 00:43:43,066 you can call toString on the number 574 00:43:43,066 --> 00:43:46,726 because numbers are objects. 575 00:43:47,186 --> 00:43:50,606 There's this interesting operator, the plus, 576 00:43:50,606 --> 00:43:59,196 if you put plus in front of the string one like plus 1, 577 00:43:59,196 --> 00:44:04,636 then that actually turns this into the number one or if, 578 00:44:05,736 --> 00:44:12,496 sorry, if var contain-- if a variable contains a string 579 00:44:12,496 --> 00:44:22,156 and it's used with the plus operator, then you can coerce it 580 00:44:22,466 --> 00:44:25,806 into a number by using typecasting facilities. 581 00:44:26,066 --> 00:44:33,796 You can also use the parseInt, the global parseInt function, 582 00:44:33,796 --> 00:44:40,766 where you pass in a string, and then you specify the-- 583 00:44:41,286 --> 00:44:45,176 you specify the radix. 584 00:44:45,666 --> 00:44:48,676 Every string has a length property, 585 00:44:48,676 --> 00:44:49,996 this is much like arrays. 586 00:44:50,486 --> 00:44:52,106 Arrays have a length property as well. 587 00:44:52,106 --> 00:44:54,246 This contains a number that's equivalent 588 00:44:54,246 --> 00:44:55,516 to the length of the string. 589 00:44:56,066 --> 00:44:59,156 Extended characters are counted as two, so that means 590 00:44:59,206 --> 00:45:04,076 that if you have a Unicode character like umlaut u 591 00:45:04,306 --> 00:45:10,696 or something, then that will actually give you a count of two 592 00:45:10,696 --> 00:45:14,486 for one character if it's, you know, a multi-byte character. 593 00:45:15,716 --> 00:45:19,726 So for arrays, arrays inherit from objects, 594 00:45:19,726 --> 00:45:23,196 so arrays are also objects, they also have a length property, 595 00:45:23,646 --> 00:45:26,216 which allows you to look through them as we saw before. 596 00:45:26,726 --> 00:45:31,956 In order to do an array literal, you use the square brackets. 597 00:45:31,956 --> 00:45:35,086 This is much like some other languages. 598 00:45:35,336 --> 00:45:39,536 You have to put commas in between the different items, 599 00:45:39,536 --> 00:45:46,826 and then new items can be appended by doing the-- 600 00:45:47,136 --> 00:45:52,426 by including an L-- an index that's outside of the array. 601 00:45:53,066 --> 00:45:56,906 So the thing that's really kind of nefarious about arrays is 602 00:45:56,906 --> 00:46:01,036 that indexes are actually converted to strings and used 603 00:46:01,036 --> 00:46:03,056 as names for retrieving values. 604 00:46:04,436 --> 00:46:06,046 This is really strange. 605 00:46:06,636 --> 00:46:12,956 The-- You can run to some problems with it. 606 00:46:12,956 --> 00:46:21,426 It's not like a Java array or something where if you-- the-- 607 00:46:21,726 --> 00:46:26,256 if you remove an index from the middle of the array, 608 00:46:26,486 --> 00:46:28,626 you'll literally have an array with a hole in it 609 00:46:29,036 --> 00:46:30,916 because those are string keys 610 00:46:31,006 --> 00:46:36,396 to those values unlike, say, a Java array. 611 00:46:36,946 --> 00:46:41,296 So array methods have-- these are some array methods, 612 00:46:41,296 --> 00:46:44,416 and because these belong to the array object, 613 00:46:44,416 --> 00:46:46,396 you can have an array and a variable 614 00:46:46,396 --> 00:46:51,056 and then just call dot splice or dot slice or dot sort. 615 00:46:51,936 --> 00:46:57,006 So sort is very unusual because it defaults 616 00:46:57,036 --> 00:46:58,276 to alphabetical ordering. 617 00:46:58,866 --> 00:47:01,346 And in alphabetical ordering, 618 00:47:01,906 --> 00:47:04,856 this is actually the alphabetical ordering 619 00:47:04,856 --> 00:47:10,236 of these numbers, so be aware, and even if you put numbers in 620 00:47:10,406 --> 00:47:13,696 and you call sort, then they'll sort 621 00:47:13,696 --> 00:47:17,676 out of order unless you actually, you know, do sort 622 00:47:17,676 --> 00:47:19,736 and then pass in this function 623 00:47:19,736 --> 00:47:23,066 that returns a number that's either greater than zero, 624 00:47:23,066 --> 00:47:25,936 equal to zero, less than zero in order to indicate 625 00:47:25,936 --> 00:47:27,196 which is greater than which. 626 00:47:27,606 --> 00:47:30,946 So that's part of the bad elements I guess 627 00:47:30,946 --> 00:47:32,946 of JavaScript, the funky defaults. 628 00:47:33,936 --> 00:47:36,496 Here if you do delete-- 629 00:47:36,986 --> 00:47:44,016 delete is a keyword and if you say delete array and then three, 630 00:47:44,436 --> 00:47:48,726 in an array that's five indices long, then now you have a hole 631 00:47:48,726 --> 00:47:51,406 in the numbering and if you try to loop through it, 632 00:47:51,766 --> 00:47:54,646 you'll actually encounter an error at that point. 633 00:47:55,156 --> 00:47:57,716 But array.splice will remove the element 634 00:47:57,716 --> 00:47:59,386 or renumber all the following elements, 635 00:47:59,386 --> 00:48:01,446 which is pretty inefficient. 636 00:48:02,696 --> 00:48:07,136 So use objects when the names are arbitrary strings 637 00:48:07,836 --> 00:48:12,136 and use arrays when the names are sequential integers. 638 00:48:12,766 --> 00:48:18,116 They're very similar in JavaScript. 639 00:48:18,646 --> 00:48:24,356 In JavaScript, the simplest object is two curly braces, 640 00:48:24,396 --> 00:48:29,216 in JavaScript the simplest array is two square braces. 641 00:48:29,536 --> 00:48:34,466 And you can have objects that contain arrays, 642 00:48:34,786 --> 00:48:37,406 and you can have arrays that contain objects, as we'll see 643 00:48:37,406 --> 00:48:39,416 when we get into JSON in a little bit. 644 00:48:40,446 --> 00:48:45,426 Unlike a lot of languages, regular expressions, 645 00:48:45,976 --> 00:48:50,016 which is a special sub-language that's designed 646 00:48:50,016 --> 00:48:55,276 for searching strings, they're actually a type in JavaScript, 647 00:48:55,676 --> 00:49:00,026 and you actually indicate them with the slash on the end 648 00:49:00,026 --> 00:49:01,336 and the slash on the beginning. 649 00:49:01,336 --> 00:49:17,056 So you can literally say var foo equals slash star dot-- or dot-- 650 00:49:17,186 --> 00:49:23,506 or, no, php dot star slash and then semicolon. 651 00:49:23,506 --> 00:49:26,776 You don't have to put in strings like some other languages. 652 00:49:28,576 --> 00:49:33,316 So in JavaScript things aren't typeless, 653 00:49:33,396 --> 00:49:36,216 everything is loosely typed. 654 00:49:36,296 --> 00:49:39,486 But all of these values are kind of falsy. 655 00:49:41,076 --> 00:49:46,786 And so if you put each of these things inside of an 656 00:49:46,786 --> 00:49:51,286 if statement, it will not execute. 657 00:49:51,526 --> 00:49:57,976 And so these operators are equals and not equals. 658 00:49:58,626 --> 00:50:01,416 And they can do type coercion, 659 00:50:01,676 --> 00:50:04,976 which means that they can convert strings into numbers 660 00:50:05,056 --> 00:50:09,376 or vice versa based off of what JavaScript thinks is best. 661 00:50:10,096 --> 00:50:12,946 You can learn those intricate rules 662 00:50:12,946 --> 00:50:15,746 of when the type coercion happens or you can do 663 00:50:15,746 --> 00:50:21,726 like Douglas Crockford suggests and just use these all the time 664 00:50:21,726 --> 00:50:23,806 which do not use type coercion. 665 00:50:24,566 --> 00:50:28,256 And the reason why you should do that is because type coercion 666 00:50:28,256 --> 00:50:36,526 and JavaScript is evil because here is an empty string, == 0, 667 00:50:37,266 --> 00:50:43,136 that is false, but the number 0 zero == empty string is true, 668 00:50:43,136 --> 00:50:47,956 and even worse, the number 0 == the string 0 is also true. 669 00:50:48,246 --> 00:50:50,346 So this is totally bizarre. 670 00:50:50,346 --> 00:50:57,526 Type coercion is truly pretty weird and I ask you 671 00:50:57,636 --> 00:50:59,056 to please stay away from it 672 00:50:59,056 --> 00:51:03,236 by using the non-type coercing operators. 673 00:51:03,916 --> 00:51:08,916 So all values in JavaScript are objects except 674 00:51:08,916 --> 00:51:10,436 for null and undefined. 675 00:51:11,336 --> 00:51:13,546 Null is a value that isn't anything. 676 00:51:13,866 --> 00:51:20,086 And undefined is a value that isn't even anything. 677 00:51:20,646 --> 00:51:21,276 All right. 678 00:51:21,976 --> 00:51:24,216 It's so weird that they have both of these keywords, 679 00:51:24,216 --> 00:51:28,406 and it has to do with this structure of variable hoisting 680 00:51:28,406 --> 00:51:30,146 that happens in JavaScript. 681 00:51:30,636 --> 00:51:37,736 And undefined is basically the default values for all variables 682 00:51:37,736 --> 00:51:41,236 and parameters that haven't been assigned a value. 683 00:51:41,466 --> 00:51:44,646 And it's in fact a value of missing members and objects. 684 00:51:44,986 --> 00:51:52,296 So if I have, you know, var M equals the simplest object 685 00:51:52,876 --> 00:51:56,666 and then I want to access M.foo 686 00:51:56,666 --> 00:52:04,546 which hasn't been accessed-- declared yet. 687 00:52:04,936 --> 00:52:11,126 This is undefined at that moment, which is different 688 00:52:11,126 --> 00:52:15,776 than null because null is something that-- It's like-- 689 00:52:15,776 --> 00:52:17,286 funny to think of it this way, 690 00:52:17,286 --> 00:52:18,936 but it's actually a positive statement. 691 00:52:18,936 --> 00:52:22,846 It's saying, "This is not anything." 692 00:52:23,206 --> 00:52:26,786 And undefined just means it hasn't been defined yet. 693 00:52:27,696 --> 00:52:32,916 So I put this in because JavaScript also has a switch, 694 00:52:32,976 --> 00:52:35,136 a switch statement. 695 00:52:35,616 --> 00:52:39,766 So that's most of the bad parts. 696 00:52:39,766 --> 00:52:41,056 Getting on to functions. 697 00:52:41,896 --> 00:52:44,526 There are two ways of declaring functions in JavaScript. 698 00:52:44,826 --> 00:52:47,246 The-- There are function statements 699 00:52:47,446 --> 00:52:49,126 and function expressions. 700 00:52:49,996 --> 00:52:53,036 This describes function expressions. 701 00:52:53,216 --> 00:52:55,786 This little part right here is a function expression. 702 00:52:56,336 --> 00:52:58,156 This is what we saw before 703 00:52:58,556 --> 00:53:01,696 and when we declared a function anonymously 704 00:53:01,696 --> 00:53:04,766 and inserted it inside the onclick handler 705 00:53:04,806 --> 00:53:06,596 of that A element. 706 00:53:07,386 --> 00:53:11,416 Function expressions have the function keyword followed 707 00:53:11,416 --> 00:53:17,126 by an optional name and then, you know, maybe some parameters 708 00:53:17,126 --> 00:53:19,476 like x here is passed in as a parameter. 709 00:53:19,766 --> 00:53:23,456 Note that you don't have to do var x or string x, 710 00:53:23,456 --> 00:53:25,556 there's no type checking that's done, 711 00:53:25,746 --> 00:53:28,636 so you just name whatever variables you want to pass in. 712 00:53:28,636 --> 00:53:31,906 And then the body has to be wrapped in curly braces 713 00:53:32,336 --> 00:53:34,466 and contains zero or more statements. 714 00:53:34,566 --> 00:53:36,116 That's a function expression. 715 00:53:36,686 --> 00:53:41,316 A function expression produces an instance 716 00:53:41,476 --> 00:53:42,916 of a function object. 717 00:53:43,496 --> 00:53:47,016 So the result of this is that an instance 718 00:53:47,016 --> 00:53:50,926 of a function object is inserted into this variable at one. 719 00:53:51,846 --> 00:53:53,836 Function objects are first class, 720 00:53:53,836 --> 00:53:55,116 which means that they can be passed 721 00:53:55,116 --> 00:53:57,276 as an argument into a function. 722 00:53:57,566 --> 00:54:00,096 They can be returned from a function, they can be assigned 723 00:54:00,096 --> 00:54:05,706 to a variable like we did here, we assigned the function into-- 724 00:54:05,896 --> 00:54:08,366 to be stored inside that variable 725 00:54:08,366 --> 00:54:11,066 and it can be stored inside an object or array. 726 00:54:11,246 --> 00:54:14,536 That's what it means to be a first class entity 727 00:54:14,616 --> 00:54:15,796 in computer science. 728 00:54:16,286 --> 00:54:19,796 A function statement on the other hand is like this. 729 00:54:20,226 --> 00:54:27,136 So you have the function keyword and then you have this label 730 00:54:27,136 --> 00:54:32,806 for the function and these are something that you can do, 731 00:54:33,186 --> 00:54:37,766 but it's a little bit deceptive and Crockford recommends 732 00:54:37,826 --> 00:54:40,116 that you actually kind of move away from this 733 00:54:40,116 --> 00:54:42,836 and go more toward the expression syntax. 734 00:54:43,276 --> 00:54:47,436 And the reason why is because function foo, 735 00:54:47,576 --> 00:54:49,696 with no parameters, an empty body, 736 00:54:49,696 --> 00:54:55,656 expands to variable foo equals function foo 737 00:54:56,766 --> 00:55:00,786 with no parameters, no body. 738 00:55:00,996 --> 00:55:05,156 And this in itself expands to variable foo equals undefined 739 00:55:05,606 --> 00:55:07,516 and then foo equals function foo. 740 00:55:08,456 --> 00:55:13,376 So this is really just a long complicated way 741 00:55:13,746 --> 00:55:18,246 of performing a function expression 742 00:55:18,576 --> 00:55:21,076 like why didn't you just make a variable foo 743 00:55:21,076 --> 00:55:24,196 and store an anonymous function in it. 744 00:55:24,396 --> 00:55:27,326 It's a little bit deceptive to do it this way 745 00:55:27,326 --> 00:55:31,016 and it's really some syntactic sugar to help persuade people 746 00:55:31,016 --> 00:55:32,916 who use classical languages just like Java 747 00:55:32,916 --> 00:55:35,876 or C++ to, to use JavaScript. 748 00:55:36,456 --> 00:55:41,336 So when they say the assignment of the function is hoisted, 749 00:55:41,786 --> 00:55:43,926 this is one of the most misunderstood things 750 00:55:43,926 --> 00:55:45,596 about JavaScript and it's-- it can-- 751 00:55:45,596 --> 00:55:49,846 it'll really trick you up in your assignments 752 00:55:49,846 --> 00:55:51,646 if you're not aware of it going into it. 753 00:55:51,966 --> 00:55:56,596 Be aware that when you start to get some bugs that have to do 754 00:55:56,596 --> 00:55:59,256 with variables being assigned values 755 00:55:59,256 --> 00:56:01,516 and you don't understand why because it's inconsistent 756 00:56:01,516 --> 00:56:04,536 with PHP and C++ and Java and other languages 757 00:56:04,536 --> 00:56:12,596 that you've used, it's because in JavaScript we have function 758 00:56:12,596 --> 00:56:14,596 scope and not block scope. 759 00:56:15,166 --> 00:56:19,876 So here I just want to reinforce this one 760 00:56:20,046 --> 00:56:24,306 where you put an anonymous function inside a variable, 761 00:56:24,306 --> 00:56:25,906 that's a function expression. 762 00:56:25,906 --> 00:56:29,956 Here where you say function addOne this is the 763 00:56:29,956 --> 00:56:30,736 function statement. 764 00:56:30,736 --> 00:56:32,656 This is the one I don't want you to use. 765 00:56:32,656 --> 00:56:37,636 This is the one I do want you to use. 766 00:56:37,736 --> 00:56:41,666 So a var statement declares 767 00:56:41,666 --> 00:56:44,256 and initializes a variable within a function. 768 00:56:45,146 --> 00:56:47,526 A variable declared anywhere 769 00:56:47,526 --> 00:56:50,726 within a function is visible everywhere within the function. 770 00:56:50,726 --> 00:56:52,936 This is the thing that really tricks people up that come 771 00:56:52,936 --> 00:57:01,526 from other languages because if you have var x equals function 772 00:57:01,916 --> 00:57:07,076 and you have some code here, 773 00:57:08,676 --> 00:57:17,286 var x var y equals 2, var x equals 3. 774 00:57:18,026 --> 00:57:24,066 Var-- even though there's code here x is actually available 775 00:57:24,946 --> 00:57:29,746 inside this code because what happens behind the scenes is 776 00:57:29,746 --> 00:57:32,906 that this part moves all the way up to the beginning 777 00:57:32,906 --> 00:57:36,806 of the function and there's implicitly this var x, 778 00:57:37,266 --> 00:57:42,586 y and then you're left with y equals 2 and x equals 3 779 00:57:42,586 --> 00:57:45,646 and X is actually valid 780 00:57:45,646 --> 00:57:49,626 as a variable inside all the entire body of the function 781 00:57:49,626 --> 00:57:53,246 and that includes functions that are nested within functions. 782 00:57:53,906 --> 00:57:58,996 So that's why Crockford recommends you declare all 783 00:57:58,996 --> 00:58:00,726 of the variables from the function right at the top 784 00:58:00,726 --> 00:58:03,776 because technically, that's what happens behind the scenes 785 00:58:03,776 --> 00:58:05,286 so why not make it more clear. 786 00:58:06,326 --> 00:58:12,166 So declaring a var, it just expands it 787 00:58:12,206 --> 00:58:18,666 out into two declarations where my var equals undefined 788 00:58:18,666 --> 00:58:22,686 and my other var equals undefined 789 00:58:22,686 --> 00:58:26,506 and then the initialization happens. 790 00:58:27,116 --> 00:58:33,876 So this function would work in Java, it would work in PHP, 791 00:58:33,876 --> 00:58:37,906 but in JavaScript it doesn't work because what happens is 792 00:58:37,906 --> 00:58:40,986 that there's not a new variable i here. 793 00:58:41,656 --> 00:58:44,686 There's only one variable i and it's hoisted up 794 00:58:44,686 --> 00:58:47,376 and declared right here and set to undefined 795 00:58:47,376 --> 00:58:49,316 and then it's overwritten. 796 00:58:49,656 --> 00:58:53,486 It'll let this-- this program will run forever. 797 00:58:53,716 --> 00:58:56,916 It will not terminate because i is not really declared here. 798 00:58:57,576 --> 00:59:03,776 So that's why you should always hoist your variables, you know, 799 00:59:03,776 --> 00:59:04,966 as a preventative measure. 800 00:59:06,086 --> 00:59:08,756 So declare all your variables at the top of the function 801 00:59:08,756 --> 00:59:10,976 and declare all functions before you call them. 802 00:59:11,336 --> 00:59:13,326 The language provides mechanisms that allow you 803 00:59:13,326 --> 00:59:17,306 to ignore this advice, but they are problematic. 804 00:59:18,096 --> 00:59:22,526 So this is also problematic 805 00:59:24,016 --> 00:59:31,356 so if you leave off a semicolon JavaScript will actually insert 806 00:59:31,356 --> 00:59:32,816 it for you automatically. 807 00:59:32,906 --> 00:59:34,916 If you are to leave a semicolon off here, 808 00:59:35,326 --> 00:59:38,196 JavaScript will be like, oh he meant semicolon, 809 00:59:38,196 --> 00:59:40,956 and semicolon means that that's the end of the statement. 810 00:59:41,476 --> 00:59:47,016 Unfortunately, the semicolon isn't always inserted 811 00:59:47,016 --> 00:59:49,326 in the right place and it isn't-- 812 00:59:49,326 --> 00:59:50,776 doesn't exactly do you want so you have 813 00:59:50,776 --> 00:59:54,966 to be really careful not to admit those semicolons. 814 00:59:55,516 --> 00:59:58,716 So besides variable hoisting the value 815 00:59:58,716 --> 01:00:01,996 of the this variable is probably the single most confusing thing 816 01:00:01,996 --> 01:00:03,896 about JavaScript. 817 01:00:04,766 --> 01:00:07,556 So this parameter contains a reference 818 01:00:08,076 --> 01:00:10,846 to the objects of invocation. 819 01:00:11,116 --> 01:00:14,126 What that means is that the object 820 01:00:14,126 --> 01:00:18,136 when it's actually invoked, when it's actually ran 821 01:00:18,956 --> 01:00:22,666 in the browser, this is-- 822 01:00:22,666 --> 01:00:25,736 the keyword this is very different depending 823 01:00:25,736 --> 01:00:29,386 on where it is instantiated. 824 01:00:30,186 --> 01:00:32,246 So in general this allows a method 825 01:00:32,246 --> 01:00:34,446 to know what object it is concerned with. 826 01:00:35,386 --> 01:00:40,526 And it allows a single function to serve as many functions. 827 01:00:40,526 --> 01:00:43,166 You know, it is really important. 828 01:00:43,236 --> 01:00:46,176 It's the key to making big structures. 829 01:00:47,026 --> 01:00:50,036 Things like Gmail wouldn't be possible without this keyword. 830 01:00:50,106 --> 01:00:56,826 As we saw at the very end of lecture the parentheses, 831 01:00:56,896 --> 01:00:58,696 suffix operators surrounding zero 832 01:00:58,696 --> 01:01:04,306 or more comma separator arguments will invocate whatever 833 01:01:04,306 --> 01:01:05,366 comes before it. 834 01:01:05,536 --> 01:01:07,586 And by invocate we mean execute. 835 01:01:07,586 --> 01:01:13,476 If a function is called with too many arguments the extra 836 01:01:13,476 --> 01:01:14,696 arguments are just thrown out. 837 01:01:15,456 --> 01:01:18,706 If a function is called with too few arguments the missing values 838 01:01:18,706 --> 01:01:21,596 will be centrally undefined because everything is set 839 01:01:21,596 --> 01:01:24,286 to undefined until it's a set of value in JavaScript. 840 01:01:25,216 --> 01:01:27,706 And there is no implicit type checking of the arguments 841 01:01:27,706 --> 01:01:28,496 like there is in Java. 842 01:01:29,366 --> 01:01:32,776 So there are few-- there are four ways to call a function. 843 01:01:33,126 --> 01:01:39,386 There's the function form where you have an actual function 844 01:01:39,386 --> 01:01:53,186 that you're evoking like-- let's say-- what's a good example. 845 01:01:53,326 --> 01:01:55,306 Well like any function that you define 846 01:01:55,306 --> 01:01:59,966 on your own in global scope. 847 01:02:00,876 --> 01:02:04,216 And there's the method form 848 01:02:04,216 --> 01:02:07,156 where you're actually calling it as-- 849 01:02:07,216 --> 01:02:09,936 it's called a method rather than a function 850 01:02:10,386 --> 01:02:14,916 because a method refers to an object that opens it 851 01:02:15,216 --> 01:02:17,586 or that it belongs to. 852 01:02:17,836 --> 01:02:24,006 A method is a function that has references to properties 853 01:02:24,006 --> 01:02:28,956 and variables that situate its context. 854 01:02:29,726 --> 01:02:33,836 So this is actually the most common names. 855 01:02:33,836 --> 01:02:36,776 So like math.sqrt is the method form. 856 01:02:37,136 --> 01:02:37,966 When this function-- 857 01:02:38,156 --> 01:02:39,376 when a function is called 858 01:02:39,376 --> 01:02:44,386 in the method form this is set to that big object. 859 01:02:44,466 --> 01:02:48,586 So inside the body of this function, of this keyword, 860 01:02:49,116 --> 01:02:53,096 it stands for the math object inside math.sqrt. 861 01:02:53,096 --> 01:02:57,756 And this allows methods to have a reference to the object 862 01:02:57,796 --> 01:03:00,196 of interest which is important 863 01:03:00,196 --> 01:03:02,816 because in the math object they might have lots of constants. 864 01:03:02,816 --> 01:03:06,496 They might have a constant called pi. 865 01:03:07,236 --> 01:03:09,996 In the function form the-- you-- 866 01:03:09,996 --> 01:03:15,386 like we thought anonymous functions then you have-- 867 01:03:15,476 --> 01:03:17,946 well, some anonymous functions. 868 01:03:18,536 --> 01:03:27,696 This keyword is actually set to the global object. 869 01:03:28,266 --> 01:03:30,376 And if you make-- a function is nested 870 01:03:30,376 --> 01:03:35,876 within a function then the inner function will actually have its 871 01:03:36,186 --> 01:03:41,056 own scope and its own this keyword. 872 01:03:41,056 --> 01:03:45,966 And so in order to get access 873 01:03:46,386 --> 01:03:51,546 to the outer functions variables you need to set-- 874 01:03:51,546 --> 01:03:56,226 in the outer function you need to set a variable 875 01:03:56,696 --> 01:04:03,546 that traps this variable and make it available. 876 01:04:04,356 --> 01:04:10,066 So let me explain what I mean. 877 01:04:10,466 --> 01:04:11,966 If you have-- 878 01:04:12,516 --> 01:04:18,446 [ Writing on Board ] 879 01:04:18,946 --> 01:04:22,566 Var outer = function. 880 01:04:23,516 --> 01:04:29,826 [ Writing on Board ] 881 01:04:30,326 --> 01:04:42,616 Var secret = 12345. 882 01:04:42,866 --> 01:04:42,966 Var-- 883 01:04:43,516 --> 01:04:54,306 [ Writing on Board ] 884 01:04:54,806 --> 01:04:57,726 So in-- actually this is. 885 01:04:58,586 --> 01:05:01,796 Let's say that the-- that this was-- 886 01:05:02,746 --> 01:05:04,456 let's say that we're talking 887 01:05:04,976 --> 01:05:09,256 about the onclick handler before. 888 01:05:09,256 --> 01:05:15,526 a.onclick equals function x. This element here contains a 889 01:05:15,526 --> 01:05:19,556 reference to that A document object in this scope. 890 01:05:19,656 --> 01:05:24,156 However, here this variable contains a reference 891 01:05:24,536 --> 01:05:25,606 to this function. 892 01:05:25,606 --> 01:05:32,256 So in order to get access to the A document object you need 893 01:05:32,256 --> 01:05:37,766 to say var that = this and then inside here you can say 894 01:05:37,766 --> 01:05:42,796 that.classNames, you know, you can perform operations 895 01:05:43,036 --> 01:05:47,996 on that anchor document object inside of this function 896 01:05:47,996 --> 01:05:53,586 by making sure that this local scope doesn't clobber this 897 01:05:54,186 --> 01:05:57,676 variable, this keyword that you need access to. 898 01:05:57,996 --> 01:06:04,336 So this chart is really the key to understanding it. 899 01:06:04,336 --> 01:06:06,806 If it's called like math.sqrt then inside 900 01:06:06,806 --> 01:06:09,476 that this object contains a reference to the math object. 901 01:06:09,886 --> 01:06:14,106 If it's called in a function format 902 01:06:14,106 --> 01:06:16,946 like where you just call the name 903 01:06:17,156 --> 01:06:20,716 of the function then this actually contains a reference 904 01:06:20,956 --> 01:06:25,586 to the global object or it's undefined depending 905 01:06:25,586 --> 01:06:28,706 on the version of the JavaScript. 906 01:06:28,706 --> 01:06:34,406 If you instantiate a function using the new keyword then you 907 01:06:34,776 --> 01:06:41,056 actually get inside this object the new object. 908 01:06:41,106 --> 01:06:44,346 And we won't talk about apply. 909 01:06:44,526 --> 01:06:48,396 But this can actually change a lot about the way 910 01:06:48,396 --> 01:06:49,826 that JavaScript is done. 911 01:06:49,826 --> 01:06:51,466 So let me just say a thing about closure 912 01:06:51,466 --> 01:06:53,796 and then we'll talk jQuery really fast. 913 01:06:53,796 --> 01:06:58,016 So the context of an inner function includes the scope 914 01:06:58,216 --> 01:06:59,286 of the outer function. 915 01:06:59,406 --> 01:07:03,046 In this function that's inner you are also inside the scope 916 01:07:03,046 --> 01:07:03,526 of the outer. 917 01:07:03,526 --> 01:07:05,986 So if we had a var foo here you'd be able 918 01:07:06,096 --> 01:07:08,746 to reference foo inside this function. 919 01:07:08,746 --> 01:07:12,456 The inner function enjoys that context even 920 01:07:12,456 --> 01:07:15,556 after the parent functions have returned. 921 01:07:15,556 --> 01:07:22,256 So that means that if this function is executed, 922 01:07:22,256 --> 01:07:25,066 let's say the onclick happens but do something as a function 923 01:07:25,066 --> 01:07:31,466 that occurs much later, much, much after the onclick event. 924 01:07:31,666 --> 01:07:39,786 Then variables that were in this outer scope are still available 925 01:07:39,786 --> 01:07:44,226 to this function even in that much later timeframe. 926 01:07:44,226 --> 01:07:47,826 And that's key because this function closes 927 01:07:47,826 --> 01:07:53,936 over this function and makes it possible so that even 928 01:07:54,326 --> 01:07:58,396 when a function is like kind of deposed, it's not deposed 929 01:07:58,396 --> 01:08:02,786 but when it goes away and will never be instantiated again. 930 01:08:02,866 --> 01:08:04,546 If there's a function that can be called 931 01:08:04,546 --> 01:08:07,666 within it then you are able to get access to any 932 01:08:08,126 --> 01:08:13,086 of the variables that were declared in the scope around it. 933 01:08:13,146 --> 01:08:14,896 This is the power of JavaScript. 934 01:08:14,896 --> 01:08:18,366 This is like one of the best things about it. 935 01:08:18,536 --> 01:08:20,966 It's a quality that it gets from Lisp. 936 01:08:20,966 --> 01:08:23,656 And if you go through the videos you can see the language 937 01:08:23,706 --> 01:08:26,396 hierarchy and how it derives from Lisp 938 01:08:26,396 --> 01:08:29,246 and other languages with closure. 939 01:08:29,526 --> 01:08:33,716 So here is a way to do a function that uses global scope. 940 01:08:33,716 --> 01:08:36,176 So this is a function that takes a number 941 01:08:36,176 --> 01:08:37,446 and returns the name of the number. 942 01:08:37,446 --> 01:08:41,346 You pass in nine and you get out the string nine. 943 01:08:41,346 --> 01:08:45,236 And names here is accessible inside this function 944 01:08:45,396 --> 01:08:47,416 because you have global scope. 945 01:08:47,416 --> 01:08:51,226 So alert digit name three will actually pronounce the 946 01:08:51,786 --> 01:08:52,166 word three. 947 01:08:52,166 --> 01:08:53,686 So that's global scope. 948 01:08:53,686 --> 01:08:56,746 Here's a way to do that inside a function that's really slow. 949 01:08:56,746 --> 01:09:01,046 You declare function with a large array in it 950 01:09:01,046 --> 01:09:06,226 and then you return the names value and it's slow 951 01:09:06,876 --> 01:09:14,726 because every single time you call the function it allocates 952 01:09:14,886 --> 01:10:01,506 memory for this array, again, which is a waste. 953 01:10:03,836 --> 01:10:06,616 In closure what happens is 954 01:10:06,616 --> 01:10:11,636 that here you see this parenthesis 955 01:10:11,636 --> 01:10:12,806 and this parenthesis. 956 01:10:12,806 --> 01:10:17,886 They're not required but these two parentheses that are 957 01:10:17,976 --> 01:10:21,926 after the function, they are invoking this function 958 01:10:21,926 --> 01:10:23,646 immediately after it's declared. 959 01:10:23,936 --> 01:10:26,716 And he's put these extra parentheses around here. 960 01:10:26,716 --> 01:10:27,986 We're going to call attention 961 01:10:27,986 --> 01:10:29,566 to something special that's going on. 962 01:10:29,566 --> 01:10:33,206 What's happening here is that he makes an anonymous function 963 01:10:33,206 --> 01:10:36,146 and then instantly instantiates it. 964 01:10:36,626 --> 01:10:40,666 And so the function is gone after it's instantiated. 965 01:10:40,666 --> 01:10:44,066 And the result of it being instantiated is 966 01:10:44,166 --> 01:10:48,026 that what's stored inside digit name is a function 967 01:10:48,416 --> 01:10:53,196 and that function itself has access to this variable 968 01:10:53,586 --> 01:10:58,706 that is stored in that scope, that's closed over it. 969 01:10:59,036 --> 01:11:03,296 So this gets declared once in memory and even though 970 01:11:04,056 --> 01:11:06,696 that function has closed 971 01:11:06,856 --> 01:11:12,746 after this variable digit name has been initialized, 972 01:11:13,326 --> 01:11:16,636 even though that function is closed those variables are 973 01:11:17,066 --> 01:11:23,096 accessible to this function that's then stored inside digit 974 01:11:23,096 --> 01:11:25,646 name because it's returned as a first class object. 975 01:11:26,466 --> 01:11:29,856 So this is the special thing about closure. 976 01:11:30,686 --> 01:11:35,036 And it enables you to do things like this. 977 01:11:35,116 --> 01:11:42,046 So here you have a variable dom which stands for an element 978 01:11:42,536 --> 01:11:48,066 that you called getElementById if you know that you have 979 01:11:48,716 --> 01:12:02,226 like div id = 327 then you can say document.getElementById 327 980 01:12:02,226 --> 01:12:06,746 and it will return a reference to this div element in dom, 981 01:12:07,036 --> 01:12:08,346 in the document object model. 982 01:12:08,526 --> 01:12:14,156 And then it also makes a variable level equal to one. 983 01:12:14,626 --> 01:12:18,416 And these are variables that will be available 984 01:12:19,126 --> 01:12:22,546 after this function has been executed. 985 01:12:23,256 --> 01:12:31,736 And inside of this function he makes a function called step 986 01:12:32,946 --> 01:12:38,286 that basically set this function, 987 01:12:38,286 --> 01:12:44,136 setTimeout is something that is available in JavaScript. 988 01:12:44,536 --> 01:12:49,026 You pass in a function and then a number of milliseconds for it 989 01:12:49,026 --> 01:12:51,576 to wait before executing it again. 990 01:12:52,206 --> 01:12:53,966 And it only executes it once. 991 01:12:54,776 --> 01:13:02,666 But here the step function says call me 100 milliseconds later 992 01:13:03,196 --> 01:13:09,046 and level, up here, it's set to 1 and level is incremented by 1. 993 01:13:09,446 --> 01:13:10,896 And it says if level is less 994 01:13:10,966 --> 01:13:15,966 than 15 then execute it100 milliseconds later. 995 01:13:16,636 --> 01:13:31,726 And so h here is set to the string of the level amount. 996 01:13:31,886 --> 01:13:38,426 So it's 1, 2, 3, 4, 5 and it's set in toString 997 01:13:38,426 --> 01:13:42,686 in base 16, I believe. 998 01:13:42,686 --> 01:13:48,236 Yeah, I think it must be in base 16. 999 01:13:48,836 --> 01:13:52,276 And then they're able to actually-- 1000 01:13:52,276 --> 01:13:59,896 FFFF is for r and g and then the h 1001 01:14:00,176 --> 01:14:07,996 and h will actually be the blue code. 1002 01:14:07,996 --> 01:14:14,016 And so they're setting the background color of the element 1003 01:14:14,646 --> 01:14:19,746 to be an ever lighter and lighter blue value. 1004 01:14:19,746 --> 01:14:23,556 It starts out pretty dark and then it gets lighter and lighter 1005 01:14:23,556 --> 01:14:25,076 until it becomes FFFF. 1006 01:14:26,096 --> 01:14:30,986 And because this level variable is available 1007 01:14:30,986 --> 01:14:32,576 to this step function even 1008 01:14:32,816 --> 01:14:38,156 after this function has closed then what happens is 1009 01:14:38,216 --> 01:14:42,906 that when you call fade id then it will fade really gradually 1010 01:14:42,906 --> 01:14:46,176 over, you know, 16 steps to white. 1011 01:14:46,176 --> 01:14:50,326 That's the kind of thing that closure let's you do. 1012 01:14:51,576 --> 01:15:01,966 So the jQuery is a library that operates on the principle 1013 01:15:01,966 --> 01:15:08,556 of that you can store an object inside a variable 1014 01:15:08,556 --> 01:15:14,026 with a name that's a single character. 1015 01:15:14,426 --> 01:15:21,006 And in jQuery that character is the $, so in jQuery 1016 01:15:21,406 --> 01:15:24,006 which is a library that you have 1017 01:15:24,056 --> 01:15:29,996 to load any time you put the $ you can then put a dot 1018 01:15:29,996 --> 01:15:33,116 and then call a function name 1019 01:15:33,346 --> 01:15:35,676 that is built in to that library. 1020 01:15:36,566 --> 01:15:40,826 So let's take a look at the jQuery version 1021 01:15:40,826 --> 01:15:45,086 of the same PHP directory. 1022 01:15:46,146 --> 01:15:53,336 And you can see we have a nice sliding effect. 1023 01:15:53,336 --> 01:15:55,976 And it has the same kind of thing 1024 01:15:55,976 --> 01:15:58,216 but now it slides up and slides down. 1025 01:15:58,556 --> 01:16:02,386 And the sliding facility is probably done with closure just 1026 01:16:02,386 --> 01:16:04,576 in the fade manner that we were talking 1027 01:16:04,576 --> 01:16:05,916 about using set time out. 1028 01:16:06,616 --> 01:16:09,886 So let's take a look at the code. 1029 01:16:10,516 --> 01:16:14,016 [ Typing ] 1030 01:16:14,516 --> 01:16:25,006 First of all, I'll look at the view. 1031 01:16:25,756 --> 01:16:25,846 Oops. 1032 01:16:26,516 --> 01:16:39,706 [ Typing ] 1033 01:16:40,206 --> 01:16:46,116 So I highly recommend that you are able to go 1034 01:16:46,116 --> 01:16:51,436 to the jQuery site and download a file called jquery.js 1035 01:16:51,436 --> 01:16:56,906 and then include it in your JavaScript directory 1036 01:16:56,906 --> 01:16:59,336 and include it just the same way you'd include your 1037 01:16:59,366 --> 01:17:01,236 own JavaScript. 1038 01:17:01,236 --> 01:17:02,076 You can do that. 1039 01:17:02,466 --> 01:17:05,686 However, there are several advantages to doing it this way. 1040 01:17:06,056 --> 01:17:09,176 Google offers as a service-- 1041 01:17:10,516 --> 01:17:15,416 [ Typing ] 1042 01:17:15,916 --> 01:17:21,666 -- these libraries, there are several of them. 1043 01:17:21,666 --> 01:17:22,906 It's not just jQuery. 1044 01:17:23,426 --> 01:17:27,346 There's Dojo, MooTools, Prototype. 1045 01:17:28,246 --> 01:17:35,886 And if you look down at jQuery they give you this nice path. 1046 01:17:36,736 --> 01:17:40,816 And if you do the .min.js1, that's the minimized version 1047 01:17:40,816 --> 01:17:42,956 so it will be a very small amount of code. 1048 01:17:42,956 --> 01:17:45,276 And the advantage to having Google do this is 1049 01:17:45,316 --> 01:17:47,436 that there are a number 1050 01:17:47,436 --> 01:17:50,226 of servers distributed throughout the country 1051 01:17:50,226 --> 01:17:52,356 that Google maintains. 1052 01:17:52,856 --> 01:17:57,526 And because JavaScript files are public files you-- 1053 01:17:57,826 --> 01:18:02,966 and if you hit it once then you hit it again 1054 01:18:03,386 --> 01:18:06,676 within the caching period of your browser. 1055 01:18:06,976 --> 01:18:09,796 It actually will download it from the closer server 1056 01:18:09,796 --> 01:18:13,016 than from the farther server and also, it will download it 1057 01:18:13,286 --> 01:18:16,456 onto your own machine if it's from the same domain. 1058 01:18:16,886 --> 01:18:19,676 So the idea is that Google is so common and people Google it-- 1059 01:18:19,676 --> 01:18:25,296 Google things all the time that if everyone uses the same source 1060 01:18:25,296 --> 01:18:28,296 for jQuery it will result in faster response time 1061 01:18:28,296 --> 01:18:32,906 for everyone and they're very kind to do these things. 1062 01:18:32,906 --> 01:18:35,876 It's kind but also they get something out of it too 1063 01:18:35,876 --> 01:18:37,406 because they're able to get demographics 1064 01:18:37,406 --> 01:18:39,766 about who's using each of the libraries 1065 01:18:39,766 --> 01:18:41,896 and make decisions based off of that. 1066 01:18:42,676 --> 01:18:44,676 So this is all it takes to include jQuery. 1067 01:18:44,676 --> 01:18:46,896 Now let's take a look at the actual script itself. 1068 01:18:50,756 --> 01:18:53,306 You can see it's a lot smaller. 1069 01:18:53,756 --> 01:18:56,616 This is the entire code required to do the same thing. 1070 01:18:57,686 --> 01:19:01,626 Here you'll see the $ object. 1071 01:19:03,226 --> 01:19:08,576 Every, you know, every object is a function sort of passing 1072 01:19:08,576 --> 01:19:13,756 into the dollar-- the $ variable contains a function 1073 01:19:13,756 --> 01:19:16,886 that can be invoked with the parameter. 1074 01:19:17,316 --> 01:19:21,306 And if we pass in the document the variable containing the 1075 01:19:21,306 --> 01:19:23,856 document object then we'll-- 1076 01:19:24,646 --> 01:19:31,676 it will return a value that's accessible via a dot operator 1077 01:19:31,676 --> 01:19:32,826 here that we'll be able 1078 01:19:32,826 --> 01:19:36,456 to actually call a ready function on. 1079 01:19:36,456 --> 01:19:43,156 So what this first line does is this gets called only 1080 01:19:43,156 --> 01:19:47,306 when the entire document is ready forff JavaScript 1081 01:19:47,306 --> 01:19:48,006 to operate on it. 1082 01:19:48,006 --> 01:19:50,856 Basically, when the entire document object 1083 01:19:50,856 --> 01:19:54,026 of the page has finish flowing 1084 01:19:54,026 --> 01:19:58,816 out then it calls this anonymous function inside here. 1085 01:19:59,526 --> 01:20:03,386 And one of the notable things about jQuery is 1086 01:20:03,386 --> 01:20:05,786 that you can use what's called CSS selectors. 1087 01:20:06,276 --> 01:20:12,246 So if you go inside here you'll see PFT directory 1088 01:20:12,566 --> 01:20:15,156 and pft file tree or class. 1089 01:20:15,806 --> 01:20:19,666 On CSS you select a class with dot and then the name. 1090 01:20:20,036 --> 01:20:25,186 So selecting .pHpFileTree selects every object 1091 01:20:25,186 --> 01:20:27,356 with the class equal to pHpFileTree. 1092 01:20:27,946 --> 01:20:35,146 And then it returns that jQuery object with that array 1093 01:20:35,146 --> 01:20:37,556 of document objects inside of it 1094 01:20:37,986 --> 01:20:41,886 and because it's a jQuery object that's returned you can continue 1095 01:20:41,886 --> 01:20:44,516 to call jQuery methods on it such as find 1096 01:20:45,206 --> 01:20:48,646 within that array UL items. 1097 01:20:49,326 --> 01:20:51,626 And UL items are like this. 1098 01:20:51,696 --> 01:20:55,166 And, you know, if you had a nest-- 1099 01:20:55,166 --> 01:20:57,996 deep nested structure you'd have more UL items. 1100 01:20:58,696 --> 01:21:00,026 And you'd hide them. 1101 01:21:00,086 --> 01:21:06,296 So if I restart this that's this very first thing, it hides all 1102 01:21:06,296 --> 01:21:10,086 of the subdirectories that are represented by UL elements. 1103 01:21:10,626 --> 01:21:14,976 And then it finds all of the A elements that are children 1104 01:21:15,356 --> 01:21:18,436 of elements that have a class of PFT directory. 1105 01:21:19,036 --> 01:21:24,226 And it registers an event that happens when you click it equal 1106 01:21:24,226 --> 01:21:25,716 to this anonymous function. 1107 01:21:26,506 --> 01:21:28,746 And this is great. 1108 01:21:28,926 --> 01:21:36,236 You can find the parent of the object that is clicked on. 1109 01:21:36,236 --> 01:21:43,336 This contains a reference to the object in question. 1110 01:21:43,336 --> 01:21:45,286 In this case the document object 1111 01:21:45,286 --> 01:21:46,916 that represents the thing clicked on. 1112 01:21:47,406 --> 01:21:48,876 So when I click on this, 1113 01:21:49,616 --> 01:21:52,566 this variable actually contains the document object model 1114 01:21:52,566 --> 01:21:55,226 for that element right there. 1115 01:21:55,666 --> 01:22:01,806 And within it, it finds the CSS selector UL colon first is the 1116 01:22:01,986 --> 01:22:03,856 very first unordered list. 1117 01:22:04,496 --> 01:22:07,306 And jQuery is this nice method, slide toggle 1118 01:22:07,306 --> 01:22:09,236 with adjustable speed 1119 01:22:10,476 --> 01:22:15,336 that basically unfurls the children elements. 1120 01:22:16,116 --> 01:22:27,596 And so jQuery has a great documentation. 1121 01:22:27,596 --> 01:22:32,346 You can see that one of the parameters you can pass 1122 01:22:32,346 --> 01:22:36,036 in is the duration and another one is callback. 1123 01:22:36,136 --> 01:22:39,586 You could pass in a function that it would execute 1124 01:22:40,426 --> 01:22:43,146 when the slide is done. 1125 01:22:43,146 --> 01:22:47,146 And the slide they're talking about is that slide right there. 1126 01:22:47,326 --> 01:22:51,836 And you can even see how it uses overflow equals hit in 1127 01:22:51,836 --> 01:22:55,336 and then the height equal to these floating numbers 1128 01:22:55,936 --> 01:23:00,696 and it adjusts it, you know, using a millisecond delay 1129 01:23:01,086 --> 01:23:03,566 in order to make it look like it's unfurling. 1130 01:23:03,566 --> 01:23:05,546 And then like it's sliding open. 1131 01:23:06,096 --> 01:23:12,296 And basically if the attribute 1132 01:23:12,336 --> 01:23:19,136 of the parent is PFT directory then you return false. 1133 01:23:19,136 --> 01:23:22,116 I mean that's the entire functionality. 1134 01:23:22,666 --> 01:23:26,506 All of the clicking functionality is put 1135 01:23:26,506 --> 01:23:28,716 in there by the PHP actually. 1136 01:23:29,086 --> 01:23:31,356 So that's not provided by the jQuery. 1137 01:23:33,376 --> 01:23:34,976 jQuery is very, you know, 1138 01:23:34,976 --> 01:23:38,476 very easy to get advanced functionality. 1139 01:23:38,476 --> 01:23:42,506 And the functioning you're probably using most often 1140 01:23:42,506 --> 01:23:48,256 in coming assignments is JSON or AJAX. 1141 01:23:48,256 --> 01:23:54,936 JSON is actually an alias to the AJAX method in jQuery. 1142 01:23:55,686 --> 01:23:58,446 JavaScript objects notation is-- 1143 01:23:58,446 --> 01:24:02,746 oh, we just barely didn't get to that slide. 1144 01:24:03,196 --> 01:24:06,356 Let's get to it. 1145 01:24:06,356 --> 01:24:12,206 So this is the syntax of JavaScript object notation. 1146 01:24:12,806 --> 01:24:23,346 You can have brackets and within brackets you can have a value 1147 01:24:23,346 --> 01:24:25,116 separated optionally by a comma. 1148 01:24:25,406 --> 01:24:28,906 And a value can be a string, number, object, 1149 01:24:28,906 --> 01:24:30,756 array, true, false, or null. 1150 01:24:31,496 --> 01:24:38,476 And so, you can encapsulate an entire JavaScript object 1151 01:24:38,946 --> 01:24:40,056 with this syntax. 1152 01:24:40,056 --> 01:24:46,846 And in fact the function parameters here, you know, 1153 01:24:47,416 --> 01:24:55,326 they follow this JavaScript object notation itself. 1154 01:24:56,026 --> 01:25:01,276 And so, JavaScript object notation is 1155 01:25:01,276 --> 01:25:03,306 in data interchange format 1156 01:25:03,566 --> 01:25:12,346 and there is a great JSON encode function in PHP 1157 01:25:13,176 --> 01:25:20,676 that takes an array or an object like here's an associative array 1158 01:25:20,676 --> 01:25:23,276 where the letter A goes to one, the letter B goes 1159 01:25:23,316 --> 01:25:25,046 to two, so on and so forth. 1160 01:25:25,626 --> 01:25:29,936 And it says JSON encode array and that returns an object 1161 01:25:30,686 --> 01:25:33,716 with these curly brackets here. 1162 01:25:34,116 --> 01:25:37,656 And you see the string A has a colon 1163 01:25:37,656 --> 01:25:39,926 and then value one and then a comma. 1164 01:25:40,646 --> 01:25:46,816 And so this is an object with the parameter A equal to 1 1165 01:25:46,876 --> 01:25:50,406 or parameter B equal to 2. 1166 01:25:50,516 --> 01:25:55,746 Because this function exists and is supported in PHP we're able 1167 01:25:55,746 --> 01:25:58,366 to construct an entire data structure 1168 01:25:58,716 --> 01:26:03,056 and then call JSON encode and then actually embedded 1169 01:26:03,056 --> 01:26:05,916 in our JavaScript, and embedded 1170 01:26:05,986 --> 01:26:10,496 in our JavaScript programatically before it is 1171 01:26:10,496 --> 01:26:16,006 actually received by the recipient. 1172 01:26:16,126 --> 01:26:21,036 And in order to see an example of that-- 1173 01:26:21,036 --> 01:26:26,406 We'll get into this more next week with AJAX, 1174 01:26:27,616 --> 01:26:35,176 but for this week I've included some examples from last year. 1175 01:26:35,176 --> 01:26:40,146 Open cycle map, this is just a simple example 1176 01:26:40,146 --> 01:26:46,476 where this is a tile from a map 1177 01:26:46,646 --> 01:26:52,926 that has a certain name representing its latitude 1178 01:26:52,926 --> 01:26:56,096 and a certain or a certain number representing its latitude 1179 01:26:56,096 --> 01:27:00,536 and a certain number representing its longitude. 1180 01:27:00,736 --> 01:27:05,546 And when you call or when you hit these buttons then 1181 01:27:06,516 --> 01:27:09,886 if you're listening on the network you can see 1182 01:27:09,886 --> 01:27:18,816 that when you go west it calls the URL with these functions. 1183 01:27:18,816 --> 01:27:29,336 You can see zoom equals 15 and x equals 9910 and y equals 1211. 1184 01:27:29,716 --> 01:27:35,916 And the result is it returns the directory of-- 1185 01:27:36,346 --> 01:27:39,166 or it returns the file name of this image. 1186 01:27:39,636 --> 01:27:47,606 And the-- you can assemble a very large amount of data 1187 01:27:47,606 --> 01:27:52,866 and then actually echo it inside the header of your document 1188 01:27:53,246 --> 01:27:58,716 and evaluate it in JavaScript in order to pass that data directly 1189 01:27:58,716 --> 01:28:01,336 into JavaScript and be able to access it 1190 01:28:01,486 --> 01:28:04,266 with the dot syntax you're used to for the objects. 1191 01:28:05,426 --> 01:28:07,346 So that will be more for next week 1192 01:28:07,346 --> 01:28:09,836 because it has more to do with AJAX. 1193 01:28:10,446 --> 01:28:13,926 But feel free to play around with these examples. 1194 01:28:14,266 --> 01:28:18,406 You can see how it goes north and south and east and west. 1195 01:28:18,726 --> 01:28:22,706 And each time this downloads it will be impolite 1196 01:28:22,706 --> 01:28:26,786 to hit the tile server that serves these up more than once. 1197 01:28:27,476 --> 01:28:31,076 So actually what it does is it downloads the appropriate tile, 1198 01:28:31,246 --> 01:28:36,756 caches it in a folder on the server and then subsequent hits 1199 01:28:37,356 --> 01:28:40,296 to that image are restored from the cache. 1200 01:28:40,356 --> 01:28:44,606 So you'll notice if I go north and south and then north 1201 01:28:44,706 --> 01:28:47,966 and then north takes a little bit longer. 1202 01:28:48,926 --> 01:28:52,336 And now if I go south and north it's nice and fast again that's 1203 01:28:52,336 --> 01:28:54,896 because now it's cached on the server. 1204 01:28:55,316 --> 01:28:58,666 And this is a style that you'll be using 1205 01:28:58,666 --> 01:29:01,776 in the upcoming assignment because you'll have 1206 01:29:01,776 --> 01:29:03,886 to be getting certain information about companies 1207 01:29:03,886 --> 01:29:09,296 from CS75 finance, caching it on your server and not hitting 1208 01:29:09,296 --> 01:29:11,616 that external API more than you need to. 1209 01:29:12,216 --> 01:29:14,096 So I thank you for your attention. 1210 01:29:14,096 --> 01:29:15,466 This has been a lot of stuff. 1211 01:29:15,466 --> 01:29:18,576 I highly encourage you to use JSLint and to watch some 1212 01:29:18,576 --> 01:29:20,946 of the Crockford videos. 1213 01:29:21,056 --> 01:29:25,336 If you were to just to watch two videos or if you were 1214 01:29:25,336 --> 01:29:29,396 to just watch one video, watch Function the Ultimate and skip 1215 01:29:29,396 --> 01:29:30,976 through all the parts where it seems 1216 01:29:30,976 --> 01:29:33,586 like you're not understanding anyway. 1217 01:29:33,586 --> 01:29:39,426 And if you were to watch two videos watch these two. 1218 01:29:39,426 --> 01:29:44,336 And they're basically kind of an overview of the syntax, 1219 01:29:44,416 --> 01:29:45,776 the good parts, the bad parts, 1220 01:29:45,986 --> 01:29:48,616 and what you can do with closure. 1221 01:29:49,036 --> 01:29:52,416 So I thank you for your attention and let us know 1222 01:29:52,416 --> 01:29:55,446 at the CS50 Discuss if you have any questions. 1223 01:29:55,926 --> 01:29:58,346 And if you have any questions about my code in particular, 1224 01:29:58,596 --> 01:30:01,576 feel free to email me personally. 1225 01:30:02,516 --> 01:30:10,010 [ Silence ]