Shalvin Interests: February 2016

Tuesday, February 23, 2016

JavaScript Basics

GetElementById

<html>
<head>
    <title></title>
    <script>
        window.onload = function()
        {
            document.getElementById("Hello").innerHTML = "Shalvin P D";
        }
    </script>
</head>
<body>
    <div id="Hello"></div>
</body>
</html>

Check whether Cookie is enabled

<script>
        window.onload = function () {
            if (navigator.cookieEnabled) {
                alert("This browser supports cookies");
            }
            else {
                alert("This browser does not support cookies");
            }
        }
    </script>

typeof

 function NumberEg()
        {
             var fare = 22.50;
            alert(typeof fare);
        }

output : numeric

Strings

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script>
        function ConcatEg()
        {
            alert("Shalvin" + ' P D');
        }

        function Embed()
        {
            alert("Shalvin \"P  D\"");
        }

        function EmbedSingleQuote()
        {
            alert('Merin\'s assignment');
        }

        function LengthEg()
        {
            var name = 'Simi Simon';
            alert(name.length);
        }

        function TrimEg()
        {
            var name = ' Shibin ';
            alert('[' + name.trim() + ']');
            alert('[' + name + ']');
        }
        function toLowerEg() {
            var name = 'Sreelakshmi S';
            alert(name.toLocaleLowerCase());
        }
        function toUpperCaseEg() {
            var name = 'soorya';
            alert(name.toUpperCase());
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p>
        <br />
        <asp:Button OnClientClick ="ConcatEg()" ID="btnSD" runat="server" Text="Single and Double Quote" />
    </p>
    <p>
        <asp:Button OnClientClick ="Embed()" ID="btnEmbed" runat="server" Text="Embed Double Quotes" />
    </p>
    <p>
        <asp:Button OnClientClick ="EmbedSingleQuote()" ID="btnEmbedSingle" runat="server" Text="Embed Single Quote" />
    </p>
    <p>
        <asp:Button OnClientClick="LengthEg()" ID="btnLength" runat="server" Text="Length" />
    </p>
    <p>
        <asp:Button Text="trim" runat="server" OnClientClick ="TrimEg()" />
    </p>
    <p>
    <asp:Button OnClientClick="toLowerEg()" Text="toLower" runat="server" />

        </p>
    <p>
    <asp:Button Text="toUpperCase" OnClientClick="toUpperCaseEg()" runat="server" />
        </p>
</asp:Content>

JavaScript Arrays

<script>
        var friends = [];
        friends[0] = 'Praseed';
        friends[1] = 'Pai'

        window.onload = function()
        {
              document.write(friends[0]);
        }
    </script>

Push for adding items to Array

<script>
        var friends = [];
        friends[0] = 'Praseed';
        friends[1] = 'Pai'
        friends.push('Vaisakh');

        window.onload = function()
        {
            document.write(friends[0] + "<br/>");
            document.write(friends[2]);
        }
    </script>

Pop

 <script>
        var friends = [];
        friends[0] = 'Praseed';
        friends[1] = 'Pai'
        friends.push('Vaisakh');
        friends.pop();

        window.onload = function()
        {
            document.write(friends[0] + "<br/>");
            document.write(friends[2]);
        }
    </script>

Iterating an Array

<script>
        var friends = [];
        friends[0] = 'Praseed';
        friends[1] = 'Pai'
        friends.push('Vaisakh');
        
        window.onload = function()
        {
            for (var i = 0; i < friends.length; i++) {
                document.write(friends[i] + "<br/>");
            }
        }
    </script>

Asp .Net JavaScript Example

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ArrayPushDisplayShalvin.aspx.cs" Inherits="ArrayPushDisplayShalvin" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <script>
     var Friends = ['Shalvin', 'Reny', 'Praseed'];
     window.onload = function () {
         SetFocusOnTextBox();
         Display();
     }
     function Display()
     {
         var lbl = document.getElementById("lblMessage");
         lbl.innerHTML = "";
         for (var i = 0; i < Friends.length; i++) {
             lbl.innerHTML += Friends[i] + "<br/>";
             //lbl.innerText += Friends[i] + "<br/>";
     }
         return false;
     }
     function Save()
     {
         var s = document.getElementById("txtName");
         Friends.push(s.value);
         Display();
         s.value = "";
         s.focus();
         return false;
     }

     function SetFocusOnTextBox()
     {
         var s = document.getElementById("txtName");
         s.focus();
     }

     function Delete() {
         Friends.pop();
         Display();
         return false;
     }
 </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p>
        Name
        <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox>
    </p>
    <p>
        <asp:Button ID="btnSave" OnClientClick ="return Save()" runat="server" Text="Save " ClientIDMode="Static" />
&nbsp;
        <asp:Button ID="btnDeleteFromLast" runat="server" 
            OnClientClick ="return Delete()"
            ClientIDMode="Static" Text="Delete from Last" />
&nbsp;
        <asp:Button ID="btnDisplay" runat="server" Text="Display" 
            OnClientClick ="return Display()" ClientIDMode="Static" OnClick="btnDisplay_Click" />
    </p>
    <p>
        <asp:Label ID="lblMessage" runat="server" 
            ClientIDMode="Static"></asp:Label>
        <br />
    </p>
</asp:Content>

JavaScript Objects

I am creating an object.

<head>
    <script>
        var Contact = {};
        Contact.Name = "Shalvin P D";
        window.onload = function () {
            alert(Contact.Name);
        }
    </script>
</head>
<body>
</body>

Another way of doing the same:

<head>
    <title></title>
    <script >
        var Contact = {Name : "Shalvin P D"};
            window.onload = function () {
            alert(Contact.Name);
        }
    </script>
</head>
<body>

</body>

Let's have few more properties

<head>
    <title></title>
    <script >
        var Contact = {Name : "Shalvin P D", Location : "Kochi"};
            window.onload = function () {
            alert("I am " + Contact.Name + " located at " + Contact.Location);
        }
    </script>
</head>
<body>

</body>

If I try to alert something like Contact.Specialization we get undefined. Because Specialization doesn't exist in Contact.

Bracket Notation

<head>
       <script>
        var Contact = {};
        Contact["Name"] = "Shalvin P D";
        window.onload = function () {
            alert(Contact.Name);
        }
    </script>
</head>

Iterating through properties using for in

<script>
        var Contact = {Name : "Shalvin P D", Location : "Kochi", Specialization:".Net"};
        window.onload = function () {
            for (var key in Contact) {
               document.write(key + "<br/>");
            }
        }
</script>

Iterating through property values

  <script>
        var Contact = {Name : "Shalvin P D", Location : "Kochi", Specialization:".Net"};
        window.onload = function () {
            for (var key in Contact) {
                document.write(Contact[key]);
            }
        }
    </script>

Wednesday, February 17, 2016

AngularJS Part 3 : Filters

<body ng-app="">
    <ul ng-init="name=['Shalvin','Reny John Jose', 'John James','Prakash Jacob Mathew']">
        <li ng-repeat="x in name">{{x | uppercase }}</li>

    </ul>
 </body>

<body ng-app="">
    Name <input type="text" ng-model="namef" />
    <ul ng-init="name=['Shalvin','Reny John Jose', 'John James','Prakash Jacob Mathew','Anson']">
        <li ng-repeat="x in name | filter:namef">{{x}}</li>
    </ul>
</body>

Filter and OrderBy

<body ng-app="">
    Name <input type="text" ng-model="namef" />
    <ul ng-init="name=['Shalvin','Reny John Jose', 'John James','Prakash Jacob Mathew','Anson']">
        <li ng-repeat="x in name | filter:namef | orderBy:x">{{x}}</li>
    </ul>
</body>

Saturday, February 6, 2016

AngularJS Part 2 : Controllers

<html ng-app="myApp">
<head >
    <title></title>
    <script src="Scripts/angular.js"></script>
</head>
<body ng-controller="HomeCtrl">
         <div>
            <ul>
                <li ng-repeat="x in Friends">{{x}}</li>
            </ul>
         </div>
    <script>
        var app = angular.module("myApp", [])
        .controller("HomeCtrl", function ($scope) {
            $scope.Friends = ['Shalvin', 'Pankaj', 'Praseed'];
        });
    </script>
</body>
</html>

Controller in separate JavaScript file
App.js

var app = angular.module("myApp", [])
.controller("HomeCtrl", function ($scope) {
    $scope.Friends = ['Shalvin', 'Pankaj', 'Praseed'];
});

index.htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>

    <script src="Apps/App.js"></script>
</head>
<body ng-controller="HomeCtrl">
    <ul>
        <li ng-repeat="x in Friends">{{x}}</li>
    </ul>
</body>

Controller Complex Array
AppComplex.js

var app = angular.module("myApp", [])
.controller("HomeCtrl", function ($scope) {
    $scope.Friends = [{ Name: 'Shalvin', Location: 'Kochi' },
        {Name:'Pankaj', Location :'NCR'},
        {Name:'Praseed', Location:'Alwaye'}];
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/AppComplex.js"></script>
</head>
<body ng-controller="HomeCtrl">

    <ul>
        <li ng-repeat="x in Friends">{{x.Name}} located  at {{x.Location}}</li>
    </ul>
</body>
</html>