|Requirements:||Using a computer and a basic understanding of HTML and CSS|
An expert definition
- Temporal content updates (live ticker)
- interactive maps (Google Maps)
- animated 2D / 3D graphics (games)
- HTML is the markup language that we use to structure a website and to present our content, for example by means of paragraphs, headings, tables, but also to include images and videos in the website.
- CSS is the language to define style rules for HTML, for example by changing the background color and the font.
The three parts build on each other well. Here's a simple example: We can first use HTML to build a structure.
Then we can use some CSS rules to make the sentence look nice:
Click on the label and see what happens (you can find the code on GitHub and see it in action here).
So what can I do with it now?
- Store useful values in variables. As in the example when we used a variable to store the name you entered.
- Operations on texts (called "strings" in programming). In the above example we had the string "Player 1:" and the variable connected and (if "Chris" is) we got the text "Player 1: Chris".
- Reacting to events on a website with code. We used an event to react when you hit the label.
- And much more. (see any major web project.)
APIs are code written by other programmers that give you more options for your program. That would be difficult or impossible for you to program yourself. They are the same as tools and materials are to craftsmen. It would be much more difficult to produce all the tools and then all the materials on your own.
The APIs can generally be divided into two categories:
Browser APIs are from the user's web browser. And they can access resources on the computer or do things that are very complex. Some examples:
- The API
- The geolocation API retrieves geographic information. So it is possible for Google Maps to determine your location in order to then display it on a map, for example.
- The Canvas and WebGL APIs allow you to create 2D or 3D animated graphics. This enables the display and use of web technologies. You can find out more at Chrome Experiments and webglsamples.
- Audio and Video APIs for example (en-US) and WebRTC make it possible to create really exciting things in multimedia. For example, audio and video can be integrated into a website. It is also possible to record the webcam and then play it back. (Try our simple snapshot example to get an insight).
Note: Many of the above examples won't work in older browsers - if you want to try your code, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera. It will still be necessary to deal with cross browser testing if it is to go closer to a production system (e.g. real code that real customers should use).
Third Party APIsaren't built into the browser by default, and you'll need to find much of their code and information elsewhere. For example
- The Twitter API allows you to do things like display the latest tweets on your website.
- Google Maps API allows you to display your own maps on your website or to use other similar functions
Note:These APIs are very advanced and are not covered further in this module. You can find more information in our ModuleClient-based Web APIs module.
Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) - this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab - or on another website. This is a good security measure - if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.
grade: There are ways to send code and data between different websites / tabs in a safe manner, but these are advanced techniques that we won't cover in this course.
Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the code block (lines 5–8) is run. The code block (these types of reusable code block are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.
If you swapped the order of the first two lines of code, it would no longer work - instead, you'd get an error returned in the browser developer console -. This means that the object does not exist yet, so we can't add an event listener to it.
grade: This is a very common error - you need to be careful that the objects referenced in your code exist before you try to do stuff to them.
Interpreted versus compiled code
Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C / C ++ are compiled into assembly language that is then run by the computer.
Both approaches have different advantages, which we won't discuss at this point.
Server-side versus client-side code
A web page with no dynamically updating content is referred to as static - it just shows the same content all the time.