Introduction to JavaScript

Go back to JavaScript Index

What is JavaScript?

JavaScript is a programming language that makes it possible to implement complex things on websites.

Nice to know...

  • JavaScript is an interpreted programming language which means that it is understood by the browser.
  • JavaScript operates on the client side which means that JavaScript programs run immediately on the users computer.

The connection between HTML, CSS and JavaScript

HTML is marking up the content and helps create structure and CSS styles the content changing the layout and adding a certain look and feel. JavaScript changes the behaviour of the site - how the site reacts when the user interacts with it.

Take a look at the following examples that show the diffence:

HTML

1.0 | HTML

Figure 1.0 shows a button without any styling what so ever.

With CSS we can change the styling of the button so that it fits into our vision for the site:

HTML og CSS

1.1 | HTML and CSS

We have a ton of styling options, and we can even add animations or transitions to the button if we wanted.

So what can we do with JavaScript?

HTML, CSS and JavaScript

1.2 | HTML, CSS and JavaScript

Click on the button and see what happens.

- we will get back to the example in a bit. Just be aware that this is only a simple example of what is possible with JavaScript.

So what can we do with JavaScript?

As you saw in the previous example, we can use JavaScript to change the colors on the page, but that is far from all that we can do.

With JavaScript, we can

  • ... remove elements and style instructions
  • ... add elements and style instructions
  • ... change elements and style instructions
  • ... react on events (mouse clicks, key press, etc)
  • ... animate
  • ... repeat code blocks
  • ... and so much more!

So what actually happened in the example above?

Tools

To start programming in JavaScript, we need the following tools:

  • A code editor (e.g. Adobe Dreamweaver, Atom or SublimeText)
  • A browser (Read: Chrome)
  • An open mindset

Next up

Let's dive into the world of JavaScript!

Next up: Introduction to the console