Mobile-Web-App: April 2014

Wednesday, April 30, 2014

Where is variable defined, in JavaScript scope.

Whether you're coming to JavaScript from another language, or you're learning JavaScript as your first language, the way scope works -- that is, when and where your variables are defined -- might surprise you.

Saturday, April 26, 2014

Apply function to array elements to create another array, map()

This example show how to create array by applying function to a existing array, using map().

<!DOCTYPE html>
<html>
<body onload="doit();">

<h1>mobile-web-app.blogspot.com</h1>
<p id="p1"></p>
<div id="resultdiv"></div>
 
<script type="text/javascript">
 
function doit()
{   var array = [0, 45, 90, 180, 270, 360];

    document.getElementById("p1").innerHTML=array;
    var resultDiv = document.getElementById("resultdiv");
    
    var array2 = array.map(function(x) {return Math.sin(x * (Math.PI / 180))});
    printAll(array2, resultDiv);
    
    var array3 = array.map(cos);
    printAll(array3, resultDiv);
    
}

function cos(x){
    return Math.cos(x * (Math.PI / 180));
}

function printAll(arr, container){
    arr.forEach(
        function(element, index){
            var newP = document.createElement("p");
            newP.innerHTML = index + " : " + element;
            container.appendChild(newP);
        }
    );
}

</script>
</body>
</html>

Javascript example: access all elements in array using forEach()

Javascript example to access all elements in array using forEach().

<!DOCTYPE html>
<html>
<body onload="doit();">

<h1>mobile-web-app.blogspot.com</h1>
<p id="p1"></p>
<div id="resultdiv"></div>
 
<script type="text/javascript">
 
function doit()
{   var array = [1, 'a', 'BCD', 3.1416];

    document.getElementById("p1").innerHTML=array;
    
    var resultDiv = document.getElementById("resultdiv");
    
    array.forEach(
        function(element, index){
            var newP = document.createElement("p");
            newP.innerHTML = index + " : " + element + " : " + typeof(element);
            resultDiv.appendChild(newP);
        }
    );
}
 
</script>
</body>
</html>

Friday, April 25, 2014

Join array elements to a string

The join() method joins the array elements into a string.

Example:

<!DOCTYPE html>
<html>
<body onload="doit();">

<h1>mobile-web-app.blogspot.com</h1>
<p id="p1"></p>
<p id="p1a"></p>
<p id="p1b"></p>
<p id="p1c"></p>
<p id="p1d"></p>
<p id="p2"></p>
<p id="p3"></p>
 
<script type="text/javascript">
 
function doit()
{   var array = [1, 'a', 'BCD', 3.1416];

    document.getElementById("p1").innerHTML=array;
    
    document.getElementById("p1a").innerHTML=array[0] + ": " + typeof(array[0]);
    document.getElementById("p1b").innerHTML=array[1] + ": " + typeof(array[1]);
    document.getElementById("p1c").innerHTML=array[2] + ": " + typeof(array[2]);
    document.getElementById("p1d").innerHTML=array[3] + ": " + typeof(array[3]);
    
    var array2 = array.join('+');
    
    document.getElementById("p2").innerHTML="array.join('+'): " + array2 + ": " + typeof(array2);
    document.getElementById("p3").innerHTML="array.join(''): " + array.join('');
    
}
 
</script>
</body>
</html>

Javascript example: add and remove elements from Array

This example show how to add/remove elements from array, using Javascript:

push(): Add new elements to the end of an array
pop(): Remove the last element of an array
unshift(): Add new elements to the beginning of an array
shift(): Remove the first element of an array

<!DOCTYPE html>
<html>
<body onload="doit();">

<h1>mobile-web-app.blogspot.com</h1>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3a"></p>
<p id="p3b"></p>
<p id="p4a"></p>
<p id="p4b"></p>
<p id="p5"></p>
 
<script type="text/javascript">
 
function doit()
{ var array = ['A', 'B', 'C', 'D'];
 document.getElementById("p1").innerHTML=array;
 
 array.push('E'); //Add element in end
 document.getElementById("p2").innerHTML="push('E'): " + array;
 
 var eleFirst = array.shift(); //remove first element
 document.getElementById("p3a").innerHTML="array.shift(): " + eleFirst;
 document.getElementById("p3b").innerHTML=array;
 
 var eleLast = array.pop();  //remove last element
 document.getElementById("p4a").innerHTML="array.pop(): " + eleLast;
 document.getElementById("p4b").innerHTML=array;
 
 array.unshift('a'); //Add element in front
 document.getElementById("p5").innerHTML="unshift('a'): " + array;
}
 
</script>
</body>
</html>