There are many standard structures in place that define how the internet works and how websites get loaded into our browsers. Throughout the program, we'll incrementally learn about these subjects, and this lesson is one of our first opportunities.
The goal of this lesson is to build context around how web browsers are structured so that we are prepared to build interactive websites with JavaScript and built-in web browser structures and tools. As such, this lesson is really meant to be a conceptual introduction to tools we will apply in future lessons. If any new concept in this lesson doesn't make sense to you, know that we will be revisiting all of them.
It's helpful to start out by reminding ourselves of something we probably take for granted: web browsers handle the entire process of displaying websites to us. What's in this process? There are a lot of steps:
This process of populating a webpage in our browser is fascinating and quite complex! The above steps are generalized and can each be broken down into more steps that each draw on various web technologies.
The process of populating a web page is also a standardized process, which makes it so that everyone — different browser companies, web developers, and people — can access the internet and its websites by following the same standard process, no matter which browser or internet provider you are using.
We don't need to worry about understanding this process in detail, but what we do need to recognize is that web browsers manage all web interactivity. So, if we want to build a website that is interactive, we need to learn how to access and use web browser structures and tools.
The web browser tools and structures that are made available to developers are just a collection of many different objects that are built-in to the browser. These tools are collectively called Web Application Programming Interfaces, or Web APIs, which we'll learn more about in an upcoming lesson.
Notably, Web APIs are not a part of the JavaScript programming language. Instead, they sit on top of JavaScript; this means that they look like JavaScript and we can use JavaScript to access and use these tools. However, Web APIs are not a part of the core JavaScript programming language.
Differentiating between Web APIs and JavaScript can be confusing at first, but we have a series of lessons in this and future course sections that work on differentiating the two by exploring where all of these tools are located within Mozilla Developer Network (MDN) documentation. So remember that this is a conceptual introduction to web browser tools. If you find anything confusing or unclear in this lesson, know that we'll be revisiting all of this information in upcoming lessons.
Up next in this lesson, we'll learn about 3 important browser structures that enable developers to interact with the browser window, our HTML document, and events (like a mouse click). In a future course section, we'll discuss the browser structure that enables us to interact with our CSS — so don't worry about that now!
window ObjectA browser window or tab is represented by the window object. Every browser automatically creates a new window object every time we open a new window or tab. In other words, the window object represents our current browsing context and lets us access it with JavaScript. So, if we navigate to a new tab, there will be a separate window object for that tab.
Note that window is a global variable that's built-in to our browsers and always available. For example, you could open up your DevTools console now and input window and see the details of the current browsing context.
Just like with JavaScript objects, the window object has properties that describe what a browser window is and does. For example, we can access window properties to find this information:
And we can call on window methods to interact with our browser window:
This is a very short list of examples. The window object offers a lot of functionality, and we'll learn more soon. For now, understand that the window object is a representation of a browser window or tab, and all of the information related to our current browsing context.
When the browser displays our website's HTML, it takes the HTML source code and turns into a HTML Document Object Model (DOM). In fact when we see our HTML in the browser, what we're actually looking at is the HTML Document Object Model, and not our source code.
At its most basic, we can understand the DOM as a series of related objects. All of these objects in the DOM are organized hierarchically so they accurately represent the structure, content, and markup of our HTML source code. In other words, anything that's in our HTML source code — an element, an attribute of an element, text — is turned into an object in the DOM.
The browser creates a Document Object Model representation of our HTML so that our HTML can be manipulated with a scripting language like JavaScript. For example, we can use JavaScript to access the DOM to add or remove HTML elements. Manipulating the DOM doesn't change the HTML source code — it only changes the DOM that's displayed in the browser window. Without the DOM, JavaScript would have no way of knowing about or interacting with our websites!
Similar to the browser's window object, the DOM has an object called document that represents, well, the DOM! If we want to change anything in the DOM, we'd do so by accessing the document object. Note that document is also a global variable that's built-in to our browsers and always available.
Just like with JavaScript objects, the document object has properties that describe what a document is and does. Since we know that the document object represents the HTML DOM, we'll be able to access document properties to do all sort of things related to the DOM:
<p> tags. This is just a short list of examples! We can manipulate our website's HTML in many ways, thanks to the DOM.
In computer programming an event is any action or occurrence that software can recognize. An event can be triggered by a human, like a mouse click, or by something that our program creates, like an error. When we write our programs to be interactive, we write our programs to react to events!
So far we've created static webpages with HTML and CSS. The most interactive feature we've used are HTML anchor tags to create hyperlinks that take us to other webpages. It's interactive, because we can click it and the webpage reacts by navigating to another webpage. However that's pretty limited — our webpages haven't included buttons that we can click, forms that we can submit, or other interactive features. Because of this, our webpages are considered static.
When we write code that reacts to events, our webpages go from static to interactive. Consider an online website that hosts a game like Tic Tac Toe. We play the game with mouse clicks: every time a player is ready to place their X or O on the game board, they must click on a square on the webpage. To make this Tic Tac Toe game functional, we need to have code that is able to recognize the click event and do something in response.
We call this process event handling. The click is the event and how we handle the click event corresponds to how our code is set up to react to the event. In this course, we'll learn how to use JavaScript and web browser tools to handle events. Using Tic Tac Toe as an example, we can write code that listens for a click event on the game board that will trigger a JavaScript function to update the board with an X or an O.
In web development, events arise from user interaction with specific browser structures — like scrolling in a browser window or clicking on an HTML element. Each event has a name, like 'click' or 'scroll', and belongs to a specific type of object, like document (our website's HTML) or window (our browser window or tab). This enables developers to easily write code that targets specific events.
We'll learn more about event handling soon, for now just keep in mind that events are occurrences that our websites can recognize and we can write JavaScript to react to.
We covered a lot of new concepts in this lesson! By now, we should have a basic conceptual understanding about how the web browser handles creating both the window and document objects when we navigate to a webpage. Developers write the source code (the HTML, CSS, and JavaScript), and the browser handles parsing it (including creating the window and document objects) and displaying it to users.
If anything we've covered is unclear, know that this lesson is only meant to be a conceptual introduction to these concepts and tools. We will be reviewing and applying all of these concepts in upcoming lessons, so you will come to understand them all soon.
These are the main points that we covered in this lesson:
window object.document object. window and document objects have properties that describe what they are and can do. window and document variables are global, which means they are always available.window object and document object. In other words, there are browser window events, and there are HTML document events.Web browsers provide the tools that web developers can learn to use to make their own websites interactive. These browser tools are separate from the JavaScript language, but we do use JavaScript to interact with them.
The window object represents our current browsing context: either the window or tab we are opened to, including the website we are on. We can learn to access and use window properties to manipulate and interact with our browser windows.
The Document Object Model (DOM) is an interactive representation of our HTML document (the HTML source code). The DOM is a hierarchical tree (data structure) that is made up of nodes. Nodes can be of any value, and at its most basic, a node is just a location of data on the tree. In the HTML DOM, the values of every node is an object (different types of objects, but all objects) representing an HTML element, text, or attribute.
The document object represents the HTML Document Object Model. The DOM is used to represent our HTML document (source code) in the form of a series of hierarchical nested objects (a tree).
The window and document variables are global, which means they are always available.
An event in computer programming is any occurrence that a program can recognize and react to, like a mouse click or a form submission. Events belong to specific browser structures, like the window object and document object. In other words, there are browser window events, and there are HTML document events.