Javascript Basics

JavaScript is a programming language that adds dynamic interactivity to millions of sites.

Javascript started life as a simple language intended to add a few interactive features to websites. However, it’s grown to be one of the world’s most popular programming languages and is used by web applications such as Google Maps, Gmail & Facebook.

With Javascript, you can add interactivity web applications such as animating pages as you scroll, making forms more engaging to fill out, and even making games. Javascript isn’t just for the front-end it can be used on servers with frameworks such as Node.JS. Its a favourite of some big players such as Paypal & Netflix to display some parts of their websites. It’s even made its way desktop applications like Photoshop, Acrobat and After effects. These are just a handful of things Javascript it capable of there’s so much more.

The good to knows in Javascript

Just like any other programming language or language Javascript has its own vocabulary & grammar this is called syntax. A programming language syntax is made up of different commands, special words & punctuation thats used to build a program. Each programming language has its own syntax just like you would find learning English, Spanish, or Japanese.

Javascript is not Java. This is something that even confused me in my early development days. Despite sounding alike these are two separate programming languages that were caused by some non-technical decisions made in the early days of the web.

Let’s write some basic Javascript.

alert('Hello World');

document.write('My name is Gary');

prompt('What is your name');

What we’ve written here is a Javascript Program. A program is a set of statements that run after the other. Each statement must complete before the next statements run. Statements are like a sentence they run or read one after another and just as sentences end with a full stop Javascript statements end in a semicolon.

You write programs by writing multiple statements just as you would write a book using sentences. This program is made of three statements. The Alert is a method that’s built into the browser object. It opens a dialogue box and displays a message. The document.write is another method that writes a message to the page and the prompt method opens a dialog box requesting information from the user.

Adding Javascript to a Webpage

Can you guess what the program does? If not you can run this program on your own. The quickest & easiest way to try out some javascript programming is to use a web browser. Browers perform lots of different functions, for example, they read & display HTML, you can style that HTML with CSS and then add interactivity by adding Javascript. Every browser has a Javascript interpreter built into it so it can understand what to do with Javascript statements. It’s very common practice to add all your Javascript code into a file that’s separate from the actual HTML. See the sample webpage below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
  <title>Let's Make Something</title>
 </head>
<body>
  <script src="random.js"></script> 
</body>
</html>

To link to a Javascript file we use the script tag with the src attribute pointing to where our file lives in our repository. One thing you can’t do when linking to a Javascript file is to place Javascript into the same script tags. You must have one script tag per linked file and another tag for any programming. It’s okay to have more than one script tag on a page. You will usually find script tags placed in either the head of the page just before the closing head tag or before the closing body tag. The main advantage of placing it at the bottom is that it lets the browser load and display HTML and CSS quickly before running any Javascript.

Debugging Javascript

When you start writing more complex programs it’s very easy to make a mistake. Fortunately, most all browsers provide tools to help you find mistakes. The best debugging tool is the Javascript Console in Google Chrome, you can open the console in from the settings menu, or by using the keyboard shortcut Ctrl+Shift+J on Windows or Cmd+Option+J on Macs.

Wrapping Up

Hopefully, this gives you a small insight it the world’s most popular programming language. You now know that Javascript Drives Websites, Web Servers & even desktop applications. You can even begin to write javascript programs and debug your mistakes. This is only a basics introduction there is much more to learn.