Javascript-Unobtrusive - (6)

-

 


👉Unobtrusive Javascript


In web pages, we have presentation and behavior. Presentation is controlled by HTML and behavior is controlled by javascript.


<input type = "button" onclick = "Fun1();" id = btn1/>

<script language = javascript>

             Function Fun1()

                      {alert ("Hi");}

</script>


Here, button is tightly linked with the behavior. Unobtrusive javascript seperates presentation from behavior, making HTML more sleek.


<input type = "button"  id = btn1/>

<script src = "jscript1.js" type = "text/ javascript">

</script>


code of jscript1.js file:

<script language = "javascript">

           Function Fun1() {

                     alert("Hi");

            }

var e1 = document.getElementByID("btn1");

e1.onclick = Fun1();

</script>


As shown in the above example, using unobtrusive javascript, we will be able to change button's behavior anytime.

Comments

Post a Comment

Popular posts from this blog

Javascript-OOPs(Part2)-AbstractionAndEncapsulation- (8)

-
Image
    👉 Javascript with OOPs (Abstraction and Encapsulation) Abstraction is showing what's necessary and Encapsulation is hiding the complexity. For ex, if we are making calls to the server, we may have methods like: this.CreateConnection = function() {} this.CreateHttpObject = function() {} Showing these methods to the user who is using this component may increase the complexity of the component. User may have to call          cust.CreateConnection();          cust. CreateHttpObject();          cust.Submit(); So  CreateConnection and CreateHttpObject has to be private, but the time you declare the methods using "this" keyword, it becomes public. Below example solves this problem by creating private functions. If user makes a call to CreateConnection or CreateHttpObject, he will  receive "Not Found" error. *Create private methods function Customer(){        function CreateCo...
Read more

Javascript-OOPs(Part4)-Polymorphism- (10)

-
Image
   👉 Javascript with OOPs (Polymorphism) Polymorphism is possible only with strongly typed languages, we cannot implement it in Javascript since we cannot declare strongly typed variables, and datatypes of variables are decided at runtime. We have achieved a bit of polymorphism while implementing inheritance, where in "cust" object first refers to the "Customer" class and then to the "CustomerChild" class, but still direct polymorphism is not available. Javascript variables are dynamic and they are created based on the datatype of the right-hand side value. To summarize: 1)You can create a class by using a function. You have a new keyword to create an instance. 2)You can define private and public methods by using/not using the "this" keyword. 3)Function inside a function is a closure. Closures are the core while implementing classes and objects in javascript. 4)Use Closures to create private methods, if you want to expose the method use "th...
Read more

Javascript-Classes - (5)

-
Image
👉 Classes ✅Classes are functions To create a class in javascript, function has to be created. Though new javascript specifications introduced "class" keyword, it uses function internally. We can also create properties and methods within class. function customer ({               this.CustomerCode = "1001";             this.CustomerName = "John";             this.getFullDetails = function(){                   return this.CustomerCode + " " +                                         this.CustomerName";             } }) This is the basic syntax of class and it doesn't respect OOPs principles. Variables are attached to the windows object, hence the properties are global not private.
Read more