Javascript

Reference
https://developer.mozilla.org/it/docs/Web/JavaScript

Syntax summary

Data Types are dynamic and assigned on the fly

  • Number: integer or float
  • String
  • Boolean
  • Undefined: variable without a data yet
  • Null
var name = 'Giuseppe';
console.log(name);
var lastName = 'Rossi';
console.log(lastName);
var fullAge = true;

it is possible change the type of a variable changing the value

age = 30;
age = thirty;

Ask a value using a dialog window and show an alert

var lastname = prompt('what is your last name');
console.log(lastname);

alert("Alert message");

IF ELSE with string boolean comparison

var name = 'giuseppe';
var isMarried = 'no';
if (isMarried === 'yes') {
  console.log(name+ ' is maried');
} else {
  console.log (name + ' will hopefully soon');
}

isMarried = true ;
if (isMarried) {
  console.log(name+ ' is maried');
} else {
  console.log (name + ' will hopefully soon');
}

with double = javascript will convert from integer to string so the value will be true. With triple instead will give back false

if (23 == "23") {
  console.log('something to print');
}

operator

age = 25;
if (age > 20 && age < 30) {
  console.log ('johh is a youg man');
} else {
  console.log ('john is a man');
}

switch case
job = 'driver';
switch (job) {
  case 'teacher':
    console.log('john is a teacher');
    break;
  case 'driver':
    console.log('john is a driver');
    break;
  default:
    console.log ('john does something else');
}

declare and use a function

function calculateAge(yearOfBirth) {
  var age = 2017 - yearOfBirth ;
  return age;
}

var ageJohn = calculateAge (1983);
console.log(ageJohn)

statement and expression

//statement not produce a value
function someFun(par) {
  //code
}
//expression produce a value
var someFun = function (par) {
  //code
}

arrays

var names = ['giuseppe', 'rodolfo', 'lorenza'];
var years = new Array (1983,1985,1984);
console.log(names[0]);
names[1] = 'Beniamino';

//different data types in the same array
var giuseppe = ['giuseppe', 'borgese', 'developer', 1983, true];

//add at the end another element
giusppe.push('red');
//add an element at the beginning of the array
giuseppe.unshift('Mr.');
//remove the last element 
giuseppe.pop();
//remove the first element
giuseppe.shift();
//return the position fo the element passed
giuseppe.indexOf('borgese');

if (giuseppe.indexOf('developer') === -1) {
  console.log('Giuseppe is not a developer')
}

objects

var giuseppe = {
  name: 'Giuseppe',
  lastname: 'Borgese',
  yearOfbirth: 1983,
  job: 'developer',
  isMaried: true
};
console.log(giuseppe.job);
console.log(giuseppe['lastname']);
var x = 'job';
console.log(giuseppe[x]);
giuseppe.lastname = 'Rossi';
giuseppe['job'] = 'baker';

//you can declare an empyt object and fill up later
var pina = new Object();
pina.name = 'Giuseppina' ;

functions inside an object
var giuseppe = {
  name: 'Giuseppe',
  lastname: 'Borgese',
  yearOfbirth: 1983,
  job: 'developer',
  isMaried: true,
  calculateAge: function() {
    this.age = 2017 - this.yearOfbirth;
  }
};
giuseppe.calculateAge()
console.log(giuseppe.age);

cycle for and while

for (var i = 0 ; i < 10 ; i++) {
  console.log(i);
}

var names = ['Giuseppe', 'Salvatore', 'pippo', 'pluto'];

for (var i=0; i< names.length ; i++) {
  console.log(names[i]);
}

console.log (names.length);
var i = 0;
while ( i < names.length) {
  console.log(names[i]);
  i++;
  if ( i === 3) {
    break; //or continue if you need
  }
}

Scope

  • A new scope is create everyt time you create a new function
  • If javascript doesn't find the variable in its scope it goes to the upper level
  • When is called to the main code the this variable is the window object
  • When is called from a regular function the this object is again the window object
  • When you call from a function inside an object the this refer to the object
  • anonymous function, it is a function that can't have a name and can't be used in another place
document.querySelector('.btn-roll').addEventListener('click', function() {
    // content of the function
});

Event reference https://developer.mozilla.org/en-US/docs/Web/Events

Modify the DOM

click on the button

<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>

document.querySelector('.btn-roll').addEventListener('click', function() {
   //content of the action
}

change the content of
<div class="player-current-score" id="current-0">11</div>
<div class="player-current-score" id="current-1">0</div>
document.querySelector('#current-' + activePlayer).textContent = roundScore;

display and hide and object

<img src="dice-5.png" alt="Dice" class="dice" id="dice-1">
<img src="dice-5.png" alt="Dice" class="dice" id="dice-2">

        var diceDOM = document.querySelector('.dice');
        diceDOM.style.display = 'block';
        diceDOM.src = 'dice-' + dice + '.png';

Objects

Everything is an object

Primitives ARE NOT: numbers, strings, booleans, undefined, null
Everything else ARE: arrays, functions, objects, dates, wrappers for numbers/strings/boolenas

var Person = function (name, yearOfBirth, job) {
  this.name = name;
  this.yearOfBirth = yearOfBirth;
  this.job = job;
}
Person.prototype.calculateAge = function() {
  console.log(2017-this.yearOfBirth);
}
//this willl replace all the name
Person.prototype.lastName = 'Smith';

var giuseppe = new Person ('Giuseppe', 1990, 'developer');
// what the new operator does is point the this not to the main windows but to the giuseppe object
giuseppe.calculateAge();

var pina = new Person ('Giuseppina', 1976, 'employ');
var marco = new Person ('Marcp', 1992, 'graphical');
Salvo diversa indicazione, il contenuto di questa pagina è sotto licenza Creative Commons Attribution-ShareAlike 3.0 License