Programming Tutorials

Wednesday, 22 October 2014

Basic Hello Angular World Demo with AngularJS

AngularJS, Commonly referred to as Angular, is an open-source web application framework, maintained by Google and the community, that assists with creating single-page applications, which consist of one HTML page with CSS and JavaScript on the client side. Its goal is to simplify both development and testing of web applications by providing client-side model–view–controller (MVC) capability as well as providing structure for the entire development process, from design through testing.

See it in action

The below code is very basic implementation with AngularJs which displays 'Hello Angular World!' in your browser making use of it's MVC capability.

<!DOCTYPE html>
<html lang="en">


<head>
     <title>Hello World With AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myFirstAngJsDemo">


<div ng-controller="myController">

    <h2>Hello {{helloTo.title}}!</h2>

</div>


<script>
angular.module("myFirstAngJsDemo", [])
    .controller("myController", function($scope) {
        $scope.helloTo = {};
        $scope.helloTo.title = "Angular World";
    } );
</script>



</body>

</html>

Wednesday, 15 October 2014

JavaScript Closure Simple Explanation

Hi,

Most of people around here having little confusion in understanding the concept of JavaScript Closures. They get bemused by typical definition/explanation given on various online resources. So, Here I'll try to explain Closures in simple terms.

A Closure is nothing more than a function that has a reference to a private variable. Private variables can be made possible with closures.

For Eg. We've a function called myFunction()

function myFunction(myParam) //Constructor function

{

   this.myProp = myParam; 

}  



var myObj = new  myFunction("My Parameter"); //'myObj' is an object with type 'myFunction'



console.log(myObj.myProp); //Works correctly, Prints 'My Parameter'

Now, We make little modification to Constructor 'myFunction' like below

function myFunction(myParam) //Constructor function

{

   var myProp = myParam; // Changed from 'this.myProp' to 'var myProp'. It's a private variable & 'myProp' now exists only in the scope of 'myFunction' function  

}  



var myObj = new  myFunction("My Parameter"); //'myObj' is an object with type 'myFunction'



console.log(myObj.myProp); //It won't print 'My Parameter' but 'undefined' because 'myProp' is out of scope

Here comes Closure, So we can access 'var myProp' with the help of closure method like below.

function myFunction(myParam) //Constructor function

{

   var myProp = myParam; // It's a private variable & 'myProp' now exists only in the scope of 'myFunction' function  
   this.getMyProp = function(){ //It's a Closure which has a reference to the private varaiable 'var myProp'
          return myProp;
    };
 }  



var myObj = new  myFunction("My Parameter"); //'myObj' is an object with type 'myFunction'



console.log(myObj.getMyProp()); //Works correctly, Prints 'My Parameter'. This is achieved with the help of Closure.

That's it. This is called a JavaScript closure. It makes possible for a function to have Private variables. A closure is a function having access to the parent scope, even after the parent function has closed. So Private variables can be made possible with the help of closures. Hope You understood. Cheers..:)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Simple Responsive HTML5 Template</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div class="header-container">
            <header class="wrapper clearfix">
                <h1 class="title">h1.title</h1>
                <nav>
                    <ul>
                        <li><a href="#">nav ul li a</a></li>
                        <li><a href="#">nav ul li a</a></li>
                        <li><a href="#">nav ul li a</a></li>
                    </ul>
                </nav>
            </header>
        </div>

        <div class="main-container">
            <div class="main wrapper clearfix">

                <article>
                    <header>
                        <h1>article header h1</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
                    </header>
                    <section>
                        <h2>article section h2</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
                    </section>
                    <section>
                        <h2>article section h2</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
                    </section>
                    <footer>
                        <h3>article footer h3</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
                    </footer>
                </article>

                <aside>
                    <h3>aside</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
                </aside>

            </div> <!-- #main -->
        </div> <!-- #main-container -->

        <div class="footer-container">
            <footer class="wrapper">
                <h3>footer</h3>
            </footer>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

          </body>
</html>

HTML5 Canvas Simple Page Code With Demo

Hi,

Below source code helps you to create a text graphics with the help of HTML5 Canvas element tag.

See it in action

<!DOCTYPE html>
<html>
<body>

<canvas id="canvasId" width="595" height="105" style="border:1px solid;">
Sorry, Your browser does not support the HTML5 Canvas tag.</canvas>

<script>

var can = document.getElementById("canvasId");
var cont= can.getContext("2d");
cont.font = "55px Arial";
cont.fillStyle = "blue";
cont.fillText("Welcome To Jenson.in",20,75);

</script>

</body>
</html>

Tuesday, 14 October 2014

Very Simple HTML5 Sample Webpage.

Below contains sample code for a very simple HTML5 template.

See it in action

<!DOCTYPE html>

<html lang="en">

<head>

<title>A Very Simple HTML5 Webpage Template</title>

<meta charset="utf-8">



<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->



<style>

body {

    font-family: Verdana,

    sans-serif;

    font-size: 0.8em;

}

header, nav, section, article, footer {

    border: 1px solid blue;

    margin: 5px;

    padding: 8px;

}

nav ul {

    margin: 0;

    padding: 0;

}

nav ul li {

    display: inline;

    margin: 5px;

}

</style>

</head>



<body>



<header>

  <h1>This is a Very Simple HTML5 Sample Webpage</h1>

</header>



<nav>

<ul>

  <li><a href="#">Menu Link 1</a></li>

  <li><a href="#">Menu Link 2</a></li>

  <li><a href="#">Menu Link 3</a></li>

</ul>

</nav>



<article>



<h1>Main Header Of Article</h1>



<section>

<h2>Section 1</h2>

<p>Some Sample Texts in this Paragraph corresponds to the Section 1. You can include whatever you want here..:)</p>

</section>



<section>

<h2>Section 2</h2>

<p>Some Sample Texts in this Paragraph corresponds to the Section 2. You can include whatever you want here..:)</p>

</section>



<section>

<h2>Section 3</h2>

<p>Some Sample Texts in this Paragraph corresponds to the Section 3. You can include whatever you want here..:)</p>

</section>



</article>



<footer>

<p>&copy; 2014 myHTML5site.com</p>

</footer>



</body>

</html>

Programming Tutorials

Wednesday, 22 October 2014

Basic Hello Angular World Demo with AngularJS

See it in action

Wednesday, 15 October 2014

JavaScript Closure Simple Explanation

Simple HTML5 Responsive Template With Demo

See it in action

Download Simple HTML5 Responsive Mobile Friendly Template

HTML5 Canvas Simple Page Code With Demo

See it in action

Tuesday, 14 October 2014

Very Simple HTML5 Sample Webpage.

Below contains sample code for a very simple HTML5 template.

See it in action