Mobile-Web-App: May 2012

Monday, May 28, 2012

Monkey - a next-generation games programming language

Monkey is a next-generation games programming language that allows you to create apps on multiple platforms with the greatest of ease.
Monkey works by translating Monkey code to one of a different number of languages at compile time - including C++, C#, Java, Javascript and Actionscript.
Monkey games can then be run on potentially hundreds of different devices - including mobile phones, tablets, desktop computers and even videogame consoles.
Monkey saves you time and allows you to target your apps at multiple markets and app stores at once, potentially mutiplying sales several times over.

Monkey Game Development: Beginner's Guide

The first two chapters will provide you with grounding in Monkey. In each subsequent chapter you will create a complete game deployable to either iOS, Android, HTML5, FLASH, OSX, Windows and XNA. The last chapter will show you how to monetize the games so you can be commercially successful in the app development world. Do you want to quickly create games deployable to all the major desktop and mobile platforms?, if so look no further. You will learn how to utilize the highly versatile Monkey compiler to create 2d games deployable almost anywhere.

Saturday, May 26, 2012

jQuery for Designers: Beginner's Guide

Part of Packt’s Beginner’s Guide series, each chapter focuses on a specific part of your website and how to improve its design with the use of jQuery. There are plenty of screenshots and practical step-by-step instructions making it easy to apply jQuery to your site. This book is for designers who have the basics of HTML and CSS, but want to extend their knowledge by learning to use JavaScript and jQuery.

Friday, May 25, 2012

jQuery, handle event one time only - .one()

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .one()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){

   $("#clickme").one('click', (function(event){
    alert("'clickme' Clicked!");
   }));
    
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .one()</b></P>

<p id='clickme'>Click Me (accept one time only)</p>
</body>
</html>

jQuery .live() and .die()

Similar to .bind() and .unbind(), .die() remove the handler set by .live().

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .live() and .die()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
  
   //"#clickme" not yet existed
   $("#clickme").live('click', (function(event){
    alert("'clickme' Clicked! and die.()");
    $("#clickme").die('click');
   }));
    
   $("<p id='clickme'>Click Me (accept one time only)</p>").appendTo("#addhere");
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .live() and .die()</b></P>
<div id="addhere"></div>
</body>
</html>

Thursday, May 24, 2012

Web base Interactive g++ compiler - GCC Explorer

GCC Explorer (http://gcc.godbolt.org/) is a web base g++ compiler. You can enter your C++ code and view the assembly output by various version of g++ compiler.

Handle event using .live() in jQuery

jQuery .live() can be used to bind a event handler with a not yet existed DOM elements.

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .live()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
  
   //"#clickme" not yet existed
   $("#clickme").live('click', (function(event){
    alert("'clickme' Clicked!");
   }));
    
   $("<p id='clickme'>Click Me</p>").appendTo("#addhere");
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .live()</b></P>
<div id="addhere"></div>
</body>
</html>

Handle event using .bind() and .unbind() in jQuery

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .bind()/.unbind()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
   $("#clickme").bind('click', (function(){
    alert("'clickme' Clicked! and unbind.");
    $("#clickme").unbind('click');
   }));    
   
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .bind()/.unbind()</b></P>
<p id="clickme">Click Me (accept one time only)</p>
 
</body>
</html>

Handle event using .bind() in jQuery

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .bind()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
   $("#clickme").bind('click', (function(){
    alert("'clickme' Clicked!");
   }));
   
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .bind()</b></P>
<p id="clickme">Click Me</p>
 
</body>
</html>

Wednesday, May 23, 2012

SIGGRAPH 2012 : Technical Papers Preview Trailer

The SIGGRAPH Technical Papers program is the premier international forum for disseminating new scholarly work in computer graphics and interactive techniques. SIGGRAPH 2012 brings together more than 20,000 professionals from 5 continents, 5-9 August 2012 in Los Angeles, California, USA. Learn more at www.siggraph.org/s2012.

Tuesday, May 22, 2012

Sample of RGraph LED Grids

<!DOCTYPE html >
<html>
<head>
 <title>RGraph LED Grids</title>
 <script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.led.js" ></script>
 
 <script>
  window.onload = function ()
  { var led = new RGraph.LED('led_canvas', 'Mobile-Web-App');
   led.Set('chart.light', '#0F0');
   led.Draw();
  }
 </script>

</head>
<body>
<h1>Mobile-Web-App: LED Grids</h1>
<canvas id="led_canvas" width="450" height="100">
Sorry! Canvas not supported on your browser.
</canvas>

</body>
</html>

Reference: RGraph LED Grid documentation

Monday, May 21, 2012

Crowd-Sourced Android CookBook

The O'Reilly Android Cookbook is a crowd-sourced reference to all aspects of developing successful Android applications. It is not an application to manage your food recipes under Android! You can view the recipes online, and also contribute recipes, comment on them.

Visit: http://androidcookbook.com/home.seam

~ We are building a community-written web site which has also been used to create an O'Reilly Cookbook, both about how to build great Android applications. It is full of how-to information along with code snippets that illustrate the ideas presented. It features both how-to's that overlap with the official documentation, and material that goes beyond this to be more tutorial, more in-depth, or explaining "lessons from the trenches": what actually works to get the application functioning well. Unlike most books written by one, two or a few individuals, this one has input from dozens of contributors, who were all able to view and comment on each others' recipes before the book was published. The published version(s) include printed books, eBooks, and other uses. And long after the book was first published in 2012, this site will continue to exist - with a larger collection of recipes than will fit in the published book - and serve as an Android developer resource site long after. ~

HTML5: Remotely vibrate a phone with morse code!

Use the HTML5 Vibrate API in Mobile Firefox Beta Example showing how to use the vibrate API to vibrate a device from a web page. For more information on how to accomplish this: http://www.smartjava.org/content/html5-remotely-vibrate-phone-morse-code-using-web-sockets-and-vibrate-api

wysihtml5 - an open source rich text editor based on HTML5

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

Features:

It's fast and lightweight (smaller than TinyMCE, Aloha, ...)
Auto-linking of urls as-you-type
Generates valid and semantic HTML5 markup (even when the content is pasted from MS Word)
Uses class names instead of inline styles
Unifies line break handling across browsers
Uses sandboxed iframes in order to prevent identity theft through XSS
Speech-input for Chrome
No jQuery required

Simple example of RGraph 3D bar chart

<!DOCTYPE html >
<html>
<head>
 <title>RGraph 3D Bar chart example</title>
 <script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.bar.js" ></script>
 
 <script>
  window.onload = function ()
  {     var barchart = new RGraph.Bar(
     'barchart_canvas', [[17], [13], [12], [11], [3], [2], [2], [2], [2], [2]]);
    barchart.Set('chart.colors', ['#0000FF']); 
    barchart.Set('chart.labels', 
     ['US', 'China', 'Russia', 'Netherlands', 'Ukraine', 
     'Germany', 'United Kingdom', 'South Korea', 'Denmark', 'Brazil']);
    barchart.Set('chart.ymax', 20);
    barchart.Set('chart.ylabels.count', 5);
    barchart.Set('chart.gutter.left', 35);
    barchart.Set('chart.variant', '3d');
    barchart.Set('chart.strokestyle', 'rgba(0,0,0,0.1)');
    barchart.Set('chart.scale.round', true);
    barchart.Set('chart.text.angle', 15);
    barchart.Set('chart.text.size', 6);
    barchart.Draw();
  }
 </script>

</head>
<body>
<h1>Mobile-Web-App: RGraph 3D Bar Chart</h1>
<canvas id="barchart_canvas" width="450" height="300">
Sorry! Canvas not supported on your browser.
</canvas>

</body>
</html>

Reference: RGraph Bar charts documentation

Saturday, May 19, 2012

Google Chart Tools Geochart

Google Chart Tools provide visualization of Geochart. You can easy to embed map of a country, a continent, or a region with tregion mode or marker mode.

NCC Group has released its Origin of Hacks report for the first quarter of 2012, tracking the countries from which global computer hacking originated throughout the first three months of the year. The data will be used as a example to demonstrate Geochart.

Please note that that data in the chart is roughly. Hi-resolution map and top-10 table available on request, please refer http://www.nccgroup.com/newsandevents/latest/12-05-17/Origins_of_Global_Hacks_UK_leaps_up_hacking_league_table.aspx

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', '%'],
    ['US', 17],
    ['China', 13],
    ['Russia', 12],
    ['Netherlands', 11],
    ['Ukraine', 3],
    ['Germany', 2],
    ['United Kingdom', 2],
    ['South Korea', 2],
    ['Denmark', 2],
    ['Brazil', 2]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

How gmail work

Story of Send on Google Green Follow an email on its journey to see what happens when you send a message. Along the way, find out how we minimize our impact on the environment.
http://www.google.com/green/storyofsend

Friday, May 18, 2012

Simple example of RGraph Radar chart

RGraph is a charts library that uses Javascript and HTML5 to draw and supports over twenty different types of charts. Using the new HTML5 canvas tag, RGraph creates these charts inside the web browser using Javascript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites - everybody wins!

RGraph Radar charts example:

<!DOCTYPE html>
<html>
<head>
<title>RGraph Radar charts example</title>
<script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.context.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.tooltips.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.key.js" ></script>
<script src="http://www.rgraph.net/libraries/RGraph.radar.js" ></script>

<script>
window.onload = function ()
{
 var radar = new RGraph.Radar('radar_canvas', [10,9,6,6,8,7,7]);
 radar.Set('chart.strokestyle', 'black');
 radar.Set('chart.colors.alpha', 0.5);
 radar.Set('chart.colors', ['blue']);
 radar.Set('chart.key', ['Radar Chart Data']);
 radar.Set('chart.labels', ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']);
 radar.Draw();
}
</script>

</head>
<body>
<h1>Mobile-Web-App: RGraph Radar charts example</h1>

<canvas id="radar_canvas" width="450" height="300">
Sorry! Canvas not supported on your browser.
</canvas>

</body>
</html>

Thursday, May 17, 2012

jQuery .click() - click event handler

In the following example, if clicked on <p id="clickme">, the click event handlers of both <p id="clickme"> and document will be triggered; if click on any space outside <p id="clickme">, only the event handler of document will be triggered.

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .click()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
   $("#clickme").click(function(){
    alert("'clickme' Clicked!");
   });
   
   $(document).click(function(){
    alert("document Clicked!");
   });
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .click()</b></P>
<p id="clickme">Click Me</p>

</body>
</html>

Sunday, May 13, 2012

jQuery .appendTo() - add something on HTML at run-time

Example to add something to HTML at run-time using jQuery .appendTo()

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery, .attr()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  
   $("<p>Add what you want to HTML</p>")
    .appendTo("#addhere");

  });
 </script> 
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery, add to HTML</b></P>
<div id="addhere"></div>
</body>
</html>

Related:
- Add HTML elements using Javascript code

The iOS 5 Developer's Cookbook: Core Concepts and Essential Recipes for iOS Programmers (3rd Edition)

***This is the updated and corrected edition ofThe iOS 5 Developer's Cookbook.***

The iOS 5 Developer’s Cookbook, Third Edition

Covers iOS 5, Xcode 4.2, Objective-C 2.0’s ARC, LLVM, and more!

In this book, bestselling author and iOS development guru Erica Sadun brings together all the information you need to quickly start building successful iOS apps for iPhone, iPad, and iPod touch. Sadun has thoroughly revised this book to focus on powerful new iOS 5 features, the latest version of Objective-C, and the Xcode 4 development tools.

The iOS 5 Developer’s Cookbook, Third Edition is packed with ready-made code solutions for the iOS 5 development challenges you’re most likely to face, eliminating trial-and-error and helping you build reliable apps from the very beginning. Sadun teaches each new concept and technique through robust code that is easy to reuse and extend. This isn’t just cut-and-paste: Using her examples, Sadun fully explains both the “how” and “why” of effective iOS 5 development.

Sadun’s tested recipes address virtually every major area of iOS development, from user interface design to view controllers, gestures and touch, to networking and security. Every chapter groups related tasks together, so you can jump straight to your solution, without having to identify the right class or framework first. Coverage includes:

Mastering the iOS 5 SDK, Objective-C essentials, and the iOS development lifecycle
Designing and customizing interfaces with Interface Builder and Objective-C
Organizing apps with view controllers, views, and animations featuring the latest Page View controllers and custom containers
Making the most of touch and gestures—including custom gesture recognizers
Building and using controls from the ground up
Working with Core Image and Core Text
Implementing fully featured Table View edits, reordering, and custom cells
Creating managed database stores; then adding, deleting, querying, and displaying data
Alerting users with dialogs, progress bars, local and push notifications, popovers, and pings
Requesting and using feedback
Connecting to networks and services, handling authentication, and managing downloads
Deploying apps to devices, testers, and the App Store

About the Author

Erica Sadun is the bestselling author, coauthor, and contributor to several dozen books on programming, digital video and photography, and other technology topics. Sadun has authored dozens of iPhone-native applications, offers rapid-prototype consulting, and has blogged for many sites including Ars Technica, O’Reilly, and LifeHacker. She currently blogs regularly for TUAW. She holds a Ph.D. in Computer Science from Georgia Tech.

Saturday, May 12, 2012

FREE eBook download: jQuery Succinctly by Cody Lindley

jQuery Succinctly is the simple quick-start guide to intermediate and advanced jQuery development.

jQuery Succinctly was written to express, in short-order, the concepts essential to intermediate and advanced jQuery development. Its purpose is to instill in you, the reader, practices that jQuery developers take as common knowledge. Each chapter contains concepts essential to becoming a seasoned jQuery developer.

This book is intended for two types of readers. The first is someone who has read introductory material on jQuery and is looking for the next logical step. The second type of reader is a JavaScript developer, already versed in another library, now trying to quickly learn jQuery. I crafted this book to be used as my own personal reference point for jQuery concepts. This is exactly the type of book I wish every JavaScript library had available.

- Download jQuery Succinctly here

Table of Contents
- Core jQuery
- Selecting
- Traversing
- Manipulation
- HTML Forms
- Events
- jQuery and the Web Browser
- Plugins
- Effects
- AJAX

Friday, May 11, 2012

jQuery: .attr()

When attr() is called with two parameters, it's used to change the value of the attribute. The first parameter is the attribute, the second parameter is the new value. It attr() is called with one parameter, it's used to get the value of the attribute.

Example:

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery, .attr()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  
   //get value of attr "class"
   var myattr = $("#p1").attr("class");
   $("#p1").text("my class is: " + myattr);
   
   //change value of attr "class"  
   $("#p1").attr("class", "newclass");
   
   //get updated value of attr "class"
   myattr = $("#p1").attr("class");
   var oldmsg = $("#p1").text();
   $("#p1").html(
    "<p>" + oldmsg + "</p>" + 
    "<p>" + "my new class is: " + myattr + "</p>");

  });
 </script> 
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery, .attr()</b></P>
<p class="myclass" id="p1"></p>
</body>
</html>

Tuesday, May 8, 2012

jQuery: .text() vs .html()

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuert, .text() vs .html()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  
   var textin1 = $(".source").text();
   var textin2 = $(".source").html();
   $("#dest1").text(".text: <b>" + textin1 + "</b>");
   $("#dest2").html(".html: <b>" + textin2 + "</b>");

  });
 </script> 
 
</head>
<body>
<p><b>Mobile-Web-App: jQuert, .text() vs .html()</b></P>
<p class="source">Hello! </p>
<p class="source">Mobile</p>
<p class="source">-Web</p>
<p class="source">-App</p>
<p id="dest1"></p>
<p id="dest2"></p>
</body>
</html>

Monday, May 7, 2012

jQuery text(), get and set text

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuert text(), get and set text</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  
   var textin = $(".source").text();
   $("#dest").text(textin);

  });
 </script> 
 
</head>
<body>
<p><b>Mobile-Web-App: jQuert text(), get and set text</b></P>
<p class="source">Hello! </p>
<p class="source">Mobile</p>
<p class="source">-Web</p>
<p class="source">-App</p>
<p id="dest">-App</p>
</body>
</html>

Related:
- jQuery: .text() vs .html()

jQuery vs Javascript get current time

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery vs Javascript get current time</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){
  
   var now_jQuery = $.now();
   var now_Javascript = (new Date).getTime();

   document.writeln("<p>jQuery - $.now() = " + now_jQuery + "</p>");
   document.writeln("<p>Javascript - (new Date).getTime() = " + now_Javascript + "</p>");

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

Sunday, May 6, 2012

GoMoMeter: analyze the experience of mobile users on your site

This tool, GoMoMeter, shows you how your current site looks on a smartphone, and provides a free report with personalized recommendations tailored to how your business can build a more mobile-friendly experience.

Thursday, May 3, 2012

About Tizen

Tizen is an open source, standards-based software platform supported by leading mobile operators, device manufacturers, and silicon suppliers for multiple device categories, including smartphones, tablets, netbooks, in-vehicle infotainment devices, smart TVs, and more. Tizen offers an innovative operating system, applications, and a user experience that consumers can take from device to device.

The Tizen project resides within the Linux Foundation and is governed by a Technical Steering Group. The Technical Steering Group is the primary decision-making body for the open source project, with a focus on platform development and delivery, along with the formation of working groups to support device verticals.

The Tizen Association has been formed to guide the industry role of Tizen, including gathering of requirements, identification and facilitation of service models, and overall industry marketing and education.

Tizen provides a robust and flexible environment for application developers, based on HTML5. With HTML5's robust capabilities and cross platform flexibility, it is rapidly becoming the preferred development environment for mobile apps and services. The Tizen SDK and API allow developers to use HTML5 and related web technologies to write applications that run across multiple device segments.

The Tizen 1.0 Larkspur source code and SDK are now available.

The Tizen SDK is a comprehensive set of tools for developing Tizen Web applications. It consists of Web IDE, Emulator, toolchain, sample code, and documentation. Tizen SDK 1.0 Larkspur runs on Windows*, as well as Ubuntu*. Tizen Web applications may be developed without relying on an official Tizen IDE, as long as the application complies with Tizen packaging rules.

Wednesday, May 2, 2012

jQuery .extend() - merge objects

The jQuery .extend() method merge objects into a target object. The example below, object1 receives the properties of object2 and object3.

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery.extend</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){

   var object1 = {"prop_a": "Property A"};
   var object2 = {"prop_b": 123.001};
   var object3 = {"prop_c": object2};
   
   document.writeln("<p><b>$.extend</b></p>");

   document.writeln("<p>object1:</p>");
   $.each(object1, function(i, val) {
    document.writeln("<p>i: " + i  + " / v: " + val + "</p>");
   });
   
   document.writeln("<p>object2:</p>");
   $.each(object2, function(i, val) {
    document.writeln("<p>i: " + i  + " / v: " + val + "</p>");
   });

   document.writeln("<p>object3:</p>");
   $.each(object3, function(i, val) {
    document.writeln("<p>i: " + i  + " / v: " + val + "</p>");
   });
   
   document.writeln("<p><b>$.extend(object1, object2, object3)</b></p>");
   $.extend(object1, object2, object3);
   
   document.writeln("<p>object1:</p>");
   $.each(object1, function(i, val) {
    document.writeln("<p>i: " + i  + " / v: " + val + "</p>");
   });

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

Tuesday, May 1, 2012

Javascript typeof() vs jQuery $.type()

<!doctype html>
<head>
 <title>Mobile-Web-App: Javascript typeof() vs jQuery .type()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">

  $(document).ready(function(){

   var myArray = ["A", "B", "C"];
   var myEmptyArray = [];
   var myString = "ABCDEFG";
   var myEmptyString = "";
   var myInt = 1000.01;
   var myNull = null;
   
   document.writeln("<p><b>Javascript typeof()</b></p>");
   document.writeln("<p>Array: " + typeof(myArray) + "</p>");
   document.writeln("<p>Empty Array: " + typeof(myEmptyArray) + "</p>");
   document.writeln("<p>String: " + typeof(myString) + "</p>");
   document.writeln("<p>Empty String: " + typeof(myEmptyString) + "</p>");
   document.writeln("<p>Int: " + typeof(myInt) + "</p>");
   document.writeln("<p>null: " + typeof(myNull) + "</p>");
   
   document.writeln("<p><b>jQuery .type()</b></p>");
   document.writeln("<p>Array: " + $.type(myArray) + "</p>");
   document.writeln("<p>Empty Array: " + $.type(myEmptyArray) + "</p>");
   document.writeln("<p>String: " + $.type(myString) + "</p>");
   document.writeln("<p>Empty String: " + $.type(myEmptyString) + "</p>");
   document.writeln("<p>Int: " + $.type(myInt) + "</p>");
   document.writeln("<p>null: " + $.type(myNull) + "</p>");
    
  });
 </script> 
 
</head>
<body>
</body>
</html>