Welcome to the first course in learning javascript! You've made a good choice coming here since javascript is one of the most popular programming languages in the world today. It's used everywhere and not only on websites, but also in windows 10 and in mobile apps. For every web developer today it's a language one just has to know. We'll start by going through what javascript is, and then how to get started learning it.

What is javascript?

For those who doesn't have any idea what javascript is, it can be described as a programming language for the web on the client side. Meaning not on the server side which one easily can think (except nodejs). There you'll find another type of programming like php, ruby and asp.net etc, usually together with some kind of database.

Javascript is a bit different and is instead run directly in the web browser at everyone who's visiting the site. It isn't used for the heavy type of programming like running forums, login systems or handling invoices. Instead it's used to make websites more dynamic, functional and interactive. It's quite the difference which soon will be understood. For example some typical things done with javascript could be form validation, image galleries, animations, chat functions, dropdown menus, popup windows etc. Also to communicate with users and try to give a more smooth experience when filling forms or when some type of data should be loaded in, perhaps from a database. Instead of having to reload the webpage every time data is loaded in, it can instead be done with javascript in the background and the information is presented in a nicer way. This is called Ajax.

If you're sitting here and thinking about learning javascript it's recommended (and is assumed) that you already know the basics of html and css. If not it's fairly easy to learn.

From static websites to web applications

The difference between websites that are only built with html and css and sites built with some kind of programming like javascript, is that they're usually called static websites (those without programming that is). There's information, design, colors, images, links and not so much more than that. It's when you start to involve javascript that websites comes to live, becomes functional and changes from static sites to full blown web applications!

Think about a site like facebook. Everything that makes it feel so smooth with the news flow which is automatically updated with new posts when scrolling down, the chat and commenting functions, photo albums and the like buttons, are all made in javascript.

Get started with the right tools

It's easy to get started and learn javascript. The only thing needed is a normal text editor like notepad to start writing code. It's not really recommended though. What you want is a real code editor and some tips are either Notepad++ or Visual Studio Code. Both are free editors that are easy to get started with. More or less just download and install and they work. What makes them better than the old notepad is they make it easier to code by marking up words with different colors, and gives suggestions for code functions etc.

There are also many more different code editors out there, and just a google search away. Having an editor you like and feel comfortable with is very important. But for now you could just try one out.

The first example in javascript

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<!-- Inline javascript -->
<script>
document.write('Hello World!');
</script>

<!-- External javascript -->
<script src="my-script.js"></script>

</body>
<html>

To get javascript to work on a web page it must either be included directly in the html, or linked in externally in its own file. It can be included anywhere inside the head or body elements. For best performance some say it should be at the end of the body element so the page can be fully loaded in and rendered before javascript starts running. But that only really matters if you have very big scripts and libraries like bootstrap and jQuery included, or we're talking a few milliseconds here. But it's still most common to include it in the body element.

Above is an example on how javascript is included directly (inline) and externally. For inline just place all script inside the "script" tags. For external the script element must be empty, and set the source attribute (src) to the url of your script file. It's allowed to have as many scripts as you want in html.

Usually it's smartest to include all script externally, especially if the website has more than one page (which most do). Then you only need one javascript file which is just linked in on all pages, instead of having to repeat the same code on all pages. Also this lets the web browser cache (and some browsers compile) the file which can be very good for performance.

It's good to know all this. But now when we're just going to learn the language it doesn't really matter. Do what seems easiest and just start coding, and later when making a real project these things can be considered. Some more reading for those who wants before we start getting into everything can be found at: https://en.wikipedia.org/wiki/JavaScript

Try it yourself to learn javascript

  1. Create a html file and add a script tag there, then open up the file in your web browser.
  2. Type: document.write(‘Hello World!'); inside the script tag and see what happens. See how it's done in the example above.
  3. Now change the line to alert(‘Hello World!'); and reload the page.
  4. Easy enough? Then you're ready for the next chapter where we'll introduce statements in javascript.