Getting started with JavaScript

Do not be scared of Javascript, starting might be challenging but you can also have a lot of fun! All you need is time to play with the console. Following baby steps and trying out things you want to see in the browser will make you have a fun time while understanding the logic of JavaScript.

Written by Edalí Cárdenas / Fellow at DCI

September, 2018.

Illustration by Gabi Oliveira / Fellow at DCI

I am sure that you’ve heard many people saying that learning Javascript is kind of difficult and scary. Before getting started with Javascript I wasn’t worried at all because when I like doing something I know that I can learn it easily.

Just to give a little of context, I joined the web development course at DCI with no prior training in programming. Therefore, I had no notion about functions and methods at all. Just now, after few months in the web development, I feel I am starting to get it. My advice is: if you want to be a master in coding, practice everyday in your free time, grab some snacks and CODE, CODE, CODE as much as your fingers and eyes can. Find and read the right documentation and do as many tutorials for creating all kind of websites and simple apps with different features, e.g. a clone of Instagram or Tinder ;)

Only in this way, you will get experience, you will face problems and you’ll have to figure out how to solve them. Additionally, once you complete those small projects, you’ll have something to present in your portfolio.

In my point of view, one of the first challenges is to understand the syntax of the language. There are many ways to code one thing. Also it takes a while to train your mind to use the programming logic for solving a problem. Sometimes, a bit of confusion can be experienced thinking how to code something without really understanding the syntax.

What we have learned in class is that before trying to code anything, we need to know what is the expected output and create an algorithm to get there in the simplest way. Only after that, we start coding.

I realized that in class I have been getting the pieces of the programming puzzle little by little. However, just trying things on my own made me able to write more complex code. Before going deep into Javascript, I made a list with the basics that anyone needs to understand in the first stage of learning Javascript.

First of all, what is JavaScript? “JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.x. having complex animations, clickable buttons, popup menus, etc.). There are also more advanced server side versions of JavaScript” (reference from MDN).

• Variables: are containers for values. You declare a variable with the var keyword, followed by the name you want to call it:

var firstVariable;

Note that you can declare a variable without defining or assigning its value.To assign a value, you add an equal symbol and the value after declaring the variable.

var firstVariable = “This is an example”;

The values assigned to the variables can be different data types such as string, number, boolean, array and object. Variables can be reassigned. I recommend to read more about variables in MDN.

• JavaScript comments: You can write single line comments starting with //. In this way, you can add comments which are helpful to explain JavaScript code and make it more readable. In addition, they can be used to prevent execution, when testing the code.
• Arithmetic Operators: are mathematical symbols which produce a result based on two values (or variables).

a.Addition to sum or put two strings together. For example:

console.log(7 + 3); // it will print out 10

console.log(‘Hello ’ + ‘world’); // it will print out ‘Hello world’

b. Subtraction, Multiplication, Division just use the arithmetic operators as usual in math.

7–3;

7 * 3;

7 / 3;

c. Equality does a test to see if two values are equal to one another and returns a true/false (Boolean) result.

For example:

var myVariable = 1;

myVariable === 8;

This would return: false.

d. Not or Does-not-equal: it returns the logically opposite value of what it precedes. In the example below, we are testing if myVariable is not equal to 7. This returns false because myVariable is equal to 7.

var myVariable = 7;

myVariable !== 7;

• Conditionals: are code structures which allow to test if an expression returns true or not, running alternative code revealed by its result. A very basic form of conditionals is a if … else statement.

var iceCream = ‘caramel’;
if (iceCream === ‘caramel’) {
console.log(‘Awesome, I love caramel ice cream!’);
} else {
console.log(‘Oh, I wish this would be caramel ice cream…’);
}

• Functions: are a way of packaging functionality that you want to reuse. When you need the procedure you can call a function with the function name, instead of rewriting the entire code each time. For example:

function multiply(num1,num2) {
var result = num1 * num2;
return result;
}

console.log(multiply(7,3));

• Events: are code structures which listen for things happening in browser, running code in response. They add interactive features to the websites. A simple example is the click event, which makes something happen when you click on a button with your mouse.

Hope this gave you a general view of the basics of Javascript. I will get more deeply into them in future blog posts. Do not miss them!