JavaScript - Help Understanding This Function!

Hi, I'm trying to do an assignment, and have copied a piece of code to learn while I do, if you see what I mean. Problem is, I'm having real trouble with one of the lines of code. If someone could tell me basically what it does, I'd be very greatful!
Here's the code:
if (height[i] == -(array[i].height))

The - before (array[i].height) is really confusing me!
Thanks in advance!

I need to understand this code but i am not able to fully understand it to use it for myself. Anybody can you help please

function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}

score = Math.round(score/numQues*100); // math.round function will return the whole number to the nearest specified value for example 1.9 will show as 2
form.percentage.value = score + "%"; // The score will be displayed in percentage

var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}

Any short explanation will be a great help.

1. When creating a new element using the create method, do the zIndex values of all elements that follow it change?

If so how do I get the zIndex of all divs with a specific classname within a specified container?

I'm working with dynamic drive's 'dhtmlwindow' object class file and have made revisions to it...however this is my first time working with this type of file and while some things are easy to change the zIndex change of the setfocus function does not look like any of my previous scripts.

Hello,
I have an Object, containing an object, containing an object....etc.
So, it's an Object of objects. Not an Array of objects.
And now I want to sort this Object of objects.
Is there a "native" way in JavaScript to sort an object?
Or do I understand it correctly, that I first have to convert the Object to an Array, and than perform an array.sort ?

This question is just for my understanding of JavaScript, so I don't go into the wrong direction.
Tnx in advance for any explanation.

I would like to know if anyone cane explain some javascript source code that i got from the chess.com website. Here is the following code Im talking about:


window.Meebo||function(c){function p(){return["<",i,' onload="var d=',g,";d.getElementsByTagName('head')[0].",
j,"(d.",h,"('script')).",k,"='//cim.meebo.com/cim?iv=",a.v,"&",q,"=",c[q],c[l]?
"&"+l+"="+c[l]:"",c[e]?"&"+e+"="+c[e]:"","'\"></",i,">"].join("")}var f=window,
a=f.Meebo=f.Meebo||function(){(a._=a._||[]).push(arguments)},d=document,i="body",
m=d[i],r;if(!m){r=arguments.callee;return setTimeout(function(){r(c)},100)}a.$=
{0:+new Date};a.T=function(u){a.$[u]=new Date-a.$[0]};a.v=4;var j="appendChild",
h="createElement",k="src",l="lang",q="network",e="domain",n=d[h]("div"),v=n[j](d[h]("m")),
b=d[h]("iframe"),g="document",o,s=function(){a.T("load");a("load")};f.addEventListener?
f.addEventListener("load",s,false):f.attachEvent("onload",s);n.style.display="none";
m.insertBefore(n,m.firstChild).id="meebo";b.frameBorder="0";b.id="meebo-iframe";
b.allowTransparency="true";v[j](b);try{b.contentWindow[g].open()}catch(w){c[e]=
d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{var t=
b.contentWindow[g];t.write(p());t.close()}catch(x){b[k]=o+'d.write("'+p().replace(/"/g,
'\\"')+'");d.close();'}a.T(1)}({network:"chess"});

</script>

Code:

//toggle function to open and close popup runs off an if else statement detecting style.display property
function toggle(popUpDiv) {
	var el = document.getElementById(popUpDiv);
//if function to determine if style.display equals none and if so then block to make visible
	if ( el.style.display == 'none' ) { el.style.display = 'block';}
		else {el.style.display = 'none';}
//while function to declare that as long as style.display equals block then set timer to make 
//invisible after 10 seconds of becoming visible
	While (el.style.display == 'block') {
		setTimeout ("toggle('popUpDiv')", 10000 );
	} //end while loop
	return false; //end if statement
}

My while statement reads that while style.display = block then to run a timer to close the popup by running toggle again after 10 seconds. This way if the user closes the window before the ten seconds is counted, then the toggle function won't run. However I am getting an error stating that there is no before statement. I'm confused on that. Sorry just really a beginner with javascript and searched through W3schools.com and couldn't find an answer.

have it on a geocities test site at css popup test

This is a question about a code for a javascript slide show which i think is very important to understand because slide shows are heavily used!
This is the html:
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" script type="text/javascript" src="slideshow.js"></script>
<title>Slideshow exercise</title>
</head>

<body>
<h1> Slideshow exercicse</h1>

<img class="slide" src="cityscape.jpg" width="400" height="300">
<img class="slide" src="Creative_design_sailing_leaves_under_blue_sky.jpg" width="400" height="300">
<img class="slide" src="Curiousity.jpg" width="400" height="300">
<img class="slide" src="raindrops-blue-garden-seamless-tile.jpg" width="400" height="300">
<p> Clic on image to view next slide</p>
<p> Clic on image to view next slide</p>


</body>
</html>
This is the .js file and my questions:
Quote:
var numslides=0;currentslide=0;
var slides= new Array();

function MakeSlideShow(){
//find all images with the class "slide"
imgs= document.getElementsByTagName("img");---------> question 1

for (i=0; i<imgs.length ; i++)
{
if(imgs[i].className != "slide") continue;
slides[numslides]=imgs[i];----------------------------------->question2
//hide all but first image
if(numslides==0)
{imgs[i].style.display="block";}

else{imgs[i].style.display="none";}
imgs[i].onclick=NextSlide;
numslides++;}//end of loop--------------------------->question3
}

//end MakeSlideShow()

function NextSlide(){
slides[currentslide].style.display="none";------------------>question4
currentslide++
if(currentslide >= numslides) currentslide=0;
slides[currentslide].style.display="block";--------------->question5
}

window.onload= MakeSlideShow;
question1:
does "imgs" automatically become an array here?
If so, how can i print out its lenght?
This is what i tried and it doesn't work->
var lengthimgs= imgs.length
document.write(lengthimgs)

question2:
What is happening here?
Is the imgs[i] array transferring its data into the slides[numslides] array?

question3:
If slides[numslides] and imgs[i] are interchangeable why can't this line be i++ instead of numslides++

question4:
What is happenning to the slides array here?
Is currentslide becoming a copy of numslides?

question5:
What does this do? Where does this line sent the code?
Why this? Why hasn't "imgs[i].style.display="block";" already done the job for the display?

Thanks

Hey all,

I'm trying to fully understand javascript and have a couple of questions I was hoping you could answer for me.

I'm working through a book and in the book I'm creating a Bingo card that generates a random number. I'm pasting the full script below just in case it's needed.

Code:

function initAll () {
	 for(var i=0; i<24; i++) {
	setSquare(i);		 
   }
}

function setSquare(thisSquare) {
  var currSquare= "square" + thisSquare;
  var colPlace= new Array  (0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
  var colBasis=colPlace[thisSquare] *15;
  var newNum=colBasis +getNewNum()+1;
	
document.getElementById(currSquare).innerHTML=newNum;
}

function getNewNum() {
  return Math.floor(Math.random() *15);
}
//-->
</script>

1. What does the [thisSquare] mean in this line of code that is bolded? I mean, I know thisSquare is whatever i is, but am I multiplying it by colPlace or what?

2. Lastly I'm confused by this part of the above code

Code:

var newNum=colBasis +getNewNum()+1;

Why add the +1? I mean, i think getNewNum is set to pull a random number between 1 and 14. If you want to pull a number between 1 and 15, why not multiple Math.random() *16 instead of 15.

Am i missing something?

Sorry, I'm just not understanding why use the +1

I posted this once, but it disappeared, and I have no notifications that I did anything wrong. I read the rules before posting and wasn't breaking any so I am not sure why it disappeared but here goes again.

I am trying to learn Javascript (particularly OOP) from a series of screencasts by Douglas Crockford. I have developed a theoretical "game" to build to illustrate it to myself better, and learn by example.

I must be misunderstanding how inheritance works, because my code is not producing the results I thought it would.

Here is what I have, followed by an explanation of my understanding.
Code:

$(function() {

function object(o) {
	function Funct() {}
	Funct.prototype = o;
	return new Funct();
}


soldier = {
      pointsCost: 0,
      movement: "1 Infantry Block",
      validTargets: {},
      weapons: {
			"Main Weapon": {
				"Weapon Type": "M4 Carbine",
				"Fire Range": 12
			},
			"Secondary Weapon": {
				"Weapon Type": "JCP .45",
				"Fire Range": 3
			}
		}
};

var rifleman = object(soldier); 
rifleman.pointsCost += 10;
rifleman.validTargets.target1 = "Infantry"
rifleman.weapons["Secondary Weapon"]["Weapon Type"] = "";
rifleman.weapons["Secondary Weapon"]["Fire Range"] = "";


var heavyGunner = object(soldier);
heavyGunner.pointsCost += 20;
heavyGunner.validTargets.target1 = "Infantry";
heavyGunner.validTargets.target2 = "Light Armor";
heavyGunner.weapons["Main Weapon"]["Weapon Type"] = "SAW M249";
heavyGunner.weapons["Main Weapon"]["Fire Range"] = 12;
heavyGunner.weapons["Secondary Weapon"]["Weapon Type"] = "";
heavyGunner.weapons["Secondary Weapon"]["Fire Range"] = "";
 
var sniper = object(soldier);
sniper.pointsCost += 30;
sniper.validTargets.target1 = "Infantry";
sniper.weapons["Main Weapon"]["Weapon Type"] = "Savage .308";
sniper.weapons["Main Weapon"]["Fire Range"] = 20;
sniper.weapons["Secondary Weapon"]["Weapon Type"] = "JCP .45";
sniper.weapons["Secondary Weapon"]["Fire Range"] = 3;

 
var demolitions = object(soldier);
demolitions.pointsCost += 30;
demolitions.validTargets.target1 = "Infantry";
demolitions.validTargets.target2 = "Light Armor";
demolitions.validTargets.target3 = "Artilery";
demolitions.validTargets.target4 = "Structures";
demolitions.weapons["Main Weapon"]["Weapon Type"] = "SMAW MK153";
demolitions.weapons["Main Weapon"]["Fire Range"] = 16;
demolitions.weapons["Secondary Weapon"]["Weapon Type"] = "M1014 Combat Shotgun";
demolitions.weapons["Secondary Weapon"]["Fire Range"] = 1; 


var infantry = { 

    rifleman: rifleman, 
    
    heavyGunner: heavyGunner, 
     
    sniper: sniper, 
     
    demolitions: demolitions 
 
};



console.log(infantry);

});

I start by creating an object function that accepts an object passed in, and sets it to the prototype of a constructor (that would allow me to create a new object linked to, and inheriting from, the initial passed in object)

I initialized a solider object literal, and pass that into the object function while creating 4 new objects (rifleman, heavyGunner, sniper, demolitions)
These four should inherit from and customize upon the soldier object.

The way I understood inheritance is that the new objects (example. rifleman) would inherit properties from the old object (i.e. soldier) and change or add properties, affecting only the new (rifleman) object but not changing the old(solider) object.

this works ok somewhat in my example, until it comes to nested objects.
In the above example I have objects as values for some Object's properties. (i.e. validTargets and weapons) When I change or add these, all of the new objects seem to inherit the last declarations, from demolitions, as if demolitions is actually changing that part of the soldier object so that the other's inherit those properties.

From my viewpoint, I expected these values to not be changed and that the 4 infantry types had no link to each other, but only to the soldier object.

I apparently misunderstood something, or coded something wrong.

Some minor notes:
-I will be updating most of the "string" values to be objects, so for instance, the validTargets value of "Infantry" would actually be the infantry object, stating that any of the 4 solider types would be a valid target.
- I intend to create weapons as their own viable objects in the future, and pass those objects instead of "strings"
- I intend to extend this (once this is working) to create an armor object that contains armor type units, similar in structure to the infantry object.
- If I can get this all to work, I may make this into a "simple" dice style battle game. but that is way off, I just want to get this nesting of objects to work with inheritance for now.

Thanks in advance for any help you can provide.
Here is a link to the "live" example. (not much different there except if you have firebug you can see the console.log method showing the objects, and how they are inheriting in properly from my POV.)

Link to Live example...


Blue

I still can't understand very well when to use and when NOT to use parenthesis when calling/using methods and functions.

Case 1: Where I commented "// No parenthesis.", could someone explain why not. And at the end, where the commen reads "// Parenthesis. ?
Code:

/* This function will be used as a method inside the objects. */
function getPayment() {
    thePayment = 250;
    thePayment += (this.seats == 'leather') ? 100 : 50;
    thePayment += (this.engine == 'V-8') ? 150 : 75;
    thePayment += (this.radio == 'CD Player') ? 30 : 10;
    return thePayment;
}

/* Object Constructor (prototype of the object). */
function car(seats, engine, radio) {
    this.seats = seats;
    this.engine = engine;
    this.radio = radio;
    this.payments = getPayment; // No parenthesis.
}

/* Creates an instance called 'my_car' out of the 'car' object. */
var my_car = new car('cloth', 'V-6', 'Tape Deck');

/* Object Initializer - automatically instantiates the object. */
var carObj = {
     seats:  'leather',
     engine: 'V-8',
     radio:  'CD Player',
     payments: getPayment // No parenthesis. No comma after last item.
}

// Firebug...
console.log(my_car.payments()); // Parenthesis.
console.log(carObj.payments()); // Parenthesis.

/* vim:set foldmethod=indent: */

Case 2: Please look at the comments.

Code:

window.onload = initAll; // Why no () here?

function initAll() {
    window.doStuff(); // Why () here?
}

function doStuff() {

    var msg_text = 'I love you so much!';
    var msg_link = window.document.getElementById('msg_link');
    console.log(msg_link);
    var msg_box = window.document.getElementById('msg_box');

    msg_link.onmouseover = function() {
        //msg_box.value = msg_text;
        msg_box.setAttribute('value', 'May the force be with you!');
    };

    msg_link.onmouseout = function() {
        /* This works in ie. */
        //msg_box.value = '';

        /* Doesn't work in ie7 (and probably not in ie6 either).
         * Perhaps the code above is reasonable. */
        msg_box.removeAttribute('value');
    }
}
/* vim:set foldmethod=indent: */

This is in reference to Crockford's articles found he

http://javascript.crockford.com/prototypal.html
http://javascript.crockford.com/private.html

I'm attempting to understand the use of privileged methods when used with Object.create. I put together a quick demo (code below) that shows what happens when I use Object.create to create a new object based on one that has a privileged method. The outcome is not pleasant, as changing the value in the first object also changes it in the second. Unless I am reading Crockford's articles incorrectly, this makes Object.create almost useless for anything but objects that have only public members.

I've seen many JavaScript programmers use closures extensively to create private members, and that still holds to be a good programming practice. However I still can't find an elegant way to create inheritance in combination with closures in JavaScript, given downfalls such as the one I mentioned above.

With all of that said I still think Crockford has a nice way of programming, creating factory functions that produce objects, staying away from the prototype property and making the language look more functional.

Here's the code to demonstrate what I'm referring to. Firebug needs to be enabled to view the console.debug output, otherwise convert them to alerts.

Code:

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

var o = (function() {
	var msg = "hi";
	
	return {
		msg: function(m) {
			if (m === undefined) {
				return msg;
			}
			
			msg = m;
		}
	};
})();

var foo = Object.create(o);
var bar = Object.create(foo);

console.debug(foo.msg());	// "hi"

foo.msg("what?");

console.debug(foo.msg());	// "what?"
console.debug(bar.msg());	// "what?"

Hi,

I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it?

intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\'

I am posting my javascript function he

<a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a>


function OpenDocPreview(url, docname) {
alert('message from search base : ' + url + ' ' + docname);
}

thank you,

I was working on a tutorial for some ajax uploading stuff and I ran across a new function syntax I don't recognize. I am not a Javascript pro, but I am not a newbie either. here is the code I am working on:

Code:

		function handleFileSelect(e){
			var files = e.target.files;
			var output = [];
			for(var i=0,f;f=files[i];i++){
				if(f.type.match('image.*')){
					var reader = new FileReader();
					
					reader.onload = (function(theFile){
						return function(e){
							var span = document.createElement('span');
							span.innerHTML = ['<img class="thumb" src="',e.target.result,'" title="',theFile.nbame,'" />'].join('');
							document.getElementById('list').insertBefore(span,null);
						};
					})(f);
					
					reader.readAsDataURL(f);
				}
			}
			document.getElementById('list').innerHTML = '<ul>'+output.join('')+'</ul>';
		}
		document.getElementById('files').addEventListener('change',handleFileSelect,false);

To be a little more clear, the code in question is that is the very middle. The syntax I don't understand is:

Code:

class.event = (function(arguments){
     //stuff you put in a function...
})(more Arguments?);

I tried to customize a simple one to learn for myself and I wrote this:

Code:

var a = 'A';
var b = 'B';

test = (function(t){
     alert(t);
     alert(b);
})(b);

test(a);

The browser would alert 'B' and that's it. The console would tell me that 'test is not a function.' OK, so I am confused.

The topmost code works. What I am wondering is what the syntax is called for creating a function (or event listener?) that way, and how it works. Although if I new what it was called I could just google how it works.

I found this script, and it works great:
Code:

<script type="text/javascript">
  function disable(element)
  {
    var input = document.getElementById(element).getElementsByTagName("input");
    for(var i = 0; i < input.length; i++)
    {
      input[i].setAttribute("disabled","true");
    }
  }
</script>

I tried to make the inverse by simply reversing the setAttribute() like so:
Code:

<script type="text/javascript">
  function enable(element)
  {
    var input = document.getElementById(element).getElementsByTagName("input");
    for(var i = 0; i < input.length; i++)
    {
      input[i].setAttribute("disabled","false");
    }
  }
</script>

But that didn't do it.
Can someone show me why, and how to fix it?

Here's the sample form which I'm trying to test it on:
Code:

<form>
  <input type="radio" name="test" onclick="disable('D1')" /> disable<br/>
  <input type="radio" name="test" onclick="enable('D1')" /> enable<br/>
  <fieldset id="D1">
    <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/>
    <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/>
    <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/>
  </fieldset>
</form>

Edit:
The ultimate goal which I'm working toward now (step by step =) is to have a form more like:
Code:

<form>
  <input type="radio" name="test" onclick="disable('D1')" />
  <fieldset id="D1">
    <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" />
  </fieldset>
  <input type="radio" name="test" onclick="disable('D2')" />
  <fieldset id="D2">
    <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" />
  </fieldset>
  <input type="radio" name="test" onclick="disable('D3')" />
  <fieldset id="D3">
    <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" />
  </fieldset>
</form>

And have the fieldsets enable and disable according the selection of the radio buttons.

Also, the fieldsets (and their ID's) will be dynamically generated via PHP



Thanks-a-bunch,
~ Mo

<p>
<script type="text/javascript">// <![CDATA[
var metrics = {
"mm" : 1,
"cm" : 10,
"m" : 1000,
"inch" : 25.4,
"foot" : 304.8
};
function convert(num, dec){
var val = document.getElementById("fromVal").value;
if(isNaN(val)){
return
}


function roundNumber(num, dec) {
var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec);
return result;
}

document.getElementById("toVal").value = val *
metrics[document.getElementById("fromSystem").value]/
metrics[document.getElementById("toSystem").value];
}
var interval = null;
function watchChanges(){
interval == null ? setInterval("convert()", 500) :
clearInterval(interval);
}
// ]]></script>
</p>
<table>
<tbody>
<tr>
<td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td>
</tr>
<tr>
<td colspan="1" align="center">=</td>
</tr>
<tr>
<td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td>