Mobile-Web-App: Fundamental.Javascript

Showing posts with label Fundamental.Javascript. Show all posts

Friday, June 27, 2014

Example of Javascript String comparison

Example of Javascript String comparison:

<html>
<body>
<script>
console.log("mobile-web-app Javascript String comparison");
var result1 = 'abc'===new String('abc');
var result2 = 'abc'===new String('abc').toString();
var result3 = 'abc'== new String('abc');
var result4 = 'abc'== new String('abc').toString();

console.log("'abc'===new String('abc') : " + result1);
console.log("'abc'===new String('abc').toString() : " + result2);
console.log("'abc'== new String('abc') : " + result3);
console.log("'abc'== new String('abc').toString() : " + result4);
</script>

</body>
</html>

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>

Sunday, December 1, 2013

Javascript exercise: duplicated variable name in global and local

This exercise show duplicated variable name in global and local:

my_var1 declared and defined outside function as global variable
my_var2 duplicated with local variable without defination.
my_var3 duplicated with local variable, load value before use.
my_var4 duplicated with local variable, load value after use

duplicated variable name in global and local

<!DOCTYPE HTML>
<html>
    <head>
        <title>Mobile-Web-App</title>

<script>
var my_var1 = "my var 1";
var my_var2 = "my var 2";
var my_var3 = "my var 3";
var my_var4 = "my var 4";

var testjavascript = (function (){
 console.log("Test Start");
 
 var my_var2;
 var my_var3 = "my var define inside function before use";
 
 console.log("my_var1: " + my_var1);
 console.log("my_var2: " + my_var2);
 console.log("my_var3: " + my_var3);
 console.log("my_var4: " + my_var4);
 
 var my_var4 = "my var define inside function after use";
 
 console.log("Test End");
});

console.log("testjavascript() run after document loaded.");
window.onload = testjavascript();
</script>

    </head>
    <body>
        <h1>Mobile-Web-App</h1>
        <h2>http://mobile-web-app.blogspot.com/</h2>
    </body>
</html>

Javascript exercise: variable can be accessed before declared

This exercise show that we can access variable before declaration without error, what it return is undefined. But cannot access variable without declaration, it will stop the javascript.

variable can be accessed before declared

Example code:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Mobile-Web-App</title>

<script>
var testjavascript = (function (){
 console.log("Test Start");
 console.log("use var before declaration: " + my_var);
 
 var my_var;
 console.log("use var after declaration: " + my_var);
 
 local_var = "Hello World";
 console.log("use var after value assigned: " + my_var);
 
 console.log("Un-declared var: " + another_var);
 
 console.log("Test End");
});
 
console.log("testjavascript() run after document loaded.");
window.onload = testjavascript();
</script>
    </head>
    <body>
        <h1>Mobile-Web-App</h1>
        <h2>http://mobile-web-app.blogspot.com/</h2>
    </body>
</html>

Sunday, August 19, 2012

Force page scroll to top once page loaded

To force the web page scroll to top, you can call window.scrollTo(0, 1). In order to make it happen when page load, modify <body>:

<body onload="window.scrollTo(0, 1);">

Sunday, June 3, 2012

Create HTML List using Javascript

Example to create HTML List using Javascript:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Mobile-Web-App: Create HTML List using Javascript</title>
         
  <script > 
    function myOnLoad(){ 
      var div_info = document.getElementById("info");
    
      var new_ul = document.createElement("ul");
      
      new_ul.appendChild(create_li("Sunday"));
      new_ul.appendChild(create_li("Monday"));
      new_ul.appendChild(create_li("Tuesday"));
      new_ul.appendChild(create_li("Wednesday"));
      new_ul.appendChild(create_li("Thursday"));
      new_ul.appendChild(create_li("Friday"));
      new_ul.appendChild(create_li("Saturday"));
      
      div_info.appendChild(new_ul);
    }            
    
  function create_li(item){
    var new_li = document.createElement("li"); 
    new_li.innerHTML = item;
    return new_li;
  }
  
  window.onload = myOnLoad;
  </script>
  
</head>
<body>
  <H1>Mobile-Web-App: Create HTML List using Javascript</H1> 
  <div id="info">
  </div>
  
</body>
</html>

Related:
- Create HTML List using jQuery

Wednesday, April 25, 2012

In Javascript, function can be assigned to variable

Example to to assign a Javascript function to a variable like a object.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Javascript Exercise - function</title>
<script>

var func = function(i){
 return i*2;
}

function test(){

info = "<p> typeof(func): " + typeof(func) + "</p>"
 + "<p> typeof(func(5)): " + typeof(func(5)) + "</p>"
 + "<p> func(5): " + func(5) + "</p>";

document.getElementById("prompt").innerHTML=info;
}

</script>
</head>
<body onload="test();">
<h1>Mobile-Web-App: Javascript Exercise - function</h1>
<div id="prompt"></div>
</body>
</html>

Monday, April 23, 2012

Javascript Exercise - Date object

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Javascript Exercise - Date</title>
<script>

function test(){

var date = new Date();

info = "<p> date: " + date + "</p>" 
 + "<p> date.getFullYear(): " + date.getFullYear() + "</p>"
 + "<p> date.getMonth() 0-11: " + date.getMonth() + "</p>"
 + "<p> date.getDate() 1-31: " + date.getDate() + "</p>"
 + "<p> date.getDay() 0-6: " + date.getDay() + "</p>"
 + "<p> date.getHours() 0-23: " + date.getHours() + "</p>"
 + "<p> date.getMinutes() 0-59: " + date.getMinutes() + "</p>"
 + "<p> date.getSeconds() 0-59: " + date.getSeconds() + "</p>"
 + "<p> date.getMilliseconds() 0-999: " + date.getMilliseconds() + "</p>";

document.getElementById("prompt").innerHTML=info;
}

</script>
</head>
<body onload="test();">
<h1>Mobile-Web-App: Javascript Exercise - Date</h1>
<div id="prompt"></div>
</body>
</html>

Javascript Exercise - Comparison: == vs ===

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Javascript Exercise - Comparison</title>
<script>

function test(){

info = "<p> == vs === </p>"
 + "<p> 1 == '1' " + (1 == '1') + "</p>" 
 + "<p> 1 != '1' " + (1 != '1') + "</p>" 
 + "<p> 1 === '1' " + (1 === '1') + "</p>" 
 + "<p> 1 !== '1' " + (1 !== '1') + "</p>";

document.getElementById("prompt").innerHTML=info;
}

</script>
</head>
<body onload="test();">
<h1>Mobile-Web-App: Javascript Exercise - Comparison</h1>
<div id="prompt"></div>
</body>
</html>

Saturday, April 21, 2012

Javascript Exercise - String, indexOf() and charAt()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Javascript Exercise - String, indexOf() and charAt()</title>
<script>

function test(){
var s = 'Mobile-web-App';
info = "<p>s = 'Mobile-web-App'</p>"
 + "<p> s.indexOf('-') " + s.indexOf('-') + "</p>" 
 + "<p> s.indexOf('-A') " + s.indexOf('-A') + "</p>"
 + "<p> s.indexOf('x') " + s.indexOf('x') + "</p>"  
 + "<p> s.chartAt(0) = " + s.charAt(0) + "</p>" 
 + "<p> s.chartAt('3') = " + s.charAt('3') + "</p>"
 + "<p> s.chartAt(-1) = " + s.charAt(-1) + "</p>"
 + "<p> s.chartAt(20) = " + s.charAt(20) + "</p>";

document.getElementById("prompt").innerHTML=info;
}

</script>
</head>
<body onload="test();">
<h1>Mobile-Web-App: Javascript Exercise - String, indexOf() and charAt()</h1>
<div id="prompt"></div>
</body>
</html>

Javascript Exercise - number arithmetic, toFixed() and toPrecision()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Javascript Exercise - number arithmetic, toFixed() and toPrecision()</title>
<script>

function test(){
var a = 10.1;
var b = 10.2;
var c = a + b;
info = "<p>a = 10.1, b = 10.2, c = a + b</p>"
 + "<p> a + b = " + (a + b) + "</p>"  
 + "<p> c = " + c + "</p>"
 + "<p> c.toFixed(2) = " + c.toFixed(2) + "</p>"
 + "<p> c.toPrecision(8) = " + c.toPrecision(8) + "</p>";

document.getElementById("prompt").innerHTML=info;
}

</script>
</head>
<body onload="test();">
<h1>Mobile-Web-App: Javascript Exercise - number arithmetic, toFixed() and toPrecision()</h1>
<div id="prompt"></div>
</body>
</html>

Data type of Javascript: string and number

This exercise, the function typeof() is used to test the data type of various string and number object.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Javascript Exercise - data type</title>
<script>

function test(){
info = "<p>typeof \"\": " + typeof("") + "</p>"
 + "<p>typeof 'a': " + typeof('a') + "</p>"
 + "<p>typeof \"a\": " + typeof("a") + "</p>"
 + "<p>typeof 'abc': " + typeof('abc') + "</p>"
 + "<p>typeof \"abc\": " + typeof("abc") + "</p>"
 + "<p>typeof 0: " + typeof(0) + "</p>"
 + "<p>typeof 1: " + typeof(1) + "</p>"
 + "<p>typeof 1.0: " + typeof(1.0) + "</p>"
 + "<p>typeof 1.5: " + typeof(1.5) + "</p>"
 + "<p>typeof null: " + typeof(null) + "</p>";

document.getElementById("prompt").innerHTML=info;
}

</script>
</head>
<body onload="test();">
<h1>Mobile-Web-App: Javascript Exercise - data type</h1>
<div id="prompt"></div>
</body>
</html>