Resource Details

Javascript Fundamentals

What is JavaScript?

JavaScript is a programming language invented to meet the needs of the evolving landscape of the internet. Since its inception, it has grown in popularity and usefulness and is now present in more than just web development. JavaScript is the flagship of interactive web development, and as a result, it is all but universal in this industry. Before we dive deeper into the rabbit hole, check out this video on the history of JavaScript.

Programming with JavaScript has expanded to everything from computer programming to programming NASA equipment. In addition, since its creation, Node.js has facilitated JavaScript for other purposes. Let’s take a closer look at some of those use cases below.

What is JavaScript used for?

In today's modern landscape, JavaScript is used for everything, thanks to the introduction of Node.js. Regardless of how you cut it, this technology creates robust software for companies worldwide. In addition, companies like LinkedIn and Medium use it to create platforms for users to access their services.

JavaScript can create different kinds of software such as games, computer programs, web applications, and even technologies like blockchain. However, JavaScript is arguably the most popular programming language for the web. For example, more than 125,000 jobs on LinkedIn are looking for working professionals skilled in JavaScript.

Now that we've discussed the scope of JavaScript in the working industry let's talk more about its most common use, web development.

JavaScript for Web Development

JavaScript's most popular use is for web development, and it is one of the most powerful tools a developer can have on their toolbelt. Developers use JavaScript in web development to add interactivity and features to improve the user experience and make the internet much more enjoyable.

JavaScript has expanded well beyond front-end development, which is where it started. More recently, JavaScript has expanded to the back end of web development and can be used across the full stack. This means that developers have front-end access to CRUD (Create, Read, Update, Destroy) methods and can now even be used on the back end of a website.

Furthermore, according to W3techs, over 90% of all websites use JavaScript. This makes it the most prominent leader in web development technology. Let's look at some more specific uses of JavaScript in web development.

• Front-End Interactivity: Web development is only made better by the increased interactivity and features that JavaScript offers.
• Web Applications: Web applications are similar to websites, but instead, they get packaged into a neat little box, which improves control over security and more.
• Browser Games: The modern web browser has come a long way; developers even make robust games that function in a browser.
• Back End Web Development: Web development has come a long way, and now JavaScript is so robust it can even be used to manage the back end of websites and web applications.

Here’s an illustration of all the possible use cases of JS today:

Now that we've discussed the different ways JavaScript can be used, let's talk about how JavaScript works.

How does JavaScript work?

JavaScript is considered a client-side scripting language, which means that it operates on the user's browser and does not function on an external device. An example of a language that is not client-side would be MySQL, a server-side language that handles any database requests.

JavaScript also does not require that anything be downloaded to the user's devices, as modern browsers have the required software integrated into them. This makes JavaScript much more user-friendly than some other languages can be.

This image is an example of how JacaScript works behind the scenes, which is different from what we see.

Now that you have a better idea of how JavaScript works, let's move on to discussing how to use JavaScript in a website.

How to Add JavaScript to Your Website

Adding JavaScript to your website is easy; you just need to link your JavaScript files from within your HTML files. If you have any experience working with HTML and CSS for web development, then you've already experienced something similar.

Much like adding CSS to your HTML, there is an HTML tag called "script" that allows you to link to JavaScript files so that your code can be used to manipulate the HTML and CSS of your website.

Let's take a look at what the HTML script tag looks like. The following line of code is an example of the script tag and its syntax.

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

The above line connects a file called "yourFile.js" (horrible naming convention, but it serves as an example) to your HTML file connecting the two. This allows you to write your code in a separate file, which keeps your HTML clean and easier to manage. Using the script with the src attribute is also widely considered the best practice, as it keeps your code separate from each other, making it easier to update and change as needed with minimal issues.

The script tag with src isn't the only way to add JavaScript to your site, though let's look at another way. The script tag can also inject JavaScript code directly into your HTML. So let's take a look at that next.

<script type="text/JavaScript">JavaScript code goes here</script>

It is simple enough to complete, and it doesn't look much different from adding JavaScript externally.

Noteworthy caveat: Because the browser handles JavaScript, it is important to consider that not all browsers will support all JavaScript features. Furthermore, not all browsers will even have JavaScript enabled, be sure to plan for that possibility.

Now that you understand how to add JavaScript to a website, check out an example of what JavaScript code looks like below.

JavaScript Example

JavaScript is robust and can be used to perform some awesome things. Regardless of what your design plans are or what you hope to build, there are some rules that JavaScript requires you follow. Next we’ll look at a video discussing the syntax and rules for JavaScript.

Now let's look at a great example of how you can create a simple color changer using a pseudo-random number generator.

/*Function for generating a hex number for new random BG colors*/

function randomBgHex() {
  let randomHex = Math.floor(Math.random() * 900000) + 100000;
  document.querySelector("body").style.backgroundColor = `#${randomHex}`;
} /*end randomBgHex*/

The above code is a great example of how one can create a powerful feature with only a few lines of code. This may look like a lot, so let's start by dissecting this into more manageable chunks of code.

We start by declaring a function named randomBgHex.

function randomBgHex(){}

Then you create a variable called randomHex. And assign it the value of a mathematical equation.

let randomHex = Math.floor(Math.random()*900000) + 100000;

The above code uses the Math object and the .floor() method to return the largest integer less than or equal to a given number. Next, the number gets generated using the .random(), which — without a parameter — returns a number between zero and less than one. So you multiply that result against 900,000 plus 100,000. This equation ensures that the number you get will match the needs of a hexadecimal number.

The value of this equation is then stored in the variable and used to create our colors. The following line of code will target the HTML element and attribute you wish to change and then insert the hex number using a string literal.

document.querySelector('body').style.backgroundColor = `#${randomHex}`;

The first part of the code above selects the body of the HTML and targets the background color. The second part `#${randomHex}` uses a string literal (identified by the backtick ") allows you to concatenate — or join — the # which identifies a hexadecimal number with the value inside of our variable randomHex.

The result of this would equate to something similar to the following.

#236789

The above hexadecimal gives you a lovely somber blue color.

This code as a whole would generate a random color for the background of the HTML body on each page load. This code, at one point, would be considered "Vanilla JavaScript." However, since there is now a library called Vanilla JS, it's better to refer to it as "Standard JS" to avoid confusion.

With that said, it should be noted why the distinction is so important. Programming language libraries use a slightly different syntax than the language for which they were built. So let's look at some examples of JavaScript libraries and the difference between them and the standard code.

JavaScript Libraries

There are several JavaScript libraries out there that can help improve the speed and clarity of your coding efforts. Libraries help keep your code clean and maximize the speed and efficiency of writing your programming code. However, as a result, the syntax often changes, so there is a learning curve for each library.

Let's look at a couple of examples of libraries that you can use in your workflow.

Jquery JavaScript Library

Jquery is the go-to library for JavaScript programming due to its age and flexibility of use. Furthermore, it improves efficiency and adds even more functionality to the programming language by building from its new features. But, first, let's look at how the syntax differs from traditional JavaScript.

$('#overlay').on( "click", '#prev', function(){
   currIdx--;
   if (currIdx < 0) {
      currIdx = 11;
   }
}

This example looks complex, but let's focus on just one point, the outermost function of this code.

$('#overlay').on( "click", '#prev',function(){}

This code is valid Jquery, but without including the Jquery library, this would throw an error if you used it with traditional JS. This code also includes two things worthy of note: the $ selector, a shorthand method for targeting HTML objects. And the .on() method is an event listener that listens for a "click" in the browser window.

Another popular library is known as React. Let's talk about what React is and how it differs from standard JS.

React JavaScript Library

The React library is a popular library created to help facilitate the development of web applications. It is robust and today has a whopping number of open source contributors that add to, test, and maintain the library. It operates differently from most libraries, and it is more complex, but let's look at the syntax just for clarity.

class ShoppingList extends React.Component {
  render() {
    return (
      <div classname="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Bread</li>
          <li>Milk</li>
          <li>Eggs</li>
        </ul>
      </div>
    );
  }
}

As you can see, this is vastly different than your standard JavaScript code, or even Jquery for that matter. In React, you declare your HTML within your JavaScript, and it gets rendered after the code runs, which is different than the standard web development approach.

Many other libraries and Javascript frameworks are available for your workflow, and all have differences in syntax, features, and flexibility. Choosing the right one for you will require some research into these factors and should be considered carefully.

Start learning JavaScript today

This post provides everything you need to know to start your journey into learning JavaScript, including some industries and uses for it. This post only covers an introduction to the language, so learning it is different.

However, learning JavaScript is easy, and there are a lot of resources all over the internet on how you can learn to program with JavaScript. Learning JavaScript does not require understanding web development, but it is probably the easiest way to practice your JavaScript programming skills.

Other ways you can practice include using sites like CodePen that supply all of the software you need to learn and practice your work as a JavaScript developer.