markifornia

This one's a simple question, I am just trying to figure out where the supplementary markup code for the code is? I am fine coding this myself though, I was just making sure otherwise I will also check the source files provided on Larry Ullman's site. Figure 8.7/8.8 displays the form on reporting events on page 292. Thanks, Mark

Thanks Hartley, could very well be the reason why on page 287, both events are passed to the function. U.addEvent(U.$('comments'), 'keyup', limitText); U.addEvent(U.$('comments'), 'change', limitText); Page 288 goes into detail about accessibility with introducing a concept known as "pairing events". I guess the above is similar to the concept. <a href="somepage.html" id="link">Some Text</a> // javascript: addEvent(document.getElementById('link'), 'mouseover', doSomething); addEvent(document.getElementById('link'), 'focus', doSomething); I guess this makes some sense now.

This chapter discusses a topic on keyboard events. I have provided links to my dev website. On page 284, the "change" event is added to the U.addEvent method. U.addEvent(U.$('comments'), 'change', limitText); http://www.sandiegowebcreative.com/text.html On page 284, the "keyup" event is added to the U.addEvent method. U.addEvent(U.$('comments'), 'keyup', limitText); http://www.sandiegowebcreative.com/text2.html I don't notice the difference between the two. I receive the same results from my browser, or I may not be noticing that which is obvious (or not as obvious?) Anyone come across this?

You've both pointed out some advanced concepts just beyond me in my learning process, but I see both ways working. I've built some forms just using PHP and Javascript where I'll have the form dynamically load the form (including javascript validation routines), and then have a noscript version of the form handled by PHP (the fallback, with validations). So here, I have done the same thing - two versions - let me tell you though, this method has worked successfully against spam bots. My forms are completely CAPTCHA free. So I drew a parallel to my approach. But here I am learning how to build ajax applications. I'm not looking at the task lazily but just imagine a large web application. My first thought is that if I have many pages, I would have to build an ajax and a non ajax version for each one. It does make sense to do so, it is not like every page should be dependent on ajax right. Ajax is also useful in updating just a specific part of the page (such as a poll). I have not built a large ajax web application, so I may have no say in this at this point. As Larry confirmed, two versions is the best way to go about it as I drew that parallel with my experience with building contact forms. Assuming ajax driven forms aren't used heavily throughout the web application, which I think is often true than not (just a guess). I guess when I thought about this approach, I started thinking okay - I have 100 pages, now I have to build 100 ajax versions and 100 non ajax versions. I was thinking overkill. Not the case. Thanks for the input

ajax.open('get', dept_results_ajax.php?did=' + encodeURIComponent(did))); My question is actually a simple one. To create an ajax driven web application are two similar php files necessary? ie dept_results.php (non ajax version) and dept_results_ajax.php (ajax version)? Can there be one file that can also be the fallback? I may be getting ahead of myself, as I am only on chapter 3. I am just trying to see how others have built their ajax web applications. Thanks, Mark

That threw me off too, I have no idea what the text is referring too. So they are no longer present, what exactly is no longer present? Whats reset? I did figure the same thing, in that learning by doing would get my head around it hopefully in the near future. As I do get hyperfocused into these things. As for now I'll just do what the book says and add e.preventDefault () and e.returnValue = false

excellent antonio! I like the idea of parameter hinting

coolio, thanks Hartley

function handleForm() { // Do whatever. if (errors) { return false; } else { return true; } } The text goes on to say "Conversely returning anything other than false allows the default event behavior to occur (in that case, the forms submission). The problem with returning false to prevent the default browser behavior is that it only works reliably when the event listener was registered using the traditional approach. For example say event.js added the form submissison event handler using the newer approach. U.addEvent(U.$('theForm'), 'submit', setHandlers); With that code, you would see that the form's submission would go through meaning that the form itself would be reset (upon resubmission) and the event listeners would not be present (they would have been created, but reset upon submission)." It's not clear to me why the U.addEvent custom method wouldn't work here. When we defined the U object on page 276, the addEvent method already had a fall back for browsers that didn't support the addEventListener() method, as below: addEvent: function(obj, type, fn) { 'use strict'; if (obj && obj.addEventListener) { obj.addEventListener(type, fn, false); } else { obj.attachEvent('on' + type, fn); } } Clearly, in the code above that attachEvent() method is used as an alternative for browsers that don't support the addEventListener() method. Question now is why do need to use the e.preventDefault() method on top of everything? Thanks, Mark

Again, another simple question but this one is regarding the example in the book as follows: function someEventHandler(e) { // use e. } The text says "Often the argument is abbreviated as just e or evt, short for event." Are "e" and "evt" reserved keywords? Or is the text just saying that "e" and "evt" are used commonly as the argument? Any argument could have been used such as "x" and "y", correct?

I just took a look at Hartley's attached diagram. wow, I would have expected more native objects. Sure there are arrays, but this nice visual makes things much clearer. Thanks for that.

ehh the heck with it, I'll go with this.

My apologies for dragging this on with a bland example (I'm still learning this whole deal about objects), but in this simple example dog has 3 properties - color, weight, and name. And then it has one method which is bark. var color = 'brown'; var weight = 50; var name = 'fido'; var dog = { color: color, weight: weight, name: name, bark: function() { var bark = 'woof!'; if(name == 'fido') { return 'bark'; } else { return 'meow'; } } }; alert(dog.color); alert(dog.weight); alert(dog.name); alert(dog.bark()); A comparison would be all the built in methods that javascript already comes with such as toLowerCase(); It's a method. var greeting = 'HELLO WORLD'; alert(greeting.toLowerCase());

Did you get this to work, it seems your post is more of a solution than a question? I also ran across this and noticed numbers was not a parameter of the function and wondered where it came from. Let me know if you still have any issues with it though.

var U = { $: function(id) { 'use strict'; if(typeof id = 'string') { return document.getElementById(id); } // end of typeof } // end of $() function } // end U object This is a rather simple question. The text says the $() function is a property of U, isn't this function technically a method and not a property? Thanks, Mark

great thanks Larry!

function sortWords(max) { // Function block } Why does this function require a parameter of "max"? The argument passed here isn't used anywhere in the function body? Thanks, Mark

ya no offense taken. the task.value=""; works outside the loop, thanks for the warning. As for the join() method, it simply doesn't make sense to use this approach inside the loops as you noted before. So I'll leave it as is. Thanks!

Hartley, Since you may not have the book handy, here's the entire script for your reference: var tasks = []; function addTask() { 'use strict'; var task = document.getElementById('task'); var output = document.getElementById('output'); var message = ''; if (task.value) { tasks.push(task.value); message = '<h2>To-Do</h2><ol><li>'; for (var i = 0, count = tasks.length; i < count; i++) { message += tasks.join('<li><li>'); task.value = ""; } /* This script was used to create random tasks, but I'm commenting this out for now var randomNumber = tasks.length; var randomTask = parseInt(Math.random() * randomNumber, 10) + ''; message += '<li>Random Task:' + tasks[randomTask] + '</li>'; */ message += '</li></ol>'; output.innerHTML = message; }// end task value conditional return false; } // End addTask Function function init() { 'use strict'; document.getElementById('theForm').onsubmit = addTask; } window.onload = init; task.value = ""; The above code clears any data from the from the text input after a task has been added to the array as opposed to the same data remaining there (if you keep clicking submit, the same data is being output). It was one of the PURSUE's at the end of the chapter. It made logical sense in the script and worked fine. Unless I may be using the incorrect method. You left a good note regarding the join method, it probably explains why I couldn't get it to work properly while using the loop method. It simply didn't make sense. There is a PURSUE at the end of the chapter asking to use the join() method in that manner. Update tasks.js so that it uses join() to create the final message, instead of concatenating together multiple strings. The only place where concatenation really occurs is in the loop, so I was attempted to make the join() method work. In this case, it may not make sense but I tried anyway.

Hi placid, I was stuck where you were at and tried the below, finally got it to work. var randomNumber = tasks.length; var randomTask = parseInt(Math.random() * randomNumber, 10) + ''; message += '<li>Random Task:' + tasks[randomTask] + '</li>'; Is this similar to yours? Also have you figured out how to modify the script so that the join() function is used to create the final message (instead of concatenating them)? message = '<h2>To-Do</h2><ol><li>'; for (var i = 0, count = tasks.length; i < count; i++) { message += tasks.join('<li><li>'); task.value = ""; } message += '</li></ol>'; The code above keeps creating an empty list elements, each time an element is added / loop is iterated.

Hartley thanks for drilling this down. += operator is screwed to my head.

I got confused with what you're saying here at first, with you should never add an array to a variable with +=. But I'm assuming you mean its okay to add an array to a variable (using the += operator) if we are looping through an array. I'm glad you read my mind here, the route of having no choice to access all individual values is where I was getting at. The nested loop is absolutely required. Not embarassed at all, thanks for your time. Always a pleasure.

Thanks Hartley, you've pointed out a lot of things to learn from. I am really just trying to understand the difference in storing array values with php and javascript. As I have tested with a simple array (no longer the multidimensional for simplicity sake), I finally grasp the concept now. In PHP: <?php $terran = array('marine', 'marauder', 'reaper'); for ($i = 0; $i < 3; $i++) { echo $terran[$i]; } ?> In Javascript: function process() { 'use strict'; var message = ''; var message2 = ''; var terran = ['marine', 'marauder', 'reaper']; var output = document.getElementById('output'); var output2 = document.getElementById('output2'); for (var i = 0, count1 = terran.length; i < count1; i++) { message = terran[i]; // Will print out the last value in the array. message2 += terran[i]; // Will print out all the values. } if(output.textContent !== undefined) { output.textContent = message; } else { output.innerText = message; } if(output2.textContent !== undefined) { output2.textContent = message2; } else { output2.innerText = message2; } Looping through arrays in Javascript is different from PHP in that it seems to add values to a variable, whereas in PHP values are stored. In Javascript array values are overridden as new values get assigned, but in PHP array values do not. Is this what is going on? Thanks for your patience, your help much appreciated.

major sc2 fan, looking forward to heart of swarm. I might of gotten confused with how php arrays are handled, although there are some major differences between php(which I have yet to figure out) and javascript, I took a chance and used similar syntax. in PHP a similar loop would have been fine wouldn't it? See below: echo $message = terran[$i]; in javascript, concatenation is handled a little different as you mentioned the first value is overriden by the second value. But as you advised, below works now: message += terran[i];

I was working on a simple for loop to emulate the the given example on page 201, the labeled box "MULTIDIMENSIONAL ARRAYS". The example actually shows how to loop through the subarray, but instead I just wanted to loop through the top level array for simplicity. Here is a similar example but with different values in the array: function process() { 'use strict'; var message = ''; var terran = [['marine', 'marauder', 'reaper'], ['battlecruiser', 'banshee', 'raven']]; var output = document.getElementById('output'); for (var i = 0, count1 = terran.length; i < count1; i++) { message = terran[i]; } if(output.textContent !== undefined) { output.textContent = message; } else { output.innerText = message; } } window.onload = process; And then the object element to output: <div id="output"></div> When the script is run, this is what it outputs: battlecruiser,banshee,raven Is this the correct result? The script is returning the second element in the array. Thanks! Mark