i can code! for Web.: July 2011

Saturday, July 23, 2011

JavaScript Exercises - sort() of Array

example:

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Exercise</title>

<script type="text/javascript">



function exercise(){

 var stringsource = "A man and a pen";

 var result = "sort() of Array= " + stringsource.split(" ").sort() + "\n";



 alert(result);

}





function htmlonload(){

exercise();

}

</script>

</head>

<body onload="htmlonload();">

JavaScript Exercise

</body>

</html>

JavaScript Exercises - reverse() of Array

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){
 var stringsource = "A man and a pen";
 var result = "reverse() of Array= " + stringsource.split(" ").reverse() + "\n";

 alert(result);
}


function htmlonload(){
exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Thursday, July 21, 2011

JavaScript Exercises - toUpperCase() and toLowerCase().

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){
 var stringsource = "A man and a pen";
 var result = "stringsource = " + stringsource + "\n\n";
 result += "toUpperCase(): " + stringsource.toUpperCase() + "\n";
 result += "toLowerCase(): " + stringsource.toLowerCase() + "\n";
 alert(result);
}


function htmlonload(){
  exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Wednesday, July 20, 2011

JavaScript Exercises - pop(), shift(), push() and unshift()

pop() and shift() remove and return the last(pop) or the first(shift) element element from a array.

push() and unshift() add a element into the array in the end (push) or in the front (unshift).

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){

 var stringsource = "A man and a pen";
 var stringarray = stringsource.split(" ");


 var result = "stringsource = " + stringsource + "\n\n";
 result += "stringarray:\n" + stringarray + "\n\n";

 result += "pop(): " + stringarray.pop() + "\n" + " - result = " + stringarray + "\n\n";
 result += "shift(): " + stringarray.shift() + "\n" + " - result = " + stringarray + "\n\n";

 stringarray.push("push");
 result += "push(\"push\"): - result = " + stringarray + "\n\n";

 stringarray.unshift("unshift");
 result += "unshift(\"unshift\"): - result = " + stringarray + "\n\n";


 alert(result);
}


function htmlonload(){
  exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

JavaScript Exercises - split() and join() functions of string

split() return a array of string, the parameter determine what character to split the string.

join() join all the elements in a array to form a string, the parameter to join() will be inserted between each element.

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){

 var stringsource = "A man and a pen";
 var stringarray_SP = stringsource.split(" ");
 var stringarray_a = stringsource.split("a");
 var stringjoin = stringarray_SP.join(".");

 var result = "stringsource = " + stringsource + "\n\n";
 result += "stringarray_SP:\n" + stringarray_SP + "\n\n"
 result += "stringarray_a:\n" + stringarray_a + "\n\n";
 result += "stringjoin:\n" + stringjoin + "\n";

 alert(result);
}


function htmlonload(){
  exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

ECMAScript Standard

Introduction to ECMAScript Standard

This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company‘s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0.

The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.

That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.

The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.

Since publication of the third edition, ECMAScript has achieved massive adoption in conjunction with the World Wide Web where it has become the programming language that is supported by essentially all web browsers. Significant work was done to develop a fourth edition of ECMAScript. Although that work was not completed and not published1 as the fourth edition of ECMAScript, it informs continuing evolution of the language. The fifth edition of ECMAScript (published as ECMA-262 5th edition) codifies de facto interpretations of the language specification that have become common among browser implementations and adds support for new features that have emerged since the publication of the third edition. Such features include accessor properties, reflective creation and inspection of objects, program control of property attributes, additional array manipulation functions, support for the JSON object encoding format, and a strict mode that provides enhanced error checking and program security.

This present edition 5.1 of the ECMAScript Standard is fully aligned with third edition of the international standard ISO/IEC 16262:2011.

ECMAScript is a vibrant language and the evolution of the language is not complete. Significant technical enhancement will continue with future editions of this specification.

The current ECMAScript Language Specification, ECMA-262 Edition 5.1 (June 2011), can be freely downloaded here.

Website:
- Standard ECMA-262

JavaScript Exercises - Date object

A Date object contains a Number indicating a particular instant in time to within a millisecond. Such a Number is called a time value. A time value may also be NaN, indicating that the Date object does not represent a specific instant of time.

Time is measured in ECMAScript in milliseconds since 01 January, 1970 UTC. In time values leap seconds are ignored. It is assumed that there are exactly 86,400,000 milliseconds per day. ECMAScript Number values can represent all integers from –9,007,199,254,740,992 to 9,007,199,254,740,992; this range suffices to measure times to millisecond precision for any instant that is within approximately 285,616 years, either forward or backward, from 01 January, 1970 UTC.

The actual range of times supported by ECMAScript Date objects is slightly smaller: exactly –100,000,000 days to 100,000,000 days measured relative to midnight at the beginning of 01 January, 1970 UTC. This gives a range of 8,640,000,000,000,000 milliseconds to either side of 01 January, 1970 UTC.

The exact moment of midnight at the beginning of 01 January, 1970 UTC is represented by the value +0.

example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){

 var ToDay = new Date();

 var result ="ToDay = new Date()\n\n";
 result += "Date.parse(ToDay) = " + Date.parse(ToDay) + "\n\n"
 result += "Date(Date.parse(ToDay)) = \n" + new Date(Date.parse(ToDay)) + "\n";


 alert(result);
}


function htmlonload(){
 exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Monday, July 18, 2011

JavaScript Exercises - string operation: slice, substr and substring

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function exercise(){

 var msg = "Hello http://icancode-4-web.blogspot.com/";
 var result = "";
 result = "msg.slice(13, 40): " + msg.slice(13, 40) + "\n";
 result += "msg.substr(13, 14): " + msg.substr(13, 14) + "\n";
 result += "msg.slice(40, 13): " + msg.slice(40, 13) + "\n";
 result += "msg.substr(40, 13): " + msg.substr(40, 13) + "\n";
 result += "msg.substring(40, 13): " + msg.substring(40, 13) + "\n";

 alert(result);
}


function htmlonload(){
 exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

jQuery Mobile Exercise: dialog

Any valid jQuery Mobile page can also be displayed as a dialog. To link to a page as dialog, simply insert data-rel="dialog" attribute in the link.

example:

jQuery Mobile dialog in OperaMobile for Android

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Exercise</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js">
</script>
</head>
<body>

<section id="page1" data-role="page">
<header data-role="header" data-position="fixed"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Hello jQuery Mobile!</p>
<p><a href="#page2" data-rel="dialog">Open Dialog</a></p>
</div>
<footer data-role="footer" data-position="fixed"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

<section id="page2" data-role="page">
<header data-role="header" data-position="fixed"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>I'm a Dialog!</p>
</div>


</body>
</html>

jQuery Mobile Exercise: data-position

We can insert the attribute data-position="fixed" into header and footer to fix it's position at top or bottom.

example:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Exercise</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js">
</script>
</head>
<body>

<section id="page1" data-role="page">
<header data-role="header" data-position="fixed"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Hello jQuery Mobile!</p>
<p><a href="#page2">Go to Page 2</a></p>
</div>
<footer data-role="footer" data-position="fixed"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

<section id="page2" data-role="page">
<header data-role="header" data-position="fixed"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Page 2</p>
<p><a href="#page1">Back to Page 1</a></p>
</div>

<footer data-role="footer" data-position="fixed"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

</body>
</html>

next:
- jQuery Mobile Exercise: dialog

Friday, July 15, 2011

jQuery Mobile Exercise: Navigation between pages

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Exercise</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js">
</script>
</head>
<body>

<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Hello jQuery Mobile!</p>
<p><a href="#page2">Go to Page 2</a></p>
</div>
<footer data-role="footer"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Page 2</p>
<p><a href="#page1">Back to Page 1</a></p>
</div>

<footer data-role="footer"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

</body>
</html>

next:
- jQuery Mobile Exercise: data-position

jQuery Mobile Beta 1

jQuery Mobile Beta 1 Released!

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.

Link: http://jquerymobile.com/

jQuery Mobile Exercise

A simple exercise using jQuery Mobile:

jQuery Mobile Exercise on Firefox running on Android

jQuery Mobile Exercise on Google Chrome running on Ubuntu desktop

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Exercise</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js">
</script>
</head>
<body>

<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Hello jQuery Mobile!</p>
</div>
<footer data-role="footer"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

</body>
</html>

Thursday, July 14, 2011

JavaScript Exercises - arguments to function

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Exercise</title>
<script type="text/javascript">

function handle_arguments(){
 var number_of_arguments = arguments.length;
 var list_of_arguments = "";
 var msg;
 var i;
 
 for(i = 0; i < number_of_arguments; i++){
  list_of_arguments += i + " : " + arguments[i] + "\n";
 }

 msg = "Number of arguments = " + number_of_arguments + "\n"
   + "List of arguments : \n" + list_of_arguments;
 alert(msg);
}

function exercise(){

 var j = "Javascript Exercise";
  var not_init;
 var its_null = null;
 handle_arguments(1, "Hello", 3, j, not_init, its_null);
}


function htmlonload(){
exercise();
}
</script>
</head>
<body onload="htmlonload();">
JavaScript Exercise
</body>
</html>

Wednesday, July 13, 2011

Secrets and surprises of the Google Geo APIs

Come learn about some new, some hidden, and some surprising features of the Maps API, Earth API, Fusion Tables and other APIs you may not even realise exist.

Tuesday, July 12, 2011

Location Based App development using Google APIs

Discover how Google APIs such as the Places API, Buzz API, and Latitude API can provide you with the services you need to build the next great location based app.

Monday, July 11, 2011

Free Code Editor for Windows, Mac and Linux: Komodo Edit for Perl, Python, Tcl, PHP, Ruby, Javascript

Komodo Edit is a fast, smart, free and open-source code editor. You can code for PHP, Python, Ruby, JavaScript, Perl, Tcl, XML, HTML 5, CSS 3, with (customizable) syntax coloring, folding, background syntax checking, and excellent auto-complete and calltips (called "code intelligence").

Saturday, July 9, 2011

Eclipse IDE for JavaScript Web Developers

Eclipse IDE for JavaScript Web Developers is tools for JavaScript developers creating Web applications, including a JavaScript IDE, tools for JavaScript, HTML, CSS, and XML.

Download page:
- http://eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/indigor

Friday, July 8, 2011

Tracking my location on mobile web with Google Map

In the post Get repeated position updates using Geolocation API, navigator.geolocation.watchPosition(), we know how to track our location using Geolocation API. In the post Mobile web with Google Map, we know how to embed Google Map in our mobile web page. Now, it's time to merge them together to have a Google Map tracking our location using Geolocation API.

Treacking my location on mobile web with Google Map

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>A Simple Google Map demo</title>
<style type="text/css">
html { height: 100% }
body { height: 100%}
#mymap { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;

function InitMap(){
 var options = {
   zoom: 2,
   center: new google.maps.LatLng(0, 0),
   mapTypeId: google.maps.MapTypeId.ROADMAP,

   zoomControl: true,
   zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.LEFT_CENTER}, 

   streetViewControl: true,
   streetViewControlOptions: {
    position: google.maps.ControlPosition.RIGHT_BOTTOM}


 };

 map = new google.maps.Map(document.getElementById("mymap"), options);

 initLocation();
}

function initLocation(){
 if (window.navigator.geolocation) {
  navigator.geolocation.watchPosition(successCallback, errorCallback);
 } else {
  alert("Sorry! your browser does not support Geolocation API.");
 }
}

function successCallback(position){
 var currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 var marker = new google.maps.Marker({position: currentPosition});
 marker.setMap(map);
 map.setCenter(currentPosition);
}

function errorCallback(error) {
}

function htmlonload(){
  InitMap();
}
</script>
</head>
<body onload="htmlonload();">
<div id="mymap"></div>
</body>
</html>

Wednesday, July 6, 2011

Mobile web with Google Map

Modify the HTML in last post Add custom control on Google Map with "viewport" added, to make it suitable for mobile device.

The HTML displayed on PC, Google Chrome.

The HTML displayed on PC, Google Chrome.

The HTML displayed on Android, Mobile Opera.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>A Simple Google Map demo</title>
<style type="text/css">
 html { height: 100% }
 body { height: 100%}
 #mymap { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 var map;

 function InitMap(){
  var options = {
    zoom: 2,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    zoomControl: true,
    zoomControlOptions: {
     style: google.maps.ZoomControlStyle.LARGE,
     position: google.maps.ControlPosition.LEFT_CENTER},  

    streetViewControl: true,
    streetViewControlOptions: {
     position: google.maps.ControlPosition.RIGHT_BOTTOM} 


  };

  map = new google.maps.Map(document.getElementById("mymap"), options);
 }

 function htmlonload(){
   InitMap();
 }
</script>
</head>
<body onload="htmlonload();">
 <div id="mymap"></div>
</body>
</html>

Next:
- Tracking my location on mobile web with Google Map

Tuesday, July 5, 2011

Add custom control on Google Map

Modify from the example code in A Simple Google Map demo, custom control of zoomControl and streetViewControl are added in Google Map.

<!DOCTYPE html>
<html>
<head>
<title>A Simple Google Map demo</title>
<style type="text/css">
 html { height: 100% }
 body { height: 100%}
 #mymap { height: 50% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 var map;

 function InitMap(){
  var options = {
    zoom: 2,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    zoomControl: true,
    zoomControlOptions: {
     style: google.maps.ZoomControlStyle.LARGE,
     position: google.maps.ControlPosition.LEFT_CENTER},  

    streetViewControl: true,
    streetViewControlOptions: {
     position: google.maps.ControlPosition.RIGHT_BOTTOM} 


  };

  map = new google.maps.Map(document.getElementById("mymap"), options);
 }

 function htmlonload(){
   InitMap();
 }
</script>
</head>
<body onload="htmlonload();">
 <h1>A Simple Google Map demo</h1>
 <div id="mymap"></div>
</body>
</html>

next:
- Mobile web with Google Map

Sunday, July 3, 2011

A Simple Google Map demo

The Google Maps API is a service available for any web site that is free to consumers.

See the terms of service for more information.

Currently, The Maps API is a free service, businesses that charge fees for access, track assets or build internal applications must use Google Maps API Premier, which provides enhanced features, technical support and a service-level agreement.

It's a very simple example to embed Google Maps in HTML using JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>A Simple Google Map demo</title>
<style type="text/css">
html { height: 100% }
body { height: 100%}
#mymap { height: 50% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;

function InitMap(){
 var options = {
   zoom: 2,
   center: new google.maps.LatLng(0, 0),
   mapTypeId: google.maps.MapTypeId.ROADMAP,
 };

 map = new google.maps.Map(document.getElementById("mymap"), options);
}

function htmlonload(){
  InitMap();
}
</script>
</head>
<body onload="htmlonload();">
<h1>A Simple Google Map demo</h1>
<div id="mymap"></div>
</body>
</html>

next:
- Add custom control on Google Map