What This Is About

The first thing is, of course, to set up your coding environment. For that, the following software is needed:

• Visual Studio Code (for the actual coding)
• Git (For better version management)
• Node.js (for executing javascript in a webbrowser)
• Typescript compiler (for compiling typescript)

A GitHub account is also very useful, since it allows for easier project management with multiple coders involved, as well as easy repository storage and management. This set-up gives you access to a variety of actions to work with and manage your files, even when working with a team:

• staging changes: preparing changes for commiting
• commiting changes: finializing changes and saving them in the file
• pull: Getting information/changes from somewhere
• push: Sending information/changes to somewhere
• branches: Alternative versions of the same repository
• merging branches: uniting branches by either choosing which one to keep or by applying changes from both branches
• .gitignore files: A .gitignore file in your repository is used to tell git which files to ignore (not track) going forward. The specifics, like filetypes, filenames or exeptions are listed in that file. Unless specified, existing files are not considered.

VSCode also has a lot of features specifically for coding. That includes the auto-save feature (pretty self-explanatory), the option to let VSCode format your document, and the change symbol function, which lets you change e.g. a variable name across the entire document at once.

HTML stands for HyperText Markup Language and is the basis of every website. It structures and organizes the content of your webpage, like text and images. This organisation is achieved through tags, which define properties and behavior of the content. Some examples for HTML-tags are:

The content of an HTML-file

Typescript is essentially a better version of Javascript, that compiles into Javascript. It allows for more strict type management, for example. This means that you have to be more specific with defining your variables, but also reduces the chance of errors due to conflicting data types. A typescript file is compiled into a javascript file, which then can be linked to a html webpage.

Linked scripts can change properties of your html page lik texts and color or creating objects and edit existing ones essentially allowing for DOM-Manipulation outside of the html-file.

Scripts also handle interactions with the page, like clicking on something. These interactions are called events.

For events to be called, an element needs an Event Listener (element.addEventListener("eventType", handlerFunction)). Those check for events they are assigned to and can call the appropiate function handling the event. Some examples of event types are:

The process of triggering an event is divided into 3 seperate phases:

• capture phase: The event travels down the DOM tree until it reaches its target/listener
• target phase: The event reaches its target
• bubbling phase: The event travels back up the DOM tree, triggering other (appropiate) Event Listeners

Once you are ready to develop more complex web applications, you need a plan before starting to code. This can be done by drawing some diagrams:

At ~24 frames per second, the human eye sees a continous motion in an animation. The standard for the game industry nowadays is 60. But how can we tell a program when the next frame is supposed to be drawn? The answer: time signals .

In Javascript, there are three different kinds of time signals (which all use milliseconds as a unit):

setTimeout(handlerFunction, timeout in milliseconds)
setTimeout defines a delay after which a handler function is called. If not called again, it is only executed once.

setInterval(handlerFunction, interval in milliseconds)
sets an Interval in which the handler funcion is called. Runs continously and outputs an Interval-Id, which can be used by the clearInterval function to stop the interval.

requestAnimation(handlerFunction)
activates its handler function before the next frame update, allowing for calculations inbetween frames. Needs to be called individually.

Those time signals can be used to animate with Javascript. By giving the program a function to "update" the images on screen (usually by changing the position values of some objects) and calling that function at set intervals (via one of the time signal functiions above) you can give the illusion of movement.
For an example, see