i can code! for Web.: JavaScript

Showing posts with label JavaScript. Show all posts

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/

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, 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>

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, August 3, 2011

JavaScript: Math.random()

Get a random number between 0 and 1

example:

Math.random()

Wednesday, July 20, 2011

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

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

Wednesday, June 22, 2011

Google Apps Script

Google Apps Script is a JavaScript cloud scripting language that provides easy ways to automate tasks across Google products and third party services.

With Google Apps Script you can:

Automate repetitive business processes (e.g. expense approvals, time-sheet tracking, ticket management, order fulfillment, and much more)
Link Google products with third party services (e.g. send custom emails and a calendar invitation to a list from a MySQL database)
Create custom spreadsheet functions
Build and collect user inputs through rich graphics interfaces and menus (e.g. a company could power an internal application for purchasing office supplies where users could shop via a customized menu interface)

http://code.google.com/googleapps/appsscript/

Google I/O 2011: Developing Apps, Add Ins and More with Apps Script

This intermediate talk focuses on some less well known uses of Apps Script - building Add Ins for Google Apps, standalone applications and more! We'll focus on rapid application development features, and demonstrate deployment to several targets.

Thursday, June 16, 2011

Get repeated position updates using Geolocation API, navigator.geolocation.watchPosition()

The post "Simple Geolocation API demo" show how to get one-shot position requests using Geolocation API, navigator.geolocation.getCurrentPosition(). We can get repeated position updates using navigator.geolocation.watchPosition().

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

function htmlonload(){


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

function successCallback(position){
var msg ="";

msg += "Latitude: " + position.coords.latitude + "<br/>";
msg += "Longitude: " + position.coords.longitude + "<br/>";
msg += "Accuracy: " + position.coords.accuracy + "<br/>";
msg += "@" + position.timestamp;

  changeText("MyText", "My Location: " + msg);
}

function errorCallback(error) {
changeText("MyText", "Error: " + error);
}

function changeText(id, text){
document.getElementById(id).innerHTML = text;

}

</script>
<meta charset="UTF-8">
<title>Simple Geolocation API demo</title>
</head>
<body onload="htmlonload();">
<h1>Simple Geolocation API demo</h1>
<div id="MyText">Waiting...</div>

</body>
</html>

Get repeated position updates using Geolocation API, navigator.geolocation.watchPosition(), run on Android device

Tuesday, June 14, 2011

Javascript to change text

Example:

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

function htmlonload(){
 changeText("MyText", "text changed");
}

function changeText(id, text){
 document.getElementById(id).innerHTML = text;
}

</script>
<meta charset="UTF-8">
<title>Test Text: Javascript to change text</title>
</head>
<body onload="htmlonload();">
<h1>Test Text: Javascript to change text</h1>
<div id="MyText">Hello All</div>

</body>
</html>

Output:

Sunday, June 12, 2011

Get details of PositionError object

PositionError object defined at W3C Geolocation API, it hold properties of code and message of the error.

The code attribute must return the appropriate code from the following list:

PERMISSION_DENIED (numeric value 1)
The location acquisition process failed because the application origin does not have permission to use the Geolocation API.
POSITION_UNAVAILABLE (numeric value 2)
The position of the device could not be determined. For instance, one or more of the location providers used in the location acquisition process reported an internal error that caused the process to fail entirely.
TIMEOUT (numeric value 3)
The length of time specified by the timeout property has elapsed before the implementation could successfully acquire a new Position object.

The message attribute must return an error message describing the details of the error encountered. This attribute is primarily intended for debugging and developers should not use it directly in their application user interface.

example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
 alert("Sorry! your browser does not support Geolocation API.");
}

function successCallback(position){
 var msg ="";

 msg += "Latitude: " + position.coords.latitude + "\n";
 msg += "Longitude: " + position.coords.longitude + "\n";
 msg += "Accuracy: " + position.coords.accuracy;

 alert(msg);
}

function errorCallback(error) {
 switch (error.code) {
  case error.PERMISSION_DENIED:
  alert("PERMISSION DENIED: " + error.message);
  break;
 case error.POSITION_UNAVAILABLE:
  alert("POSITION UNAVAILABLE: " + error.message);
  break;
 case error.TIMEOUT:
  alert("TIMEOUT: " + error.message);
  break;
 }
}

</script>
<meta charset="UTF-8">
<title>Simple Geolocation API demo</title>
</head>
<body>
<h1>Simple Geolocation API demo</h1>


</body>
</html>

output:

Saturday, June 11, 2011

Simple Geolocation API demo, one-shot position requests.

It's a simple HTML with Javascript to get user current position using W3C Geolocation API.

Geo.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
alert("Sorry! your browser does not support Geolocation API.");
}

function successCallback(position){
var msg ="";

msg += "Latitude: " + position.coords.latitude + "\n";
msg += "Longitude: " + position.coords.longitude + "\n";
msg += "Accuracy: " + position.coords.accuracy;

alert(msg);
}

function errorCallback(error) {
alert(error);
}

</script>
<meta charset="UTF-8">
<title>Simple Geolocation API demo</title>
</head>
<body>
<h1>Simple Geolocation API demo</h1>


</body>
</html>

Result:
Run in Chrome under Ubuntu Linux on desktop PC - function errorCallback() is called with error of PositionError! (Refer to Get details of PositionError object)

Fail to run Geolocation API on desktop running Chrome

Run in Opera mobile on Android phone - function successCallback() is called with my position.
(To test the HTML on Android mobile, simple copy the HTML file to SD Card, and open with browser)

Sunday, May 29, 2011

Linking between HTML input and Javascript/canvas

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i can code! for Web::HTML5 Canvas</title>
<script type="text/javascript">
var mycontext;

function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 mycontext = mycanvas.getContext("2d");

 var formElement = document.getElementById("textin");
 formElement.addEventListener("keyup", textinChanged, false);

}

function textinChanged(e){
 var target = e.target;
 text = target.value;
 mycontext.fillStyle = "#000000";
 mycontext.fillText(text, 50, 50);
}

</script>
</head>
<body onload="canvasloader();">
<h1>i can code! for Web::HTML5 Canvas</h1>
http://icancode-4-web.blogspot.com/<br/>

<canvas id="canvas" style="border: 1px solid;" width="360" height="100">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
 <input id="textin" />
</form>
</body>
</html>

Apply shadow on HTML5 canvas

example:

function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 var mycontext = mycanvas.getContext("2d");
 appyShadow(mycontext);
 
 drawSquare(mycontext);
 drawText(mycontext);

}

function appyShadow(context){
 context.shadowOffsetX = 5;
 context.shadowOffsetY = 5;
 context.shadowColor = 'black';
 context.shadowBlur = 5;
}


function drawText(context){
 var myText = "Hello HTML5";
 context.fillStyle = "#FF0000";
 context.fillText (myText, 50, 50);
 context.fillStyle = "#00FF00";
 context.fillText (myText, 100, 100);
 context.fillStyle = "#0000FF";
 context.fillText (myText, 150, 150);
}

function drawSquare(context){
 context.fillStyle = "gray";
 context.fillRect(25,25,200,200);
}