Develop Reference

Why is JS code inside html <button> tag so slow compared to external JS script file?

I know that using <button onclick="some js code here"> and writing JS directly into HTML is really bad practice. But it's bugging me why is it so slow compared to running included JavaScript file (for example when I run a function from the outer file it is about 100x faster). Seems like the same code but the execution time is greatly different.
Here you have an example:
var i, x = 0;
for (i = 0; i < 1000000; i++) {
x += Math.random() * 10
};
document.getElementById('value').innerHTML = x;
function loop() {
var x = 0;
for (i = 0; i < 1000000; i++) {
x += Math.floor(Math.random() * 10)
};
document.getElementById('value').innerHTML = x;
}
<h1 id="value">value</h1>
<button onclick="var i, x = 0; for(i=0;i<1000000;i++){x += Math.floor(Math.random()*10)}; document.getElementById('value').innerHTML = x; ">test speed</button>
<button onclick="loop()">test speed 2</button>
"test speed" and "test speed 2" buttons have identical code to run but the second button runs it much faster (the one that runs it from outer js file).

Most JS engines are able to optimize for predefined functions, which is why it is so much faster. When you don't define your functions up front, it becomes much harder for browsers to optimize the JS execution.

I see no reason why it should be harder to optimize the code in the button.
I would guess instead that the JavaScript engine just does not keep track of the code in the button. After all the JavaScript engine and the DOM engine code are separate.
That would mean that the JavaScript has to parse and optimize it for every button click since it does not know if it has changed since the last run.
Of course the people coding the browser could fix this, but why should they? ;-)

code string set in onclick requires internal eval which causes the slowness.
Try wrap the code inside loop() function with eval and you will get the same result as it is in onclick attribute

iBooks JavaScript Environment - invalid element name

So, I've narrowed down my error (well, at least the first one) to this function:
var genArray = function () {
var arr, len, i;
if(arguments.length > 0) {
len = [].slice.call(arguments, 0, 1)[0];
arr = new Array(len);
for(i = 0; i < len; i++) {
arr[i] = genArray.apply(null, [].slice.call(arguments, 1));
}
} else {
return null; //or whatever you want to initialize values to.
}
return arr;
}
Then, I get a very unhelpful error:
error on line 71 at column 23: StartTag: invalid element name
Below is a rendering of the page up to the first error
Now, the function is decidedly not on line 71 (perhaps it is in the compiled ePub, but I have no idea how they correlate). Further, I have no idea what that error means in a JavaScript context. Also, this code works fine in a browser (Safari included).
Any ideas what could be causing the issue?
EDIT: On a whim, I checked whether [] was the problem by changing it to Array(). No luck.

Okay, so I discovered a solution to my problem. I just needed to surround my JavaScript in CDATA tags like so:
//<![CDATA[
var genArray = function () {
var arr, len, i;
if(arguments.length > 0) {
len = [].slice.call(arguments, 0, 1)[0];
arr = new Array(len);
for(i = 0; i < len; i++) {
arr[i] = genArray.apply(null, [].slice.call(arguments, 1));
}
} else {
return null; //or whatever you want to initialize values to.
}
return arr;
}
//]]>
I discovered this by using the epubcheck tool which said something to the effect that the file must have properly formed characters or something. I don't recall the exact message. Anyways, this reminded me of a problem I had in a script where I used some unicode characters. I remembered about CDATA which solved it. Then I found this stackoverflow question which basically says it's necessary for when your pages must be interpreted as XML/XHTML as well, which is the case for ePubs.
So, moral of the story is wrap javascript in CDATA tags for ePubs or iBooks.
EDIT: It should be noted that it's worth doing this around all of your JavaScript. The issue in my case was the < less than operator being interpreted as the start of a tag. However, it is probably cleaner to just include the CDATA tag around all of your JavaScript rather than trying to isolate sources of the issue.
EDIT 2: In the interest of aggregating information to whoever finds this answer useful, it should also be noted that having all of one's JavaScript in external files probably also works (according to the source linked in the answer to the question I've linked to). I don't care to test this at the moment, but it should work because the external JavaScript will not be parsed as XML like it is inside of a <script> tag.

The error you report indicates the XHTML file source is in error. I would take a look at, uhh, line 71 column 23 of the XHTML file in question. What's there? Could it possibly be <StartTag>? Is the XHTML being generated programatically somehow? EPUBs are not "compiled"; they are just zipped, and this line/column information refers to the actual position in the XHTML file in the EPUB. What does epubcheck say?
This kind of error message would not be generated by problems in any dynamic HTML created via script; those would result in a DOMError.
My guess is that iBooks is finding some error in the function at parse time, which terminates the parsing process before the XHTML parsing is completed and the XHTML error can be reported. However, I can't imagine what the error might be; I doubt it's the missing semi-colon at the end of the function, but could possibly be depending on what's on the next line.
Totally minor point, but
len = [].slice.call(arguments, 0, 1)[0];
is the same as
len = arguments[0];

Sounds to me more like an XHTML error. When you run in the browser if you are not opening it as an XHTML file, do so and see if it breaks. Browsers tend to be more lenient than EPUB readers. You are most likely creating some sort of invalid HTML element with your slices, it would be great to have the full page to identify exactly what 'getArray()' is returning...

Javascript: TypeError variable is undefined

I am currently building a small web application with similar functionality across all modules. I want to code small generic functions so that all programmers next to me, call these functions and these functions return necessary but important data for them to implement their functionality. In this example, I am trying to deal with the typical "choose true or false" exercise. So from the template.php they call this function:
function checkAnswers(){
var radiobuttons = document.form1.exer1;
var correctAnswers = answers(); //this is an array of string
var checkedAnswers = checkExerciseRB(radiobuttons, 2, correctAnswers);
for(i=0; i<checkedAnswers.length; i++){
alert(checkedAnswers[i]);
}
}
Function checkExerciseRB is my generic function, it is called from checkAnswers.
function checkExerciseRB(rbuttons, opciones, correct){
var answers = new Array();
var control = 0;
for(i=0; i<rbuttons.length; i++){
var noPick="true";
for(j=0; j<opciones; j++){
if(rbuttons[control+j].checked){
if(rbuttons[control+j].value==correct[i]){
answers[i]= 1;
noPick="false";
break;
}
else{
answers[i]=2;
noPick="false";
break;
}
}
}
if(noPick=="true")
answers[i]=0;
control=control+opciones;
}
return answers;
}
It works great but while looking at my favorite browsers (FireFox, Chrome) error log it says:
TypeError: rbuttons[control + j] is undefined
Any clue on how to deal with this matter?

This probably means that control + j is greater than or equal to the length of the array rbuttons. There's no such array element as rbuttons[control + j].
You should learn how to use the JavaScript debugger in your favorite browsers! Debuggers are great. They let you watch this code run, line by line, as fast or as slow as you want, and watch how the value of control changes as you go.
You’ll watch it, and you’ll think “Oh! That line of code is wrong!”

You're looping through rbuttons.length times, but in each loop you're adding 2 to control. Using control to index your array, you're going to run past the end.

Does the index specified by control + j exist in the array? i.e: If that evaluates to 4, is there at least 5 items in the array?
Also, you should be using var i, var j, etc inside your for loop. Without it your variables are leaking into the scope this code is executed in (most likely the global scope, and that's not good) :)

Reading out a JS object

I have been messing around for a project I'm working on with arrays in JS. However, since this didn't work out, I had to turn to objects. Never having used these, I'm wondering about something fairly simple, yet complicated to me. I have the following code:
var ticket_amount = {};
var days = $(".t_days_" + ticket_id).val().split(',');
for(var i = 0; i < days.length; i++)
{
if (! ticket_amount[days[i]])
{
ticket_amount[days[i]] = 0;
};
ticket_amount[days[i]] += num_tickets;
}
This gives me my output as follows:
I now want to use the information in this object to display some more information. More specifically, I need to get both the date and the ticketnumber out so I can work with them in jQuery. I'm not sure how to do this, though.
I've tried stuff like:
for(tickets in ticket_amount) { }, for(var i = 0; i < ticket_amount.length; i++) {}, but none of these options seem to work. How do I get the information out in this specific case? Thanks a lot.
I won't be on the computer after posting this so I won't be able to answer to any questions for now, but I will find time for it tomorrow. Thanks in advance.

You were almost correct. This would print the data you need, for example.
for(ticket in ticket_amount)
{
console.log("Ticket:" + ticket + " amount: " + ticket_amount[ticket]);
}
EDIT:
of course, ticket in the above example should have been named just a tad better :)

for(day in ticket_amount){
// Here day contains the day, and ticket_amount[day] contains the number of tickets
alert(day+': '+ticket_amount[day]);
}

JavaScript for loop help

I'm new to JavaScript and programming in general (although I know some people don't consider JavaScript to be a full programming language; I think it is since it has some OOP tendencies).
I am having trouble understanding for loops.
I'm sorry this is so basic, so please don't condescend.
I have this script:
var total = 0;
for(i = 0; i < 2; total+=100)
{
document.write("The sum is " + total);
}
But, my browser window locks up and it doesn't write anything to the browser window.
What am I doing wrong?

You're forgetting to increment i.