Javascript Objects and Clesses

Custom Objects
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Custom Objects</title>
        <style>
        </style>
        <script>
            var team = new Object();
            team.name = "Bad News Bears";
            team.wins = 100;
            team.losses = 25;
            team.captain = "flip";

            window.onload = function () {
                document.getElementById('result').innerHTML = "<h1>" + team.name + "</h1>";
            }

            function employee(name, salary) {
                this.name = name;
                this.salary = salary;
            }
        </script>
    </head>
    <body>
        <div id="result"></div>
        <script>
            var flip = new employee("flip", 1000);
            var flop = new employee("flop", 500);

            alert(flip.name + " makes $" + flip.salary + " per week");
            alert(flop.name + " makes $" + flop.salary + " per week");
        </script>
    </body>
    </html>
        
Top

Index

Javascript Classes
    // JavaScript source code
    function Fruit(name, color, weight) {
        this.name = name;
        this.color = color;
        this.weight = weight;

        this.describeColor = function() {
            return this.color;
        }
        this.takeABite = function () {
            this.weight = this.weight * .66;
            return this.weight;
        }
    }
            
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <script src="Fruit.js"></script>
        <script>
            var apple;
            var pear;
            window.onload = function () {
                apple = new Fruit("Apple", "red", 500);
                pear = new Fruit("Pear", "green", 600);

                document.getElementById('btnBite').addEventListener('click', bite);
            }
            function bite(e) {
                document.getElementById('result').innerHTML = apple.takeABite();
            }
        </script>
        <title>Fruit Consumer</title>
    </head>
    <body>
        <div id="result"></div>
        <button id="btnBite">Bite</button>
    </body>
    </html>
        
Top

Index

n4jvp.com