Mobile-Web-App: June 2014

Friday, June 27, 2014

Example of Javascript String comparison

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>

Thursday, June 19, 2014

Polymer: making Web Components accessible

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.

Wednesday, June 18, 2014

Polymer: Interacting with Google Services with HTML only

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!

Tuesday, June 17, 2014

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

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>

Sunday, June 15, 2014

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

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>

Saturday, June 14, 2014

Node.js example to handle POST method

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>

Thursday, June 12, 2014

Node.js load external html file

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

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

Wednesday, June 11, 2014

Get date in Node.js using Javascript

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);

Tuesday, June 10, 2014

"Hello World", http server using Node.js

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".

Monday, June 9, 2014

Implement fade-in/fade-out effect with jQuery

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>