These are the topics for week 1:
- What is a web browser?
- How a browser works
- Different browsers work differently
- What is the Document-Object Model (DOM)?
- JavaScript and the browser
- The DOM
- The Critical Rendering Path
- Traversing the DOM
- What is DOM Manipulation?
- Manipulating elements
- Browser events
- Event listeners and handlers
A web browser is software that allows you to access websites. If you've ever visited a website, you've used a browser. They allow us to connect to the internet and go places we otherwise never could using our computer.
In your journey into becoming a web developer it's important to know the tools you'll be using intimately. One such tool is the browser, which will be used to navigate to and display websites.
In the following resources you'll learn about the many parts any web browser consists of and what their use is:
A website is a collection of webpages. It's up to the browser to render it by reading the code from your HTML/CSS and JavaScript files. There are, however, differences in the code interpretation of the different browsers, thus making the output look differently.
Try it out for yourself: open a website you visit frequently into different browsers and see how it looks differently.
Having a website display differently across browsers is NOT a good thing. As a developer your job is to make the user experience of a website as consistent as possible. That's why you should check the way your website looks on different browsers during the development of your website. This is called making your website cross browser compatible>
You can use the following online tool in order see how your pages look on multiple browsers:
A good website should look and function the same in any browser.
Unfortunately, there is no easy solution for that. You should check the specificities of each browser that fails to display your website correctly and make the necessary adjustments to your code. Such compatibility issues may occur not only in different browsers but because of an old browser version which does not support completely the latest standards of HTML/CSS/JavaScript.
The reason is simple: browser development doesn't go at the same speed as programming language development. That's right, both browsers and programming languages are also works in progress. They're software, just like the websites you build!
More often than not, the web technologies you're using will have more features you as a developer can make use of than the browser can currently handle. This is important to keep in mind.
When you do your styling, especially, it's important to know if a certain browser (and browser version) is even able to understand it. A helpful tool in identifying this is a website called caniuse.com:
Generally speaking, you want to support as many browsers (and browser versions) with your code as possible.
For more research, check out the following resources:
- Dealing with Cross Browser Compatibility
- Understanding The Stacking Context for Cross Browser Compatibility
As we've learned in the previous module, JavaScript is a programming language. It allows you to write logical rules that the computer can execute in order to solve a problem. However, saying that the 'computer' executes it is actually inaccurate. There are two specific softwares that execute JavaScript: the browser and Node.js. We'll talk about the latter in a different module.
The browser is software that has been build to understand JavaScript (and HTML/CSS). Each different browser (Chrome, Firefox, Safari, etc.) has, behind the scenes, a JavaScript engine that works to transform the JavaScript code that you write into code that your operating system understands.
Every programming language sits at a certain level of abstraction, relative to the only real language a computer understands: machine code (which are only 0's and 1's). For more information on this, check out the following video
For our purposes, it's only important to understand that the browser looks at the JavaScript code and then does what it's instructed to do: add elements, modify text or media files, etc. That's the purpose of JavaScript in the browser: to add interactivity to a webpage, so that a user can interact with it.
The Document-Object Model (DOM) is a tree-like representation of the structure of a webpage. The following is a simple example:
JavaScript is made accessible to the DOM by embedding it into an HTML file. You might've seen the <script src="script.js"></script> before. This tag <script> and attribute src="script.js" is how the browser becomes aware of JavaScript!
The actual process of transforming HTML, CSS and JavaScript into a user-viewable version of a webpage is called the Critical Rendering Path.
You don't need to know the full details of how the rendering process goes. However, it is important to know that it doesn't just "magically" happen. Look through the following to learn more about the Critical Rendering Path:
DOM manipulation refers to the activity of selecting and modifying DOM elements. The main reason why this is done is that you want to show the user different things depending their activity, for example if you click on a hamburger menu icon a navigation menu slides in.
Finding the right elements using JavaScript is called traversing the DOM. Traversing the DOM essential means: we can select certain elements within the DOM in order to modify them (change color, size or make them disappear, for example).
We can do so using various functions:
document.querySelector('#booklist'); // Selects any element
document.getElementById('booklist'); // Selects an element by id
document.getElementsByClassName('item'); // Selects all elements with the specified class nameLook at the following code sample:
const body = document.querySelector('body'); // you can also use 'document.body' directly
const newParagraph = document.createElement('p');
newParagraph.innerText = 'This paragraph will be added to the body!';
newParagraph.style.background = 'red';
body.appendChild(newParagraph);In this example we're executing the following steps:
- We're first selecting the body: this is always necessary, as we can only add or remove elements from the body of the document
- Secondly, we're creating a new DOM element: a
<p>element - Thirdly, we're injecting content into the element
- Fourthly, we give our element a background color
- Finally, we add the
<p>element in the body
Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new <p> at the end of the page!
Learning how to write JavaScript that targets the DOM is an essential part of being a web developer. In the following resources you'll more about how to do that:
Browser events (also known as DOM events) are very much like real-life events: they are important things that happen. In real-life this could be getting a job, graduating from school or receiving a birthday gift. In terms of the browser, this is much more small scale: user actions like clicking, scrolling or typing are all considered events.
These events are important to know about, because based on those we manipulate the DOM. For example, user clicks on an image and as a result it increases in size.
Effectively, it's cause (user clicks on a button) and effect (the button disappears).
Check out the following resources to learn more about what type of events there are, and what you can do to manipulate elements after an event has happened:
Take a look at this code:
const body = document.querySelector('body');
body.addEventListener('click', function () {
body.style.background = 'black';
});Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return click the website. You should see the whole <body> becoming black!
This is DOM manipulation in its simplest form. It goes in three essential steps:
(1) An event happens ("User clicks on the page")
(2) JavaScript is aware and looks for this specific user action (The browser is listening for the event, in this case a click event)
(3) JavaScript modifies the DOM as a result (A function that makes the body background color black is executed)
The second step is called listening for the event. We do this by using a browser predefined function called addEventListener(), which we get from the document object in the browser. The browser needs to listen to the event in order to know what it should do ("make the body background color black") in case a certain event (click) happens to a certain element (body).
The third and final step is called handling the event. The term "handler" effectively means "taking care of" the event; the response to the event. The handler itself is nothing more than a function that executes more JavaScript code in order to manipulate a particular part of the page (either the element that experienced the event or a totally different part of the page).
Are you finished with going through the materials? High five! If you feel ready to get practical, click here.