JavaScript: Really I Know You?

JavaScript is mainly used for web-based applications and web browsers. But JavaScript is also used beyond the Web in software, servers and embedded hardware controls.

Adding interactive behavior to web pages

JavaScript allows users to interact with web pages. There are almost no limits to the things you can do with JavaScript on a web page – these are just a few examples:

• Show or hide more information with the click of a button
• Change the color of a button when the mouse hovers over it
• Slide through a carousel of images on the homepage
• Zooming in or zooming out on an image
• Displaying a timer or count-down on a website
• Playing audio and video in a web page
• Displaying animations
• Using a drop-down hamburger menu

How does JavaScipt work?

JavaScript is what is known as a client-side script. Most Web applications, such as a search engine, work because of an interaction between the user’s device and a remote server. The software on the remote server sends information to the client and the software on the client-side reads the information and renders a Web page on the screen. A client-side script is a programming language that performs its tasks entirely on the client’s machine and does not need to interact with the server to function.

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:

• 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 button is clicked and then run the code that updates the text label.
• Autocomplete
• Loading new content or data onto the page without reloading the page
• Rollover effects and dropdown menus
• Animating page elements such as fading, resizing or relocating
• Playing audio and video
• Validating input from Web forms
• Repairing browser compatibility issues
• Store useful values inside variables.

Creating web and mobile apps

Developers can use various JavaScript frameworks for developing and building web and mobile apps. JavaScript frameworks are collections of JavaScript code libraries that provide developers with pre-written code to use for routine programming features and tasks—literally a framework to build websites or web applications around.

Popular JavaScript front-end frameworks include React, React Native, Angular, and Vue. Many companies use Node.js, a JavaScript runtime environment built on Google Chrome’s JavaScript V8 engine. A few famous examples include Paypal, LinkedIn, Netflix, and Uber!

Game development

Of course, you can also use JavaScript to create browser games. These are a great way for beginning developers to practice their JavaScript skills.

Why use JavaScript over other programming languages?

Aside from the unlimited possibilities, there are many reasons for web developers to use JavaScript over other programming languages:

• It is the only programming language native to the web browser
• It is the most popular language
• There’s a low threshold to get started
• It’s a fun language to learn

Server-side versus client-side code

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 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, ASP.NET, and… JavaScript! it can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

Dynamic versus static code

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, filling it with data requested from the server, 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.

Internal JavaScript

First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.
Open the file in your web browser and in your text editor. You’ll see that the HTML creates a simple web page containing a clickable button. Next, go to your text editor and add the following in your head — just before your closing </head>tag:

<script>

  // JavaScript goes here

</script>

Now we'll add some JavaScript inside our <script> element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line:
document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
  }
});

Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.

External JavaScript

This works great, but what if we wanted to put our JavaScript in an external file? Let’s explore this now.

First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that’s how it is recognized as JavaScript.
Replace your current </script> element with the following:

<script src="script.js" defer></script>

Inside script.js, add the following script:
function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Save and refresh your browser, and you should see the same thing! It works just the same, but now we’ve got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.

This is not just a programming language but a must-needed language to learn for any developer.

Happy Scripting 🙂