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:
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!
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 (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>
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:
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);
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.