This will yield a valid CSS value (like 37%) the browser can understand. Then we'll pull the whole number (like 37) using the parseInt method, and tack % on the end. We'll multiply by a number like 100 to make it into a percentage (like 37.59214). In our new constructor function, the JavaScript method Math.random will give us a decimal number between 0 and 1 (like. We'll also need a bunch of random numbers, mostly percentages. In the stylesheet, we'll replace the CSS position relative with absolute, because that works better for random placement on the page. We'll start by going back to our original constructor function. Let's use this technique to make a colorful design by giving each div a random position and color. One of the more common ways is to pass special characteristics as arguments to the constructor function, like this:Īnother way to give each div a unique identity is to set its characteristics randomly, this time entirely inside the constructor function. There are several ways to give each new div you spawn its own identity. Let's make this page a lot more interesting by giving each div a different color and other attributes. When tested in a browser, the results are better in that you can see the divs being added as they march down the page-but still pretty boring. Note also that the correct way to add a CSS class to an element in JavaScript is via. You could also add background images and other characteristics to the panel style if you wish. The color and sizes are arbitrary and can be overridden in the constructor function. div = document.createElement( " div" ) Ībsolute positioning works best for precise top and left positions. Inside create this function called DivObject: Start with some HTML boilerplate, and add a script tag to the head. We'll call the actual HTML element spawned by this process this. We'll use the special keyword this to represent the JavaScript object built by that constructor. Constructor functions, however, are usually capitalized to show that they are more powerful than regular functions. If you've worked with JavaScript before, this name should look odd, because JavaScript names usually start with a lower case. In the JavaScript we're writing, the constructor function will be called DivObject. I'll also show you how to write a constructor function that uses this scaffolding to build new div elements when the user needs them. Technically, every element of HTML-a div, image, or form-is an "HTML object." In this demo, however, you'll create a "JavaScript object" for now, think of it as a scaffolding that can hold data or HTML elements that you can add to the page later. Tutorial script HTML elements, JavaScript objects, and constructor functions The animated logo on this page shows a more subtle use of spawning random JavaScript objects. related_files/senese_don_div_mania.htmlĬircles, borders, and dots. related_files/rodrigo_randima_div_mania.html related_files/leopold_ruth_div_mania.html This demo shows one way to use the kind of interaction you'll learn in this tutorial. If you run into trouble, it's best to load your object-enabled Web page in an actual browser. Note that adding HTML elements on the fly is an advanced feature that doesn't work in every code editor's Web preview. You should have a code editor (like Sublime Text or TextWrangler) and standards-compliant browser (like Firefox, Safari, or Chrome). You should know enough CSS to style a div with absolute positioning, and know enough JavaScript to create a function and assign CSS styles with JavaScript. This tutorial walks you through a simple demonstration of the power of JavaScript objects by letting the user spawn new rectangles by clicking on the page. Learning how to use JavaScript objects is also a great introduction to object-oriented code, which is easier to re-use and share than procedural code. In those cases, you need JavaScript objects. This is fine if you want your users to see a static page, or one whose pre-existing content moves around or hides and shows.īut what if you want user actions to add new instances of content you've prepared for them? Users could add books to a shopping cart, or spawn new monsters in a role-playing game, or open panels to show larger versions of images that they can drag around. Most Web sites load all their images, text, and other elements when the page first loads and leave it at that. Script, version 1.3 Why would you want to add stuff to a Web page after it's loaded? How to use JavaScript objects to spawn HTML elements How to use JavaScript objects to spawn HTML elements
0 Comments
Leave a Reply. |