Your Web Browser and JavaScript

00:00 In the previous lesson, I showed you where JavaScript came from. In this lesson, I will give you a quick tour of using JavaScript directly in your web browser.

00:10 Here, I’ve opened Firefox to an empty page. Once inside, I’m going to choose Web Developer Tools from the Tools > Browser Tools sub-menu.

00:25 All the major browsers support tools like these. Most have similar capabilities. The names, shortcut keys, and locations in the menus are going to be different but if you Google “debugger” and your browser name, you should be good. In Firefox, the developer tools open in a split pane with a whole bunch of tabs.

00:43 The one I’m going to start with is the console tab. This area acts like a REPL for JavaScript in the browser. I can declare a variable, see the value of a variable, do math on the variable.

01:03 And what would a quick intro to a programming language be without Hello World? The console object has a .log() method that is JavaScript’s equivalent of print() in Python.

01:22 Note what happens here. The string "Hello World!!!" is printed, and because the .log() method doesn’t return anything, you also see the undefined result.

01:35 Like Python, JavaScript supports both single and double quotes for the definition of strings. This is particularly important when you’re writing JavaScript to spit out HTML, as HTML has all sorts of quotes in it. Also like Python, JavaScript supports concatenation of strings through the plus operation (+).

02:02 Hello World!!!, Hello Pasquale. JavaScript supports arrays. They have some subtle differences from Python’s arrays, but I’ll go into that in a future lesson.

02:22 Now for something a bit more complicated. Here, I will use a for loop to print out each of the members of the array.

02:45 Let me just scroll back up so you can see the for loop. If you speak more than just Python, this will be familiar. If you haven’t played with C-like languages before, this might be new.

02:59 First off, notice the curly brackets. Python is rather unusual in that it uses indentation to indicate a code block. Python isn’t alone in this, but it is definitely in the minority.

03:10 JavaScript indicates blocks of code by surrounding them in curly brackets. The advantage of this is you can format your code however you like. The disadvantage of this is giving developers the freedom to format the code any way they like. This tends to result in religious wars, petty squabbles, and hurt feelings.

03:26 Try to format your code in a matter consistent with the codebase you’re working in and you’ll have more friends. Inside of the curly brackets is the code block with the print-like statement that is being looped over.

03:38 It uses the variable i to indicate the index of the loop. Each time in the loop, you’ll get each item of the fibonacci array printed out. The definition of the index variable i happens in the declaration of the for loop.

03:54 The two semicolons in the for loop declaration define three things: an initialization area, a test for loop completion area, and an increment area.

04:05 The first area here declares i and sets it to 0. This gets run once before the first iteration of the loop. It’s a setup area.

04:15 The second area is the boundary check. Here, I’m checking to see if i is still less than the length of the fibonacci array. If so, the loop body will be executed. After the execution of the loop body, the third area gets run. In this case, I’m incrementing the variable i, and everything starts over again.

04:36 JavaScript has several different ways of looping. This format was there from the beginning, so you’ll see it in a lot of places, particularly older code.

04:45 It isn’t much fun to play in the browser without doing browser stuff, so I’m going to visit Real Python. Notice that the console has been cleared. The other tabs show you information about the page being displayed, such as the HTML, what files were downloaded from the network, how fast things were loaded, and more. Inside the console, you’re still in a REPL-like environment, but now there’s a whole bunch of context available.

05:14 There’s an object named window that has information about the browser page. This object has a long list of methods and values that allow you to interact with the page.

05:27 The little triangle beside the object allows me to open it and look at the details inside.

05:39 Let me start with window.location. This attribute contains the URL of the page that you are on right now.

05:58 These values show you the width and height of the window in pixels. In addition to the window object, there’s also a document object.

06:07 The document object represents the HTML inside of the current page. You can use the methods on this object to get information and manipulate the web page.

06:31 Here is the result from the query of the "title" tag. It’s an object that has array-like properties. It tells you that it has a .length of 1 And the first instance is a <title> tag.

06:42 There’s only one <title> tag on this page, and that’s why you’re getting back only one result. I can access the tag and inspect attributes of it by using an array index.

07:01 The .text attribute is the contents of this <title> tag. Let’s do that again, but this time with an "h1".

07:17 Like the <title> tag, there’s only a single <h1> tag. I can access this tag and modify the content using JavaScript.

07:39 And this is how JavaScript affects the page. There are also a series of built-in functions, independent of the document and the window.

07:55 This is the alert box. The look and feel of the alert box is browser-specific. This is why you don’t see it often anymore. Most web pages create their own modal dialog boxes to be consistent with the look and feel of the site.

08:10 The console window is great for debugging, but you’re going to want to embed your code within your web page. There are several different ways of doing that.

08:18 You can directly call JavaScript inside of an onclick parameter, such as those attached to buttons. You can insert JavaScript into the page between <script> tags.

08:28 These will be run as soon as the browser sees them. Or, and generally considered the best practice, you can keep your code in a separate file and use the <script> tag to load it from the server.

08:41 Here’s a sample HTML file with all of these methods. The first tag loads from a fully qualified source, server.com/library.js. The second tag loads from a relative source—that means the same server that the HTML file came from.

08:57 It also includes the defer keyword. This tells the browser not to run this code until the page has been loaded. The third and the fourth tags are inline code.

09:09 They can appear in the header or body section. The browser doesn’t care where you declare it, but do note that things get run in order. If your code tries to manipulate part of the document before it has loaded, you will get errors.

09:24 That’s enough from browser-land. From here on in, I’ll switch to Node.js and the command line. Next, I’ll show you the differences between types in Python and JavaScript.