|
JavaScript - Multiply Ways To Create A Prototype For The Subclass
I'm still a beginner in js core so please forgive if the question is too fundamental.
In the following example PositionedRectangle is a subclass of Rectangle, all 3 methods of prototype inheritance seem to produce the same results, method 1 is from the authors book (Flanagan's Definitive Guide 5ed) example 9-3, and method 2 is from his website example 9-3, and method 3 is my own; Code:
// method 1 seems most complicated
function heir(p) {
function f(){};
f.prototype =p;
return new f();
}
PositionedRectangle.prototype = heir(Rectangle.prototype);
//method 2
PositionedRectangle.prototype = new Rectangle();
//method 3 seems most straight forward (I don't know if it's correct but works ok)
PositionedRectangle.prototype = Rectangle.prototype;
Thank you Gents, J. Similar TutorialsDoes anyone know of a way I can create an array using words on new lines, without quotes, or a way I can make all of the lines separately in quotes and separated by commas? (I have 118,628 words, so I can't do it by hand.) Any help is appreciated. Thanks to anyone who answers.
Hi, all~..According to ECMAScript, the root of the prototype chain is Object.Prototype. Each object has an internal property [[Prototype]] that could be another object or NULL.... However, it also says that every function has the Function prototype object: Function.Prototype, it confused me, because a function is an object, for a function object, what is its function prototype and object prototype..For example: Code: var x = function (n) {return n+1;};
what is the relationships of x, Object.Prototype and Function.Prototype
Thx a lot !!!!!!!!! Hello! I have a superclass where I create a "div" element as a property and then proceed to try and set the element's "id" attribute in a subclass. Interestingly, if I create multiple instances of the subclass with different "id"s, they all end up having the last "id" I specify. I would like it if they retain the individual "id" I specify. Here is the code. Code: function Drag() {
this.ele = document.createElement("div"); }
function Icon(id) {
this.ele.id = id; }
Icon.prototype = new Drag();
var hello = new Icon("hello");
var goodbye = new Icon("goodbye");
Hi I have been working at this for a while now but can't seem to figure out how to do it. What I want to do is have a class which i have done and lets say the class is called ABC so eventhing inside that would need to have ABC.test(); but what I want is to have something like ABC.test.create() where test is the sub class and I want the create function only work if the sub function is test, if that makes sence, so if the code was ABC.create() the it wont work because the subclass 'test' hasnt been called. The codes I have done at the moment a Code: function ABC(){
this.test=function(){
this.create=function(){
// code \\
}
}
}
////////////////////////////////////////
function ABC(){
this.test=function(){
this.test.create=function(){
// code \\
}
}
}
////////////////////////////////////////
function ABC(){
var test;
this.test.create=function(){
// code \\
}
}
////////////////////////////////////////
function ABC(){
var test = this.test;
this.test.create=function(){
// code \\
}
}
But none of them have worked, if anyone knows how i can do this please help, thank you! Hi im new in javascript and im having some problems with the two dimensional arrays problems. Well basically what i need to do in this program its to multiply two matrices of the same length and print the result as a matrix Example [2 4] * [3 8] = [14 20] [3 2] [2 1] [13 26] I hope someone could help me im really stuck in this problem Hi, At www.happydaysremovals.com.estimatenew.html. Users fill in a form which has items of furniture, so they enter a number next to each item of furniture. The HTML uses text fields. When the form is submitted, the form is submitted to a php script that emails the results to myself. I am trying to also have a javascript function which runs before the php script runs. This javascript works out the cubic footage of all the items. If a user put "3" in the sofa text field, and I have defined that a sofa is 45 cubic feet, then the javascript will multiply 3 * 45. It will do a similar thing for all items of furniture, then add them all up to give a total cubic feet. I want that total field to then sent as a variable to the php script, along with all the other variables. My code so far (which doesnt work) Code: <script language="JavaScript">
function calculate()
{
var sofa_3_seater = document.getElementById('sofa_3_seater').value*45;
var sofa_2_seater = document.getElementByID('sofa_2_seater').value*30;
var armchair_large = document.getElementByID('armchair_large').value*15;
var total=sofa_3_seater+sofa_2_seater+armchair_large;
document.getElementByID('total').value = total;
}
</script>
I have used a hidden field for the total value: Code: <input type="hidden" name="total" value=""> I want the javascript result to change the value of the hidden field that is called total. THen I want it all to be posted to the PHP script and email everything to me, including this newly calculated total field! THanks Code: <script>
// Declared Constants
MORSE_ALPHABET = new Array (
'.-', // A
'-...', // B
'-.-.', // C
'-..', // D
'.', // E
'..-.', // F
'--.', // G
'....', // H
'..', // I
'.---', // J
'-.-', // K
'.-..', // L
'--', // M
'-.', // N
'---', // O
'.--.', // P
'--.-', // Q
'.-.', // R
'...', // S
'-', // T
'..-', // U
'...-', // V
'.--', // W
'-..-', // X
'-.--', // Y
'--..' // Z
);
CHAR_CODE_A = 65;
var CTS = prompt('Enter Morse code','here')
var inMessage = CTS.split(' ');
searchLocation(inMessage,MORSE_ALPHABET)
function searchLocation(targetValue, arrayToSearchIn) {
var searchIndex = 0; // Iterative counter
for(i=0;i < targetValue.length;) {
targetValue = targetValue[i];
// Search until found or end of array
while(
searchIndex<arrayToSearchIn.length &&
i != targetValue.length &&
arrayToSearchIn[searchIndex]!=targetValue
) {
i++
searchIndex++;
}
if(searchIndex<arrayToSearchIn.length) {
return String.fromCharCode(CHAR_CODE_A + searchIndex);
}
else {
return -1;
}
}
}
document.writeln(searchLocation(inMessage,MORSE_ALPHABET));
</script>
<head>
</head>
<body>
</body>
This is my code and i have figured it to create an array from the prompt and then use the function to return the first array it finds but i cant seem to make it go on to the next index of the array. I know that when you return a value the function closes and i have tried to store my return in a variable but its not working the way i want it to or I'm not writing the correct command or is there away to do multiply returns, i think what i need to do is simply but i have been staring at this screen for a while now and just cant see it. Please help me. Thanks Hi all... i need to auto calculate 3 fields and store the result in 2 fields: field 3 = field 1 * field 2 field 5 = (field 1 * field 2) - field 4 or field 3 - field 4 so far i'm trying to modify an existing code but i'm still can't get it working correcly Code: <html>
<head>
<script type="text/javascript">
function compute(inputObj, otherInputID, multiID, subID, diffID) {
var otherObj = document.getElementById(otherInputID)
var multiObj = document.getElementById(multiID)
var subObj = document.getElementById(subID)
var diffObj = document.getElementById(diffID)
var v1=inputObj.value
var v2=otherObj.value
var v3=multiObj.value
var v4=subObj.value
var val1 = v1=="" ? 0 : parseFloat(v1) // convert string to float
var val2 = v2=="" ? 0 : parseFloat(v2)
var val3 = v3=="" ? 0 : parseFloat(v3)
var val4 = v4=="" ? 0 : parseFloat(v4)
multiObj.value = val1 * val2
diffObj.value = (val1 * val2)-val4
}
</script>
</head>
<body>
Value 1: <input id="txt1" type="text" onKeyUp="compute(this, 'txt2', 'addres', 'subtract', 'mulres')">
<br />
Value 2: <input id="txt2" type="text" onKeyUp="compute(this, 'txt1', 'addres', 'subtract', 'mulres')">
<br />
Added Result: <input id="addres" type="text">
<br />
substract: <input id="subtract" type="text" onKeyUp="compute('txt1', 'txt2', 'addres', this, 'mulres')">
<br />
Multiplied Result: <input id="mulres" type="text">
</body>
</html>
my problem is the Multiplied Result field not automatically change the result when i enter value in subtract field. it will change if i retype the value in field 1 and 2. Hope somebody can help me. Thank in advance Need a little help with the final code on my project. I'm multiplying 3 drop downs to give me a total sq ft. I then want to take that variable and multiply it by a fixed number. i.e. qty*width*length equals a total of 8 sq ft, then take that 8 and multiply it by a fixed number (8*1.75), I want it to calculate without any submit buttons and show the total sq ft and the final value. thanks in advance for any assistance. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=unicode">
<form>
<meta content="MSHTML 6.00.2900.5921" name="GENERATOR"></head>
<body><strong>Quantity:</strong> <select id="qty" onchange="Calculate();" size="1"
name=qty><option value="1" selected>1</option> <option value="2">2</option>
<option value="3">3</option> <option value="4">4</option> <option
value=5>5</option> <option value="6">6</option> <option value="7">7</option>
<option value="8">8</option> <option value="9">9</option> <option
value=10>10</option> <\SELECT></select> <strong>Banner
Width:</strong> <select id="height" onchange="Calculate();" size="1"
name=height><option value="2" selected>2</option> <option value="3">3</option>
<option value="4">4</option>
<\SELECT></select> <strong>Banner Length:</strong>
<select id="length" onchange="Calculate();" size="1" name="length"><option value="4"
selected>4</option> <option value="5">5</option> <option value="6">6</option>
<option value="7">7</option> <option value="8">8</option>
<\SELECT></select> <strong>Total sq ft: <font
size=4><label id="lblRes"><!-- a Label to locate result in it -->8
</label></form></font></span></span></font>
<p></p></span></span></font></font></strong>
<div></div>
<script language="javascript">
function Calculate()
{
var h = document.getElementById('height').value;
var l = document.getElementById('length').value;
var q = document.getElementById('qty').value;
var result = h * l * q;
document.getElementById('lblRes').innerHTML = result;
}
</script>
</font></strong></body></html>
I keep getting 28 when I am suppose to get 22 because of Order of Operations. Code: <html>
<head>
<title>Movie</title>
<script type="text/javascript">
function ticketOrder()
{
var cost;
var ticket;
if(document.movieTicket.radTicket[0].checked)
{
ticket=document.movieTicket.radTicket[0].value;
ticket=parseInt(ticket);
cost=cost*ticket;
}
if(document.movieTicket.radTicket[1].checked)
{
ticket=document.movieTicket.radTicket[1].value;
ticket=parseInt(ticket);
cost=cost*ticket;
}
if(document.movieTicket.radReward[0].checked)
{
cost=document.movieTicket.radReward[0].value;
cost=parseInt(cost);
}
else if(document.movieTicket.radReward[1].checked)
{
cost=document.movieTicket.radReward[1].value;
cost=parseInt(cost);
}
if(document.movieTicket.chkPopcorn.checked)
{
var popcorn=document.movieTicket.chkPopcorn.value;
popcorn=parseInt(popcorn);
cost=cost+popcorn;
}
if(document.movieTicket.chkSoda.checked)
{
var soda=document.movieTicket.chkSoda.value;
soda=parseInt(soda);
cost=cost+soda;
}
if(document.movieTicket.chkCandy.checked)
{
var candy=document.movieTicket.chkCandy.value;
candy=parseInt(candy);
cost=cost+candy;
}
alert(cost*ticket);
}
</script>
</head>
<body>
<div id="Header">
<h2>The Chicago Movie Palace</h2>
</div>
<form name="movieTicket">
How many tickets would you like to order?<br />
1 Ticket<input type="radio" name="radTicket" value="1" /><br />
2 Tickets<input type="radio" name="radTicket" value="2" /><br />
3 Tickets<input type="radio" name="radTicket" value="3" /><br />
4 Tickets<input type="radio" name="radTicket" value="4" /><br />
5 Tickets<input type="radio" name="radTicket" value="5" /><br />
Are you a member of our theater?<br />
Yes<input type="radio" name="radReward" value="8" /><br />
No<input type="radio" name="radReward" value="10" /><br />
Would you like any food or drinks with your movie?<br />
Popcorn ($4)<input type="checkbox" name="chkPopcorn" value="4" /><br />
Soda ($3)<input type="checkbox" name="chkSoda" value="3" /><br />
Candy ($3)<input type="checkbox" name="chkCandy" value="3" /><br />
Which movie would you like to see?
<select name="selUpcomingMovie">
<option value="Immortals">Immortals</option>
<option value="J Edgar">J Edgar</option>
<option value="Sherlock Holmes:A Game of Shadows" >Sherlock Holmes:A Game of Shadows</option>
</select>
<p><input type="button" name="btnSubmit" value="Order Tickets" onclick="ticketOrder()" /></p>
</form>
</body>
</html>
Hi all, I am in the process of developing a calculator for some of my colleagues to use. One of the variables within the calculations is called PMH. I want to determine the value of PMH based on which checkboxes are ticked. Each checkbox has a different value. If the checkbox is not ticked, then the value of each option is 1 and obviously more than one checkbox may be ticked. I have created the checbox code: Code: <td><input type="checkbox" name="PMH" value="1.6" /> Smoker<br />
<input type="checkbox" name="PMH" value="0.4" /> CCF<br />
<input type="checkbox" name="PMH" value="0.5" /> Pulmonary Oedema / Cirrhosis<br />
<input type="checkbox" name="PMH" value="0.8" /> COAD<br /></td>
but I have no idea on how to calculate what I need for var PMH. Can someone guide me as to what I need to do please? Cheers, mads G'day, How would I go about copying all the prototype functions AND the constructor from one object into another object, and then call them? Code: function myOriginal() {
alert('Hello');
}
myOriginal.prototype.example = function() {
alert('In example '+this.test);
}
function myNewThing() {
// Copy myOriginal into this object here
this.oldconstructor(); // Should now display "Hello"
this.test = 'from myNewThing';
this.example(); // Should now display "In example myNewThing"
}
I know I can use this.example.call(this), but that's not an acceptable solution. I want to deploy this style over dozens, potentially hundreds of objects. Thanks muchly, Your friend from server-side... Code: /**
* @class TestInheritance
*
* This is a class and it's constructor all in one but the constructor is not set yet
*/
function TestInheritance(){
this.testName;
return this;
}
/**
* @extends Util
* Make sure this is called after the constructor/class declaration
*/
TestInheritance.prototype = new Util();
/**
* @ctor TestInheritance
* Set it to itself if there isn't an explicit constructor
*/
TestInheritance.prototype.constructor = TestInheritance;
/**
* @extends Util
* This specifically is set to allow TestInheritance to access it's parent's identity
*/
TestInheritance.prototype.parent = new Util();
/**
* @extends Util
* @argument testName String
* All functions are called after setting the prototype
*/
TestInheritance.prototype.setTestName = function(testName){
this.testName = testName;
}
How would I reference the same Util class on both the prototype and the parent? im currently using a prototype add on for one of my sites and id like to convert it to mootools... problem is, i dont know the first thing about prototype! i stumbled upon this before i learned any javascript and ive gotten to know mootools and like using it... heres the code, let me know if anyone can help! Code: /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.scrolling = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.sections = this.wrapper.getElementsBySelector('div.section');
this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
this.sections.each( function(section, index) {
section._index = index;
});
this.events = {
click: this.click.bind(this)
};
this.addObservers();
if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load
if(this.options.autoGlide) this.start();
},
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('div.controls a');
controls.invoke('observe', 'click', this.events.click);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });
Event.stop(event);
},
moveTo: function(element, container, options){
this.current = $(element);
Position.prepare();
var containerOffset = Position.cumulativeOffset(container),
elementOffset = Position.cumulativeOffset($(element));
this.scrolling = new Effect.SmoothScroll(container,
{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
return false;
},
next: function(){
if (this.current) {
var currentIndex = this.current._index;
var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;
} else var nextIndex = 1;
this.moveTo(this.sections[nextIndex], this.scroller, {
duration: this.options.duration
});
},
previous: function(){
if (this.current) {
var currentIndex = this.current._index;
var prevIndex = (currentIndex == 0) ? this.sections.length - 1 :
currentIndex - 1;
} else var prevIndex = this.sections.length - 1;
this.moveTo(this.sections[prevIndex], this.scroller, {
duration: this.options.duration
});
},
stop: function()
{
clearTimeout(this.timer);
},
start: function()
{
this.periodicallyUpdate();
},
periodicallyUpdate: function()
{
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
}
});
Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute'
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});
Anyone wanna give me some pointers on how prototypes work exactly? ;o Especially in the context of this code: Code: var chatscroll = new Object();
chatscroll.Pane = function(scrollContainerId){
this.bottomThreshold = 20;
this.scrollContainerId = scrollContainerId;
this._lastScrollPosition = 100000000;
}
chatscroll.Pane.prototype.activeScroll = function(){
var _ref = this;
var scrollDiv = document.getElementById(this.scrollContainerId);
var currentHeight = 0;
var _getElementHeight = function(){
var intHt = 0;
if(scrollDiv.style.pixelHeight)intHt = scrollDiv.style.pixelHeight;
else intHt = scrollDiv.offsetHeight;
return parseInt(intHt);
}
var _hasUserScrolled = function(){
if(_ref._lastScrollPosition == scrollDiv.scrollTop || _ref._lastScrollPosition == null){
return false;
}
return true;
}
var _scrollIfInZone = function(){
if( !_hasUserScrolled ||
(currentHeight - scrollDiv.scrollTop - _getElementHeight() <= _ref.bottomThreshold)){
scrollDiv.scrollTop = currentHeight;
_ref._isUserActive = false;
}
}
if (scrollDiv.scrollHeight > 0)currentHeight = scrollDiv.scrollHeight;
else if(scrollDiv.offsetHeight > 0)currentHeight = scrollDiv.offsetHeight;
_scrollIfInZone();
_ref = null;
scrollDiv = null;
}
It's code to make the scrollbars autoscroll down. Full article and extra info he http://radio.javaranch.com/pascarell...837038219.html I sort of understand it but I'm not clear on what prototypes are. hi, i'm currently stumped by the following code. what's the point of using x.constructor.prototype? (highlighted in red) why not directly use x.prototype.classname to check whether 'classname' property is in this class? thx in advance Code: function getType(x) {
// If x is null, return "null"
if (x == null) return "null";
// Next try the typeof operator
var t = typeof x;
// If the result is not vague, return it
if (t != "object") return t;
// Otherwise, x is an object. Use the default toString( ) method to
// get the class value of the object.
var c = Object.prototype.toString.apply(x); // Returns "[object class]"
c = c.substring(8, c.length-1); // Strip off "[object" and "]"
// If the class is not a vague one, return it.
if (c != "Object") return c;
// If we get here, c is "Object". Check to see if
// the value x is really just a generic object.
if (x.constructor == Object) return c; // Okay the type really is "Object"
// For user-defined classes, look for a string-valued property named
// classname, that is inherited from the object's prototype
if ("classname" in x.constructor.prototype && // inherits classname
typeof x.constructor.prototype.classname == "string") // its a string
return x.constructor.prototype.classname;
// If we really can't figure it out, say so.
return "<unknown type>";
}
hi, I'm trying to inherit with prototype but I'm not able to do so. The problem is that I have a few functions which use some common variables and common functions and I want to inherit a Resource object with all these parameters. I also whant this inheritance to be done when I load the function, so no extra functions are loaded unless I need them. Here's the code Code: function Resource(){
this.url='';
this.object=new Object();
this.id='';
this.categories=new Array();
}
function Users(){
Users.prototype=new Resource();
this.url='user/';
this.name='';
this.email='';
};
function test(){
var users = new Users();
alert(users.id);
};
When I run the test function for the first time I get an undefined. a second time works fine. I I get the prototype definition outside the User() function it also works fine, but I want the inherited function to be loaded when I need it. Any ideas? As always, thank you for your help. Hi, I'm trying to use a javascript tabstrip script called aptabs, which uses prototype.js. However, prototype.js won't load properly, because the following error occurs in prototype.js: destination is undefined on the following line (3042): destination[property] = value.methodize(); The function this line is in is: Code: function copy(methods, destination, onlyIfAbsent) {
onlyIfAbsent = onlyIfAbsent || false;
for (var property in methods) {
var value = methods[property];
if (!Object.isFunction(value)) continue;
if (!onlyIfAbsent || !(property in destination))
destination[property] = value.methodize();
}
}
I've tried using versions 1.6.0 all the way up to 1.6.1, but I still get the same error. Can someone suggest what this error could be caused by and possible fixes? Debbie Hi I am using a program called aptabs which uses the Protoype framework. The problem is that when I create a new tab and refresh the page, the newly created tab disappears. How can I resolve this ? NOTE: The zip file for aptabs is attached. Thanks |
|||||||