JavaScript - Beginner Javascript Question (loops, Functions, Etc.)
I want to learn javascript and I found codecademy.com which seems like a great way to learn the language. Before the first lesson it says
Quote: You should be comfortable with loops, if statements, functions, and objects before attempting this course. Can someone explain what these are or point me in the direction where I can find the answers? I tried searching with google, but I havent found anything that clearly states what exactly the loop, object, etc. is. Similar TutorialsWhat I'm trying to test out and learn is the process of a form using the get methode to print out the entered number to another test.htm page 1st code is the form Code: <html> <head> <script type="text/javascript"> </script> </head> <body> <form action="test.htm" method="get"> <font size="1" face="tunga">Enter a number</font> <input type="text" name="number" size="2"> <input type="submit" value="Submit"> </form> </body> </html> the 2nd code is the test.htm page I was hoping the value of var = number would document.write to this page. I was hoping I could do this without using ASP of php. I can see in the URL after the second page loads that the var number dos = the numbered entered but I can not get it to display. Code: <html> <head> </head> <body> <script type="text/javascript"> document.write("The number you entered is " + number); </script> </body> </html> as you can see im a beginner and im trying to learn this. I hope its not a stupid question Thanks John Help me anyone I am completely stuck. If you do this I shall build a shrine in your honour. In the following code the 'for' loop gets data from the relevant tags of an XML file, then puts them into the 'txt' variable. It then moves onto the next record in the XML file and does the same thing. However, I don't want the contents of txt to be overwritten each time the code loops through each record. Instead I want it to add to txt, then loop around and add the new contents of txt to the previous contents of txt. I tried txt = txt + artist + title + year; but this didn't work. Can anyone explain how to do this? Please note the contents of the variables are strings of text not numbers. Code: x=xmlDoc.getElementsByTagName("CD"); i=0; function displayCD() { for (var i=0;i<x.length;i++) { artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue); txt= "Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year; } document.getElementById("showCD").innerHTML=txt; } I created a For Loop and counter starts at 0, then increase in increments of 1 after each iteration of loop i run a command 1( add html code such as Code: <td>named (part)</td> <td class= 'num'>votes</td> Then create variable of named percent use totalV for value of sum parameter then i add html code of Code: <td class='num'>(percent%(</td> then i add a function named createBar(0 using race[0], name1, party1, and votes1 in parameter values this is my coding Code: for (var i=0; i < name.length; i++) { document.write("<tr>"); document.write("<td>" name[i] + "(" + party[i] + ")</td>"); document.write("<td class='num'>" + votes[i] + "</td>"); var percent=calcPercent(votes[i], totalV) document.write("<td class='num'>(" + percent +"%)</td>"); createBar(party[i],percent) document.write("</tr>"); } document.write("</table>"); } </script> </head> so any improvements or what i am missing in my functions. I've now got to form an average of snowfall inputs, taken from looped prompts, however I'm not allowed to use arrays or functions... Almost every example I see uses arrays, such as this one he http://www.codingforums.com/showthread.php?t=4313 Is it possible to not use arrays to form the average? Please describe how to do this in general terms, as was highlighted in that link ^^^ I want to learn, not copy, although one can be derived from the other... What I haveso far, assume all vars have been announced. Code: for (var d=1; d<=numofinputs; d=d+1) { input = prompt("Enter a data input" + d) } Is it possible I'm attempting this in too general a manner? ie, running before I can walk. Hello, Problem 1: I have a function and it sets a value to a certain number according to the input. However, I don't want the function to print out the value to the screen, but instead temporarily save it for me to use throughout the whole script. I am a newbie and please help me. For example, I make this code: function add1(x) { var x = x + 1 return x; } and I call the function: add1(0); document.write("value = " + x + "<BR>"); Whenever I do this, document.write doesn't print out value = 1, it doesn't even print anything except for the headers, etc. Is there anyway to set the var x to be a value valid throughout the whole script instead of just the function itself? I really need help on this, thanks. Problem 2: I want to get a code working. Basically, I use a ram to "ram the gate". I set the damage done each turn, and the Gate's Health too. So for example, my ram's damage is 10 and the gate's health is 200. It would take 20 times to totally breach the gates(i.e., for gate health to become 0). When I use the following code, the total damage is the same throughout the whole looping until the gatehealth reaches 0 which makes it boring, is there anyway to modify or improve the script such that when I loop, the MiscDamage would be different for all the turns? thanks! Once again I apologize for asking such a noob-ish and very strange.... question. Quote: <script language="JavaScript" type="text/javascript"> <!-- // Begin function RamGates(Ram, Attack, Gate) { //introducing variables to be used var BaseDamage = 0; var FullDamage = 0; var MiscDamage = 0; var TotalDamage = 0; var GateHealth = 0; switch (Ram) { //ignore this part just comparing ram types case "Explosive": BaseDamage="10"; break; case "Wooden": BaseDamage="20"; break; case "Steel": BaseDamage="30"; break; case "", "?": default: BaseDamage="Failed to recognize Ram"; } switch (Attack) { //ignore this just comparing attack values case 0: FullDamage = BaseDamage; break; case 1: FullDamage = (BaseDamage*2)-8; break; case 2: FullDamage = (BaseDamage*2)-6; break; case 3: FullDamage = (BaseDamage*2)-4; break; case 4: FullDamage = (BaseDamage*2)-2; break; case 5: FullDamage = BaseDamage*2; break; case "", "?": default: FullDamage="Failed to recognize Attack"; } switch (Ram) { //this part is what i need help on, i need the loop function to keep using this to generate different "lucky damages" each time to make it interesting, i.e., first ram = 11 second ram = 16 third ram = 14 and so on..... case "Explosive": MiscDamage = Math.floor(Math.random()*21+10); break; case "Wooden": MiscDamage = Math.floor(Math.random()*6+0); break; case "Steel": MiscDamage = Math.floor(Math.random()*11+5); break; case "", "?": default: MiscDamage="Failed to recognize Ram"; } switch (Gate) { //ignore this part just comparing gate types to generate gate health case "Wooden": GateHealth = 50; break; case "Brick": GateHealth = 75; break; case "Small Stone": GateHealth = 90; break; case "Large Stone": GateHealth = 120; break; case "Granite": GateHealth = 140; break; case "Iron": GateHealth = 175; break; case "R Iron": GateHealth = 190; break; case "Thick Iron": GateHealth = 210; break; case "Steel": GateHealth = 230; break; case "R Steel": GateHealth = 250; break; case "Thick Steel": GateHealth = 275; break; case "Steel Iron Mix": GateHealth = 280; break; case "Thick Steel Iron Mix": GateHealth = 300; break; case "Strong Ruby Steel Mix": GateHealth = 400; break; case "Strong Sapphire Steel Mix": GateHealth = 450; break; case "R Thick Large Diamond Steel Mix": GateHealth = 500; break; case "", "?": default: GateHealth = "Failed to recognize Gate"; } TotalDamage = FullDamage + MiscDamage; with (document) { write ("Soldiers, " + "RAM THE GATES!" + "<BR>"); } while (GateHealth >= 0) //loops until gate health is lower than 0 { //need help! how to make it such that the loop will rerun the switching of ram for generating random misc(lucky) damages document.write ("Lucky Damage done = " + MiscDamage + "<BR>"); document.write ("Total Damage done = " + TotalDamage + "<BR>"); var GateHealth = GateHealth - TotalDamage document.write("Current GateHealth = " + GateHealth + "<BR>"); } } RamGates("Explosive", 5, "R Thick Large Diamond Steel Mix"); //function calling // End --> </script> Hey 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 Hello, I'm taking Computer Logic in college. I only am truly familiar with HTML and CSS and minimal web hosting stuff. I REALLY want to learn how to program, however. Anyway, we are doing classes/objects and functions. I am trying to figure out how to do this exercise. She starts with having us make this page that has a form that lets you select one of three radio buttons that will change the background color of the web page, along with that there is two text boxes to put a first name and last name. Then there is a button to click which puts your full name concatenated in another box below. All of this, is done, and I pretty much THINK I understand what is going on. Here is the code that we did to get this to happen: Code: <html> <head> <title>Computer Logic in class</title> <script type="text/javascript"> var nextColor = ""; var BR = "<br />"; function setColor(newColor) { nextColor = newColor; } function changeColor() { document.body.bgColor = nextColor; } function displayName() { var firstName = document.ColorAndText.firstName.value; var lastName = document.ColorAndText.lastName.value; document.ColorAndText.fullName.value = firstName + " " + lastName; } </script> </head> <body bgcolor="red"> <form name="ColorAndText" action = ""> <input type="radio" name="colors" value="Blue" onclick="setColor(this.value)"/> Blue <br /> <input type="radio" name="colors" value="LightYellow" onclick="setColor(this.value)"/> Light Yellow <br /> <input type="radio" name="colors" value="Yellow" onclick="setColor(this.value)"/> Yellow <br /> <input type="button" name="changeButton" value="changeColor" onclick="changeColor()" /> <br /> <input type="text" name="firstName" value="First Name" size="40" /><br /> <input type="text" name="lastName" value="Last Name" size="40" /><br /> <input type="text" name="fullName" readonly="true" size="40" /><br /> <input type="button" name="displayButton" value="Display name" onclick="displayName()" /> <br /> </form> </body> </html> Okay, now, I have and can do that. Seems to make sense. Now, then, the actual program I need to make is from the following exercises: Activity 3-4 The owner of a flower shop wants you to develop a form for use on the shop's web site. The form should have a single text box for the user to enter his or her name. Under the text box should be a group of radio buttons for three different kinds of flowers: Roses, Carnations, and Daisies. Below the radio buttons should be a button labeled Request Info, with a read-only text box under it for thanking the user for requesting information. This program doesn't need any functions or onclick attributes for the graphical elements. Okay, here is the code that does that, very simple HTML. Code: <html> <head> <title>Computer Logic in class</title> <script type="text/javascript"> var nextFlower = ""; var BR = "<br />"; function setFlower(newFlower) { nextFlower = newFlower; } function displayMessage() { var firstName = document.Flowers.nameBox.value; document.Flowers.fullName.value = firstName + "," + nextFlower; } </script> </head> <body bgcolor="white"> <form name="Flowers" action = ""> <input type="text" name="nameBox" value="Namebox" size="60"><br /> <input type="radio" name="flowers" value="Roses" onclick="setFlower(this.value)"/> Roses <br /> <input type="radio" name="flowers" value="Carnations" onclick="setFlower(this.value)"/> Carnations <br /> <input type="radio" name="flowers" value="Daisies" onclick="setFlower(this.value)"/> Daisies <br /> <input type="button" name="displayButton" value="Request Info" onclick="displayMessage(this.value)" /> <br /><br /> <input type="text" name="thankyou" readonly="true" size="100" value="Thanks for using this program" /> </form> </body> </html> Okay, now is where I'm stuck. The following exercise is as follows: The flower shop owner in the previous activity wants to see where you can make the form interactive and asks you to have the form display a message in the bottom text box that includes the user's name, a comma, and the words "thank you for your inquiry about" followed by the flower name the user selected. Write a function named displayMessage() that accesses the user's name from the first text box and displays the message in the read-only text box. You also need to make the Request Info button call the displayMessage() function when it's clicked. Using Javascript, make this form active by including event triggers and functions. My teacher has said that I should be able to do this by just referencing these two previous pages of code that I have already pasted. I feel like I am missing something, that I need to be doing something and it's just not working for me. I'm actually really really stuck on this. I haven't even gotten to the second half of the exercise (where I have to have it display about what flower you select) because I cant get this function to work. What am I missing? Also, the exercise we did before these two had us make a very basic account class and object. We don't have to do that at all in this anywhere, but I do know how to do it, in case I need to make a class or something. ANY AND ALL HELP GREATLY APPRECIATED!!! I just don't know what I'm supposed to do, I can't get it to work. I just started to learn javascript. can someone please tell me why my script below does not work? Is it not how it should be done? <html> <head> <title> Javascript Navigation </title> <script type="text/javascript"> if(yahoo.onclick()==true) { window.location = 'http://www.yahoo.com'; } </script> </head> <body> <form> <input type="button" name="yahoo" value="Click Here to go Yahoo.com"/> </form> </body> </html> Hey guys, I've come here looking for a little help. Probably for a very easy problem to you guys lol. I have a script (this is just a snippet of it): Code: $("#wgo_onlineusers_list").find(":contains('Username')").closest("li").addClass("isOMM"); It basically finds the Username value using the online user list and adds them to a separate special "currently online" list at a different spot on the homepage of the forum. My problem is that if I have a simple username, for example "Big", it adds all usernames with "Big" in it. I know all I need to do is change it so that it catches only the exact username, but I'm having trouble finding a selector (if there is one) that can do this or if it'll be a little more work to fix. Is there any simple fix that is right in front of my eyes for this or do I need to rewrite the function completely? I'm sort of just getting into JS/jQuery and this forum looks like it will be incredibly helpful for me in the future cus of it's activity. Reply With Quote 01-30-2015, 05:17 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts You really need to ask this in the jQuery forum. But I'm with you: I don't see anything in the jQuery docs that supports "equals" instead of "contains" for text values. Hey guys, I am working on building a new site and was wondering if I could get some clarity on something with JS, as I am el noobo. I have the basic layout he http://www.temp3.hangnailproductions.com/ Now this is just a mock up and I plan to validate the code, make it more semantic and clean up my CSS quite a bit, but right now I just want to get an idea of what I have to do and something has caught my eye. When the page loads, it takes quite a few seconds for the javascript I have attached to populate a few areas on the screen. At the top of the page there is a random testimonial and the current date. Both are populated from this script: http://www.temp3.hangnailproductions.com/js/master.js I don't know if these areas take a few seconds because my code is horribly wrong, too large, or if this is just normal. Does the array that holds the testimonials hold too much information? I would really appreciate some help. Also, the section that says "This should be a small blurb about the link above." is going to be a snippet of text that changes when a user mouseovers a main link at the top. I think this will also be JS and included in the same "master.js" file - thoughts? Thanks very much. (And I know it is ironic that I am asking for help on a site that sells web design, but Javascript is not something I plan to push, and if need be I would hire someone to help with any in-depth JS. I thought this would just be a simple little project...) Hi! I am brand new at Javascript. I have finished codecademy and Duckett's javascript book and that is it. I am trying to start coding on my own, without a web interface, and I just cannot figure out how to test my js files. I'm practicing puzzles and made a simple script. It is supposed to take a string as an argument and return the last letter of every word as a "secret message." var decryptA = function(message) { var words = message.split(" ") var secretMsg = [] for (i=0; i < words.length; i++) { secretMsg.push(message[i].slice(-1)) } return secretMsg.join() }; var result1 = decryptA("laugh ride lol hall bozo") console.log(result1) // This should be "hello" var result2 = decryptA("dog polo boo sudd noob smiley ride") console.log(result2) // This should be "goodbye" I think it works, but I cannot figure out how to test it. I made an html file that loads the script: <html> <head><script type="text/javascript" src="testing.js"></script></head> <body><p>Code running...</p></body> </html> and have opened it in firefox and chrome but I just get the "code running" message and nothing else. I have also tried firefox's scratchpad, but nothing happens. I even tried just putting console.log("hello world") into scratchpad and nothing happened. I am getting endlessly frustrated at myself for being unable to run a script. Can anyone offer a concrete way to do this? Background: I am running Ubuntu 12.04 32-bit. Thank you in advance! Cecily Reply With Quote 01-08-2015, 09:33 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts Have you opened the browser console? That's where you are writing the results from the tests. Hello all. I've spent a few days now browsing this forum along with guides on the net, I'm new to JS and I'm having a bit of trouble with loops. I just don't seem to get them, I was wondering if anyone had any tips or methods (the simpler the better ) for getting these learnt and done with? Would appreciate any tips Thanks This is a final loops in an exercise here is my code Code: <script type="text/javascript"> var counter; for (counter=0; counter<amount.length; counter++) {} { document.writeIn(counter+"<br/>"); document.writeIn("<tr><td>"date"[counter]"</td>"); document.writeIn("<td class = 'amt'>myArray</td>"); document.writeIn("<td>"firstName[counter]"</td>"); document.writeIn("<td>"lastName[counter]"</td>"); document.writeIn("<td>"street[counter]"<br />"); document.writeIn("<td>"+street[counter]+" "+city[counter]+" "state[counter]+" "+zip[counter]+"</td></tr>); Total=total+amount[counter]; document.writeIn("<table>"); } </script> This is what i have, what do i need to do to make this more proper and written properly? thanks Hi guys, I am new to learning javascript and have a test tomorrow on for loops. I know the answers to the three following loops but i wondered if anyone could take the time to explain to me how to find the answer from the code as I have no idea on how to find the answers (the answer is what is displayed in the alert). Many thanks, Mike The loops are these three: 1. var a=4;b=6; for(var c=0;c<=a;c++){b=b+c;} alert(b); (answer is 16) 2. var v=1; for(i=1;i<5;i++) for(j=2;j<5;j++) v+=1; alert(v); (answer is 13) 3. var s=0; for(i=0;i<=8;i++) if((i%2)==0)s+=1; alert(s); (answer is 5) Hi, Which among the following for iterating objects in JavaScript is better in terms of performance & usage? A) property enumeration: for (var propName in someObject) { var value = someObject[propName]; } B) Array protocol for (var i=0; i<someObject.length; i++) { var value = someObject[i]; } C) forEach method Can forEach method be used across various browsers and OS? K We have created this function with loops and arrays Problem is the loops work only when I take out the function when the function is in place, nothing works, it is part of exercise anyone have suggestions here is my code Code: title>Congressional Races</title> <link href="results.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="votes.js"></script> <script type="text/javascript"> function totalVotes(votes){ var total=0; for (var i = 0; i <votes1.length; i++) { total = total + votes1[i]; } document.write(total); } </script> } </head> <body> thanks all who can help This is driving me crazy. I simply want to display the values of the checkboxes with a specific name. This loop executes only once, then stops, showing no error msg. I have found no similar problem elsewhere on the net and have done a ton of tests, but cannot find out why it won't continue to loop. I've included the whole html file. Please Help! Code: <HTML> <SCRIPT language="JavaScript"> function test1() { var chkLen=document.frmTable.CHK0.length; for (k=0;k<chkLen;k++) { //execution stops after one loop. no error msg. document.write(document.getElementsByName('CHK0')[k].value); } } </SCRIPT> <FORM NAME=frmTable> <TABLE BORDER=1> <TR> <TD><INPUT TYPE=CHECKBOX NAME=CHK0 VALUE='one'>1</TD> <TD><INPUT TYPE=CHECKBOX NAME=CHK0 VALUE='two'>2</TD> <TD><INPUT TYPE=CHECKBOX NAME=CHK0 VALUE='three'>3</TD> </TR> </TABLE><BR> <INPUT TYPE=BUTTON VALUE='Go' onClick=test1()> </FORM> </HTML> Hi every one I'm a beginner to java so I have a home work assignment and I'm suppose to create a soda machine thing. What I'm trying to do is make the price of soda * quantity of soda which will equal to the price with tax but I cant figure it out @_@. I know what I'm doing wrong with the "Total" button and the "value" and "quantity" and I've been looking over the internet and playing with it like crazy. So if anyone can help me figure this out that would be great. The code and a pic is on the bottom i hope i gave you guys enough info. This is what im trying to do. Hi people I'm hoping someone can help me. I have NO knowledge of Javascript but I'm not afraid of code and happy to look at it and work out what is doing what. I need someone to provide me with a small sample of code to get me started on this task. I need a webpage with a number of drop down menus. Depending on what the user selects in these menus, depends on what sentence or paragraph is then displayed in a box. For example you might have a page dedicated to food. So the user would select egg in the first drop down and the box will change to display "you can't make much with that on it's own".# You'll then select flower in the second and it'll adjust to a paragraph maybe explaining where you could go next with that. In my page I need 6 drop down menus with about 8 choices in each menu (nothing related to food). Not sure if I would need to tie this in with a database or if I could just make do with the code on the page. As I said I'm hoping someone can just kick me off with something do I can get a rough idea of how I would go about coding it. Maybe an example contain 3 drop down menus with 2 choices on each and a few possible sentences or paragraphs that it could generate in a box. If not then any advice would be really appreciated as I said I'm a complete newbie and I've never even looked at Javascript code to my knowledge. Many thanks |