i can code! for Web.: 2011

Monday, December 26, 2011

YUI - a FREE JavaScript and CSS framework

YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications. YUI is provided under a BSD license and is available on GitHub for forking and contribution.

link: http://yuilibrary.com/

Thursday, December 1, 2011

Introducing testing web apps with WebDriver

Selenium WebDriver is a browser automation tool which provides a lightweight and elegant way for testing web apps. Selenium WebDriver is now available as an SDK extra in the Android SDK, and supports 2.3 (Gingerbread) and onwards!

Whether or not your site is optimized for mobile browsers, you can be sure that users will be accessing it from their phones and tablets. WebDriver makes it easy to write automated tests that ensure your site works correctly when viewed from the Android browser. We’ll walk you through some basics about WebDriver and look at it in action.

know more: Android Developers Blog - Introducing Android WebDriver

Tuesday, November 8, 2011

OAuth 2.0 Playground announced

Google announced the OAuth 2.0 Playground, which simplifies experimentation with the OAuth 2.0 protocol and APIs that use the protocol. Trying out some requests in the OAuth 2.0 playground can help understand how the protocol functions and make life easier when the time comes to use OAuth in your own code.

Source: Google Apps Developer Blog - OAuth 2.0 Playground: Open to Developers!

Thursday, October 27, 2011

Add code assist for jQuery in Aptana

To enable the code assist for jQuery in Aptana Studio 3, Download and Add the .sdocml file here: https://github.com/aptana/javascript-jquery.ruble/tree/master/support

Friday, October 21, 2011

Implement Slider using HTML5 an JavaScript

This example show how to implement a slider using HTML5 and JavaScript. To demonstrate the effect, code from "jQuery exercise: change font-size" is borrowed, to change text size when slide is changed.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#mytext {
 font-size: 20px
}

</style>
</head>
<body>
<center>
<input id="slide" type="range" min="8" max="50" value="20"? onChange="changeTextSize(this.value)" step="1"/>
<p id="mytext">Change TEXT size by Slider</p>

</center>
<script>

function changeTextSize(fontsize) {
 $("#mytext").css("font-size", fontsize+"px");
}

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

Thursday, October 20, 2011

Javascript Exercise: Get text and change text

example:

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Get input</title>
</head>
<body>
<h1>Get input and change text</h1>
<p id="mytextchanged">Hello!</p>
<input id="mytext" type="text">

<input type="button" value="Click Me" onClick="showMe()" />

<script type="text/javascript">
    function showMe() {
 var msg = document.getElementById("mytext").value;
        document.getElementById("mytextchanged").innerHTML = msg;
    }
</script>

</body>
</html>

Read input text using JavaScript

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Get input</title>
</head>
<body>
<h1>Get input</h1>

<input id="mytext" type="text">

<input type="button" value="Click Me" onClick="showMe()" />

<script type="text/javascript">
    function showMe() {
 var msg = document.getElementById("mytext").value;
        alert(msg);
    }
</script>

</body>
</html>

Monday, October 17, 2011

Play mp4 using HTML5

Example to play mp4 in HTML5.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<video src="http://video.ch9.ms/ch9/51fe/77b82ce9-bbbc-4b9c-b19a-9f6b017551fe/MVP1understandingwptools_low_ch9.mp4"
 controls autoplay loop> 
<p>Sorry! Your browser doesn't support video.</p> 
</video>

</body>
</html>

Friday, October 14, 2011

jQuery exercise: change font-size

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#mytext {
 font-size: 20px
}
 
</style>
</head>
<body>
<center>
<p id="mytext">Change TEXT size by UP/DOWN key</p>
</center>
<script>
$(function(){
 
 var KEY_UP = 38;
 var KEY_DOWN = 40;
 
 //Set listener for keydown
 $(document).keydown(function(e){
  $("#mytext2").html("- keydown -");
   switch(e.which){
    case KEY_UP:
     var fontsize = parseInt($("#mytext").css("font-size")) + 2;
     $("#mytext").css("font-size", fontsize+"px");
     break;
    case KEY_DOWN:
     var fontsize = parseInt($("#mytext").css("font-size")) - 2;
     $("#mytext").css("font-size", fontsize+"px");
     break;
   }
 });

});
</script>
</body>
</html>

Thursday, October 13, 2011

jQuery exercise: get key input, to change CSS layout.

By merging of the exercises "jQuery exercise: get key input" and "Apply style on div", we can change the red dot position using JavaScript. When user press (also press and hold) UP, DOWN, LEFT or RIGHT key can move the red dot position.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#background{
 background: #a0a0a0;
 width: 400px;
 height: 300px;
 position: relative;
 overflow: hidden;
}
#reddot {
 background: #f00;
 position: absolute;
 width: 30px;
 height: 30px;
 left: 185px;
 top: 135px;
 border-radius: 15px;
}

</style>
</head>
<body>
<center>
<div id="background">
 <div id="reddot"></div>
</div>
</center>
<p id="mytext1">Original Text</p>
<p id="mytext2">Wait Key</p>
<p id="mytext3">Wait Key</p>
<script>
$(function(){
 var str = "This run after DOM loaded";
 $("#mytext1").html(str);
 
 var KEY_UP = 38;
 var KEY_DOWN = 40;
 var KEY_LEFT = 37;
 var KEY_RIGHT = 39;
 
 //Set listener for keydown
 $(document).keydown(function(e){
  $("#mytext2").html("- keydown -");
   switch(e.which){
    case KEY_UP:
     var top = parseInt($("#reddot").css("top")) - 10;
     $("#reddot").css("top", top);
     $("#mytext3").html("Key: UP / " + left + " : " + top);
     break;
    case KEY_DOWN:
     var top = parseInt($("#reddot").css("top")) + 10;
     $("#reddot").css("top", top);
     $("#mytext3").html("Key: DOWN / " + left + " : " + top);
     break;
    case KEY_LEFT:
     var left = parseInt($("#reddot").css("left")) - 10;
     $("#reddot").css("left", left);
     $("#mytext3").html("Key: LEFT / " + left + " : " + top);
     break;
    case KEY_RIGHT:
     var left = parseInt($("#reddot").css("left")) + 10;
     $("#reddot").css("left", left);
     $("#mytext3").html("Key: RIGHT / " + left + " : " + top);
     break;
   }
 });

 //Set listener for keyup
 $(document).keyup(function(e){
  $("#mytext2").html("Wait Key");
  $("#mytext3").html("Wait Key");
 });
});
</script>
</body>
</html>

Convert CSS width or height to int using JavaScript

Normal, width or height defined in CSS as "px", "cm". It can be converted to int using JavaScript function parseInt(string, radix).

The parseInt function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading white space in string is ignored. If radix is undefined or 0, it is assumed to be 10 except when the number begins with the character pairs 0x or 0X, in which case a radix of 16 is assumed. If radix is 16, the number may also optionally begin with the character pairs 0x or 0X.

Example: jQuery exercise: get key input, to change CSS layout.

Wednesday, October 12, 2011

jQuery exercise: get key input

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p id="mytext1">Original Text</p>
<p id="mytext2">Wait Key</p>
<p id="mytext3">Wait Key</p>
<script>
$(function(){
 var str = "This run after DOM loaded";
 $("#mytext1").html(str);

 var KEY_UP = 38;
 var KEY_DOWN = 40;
 var KEY_LEFT = 37;
 var KEY_RIGHT = 39;
 
 //Set listener for keydown
 $(document).keydown(function(e){
  $("#mytext2").html("- keydown -");
  switch(e.which){
   case KEY_UP:
    $("#mytext3").html("Key: UP");
    break;
   case KEY_DOWN:
    $("#mytext3").html("Key: DOWN");
    break;
   case KEY_LEFT:
    $("#mytext3").html("Key: LEFT");
    break;
   case KEY_RIGHT:
    $("#mytext3").html("Key: RIGHT");
    break;
  }
 });
 
 //Set listener for keyup
 $(document).keyup(function(e){
  $("#mytext2").html("Wait Key");
  $("#mytext3").html("Wait Key");
 });
 
});
</script>
</body>
</html>

jQuery exercise: change text

Exercise to change text using jQuery.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p id="mytext1">Original Text</p>
<p id="mytext2">Original Text</p>
<p id="mytext3">Original Text</p>
<script>
 var str = "Text <b>changed</b>";
 $("#mytext2").html(str);
</script>

</body>
</html>

Saturday, October 1, 2011

Load Feed with Google Feed API

With the Feed API, you can download any public Atom, RSS, or Media RSS feed using only JavaScript.

The Google Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies. This makes it easy to quickly integrate feeds on your website.

Know more: Google Feed API

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Google AJAX Search API Sample</title>
  <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
  <script type="text/javascript">
  /*
  *  How to load a feed via the Feeds API.
  */

  google.load("feeds", "1");

  // Our callback function, for when a feed is loaded.
  function feedLoaded(result) {
    if (!result.error) {
      // Grab the container we will put the results into
      var container = document.getElementById("content");
      container.innerHTML = '';

      // Loop through the feeds, putting the titles onto the page.
      // Check out the result object for a list of properties returned in each entry.
      // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(entry.title));
        container.appendChild(div);
      }
    }
  }

  function OnLoad() {
    // Create a feed instance that will grab Digg's feed.
    var feed = new google.feeds.Feed("http://feeds.feedburner.com/ICanCodeForWeb");

    // Calling load sends the request off.  It requires a callback function.
    feed.load(feedLoaded);
  }

  google.setOnLoadCallback(OnLoad);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
  <div id="content">Loading...</div>
</body>
</html>

Wednesday, September 28, 2011

Using Google Chart Tools - Visualization: Pie Chart

It's a example of using Google Chart Tools - Visualization: Pie Chart.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <title>i can code! for Web.</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['corechart']});
  </script>
  <script type="text/javascript">
    function drawVisualization() {
      // Create and populate the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'name');
      data.addColumn('number', 'data');
      data.addRows(5);
      data.setValue(0, 0, 'A');
      data.setValue(0, 1, 50);
      data.setValue(1, 0, 'B');
      data.setValue(1, 1, 50);
      data.setValue(2, 0, 'C');
      data.setValue(2, 1, 50);
      data.setValue(3, 0, 'D');
      data.setValue(3, 1, 25);
      data.setValue(4, 0, 'E');
      data.setValue(4, 1, 25);
  
      // Create and draw the visualization.
      new google.visualization.PieChart(document.getElementById('visualization')).
          draw(data, {title:"Google Chart Tools - Visualization: Pie Chart"});
    }
  
    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
  <div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>

Tuesday, September 27, 2011

jQTouch

jQTouch is a jQuery plugin for mobile web development on the iPhone,
Android, iPod Touch, and other forward-thinking devices.

http://jqtouch.com/

Sunday, September 25, 2011

Targeting screen sizes by using media queries

In this exercise, we have two css files, desktop.css and mobile.css. In our HTML, dualcss.html, we will load the suitable css according to the browser width (not the device screen width in this exercise).

desktop.css

body {
 font-size: 50px;
 font-weight: bold;
 font-family: Arial;
}
a { font-style: italic; }
h1 {
 font-size: 50px;
 font-weight: bold;
 font-family: Arial;
}

mobile.css

body {
 font-size: 10px;
 font-weight: bold;
 font-family: Arial;
}
a { font-style: italic; }
h1 { font-style: italic; }

dualcss.html

<html>
<head>
 <title>i can code! for Web: Dual CSS</title>
 
 <link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width: 480px)" />
 <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
 
</head>
<body>
 <h1>i can code! for Web: Dual CSS</h1>
 <p><a href="http://icancode-4-web.blogspot.com/">http://icancode-4-web.blogspot.com/</a></p>
</body>
</html>

Saturday, September 24, 2011

Yahoo! Site Explorer transition to Bing Webmaster Tools

Bing Webmaster Tools are supporting the Yahoo! Site Explorer community. Webmasters should now be using the Bing Webmaster Tools to ensure that their websites continue to get high quality organic search traffic from Bing and Yahoo!.

Since the middle of August 2011, the Bing Webmaster Tools have also been integrating traffic data from Yahoo! into its reports. Please check out the Bing Webmaster blog post for more information.

Friday, September 23, 2011

IE 9 Guide for Developers

The Internet Explorer 9 Guide for Developers provides a look at the features and improvements in Internet Explorer 9. By using this guide, web developers and designers can take full advantage of these enhancements.

link: http://msdn.microsoft.com/en-us/ie/ff468705

Wednesday, September 21, 2011

Developer Preview of Google+ Hangouts API

Google announced developer preview of Google+ Hangouts API, The Google+ Hangouts API allows you to develop collaborative apps that run inside of a Google+ Hangout. Hangout apps behave much like normal web apps, but with the addition of the rich, real-time functionality provided by the Hangouts APIs. Apps have the ability to control aspects of the user interface, synchronize data between hangout participants, and respond to various events in the hangout.

Getting started is easy. First, build your app or just start with one of the pre-built examples. Next, register it in the APIs Console, and tell us who on your team should be able to load your app. Then, start a hangout with your app!

http://developers.google.com/+/hangouts/

Saturday, September 17, 2011

Define callback functions

It's a example show how to define callback function; for example, open, close.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
 i can code! for Web.
 <div id="myDialog">
  Test Dialog of jQuery UI
 </div>
 <script>
  (function($){
   
    var functionOK = function(){
     alert("OK");
    },
    functionCancel = function(){
     alert("Cancel");
    },
    Options = {
    
     open: function() {
      alert("callback function - open");
     },
     
     close: function() {
      alert("callback function - close");
     },
     
     title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
     buttons:{
      "OK": functionOK,
      "Cancel": functionCancel
     }
    };
  
   $("#myDialog").dialog(Options);
   })(jQuery);
 </script>
</body>
</html>

Set dimensions of jQuery UI dialog

To set dimensions of jQuery UI dialog, we can use options of width, height, minWidth, minHeight, maxWidth, maxHeight.

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
 i can code! for Web.
 <div id="myDialog">
  Test Dialog of jQuery UI
 </div>
 <script>
  (function($){
   
    var functionOK = function(){
     alert("OK");
    },
    functionCancel = function(){
     alert("Cancel");
    },
    Options = {
    
     width: 300,
     height: 200,
     minWidth: 200,
     minHeight: 200,
     maxWidth: 600,
     maxHeight: 250,
    
     title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
     buttons:{
      "OK": functionOK,
      "Cancel": functionCancel
     }
    };
  
   $("#myDialog").dialog(Options);
   })(jQuery);
 </script>
</body>
</html>

Tuesday, September 13, 2011

Add buttons in jQuery UI dialog

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
 i can code! for Web.
 <div id="myDialog">
  Test Dialog of jQuery UI
 </div>
 <script>
  (function($){
   
    var functionOK = function(){
     alert("OK");
    },
    functionCancel = function(){
     alert("Cancel");
    },
    Options = {
     title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
     buttons:{
      "OK": functionOK,
      "Cancel": functionCancel
     }
    };
  
   $("#myDialog").dialog(Options);
   })(jQuery);
 </script>
</body>
</html>

Set linkable title on jQuery UI dialog

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
 i can code! for Web.
 <div id="myDialog">
  Test Dialog of jQuery UI
 </div>
 <script>
  (function($){
   var Options = {
    title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>"
   };
  
   $("#myDialog").dialog(Options);
   })(jQuery);
 </script>
</body>
</html>

Monday, September 12, 2011

Example of jQuery UI - Dialog

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
 i can code! for Web.
 <div id="myDialog" title="My Dialog">
  Test Dialog of jQuery UI
 </div>
 <script>
  (function($){
   $("#myDialog").dialog();
   })(jQuery);
 </script>
</body>
</html>

Sunday, September 11, 2011

Apply style on div

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test CSS</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#background{
 background: #a0a0a0;
 width: 400px;
 height: 300px;
 position: relative;
 overflow: hidden;
}
#reddot {
 background: #f00;
 position: absolute;
 width: 30px;
 height: 30px;
 left: 185px;
 top: 135px;
 border-radius: 15px;
}

</style>
</head>
<body>
<h1>i can code! for Web</h1>
<center>
<div id="background">
 <div id="reddot"></div>
</div>
</center>

</body>
</html>

Saturday, September 10, 2011

Load jQuery from web page, without download.

To load jQuery, we can add the code below:
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

example:

<html>
<head><title>Test CSS</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }
</style>
</head>
<body>
<h1>i can code! for Web</h1>
<p>Load something here...</p>
<script>
$(function(){
alert("Hello, from i can code! for Web.\n"
 + "jQuery loaded.");
});
</script>
</body>
</html>

Wednesday, September 7, 2011

Link css in separated file

It have same output as last post Simple usage of css, with css in separated file.

<html>
<head><title>Test CSS</title>
<link rel="stylesheet" href="mycss.css" type="text/css">
</head>
<body>
<h1>i can code! for Web</h1>
<p>Test CSS</p>
</body>
</html>

mycss.css

body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }

Simple usage of css

<html>
<head><title>Test CSS</title>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }
</style>
</head>
<body>
<h1>i can code! for Web</h1>
<p>Test CSS</p>
</body>
</html>

Related Post:
-Link css in separated file

HTML5 Rocks - A resource for open web HTML5 developers

HTML5 Rocks is a site made by Google, with resources for open web HTML5 developers.

Safari Developer Tools Guide (former Safari User Guide for Web Developers)

Safari 4.0 and later includes built-in tools such as the Web Inspector to help you prototype, analyze, debug, and optimize websites and web applications. Safari 5.0 and later has additional tools you can use to develop and debug Safari extensions.

Safari has tools for prototyping HTML, CSS, and JavaScript, tools for interactively inspecting and debugging elements, attributes, properties, and styles, an integrated JavaScript debugger, and optimization tools such as audits, a latency and download timeline, and a JavaScript profiler.

These tools are built into Safari on the desktop (Mac OS X and Windows) and you can enable them in other Webkit-based applications. A subset of the tools are available in Safari on iOS-based devices (iPhone, iPad, and iPod touch).

Know more: Safari Developer Tools Guide (former Safari User Guide for Web Developers)

Sunday, August 28, 2011

Javascript Exercise: Check if the browser support canvas

We can use the code document.createElement('canvas').getContext to check if the browser support HTML5 canvas feature. If the browser support HTML5 canvas feature, it return true, otherwise return false.

example:

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Exercise</title>

<script type="text/javascript">



function CheckCanvas(){



	if(document.createElement('canvas').getContext){

		alert("OK. Your browser support canvas");

	}else{

		alert("Sorry! your brwser doesn't support canvas");

	}



}





function htmlonload(){

  CheckCanvas();

}

</script>

</head>

<body onload="htmlonload();">

JavaScript Exercise

</body>

</html>

Friday, August 5, 2011

Javascript Exercise: Math.round(), Math.round(), Math.ceil() and Math.floor()

example:

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

function exercise(){
 var result = "";
 result += "Math.round(1.4) = " + Math.round(1.4) + "\n";
 result += "Math.round(1.5) = " + Math.round(1.5) + "\n";
 result += "Math.ceil(1.5) = " + Math.ceil(1.5) + "\n";
 result += "Math.floor(1.5) = " + Math.floor(1.5) + "\n";
 alert(result);
}


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

Wednesday, August 3, 2011

JavaScript: Math.random()

Get a random number between 0 and 1

example:

Math.random()

Tuesday, August 2, 2011

Google Data Java Client Eclipse Plug-in

Kunal Shah walks through how to install and use the Eclipse Plug-in for developers using the Java Client Library for Google Data APIs.

JavaScript: Math.max and Math.min

Math.max and Math.min return the maximum and minimum from a list of numbers.

Example

Math.max(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

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