The Basics

How Do Websites Work?

A website is basically just a text file that is read by and displayed in a browser. Although websites can be very large and complex, they are comprised of three pieces of code:

HTML stands for HyperText Markup Language, and it defines the content, layout, and structure of web pages.

CSS

A Cascading Style Sheet (CSS) defines the appearance of HTML elements. CSS controls:

  • Color
  • Size
  • Position
  • Font
  • Transparency
  • Animations

As previously mentioned, JavaScript is the code that adds interactive functions to web pages. Unlike HTML and CSS, JavaScript is a programming language. So while HTML and CSS allow us to dictate the content and appearance of a web page, JavaScript is used to accept input and execute instructions.

What is Programming?

If you're not familiar with programming, it's basically the process of writing a series of instructions for a computer to carry out.

Computers don't understand our language; they only speak binary (0s and 1s). So when we want to tell a computer to do something, we have to speak to it in a way that it can understand.

Fortunately, we don't have to write instructions in binary (although at one time this was true). A programming language is an intermediary between binary and English. This allows us to use words and symbols we understand. This is a form of abstraction (hiding complexities behind the scenes).

The abstract code that we write is then translated into machine code (binary) so that the computer can understand it. This process is called compiling. Programming languages that are highly abstracted are known as high-level languages (PHP, JavaScript). By contrast, low-level languages use little abstraction (assembly, C).

There are many kinds of programming languages, each with its own syntax (keywords, symbols, and rules). Each language includes or emphasizes a certain set of features, which defines its paradigm (style).

Here are a few examples of programming paradigms:

  • Procedural: Also called structured programming, describes a program as a series of steps.
  • Functional: Uses mathematical functions to compute values.
  • Object-oriented: Groups data together as objects.
  • Event-driven: Program flow is controlled by events such as mouse clicks or timers.

Although we won't be covering all of them in detail, the process of programming could be described in five steps:

  • Identifying the problem: Knowing the specific purpose of the program
  • Designing the program: Planning the program flow and creating algorithms (series of steps) to achieve the desired behavior
  • Writing the code: Translating the design into the chosen programming language
  • Testing the program: Identifying and correcting errors in the code
  • Maintaining and documenting: Updating the code and creating instructions for using the program

What Kind of Language is JavaScript?

JavaScript is a high-level language, which means that the code is highly abstracted from binary instructions.

JavaScript is a multi-paradigm language, which means that it includes features from many different styles of programming.

There are also many extensions (libraries) available for JavaScript available online, which give programmers the power to easily implement complex features. Some examples of such libraries include:

  • jQuery: Accessing HTML elements
  • EaselJS: Creating 2D graphics and animations
  • Three.js: Rendering 3D graphics
  • AngularJS: Data binding

Programming has traditionally been done on a computer using an integrated development environment (IDE), which is a special program for writing code. The code is then compiled into an executable file and usually runs on only one type of machine (PC, iPhone, BlackBerry).

JavaScript, by contrast, is interpreted (not compiled) by web browsers like Firefox and Google Chrome. This means that a program written in JavaScript can run on my device that has a web browser.

During this tutorial our "environment" will be a text editor, and our "compiler" will be a web browser.

Before proceeding to the next lesson, it's a good idea to make sure you have have a modern browser like Firefox or Google Chrome installed, as well as a good text editor such as Notepad++ or Sublime Text.

Continue to Next Lesson »