HTML, Javascript, the DOM… oh and CSS
Welcome to my third post on the series 😎! It’s only week 8 of 15 but feels like I’ve been at Flatiron for ages already. In this post, I’ll be touching on the trio of HTML, JS and the DOM, partly because it’s one of the areas I thought could be easily misunderstood by developers in training.
The trio (along with CSS for styling) constitute what’s known as the front end of web applications… the part where the user communicates with the app. While the trio almost always go together, I’ll like to introduce them in parts:
HTML (HyperText Markup Language): HTML is a markup language that tells browsers how to display code on the internet. Everything that a web browser renders, from simple texts to pictures, to forms (for login/signup) when a user visits a webpage comprises codes bounded by tags (<>). Each of these codes together with the tags is called an element. An example of an element is a paragraph element: “<p> I love coding </p>” where the former is known as the opening tag while the latter is called the closing tag. In the case of a picture element, a file or web address of the picture is required to be provided as a source. Pictures are marked with “img” tags. An example of this is: <img src=“example.jpg”>. The browser translates all of these tags into meaningful displays. You can view the HTML code for this blogpost by just right-clicking anywhere on the page and clicking on “view page source”. The source in this case is the file or document sitting somewhere in the medium web application that contains all the HTML elements required to be loaded by the browser.
DOM (Document Object Model): The DOM is a programming interface for HTML documents. It can be said to be a clone of the original HTML file, hence the word “model” in its expansion. Even though the DOM is a clone, its structure resembles that of a physical tree: As trees have branches that leads to other branches, the DOM clone of an HTML file arranges the HTML elements in such a way that one element originates from another which further births other elements. As a result, the DOM can be likened to a collection of several parent-offspring relationships / family tree. Through this document, the content displayed on the browser can be modified without the need to edit or change anything in the source HTML file from which it originates.
Javascript: For the purpose of this blog, this is simply the language used to make a webpage dynamic. It makes it possible to add special effects on webpages and to create a dynamic and interactive experience for the user. In the description of the DOM above, I mentioned that the content displayed on the page can be updated by modifying the DOM while leaving the source HTML unchanged. Javascript is what makes this possible. It is the language that is used to modify the DOM to achieve this purpose. One of the most interesting illustration of DOM manipulation to me is the google map: When you start out on a trip and cover a certain distance, the map adjusts automatically according to the position of your car, revealing some part of the distance yet uncovered. All of these happen without the map reloading to update the current car position. If you miss an exit, the map updates your position automatically and looks for the next exit to take. Without this ability, and if the map were to depend on the driver to physically reload the page to get the updated position, that will amount to a terrible user experience, not to mention the increased chances of accident due to device usage while driving.
HTML, JavaScript and DOM manipulation are awesome frontend packages that work together to make for a better user experience for our app… or at least that’s their goal. While these will produce the required content to be displayed on web applications, it’s ideal that developers also style their application using a style sheet language. The CSS (Cascading StyleSheet) is used to describe how documents written using a markup language like HTML are presented. Attributes like sectioning, color, fonts, special scrolling effects, etc. are made possible using CSS and it’s safe to say that without a proper CSS design in place, your web app will struggle to keep users or make any real impressions.
