Cacher is the code snippet organizer for pro developers

//Manipulate color and bg color in javascript

<style>
#myDiv{
  background-color:#ccc;
}
</style>

<script>

var color: "red";

//quick way with variable and use it several times
var myDiv =  document.getElementById('myDiv');
myDiv.style.background = "black";
myDiv.style.color = "#ffffff";

</script>

<div id="myDiv">
Hello
</div>

//long way separate
//function call - this will take element with id (myDiv) and set the bg to black

document.getElementById('myDiv').style.background = "black";
// document - is a variable that is built in on the browser and it respresent our page
// getElementById - is method that will return the div with the id of myDiv
// style - is an object inside myDiv with the property background 

document.getElementById('myDiv').style.color = "#ffffff";
//change text to white

var name = "Jim";

if (name){
  console.log("true");
  }
  else{
    console.log("false");
  }

// Declare a variable on line 3 called
// myCountry and give it a string value.
var myCountry="Colombia";

// Use console.log to print out the length of the variable myCountry.
console.log( myCountry.length);

// Use console.log to print out the first three letters of myCountry.
console.log(myCountry.substring(0, 3));

// --------------- //


//Variables aming rules don't start with a number

var name = prompt ("what");

alert ("Hello" + name);

console.log ("The name" + name) 
// the name string
// name var


name = "Nick"; 
//reassign variable o value to variable name


/* we need a way to 'save' the values from our coding. We do this by defining a 
variable with a specific, case-sensitive name. Once you create (or declare) 
a variable as having a particular name, you can then call up that value 
by typing the variable name. */

var myAge = 30;

console.log(myAge);

//variable types - number - string - array

//var declare a variable - name = value

//string
var color = "red";

//number
var color = 12;

//array
var color = ["red" , "green" , "blue"];

//expression
var color = 42 * 3.14;

//concatenate strings
var hello = "Hello" + "world";

//The result of a function call
var hello = somefunction(1, "abc");


/* Variables naming rules don't start with a number - simbols - dashes 
  3color - win% - color-win  
  Javascript Reserved words if- else - function - continue - switch- break case - catch 
  debugger - default - delete - do - finally - for - in - instanceof - new - return
  this - throw - try- typeof -var -voild -wild - with */
  
---------


//adding new value to the variable

var message = "Hello!";
alert(message);
message = "Welcome to Javascript";
alert(message);

//Shadowing a variable

//Two variables in different scope share the same name

var myColor = "blue";
console.log("myColor before myFunc()", myColor);


 function myFun (){
     var myColor = "Yellow";
     console.log("myColor inside myFunc()", myColor);
}

myFunc();  //result yellow


--------------



var myColor = "blue";
console.log("myColor before myFunc()", myColor);

//scoping a variable with var or without
 function myFun (){
     var myColor = "Yellow";// var local variable
     console.log("myColor inside myFunc()", myColor);
}

myFunc();  //result blue because is out of the function
console.log("myColor after myFunc()", myColor);
console.log("myNumber after myFunc()", myNumber);


/*function myFun (){
     myColor = "Yellow";// refering to the global variable
     console.log("myColor inside myFunc()", myColor);
}*/

--------------

// Always use var to define a variable

/*function myFun (){
     myColor = "Yellow";// refering to the global variable
     myNumber = 42;
     console.log("myColor inside myFunc()", myColor);
}*/


myFunc();  //result 42
console.log("myNumber after myFunc()", myNumber);

//scope
//if you create a variable you can use it only on that function unless is global like world

//global scope -  variable - can be acces any where 
  var world = "World!";


//Defining a variable that that value is a function

  function sayHello (){
     var hello = "Hello";

  console.log(hello + world);
// console access two variables hello a nd world because world is out of the function but us global 
}

sayHello();

//console
  console.log("world outside sayHello()", world);

//console error - just can be call it inside hello
  console.log("world outside sayHello()", hello);
 

 --------------------

 //function inside a function 
 //Define a variable inside a function create its own scope

  function sayHello (){
     var hello = "Hello";

  function inner (){
     var extra = "There is more";
  console.log(hello + world + extra);
  }
}


//we available to access the global variable and the ones inside function - console inside sayhello function
inner();

//Null and Undefined

/* What happens when the variable has no value? JavaScript has two types of values you can use: null and undefined. */

var myVar;

console.log(typeof myVar); // this is equal undefined

console.log(typeof myVar === "undefined"); // this validate true

//undefined

if(myVar){
  console.log("If");
}else{
  console.log("Else");
}//result else

//null


var x = null;

// if we have false value if statement will not execute

if(x == null){
  console.log("If");
}else{
  console.log("Else");
}//result if

/* Console 
  undefined == null
  true

  undefined === null
  false

==   equal to

x == 8  false 
x == 5  true

===  equal value and equal type

x === "5" false 
x === 5 true

  */

var numPassengers = 0
numPassengers += 3

//Hoisting
//How hoisting affect our javascript programs

function doSomething (doit){ //doit is a parameter
  var color = "blue";  //define a variable
  var number;
  if(doit){  //if statement - Value doit
     color = "red";
     number = 10;
     console.log("Color in if(){}", color)
     }
  console.log("Color after if(){}", color)
    }

 doSomething (false);
 doSomething (true);
 
 
//-----------------------

function doSomething (doit){ 
  var status = "right"; //just declare variable one time
  if(doit){ 
     status = "put the status";
     console.log("Color in if(){}", status)
     }
  console.log("Color after if(){}", status)
    }

 doSomething (false);
 doSomething (true);

//Variables