Browser APIs
So far everything we've covered is part of the JavaScript language itself and is inherited by TypeScript, so will be available anywhere you can write JavaScript or TypeScript code. Browsers also provide some extra built-in features. This works for web content running with a browser, but these features are not always available in other environments like node.js. However since the web is a major platform in itself, it's worth mentioning what features browsers provide.
Browsers provide a huge range of built-in features, ranging from networking to 3D graphics. This would be an extremely long guide if we tried to cover them all! We will only cover a very small set in brief, just to introduce you to the area. Similarly to the standard library, TypeScript also provides a comprehensive set of type definitions to cover all these browser APIs too, and ensure they are only used with the right types.
document
The document object represents the overall HTML document in the page. This allows access to every HTML element in the page via code, and allows each element to be individually manipulated, such as adding and removing elements, moving them around, or changing CSS styles. However that covers a broad set of APIs which we won't go in to here. For now, it's enough to highlight its existence.
One interesting property to change is the title attribute. That is reflected in the tab title, so you can use TypeScript to set that to whatever you like!
// Change page title to "Hello world!"
document.title = "Hello world!"
See the Document MDN page for more information.
window
In browsers window is actually just another name for globalThis, i.e. the global object. However it provides some methods and properties that do relate to the browser window. When accessing things relating to the browser window, it is customary to use the name window to make your intent clear.
Two interesting properties are innerWidth and innerHeight, which return the size of the page in the browser window in pixels.
console.log(`Page size is ${window.innerWidth} x ${window.innerHeight}`);
See the Window MDN page for more information.
Listening for events
We previously covered this, but it's worth mentioning again as it's an important part of browser APIs. The addEventListener method lets you register a function to be called whenever something happens. For example adding a "click" event handler to document will call the given function whenever the user clicks in the page.
document.addEventListener("click", () =>
{
console.log("Click event!");
});
In general, the pattern obj.addEventListener(event, func) means "whenever event happens on obj, call func". Different objects have different sets of events you can listen for.
For example the window object has a "resize" event which fires every time the window is resized. Try the following code snippet in a script file, and then resize the preview window, then check the browser console for the resulting messages.
window.addEventListener("resize", () =>
{
console.log(`Resize event! New page size is ${window.innerWidth} x ${window.innerHeight}`);
});
This pattern is also used throughout Construct's own built-in features, which we'll come on to later. On both the MDN and Construct's documentation, the reference for each kind of object will also include a list of events that you can listen for.
Timers
The setInterval method runs a function periodically, in a time interval given in milliseconds. The following example will log a message to the console every 1 second with an incrementing counter.
let counter = 0;
setInterval(() =>
{
console.log(`setInterval callback, counter = ${counter++}`);
}, 1000);
The setTimeout method waits for a time given in milliseconds, then runs a function. The following example will log to the console in a "click" event, wait 1 second, and then log another message. Try clicking in the preview window, and wait a moment for the second message to appear.
document.addEventListener("click", () =>
{
console.log("Click event!");
setTimeout(() =>
{
console.log("Callback 1 second after click")
}, 1000);
});
location
The global location object provides information about the current page URL. You can use location.href to get the current URL as a string, and location.reload() to refresh the page. Try entering location in the browser console, and you can explore all the properties it provides.
Conclusion
In this part we've covered:
- Math methods
- String methods
- Array methods
- A brief summary of
Date
- A brief introduction to browser APIs, including
document, window, location, timers, and listening for events
These features are regularly useful in day-to-day programming work, so it's worth being familiar with them. JavaScript provides many more built-in features which TypeScript inherits, and browsers provide even more. We've only touched on a few of the more common and useful built-ins, and in the interest of simplicity we'll move on in the next part, where we'll cover some of the APIs specific to Construct.
Learn more
If you want to dig deeper, you can learn more about the features mentioned in this guide at the following MDN Web Docs links:
Part 12
When you're ready to continue, head to the next part at Learn TypeScript in Construct, part 12: Construct APIs!