Scribd Logo
Upload

Welcome to Scribd!

  • File: /home/jony/Desktop/Programmin oject/html/SVG/instanceof - HTML Page 1 of 2

    Uploaded by

    jony
    9 views2 pages
    checking instance of

    Original Title

    Instanceof.html

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    checking instance of

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views2 pages

    File: /home/jony/Desktop/Programmin oject/html/SVG/instanceof - HTML Page 1 of 2

    Uploaded by

    jony
    checking instance of

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    File: /home/jony/Desktop/Programmin…oject/html/SVG/instanceof.

    html Page 1 of 2

    <!doctype html>
    <html>
    <head>
    <title> Shapes with Prototypes and Inheritance </title>
    <meta charset="utf-8">
    <style>
    html, body, div#container {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    }
    div#container {
    position: relative;
    }
    .shape {
    position: absolute;
    text-align: center;
    }
    .shape span {
    position: relative;
    top: 44%;
    transition: 1s ease in ease out;
    }
    .square {
    background-color: lightblue;
    }
    .circle {
    background-color: goldenrod;
    border-radius: 50%;
    }
    </style>
    <script>
    function Circle(name, radius) {
    this.name = name;
    this.radius = radius;
    this.getCircumference = function() {
    return this.radius * Math.PI * 2;
    };
    this.getName = function() {
    return this.name;
    };
    }
    function Square(name, size) {
    this.name = name;
    this.size = size;
    this.getArea = function() {
    return this.size ^ 2;
    };
    this.getName = function() {
    return this.name;
    };
    }
    // Global variables so we can inspect them
    // easily in the console! (Otherwise, we'd normally
    // make them local to the window.onload function).
    var circle1 = new Circle("circle1", 100);
    var circle2 = new Circle("circle2", 200);
    var square = new Square("my square", 150);
    window.onload = function() {
    addShapeToPage(circle1);
    addShapeToPage(circle2);
    File: /home/jony/Desktop/Programmin…oject/html/SVG/instanceof.html Page 2 of 2

    addShapeToPage(square);
    };

    function addShapeToPage(shape) {
    var container = document.getElementById("container");
    var div = document.createElement("div");
    var width = 0;
    var classes = "shape ";
    if (shape instanceof Circle) {
    classes += "circle";
    width = shape.radius;
    } else if (shape instanceof Square) {
    classes += "square";
    width = shape.size;
    }
    div.setAttribute("class", classes);
    div.style.left = Math.floor(Math.random() * (container.offsetWidth - 175)) +
    "px";
    div.style.top = Math.floor(Math.random() * (container.offsetHeight - 175)) +
    "px";
    div.style.width = width + "px";
    div.style.height = width + "px";
    var span = document.createElement("span");
    span.innerHTML = shape.getName();
    span.style.visibility = "hidden";
    div.appendChild(span);
    div.onmouseover = function() {
    // this is the div (the shape) you click on
    this.firstElementChild.style.visibility = "visible";
    };
    div.onmouseleave = function() {
    // this is the div (the shape) you click on
    this.firstElementChild.style.visibility = "hidden";
    };
    container.appendChild(div);
    }
    </script>
    </head>
    <body>
    <div id="container"></div>
    </body>
    </html>

    You might also like