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.
And what would a quick intro to a programming language be without Hello World? The
console object has a
print() in Python.
Note what happens here. The string
"Hello World!!!" is printed, and because the
.log() method doesn’t return anything, you also see the
Now for something a bit more complicated. Here, I will use a
for loop to print out each of the members of the array.
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: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.
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
The two semicolons in the
for loop declaration define three things: an initialization area, a test for loop completion area, and an increment area.
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.
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: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.
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.
Let me start with
window.location. This attribute contains the URL of the page that you are on right now.
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 represents the HTML inside of the current page. You can use the methods on this object to get information and manipulate the web page.
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
1 And the first instance is a
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.
.text attribute is the contents of this
<title> tag. Let’s do that again, but this time with an
<title> tag, there’s only a single
document and the
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.
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.
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.
Become a Member to join the conversation.