|
JavaScript - Closure Syntax Question
When using anonymous wrappers (I guess they are called like that), what does "()" part do at the end of the stack? An example:
Code: (
function() {}
)
() //Here!
What does it do and how can we use it? Similar TutorialsCode: function foo(x) {
var tmp = 3;
function bar(y) {
alert(x + y + (++tmp));
}
bar(10);
}
foo(2)
is the function a closure? if not? why? thank you is this function a closure in javascript? Code: function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
is the function f2() a closure? if not? why? what's and use of a closure.could you depict it in your own words. thank you js code is as follows: Code: uniqueNo=(function(){
var no=0;
return function(){ return no++; }
})()
document.writeln(uniqueNo()); // 1st time call
document.writeln(uniqueNo()); // 2nd time call
document.writeln(uniqueNo()); // 3rd time call
the result is 1 2 3 why after the 2nd call, the declaration 'var no=0' is useless -- seems 'no' is updated and stored each time it is called? many thanks Hi, i'm looking to send a loop variable (i) to a function inside the loop, but I can't seem to get it to use the value I want, it keeps making it a reference of i and therefore the function is always called using the last value of i rather than the one it was set with. So if i have 5 Tabs then Tab 1, when clicked, should call DefaultTabClick(0) and so on rather than always using 4 for any of the tabs. Code: for (var i = 0; i < AccountSettings.Tabs.length; i++) {
$tabs.append(CreateTabLink(AccountSettings.Tabs[i].Title, DefaultTabClick(i)));});
}
function DefaultTabClick(i) {
var i = i || AccountSettings.Tabs.length - 1;
return function () {
if (currentTab === i) {RenameTab(this);}
else {
SaveTabSettings(currentTab); //Save Current
ClearDashboard(); //Clear Current
LoadDashboardWithLayout(i); //Load Selected
}
}
}
This is pretty cool; here's an online service Google has provided to scrunch your Javascript code down as small as possible. http://closure-compiler.appspot.com/home Here's the intro page... http://code.google.com/closure/compiler/ I like it! I have an alert I'm using over in Salesforce to remind sales reps to use a special terms document when quoting. Problem is, the alert is going off for ALL accounts, not just "Account1" and "Account2". Is this line incorrect in syntax or something? if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2")) Thanks all. This forum has been very helpful for me in the past so this was my first stop! Jeremy Code: <html>
<head>
<script type="text/javascript" language="javascript" src="/js/functions.js"></script>
<script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script>
<script type="text/javascript">
function throwalert()
{
var isstatus = "{!Opportunity.StageName}";
var acct = "{!Opportunity.Account}"
var msgg = "Please remember to use a special terms and conditions quote template when quoting this opportunity.";
if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2"))
{
alert(msgg);
}
else
{
window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};"
}
}
</script>
</head>
<body onload="throwalert()";>
</body>
</html>
I am studying the javascript. I got following codes from json2.js but do not understand syntax of them. if (!this.JSON) { this.JSON = {}; } (function () { ... }()); For 2nd part, why there is () outsider function? and why these is () after function? Thanks a lot. 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? My site will change color schemes when a user presses the button in the top left. I want to add a third theme though. I can't figure it out though. My html as relevent Code: <!--EXTERNAL FILES--> <link rel="stylesheet" type="text/css" href="main.css" /> <!--[if IE]><link rel="stylesheet" type="text/css" href="mainIE.css" /><![endif]--> <link id="altstyle" rel="stylesheet" type="text/css" href="main.css" /> <script type="text/javascript" src="main.js"></script> <!--STOP EXTERNAL FILES--> <title>Votillity.com</title> <!--CSS INTERNAL--> <!--CSS INTERNAL--> <!--JAVASCRIPT INTERNAL--> <!--JAVASCRIPT INTERNAL--> </head> <body onload="startTime()"> <img class="Zindexsty1" style="position: fixed; top: 0px; left: 0px;" src="http://votillity.com/VotillityLogo1.png" alt="VOTILLITY" /> <img class="Zindexsty2" style="position: fixed; top: 0px; left: 0px;" src="http://votillity.com/VotillityLogo2.png" alt="VOTILLITY" /> <button id="altstyact" class="button" style="position: fixed; top: 0px; left: 170px; width: 60px;">Theme</button> Javascript Code: //ALTERNATE STYLES
function changeStyle()
{
var obj1=document.getElementById('altstyact');
var obj2=document.getElementById('altstyle')
test=true;
obj1.onclick=function()
{
test==true?
(obj2.href='main2.css',obj1.firstChild.nodeValue='Classic',test=false):
(obj2.href='main.css',obj1.firstChild.nodeValue='Ice',test=true)
}
}
if(window.addEventListener)
{
window.addEventListener('load',changeStyle,false);
}
else
{
if(window.attachEvent)
{
window.attachEvent('onload',changeStyle);
}
}
//STOP ALTERNATE STYLES
I don't think you need the css's. If, however, I'm wrong just let me know. Keep in mind that the javascript is external. Here's my site if you need a better look Votillity Thank you Hello, In the below script syntax, a simple table converts Celsius degrees into Fahrenheit, using the For loop and integrating it into a table. Code: <html>
<head>
<title>Celsius-Fahrenheit Converter</title>
</head>
<body>
<table border=3>
<tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr>
<script language="javascript">
for (celsius=0; celsius<=50; celsius=celsius+1)
{
document.write("<tr><td>"+celsius+"</td><td>"+((celsius*9/5)+32)+"</td></tr>");
}
</script>
</table>
</body>
</html>
My questions are about the following script inside the <td> tags: <td>"+celsius+"</td> <td>"+((celsius*9/5)+32)+"</td> 1) why is the script inside the above <td> tags placed between " " ? 2) why is the script inside the above <td> tags placed between + + ? Thanks a lot for your explanation to an absolute Javascript beginner...! Hi all, I've got some simple code that I use to drag the corners of a DIV to resize it on the fly. One thing that bothers me is that there is a "global" variable just hanging outside and I would rather "encapsulate" it all into a block of code so that the variable persists, but is not visible outside of the code that uses it. So, here's the code: Code: /***
* support for mouse drag resize of mChat window
* "global" save of mouse start position
**/
var start = 0;
/***
* do-nothing function to attach unused events to
**/
function nullFunc () {
return false;
};
/***
* begin drag
**/
function drag () {
start = 0;
document.onmouseup = up;
document.onmousedown = nullFunc;
document.onmousemove = move;
return false;
};
/***
* end drag
**/
function up () {
start = 0;
document.onmouseup = nullFunc;
document.onmousedown = nullFunc;
document.onmousemove = nullFunc;
return false;
};
/***
* mouse move capture
**/
function move (e) {
var o = mouseXY(e); /* mouseXY not shown here */
if (start) {
mChatSize(o.y - start); /* mChatSize not shown here */
}
start = o.y;
return false;
};
You see the code captures the mouse Y coordinate and then subtracts "start" from it to generate a DELTA (which is what the mChatSize function needs). So, moving the mouse up generates "-1, -1, -1" maybe -2 if dragged fast and +1 +1 +1... if moved down.... you see? Now what I want to do is put all this code in a "box" so that "start" is global to the box, but invisible outside. I tried to do it and made no headway... I'm sure it's simple and I'm just missing it. Any help will be appreciated. Thanks! -- Roger I'm a PHP guy and haven't used jQuery much. I have a script I found in a book and I am trying to get working and am having trouble. It's a drop down list. I am using it in place of an HTML select box, so I want to pass the value selected from the list along with the form in a hidden field. My question is how do I extract the value out of the JS function and get it into the hidden field? Code: $(document).ready(function() {
createDropDown();
$(".dropdown dt a").click(function(event) {
event.preventDefault();
var dropID = $(this).closest("dl").attr("id");
$("#" + dropID).find("ul").toggle();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$(".dropdown dd ul a").click(function() {
var dl = $(this).closest("dl");
var dropID = dl.attr("id");
var text = $(this).html();
var source = dl.prev();
$("#" + dropID + " dt a").html(text);
$("#" + dropID + " dd ul").hide();
source.val($(this).find("span.value").html())
});
});
function createDropDown() {
var selects = $("select.dropdown_value");
var idCounter = 1;
selects.each(function() {
var dropID = "dropdown_" + idCounter;
var source = $(this);
var selected = source.find("option[selected]");
var options = $("option", source);
source.after('<dl id="' + dropID + '" class="dropdown"></dl>');
$("#" + dropID).append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>');
$("#" + dropID).append('<dd><ul></ul></dd>');
options.each(function() {
$("#" + dropID + " dd ul").append('<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>');
});
idCounter++;
});
}
I just found this forum! I'm glad because I wanted to ask some javascript questions before. There was a question at work before at why one would use the following: if (a=='1') ... or if ('1'==a) ... Is there any kind of advantage of using one of the other? Thanks for any response! Code: out += (out ? rogueArray[14] : rogueArray[13]) + arrayItem + ((vanWilder[arrayItem] !== null) ? = + encodeURIComponent(vanWilder[arrayItem]) : rogueArray[13]); There is supposedly a syntax error here on the line up until [arrayItem in Dreamweaver. Any help? I keep getting myself into trouble because I tend to use my Java reference when coding Javascript, and of course Javascript doesn't support all Java functions. I've just discovered that apparently Javascript doesn't support the trim() function. But curiously, if I code it as: mystring.trim() then Firefox will handle it without any errors. (I haven't actually checked to see if whitespace is removed from around the string.) But when I code it like this: trim(mystring) then firefox gives an error. I've also found a couple of situations where I've made syntax errors, and Firefox gives no error message. This makes debugging tricky, since the only resource I have available is Firefox's Error Console. Safari has no error reporting whatsoever, AFAIK. MSIE seems to find some errors that Firefox misses, but I don't have MSIE on my main computer, so it's a nuisance to use. As a hobbyist, I have no budget to buy Javascript development tools. Is there something free available that does a better job of finding errors? On this page http://jimpix.co.uk/ecards/262-no-words.html I get this Javascript error in IE6: Code: Line: 5 Character: 1 Code: 0 Error Message: Syntax error URL: http://jimpix.co.uk/ecards/262-no-words.html I'm using the DebugBar add in for IE (http://www.debugbar.com/) The error message in DebugBar is this: http://jimpix.co.uk/junk/error.png And the view-source of the page is he http://jimpix.co.uk/junk/source-code.png I don't get the error in Firefox 3 or IE7. I can't work out how to fix it. Any advice would be much appreciated. Thanks! i get this error when ever i try to process the form: There was a SyntaxError: Unexpected token < error due to an parsererror condition. Javacsipt/jquery: $(document).ready(function(){ $("#slide").click(function(){ $("#inner-wrapper").slideToggle(); }); $('form #response').hide(); $('#submit').click(function(e){ e.preventDefault(); var valid = ''; var required = ' is required'; var name = $('form #name').val(); var email = $('form #email').val(); var fname = $('form #fname').val(); var femail = $('form #femail').val(); var message = $('form #message').val(); var honeypot = $('form #honeypot').val(); var humancheck = $('form #humancheck').val(); //Error checking if (name == '' || name.length <=2) { valid = '<p>Your name' + required + '</p>'; } if (!email.match(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/)) { valid += '<p>Your email' + required + '</p>'; } if (fname == '' || fname.length <=2) { valid += '<p>Your friend\'s name' + required + '</p>'; } if (!femail.match(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/)) { valid += '<p>Your friend\'s email' + required + '</p>'; } if (message == '' || message.length <=5) { valid += '<p>A message' + required + '</p>'; } if (honeypot != 'http://') { valid += '<p><center>Spambots are not allowed.</center></p>'; } if (humancheck != '') { valid += '<p><center>A human user' + required + '</center></p>'; } if (valid != '') { $('form #response').removeClass().addClass('error') .html('<strong>Please correct the errors below.</strong>' + valid).fadeIn('2000'); }else { $('form #response').removeClass().addClass('processing').html('<center>Working...</center>').fadeIn('2000'); var formData = $('form').serialize(); submitForm(formData); } }); }); function submitForm(formData) { $.ajax({ type: 'POST', url: 'emailfriend.php', data: formData, dataType: 'json', cache: false, timeout: 7000, success: function(data) { $('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success') .html(data.msg).fadeIn('fast'); if ($('form #response').hasClass('success')) { setTimeout("$('form #response').fadeOut('slow')", 5000); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { $('form #response').removeClass().addClass('error') .html('<p>There was a <strong>' + errorThrown + '</strong> error due to an <strong>' + textStatus + '</strong> condition.</p>').fadeIn('fast'); }, complete: function(XMLHttpRequest, status) { $('form')[0].reset(); } }); }; php file PHP Code: <?php error_reporting(E_ALL ^ E_NOTICE); sleep(3); $name = stripslashes($_POST[name]); $email = stripslashes($_POST[email]); $fname = stripslashes($_POST[fname]); $femail = stripslashes($_POST[femail]); $message = stripslashes($_POST[message]); $honeypot = $_POST[honeypot]; $humancheck = $_POST[humancheck]; if ($honeypot == 'http://' && empty($humancheck)) { $error_msg = ''; $reg_exp = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/"; if (!preg_match($reg_exp, $email)) { $error_msg .= "<p>A valid email is required</p>"; } if (!preg_match($reg_exp, $femail)) { $error_msg .= "<p>A valid email is required</p>"; } if (empty($name)) { $error_msg .= "<p/>Please provide your name</p>"; } if (empty($fname)) { $error_msg .= "<p/>Please provide your name</p>"; } if (empty($message)) { $error_msg .= "<p>A message is required.</p>"; } if (!empty($error_msg)) { $return['error'] = true; $return['msg'] = "<h3>Oops! Looks like you missed a few fields.</h3>".$error_msg; echo json_encode($return); exit(); }else { $return['error'] = false; $ref=@$HTTP_REFERER; /////Message at the top of the page showing the url//// $header_message = "Hi $fname \n Your friend $name requested you to visit this page at \n $ref \n"; /// Body message prepared with the message entered by the user //// $body_message =$header_message."\n".$message."\n"; // IP address of visitor is added to message, you can remove it if not required.// $body_message .="\n Sent from http://www.separatethescams.com"; //// Mail posting part starts here ///////// $headers=""; //$headers = "Content-Type: text/html; charset=iso-8859-1\n".$headers; // Un comment the above line to send mail in html format $headers4=$email; // Change this to change from address $headers.="Reply-to: $headers4\n"; $headers .= "From: $headers4\n"; $headers .= "Errors-to: $headers4\n"; $subject="$name visit this site!"; mail($femail,$subject,$body_message,$headers); $return['msg'] = " <b><p><center>Thanks for spreading the word! :) " . "<font color='red'>" .$name . "</font>" . " </p>" . "</b>" . "</center>"; echo json_encode($return); } }else { $return['error'] = true; $return['msg'] = "<h3><center>0ops there was a problem submitting the data. Please try again!</center></h3>"; echo json_encode($return); } ?> html file <html> <head> <link rel="stylesheet" href="ajaxform/form.css" type="text/css" media="screen"/> </head> <body> <div id="wrapper"> <h3 id="slide">Email This Page To a Friend</h3> <hr></hr> <div id="inner-wrapper"> <form id="my_form" action="ajaxform/emailfriend.php" method="post"> <div id="response"><!--This will hold error message and response from server. --></div> <div class="inputs"> <p> <label>Name   ; </label> <input name="name" type="text" placeholder="Your Name" class="required" id="name" size="30" /> </p> </div> <div class="inputs"> <p> <label>Email &nbs p; </label> <input name="email" type="text" placeholder="Your Email" class="required" id="email" size="30" /> </p> </div> <div class="inputs"> <p> <label>Friend's Name </label> <input name="fname" type="text" placeholder="Friend's Name" class="required" id="fname" size="30" /> </p> </div> <div class="inputs"> <p> <label>Friend's Email </label> <input name="femail" type="text" placeholder="Friend's Email" class="required" id="femail" size="30" /> </p> </div> <div class="inputs"> <p> <label id="msg">Message </label> <textarea name="message" cols="24" rows="5"type="text" placeholder="Message To Friend" class="required" id="message"></textarea> </p> </div> <div class="button"> <input name="submit" type="submit" id="submit" value="EMAIL PAGE" /> </div> <div class="inputs"> <input type="hidden" name="honeypot" id="honeypot" value="http://" /> <input type="hidden" name="humancheck" id="humancheck" class="clear" value="" /> </div> </form> </div> <!-- inner-wrapper end --> </div> <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="ajaxform/ajax_submit.js"></script> </body> </html> Can someone explain to me the differences between the following code snippets? Mainly i don't understand the purpose of using prototype and not sure if there is a functional difference between the syntax of declaring functions. Code: var myObj = function () {
this._myInt = 1;
}
myObj.prototype = {
myNewFunction: function() {
this._myInt = 2;
}
}
VERSUS Code: var myObj = function () {
this._myInt = 1;
function myNewFunction(){
this._myInt = 2;
}
}
Code: <html>
<head>
<style>
.errorWrapper {padding:0; margin:0; list-style-type:none; position:relative;}
.errorBox {padding:5px; position:absolute; left:100px; top:100px; background-color:#BADA55;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
box-shadow:2px 2px 2px #808080; -moz-box-shadow:2px 2px 2px #808080; -webkit-box-shadow:2px 2px 2px #808080;}
li.errorBox {display:none;}
</style>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<a href="#" onClick="show('test')">test</a>
<ul class="errorWrapper">
<li id="test" class="errorBox">This should remain hidden until the link is clicked. Lorem ispum dolor sit amet. Placetne tibi? Mihi placet.</li>
</ul>
</body>
<!-- Contents of test.js -->
<!-- function show(boxName) {alert(boxName); document.getElementByID(boxName).style.display="block";} -->
</html>
wtf is wrong with this? I'm brand spanking new to js, so I don't even know how to begin to troubleshoot this. As far as syntax goes I haven't seen any glaring errors, which leads me to believe I'm trying to do something illegal? The alert box shows up, and the boxName variable contains the correct contents (the ID of the element I want to show), so I dunno what the problem is... Quick reproduction of the problem above. |
|||||||