|
JavaScript - A Question About Prototype Object Usage For Oop?
Hello,
I'm trying to write my class with member properties and functions like below. What I want to learn is that is there any problem to use prototype object in the class that we want to use with it? I asked because I generally see that prototype object definition and member functions and properties created outside of the class unlike my class that I wrote like below. Is there any problem writing my class like below? Thanks. Code: function Point()
{
Point.prototype.x = this._x;
Point.prototype.y = this._y;
function _setX(x)
{
this.x = x;
}
Point.prototype.setX = _setX;
function _setY(y)
{
this.y = y;
}
Point.prototype.setY = _setY;
function _show()
{
alert(this.x + this.y);
}
Point.prototype.Show = _show;
}
function callMyClass()
{
var p = new Point();
p.setX(3);
p.setY(5);
p.Show();
}
Similar TutorialsHi, 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 !!!!!!!!! I am running on Magento eCommerce, however please don't turn away if you have no experience with it. Problem is with JavaScript. When one clicks on the button, nothing happens, when the page loads browsers in general display error message, that 'productAddtoCartForm' is null or not an object Here's the piece of code around the Add button: Code: <div class="product-view">
<div class="product-essential">
<form action="http://myhairpalace.com/index.php/default/checkout/cart/add/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/product/57/" method="post" id="product_addtocart_form" enctype="multipart/form-data">
<div class="no-display">
<input type="hidden" name="product" value="57� />
<input type=" hidden"="" id="related-products-field" product-shop"="">
<div class="product-name">
<h1>100% Human Hair Lace Front Wig-Suzie</h1>
</div>
<p class="email-friend"><a href="http://myhairpalace.com/index.php/default/sendfriend/product/send/id/57/cat_id/11/">Email to a Friend</a></p>
<p class="no-rating"><a href="http://myhairpalace.com/index.php/default/review/product/list/id/57/category/11/#review-form">Be the first to review this product</a></p>
<p class="availability in-stock">Availability: <span>In stock</span></p>
<div class="price-box">
<span class="regular-price" id="product-price-57">
<span class="price">$75.00</span> </span>
</div>
<ul class="add-to-links">
<li><a href="http://myhairpalace.com/index.php/default/wishlist/index/add/product/57/" class="link-wishlist">Add to Wishlist</a></li>
<li><span class="separator">|</span> <a href="http://myhairpalace.com/index.php/default/catalog/product_compare/add/product/57/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/" class="link-compare">Add to Compare</a></li>
</ul>
<div class="short-description">
<h2>Quick Overview</h2>
<div class="std">Suzie</div>
</div>
</div>
<div class="product-img-box">
<p class="product-image product-image-zoom">
<img id="image" src="http://myhairpalace.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/a/lace_front-shan.jpg" alt="100% Human Hair Lace Front Wig-Suzie" title="100% Human Hair Lace Front Wig-Suzie"></p>
<p class="zoom-notice" id="track_hint">Double click on above image to view full picture</p>
<div class="zoom">
<img id="zoom_out" src="http://myhairpalace.com/skin/frontend/default/default/images/slider_btn_zoom_out.gif" alt="Zoom Out" title="Zoom Out" class="btn-zoom-out">
<div id="track">
<div id="handle"></div>
</div>
<img id="zoom_in" src="http://myhairpalace.com/skin/frontend/default/default/images/slider_btn_zoom_in.gif" alt="Zoom In" title="Zoom In" class="btn-zoom-in">
</div>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
});
//]]>
</script>
<div class="more-views">
<h2>More Views</h2>
<ul>
<li>
<a href="#" onclick="popWin('http://myhairpalace.com/index.php/default/catalog/product/gallery/id/57/image/56/', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title=""><img src="http://myhairpalace.com/media/catalog/product/cache/1/thumbnail/56x/9df78eab33525d08d6e5fb8d27136e95/l/a/lace_front-shan.jpg" width="56" height="56" alt=""></a>
</li>
</ul>
</div>
</div>
<div class="clearer"></div>
<div class="product-options" id="product-options-wrapper">
<script type="text/javascript">
//<![CDATA[
var DateOption = Class.create({
getDaysInMonth: function(month, year)
{
var curDate = new Date();
if (!month) {
month = curDate.getMonth();
}
if (2 == month && !year) { // leap year assumption for unknown year
return 29;
}
if (!year) {
year = curDate.getFullYear();
}
return 32 - new Date(year, month - 1, 32).getDate();
},
reloadMonth: function(event)
{
var selectEl = event.findElement();
var idParts = selectEl.id.split("_");
if (idParts.length != 3) {
return false;
}
var optionIdPrefix = idParts[0] + "_" + idParts[1];
var month = parseInt($(optionIdPrefix + "_month").value);
var year = parseInt($(optionIdPrefix + "_year").value);
var dayEl = $(optionIdPrefix + "_day");
var days = this.getDaysInMonth(month, year);
//remove days
for (var i = dayEl.options.length - 1; i >= 0; i--) {
if (dayEl.options[i].value > days) {
dayEl.remove(dayEl.options[i].index);
}
}
// add days
var lastDay = parseInt(dayEl.options[dayEl.options.length-1].value);
for (i = lastDay + 1; i <= days; i++) {
this.addOption(dayEl, i, i);
}
},
addOption: function(select, text, value)
{
var option = document.createElement('OPTION');
option.value = value;
option.text = text;
if (select.options.add) {
select.options.add(option);
} else {
select.appendChild(option);
}
}
});
var dateOption = new DateOption();
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var optionFileUpload = {
productForm : $('product_addtocart_form'),
formAction : '',
formElements : {},
upload : function(element){
this.formElements = this.productForm.select('input', 'select', 'textarea', 'button');
this.removeRequire(element.readAttribute('id').sub('option_', ''));
template = '<iframe id="upload_target" name="upload_target" style="width:0; height:0; border:0;"><\/iframe>';
Element.insert($('option_'+element.readAttribute('id').sub('option_', '')+'_uploaded_file'), {after: template});
this.formAction = this.productForm.action;
var baseUrl = 'http://myhairpalace.com/index.php/default/catalog/product/upload/';
var urlExt = 'option_id/'+element.readAttribute('id').sub('option_', '');
this.productForm.action = parseSidUrl(baseUrl, urlExt);
this.productForm.target = 'upload_target';
this.productForm.submit();
this.productForm.target = '';
this.productForm.action = this.formAction;
},
removeRequire : function(skipElementId){
for(var i=0; i<this.formElements.length; i++){
if (this.formElements[i].readAttribute('id') != 'option_'+skipElementId+'_file' && this.formElements[i].type != 'button') {
this.formElements[i].disabled='disabled';
}
}
},
addRequire : function(skipElementId){
for(var i=0; i<this.formElements.length; i++){
if (this.formElements[i].readAttribute('name') != 'options_'+skipElementId+'_file' && this.formElements[i].type != 'button') {
this.formElements[i].disabled='';
}
}
},
uploadCallback : function(data){
this.addRequire(data.optionId);
$('upload_target').remove();
if (data.error) {
} else {
$('option_'+data.optionId+'_uploaded_file').value = data.fileName;
$('option_'+data.optionId+'_file').value = '';
$('option_'+data.optionId+'_file').hide();
$('option_'+data.optionId+'').hide();
template = '<div id="option_'+data.optionId+'_file_box"><a href="#"><img src="var/options/'+data.fileName+'" alt=""><\/a><a href="#" onclick="optionFileUpload.removeFile('+data.optionId+')" title="Remove file" \/>Remove file<\/a>';
Element.insert($('option_'+data.optionId+'_uploaded_file'), {after: template});
}
},
removeFile : function(optionId)
{
$('option_'+optionId+'_uploaded_file').value= '';
$('option_'+optionId+'_file').show();
$('option_'+optionId+'').show();
$('option_'+optionId+'_file_box').remove();
}
}
var optionTextCounter = {
count : function(field,cntfield,maxlimit){
if (field.value.length > maxlimit){
field.value = field.value.substring(0, maxlimit);
} else {
cntfield.innerHTML = maxlimit - field.value.length;
}
}
}
Product.Options = Class.create();
Product.Options.prototype = {
initialize : function(config){
this.config = config;
this.reloadPrice();
},
reloadPrice : function(){
price = new Number();
config = this.config;
skipIds = [];
$$('.product-custom-option').each(function(element){
var optionId = 0;
element.name.sub(/[0-9]+/, function(match){
optionId = match[0];
});
if (this.config[optionId]) {
if (element.type == 'checkbox' || element.type == 'radio') {
if (element.checked) {
if (config[optionId][element.getValue()]) {
price += parseFloat(config[optionId][element.getValue()]);
}
}
} else if(element.hasClassName('datetime-picker') && !skipIds.include(optionId)) {
dateSelected = true;
$$('.product-custom-option[id^="options_' + optionId + '"]').each(function(dt){
if (dt.getValue() == '') {
dateSelected = false;
}
});
if (dateSelected) {
price += parseFloat(this.config[optionId]);
skipIds[optionId] = optionId;
}
} else if(element.type == 'select-one' || element.type == 'select-multiple') {
if (element.options) {
$A(element.options).each(function(selectOption){
if (selectOption.selected) {
if (this.config[optionId][selectOption.value]) {
price += parseFloat(this.config[optionId][selectOption.value]);
}
}
});
}
} else {
if (element.getValue().strip() != '') {
price += parseFloat(this.config[optionId]);
}
}
}
});
try {
optionsPrice.changePrice('options', price);
optionsPrice.reload();
} catch (e) {
}
}
}
function validateOptionsCallback(elmId, result){
var container = $(elmId).up('ul.options-list');
if (result == 'failed') {
container.removeClassName('validation-passed');
container.addClassName('validation-failed');
} else {
container.removeClassName('validation-failed');
container.addClassName('validation-passed');
}
}
var opConfig = new Product.Options({"80":{"447":0,"448":0,"451":0,"452":0,"449":0,"450":0,"454":0,"453":0}});
//]]>
</script>
<dl>
<dt><label>Color<span class="required"> *</span></label></dt>
<dd class="last">
<select name="options[80]" id="select_80" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()"><option value="">-- Please Select --</option><option value="447">1 </option><option value="448">1B </option><option value="451">1B/30 </option><option value="452">1B/33 </option><option value="449">2 </option><option value="450">4 </option><option value="454">4/27 </option><option value="453">4/30 </option></select> </dd>
</dl>
<script type="text/javascript">
//<![CDATA[
enUS = {"m":{"wide":["January","February","March","April","May","June","July","August","September","October","November","December"],"abbr":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}}; // en_US locale reference
Calendar._DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; // full day names
Calendar._SDN = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; // short day names
Calendar._FD = 0; // First day of the week. "0" means display Sunday first, "1" means display Monday first, etc.
Calendar._MN = ["January","February","March","April","May","June","July","August","September","October","November","December"]; // full month names
Calendar._SMN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // short month names
Calendar._am = "AM"; // am/pm
Calendar._pm = "PM";
// tooltips
Calendar._TT = {};
Calendar._TT["INFO"] = "About the calendar";
Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2005 / Author: Mihai Bazon\n" +
"For latest version visit: http://www.dynarch.com/projects/calendar/\n" +
"Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"Date selection:\n" +
"- Use the \xab, \xbb buttons to select year\n" +
"- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" +
"- Hold mouse button on any of the above buttons for faster selection.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Time selection:\n" +
"- Click on any of the time parts to increase it\n" +
"- or Shift-click to decrease it\n" +
"- or click and drag for faster selection.";
Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)";
Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)";
Calendar._TT["GO_TODAY"] = "Go Today";
Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)";
Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)";
Calendar._TT["SEL_DATE"] = "Select date";
Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";
Calendar._TT["PART_TODAY"] = ' (' + "Today" + ')';
// the following is to inform that "%s" is to be the first day of week
Calendar._TT["DAY_FIRST"] = "Display %s first";
// This may be locale-dependent. It specifies the week-end days, as an array
// of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1
// means Monday, etc.
Calendar._TT["WEEKEND"] = "0,6";
Calendar._TT["CLOSE"] = "Close";
Calendar._TT["TODAY"] = "Today";
Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value";
// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "%b %e, %Y";
Calendar._TT["TT_DATE_FORMAT"] = "%B %e, %Y";
Calendar._TT["WK"] = "Week";
Calendar._TT["TIME"] = "Time:";
//]]>
</script>
<p class="required">* Required Fields</p>
</div>
<script type="text/javascript">decorateGeneric($$('#product-options-wrapper dl'), ['last']);</script>
<div class="product-options-bottom">
<div class="price-box">
<span class="regular-price" id="product-price-57_clone">
<span class="price">$75.00</span> </span>
</div>
<div class="add-to-cart">
<label for="qty">Qty:</label>
<input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit()"><span><span>Add to Cart</span></span></button>
<p class="paypal-logo"><a id="ec_shortcut_c2e3fb1be4b9e9d53800cbc4d5f1e274" href="http://myhairpalace.com/index.php/default/paypal/express/start/">
<img src="https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&buttontype=ecshortcut&locale=en_US" alt="Checkout with PayPal">
</a>
<input type="hidden" id="pp_checkout_url" name="return_url" value="">
<script type="text/javascript">
//<![CDATA[
Event.observe('ec_shortcut_c2e3fb1be4b9e9d53800cbc4d5f1e274', 'click', function(event) {
$('pp_checkout_url').value = this.href;
productAddToCartForm.submit();
event.stop();
});
//]]>
</script></p> </div>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm);
//]]>
</script>
</div>
<div class="product-collateral">
<div class="box-collateral box-description">
<h2>Details</h2>
<div class="std">
Nautral Hairline 100% Human Hair Lace Front wig. </div>
</div>
<div class="box-collateral box-tags">
<h2>Product Tags</h2>
<form id="addTagForm" action="http://myhairpalace.com/index.php/default/tag/index/save/product/57/uenc/aHR0cDovL215aGFpcnBhbGFjZS5jb20vaW5kZXgucGhwL2RlZmF1bHQvaW5kaWFuLXJlbXktZnJvbnQvMTAwLWh1bWFuLWhhaXItbGFjZS1mcm9udC13aWctc3V6aWUuaHRtbD9fX19TSUQ9VQ,,/" method="get">
<div class="form-add">
<label for="productTagName">Add Your Tags:</label>
<div class="input-box">
<input type="text" class="input-text required-entry" name="productTagName" id="productTagName">
</div>
<button type="button" title="Add Tags" class="button" onclick="submitTagForm()">
<span>
<span>Add Tags</span>
</span>
</button>
</div>
</form>
<p class="note">Use spaces to separate tags. Use single quotes (') for phrases.</p>
<script type="text/javascript">
//<![CDATA[
var addTagFormJs = new VarienForm('addTagForm');
function submitTagForm(){
if(addTagFormJs.validator.validate()) {
addTagFormJs.form.submit();
}
}
//]]>
</script>
</div>
</div>
</div>
Magento uses Prototype framework and the problem has something to do with prototype.js file and indeed, when I debugged in Chrome, here's what came up: Now, the crux is that the error shows up only pages featuring products w/ options in dropdown menus: http://myhairpalace.com/index.php/de...inkerbell.html You are able to add Simple Products to cart just fine: http://myhairpalace.com/index.php/de...o-measure.html I would be incredibly grateful for ANY suggestions. if location is a property of window object that returns a string and im appending .indexOf() to location why is it not working?
I was going through an article on JavaScript objects on "http://www.howtocreate.co.uk/tutorials/javascript/javascriptobject" and there I read Quote: Intrinsic objects - variable types with constructors. * Array * Boolean * Date * Function * Image * Number * Object * Option * Regular Expression * String does it mean that, whenever I want to use any of these objects, I have to create it using new and only then I can use its properties or methods ? 1) There are other objects like document, history, location, navigator, parent and screen. If objects which need to be created using constructor are called intrinsic objects , then what are other objects which can be used without constructor are called as ? Array, Boolean, Image, Date etc all start with capital letter. While document, history, navigator etc start with lower case letter. Why is that ? Is there any difference between objects that start with upper case and those start with lower case ? Are they known by different names ? Thanks The following code snippet: (this.inputArray is already defined and initialized prior to this code sequence) if(this.inputArray.length >= 0) { this.inputArray[this.inputArray.length] = new Object(); this.inputArray[this.inputArray.length].type = 'pcDisp'; this.inputArray[this.inputArray.length].data = a; } the first line in the code block should create a new array item and initialize it with the various assigments in the next lines. But Firefox complains "this.inputArray[this.inputArray.length] is not defined". This is very disconcerting because the code has to create array items with different data based on conditionals. So I must be able to automatically create new items as necessary. I thought that javascript had 'late binding', but maybe that doesn't apply here. So, does anyone have a clue for me? This is a constructor function. PROC will be an instantiation of another constructor. It will have a copy of GLBS. function _CALC_ELEMENTS(ELEM, GLBS, PROC) // PROC will also have a copy of GLBS. So, techincally, how could I access the copy of GLBS in PROC, via instance of _CALC_ELEMENTS. If I can do this, I do not need to include it directly. (GLBS is yet another object instantiated via constructor) I am just concerned that there are two copies when only one is necessary. Thanks for thoughts on this JK My question is commented in the script: Code: function Love(){
var req = {
ring : 'gold',
money : 'a lot',
commitment : 'long-term'
}
this.loveReqs = function(){
return req;
}
}
var you = new Love();
var details = you.loveReqs();
details.ring = "silver";
console.log(details.ring);
var me = new Love();
var details = me.loveReqs();
console.log(details.ring); // why does this return gold and not silver if req is passed by reference and we already changed its value above and so it's pointing to the same memory position?
function get_price() { var the_price=1000; if (this.speed=="500MGz") the_price+=200; else the_price+=100; if (this.hdspace=="15GB") the_price+=50; else the_price+=25; if (this.ram=="128MB") the_price+=150; else the_price+=75; return the_price; } function computer(speed,hdspace,ram) { this.speed=speed; this.hdspace=hdspace; this.ram=ram; this.price=get_price; } var work_computer=new computer("2GHz","80GB","1GB"); var home_computer=new computer("1.5GHz","40GB","512MB"); var laptop_computer=new computer("1GHz","20GB","256MB"); var work_computer_price=work_computer.price(); var home_computer_price=home_computer.price(); var laptop_computer=laptop_computer.price(); ___________________________________________________ In the above code, the line I'm having trouble with is marked red. Why is it that when I call the method using ... this.price = get_price; It works fine. But if I assign the object this.price with like this... this.price = get_price(); I get an error? Isn't get_price() a function? So shouldn't the parenthesis be included when the method is called? Why are we suppose to leave out the parenthesis?! I'm confused. Thanks! 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. 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? 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>";
}
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 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 Hi there I am trying to retrieve xml data using the prototype Ajax.Request. I think I am getting the xml though I am unsure as to how to retrieve the text from the nodes here is the function I am using to try and populate a text field Code: function makeMarkerXml() {
new Ajax.Request('coords.xml',
{
method:'post',
onSuccess: function(transport){
////this will not work/////////
var coord = transport.responseXML.childNodes(0).childNodes(0).firstChild.text;
///////////////////////////////
},
onFailu function(){ alert('Call failed') }
});
}
can anyone 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 Array.prototype.each = function (fn) { this.map(fn) } This is my each function that works great in every other browser but IE. UGH! What am I doing wrong? the error points to the this in the function. Is it that IE doesn't like map? Has anyone seen this before? I thought my code was correct. Works perfect in FF, chrome and opera. the canvas text doesn't work in opera, but it does render the features so the each function is working. I'll post the code if needed, but it's huge. here's the script running. http://www.pdxbusiness.com/canvas/golf/ The code below looks elementary, but it gives absurd results. Can you tell how I should have written it? I am slowly beginning to understand why it fails. But I do not understand why the JavaScript tutorials I've studied never warned against this trap. Any ship needs a list of crew members. The total number of persons onboard must be known too, for the case the ship sinks. We place these two properties in a prototype, so that we won't have to repeat them for each kind of ship. A passenger list is needed only if the ship is a passenger ship, so we decide not to place the passenger list in a prototype. Code:
function Ship() {
this.crew = [];
this.persons = 0;
}
function PassengerShip(name) {
this.name = name;
this.passengers = [];
}
PassengerShip.prototype = new Ship;
Passengers and crew arrive one by one shortly before departure. The first thing they do onboard is to check in: Code: Ship.prototype.checkin = function(list, person) {
this[list].push(person);
++this.persons;
}
(Instead of the push function, we could as well have used a statement such as Code: this[list][ this[list].length ] = person; I have tried. Same wrong result.) Let us launch two passenger ships and check some persons in. Code: var msFloat = new PassengerShip("M/S Float");
msFloat.checkin("crew", "Captain");
msFloat.checkin("crew", "Cook");
msFloat.checkin("passengers", "Alice");
msFloat.checkin("passengers", "Bob");
var msFlawed = new PassengerShip("M/S Flawed");
msFlawed.checkin("crew", "Capt'n");
msFlawed.checkin("crew", "Sailor");
msFlawed.checkin("passengers", "Charlie");
The shipping company wants a report when everybody has checked in. But I'm not sure they will like it: Code: Ship.prototype.report = function() {
function makeList(ship, list) {
if (!ship[list]) return (ship.name + " has no list of " + list + ".\n");
if (!ship[list].length) return (ship.name + " has no " + list + ".\n");
return (list + ": " + ship[list].join(", ") + "\n");
}
alert("\nPre-Departure Report For '" + this.name + "'\n\n" +
makeList(this, "passengers") + makeList(this, "crew") +
"\nNumber of persons onboard: " + this.persons + "\n\n");
}
msFloat.report(); // OK: Alice, Bob as passengers; Captain, Cook as crew
msFlawed.report(); // WRONG CREW: Captain, Cook, Capt'n, Sailor
The number of persons (passengers + crew) is reported correctly for both ships, and so is the passenger list. But the "M/S Flawed" reports four crew members. Two of those never checked in on that ship. How can such a thing happen? What kind of blunder did I make? An "edit+execute" version of the code is available at bjarne.altervista.org/sailor.html together with a little testoutput, some considerations based on that testoutput, and a workaround (which is not the same as a solution - it looks ridiculous). It seems as if arrays placed in prototypes do not always work as expected. Can that be true? The testoutput suggests that JavaScript sometimes forgets to create a much-needed own property in the this object, and instead changes the prototype. But that sounds incredible, doesn't it? I am not too familiar with the deeper theory of JavaScript, and I hope to get a response. Here is the code concatenated and embedded: Code: <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Array In JavaScript Prototype</title></head>
<body>
<script type="text/javascript" language="JavaScript">
function Ship() {
this.crew = [];
this.persons = 0;
}
function PassengerShip(name) {
this.name = name;
this.passengers = [];
}
PassengerShip.prototype = new Ship;
Ship.prototype.checkin = function(list, person) {
this[list].push(person);
++this.persons;
}
Ship.prototype.report = function() {
function makeList(ship, list) {
if (!ship[list]) return (ship.name + " has no list of " + list + ".\n");
if (!ship[list].length) return (ship.name + " has no " + list + ".\n");
return (list + ": " + ship[list].join(", ") + "\n");
}
alert("\nPre-Departure Report For '" + this.name + "'\n\n" +
makeList(this, "passengers") + makeList(this, "crew") +
"\nNumber of persons onboard: " + this.persons + "\n\n");
}
var msFloat = new PassengerShip( "M/S Float" );
msFloat.checkin("crew", "Captain");
msFloat.checkin("crew", "Cook");
msFloat.checkin("passengers", "Alice");
msFloat.checkin("passengers", "Bob");
msFloat.report(); // OK: Alice, Bob as passengers; Captain, Cook as crew
var msFlawed = new PassengerShip( "M/S Flawed" );
msFlawed.checkin("crew", "Capt'n");
msFlawed.checkin("crew", "Sailor");
msFlawed.checkin("passengers", "Charlie");
msFlawed.report(); // WRONG CREW: Captain, Cook, Capt'n, Sailor
</script>
</body>
</html>
I have spent much time struggling with this kind of error, which is reproducible in 5 different browsers. This is the first time I have been able to reproduce it in a form that can be presented to others. Is there a well-established programming practice that can prevent it? What do experienced JavaScript programmers do? Regards Bjarne Pagh Byrnak Hey All - I asked this a few days ago.. what I came up with works just fine, but I feel it doesn't take advantage of "classes". If you think I could make this better by turning it into a class or using some other notation, that would be great. Keep in mind, ALL this does is rewrite a pagination.... for a search return in a lightbox. I have this function called in the return function... Code:
var srcpagParams = $H();
function buildPagi(param, currdsplyNum){
var temDsply = new Template('<strong>[#{total_display}<span id="count">#{prevImg} #{links} #{nextImg}</span>'),
crnt_link = srcpagParams.set('crnt_link', param), // the page we want to see
dsplyNum = srcpagParams.get('paginateNum'), // what is the number of returns per page
ttl_lnks = Math.ceil( srcpagParams.get('numFound') / srcpagParams.get('paginateNum')), // total pages
data_template = new Hash();
data_template.set('total_display',srcpagParams.get('numFound'));
bldImg = function() {
var prvB = '<a href="#content" id="pagiPrev" onclick="firesrc(this)">Prev<img src="blank.gif" /></a>';
var nxtB = '<a href="#content" id="pagiNext" onclick="firesrc(this)">Next<img src="blank.gif" /></a>';
data_template.set('prvImg',(crnt_link > 1) ? prvB : "");
data_template.set('nxtImg',(crnt_link < ttl_lnks) ? nxtB : "");
}
bldLk = function(){
var holder = "";
if(ttl_lnks > 1){
var linkStr = new Template(' <a href="#content" onclick="firesrc(#{pos});"> Go to page #{pos}</a> ');
$R(1,ttl_lnks).each(function(n) {
var posit = {pos : n}
holder += (crnt_link == n) ? " " + n + " " : linkStr.evaluate(posit);
});
data_template.set('links',linkholder);
}
}
bldRng = function(){
var currPaneRg = (dsplyNum * crnt_link) - (dsplyNum - currdsplyNum);
data_template.set('range',((crnt_link - 1) * (dsplyNum) + 1 ) + " - " + currPaneRg);
$('pages').update(temDsply.evaluate(data_template)).show();
}
firesrc = function(cl){
var pagiPane = (typeof cl === "number") ? cl : (cl.id == "pagiNext") ? crnt_link + 1 : crnt_link - 1;
var start = crnt_link * srcpagParams.get('paginateNum');
Alertsrc( $F('query') ,(pagiPane)) // pass the query to the json to return the current search request
}
bldImg();
buildLnk();
bldRng();
};
Since some of the data declared at the top changes depending on the return, I didn't know if I could "initialize" it in a class.
But could I turn this into a class and if so - what I just use:
var buildPagi = create.Class({
initialize: object.extend({
})
})
Call the function when we are passed some data: Code: buildPagi(somevalue, somevalue2) ** NOTE: I use the libraries prototype and jquery.. so use Create.Class and new Template are within the libraries... etc.. so, is there a more eloquent, or robust way to write what I did above? |
|||||||