What is JavaScript Used For?

Using JavaScript, a web developer can make interactive features for web page visitors to engage with. The web development opportunities for JavaScript are endless, whether for educational, career, or personal purposes.

Request & Response

Recall the description of request and response from week 1. When visiting a site, the browser makes a request to the server and the server sends HTML back. Using that, the browser builds out the HTML.

Similarly, if we were to make a request to Google, Google could return a JSON object, which would then be displayed as a list of results. We could then display that list of results in the Google search results page. This example could represent a POST request, which is one of the HTTP requests that we use JavaScript to do. It is important to know JavaScript in this case because this is how we will make requests from the frontend (browser) to the backend (server).

JavaScript is versatile. The frontend, backend, and API can all be built using JavaScript itself. Some common frameworks for these different purposes are:

• Frontend: React.js, Vue.js, Angular, Svelte, React Native (for mobile apps)
• Backend: Express.js, Node.js
• API: Express JS, Node JS

Elements and The DOM

The document object model (DOM) is an interface where websites (document) provide an API so we can “talk” to the elements (nodes) on the page. Some examples of elements that we will work with in this example are <h1>, <p>, <a>, <h2>, and <div>. Below is a short example of how the API can be used to change things on the page.

If we have an <h1> element with the id being “title” and the text displayed being “Hello”, it would look like this:

<h1 id=”title”> Hello </h1>

The API on the document itself allows us to interact with the text directly. We can call the element by its id using the following command, which will return the <h1> tag:

element = document.getElementById(‘title’)

We can also change the inner text from “Hello” to “Hello World”, manipulating the element itself using the following command:

element.innerText = “Hello World”

As a result of our manipulations, the <h1> tag would now look like this:

<h1 id=”title”> Hello World </h1>

Events

An event is anything that happens while you are on a website. Some example of events are:

• Moving a mouse
• Clicking a key on a keyboard
• Scrolling on a page
• Copying/cutting/pasting content
• Loading a website
• Clicking an element

A JavaScript event listener can be set up to listen for when certain events take place and manipulate the page in response to the event

<button> example

The <button> tag corresponds to a button on a web page. The button can have any function, but some common examples include searching, signing up for a service, and navigating to another web page. In this example, we want to listen to when a button is clicked and disregard all of the other events that are happening on the page. The button has an id of “button-id” and says “Click Me”, which would look like this:

<button id=”button-id”>Click Me</button>

The API on the document itself can be used to get the button by using the following command:

element = document.getElementById(‘button-id’)

Then an event listener can be added, which says that when the button is clicked, a function is triggered. When the button is clicked, the function that is in the curly brackets will then be called. In the example below, the “...” is used to represent the logic inside of the function.

element.addEventListener(‘click’, function () { … });

Inline Handler

Using an inline handler, an event can be listened for directly on a button. In the previous example, the element on the page had to be selected in order to add an event listener. Using an inline handler, an on-click handler can be in the button itself. This is another attribute to consider.

<button onclick=”callFunction()”>Click Me</button>

When the “Click Me” button is clicked, it will then call the function “callFunction” if it has already been defined.

<script> tag

A <script> tag lets you define JavaScript functions. For example, if you were to build a function that, upon pressing a button, returns “hello”, the end result would look like this:

In order to define the function, a <script> tag would have to be used to create a sayHello function:

<script>
function sayHello() {
alert(“Hello!”);
}
</script>

In order to make it interactive for the user of the web page, the button would also have to be created. That would look like the following:

<button onclick=”sayHello()”>
Click Me
</button>

When a user clicks the button, it will call the “sayHello()” function which will open up the alert on the page.