Javascript is one of the web’s three basic building blocks along with HTML and CSS. If HTML is the structure and CSS design, it can be said that Javascript is the functionality of the Internet’s web pages.
Nowadays, simple animations can be created using CSS, but in general, it is Javascript that enables everything that “happens” on a web page. Examples of things that happen can be that something changes when you click a button, that a form shows that you have filled in numbers in the wrong format, or that something moves or changes on the website.
A common misconception is that Java and Javascript are the same things, which is not true. Both are programming languages, but they are relatively different in terms of how they are used.
What can you do with Javascript?
A common use for Javascript is to determine what happens when a user interacts differently on a web page. It is called using “event listeners”. For example, you can listen after a user scrolls, clicks the ENTER key, or starts filling out a form, and decides what should happen when the listener hears these things.
Javascript can also be used to call APIs (see for example the blog post What is an API?), To handle logic with loops and if statements, to perform calculations, and much more. Most things can be done with Javascript in one way or another.
How do you use Javascript?
To be able to use Javascript, it is good to first have a basic understanding of how HTML works, which you can get in the blog post What is HTML ?.
One of the most basic things in Javascript is the use of variables. If the number 25 is to be saved in the variable age, you can write as follows:
var age = 25;
If a text is to be saved in a variable, quotes are used around the text, as follows:
var name = “Tony Montana”;
Each expression in Javascript ends with a semicolon.
Event listeners can be created using the addEventListener () function. All functions in Javascript end with parentheses, and within the parentheses are written the input parameters that the function needs. The addEventListener function needs to know two things, firstly what to listen for and what to happen when what is being listened to happens. This is how it can be described:
element.addEventListener (event, function);
The first part element describes what the listener should be applied to. For example, it may be that you want to listen after someone clicks on a certain button. In that case, the button is “element”. To listen to changes in the width of the browser window, made above, follow these steps:
window.addEventListener (“resize”,
showChangedWindowSize);
Window is an object in Javascript that contains all the information about the browser window. Here a listener is created on the window object, and we choose to specifically listen after the change in window size. The second input parameter, showChangedWindowSize, is a name of a new function that should specify what should happen when the window is resized. The showChangedWindowSize function will thus be called every time the window size is changed. A new function can be defined as follows:
function showChangedWindowSize () {
console.log (window.innerWidth);
}
First, the keyword function is written, which indicates that a new function is about to be defined. Then comes the function name, which in this case is showChangedWindowSize, and after the function name come parentheses. The parentheses are empty, as the function does not need any input parameters.
The function is then opened up and closed using seagull wings {}. The code that exists between the gulls’ wings is the content of the function. In this case, the function console.log () is used, which logs what is in parentheses. If you are using the Chrome browser on a computer, you can try right-clicking anywhere on this page, clicking Inspect and then changing the width of the browser window, and the width in pixels will be printed in the area titled Console in the box that came up when you clicked Inspect.
Logging in is easy, but it does not directly contribute to interactivity with regular users. To instead print the width somewhere on the web page, you can use the document.querySelector () function to “grab hold” of, for example, a paragraph element (see What is HTML?) And insert text into that element. The document.querySelector function needs an input parameter, namely a description of which element to grab.
The description is specified using a CSS selector, for example a class. We take a new example and it will hopefully be a little clearer.
Suppose we have this HTML code:
<p class = “mouse-position”> </p>
In other words, an empty element with a class to be able to access the element in the Javascript code.
In the Javascript code we can then write like this:
window.addEventListener (“mousemove”,
showChangedMousePosition);
var mousePosition =
document.querySelector (“. mouse-position”);
function showChangedMousePosition () {
mousePosition.innerHTML =
“The mouse pointer is on”
+ window.event.pageX
+ “pixels from the left edge and”
+ window.event.pageY
+ “pixels from the top edge.”;
}
First of all, an event listener is created that listens for mouse pointer movements using the keyword “mousemove”. In the next line of code, the paragraph element is grasped by stating that we want to get the first element that has the class mouse-position and the element is saved in the variable mousePosition.
At each mouse pointer movement, the showChangedMousePosition function is called. In that function, the variable mousePosition is used and with the extension .innerHTML it is stated that you want to change the HTML code in the paragraph.
It can be seen as the content changing between the start and end tags in the paragraph element which is currently empty. mousePosition.innerHTML is added to a mix of text and numbers that can be merged using the plus sign. window.event.pageX and window.event.pageY contain data for the current position of the mouse pointer in relation to the left edge and top edge of the web page, respectively. Try moving the mouse pointer (or click on different parts of the screen if you are using a mobile)
Another thing that can contribute to interactivity is to do something with text that a user enters. To do this, an input element can be created in the HTML code as follows:
<input class = “text-input”
placeholder = “Write something here …”>
To access the element in the Javascript code, you can, as usual, type as follows:
var textInput =
document.querySelector (“.-text-input”);
If for some reason we get the idea that we want to print the text that the user has typed backwards, we can do this by first creating an event listener that listens for input in the input element as follows:
textInput.addEventListener (“input”,
showReversedText);
For each new input in the input element, the showReversedText function will be called. A paragraph where the backward text is to be printed also needs to be accessible, so we do in the same way as usual with a paragraph element in the HTML code:
<p class = “reversed-text”> </p>
And in the Javascript code, we access the element like this:
var reversedTextElement =
document.querySelector (“. reversed-text”);
The functionality of printing text backwards can be achieved as follows:
function showReversedText (event) {
var text = event.target.value;
var reversedText =
text.split (“”). reverse (). join (“”);
reversedTextElement.innerHTML =
reversedText;
}
Note that we enter an input parameter here, even though we did not do it at the event listener. What happens then is that we get access to an event object where a large amount of information about what is happening in the input box is available. We then save the text that has been entered in the variable “text” by setting it to event.target.value.
Then existing Javascript functionality is used to first separate the letters in the text, reverse and then merge the text again. Finally, the result is printed in the paragraph element.
There are almost endless possibilities with Javascript, and therefore what I have gone through here is obviously only a fraction of what can be achieved. But it is, after all, a bit of the most basic functionality that is often used.