Search This Blog

Monday, February 22, 2016

Thumbnail image gallery using javascript

 Step1:

 Thumbnail image gallery using javascript




Step2:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style type="text/css">
        .imgStyle
        {
            width:100px;
            height:100px;
            border:3px solid grey;
        }
        .next, .prev {
            cursor:pointer;
         height:50px;
         width:40px;
         border:none;
         outline:none;
        }
        .next
        {
         position:relative;
         top:-390;   
         right:-492px;
         background:url(img/1456158952_ic_navigate_next_48px.svg) no-repeat 0 0;
   
        }
        .prev
        {
         position:relative;
              top:-390;   
             left:-49px;
           
                  background:url(img/1456159559_ic_keyboard_arrow_left_48px.svg) no-repeat 0 0;
           
        }
       

    </style>
</head>
<body>
    <img id="mainImage" style="border:3px solid grey"
         src="img/1.jpg" height="500px" width="540x"/>
    <br />
    <div id="divId" onClick="changeImageOnClick(event)">
        <img class="imgStyle" src="img/1.jpg" />
        <img class="imgStyle" src="img/2.jpg" />
        <img class="imgStyle" src="img/3.jpg" />
        <img class="imgStyle" src="img/4.jpg"  />
        <img class="imgStyle" src="img/5.jpg"  />
    </div>
    <input type="hidden" id="hdCount" value="0"/>
    <input type="button" class="next" id="divId" onClick="nextImageOnClick(event)" />
     <input type="button" class="prev" id="divId" onClick="prevImageOnClick(event)"/>
    <script type="text/javascript">

        var images = document.getElementById("divId")
                             .getElementsByTagName("img");

        for (var i = 0; i < images.length; i++)
        {
            images[i].onmouseover = function ()
            {
                this.style.cursor = 'hand';
                this.style.borderColor = 'red';
            }
            images[i].onmouseout = function ()
            {
                this.style.cursor = 'pointer';
                this.style.borderColor = 'grey';
            }
        }

        function changeImageOnClick(event)
        {
           
            event = event || window.event;
       
            var targetElement = event.target || event.srcElement;

            if (targetElement.tagName == "IMG")
            {
                 mainImage.src = targetElement.getAttribute("src");
            }
        }
       
         function nextImageOnClick(event)
         {
            var count=parseInt($("#hdCount").val()) + 1;
            if(count < $("#divId img").length )
            {
            $("#hdCount").val(count);
           
           
            var x=$("#divId img").eq(count);
   
            mainImage.src= x.attr('src');
       
            }
         }
          
         function prevImageOnClick(event)
         {
            var count=parseInt($("#hdCount").val()) - 1;
            if(count >= 0 )
            {
            $("#hdCount").val(count);
            var x=$("#divId img").eq(count);
           
            mainImage.src= x.attr('src');
            }
         }
    </script>
</body>
</html>


Step3:


Enjoy folks
at 1 comment:

Wednesday, February 17, 2016

Difference between ‘return false;’ and ‘e.preventDefault();’

Step1:


Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:

$("a").click(function() {
   $("body").append($(this).attr("href"));
   return false;
}

Step2:

That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:

$("a").click(function(e) {
   $("body").append($(this).attr("href"));
   e.preventDefault();
}
 

So what's the difference?

The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or "bubbling up") the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let's say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:



 e.preventDefault();
 
click(function(e) - E is Event
 
 

Step3:

e.preventDefault();- Event prevent Default 

 
when you specify  function(e) - it trigger only the current event of the function.
 
and stop current event function.
 

return false - Stop all the events including parent child everything in function

 
when you specify  return False - it trigger entire event to stop.
 

Step4:

 


Enjoy Folks
at No comments:

Wednesday, February 3, 2016

JavaScript Object Oriented Programming(OOP) Tutorial

Object Oriented Programming is one of the most popular ways in programming. Before OOP’s, list of instructions will be executed one by one. But in OOP’s we are dealing with Objects and how those objects interact with one another.


JavaScript Object Oriented Programming(OOPs) Tutorial


JavaScript supports Object Oriented Programming but not in the same way as other OOP languages(c++, php, Java, etc.) do. The main difference between JavaScript and the other languages is that, there are no Classes in JavaScript whereas Classes are very important for creating objects. However there are ways through which we can simulate the Class concept in JavaScript.
Another important difference is Data Hiding. There is no access specifier like (public, private and protected) in JavaScript but we can simulate the concept using variable scope in functions.

Object Oriented Programming Concepts

1) Object
2) Class
3) Constructor
4) Inheritance
5) Encapsulation
6) Abstraction
7) Polymorphism

Preparing the work space

Create a new file "oops.html" and write this code on it. We will write all our JavaScript code on this file. 
    

  1. <html>
    2. 

  2. <head>
    3. 

  3.  <title>JavaScript Object Oriented Programming(OOPs) Tutorial</title>
    4. 

  4. </head>
    5. 

  5. <body>
    6. 

  6. <script type="text/javascript">
    7. 

  7. //Write your code here.....
    8. 

  8. </script>
    9. 

  9. </body>
    10. 

  10. </html>
    11.

1) Object

Any real time entity is considered as an Object. Every Object will have some properties and functions. For example consider a person as an object, then he will have properties like name, age, etc., and functions such as walk, talk, eat, think, etc. now let us see how to create objects in JavaScript. As mentioned previously there are so many ways to create objects in JavaScript like: 
    

  1. //1)Creating Object through literal
    2. 

  2. var obj={};
    3. 

  3. //2)Creating with Object.create
    4. 

  4. var obj= Object.create(null);
    5. 

  5. //3)Creating using new keyword
    6. 

  6. function Person(){}
    7. 

  7. var obj=new Person();
    8.
We can use any of the above way to create Object.

2) Class

As I said earlier there are no classes in JavaScript as it is Prototype based language. But we can simulate the class concept using JavaScript functions. 
    

  1. function Person(){
    2. 

  2.  //Properties 
    3. 

  3.  this.name="aravind";
    4. 

  4.  this.age="23";
    5. 

  5.  //functions
    6. 

  6.  this.sayHi=function(){
    7. 

  7.   return this.name +" Says Hi";
    8. 

  8.  }
    9. 

  9. }
    10. 

  10. //Creating person instance
    11. 

  11. var p=new Person();
    12. 

  12. alert(p.sayHi());
    13.

3) Constructor

Actually Constructor is a concept that comes under Classes. Constructor is used to assign values to the properties of the Class while creating object using new operator. In above code we have used name and age as properties for Person class, now we will assign values while creating new objects for Person class as below. 
    

  1. function Person(name,age){
    2. 

  2.  //Assigning values through constructor
    3. 

  3.  this.name=name;
    4. 

  4.  this.age=age;
    5. 

  5.  //functions
    6. 

  6.  this.sayHi=function(){
    7. 

  7.   return this.name +" Says Hi";
    8. 

  8.  }
    9. 

  9. }
    10. 

  10. //Creating person instance
    11. 

  11. var p=new Person("aravind",23);
    12. 

  12. alert(p.sayHi());
    13. 

  13. //Creating Second person instance
    14. 

  14. var p=new Person("jon",23);
    15. 

  15. alert(p.sayHi());
    16.

4) Inheritance

Inheritance is a process of getting the properties and function of one class to other class. For example let’s consider "Student" Class, here the Student also has the properties of name and age which has been used in Person class. So it's much better to acquiring the properties of the Person instead of re-creating the properties. Now let’s see how we can do the inheritance concept in JavaScript. 
    

  1. function Student(){}
    2. 

  2. //1)Prototype based Inhertance
    3. 

  3. Student.prototype= new Person();
    4. 

  4. //2)Inhertance throught Object.create
    5. 

  5. Student.prototype=Object.create(Person);
    6. 

  6. var stobj=new Student();
    7. 

  7. alert(stobj.sayHi());
    8.
We can do inheritance in above two ways.

5) Encapsulation

Before going on to Encapsulation and Abstraction first we need to know what Data Hiding is and how can we achieve it in JavaScript. Date hiding is protecting the data form accessing it outside the scope. For example, In Person class we have Date of Birth (dob) properties which should be protected. Let's see how to do it. 
    

  1. function Person(){
    2. 

  2.  //this is private variable
    3. 

  3.  var dob="8 June 2012";
    4. 

  4.  //public properties and functions
    5. 

  5.  return{
    6. 

  6.   age:"23",
    7. 

  7.   name:"aravind",
    8. 

  8.   getDob:function(){
    9. 

  9.    return dob;
    10. 

  10.   }
    11. 

  11.  }
    12. 

  12. }
    13. 

  13. var pobj=new Person();
    14. 

  14. //this will get undefined 
    15. 

  15. //because it is private to Person
    16. 

  16. console.log(pobj.dob);
    17. 

  17. //Will get dob value we using public 
    18. 

  18. //funtion to get private data
    19. 

  19. console.log(pobj.getDob());
    20.
Wrapping up of public and private data into a single data unit is called Encapsulation. The above example is the one that best suites Encapsulation.

6) Abstraction

Abstraction means hiding the inner implementation details and showing only outer details. To understand Abstraction we need to understand Abstract and Interface concepts from Java. But we don't have any direct Abstract or Interface in JS.
Ok! now in-order to understand abstraction in JavaScript lets take a example form JavaScript library JQuery. In JQuery we will use 
    

  1. $("#ele")
    2.
to select select an element with id ele on a web page. Actually this code calls negative JavaScript code 
    

  1. document.getElementById("ele");
    2.
But we don't need to know that we can happy use the $("#ele") without knowing the inner details of the implementation.

7) Polymorphism

The word Polymorphism in OOPs means having more than one form. In JavaScript a Object, Property, Method can have more than one form. Polymorphism is a very cool feature for dynamic binding or late binding. 
    

  1. function Person(){
    2. 

  2.  this.sayHI=function(){}
    3. 

  3. };
    4. 

  4. //This will create Student Class
    5. 

  5. function Student(){};
    6. 

  6. Student.prototype=new Person();
    7. 

  7. Student.prototype.sayHI=function(l){
    8. 

  8.  return "Hi! I am a Student";
    9. 

  9. }
    10. 

  10. //This will create Teacher Object
    11. 

  11. function Teacher(){};
    12. 

  12. Teacher.prototype=new Person();
    13. 

  13. Teacher.prototype.sayHI=function(){
    14. 

  14.  return "Hi! I am a Teacher";
    15. 

  15. }
    16. 

  16. var sObj=new Student();
    17. 

  17. //This will check if the student 
    18. 

  18. //object is instance of Person or not 
    19. 

  19. //if not it won't execute our alert code.
    20. 

  20. if (sObj instanceof Person) {
    21. 

  21.     alert("Hurry! JavaScript supports OOps");
    22. 

  22. }
    23.

Conclusion

JavaScript supports Object Oriented Programming(OOP)Concepts. But it may not be the direct way. We need to create some simulation for some concepts.

Reference website :

http://www.techumber.com/2013/08/javascript-object-oriented-programming-tutorial.html

at No comments:
Labels:
Subscribe to: Posts (Atom)

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...