Adding Script to HTML Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

17:22:15 Hi! Everybody! Welcome back in this video. We're going to continue our foray into d 3 dB, dot, js, by learning how to add scripts to our HTML files.
17:22:27 So Javascript, which is what d. 3 dot J is can be written within a script element or tag.
17:22:35 So scripts will can be placed in either the body or the head.
17:22:41 So if you place the script inside the body, tag this script will run when the content of the web page is loaded, so head runs first, then body, and when the body runs the script will be executed.
17:22:53 So this Javascript, if you're gonna put script within the body, tag this Javascript should impact the content of the web page as an I believe we have an existence of the web page as an I believe we have an example here first body script so we'll open it with
17:23:09 visual studio to see what's going on, and so here you can see that we have a script element within the body of our HTML.
17:23:17 Page. Okay? And then we have set the type. So this is another thing.
17:23:22 That's, you know, common that you need to do. You set your type attribute of the scripts to text, slash Javascript, and then here you can see I'm running this Javascript called Console Dot log and then there's the string
17:23:38 Hello there! So console dot log and then there's this string. Hello there! So console dot log will print something in the browser's console with the developer tools so, or which we can see with the developer tools.
17:23:49 So if we click on this you'll see that the pages is completely empty.
17:23:51 But if we go to our tools, browser tools, web developer tools, and then click on this console you'll see there that now I have this little hello there printed.
17:24:02 Can I make this any bigger? There we go. So now I have this. Hello!
17:24:05 There printed, and that Hello! There is printed there because in the code I have console dot log I could continue and let's say, console dot log to put in like, how are you doing?
17:24:17 And now that I save this, if I refresh, I'll now have an additional thing.
17:24:27 So let's go back to our slides when we have a script, tag, or element within the head.
17:24:33 Element, it ensures that you're script is loaded before the body of the web page.
17:24:39 So going to this example, external Js library.
17:24:45 Here's an example where I placed the script within the head.
17:24:50 And so this is going to allow us to load the D.
17:24:54 3, js. Script. So I think maybe let's skip ahead to this one.
17:25:00 So I can talk about this code. So Javascript, like Python, has packages.
17:25:06 Javascript has libraries and we've mentioned before that d 3 dot Js is a type of Javascript library.
17:25:13 So a number of these libraries are built into Javascript, and we'll see an example of that next.
17:25:18 But a number of them are built by open source developers.
17:25:23 So they've written these libraries and provided them to us to use for free.
17:25:28 So some of these libraries are not built into Javascript, so when they're not built into Javascript, they have to be loaded through a script element.
17:25:38 So one way you could load. This is by giving your script element an Src.
17:25:44 Which stands for source, attribute this source, attribute should point to the location of the library, either within your computer or online.
17:25:55 So, if this was within your computer, you would have the file names and directory paths going to that code.
17:26:02 But if it's stored online, you just have to provide a web address.
17:26:05 So in our example, here we have our source to set to the web address for D.
17:26:11 3, version, 7. Okay. So at the beginning of each one of our d, 3, dot, J. S.
17:26:18 Code, examples, we're gonna have this script in the head elements.
17:26:24 All this does is load the d. 3 Js library, so we can use it.
17:26:30 And now you'll see we have another script, and our body, which is going to show an example where I can use now that I'm loading this, I can use D.
17:26:40 3 Js code. So this d. Threejs code finds the maximum of these elements.
17:26:46 1, 12, and negative one. Okay, so let's go ahead and open this.
17:26:56 And we can see here printed the maximum of 110 to a negative one is 10, and we can also see what would happen if I get rid of the script.
17:27:08 Now you'll see you get an error, because what's like d.
17:27:13 3 is not defined because we have edited, commented out the script that loads the library.
17:27:19 So once we go back and allow the library to be loaded again.
17:27:23 The code runs just fine. So I said we would also go back and learn about internal built in Javascript libraries.
17:27:32 So a library just like a package. Right? Is a collection of code.
17:27:36 Some of these have been built into Javascript, as is so when you have a Javascript library that's been built in, you can access the Lm.
17:27:48 The objects or functions of that library, by putting the library's name function, or the libraries name, dot objects, and so, in the example of in the internal Js.
17:27:59 Library example. I show you how to use the math library so let's open that up in visual studio, or whatever code editor you're using. So here.
17:28:10 Are some examples where I can get an estimate of pi using math dot pi, I can get an estimate of the sign of pi using math dot sign, and then I can get the absolute value of a number with math dot a B S.
17:28:26 So here are some examples where math is a library that's internal to Javascript.
17:28:31 It's built into Javacript, and I can access objects and functions by doing the library name dot.
17:28:38 Whatever the object or function name is. So let's go ahead and check out that code.
17:28:44 Okay, so here's our estimate of Pi. Here's our estimate of the sign of pi.
17:28:51 And here's the absolute value of negative 99.
17:28:58 So now you have an idea of some how to add a Javascript code to our HTML files.
17:29:06 We a script element. And we've also discussed libraries within Javascript, both internal ones, that we can just actively as is or external ones, that we have to load with a script element in either the head or the body, would be fine but it's standard to
17:29:23 load libraries within the head. Alright! So that's it.
17:29:28 For this video. I hope you enjoyed learning about adding scripts to your HTML code because we're going to be doing a lot of it in our D 3 dot.