Comp 110 TypeScript/HTML/CSS and the "DOM"

What is HTML?

HTML is "Hyper-Text Markup Language", and is the code that our web browser renders to show us the Internet as we know it. It tells the browser the default content that the webpage will contain!

Below is an example of what this might look like:

<html>
     <head>
          <title>Introduction to Computer Science Graphics</title>
          <link rel="stylesheet"
                   type="text/css"
                   href="./style.css">
      </head>
     <body>
           <svg id="artboard"></svg>
          <div id="console"></div>
          <script src="./app-script.ts"></script>
     </body>
</html>

Tags (that describe elements on the page) include but are not limited to:

  1. <html>...</html> - the opening and closing tags (many tags are paired like this)
  2. <head>...</head> - contains rudimentary 'meta' information about the page (not necessarily visible)
  3. <title>...</title> - designate the title of the web page
  4. <link...> - contains references/links to other code, including stylesheets (CSS!) and scripts! (TS!)
  5. <body>...</body> - contains the displayed content of the web page (these things will show up!)
  6. <svg>...</svg> -"scalable vector graphics" - where the artboard/your shapes will show up! allows us to create images/drawings
  7. <div>...</div> - a "division" that allows us to sort various types of content. can contain any other content tags!
  8. <script...>...</script> - allows us to refer to a TypeScript file

We are able to reference these element by giving them 'id's in the HTML and retrieving those elements by using TypeScript.

//HTML
<div id="myFirstDiv"> Hello world! </div>

//TypeScript
let theDiv: HTMLElement = document.getElementById("myFirstDiv") as HTMLElement;
//we can now do things to 'theDiv' like adding an 'onclick' function that handles what happens when we click our element!

These are just the tags that are used in the example above - there are SO many more! Check out these resources to learn more!

What is CSS?

CSS ("Cascading Style Sheets") is styling that can be referenced from an HTML file. It designates the style and theme of a page. Without a CSS, all of the HTML content will likely be black, Times New Roman text with no sense of design. Lame.

With CSS, you can designate location, alignment, color, borders, shadows, images, backgrounds, etc. There are also pre-built themes and frameworks that are useful for CSS, such as Bootstrap. We won't go very in depth with CSS in COMP 110, but check out these resources if you are interested!

(Side note: Bootstrap is a library built by Twitter that gives us more out-of-the-box functionality. Instead of having to think of our own designs, we can pick beautiful-looking templates.)

The DOM

The DOM (Document Object Model) is the hierarchy of objects we see on a web page. In the DOM, there are container objects that hold single objects. Each document object is an element, and all elements have properties we can edit, such as border or background color. We can use HTML to set up and work with these elements.

When the browser loads, each time it finds an opening tag it constructs an object for that tag. If there are tags nested within other tags, the same thing happens, but tags are returned to a group with the descendent tags. All the objects are added to the DOM.

To set the properties of DOM objects, we use attributes in the opening tag of the HTML Element. Here's an example:

<html>
  <body style="background: lightblue">
    <h1 id="title" style="color: green">
      COMP110
    </h1>
    <h2>
      <i>
        What to Study
      </i>
    </h2>
    <ul>
      <li style="color:red">
        Lecture Slides
      </li>
      <li style="color:red">
        Worksheets
      </li>
      <li style="color:red">
        Problem Sets
      </li>
      <li style="color:red">
        Topics Pages
      </li>
    </ul>
  </body>
</html>

So what does the TypeScript do?

Well... we've been using it all semester!

Our TypeScript manipulates the HTML document, adding functionality to the various elements and making them dynamic! Without any type of script (ha), our web pages would be static and boring. In TypeScript, the global document variable is what lets us access the DOM. We can use certain properties and methods with the document variable that'll let us interact with the DOM since the document variable is of type HTMLDocument:

  • body: HTMLElement
    • references the body element
  • getElementById(id: string): HTMLElement | null
    • retrieves and element via its 'id' attribute
    • either returns the HTMLElement or if no element with that id exists, returns null
  • createElement(tag: string): HTMLElement
    • creates a new element
  • appendChild(child: HTMLElement): void
    • appends an element to the document

We can use variables we make along with methods and properties of the document object to access and modify DOM objects with TypeScript. Here are some examples:

let body: HTMLElement = document.body;
body.style.background = "lightblue";
let heading: HTMLHeadingElement = document.createElement("h1");
heading.style.color = "darkblue";
heading.innerText = "Hello, world";
body.appendChild(heading);

Type Assertion

We've seen that getElementById can return either an HTMLElement or null. This means there's always the possibility it'll be null, which can be a hassle to deal with when we're trying to use it in our code. If we know for sure that it isn't null, we can use a type assertion to indicate that. To do so, we use the getElementById method like normal then immediately say as HTMLElement. We can also substitute in the specific type (such as HTMLImageElement, for example) instead of just HTMLElement.

let im: HTMLImageElement = document.getElementById("div") as HTMLImageElement;

Being specific with the type allows us to access specific methods and properties that might exist for our specific type of element but not all elements. For example, HTMLImageElements have properties such as width and height, but general HTMLElements do not. So, if we wanted to use these properties, we'd have to specify that we aren't just dealing with any HTMLElement, but rather an HTMLImageElement specifically.