/basic_js

Basics Vanilla Javascript

Basic JS

Variables

You can write var with letters, numbers, underscores and dollar sign, but the first sign had to be a letter or dollar sign.

// Examples name of vars
var n2_0 = 'red';
var myNum = 30;
var &width = 300;

// type number
var i = 35;

// type string
var i = 'nice var';

// Other types
let thisThing = 'local variable';
const thatThing = 'contant variable';
globalThing = 'this is a global variable';

Dom Manipulation

Handled HTML Elements

// ID
document.getElementById("nameOfID");
// TAG HTML
document.getElementsByTagName("p");
// CLASS CSS
document.getElementsByClassName("nameOfClass");

Elements of document

// HTML
document.doctype
// BODY
document.body
// TITLE'S DOM
document.title
// ALL IMAGES'S DOM
document.images
// ALL LINKS'S DOM
document.links
// ALL SCRIPTS'S DOM
document.scripts
// URL
document.URL
// DOMAIN
document.domain

Style

**Apply propeties css by js ** element + style + propertie css + value css

document.body.style.background = "red";

Functions

Anonymous function ==> Auto-execute javascript functions AND call them later

(function(){

// here your functions auto-executed

}());

Closures

Arrays

Multiple values in one var. Arrays Tutorial 

// Array
var colors = ['red', 'blue' 'purple']

Position of a element in array

// Choose purple element of this array
var colors = ['red', 'blue' 'purple'];
colors[2];

Change value of a element of array

// Purple will be green
var colors = ['red', 'blue' 'purple'];
colors[2] = 'green';

How many values are in an Array

// length propertie
var colors = ['red', 'blue', 'purple', 'cyan', 'skyblue'];
colors.length;

Show the inverse values of an Array

// reverse propertie
var colors = ['red', 'blue', 'purple', 'cyan', 'skyblue'];
colors.reverse();

Loops

Repite acctions

The FOR loop

// Repeat x times an action
for (var i=0; i<10; i++ ){
   console.log('this time is ' + i);
};
// Execute a provided function once per array element.
var funArray = [11, 27, 38, 42, 57];
for (var i=0; i < funArray.length; i++ ){
   console.log(funArray[i]);
};

The While loop

// Repeat an action while a condition
var i = 0; 
while ( i < 10) { 
   console.log(i++)
}

The forEach loop

// Execute a provided function once per array element.
var funArray = [11, 27, 38, 42, 57];
funArray.forEach( function(i) {
   console.log(i);
});

Conditionals

Conditionals power

if

// If it's equal
var i = 2;
if(i == 2){
console.log('yes,' +i+ ' is equal 2');
}
// If it's not equal
var i = 2;
if(i != 4){
console.log('You are right,' +i+ ' is not equal 4');
};

if else

// If it's not equal
var i = 4;
if(i != 4){
  console.log('You are right, ' +i+ ' is not equal 4');
} else {
  console.log('You are wrong, ' +i+ ' is equal 4');
};
// If X is not equal or more than X
var i = 3;
if(i != 4 || i < 4){
  console.log('Ummm, ' +i+ ' is not equal 4 or it is more than 4');
} else {
  console.log('Ummm, ' +i+ ' is equal 4');
};

switch case

Matching the expression's value to a case clause, and executes statements associated with that case.

var cars = 'audi';
switch(cars){
   case 'audi':
     console.log('It is A4');
	 break;
	 case 'ford':
     console.log('It is my car Ford');
	 break;
	 case 'ferrari':
     console.log('It is the slow car of Fernando Alonso');
	 break;
}

Objects

Simple Object

var person = {
  name: 'mike',
	age: 20,
}
console.log(person.name);

Simple Object with Array

var person = {
  name: 'mike',
	age: 20,
	daughters: ['Linda', 'Maggie'],
}
console.log(person.daughters[1]);

Complex Object

Object with other object inside

var person = {
  name: 'mike',
	age: 20,
	address: {
	   street: 'Velazquez 10',
		 city: 'Madrid'
	}
}
console.log(person.address.city);

Tips

JS: default value to an undefined parameter

function functionWithDefaultValue(b){
    b = b || 123;
    return b;
}

// Result without parameter -----> Result 123
functionWithDefaultValue()   
// Result with parameter    -----> Result 66
functionWithDefaultValue(66)

JS: Return multiple values from a function

function operation(val1, val2){
	sum = val1 + val2;
	sub = val1 - val2;
	return {
		sum: sum, 
		sub: sub
	}; 
};
console.log( operation(20,5).sum ); // 25
console.log( operation(20,5).sub ); // 15

JS: Merge the contents of two or more objects together into the first object

// Create helper Function
function extend(obj, src) {
  for (var key in src) {
    if (src.hasOwnProperty(key)) obj[key] = src[key];
  }
  return obj;
}

// Object's examples
jsonObjA = {
  name: 'mike',
  years: 34
}

jsonObjB = {
  country: 'Brazil'
}

// Apply merge of objects
let jsonObjFull = extend(jsonObjA, jsonObjB);
console.log(jsonObjFull); // Object {   country: "Brazil",   name: "mike",   years: 34 }

JS - Playing with strings

Playing with strings

(function(){
  var str = "Welcome to the real world";
  
  str.startsWith("Welcome"); // true
  str.endsWith("world"); // true
  str.includes('real') // true
  str.slice(0, 6); // "Welcom"
  str.charAt(12) // "h"
  str.split(" "); // ["Welcome", "to", "the", "real", "world"] 
  str.split("e"); // ["W", "lcom", " to th", " r", "al world"]
  str.replace("world", "life"); // "Welcome to the real life"
  str.repeat(3); // "Welcome to the real worldWelcome to the real worldWelcome to the real world"
  
}());

JS - insert html

inserts the resulting html into the DOM tree at a specified position

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->