Mobile-Web-App

Friday, January 6, 2012

Access HTML elements from JavaScript, using document.getElementById().

To access HTML elements with ID from JavaScript, we can use document.getElementById(). It's a example to change the text in HTML.

<!doctype html>
<head>
 <title>Mobile-Web-App: Test Javascript</title>
 <meta charset="utf-8">

<script>
function myOnLoad(){
 var myMsg = document.getElementById("msg");
 msg.innerHTML = "Nice to me you:)";
}

window.onload = myOnLoad;
  
</script> 
 
 
</head>
<body>
<h1>Mobile-Web-App: Test Javascript</h1>
<p>How to access HTML elements from JavaScript, using document.getElementById().</p>

<p id="msg">Hello JavaScript!</p>




</body>
</html>

Remark:
- If we place JavaScript code in <head>, it will be executed before the page loaded. So it cannot find the id. That's why we implement our job in a function myOnLoad(), and call the function once page load finished. The code "window.onload = myOnLoad" means once the document loaded, call the function with name of myOnLoad.

- To change the text in HTML document, we can set innerHTML property of the element.

Thursday, January 5, 2012

NetBeans IDE 7.1 Overview

Find out what is new and cool in the latest NetBeans 7.1 release. The NetBeans IDE is an integrated development environment for software developers. It provides the tools you need to create professional desktop, enterprise, web, and mobile applications with the Java language, as well as PHP, JavaScript, Groovy and Grails, and C/C++.

NetBeans IDE introduces support for JavaFX 2.0 by enabling the full compile/debug/profile development cycle for JavaFX 2.0 applications. The release also provides significant Swing GUI Builder enhancements, CSS3 support, and tools for visual debugging of Swing and JavaFX user interfaces. Additional highlights include Git support integrated into the IDE, new PHP debugging features, various JavaEE and Maven improvements, and more.

http://netbeans.org/

Wednesday, January 4, 2012

Where to place Javascript in HTML web page

Javascript can be placed in <head> or <body>. It can be Javascript code in HTML file, in-between <script> and </script>. Or link to external javascript file using src attribute.

Place Javascript code in <head>. It will be executed as long as the browser parses the head; before the page body loaded.

<!doctype html>
<head>
 <title>Mobile-Web-App: Test Javascript</title>
 <meta charset="utf-8">
 
 <!-- Place Javascript code in <head> -->
 
 <!-- Place Javascript code here directly -->
 <script>
  alert("Hello All:) - It's Javascript in <head>."); 
 </script>
 
 <!-- Link to external Javascript -->
 <script src="extJavascript.js">
 </script>
 
</head>
<body>
<h1>Mobile-Web-App: Test Javascript</h1>
<p>Where to add Javascript in HTML: in <head></p>

</body>
</html>

Place Javascript in head, link to external .js file

Place Javascript code in <body>.

<!doctype html>
<head>
 <title>Mobile-Web-App: Test Javascript</title>
 <meta charset="utf-8">
</head>
<body>
<h1>Mobile-Web-App: Test Javascript</h1>
<p>Where to add Javascript in HTML: in <body></p>

 <!-- Place Javascript code in <body> -->
 
 <!-- Place Javascript code here directly -->
 <script>
  alert("Hello All:) - It's Javascript in <body>."); 
 </script>
 
 <!-- Link to external Javascript -->
 <script src="extJavascript.js">
 </script>

</body>
</html>

extJavascript.js

alert("Alert from External Javascript");

Head First HTML5 Programming: Building Web Apps with JavaScript

HTML has been on a wild ride. Sure, HTML started as a mere markup language, but more recently HTML’s put on some major muscle. Now we’ve got a language tuned for building web applications with Web storage, 2D drawing, offline support, sockets and threads, and more. And to speak this language you’ve got to go beyond HTML5 markup and into the world of the DOM, events, and JavaScript APIs.

Now you probably already know all about HTML markup (otherwise known as structure) and you know all aboutCSS style (presentation), but what you’ve been missing is JavaScript (behavior). If all you know about are structure and presentation, you can create some great looking pages, but they’re still just pages. When you add behavior with JavaScript, you can create an interactive experience; even better, you can create full blown web applications.

Head First HTML5 Programming is your ultimate tour guide to creating web applications with HTML5 and JavaScript, and we give you everything you need to know to build them, including: how to add interactivity to your pages, how to communicate with the world of Web services, and how to use the great new APIs being developed for HTML5.

Here are just some of the things you’ll learn in Head First HTML5 Programing:

Learn how to make your pages truly interactive by using the power of the DOM.
Finally understand how JavaScript works and take yourself from novice to well-informed in just a few chapters.
Learn how JavaScript APIs fit into the HTML5 ecosystem, and how to use any API in your web pages.
Use the Geolocation API to know where your users are.
Bring out your inner artist with Canvas, HTML5’s new 2D drawing surface.
Go beyond just plugging a video into your pages, and create custom video experiences.
Learn the secret to grabbing five megabytes of storage in every user’s browser.
Improve your page’s responsiveness and performance with Web workers.
And much more.

Monday, January 2, 2012

iOS Development using MonoTouch Cookbook

Over 100 recipes for developing and deploying applications for the iOS using C# and .NET

Detailed examples covering every aspect of iOS development using MonoTouch and C#/.NET
Create fully working MonoTouch projects using step-by-step instructions.
Recipes for creating iOS applications meeting Apple's guidelines.

In Detail

MonoTouch brings the amazing revenue opportunities of Apple's billion dollar app store to C# and .NET developers.

This cookbook leaves no stone unturned, providing you with practical recipes covering user interfaces, data management, multimedia , web services, and localization, right through to application deployment on the app store.

Whatever the area of MonoTouch iOS development you need to know about, you will find a recipe for it in this cookbook. Minimum theory and maximum practical action defines this book. It is jam packed with recipes for interacting with the device hardware, like the GPS, compass and the accelerometer. Recipes for those all important real word issues are covered such as reading and responding to battery state. It is the essential cookbook for C# and .NET developers wanting to be part of the exciting and lucrative world of iOS development.

What you will learn from this book

Create applications specifically designed for the iPad.
Consume .NET web services, including WCF.
Capture and manage multimedia resources using the device's camera and microphone.
Use the accelerometer to capture and respond to device movements.
Create location-aware applications using the built-in GPS, compass and mapping features.
Create graphics and animation for powerful applications.
Effectively use multitasking features to provide a user-friendly experience.
Target worldwide audience with localization techniques and deploy to the App Store.

Approach

The book is written in a cookbook style, presenting examples in the style of recipes, allowing you to go directly to your topic of interest, or follow topics throughout a chapter to gain in-depth knowledge.

Sunday, January 1, 2012

CSS: Universal Selector

Universal selector is "*". The CSS rule in universal selector will be applied to all elements in the document.

Example:

<html>
<head>
  <title>Mobile-Web-App</title>
  <style>

#marketplace{
 background-image: url("marketplace.png");
}
#live{
 background-image: url("live.png");
}
#bugzilla{
 background-image: url("bugzilla.png");
}
#forums{
 background-image: url("forums.png");
}
#planet{
 background-image: url("planet.png");
}
#wiki{
 background-image: url("wiki.png");
}
#portal{
 background-image: url("portal.png");
}

*{
 height:50px;
 background-repeat: no-repeat;
 background-position: bottom right;
}
  </style>
</head>
<body>

<h1>Mobile-Web-App: Universal Selector</h1>
<div id="marketplace">marketplace</div>
<div id="live">live</div>
<div id="bugzilla">bugzilla</div>
<div id="forums">forums</div>
<div id="planet">planet</div>
<div id="wiki">wiki</div>
<div id="portal">portal</div>

</body>
</html>

CSS: ID Selector

ID selector begins with a '#'. It's a example:

<html>
<head>
<title>Mobile-Web-App</title>
<style>

#marketplace{
 background-image: url("marketplace.png");
}
#live{
 background-image: url("live.png");
}
#bugzilla{
 background-image: url("bugzilla.png");
}
#forums{
 background-image: url("forums.png");
}
#planet{
 background-image: url("planet.png");
}
#wiki{
 background-image: url("wiki.png");
}
#portal{
 background-image: url("portal.png");
}

.placeBottomRight{
 height:50px;
 background-repeat: no-repeat;
 background-position: bottom right;
}
</style>
</head>
<body>

<h1>Mobile-Web-App: CSS ID Selector</h1>
<div id="marketplace" class="placeBottomRight">marketplace</div>
<div id="live" class="placeBottomRight">live</div>
<div id="bugzilla" class="placeBottomRight">bugzilla</div>
<div id="forums" class="placeBottomRight">forums</div>
<div id="planet" class="placeBottomRight">planet</div>
<div id="wiki" class="placeBottomRight">wiki</div>
<div id="portal" class="placeBottomRight">portal</div>

</body>
</html>