Create an element and nest it into another

**American horizo** · 01-15-2013 12:18 PM

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?

**holyhttp** · 01-16-2013 12:12 AM

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.

**American horizo** · 01-16-2013 06:28 AM

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

**holyhttp** · 01-16-2013 01:11 PM

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

**American horizo** · 01-16-2013 01:35 PM

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?

**iBeZi** · 01-16-2013 06:39 PM

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: Create an element and nest it into another

Thread Tools

Display

Create an element and nest it into another

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions