An Introduction To JavaScript

Any web developer will agree that JavaScript is essential to learn when building a website. Take a look at our JavaScript introduction to get a grasp on the programming language.
JavaScript is a powerful programming language that is used on the front end of most of the websites you access every single day. It makes a website interactive and adds functionality, creating a much more satisfying user experience. When you click a button on a website or see something move, there’s a good chance JavaScript was used to make that happen.
We can’t fit a six-week JavaScript learning program into one blog post, but we can at least introduce the web language so you can be on your way to writing JavaScript code in no time!
How is JavaScript different from HTML and CSS?
We’ve mentioned in previous blog posts that HTML and CSS are both essential to building websites, but JavaScript is a bit more in-depth than these. JavaScript is more of a programming language in the sense that it uses traditional coding concepts like variables and functions to enhance the performance of the language. Although it’s more difficult to learn, JavaScript is a necessity to explore since it adds so much more to a website than just the static output of HTML and CSS.
You can think of HTML as the structure of the site, CSS the look and the feel, and JavaScript the functionality and interactivity of a website. All three are used on the front end of a website, but for different purposes.
How does JavaScript differ from other programming languages like Java or C?
JavaScript is actually similar to many programming languages as far as syntax goes, but for the most part JavaScript is run on the client side of a website, meaning it runs in the user’s browser rather than on the web server. This means the user is interacting directly with the JavaScript, i.e. clicking on buttons, entering information into a form, etc.
Complex websites will usually use some kind of server side programming language as well to create web applications that a visitor uses, but might not necessarily see what’s going on behind the scenes, e.g. a database that keeps track of who has visited the website. Although JavaScript can be used for this, it’s used primarily on the front end of a website alongside the HTML and CSS.
What can you do with JavaScript?
As we mentioned before, there is a broad range of enhancements you can accomplish with JavaScript. Some of the basics you can start with are creating buttons and responses to clicks, quizzes and forms, and image carousel galleries. As your JavaScript skills progress, you can create animated 3D graphics and games and even fully-functioning database applications!
Really, the possibilities are endless once you start exploring all that JavaScript has to offer!
Basics of JavaScript
JavaScript code is very different from HTML or CSS. Syntactically it looks more like programming languages such as C or Java. (Note that JavaScript and Java are entirely unrelated other than similar naming conventions and basic syntax).
To demonstrate a few basic JavaScript principles, here is an example from the Mozilla Developer page:
Hello World

1. Create a .js file called main.js. This will be separate from your .html and .css files. Save this in a folder titled scripts.
2. In your index.html file (this should be your home html file), write <script src=”scripts/main.js“></script> right before the closing </body> tag. This will link your index.html file with your newly created JavaScript file.
3. Type the following code in your main.js file:

      var myHeading = document.querySelector(‘h1’);
      myHeading.textContent = ‘Hello world!’;

4. Once everything is saved, you should be able to run those files in your browser and see something like this:

Just like that, you’ve included JavaScript on your website!
There is obviously much more to JavaScript than just displaying a header that says “Hello World!”. We suggest visiting the Mozilla Developers JavaScript Basics page to learn a few more basic JavaScript principles, and then start applying some of the things you learn. Codecademy and Udemy are both great resources you can use for step-by-step instructions on learning JavaScript.
Once you start feeling comfortable, turn a boring static website into a fully interactive website by adding a few JavaScript features!

WestHost offers cheap web hosting for developers. Boost the websites you build with our shared, cloud and dedicated web hosting packages!