Mobile-Web-App

Introduction to jQuery, from MicrosoftLearningExperiences

2014-11-27T12:27:00.000-08:00

jQuery 101: Learn exactly what jQuery is and why you've heard so much about it. Explore considerations, such as when to take jQuery as a dependency and how to include it locally or via a CDN, and find out about the history and contributors to this very popular JavaScript library.

Selection: Arguably the most powerful offering of jQuery over raw JavaScript, at least in the early days, was its ability to select one or more DOM elements using the popular CSS syntax. Take a look at this feature and how you can use it to select exactly what you need to manipulate.

Manipulating the DOM: Learn about selecting the elements you need, and see how to manipulate them.

Events: One of the other super helpful features of jQuery is its provision for event handling. See how to tie your code up to user events so that the right thing happens at the right time.

Effects: Effects give jQuery-enabled apps a little bit of jazz. Get the details on effects, like fades, slides, and other animations.

Ajax and Async: Modern web apps don't just do a fetch and then sit there. There are often a lot of behind-the-scenes calls to web services and other online content. Take a look at how jQuery covers this case.

Libraries: jQuery is obviously not the only library out there and may not be the right tool for the job. If you're wondering whether you should use it and curious about what other libraries it works well with, be sure to check out this module.

~ MicrosoftLearningExperiences

jQuery 2 Recipes: A Problem-Solution Approach

2014-10-22T19:11:00.002-07:00

jQuery 2 Recipes: A Problem-Solution Approach

jQuery is often referred to as the 'write less, do more' JavaScript library. It allows a few clear lines of elegant, well-tested, code to replace many pages of complex hand-coded script, speeding development times and providing substantial cost savings. You will find jQuery 2 Recipes' problem-solution approach to be an excellent value and a feature-packed resource as you begin to include jQuery in your own projects. This book is bursting with fully-worked example recipes showing the core jQuery frameworks (jQuery, jQuery Mobile, jQuery UI) in action. Starting with fundamental principals and progressing to more advanced topics you'll be shown how to make the very best use of jQuery every step of the way. Early on, you'll learn to work confidently with dynamic data and to handle the jQuery events that form the foundation of your application. We'll then build on this foundation to demonstrate how fully working user-interface animations and AJAX data-validation can be constructed within jQuery. We'll show how add-on libraries like jQwidgets can be deployed to create professional quality apps for both the desktop and web with minimal coding. Finally, a full set of debugging and error-handling recipes is included to help you track down bugs and ensure your code is as robust as it can be. What you'll learn This book contains a comprehensive collection of recipes that will help you solve a wide range of jQuery 2.0 problems. Follow working examples of the main features of all three core jQuery frameworks (jQuery, jQuery UI and jQuery Mobile) in action. See how to integrate jqWidgets into your application effectively. Learn the techniques to create and implement custom animations and effects

JavaScript & jQuery: The Missing Manual, 3rd Edition

2014-10-13T02:23:00.000-07:00

JavaScript & jQuery: The Missing Manual

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to learn. This easy-to-read guide not only covers JavaScript basics, but also shows you how to save time and effort with the jQuery and jQuery UI libraries of prewritten JavaScript code. You’ll build web pages that feel and act like desktop programs—with little or no programming.

The important stuff you need to know:

Pull back the curtain on JavaScript. Learn how to build a basic program with this language.
Get up to speed on jQuery. Quickly assemble JavaScript programs that work well on multiple web browsers.
Transform your user interface. Learn jQuery UI, the JavaScript library for interface features like design themes and controls.
Make your pages interactive. Create JavaScript events that react to visitor actions.
Use animations and effects. Build drop-down navigation menus, pop-ups, automated slideshows, and more.
Collect data with web forms. Create easy-to-use forms that ensure more accurate visitor responses.
Practice with living examples. Get step-by-step tutorials for web projects you can build yourself.

Chrome Dev Editor (developer preview) - tool for building apps on Chrome platform

2014-08-13T16:30:00.000-07:00

Chrome Dev Editor (CDE) is a developer tool for building apps on the Chrome platform - Chrome Apps and Web Apps, in JavaScript or Dart. CDE is built as a Chrome App written in Dart and uses Polymer. CDE runs on Windows, Mac, Linux, and Chrome OS! CDE supports Git, Polymer, and mobile development.

Install Chrome Dev Editor (developer preview) from Chrome Web Store.

Check out the video from Google I/O 2014 about building apps on the Chrome platform and how Chrome Dev Editor (CDE) is build.

Node.js Tutorial with Ryan Dahl, creator of Node.js

2014-08-07T23:57:00.001-07:00

Node.js example - retrieve dir and base using path module

2014-07-16T05:45:00.000-07:00

The "path" module contains utilities for handling and transforming file paths.

Example to using path module:

var http = require("http");
var path = require("path");
 
http.createServer(function(request, response){
 
 var dirname = path.dirname(decodeURI(request.url));
 var basename = path.basename(decodeURI(request.url));
 
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.write("Hello World! \n");
 response.write("from mobile-web-app.blogspot.com \n");
 
 response.write("dirname: " + dirname + "\n");
 response.write("basename: " + basename + "\n");
 
 response.end();
}).listen(8888);

Example of Javascript String comparison

2014-06-27T10:40:00.003-07:00

Example of Javascript String comparison:

<html>
<body>
<script>
console.log("mobile-web-app Javascript String comparison");
var result1 = 'abc'===new String('abc');
var result2 = 'abc'===new String('abc').toString();
var result3 = 'abc'== new String('abc');
var result4 = 'abc'== new String('abc').toString();

console.log("'abc'===new String('abc') : " + result1);
console.log("'abc'===new String('abc').toString() : " + result2);
console.log("'abc'== new String('abc') : " + result3);
console.log("'abc'== new String('abc').toString() : " + result4);
</script>

</body>
</html>

Polymer: making Web Components accessible

2014-06-19T15:00:00.001-07:00

Custom elements allow you to create your own encapsulated components on the web, however there are a number of questions that arise from this. How do you build elements that are accessible to everyone? Can they be navigated with a keyboard? How well do they work with screenreaders and ARIA? Learn how to create accessible elements that all your users can benefit from.

Polymer: Interacting with Google Services with HTML only

2014-06-18T22:37:00.000-07:00

Google has over 250 APIs and services. Every API is different! Eric Bidelman shows you how you can interact with Google services without writing code!

Node.js + socket.io, emit events between server and client, bi-directionally.

2014-06-17T09:16:00.001-07:00

server.js

var serverapp = require('http').createServer(handler);
var io = require('socket.io').listen(serverapp);
var fs = require('fs');

serverapp.listen(8888);

function handler (req, res) {
    fs.readFile("page.html",
        function (err, data) {
            if (err) {
                throw err; 
            }
            res.writeHead(200);
            res.end(data);
        });
}

io.sockets.on("connection", function (socket) {
    socket.on("event_button_clicked", function (data) {
        console.log(data.text);
        io.sockets.emit("event_upatetext", { value: "hello " + data.text});
    });
});

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>

<form action="">
<input 
    type="text" id="intext"><br>
<input 
    type="button" 
    id="button1" 
    value="Click ME" 
    onclick="button_clicked(this);">
</form>
<p id="outtext"></p>

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect(document.location.href);

function button_clicked(button)
{
    socket.emit(
        "event_button_clicked", 
        { text: document.getElementById("intext").value });
}

socket.on("event_upatetext", function (data) {
    console.log("event_upatetext" + ": " + data.value);
    document.getElementById("outtext").innerHTML = data.value;
});
</script>

</body>
</html>

Node.js + socket.io, receive data from client

2014-06-15T08:01:00.002-07:00

Example to get data from client using Node.js + socket.io.

To use socket.io, you have to install it using npm
$ npm install socket.io

server.js

var serverapp = require('http').createServer(handler);
var io = require('socket.io').listen(serverapp);
var fs = require('fs');

serverapp.listen(8888);

function handler (req, res) {
    fs.readFile("page.html",
        function (err, data) {
            if (err) {
                throw err; 
            }
            res.writeHead(200);
            res.end(data);
        });
}

io.sockets.on("connection", function (socket) {
    socket.on("event_button_clicked", function (data) {
        console.log(data.text);
    });
});

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>

<form action="">
<input 
    type="text" id="intext"><br>
<input 
    type="button" 
    id="button1" 
    value="Click ME" 
    onclick="button_clicked(this);">
</form>

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect(document.location.href);

function button_clicked(button)
{
    socket.emit(
        "event_button_clicked", 
        { text: document.getElementById("intext").value });
}
</script>

</body>
</html>

Node.js example to handle POST method

2014-06-14T09:55:00.001-07:00

server.js

var http = require("http");
var fs = require('fs');

fs.readFile('page.html',function (err, data){

    if (err) {
        throw err;  
    }
    var htmlBody = data;
    
    http.createServer(function(request, response){
        
        console.log("request.method: " + request.method);

        request.on("data", function (data) {
            console.log("data: " + data);   
        });
        
        request.on('end', function () {
            console.log("end:");
            response.writeHead(200, {"Content-Type": "text/html"});
            response.write(htmlBody);
            response.end();
        });
    
    }).listen(8888);
        
});

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>

<form method="POST">
Input: 
<input type="text" name="intext"><br>
<input type="submit" value="POST">
</form>

</body>
</html>

Node.js load external html file

2014-06-12T12:29:00.001-07:00

Example to load html code from external file, instead of code in js.

server.js

var http = require("http");
var fs = require("fs");

http.createServer(function(request, response){
    
    fs.readFile("page.html", function (err, data){
        if (err) {
            throw err; 
        }
        response.writeHead(200, {"Content-Type": "text/html"});
        response.write(data);
        response.end();
    });
    
}).listen(8888);

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>
</body>
</html>

Return html code in Node.js

2014-06-12T09:56:00.000-07:00

var http = require("http");

http.createServer(function(request, response){
    
    var htmlbody = 
        "<html>" +
        "<head>" +
        "</head>" +
        "<body>" +
        "<h1>Hello World!</h1>" +
        "<p>from mobile-web-app.blogspot.com</p>" + 
        "</body>" +
        "</html>";
        
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(htmlbody);
    response.end();
}).listen(8888);

- Node.js load external html file

Get date in Node.js using Javascript

2014-06-11T11:17:00.002-07:00

To get date in Node.js, we can use javascript's Date object.

Example:

var http = require("http");
var url = require("url");

http.createServer(function(request, response){
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write("Hello World!\n");
    response.write("from mobile-web-app.blogspot.com\n\n");
    
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth();
    var date = now.getDate();

    response.write(
        now + "\n");
    response.write(
        date + "/" + (month+1) + "/" + year + "\n");

    response.end();
}).listen(8888);

"Hello World", http server using Node.js

2014-06-10T07:09:00.002-07:00

A simplest http server implemented using Node.js.

Create file node server.js.

var http = require("http");

http.createServer(function(request, response){
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.write("Hello World! ");
 response.write("from mobile-web-app.blogspot.com");
 response.end();
}).listen(8888);

Run

$ node server.js

Then visit http://localhost:8888/ in browser to load "Hello World".

Implement fade-in/fade-out effect with jQuery

2014-06-09T03:36:00.002-07:00

Example to implement fade-in/fade-out effect using jQuery:

<!DOCTYPE html>
<head>
</head>
<body>
    <h1 id="titleh1">Fade-in/Fade-out example</h1>
    <button id="go">Run</button>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){

            function runFadeOutFadeIn(){

                $("#titleh1").fadeTo(
                    "slow", 0, function(){
                        $("#titleh1").fadeTo(
                            "slow", 1, function(){});
                    });
            }
            
            $("#go").click(
                function(){
                    runFadeOutFadeIn();
                });
        });
    </script>
</body>
</html>

The Mystery And Magic Of APIs

2014-05-13T02:30:00.000-07:00

What's an application programming interface, or API? You may not realize it, but every time you're using an app, you're connecting to all kinds of APIs. In this video, ReadWrite editor-in-chief explains what APIs are and why they matter to the Internet. (Presented by Intel)

ReadWriteExplain: The Mystery And Magic Of APIs

Where is variable defined, in JavaScript scope.

2014-04-30T08:16:00.005-07:00

Whether you're coming to JavaScript from another language, or you're learning JavaScript as your first language, the way scope works -- that is, when and where your variables are defined -- might surprise you.

Apply function to array elements to create another array, map()

2014-04-26T22:09:00.001-07:00

This example show how to create array by applying function to a existing array, using map().

<!DOCTYPE html>
<html>
<body onload="doit();">

<h1>mobile-web-app.blogspot.com</h1>
<p id="p1"></p>
<div id="resultdiv"></div>
 
<script type="text/javascript">
 
function doit()
{   var array = [0, 45, 90, 180, 270, 360];

    document.getElementById("p1").innerHTML=array;
    var resultDiv = document.getElementById("resultdiv");
    
    var array2 = array.map(function(x) {return Math.sin(x * (Math.PI / 180))});
    printAll(array2, resultDiv);
    
    var array3 = array.map(cos);
    printAll(array3, resultDiv);
    
}

function cos(x){
    return Math.cos(x * (Math.PI / 180));
}

function printAll(arr, container){
    arr.forEach(
        function(element, index){
            var newP = document.createElement("p");
            newP.innerHTML = index + " : " + element;
            container.appendChild(newP);
        }
    );
}

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

Javascript example: access all elements in array using forEach()

2014-04-26T19:10:00.002-07:00

Javascript example to access all elements in array using forEach().

<!DOCTYPE html>
<html>
<body onload="doit();">

<h1>mobile-web-app.blogspot.com</h1>
<p id="p1"></p>
<div id="resultdiv"></div>
 
<script type="text/javascript">
 
function doit()
{   var array = [1, 'a', 'BCD', 3.1416];

    document.getElementById("p1").innerHTML=array;
    
    var resultDiv = document.getElementById("resultdiv");
    
    array.forEach(
        function(element, index){
            var newP = document.createElement("p");
            newP.innerHTML = index + " : " + element + " : " + typeof(element);
            resultDiv.appendChild(newP);
        }
    );
}
 
</script>
</body>
</html>

Join array elements to a string

2014-04-25T17:27:00.001-07:00

The join() method joins the array elements into a string.

Example:

<!DOCTYPE html>
<html>
<body onload="doit();">

<h1>mobile-web-app.blogspot.com</h1>
<p id="p1"></p>
<p id="p1a"></p>
<p id="p1b"></p>
<p id="p1c"></p>
<p id="p1d"></p>
<p id="p2"></p>
<p id="p3"></p>
 
<script type="text/javascript">
 
function doit()
{   var array = [1, 'a', 'BCD', 3.1416];

    document.getElementById("p1").innerHTML=array;
    
    document.getElementById("p1a").innerHTML=array[0] + ": " + typeof(array[0]);
    document.getElementById("p1b").innerHTML=array[1] + ": " + typeof(array[1]);
    document.getElementById("p1c").innerHTML=array[2] + ": " + typeof(array[2]);
    document.getElementById("p1d").innerHTML=array[3] + ": " + typeof(array[3]);
    
    var array2 = array.join('+');
    
    document.getElementById("p2").innerHTML="array.join('+'): " + array2 + ": " + typeof(array2);
    document.getElementById("p3").innerHTML="array.join(''): " + array.join('');
    
}
 
</script>
</body>
</html>

Javascript example: add and remove elements from Array

2014-04-25T00:15:00.001-07:00

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>

Set color using HTML5 color type input

2014-03-21T07:05:00.000-07:00

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>

O'Reilly Webcast: Getting Started with HTML5 Canvas

2014-03-14T17:40:00.002-07:00

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.