www.webdeveloper.com
Results 1 to 6 of 6

Thread: Create an element and nest it into another

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Posts
    84

    Lightbulb Create an element and nest it into another

    I've a medium experience with actionscript 3 and i know his logic.
    For create an element1, nest into it an element2 and show it on the stage i've simple to write

    var element1: MovieClip = new MovieClip()
    var element2: MovieClip = new MovieClip()

    element1.addChild(element2)
    addChild(element1) //add element1, comprensive of element2 on the scene


    I would want to understand the logic behind JS consider the example reported above..

    I'm reading the Javascript Complete Guide, and according to what i understand i've to create manually an object (element1) and include inside another object (element2)...
    The code will be something of genre:

    var element1 = {var element2:somevalue}

    1) What if i want to add an element in runtime phase?
    In AS3 i would use the method addChild included in the MovieClip class, but JS seems not have anything of genre

    2) How add element1 on the "stage", in other words, make it visible to the user and not an abstract entity?

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    In JavaScript, you cab use
    var s=document.createElement("div")
    then
    parentNode.appendChild(s) where parentNode is the parent element which can be any other HTML element.

  3. #3
    Join Date
    Jan 2013
    Posts
    84
    So, the graphic part of a JS code is the html tags, right?
    I imagined JS as a sort of flash contenitor that can work as standalone too, with his stage and grapical elements

  4. #4
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    An HTML element can be anything from a div tag, an anchor, an image, an audio to a video file.
    JavaScript allows you to manipulate the HTML document on the fly (at runtime).

    So as far as client-side JavaScript is concerned, the web browser's viewport is your stage because that's where the document is displayed.
    The web browser handles the display part. You just need to manipulate the HTML document through JavaScript to control what's shown.

    If you are more interested in doing animation then I would suggest you explore the HTML5 canvas element which you can use as a stage and control it with Javascript

  5. #5
    Join Date
    Jan 2013
    Posts
    84
    So, for give a form to a javascript code, is absolutly necessary the html code. It's like an inseparabile duo.
    There exists other graphic format (in other words, other languages with graphic element) that JS can manipulate?

  6. #6
    Join Date
    Dec 2012
    Posts
    96
    The HTML alternative to Flash is, arguably, the canvas element, with that you can draw pictures, add images, animate things etc.

    However the Canvas element is controlled entirely through code, their is no way to draw pictures with your mouse as you can with Flash.

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Canvas Example</title>
        </head>
        <body>
            <canvas id="canvas" width="500" height="500"></canvas>
            <script type="text/javascript">
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                ctx.fillRect(50,50,50,50);
                ctx.arc(150,150,20,0,Math.PI*2,false);
                ctx.fill();
            </script>
        <body>
    </html>
    That's an example of how to draw a rectangle and a circle with canvas, if you want a more indepth guide check out this post I wrote on a different forum going over the basics of the canvas element.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles