LetsLearn JavaScript

Overview
Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry before it could be refined. This authoritative book scrapes away these bad features to reveal a subset of JavaScript that's more reliable, readable, and maintainable than the language as a whole-a subset you can use to create truly extensible and efficient code. Considered the JavaScript expert by many people in the development community, author Douglas Crockford identifies the abundance of good ideas that make JavaScript an outstanding object-oriented programming language-ideas such as functions, loose typing, dynamic objects, and an expressive object literal notation. Unfortunately, these good ideas are mixed in with bad and downright awful ideas, like a programming model based on global variables. When Java applets failed, JavaScript became the language of the Web by default, making its popularity almost completely independent of its qualities as a programming language. In JavaScript: The Good Parts, Crockford finally digs through the steaming pile of good intentions and blunders to give you a detailed look at all the genuinely elegant parts of JavaScript, including:
• Syntax
• Objects
• Functions
• Inheritance
• Arrays
• Regular expressions
• Methods
• Style
• Beautiful features

Why JavaScript?

JavaScript is an important language because it is the language of the web browser. Its association with the browser makes it one of the most popular programming languages in the world. At the same time, it is one of the most despised programming languages in the world. The API of the browser, the Document Object Model (DOM) is quite awful, and JavaScript is unfairly blamed. The DOM would be painful to work with in any language. The DOM is poorly specified and inconsistently implemented. This book touches only very lightly on the DOM. I think writing a Good Parts book about the DOM would be extremely challenging.

JavaScript is most despised because it isn't SOME OTHER LANGUAGE. If you are good in SOME OTHER LANGUAGE and you have to program in an environment that only supports JavaScript, then you are forced to use JavaScript, and that is annoying. Most people in that situation don't even bother to learn JavaScript first, and then they are surprised when JavaScript turns out to have significant differences from the SOME OTHER LANGUAGE they would rather be using, and that those differences matter.

The amazing thing about JavaScript is that it is possible to get work done with it without knowing much about the language, or even knowing much about programming. It is a language with enormous expressive power. It is even better when you know what you're doing. Programming is difficult business. It should never be undertaken in ignorance.

Welcome

Welcome to the JB-Web world interactive JavaScript tutorial.

Whether you are an experienced programmer or not, this website is intended for everyone who wishes to learn the JavaScript programming language.

Just click on the chapter you wish to begin from, and follow the instructions. Good luck!

Learn the Basics

• Hello, World!
• Variables and Types
• Arrays
• Manipulating Arrays
• Operators
• Conditions
• Loops
• Objects
• Functions
• Pop-up Boxes
• Callbacks

Hello, World!

---

Welcome to the first tutorial. In this tutorial, you will learn how to write your first line of code.

JavaScript is a very powerful language. It can be used within any browser in the world. On top of that, it can be used to write server-side code using node.js.

When using JavaScript inside the browser, we can change how the page looks like and how it behaves. In this tutorial, we will only focus on learning the language itself, and therefore we will only use one function to print out our results called "console.log".

Exercise

You must print out to the console the sentence "Hello, World!".

CODE

console.log("Goodbye, World!");

OUTPUT

Goodbye, World!

Variables and Types

---

Like almost every dynamic language, JavaScript is a "duck-typed" language, and therefore every variable is defined using the var keyword, and can contain all types of variables.

We can define several types of variables to use in our code:

var myNumber = 3;                   // a number
var myString = "Hello, World!"      // a string
var myBoolean = true;               // a boolean

A few notes about variable types in JavaScript:

• In JavaScript, the Number type can be both a floating-point number and an integer.
• Boolean variables can only be equal to either true or false.

There are two more advanced types in JavaScript. An array, and an object. We will get to them in more advanced tutorials.

var myArray = [];                    // an array
var myObject = {};                  // an object

On top of that, there are two special types called undefined and null.

When a variable is used without first defining a value for it, it is equal to undefined. For example:

var newVariable;
console.log(newVariable); //prints undefined

However, the null value is a different type of value and is used when a variable should be marked as empty. undefined can be used for this purpose, but it should not be used.

var emptyVariable = null;
console.log(emptyVariable);

will print out null

Exercise

You must define the following variables:

1. A number called myNumber which contains the number 4;
2. A string called myString which contains the sentence Variables are great.;
3. A boolean called myBoolean which contains the value false;

CODE

console.log("myNumber is equal to " + myNumber);

console.log("myString is equal to " + myString);

console.log("myBoolean is equal to " + myBoolean);

OUTPUT

myNumber is not defined

Arrays

---

JavaScript can hold an array of variables in an Array object. In JavaScript, an array also functions as a list, a stack, or a queue.

To define an array, either use the brackets notation or the Array object notation:

var myArray = [1, 2, 3];
var theSameArray = new Array(1, 2, 3);

Addressing

We can use the brackets [] operator to address a specific cell in our array. Addressing uses zero-based indices, so for example, in myArray the 2nd member can be addressed with index 1. One of the benefits of using an array data structure is that you have constant time look-up if you already know the index of the element you are trying to access.

console.log(myArray[1]);      // prints out 2

Arrays in JavaScript are sparse, meaning that we can also assign variables to random locations even though previous cells were undefined. For example:

var myArray = []
myArray[3] = "hello"
console.log(myArray);

Will print out:

[undefined, undefined, undefined, "hello"]

Array Elements

Because JavaScript Arrays are just special kinds of objects, you can have elements of different types stored together in the same array. The example below is an array with a string, a number, and an empty object.

var myArray = ["string", 10, {}]

Exercise

You must define an array with the following three variables:

1. A string that has the value of "What is the meaning of life?"
2. A number which has a value of 42
3. A boolean which has a value of true

Code

var myArray = [true, "What is the meaning of life?"];

// TODO: write your code here:

console.log(myArray[0]);

console.log(myArray[1]);

Output

true

What is the meaning of life?