First Steps with JavaScript

Where Java came from?

 JavaScript was developed by Brendan Eich, he was working for Netscape (one of the first web browsers) in the 90’s.
Now, JavaScript is, if I’m not mistaken, one of the most used programming languages in the world. It is the kind of the official starting point after you have mastered HTML5and CSS3 in general. First Steps with JavaScript will give you a glimpse of what you need in order to break the ice of programming in your browser.

Taking off
To get started you can write embedded code inside script tags right before the closing body tag. It gets executed and will work just fine. The other way is to link to an external file, for ex. main.js to your index.html page.

Open up your console
The basics can be learnt in the console, right down below your browser and use it as a playground to have immediate feedback when trowing some commands. In Chrome, go to View – Developer – JavaScript Console.

When I type in double forward slashes (//), it means it’s a comment and will not be part of a JavaScript command.

To declare a variable with a string value of “Hello, World!”, we do this:
var message = “Hello, World!”; //I am storing the string inside the message variable

SEE more @

A string is a set of characters inside quotation marks.

A variable can also store numbers which are called integers, if you remember a little bit of school math. Press enter after you finished with a command. It’s like printing out the outcome or output in real time.

var a = 25;

var b = 75;

In here, we clearly see how we grab both values to get the result in the variable sum.

var sum = a + b;

Building up JavaScript commands

We can concatenate strings with integers in the following command example:

var name = “Dani”;

var age = 25;

var myMessage = “My name is ” + name + ” and I am ” + age + ” years old.”;

>span class=”s2″>My name is Dani and I am 25 years old.

Yay! Your first JavaScript concatenated sentence. In here, we use plus signs to interpolate or substitute a variable in between strings.

JavaScript Types

One important thing you must understand is how to know how to handle types. These are a few to get your feet wet:





You know the first two, Floats are decimals like, 2.14, 19.5, etc.

Now what are the Boolean types? These are simply, true or false. Pay attention how I define the variables to give them a sense of what they mean. A couple of examples:

var isYoung = true;

var isGateOpen = false;

They can be used to inquiry about a state of a variable in a condition block and act accordingly.

A condition block is like an intersection of streets, like a y-intersection, where you need to decide which path to continue in order to arrive to a final destination or in this case, the result. This is the If-Else block.

If-Else Block

Sometimes we need to ask for certain conditions before to act or print out a result or an operation. Do this, otherwise do that. Let’s work this out with the If-Else condition block.
As you can see, this will clearly evaluate to true until we manually change the value of the variable.

var kinderAge = 5;

if (kinderAge >= 2 ) {

//prints out

console.log(“He is ready to start kindergarten this fall!”);

}else {

//not ready yet

console.log(“School can wait a couple of years”);


While Loop

The While loop can be used to “loop” around a condition while it’s true. When the condition becomes false, we exit off the loop. For example, while it’s sunny, let’s play outside. Another ex. let the counter keep counting down until we reach zero. Always give a while loop an exit clause or change of state – Be very careful when using loops not to fall into an infinite loop that can crash your machine!

var number = 10;

while (number >= 0 ) {

//run the code block while the condition evaluates to true


number = number – 1;


Finally, let’s code a real problem by using some commands we’ve seen today.

Your first program – School Buses in Town

A school district have 100 school buses in total, some of them are operational and some are not in service. We’d like to inform the city about the schedule and what’s their operational state. These will be printed out in one sentence. Let’s get to work!

var busesOperational = 75;

var totalBuses = 100;

while (…) {

//run block


Link to video Oshawa SEO Youtube

Leave a Reply

Your email address will not be published. Required fields are marked *