Introduction

Every programming language has got some sort of basics attached to it that develop a good foundation on the language, and JavaScript isn't any behind.

In this chapter we shall look into some of the basics of JavaScript, including things like input and output, variables, comments, statements and expressions. Let's go!

Statements and expressions

Whatever you write in JavaScript falls under the category of either statements or expressions. So what are they??

A statement is simply a bunch of code executed by the interpreter at a time

Although not neccessary, statements are complete commands to the interpreter like declaring variables, creating conditionals etc. They are executed one after another, and include stuff like if, switch, var etc.

An expression is simply an evaluation or assignment to a final value which can be a number, string, boolean or whatever.

Anything that evaluates to a value is, in effect, an expression. Examples include 5 + 5 which evaluates to 10, 5 / 5 which evaluates to 1 and so on and so forth.

A JS program, more than often will have multiple statements and multiple expressions. A statement can contain an expression, but an expression can't contain a statement. Let's just go on to clear all this confusion.

Here we've got two JS statements:

var x = 10; // statement 1
document.write("Hello"); // statement 2

Notice how the statements are coming on new lines. Therefore another way to think of statements is that they come on new lines. However this doesn't always have to be the case.

Multiple statements can span one single line too:

var x = 10;document.write("Hello");

In this case they will be seperated by semi-colons ;. So the other way to think of JS statements is that they are seperated by semi-colons ;. And hence we can collectively say that:

A statement has a new line or a semi-colon at its end, before it can have another statement following it

Code readability

Programs are parsed and executed by machines as we all know, however written and read by humans. Computers can read complex code and messy code however we can't.

We need clean and neatly layed out code which can suffice us in reading it and understanding it easily. No one is able to understand badly cluttered code, even not the developer himself. This is just what code readability guidelines talk about.

Starting at this very stage you should try your level best to write code that is easily readable and understandable by other developers. Part of this involves spacing and indenting out your code.

For instance, consider the code below which is not readable at all:

var x=10;if(x===10){alert("All set")}

Unlike the interpreter and the machine, you'll definitely have a hard time understanding this code. However by just adding spacing and new lines within this same code we can make it way more readable as shown below:

var x = 10;
if (x === 10) {
    alert("All set");
}

Output stuff

Whenever we learn a new language we usually, before anything, want to learn how to output or print something in it. Talking about JavaScript there are multiple of ways to output stuff and even multiple of places to output them to. Let's take a look.

document.write()

The document.write() method is the simplest way to write something to an HTML page. Just write what you want to inside the ( ) brackets inside a pair of " " quotes.

We'll learn more about methods in the Object unit.
document.write("<h1>Hello</h1>");
Hello

alert()

Apart from writing stuff to the HTML document, we can also make alerts to the user. This can be accomplished using alert().

Once again, whatever text your want to alert, goes inside a pair of quotes.

The quotes can be single '' or double "". We'll learn more to this in the Strings unit.

Following we make an alert saying "Hello" to the user:

alert("Hello");

Live Example

console.log()

The console.log() method gives us another way to write stuff, but this time not the document window, but rather to the browser's console.

The console is a powerful place. It allows us to interact with output values on-the-go, especially objects.

Although the potential of the console can be truly understood only once we know about various JavaScript features and concepts, it's not bad to get some introduction to it right now.

To see how to open the console check out the console section in JavaScript Get Started chapter.
console.log("Hello");

From this point on we shall display the console as follows:

Hello

HTML DOM

This way of outputting stuff in JavaScript is by far the most common and most involved - we can't work with it right when we are beginning JavaScript. Likewise we'll see it later in the HTML DOM unit.

Input

Besides output, we also often need our programs to collect user input which we can process for further uses. In JavaScript we can take user input in the following ways.

prompt()

The prompt() function creates a browser prompt with the supplied text, and then returns the value entered by the user.

Let's incorporate it with the output methods shown above.

document.write(prompt("Write something"));
// the text "Write something" is shown in the prompt

What we are doing over here is outputting whatever the user writes into the prompt box - we've said this before that prompt() returns the value entered by the user i.e it can be stored in a variable or directly passed to a function.

Live Example

You'll learn more about variables and functions later.

confirm()

confirm() works just like prompt(), by showing the given text, except for that it can't except a user crafted input - the user can only choose from two buttons which return either true or false.

document.write(confirm("A confirm box"));
// the text "A confirm box" is shown in the prompt
As the name implies, confirm() can be used to confirm if the user wants to perform an action.

HTML DOM and Events

Using JavaScript's HTML DOM and Events API we can do literally a lot, and one of that is collecting user input. We will explore all the concepts in HTML DOM and even Events later in this course.

In conclusion

With the basics of the basics dealt with, we are getting ourselves in good form to learn new and complicated stuff and discover new avenues in JavaScript.

In the coming chapters we will get into a bit more detail of some concepts shown here and from there to even more details. Programming is all about learning and getting it done!