JavaScript Intro & Initial Setup

JavaScript is the most popular programming language in the world, so it’s no wonder that it’s one of the most sought-after skills in the web development industry. In fact, the Devskiller IT Skills and Hiring Report (2020) reports that 72% of companies are looking to hire JavaScript experts.

Additionally, of the over 1.8 Billion websites in the world, JavaScript is used on 95% of them.

Choosing to learn JS in 2021 is undoubtedly a very wise move! Let’s dive right in with an introduction, then we’ll look at the initial setup steps.

Introducing JavaScript!

JavaScript is a programming language that gives you the ability to implement complex features on web pages —and there is almost no limit to what you can do! You can animate 2D/3D graphics, add scrolling video, interactive maps, zoomable images, develop games, the possibilities are truly endless!

When it comes to standard web technologies, it plays exceptionally well with HTML and CSS.

• HTML is the markup language that we use to structure our web content. We classify our content into elements such as paragraphs, headings, tables, and even embedded images and videos.
• CSS is a language consisting of style rules that we use to style our HTML content. We use it to set fonts, colors, backgrounds and we can also create our overall page layout (with positioning, flexbox, and grid) using CSS.
• JavaScript enables you to create just about everything else! As mentioned, you can add complex animation, control multimedia, and add dynamic content.

Let’s see an example of how they all can interact together!

Here is our basic HTML, consisting of a heading, paragraph, and button:

<h1>I am a headline made with HTML</h1>
<p>And I am a simple text paragraph. The color of this text is styled with CSS. Click the button below to remove me through the power JavaScript.</p>
<button>Hide the text above</button>

Let’s add some CSS to make it look nice:

body {
 font-family: sans-serif;
 text-align: center;
 padding: 3rem;
 font-size: 1.125rem;
 line-height: 1.5;
 transition: all 725ms ease-in-out;
} 

h1 {
 font-size: 2rem;
 font-weight: bolder;
 margin-bottom: 1rem;
}

p {
 margin-bottom: 1rem;
 color: tomato;
}

button {
 cursor: pointer;
 appearance: none;
 border-radius: 4px;
 font-size: 1.25rem;
 padding: 0.75rem 1rem;
 border: 1px solid navy;
 background-color: dodgerblue;
 color: white;
}

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

document.querySelector("button").addEventListener("click", function () {
 document.querySelector("p").css("opacity", 0);
});

In this example, after the button is clicked, JavaScript detects the click event and removes the paragraph by adding the opacity: 0 CSS rule. All without refreshing the page!

And this is just the beginning.. JavaScript can do a whole lot more —I’ll be taking a deep dive into all things JavaScript throughout this series.

For now, let’s see how we can add JavaScript to our web pages, so we can start playing around for ourselves.

How to add JavaScript to a webpage

JavaScript is added to an HTML page in a similar manner to CSS. If you’re familiar with CSS, you may recall that it uses <link> elements to connect to external stylesheets and <style> elements to define internal (inline) styles in HTML.

JavaScript only needs one element in order to be added to an HTML page: the <script> element.

Let’s take a look at how to use <script> for both inline JavaScript code and to connect to external JavaScript files.

How to add inline JavaScript

JavaScript code that is embedded with an HTML document is referred to as inline JavaScript. To add it to your webpage, just put your JavaScript code in between a pair of <script> tags, like so:

<script>

  // Your JavaScript code

</script>

The best place to put this is just before the </head> tag. This allows your scripts to be downloaded ASAP without blocking your browser (Why? See my next article “What are async and defer ?”).

So the above example could be added to a webpage, like so:

<script>

document.querySelector("button").addEventListener("click", function () {
 document.querySelector("p").css("opacity", 0);
});

</script>

How to link to external JavaScript

On the other hand, the HTML document may refer to a separate file that contains the JavaScript program, in which case it is referred to as external JavaScript.

You may create as many separate JavaScript files as you like! As long as you give them the .js extension, you can link them up to your webpage. For example, the file script.js can be linked to your page like so:

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

Inside script.js, you have your JavaScipt code:

document.querySelector("button").addEventListener("click", function () {
 document.querySelector("p").css("opacity", 0);
});

This code works the same as our inline example, only now we’ve got our JavaScript in an external file. This is generally a good thing as your code will typically be much more organized and reusable. Additionally, your HTML will be much easier to read without huge chunks of script mixed through it.

Wrapping up

And that’s it for today! We’ve begun with a little bit of the history of JavaScript, including how it relates to both HTML and CSS to essentially form the basis of modern front-end development! We also looked at how to add JavaScript to your HTML webpage, using both the internal & external approaches.

JavaScript may seem a bit intimidating right now, but don’t worry — in this series, we’ll work through each of the core concepts in simple steps. There will undoubtedly be a ton of “AHA” moments on your journey. As you continue to push forward, these concepts will start to make much more sense as you make new connections and increase your knowledge!