Friday, April 25, 2014

Javascript example: add and remove elements from Array

This example show how to add/remove elements from array, using Javascript:

  • push(): Add new elements to the end of an array
  • pop(): Remove the last element of an array
  • unshift(): Add new elements to the beginning of an array
  • shift(): Remove the first element of an array
<!DOCTYPE html>
<html>
<body onload="doit();">

<h1>mobile-web-app.blogspot.com</h1>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3a"></p>
<p id="p3b"></p>
<p id="p4a"></p>
<p id="p4b"></p>
<p id="p5"></p>
 
<script type="text/javascript">
 
function doit()
{ var array = ['A', 'B', 'C', 'D'];
 document.getElementById("p1").innerHTML=array;
 
 array.push('E'); //Add element in end
 document.getElementById("p2").innerHTML="push('E'): " + array;
 
 var eleFirst = array.shift(); //remove first element
 document.getElementById("p3a").innerHTML="array.shift(): " + eleFirst;
 document.getElementById("p3b").innerHTML=array;
 
 var eleLast = array.pop();  //remove last element
 document.getElementById("p4a").innerHTML="array.pop(): " + eleLast;
 document.getElementById("p4b").innerHTML=array;
 
 array.unshift('a'); //Add element in front
 document.getElementById("p5").innerHTML="unshift('a'): " + array;
}
 
</script>
</body>
</html>


Friday, March 21, 2014

Set color using HTML5 color type input

Example to using HTML5 color type input, read with Javascript to change background color of page.

<!DOCTYPE html>
<html>
<body>
Select color: 
<input id="colorpick" type="color" name="favcolor" onchange="JavaScript:colorchanged()"><br>

<script type="text/javascript">

function colorchanged()
{
 console.log("colorchanged()");
 var colorval = document.getElementById("colorpick").value;
 console.log(colorval);
 document.body.style.background = colorval;
}

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

Friday, March 14, 2014

O'Reilly Webcast: Getting Started with HTML5 Canvas

This video introduce the basics of working with HTML5 canvas: how to create canvas draw lines, shapes and as time permits other canvas capabilities. This webcast talk is designed for people without a background with HTML 5 canvas.

Monday, January 27, 2014

Node.js the Right Way: Practical, Server-Side JavaScript That Scales


Get to the forefront of server-side JavaScript programming by writing compact, robust, fast, networked Node applications that scale. Ready to take JavaScript beyond the browser, explore dynamic languages features and embrace evented programming? Explore the fun, growing repository of Node modules provided by npm. Work with multiple protocols, load-balanced RESTful web services, express, 0MQ, Redis, CouchDB, and more. Develop production-grade Node applications fast.

JavaScript is the backbone of the modern web, powering nearly every web app's user interface. Node.js is JavaScript for the server. This book shows you how to develop small, fast, low-profile, useful, networked applications. You'll write asynchronous, non-blocking code using Node's style and patterns. You'll cluster and load balance your services with Node core features and third-party tools. You'll work with many protocols, creating RESTful web services, TCP socket clients and servers, and more.

This short book packs a hefty dose of Node.js. You'll test your code's functionality and performance under load. You'll learn important aspects of Node development--from its architecture and core, to its ecosystem of third-party modules. You'll discover how Node pairs a server-side event loop with a JavaScript runtime to produce screaming fast, non-blocking concurrency. Through a series of practical programming domains, you'll use the latest available ECMAScript Harmony features and harness key Node classes such as EventEmitter and Stream. Throughout the book, you'll develop real programs that are small, fast, low-profile, and useful.

Get ready to join a smart community that's rapidly advancing the state of the art in web development.

What You Need:

Latest stable release of Node.js, this book was written with 0.12.x in mind. The 0MQ (ZeroMQ) library, version 3.2 or higher.

Tuesday, December 24, 2013

jQuery and JavaScript Phrasebook

jQuery and JavaScript Phrasebook (Developer's Library) 

Get more done faster with jQuery and JavaScript! Brad Dayley’s jQuery and JavaScript Phrasebook brings together 100+ instantly useful code snippets and idioms for performing a wide spectrum of common web application tasks. This hands-on guide gets straight to the essence of what’s new and important in jQuery and JavaScript, and what you need to know to build new web solutions or migrate existing sites to jQuery.

Building on JavaScript Phrasebook, Dayley presents carefully tested, flexible, adaptable code - all organized for quick lookup and easy use. Dayley’s coverage ranges from the basics to advanced jQuery capabilities, including jQueryUI widgets and mobile development. Coverage includes:
  • Basics, including selecting and manipulating HTML elements with jQuery Selector
  • Dynamically manipulating CSS values
  • Handling browser and DOM events
  • Performing validation
  • Server communication
  • REST, PHP, MySQL, AJAX, and JSON/XML data
  • Positioning web page elements and making them interactive
  • Using animation and other special effects
  • And much more
jQuery and JavaScript Phrasebook is the perfect quick reference for millions of web developers who want reliable solutions they can use right now -- with no distractions and no diversions!

Friday, December 20, 2013

Getting Started with the Google Maps JavaScript API

This is a series of four videos walking you through getting started with the Google Maps JavaScript API (http://goo.gl/JnoETx).

The series covers:
- Creating a map
- Getting a Maps API key
- Using the key and the loader
- Walking through the basics of the code

Expert JavaScript

Expert JavaScript is your definitive guide to understanding how and why JavaScript behaves the way it does. Master the inner workings of JavaScript by learning in detail how modern applications are made. In covering lesser-understood aspects of this powerful language and truly understanding how it works, your JavaScript code and programming skills will improve. 

You will learn about core fundamentals of JavaScript, including deep dives into functions, scopes, closures, and practical object-oriented code. Mark Daggett explains clearly how closures, events, and asynchronous code really operate, as well as conventions and concepts to write JavaScript in a clear, pragmatic style. Many of the changes in ECMAScript6 and its implications are all explained. You'll be introduced to modern workflow tools to make application development faster, more enjoyable, and ostensibly more profitable. You'll understand how to measure code quality and write more testable JavaScript, and finally you'll learn about real-world applications of JavaScript, including JavaScript-powered robots.

JavaScript is one of the most powerful languages on the web today, and it is only getting stronger. This book will take you through the process of planning, coding, testing, profiling and finally releasing your application, at expert level. With more frameworks and more improvements than ever, now is the time to become an expert at JavaScript. Make this journey - use Expert JavaScript today.

What you’ll learn

  • What is really going on underneath functions, in arguments, types, coercion, and scope
  • How closures, events, and asynchronous code work at a fundamental level
  • How to understand advanced topics including promise objects, coroutines, and generators
  • How to apply this newfound knowledge pragmatically to build the very best modern JavaScript applications

Who this book is for


This book is for the experienced JavaScript programmer who wants to understand the how and why of their code in order to become a better developer. This book is not intended to teach JavaScript at a syntactical level, but instead delve deep into the code - the philosophy, the reasoning and the detailed expert-level knowledge behind it. This newfound knowledge will enable the reader to build the very best modern JavaScript applications.  It is for anyone who wants to become a better programmer by understanding at a very high level how the code works.

Table of Contents

  1. Objects and Prototypes
  2. Functions
  3. Getting Closure
  4. JavaScript Slang
  5. Living Asynchronously
  6. JavaScript IRL
  7. Pragmatic JavaScript Style
  8. Workflow
  9. Code Quality
  10. Improving Testability