For which problems are JavaScript APIs used?

What is JavaScript?

Welcome to the MDN Beginners Course for JavaScript! In the first article we will look at JavaScript from the outside and answer questions like "What is it?" or "What does that do?" and we'll make sure you know what JavaScript is.

Requirements:Using a computer and a basic understanding of HTML and CSS
Theme:Get to know JavaScript, what JavaScript can do and how it works in a web page.

An expert definition

JavaScript is a programming language with which complex programs can be implemented in a website. Whenever a website does more than just display static information (for example:

  • Temporal content updates (live ticker)
  • interactive maps (Google Maps)
  • animated 2D / 3D graphics (games)
  • ...)

you can be sure that JavaScript was used. It is the third of the three standard technologies on the web; the other two (HTML and CSS) are introduced and referenced in other areas of the MDN.

  • 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.
  • JavaScript is a programming language that allows dynamic content updates, animated images and much more to be implemented.

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:

And finally, with some JavaScript, we can implement a response to the user's click:

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?

The core of JavaScript is similar to that of other programming languages. In JavaScript you can:

  • 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.)

But there are other functions that build on the core of JavaScript. The so-called Application Programming Interfaces (APIs) give you even more functions with which you can improve your projects.

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.

There are many more APIs available! Nevertheless, don't get too excited now, because you won't be able to develop the next Facebook, Google Maps, or Instagram after just 24 hours of learning JavaScript - there are still many things that have to be dealt with. And that's why you're here - so let's move on!

What exactly does JavaScript do on your website?

Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.

This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS was there to affect, then errors would occur.

Browser security

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.

JavaScript running order

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

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

You might hear the terms interpreted other compiled in the context of programming. JavaScript is an interpreted language - the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.

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

You might also hear the terms server-side other client-side code, specially in the context of web development. Client-side code is code that is run on the user's computer - when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about client-side JavaScript.

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages ​​include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment - you can find more out about server-side JavaScript in our Dynamic Websites - Server-side programming topic.

The word dynamic is used to describe both client-side JavaScript, and server-side languages ​​- it refers to the ability to update the display of a web page / app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, inserting data requested from the server into it, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

A web page with no dynamically updating content is referred to as static - it just shows the same content all the time.

How do you add JavaScript to your page?

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses elements to apply external stylesheets and