Mobile-Web-App

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>

Friday, March 21, 2014

Set color using HTML5 color type input

Example to using HTML5 color type input, read with Javascript to change background color of page.

<!DOCTYPE html>
<html>
<body>
Select color: 
<input id="colorpick" type="color" name="favcolor" onchange="JavaScript:colorchanged()"><br>

<script type="text/javascript">

function colorchanged()
{
 console.log("colorchanged()");
 var colorval = document.getElementById("colorpick").value;
 console.log(colorval);
 document.body.style.background = colorval;
}

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

Friday, March 14, 2014

O'Reilly Webcast: Getting Started with HTML5 Canvas

This video introduce the basics of working with HTML5 canvas: how to create canvas draw lines, shapes and as time permits other canvas capabilities. This webcast talk is designed for people without a background with HTML 5 canvas.

Monday, January 27, 2014

Node.js the Right Way: Practical, Server-Side JavaScript That Scales

Get to the forefront of server-side JavaScript programming by writing compact, robust, fast, networked Node applications that scale. Ready to take JavaScript beyond the browser, explore dynamic languages features and embrace evented programming? Explore the fun, growing repository of Node modules provided by npm. Work with multiple protocols, load-balanced RESTful web services, express, 0MQ, Redis, CouchDB, and more. Develop production-grade Node applications fast.

JavaScript is the backbone of the modern web, powering nearly every web app's user interface. Node.js is JavaScript for the server. This book shows you how to develop small, fast, low-profile, useful, networked applications. You'll write asynchronous, non-blocking code using Node's style and patterns. You'll cluster and load balance your services with Node core features and third-party tools. You'll work with many protocols, creating RESTful web services, TCP socket clients and servers, and more.

This short book packs a hefty dose of Node.js. You'll test your code's functionality and performance under load. You'll learn important aspects of Node development--from its architecture and core, to its ecosystem of third-party modules. You'll discover how Node pairs a server-side event loop with a JavaScript runtime to produce screaming fast, non-blocking concurrency. Through a series of practical programming domains, you'll use the latest available ECMAScript Harmony features and harness key Node classes such as EventEmitter and Stream. Throughout the book, you'll develop real programs that are small, fast, low-profile, and useful.

Get ready to join a smart community that's rapidly advancing the state of the art in web development.

What You Need:

Latest stable release of Node.js, this book was written with 0.12.x in mind. The 0MQ (ZeroMQ) library, version 3.2 or higher.