Odoo CMS - a big picture

Javascript for dummies

Learning the basics of Javascript

Mercedes Scenna

JS for interactivity

Javascript runs side by side with HTML and CSS, it can be added to any web page through a script tag, it being cointained directly (internal), via link to an external source, or inline in your HTML (which is not recomended).

Internal: inside a script element.

    alert("Hello, world.");

External: inside a script element.

<script src="js/script.js">

Inline, and again NOT ideal.

<a href="some.html" onclick="alert ('Don't do it!')">Click me </a>

Variables and Data

You can name your variables anything you want, but it should be a good, referencial name. Think of it as boxes were you keep stuff, the name should help you recognize the content. Every variable has a name and a value, there are two processes when creating a variable: declaration and initialization. Once created you can set its value.

var surname = "Smith";

Declaration: declaring a variable to exist. Using the var keyword followed by a variable's name.

Initilization: to give a value to the variablefor the first time. Each variable is initilized once.

Once the variable has been declared, you can chage the value as many time as needed, but since it's already declared, you only need the name without the var keyword. This is called Assignment.

Sums with Javascript

Doing Maths and using variables is much easier. 

var apples = 5, pears = 10;
var PiecesOfFruit = apples + pears;
var PiecesPerPerson = PiecesOfFruit/3;

Math operations also have their precedence. Add (+), substract (-), multiply (*) and divide (/) can be used for sums, and are called operators. They are worked out in a specific order: precedence

(10+2)/2 + 4*2
12/2 + 8
6 + 8


Comparing values in order to make decisions, the outcome will be either true or false. This kind of data is called boolean.

100 === 100 -> true
123 !== 321 -> true
'10' === 10 -> false
10 > 5  -> true
20.4 < 20.2  -> false


Chosing to execute one piece of code or another, depending on the comparison requires a conditional. The commonly used: if.
If some logic (the condition) is true, execute this block of code. That is basically the way it works.
You could also supply more code to add a condition when the outcome is not true: if-else.

if (10 === 10){
    // run this code

The code between the { ... } is called a block, and is linked to the 'if' statement. It will run if the condition is true. If the condition is not true, then the block will be ignored.

if (10 === 10){
    // run this code
}else {
   // run a different code


The most common ones are while and for loops. They will run until the cnodition is no longer true or until you froce them to stop.

var i=1;
while (i<10){
   alert (i);

for (var i=1; i<10; i+1){
   alert (i);


They have properties and abilities, its a collection of named properties and methods - a function. It can be stored in a variable, and properties and methods can be accessed through dot syntax:

var Alien = {
planet: "Mars",
age: 150
talk: function(){alert("Hello planet Earth");}

Aliens planet and age are properties, variables within an objects. Talk is a property that holds a method - a function.

Alien.planet -> Mars
Alien.age -> 150
Alien.talk -> produces an alert


They are lists of any kind of data. Each item has a number representing an order, called index. Indexs can be used to retrieve elements from the array. The first one will get the number '0' and the last one will get one less of the length of the array.

var emptyArray = [];
var furniture = ['Table', 'Chair', 'Sofa'];

Using push and pop you can add or remove elements from the end of the array.

furniture.push ('Fridge');
furniture.pop (1); // We remove 'Chair' from the list
furniture [0];  -> Table
furniture [2];  -> Fridge


A way of manipulating the structure and styling of an HTML is by the Document Object Model. It represents the page as the browsers sees it, and allows the developer to alter it with Javascript. For accessing the DOM in Javascript, you have to use the Document Object. 

For example: 

// Getting an element by Id with document.getElementById
var pageHeadline = document.getElementById 

Other ways are getting an element by Tag Name like an a, ul or li will return an array of the DOM as a node list. Getting an element by Class Name will also return an array but you specify a class name to be matched. For newer browsers getting elements by CSS selector can be very useful to change stylings.

// document.querySelector 
var buttons = document.querySelector (.btn); 

This are some basic contents that might help when starting with Javascript. All examples can be typed and tried on the console of your browser (Inspect element on the menu when you left click on your browser). The arrows -> represent the outcome that you will see on the console. 
To improve the crossbrowser troubles, there is a JQuery library that can be added as an external link to your website, so you don't need to worry about how your Javascript code will perform. Once you feel more comfortable with it you can check some basic plugins to get some ideas on how to implement it.