JavaScript - Javascript Events Are Really Just Function References?
Similar TutorialsHey all, I am confused about the true difference between the two below examples. Code: first example: // Demonstrating a problem with closures and loops var myArray = [“Apple”, “Car”, “Tree”, “Castle”]; var closureArray = new Array(); // Loop through myArray and create a closure for each that outputs that item for (var i = 0; i < myArray.length; i++) { var theItem = myArray[i]; closureArray[i] = function() { document.write(theItem + “ < br / > ”); } } // Loop through the closures and execute each one. for (var i = 0; i < closureArray.length; i++) { closureArray[i](); } Here we iterate through the length of myArray, assigning the current index of myArray to theItem variable. We declare closureArray 4 times as an anonymous function. The anonymous function in turn declares the predefined write() function, which is passed parameters. Since write() is in closureArray() a closure is created??? During each iteration, theItem is reassigned its value. The four closures reference this value. Since they reference this same value and since this value is reassigned ultimately to the value of the fourth index position, tHe time we execute closureArray later on, all four closures output the same string. This is because all four closures are within the same scope "the same environment" and therefore are referencing the same local variable, which has changed. I have a couple of problems with this example: 1) I thought a closure is a function that is returned - the inner function is not returned above. 2) theItem is not even a local variable of the parent function (closureArray) - I thought in order for a closure to work, the inner function only accesses the local variables of the outer function, but in this case the local variable is defined OUTSIDE of the parent function. 3) The guy says the "the four closures are sharing the same environment." The thing is even in the second example, they are sharing the same environment. Second example: Code: // A correct use of closures within loops var myArray = [“Apple”, “Car”, “Tree”, “Castle”]; var closureArray = new Array(); function writeItem(word) { return function() { document.write(word + “ < br / > ”); } } // Loop through myArray and create a closure for each that outputs that item for (var i = 0; i < myArray.length; i++) { var theItem = myArray[i]; closureArray[i] = writeItem(theItem); } // Loop through the closures and execute each one. for (var i = 0; i < closureArray.length; i++) { closureArray[i](); } Here we iterate over the length of myArray (4 times), assigning the index of myArray to theItem variable. We also return a function reference to the closureArray during each iteration (closureArray[i]), where i is index number so we assign 4 functon references. So when we iterate through myArray, we immediatelly call the writeItem() fucntion passing an argument of theItem at its current value. This returns a child anonymous function and when that child function is called, it will execute a block that calls the predefined write() method. We assign that returned anonymous function to the variable closureArray. Hence, closureArray holds a reference to that anonymous function. So closureArray during each iteration holds a reference to the anonymous function and we later call closureArray, which in turn calls the anonymous function, therefore calling the predefined write() function to output the local variable of the parent function. This outputs each distinct index of myArray. QUESTION: This is because since we created the closure, when we call writeItem, passing theItem argument, since theItem is a local variable of the parent function of the closure, it is never destroyed when we later call closureArray (the reference to the child anonymous function)? Yet weren't we using a closure in the first example as well? So whey wasn't those variables preserved? I don't think it has anything to do with assigning a returned anonymous function to closureArray. Even though an anonymous function creates a new memory position in the javascript engine, therefore not overwriting the other function references we create during the iteration, it's still referring to a local variable declared outside the reference. So if it's about the closure retaining value of parent's local variable even after exiting the parent function allowing for the current indexes to be preserved, then why did the closure in the first example fail to retain each index? Thanks for response im new to webpage programming,but do hav some basic c/c++ programming skill. in order for me to understand the following codes, what should i read? i had read thru w3schools.com html and javascript tutorials but it is stil difficult for me to understand the codes,can somebody help me?thanks! Code: function getQuery() { var scoping = "&project=${currentProject}&projectScopeUp=" + projectScopeUp + "&projectScopeDown=" + projectScopeDown; var paging = "&pagesize=100"; return { "currentProject" : "/iteration:current/project", "#storyType" : "/typedefinition?query=(Name = \"Hierarchical Requirement\")", "taskUnit" : "${iteration/workspace/workspaceConfiguration/taskUnitName}", "storyStates" : "${#storyType/attributes[name=schedule state]/allowedvalues/stringvalue}", "iteration" : "/iteration:current?fetch=name,objectid&order=StartDate", "iterations" : "/iterations?fetch=name,objectid&order=StartDate,Name&project=${currentProject}&projectScopeUp=false&projectScopeDown=false" + paging, "users" : "/users?fetch=displayname,loginname,emailaddress,objectid" + paging, "tasks" : "/tasks?fetch=taskindex,name,objectid,formattedid,owner,blocked,estimate,todo,actuals,state,workproduct&query=(Iteration = ${iteration})" + scoping + paging, "stories" : "/hierarchicalrequirement?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal,tasks&order=Rank&query=(Iteration = ${iteration})" + scoping + paging, "defects" : "/defect?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&order=Rank&query=(Iteration = ${iteration})" + scoping + paging, "defectsuite" : "/defectsuite?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&order=Rank&query=(Iteration = ${iteration})" + scoping + paging, "testsets" : "/testset?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&query=(Iteration = ${iteration})" + scoping + paging }; } I was testing a required entry form, and i'm stuck. Code: <html> <head> <script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else { return true; } } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Username must be filled out!")==false) {username.focus();return false;} } } </script> </head> <body> <form action="submit.htm" onsubmit="return validate_form(this)" method="post"> Username: <input type="text" name="username" size="20"> <input type="submit" value="Submit"> </form> </body> </html> i have this so far. i want to add a password part. i know i would take Code: Password: <input type="text" name="password" size="20"> and put it underneath the username part in the codes., but i don't know to do the rest, with the error message poping up. I am using a freebie script that changes css elements using onClick when you hit a button. I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list. 2 button examples (and js code) is: <input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" /> <input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" /> How do I convert this to a SELECT list?? Thank you! in the attached photos you have a wheel of colors and a corresponding cascading menu. I'd like to just be able to onmouseover one of the 8 colored polygons within the wheel, have it replace the wheel with one of 8 new images depending on which polygon the mouse is over, and at the same time, light up the corresponding image on the cascading company menu group. is this possible with javascript? links to a tutorial? I've had some experience with replacing one image with another onmouseover, but not with breaking up one image into 8 parts, each with a separate image replacement. I could see how you could perform this with only 4 different colored polygons, but not 8. Hi all, The question is hopefully relatively simple. if I have an object say Code: [ var SampleObject = function(id){ SampleObject.id = id; SampleObject.age= 22; } Is there a way to create an event that triggers every time the age member value changes? Thanks Ollie. Hi I am using httpXmlRequest object to call a xml web service. In order to successfully perform a task there are couple steps need to happen. 1 you have to request for a session (cookie) 2 with the cookie, we need to authenticate with the server 3 then perform other actions snippet of my code looks something like this. Basically here i am trying to get the cookie, login and then logout once logged in. function connect() { document.myForm.elements['myTextArea'].value += "connecting to teh server.\n"; try { xhttp.open("GET",urlStr + commonInfoParam, true); xhttp.send(); xmlDoc = xhttp.responseXML; xmlDoc.onreadystatechange = function () { if(xmlDoc.readyState == 4) { var resultsTag = null; resultsTag = xmlDoc.getElementsByTagName("results"); if(resultsTag != null) { for(i=0;i<resultsTag.length;i++) { var commonTag = resultsTag[i].getElementsByTagName("common"); for(j=0;j<commonTag.length; j++) { cookie = commonTag[j].getElementsByTagName("cookie")[0].childNodes[0].nodeValue; break; } } } if(cookie != null) { document.myForm.elements['myTextArea'].value += "cookie found: " + cookie + "\n"; login(); } } }; } catch(e) { document.myForm.elements['myTextArea'].value += "Exception occurred at connect: " + e.message + "\n"; } } function login() { var loginRequestURL = "http://testconnect.com/api/xml?action=login&login=" + username+ "&password=" + password + "&session=" + cookie; try { xhttp.open("GET", loginRequestURL, true); xhttp.send(); xmlDoc = xhttp.responseXML; xmlDoc.onreadystatechange = function () { alert('in loginResponseHandler'); if(xmlDoc.readyState == 4) { try { loginStatus = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue; if(loginStatus == 'ok') { alert("login is good: " + loginStatus); logout(); } else { } } catch(e) {} } }; } catch(e) { } } function logout() { alert("in logout"); try { xhttp.open("GET", logoutRequestURL + cookie, true); xhttp.send(); xmlDoc = xhttp.responseXML; xmlDoc.onreadystatechange = function () { alert("in logoutResponseHandler"); if(xmlDoc.readyState == 4) { try { status = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue; if(status == 'ok') { alert(status); } } catch(e) {} } }; } catch(e) {} } so when I run my code in the browser, all my alert stages give me proper message as expected. But at the final alert, it hangs. I just could not figvure out what am i doing wrong. can any one pin point this out for me please? Thanks in advance. KM Hello I need help regarding capturing page events(mouse click ,navigation) etc on web pages and write them into a text file (using javascript). One way is using javascript events and writing them into text file. Is there be a better way of doing this ?? Hello, I have a question about the cut and paste javascript events calendar at http://www.javascriptkit.com/script/...calendar.shtml Is there any way to add links to the event description that appears in the box below the calendar? Thanks for your help. without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events? for instance, i have a website i log into that has a "submit" button. the button itself only has this code: Code: <input type="image" class="png" tabindex="5" value="Go" src="login.png"> obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case. consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly. any help!? Can we have two onFocus javascriptscript events for single HTML Tag? Thank you..
HTML TARGET: Code: <div id="login_link" style="margin-top:-142px;margin-left:245px;height:142px;"> <img id="login_link" src="menu_button.png" /><a href="#"><img src="menu_button.png" /></a></div> </div> I'm trying to get menu_button.png to change to menu_button2.png on mouseover... I'd also like it to play a sound on click like "click.wav" I can't rename the div because it controls the slider Heres my current project table: http://bit.ly/dbwH23 I tried to put it in a span and have the span referance to the next tag but it didn't seem to work at least not in firefox. I'm going to keep lookin around but i'm not used to these types of code structure. I was thinking of Embeding a flash file inside the div instead but that might be overkill. Anyone know of a solution that might work? is there a way to shorten something like: document.scoresheet["HomeTotalHCaps"].value to a simple short name like var1.value ? So I am using JavaScript to make a table on a page and what I want to do is have the JavaScript create the table, and then allow the user to fill it with data. I have been able to make the JavaScript create the table, my question is how to reference the cells in my script that adds data to the cell. I want the users to be able to click a button an add data into different cells so i figured giving them each an Id and referring to that Id in the button is the best way to do it. How can I edit my code to give each cell a different Id? Or is there a better way of doing this? My table code looks like this (i have filled it with random data so it is not just a blank table). <code> <script type="text/javaScript"> window.onload = fnInit; function fnInit() { // Declare variables and create the header, footer, and caption. var oTable = document.createElement("TABLE"); var oTHead = document.createElement("THEAD"); var oTBodyam = document.createElement("TBODY"); var oTBodypm = document.createElement("TBODY"); var oTFoot = document.createElement("TFOOT"); var oCaption = document.createElement("CAPTION"); var oRow, oCell; var i, j; // Declare stock data that would normally be read in from a stock Web site. var heading = new Array(); heading[0] = ""; heading[1] = "Monday"; heading[2] = "Tuesday"; heading[3] = "Wednesday"; heading[4] = "Thursday"; heading[5] = "Friday"; var block = new Array(); block[0] = "8:30"; block[1] = "9:55"; block[2] = "11:20"; block[3] = "12:45"; block[4] = "2:10"; block[5] = "3:35"; block[6] = "5:00"; block[7] = "6:30"; var stock = new Array(); stock[0] = new Array(block[0],"88.625","85.50","85.81","99.54","55.46"); stock[1] = new Array(block[1],"102.75","97.50","100.063","49.54","55.46"); stock[2] = new Array(block[2],"56.125","54.50","55.688","99.54","55.46"); stock[3] = new Array(block[3],"71.75","69.00","69.00","99.54","55.46"); stock[4] = new Array(block[4],"71.75","69.00","69.00","99.54","55.46"); stock[5] = new Array(block[5],"71.75","69.00","69.00","99.54","55.46"); stock[6] = new Array(block[6],"71.75","69.00","69.00","99.54","55.46"); stock[7] = new Array(block[7],"71.75","69.00","69.00","99.54","55.46"); // Insert the created elements into oTable. oTable.appendChild(oTHead); oTable.appendChild(oTBodyam); oTable.appendChild(oTBodypm); oTable.appendChild(oTFoot); oTable.appendChild(oCaption); // Set the table's border width and colors. oTable.border=1; oTable.bgColor="lightslategray"; // Insert a row into the header and set its background color. oRow = document.createElement("TR"); oTHead.appendChild(oRow); oTHead.setAttribute("bgColor","lightskyblue"); // Create and insert cells into the header row. for (i=0; i<heading.length; i++) { oCell = document.createElement("TH"); oCell.innerHTML = heading[i]; oRow.appendChild(oCell); } // Insert rows and cells into bodies. for (i=0; i<stock.length; i++) { var oBody = (i<3) ? oTBodyam : oTBodypm; oRow = document.createElement("TR"); oBody.appendChild(oRow); for (j=0; j<stock[i].length; j++) { oCell = document.createElement("TD"); oCell.innerHTML = stock[i][j]; oRow.appendChild(oCell); } } </code> Hey all, I am having issues with below script. Firebug returns: form[0] is undefined [Break on this error] $(form[0].elements).each(function() { I have this under my form: <script> var thisForm = $('#validateForm'); thisForm.validation(); </script> Code: (function($) { /* Validation Singleton */ var Validation = function() { var rules = { email : { check: function(value) { if(value) return testPattern(value,".+@.+\..+"); return true; }, msg : "Enter a valid e-mail address." }, url : { check : function(value) { if(value) return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?"); return true; }, msg : "Enter a valid URL." }, required : { check: function(value) { if(value) return true; else return false; }, msg : "This field is required." } } var testPattern = function(value, pattern) { var regExp = new RegExp("^"+pattern+"$",""); return regExp.test(value); } return { addRule : function(name, rule) { rules[name] = rule; }, getRule : function(name) { return rules[name]; } } } /* Form factory */ var Form = function(form) { var fields = []; $(form[0].elements).each(function() { var field = $(this); if(field.attr('validation') !== undefined) { fields.push(new Field(field)); } }); this.fields = fields; } Form.prototype = { validate : function() { for(field in this.fields) { this.fields[field].validate(); } }, isValid : function() { for(field in this.fields) { if(!this.fields[field].valid) { this.fields[field].field.focus(); return false; } } return true; } } /* Field factory */ var Field = function(field) { this.field = field; this.valid = false; this.attach("change"); } Field.prototype = { attach : function(event) { var obj = this; if(event == "change") { obj.field.bind("change",function() { return obj.validate(); }); } if(event == "keyup") { obj.field.bind("keyup",function(e) { return obj.validate(); }); } }, validate : function() { var obj = this, field = obj.field, errorClass = "errorlist", errorlist = $(document.createElement("ul")).addClass(errorClass), types = field.attr("validation").split(" "), container = field.parent(), errors = []; field.next(".errorlist").remove(); for (var type in types) { var rule = $.Validation.getRule(types[type]); if(!rule.check(field.val())) { container.addClass("error"); errors.push(rule.msg); } } if(errors.length) { obj.field.unbind("keyup") obj.attach("keyup"); field.after(errorlist.empty()); for(error in errors) { errorlist.append("<li>"+ errors[error] +"</li>"); } obj.valid = false; } else { errorlist.remove(); container.removeClass("error"); obj.valid = true; } } } /* Validation extends jQuery prototype */ $.extend($.fn, { validation : function() { var validator = new Form($(this)); $.data($(this)[0], 'validator', validator); $(this).bind("submit", function(e) { validator.validate(); if(!validator.isValid()) { e.preventDefault(); } }); }, validate : function() { var validator = $.data($(this)[0], 'validator'); validator.validate(); return validator.isValid(); } }); $.Validation = new Validation(); })(jQuery); 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, How can I call a PHP Function inside a Javascript Function? This is what I have so far, but I don't think I'm doing it the right way. Any suggestions? PHP Code: <?php function phpQuery(){ $query = mysql_query("INSERT INTO mytable VALUES('','name','email')"); } ?> <script type="text/javascript"> function delayQueries() { timeoutID = window.setTimeout(doQueries, 2000); } function doQueries() { var runQuery = "<?php phpQuery(); ?>"; } </script> I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) { x.style.backgroundColor="transparent" } Function ActivationFuction() { activate.function="unhighlight" } thanks Hi everyone, I am pretty new at javascript OOP. I have a javascript file that has plenty of javascript functions, variables, arrays, etc. I need to convert this into an object. Here is an example: Code: var myvar1 = ''; var myvar2 = new array(); var myvar3 = new array(); var myvar4; var myvar5 = 60; var myvar6 = ''; function myfunc1(){ myvar1 = 'hello'; return myvar1; } function myfunc2(somenum=0){ myvar5 = somenum; //calling myfunc1() from within this function. //do something in here } function myfunc3(){ //calling myfunc1() from within this function. for(i=0;i<somelength;i++){ myvar2 = myvar3[i]; (something to put into the array) } } 1. I need to create an object and put ALL the varibles (myvar1 - myvar5) in that object. 2. Then the first two functions "myfunc1 and myfunc2" inside the same object. 2. And the function myfunc3 needs to sit OUTSIDE my object as a regular javascript function. It calls on myfunc1 (which is inside the object) and also inserts data into myvar2 (which is classified inside the object) and myvar3 (which is classified inside the object as well). This is what i came up with, but it's not going well: Code: var myobj1 = function(){ this.myvar1 = ''; this.myvar2 = new array(); this.myvar3 = new array(); this.myvar4; this.myvar5 = 60; this.myvar6 = ''; var myfunc1 = function(){ this.myvar1 = 'hello'; return this.myvar1; } var myfunc2 = function(somenum=0;){ this.myvar5 = somenum; //calling this.myfunc1() from within this function. //do something in here } } function myfunc3(){ //calling mynewobj.myfunc1() from within this function. for(i=0;i<somelength;i++){ mynewobj.myvar2 = mynewobj.myvar3[i]; (something to put into the array) } } var mynewobj = myobj1; HELP.....!!!! i really want to get into object oriented world, so thanks in advance. |