JavaScript has quite a turbulent end interesting history.1 Some people love it, some hate it. Whatever your opinion about JS is, it is one of the most popular languages out there. According to the 2022 Stack Overflow Developer Survey, it is the most commonly used programming language.
JavaScript was originally designed for and is still used for writing code that runs on webpages. JavaScript run natively in your browser and has many convenient features for manipulating data on webpages. For example, JavaScript makes it easy to write asynchronous logic, which is very commonly used for interacting with web servers. We can also use JavaScript to manipulate elements on the page using the Document Object Model API (DOM) exposed by the browser.
The syntax of JavaScript is likely similar to other languages that you have seen before. Let’s start with a “hello world” example.
We can add JavaScript to our page by adding a script element to the head like this:
<head>
<!-- Other elements -->
<script>
alert("Hello world!");
</script>
</head>If we add this to our page, we will see a tiny dialog with the text “Hello world!” like this:
The easiest way to play around with JavaScript is though the development console in your browser.
You can launch it by pressing F12 (in most browsers) or by right clicking and selecting “inspect” (or similar depending on browser).
Again, the MDN Web Docs have great documentation available that you can use for learning and as a reference.
Let’s implement the hint feature of our page. Add the following to the page:
<head>
<!-- Other elements -->
<script>
function get_hint() {
// We use the fetch function to send a GET request to the /get_hint.php resource.
fetch("/get_hint.php")
// When we get an answer, read the text (body) of the response as is.
// Other methods (such as .json()) are available which will parse the content of the body.
.then((response) => response.text())
// When we have read the body, notify the user of the result.
.then((text) => {
alert(text);
});
}
</script>
</head>Edit: this last function is not actually being used anywhere. I planned to show you how to do this live but completely forgot :( Sorry. I have added an explanation below.
To add a button that actually uses this function, we would add the following to the desired part of the page (e.g below the <form>):
<!-- other elements -->
<input type="button" onclick="get_hint()" />
<!-- other elements -->