A high-level definition

JavaScript is a scripting or programming language that allows you to implement complex

features on web pages — every time a web page does more than just sit there and display
static information for you to look at — displaying timely content updates, interactive maps,
animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is
probably involved. It is the third layer of the layer cake of standard web technologies, two of
which (HTML and CSS) we have covered in much more detail in other parts of the Learning
Area.

 HTML is the markup language that we use to structure and give meaning to our web
content, for example defining paragraphs, headings, and data tables, or embedding
images and videos in the page.
 CSS is a language of style rules that we use to apply styling to our HTML content, for
example setting background colors and fonts, and laying out our content in multiple
columns.
 JavaScript is a scripting language that enables you to create dynamically updating
content, control multimedia, animate images, and pretty much everything else. (Okay,
not everything, but it is amazing what you can achieve with a few lines of JavaScript
code.)

The three layers build on top of one another nicely. Let's take a button as an example. We can
mark it up using HTML to give it structure and purpose:

HTMLCopy to Clipboardplay
<button type="button">Player 1: Chris</button>

Then we can add some CSS into the mix to get it looking nice:

CSSCopy to Clipboardplay
button {
font-family: "helvetica neue", helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid rgb(200 200 0 / 60%);
background-color: rgb(0 217 217 / 60%);
color: rgb(100 0 0 / 100%);
box-shadow: 1px 1px 2px rgb(0 0 200 / 40%);
border-radius: 10px;
padding: 3px 10px;
cursor: pointer;
}

And finally, we can add some JavaScript to implement dynamic behavior:

JSCopy to Clipboardplay
const button = document.querySelector("button");

button.addEventListener("click", updateName);

function updateName() {
const name = prompt("Enter a new name");
button.textContent = `Player 1: ${name}`;
}
play

Try clicking on this last version of the text label to see what happens (note also that you can
find this demo on GitHub — see the source code, or run it live)!

JavaScript can do a lot more than that — let's explore what in more detail.

So what can it really do?

The core client-side JavaScript language consists of some common programming features
that allow you to do things like:

 Store useful values inside variables. In the above example for instance, we ask for a
new name to be entered then store that name in a variable called name.
 Operations on pieces of text (known as "strings" in programming). In the above
example we take the string "Player 1: " and join it to the name variable to create the
complete text label, e.g. "Player 1: Chris".
 Running code in response to certain events occurring on a web page. We used
a click event in our example above to detect when the label is clicked and then run the
code that updates the text label.
 And much more!

What is even more exciting however is the functionality built on top of the client-side
JavaScript language. So-called Application Programming Interfaces (APIs) provide you
with extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement
programs that would otherwise be hard or impossible to implement. They do the same thing
for programming that ready-made furniture kits do for home building — it is much easier to
take ready-cut panels and screw them together to make a bookshelf than it is to work out the
design yourself, go and find the correct wood, cut all the panels to the right size and shape,
find the correct-sized screws, and then put them together to make a bookshelf.

They generally fall into two categories.

Browser APIs are built into your web browser, and are able to expose data from the
surrounding computer environment, or do useful complex things. For example:

 The DOM (Document Object Model) API allows you to manipulate HTML and CSS,
creating, removing and changing HTML, dynamically applying new styles to your
page, etc. Every time you see a popup window appear on a page, or some new content
displayed (as we saw above in our simple demo) for example, that's the DOM in
action.
 The Geolocation API retrieves geographical information. This is how Google Maps is
able to find your location and plot it on a map.
 The Canvas and WebGL APIs allow you to create animated 2D and 3D graphics.
People are doing some amazing things using these web technologies — see Chrome
Experiments and webglsamples.
 Audio and Video APIs like HTMLMediaElement and WebRTC allow you to do really
interesting things with multimedia, such as play audio and video right in a web page,
or grab video from your web camera and display it on someone else's computer (try
our simple Snapshot demo to get the idea).

Third party APIs are not built into the browser by default, and you generally have to grab
their code and information from somewhere on the Web. For example:
  The Twitter API allows you to do things like displaying your latest tweets on your
website.
 The Google Maps API and OpenStreetMap API allows you to embed custom maps
into your website, and other such functionality.

Note: These APIs are advanced, and we'll not be covering any of these in this module. You
can find out much more about these in our Client-side web APIs module.

There's a lot more available, too! However, don't get over excited just yet. You won't be able
to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours
— there are a lot of basics to cover first. And that's why you're here — let's move on!

What is JavaScript doing on your page?

Here we'll actually start 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 What is CSS? 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).

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

Browser security
Each browser tab has 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.

Note: 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.