|
JavaScript - Beginner Help, Functions/classes/objects Hard To Explain My Exact Problem
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. Similar TutorialsCould someone please explain the difference in these two methods of creating objects: //anonymous self invoking function providing private methods var a_module = (function() { var private_variable = "some value"; function private_function() { //some code } return { public_property: "something" //etc } }() ); //Can use a_module.public_property with this Is there any difference between the above and this: var A_module - new Object(); A_module(property1, property2) = { this.property1 = property1; this.property2 = property2; this.methodName = function(){//code} } A_module.prototype.property = "//property" A_module.newMethod = function() {//code} Are they both just different ways of creating objects with methods and properties? I'm having a spot of trouble in making my functions work and my book seems to be pure rubbish. I'm sure that the error is purely syntax, although it may be something more. Code: <script type="text/javascript" src="flowers.js"></script>
<script type="text/javascript">
function pageSetup() {
var today = new Date(); // this creates a date object with today's date
var banner = displayBanner(today); // *should* call the displayBanner function
var days = calcDaysToSale(today); // *should* call the function using today's date
document.sale.saleMessage.value = days; // *should* set the value to days.
// Obviously none of it works.
}
</script>
This is the code working with the script contained in the html file. I'll post the full page at the bottom. The following code is the JavaScript code. The first function isn't made to provide full functionality at the moment, I'm trying to get the rest of it working. Code: function displayBanner(currentDate) {
if (currentDate.getMonth() == 2)
imgSrc = "winterLogo";
return ("<img src='" + imgSrc + ".gif'>");
}
function calcDaysToSale(currentDate) {
var saleDay = new Date();
saleDay.setDate(15); // sets the sale date to the 15th of the current month
// Subtracts the days remaining until the sale.
// If the number is negative, the sale is over.
var Days = saleDay.getDate()-currentDate.getDate();
if (Days < 0) {
return "The sale has ended.";
}
else {
return Days;
}
}
I have tried to Google the problem and I have also tried to look it up in my book. I simply don't know the right terms to Google, and as I said the book is rubbish. I don't know why the Code: document.sale.saleMessage.value = days; doesn't work for this. Oh well, I'll learn quickly I suppose. Here is the full HTML code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carol's Flowers</title>
<link href="flowers.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="flowers.js"></script>
<script type="text/javascript">
function pageSetup() {
var today = new Date(); // this creates a date object with today's date
var banner = displayBanner(today); // *should* call the displayBanner function
var days = calcDaysToSale(today); // *should* call the function using today's date
document.sale.saleMessage.value = days; // *should* set the value to days.
// Obviously none of it works.
}
</script>
</head>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
<p><img name="myBanner" src="banner" id="myBanner" alt="Carol's Flowers" />
<!-- end #header -->
</p>
<div id="links"><a href="#">Home</a> | <a href="#">General Arrangements</a> | <a href="#">Seasonal Designs</a> | <a href="#">Custom Orders</a> | <a href="#">Location</a></div>
</div>
<div id="mainContent">
<table id="mainTable">
<tr>
<td width="201"><h1><img src="Flowers.JPG" alt="Random Flowers" width="200" height="255" /></h1></td>
<td width="687">
<p>Here at Carol's Flowers, we believe that there is a perfect floral arrangment for every occasion! Take a look around and see if there is anything you like. If we don't already have it, then we will create it for you!</p></td>
</script>
</tr>
</table>
<!-- end #mainContent --></div>
<div id="footer">
<p> <form name="sale" id="sale">
Days Until Mid Month Madness Sale :
<input type="text" name="saleMessage" id="saleMessage" /></form></p>
<!-- end #footer --></div>
<!-- end #container --></div>
<!-- I am trying to run the script here -->
<script type="text/javascript">
pageSetup();
</script>
</body>
</html>
I have a javascript assignment I am having difficulties with. I have most of it complete but need some assistant with the last portion and that is to get my display function to work. I am sure that this is something I should know how to do but for the life of me can't seem to figure out and just need a little guidance. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Lab03</title>
<h1> Person Information </h1>
<script type= "text/javascript" charset= "utf-8">
function Person( ) {
this.lastname = ' ';
this.firstname= ' ';
this.areacode= ' ';
this.phone_number= ' ';
this.show_person = ' ';
}
</script>
<script type= "text/javascript" charset= "utf-8">
var per1 = new Person
function getInput( ) {
lastname= prompt("please enter your last name: ");
firstname= prompt("please enter your first name: ");
areacode= prompt("please enter your area code: ");
phone_number= prompt ("Please enter your phone number (ex:888-8888): ");
return per1;
}
per1= getInput( );
</script>
</head>
<body>
<script type ="text/javascript" charset= "utf-8">
function show_person( ){
if( firstname == "" && lastname == "" )
{
document.writeln( "Name: Unknown" + "<br/>" );
}
else if( firstname == 'null' && lastname == 'null' )
{
document.writeln( "Name: Unknown" + "<br/>" );
}
else if ( firstname == "" || lastname == "")
{
document.writeln("Name: " + lastname);
document.writeln(firstname + "<br/>");
}
else if ( firstname == 'null' || lastname == 'null')
{
document.writeln("Name: " + lastname);
document.writeln(firstname + "<br/>");
}
else
{
document.writeln("Name: " + lastname + ", ");
document.writeln(firstname + "<br/>");
}
else if ( areacode == "" || phone_number == "" )
{
document.writeln ("Phone: ");
}
else if ( areacode == 'null' || phone_number == 'null' )
{
document.writeln ("Phone: ");
}
else
{
document.writeln('Phone: (' + areacode + ')');
document.writeln(phone_number);
}
return this.show;
}
</script>
<noscript>
<p>You must enable javascript to view all the features of this page.</p>
</noscript>
</body>
</html>
Can someone help me out and tell me what it is I need to do to make it work? I actually had it working when I was able to put all the code in the get function but was told I needed a separate display function so any input is greatly appreciated. This is a little hard to explain so I'm posting an example. Code: //NESTED FUNCTION I'M USING TO DEMONSTRATE MY QUESTION
function foo(a) {
this.x = 5;
//USED TO SET THE VALUE OF X
if( a == 0 )
return function(z) {
return x = z;
}
//USED TO RETRIEVE THE VALUE OF X
else if( a == 1 )
return function() {
return x;
}
}
//MAKES setX THE SETTER FUNCTION
var setX = foo(0);
//MAKES getX THE GETTER FUNCTION
var getX = foo(1);
print( "setX(25), not an instance: " + setX( 25 ) );
print( "getX(), not an instance: " + getX() );
print( "" );
//CREATES AN OBJECT INSTANCE USING FOO AS CONSTRUCTOR
var q = new foo();
print( "value of x in object instance: " + q.x );
print( "" );
print( "setX(25), not an instance: " + setX( 25 ) );
print( "getX(), not an instance: " + getX() );
This code will output: Code: setX(25), not an instance: 25 getX(), not an instance: 25 value of x in object instance: 5 setX(25), not an instance: 25 getX(), not an instance: 25 Observations: It seems like this.x actually has two meanings. 1)x becomes a member of the "Function" object foo(). 2)x becomes a part of the constructor for prototype class foo. But why then does x revert back to the original value of 5 when I use foo as a constructor? Does javascript automatically save the original value on creation for a reason? What is going on behind the scenes to make this happen? Is this behavior part of an ontological model that makes sense? Similarly, if I change "this.x" to "var x" I can access the value of x but I can't change it. Not that that I should be able to, the syntax "var x" doesn't make x a member of foo anyway. But I'm still having trouble classifying the relationship "var x" has to the function. Anyways this is more of a tangent. My main question is above but if anyone has something to say about this, I'd be interested to hear it. It seems like all these behaviors have rules to them, but there is no conceptual model to think through that guide these behaviors. Or maybe I'm just ignorant. Enlighten me. Hi Everyone I am trying to write some code to create an object in JS that contains the x,y coords for a shape i wish to draw. I create the shape, and then in a draw function I draw the shape to the screen from the object I created erlier. Trouble it is does not seem to work :S have anyone got and ideas? Code: var myShape = new newShape(200,200);
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 50);
} // init
function newShape(x,y){
this.un_X=x
this.un_Y=y
function drawAll() {
ctx.beginPath();
ctx.arc(un_X,un_Y,30,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
} // drawAll
} // newShape
function draw() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
myShape.drawAll();
} // draw
init();
Thanks in advance 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. I wrote a log function that took note of various function calls. Thinking that functions are first class objects, and objects have properties, I made the name of each logged function a property of that function, e.g., brightenInnerPara.name = "brightenInnerPara"; Every browser I tried (Firefox, MSIE, Opera, Chrome, Safari) accepted the assignment, no problem. In Firefox and MSIE, the result was what I wanted: brightenInnerPara.name == "brightenInnerPara" But in the others, the result was: brightenInnerPara.name == null Question 1. Which Javascript is correct here? I favor Firefox and MSIE, not merely because they were willing to give me what I wanted, but also because it makes no sense to accept an assignment statement without throwing an error and then give it a null semantics, like Chrome, Opera, and Safari did. I found a workaround, using assignments like this: brightenInnerPara.prototype.name = "brightenInnerPara"; To my surprise, that worked in every browser. But I don't know why. It seems that such assignments are enough to cause each function to have its own distinct prototype. Question 2. Just how inefficient is my workaround, and why does it work? Code: window.onload = makeMenus;
var currentSlide = null;
var timeID = null;
var leftPos = 0;
function makeMenus(){
var slideMenus = new Array();
var allElems = document.getElementsByTagName("*");
for (var i=0; i < allElems.length; i++){
if (allElems[i].classname == "slideMenu")slideMenus.push(allElems[i]);
}
for (var i = 0; i < slideMenus.length; i++){
slideMenus[i].onclick = showSlide;
}
document.getElementById("head").onclick = closeslide;
document.getElementById("main").onclick = closeSlide;
}
function showSlide(){
var slideList = this.getElementsByTagName('ul')[0];
if ((currentSlide != null) == slideList {
closeSlide;
}else {
closeSlide;
currentSlide = slideList;
currentSlide.style.display = "block";
timeID = setInterval("moveSlide()", 1);
}
}
function closeSlide(){
clearInterval(timeID);
currentSlide.style.left = 0 + "px";
currentSlide.style.display = "none";
currentSlide = null;
}
function moveSlide(){
leftPos + 5;
if (leftPos <= 220){
currentSlide.style.left = leftPos + "px";
}else {
clearInterval(timeID);
leftPos = 0;
}
}
The HTML is a bit lengthy. Wasn't sure it was necessary here. Hi I am using a .js with 3 functions in it 1st function getPeriod is to extract the index of a selected list item 2nd function getRadios is to get the value from a selected radio button 3rd function calculateAmount uses if statments and follows a course depending on which index was selected from the list item in the 1st functino ie . 0,1,or 2 The problem is that the index value is unidentified in the 3rd function when i try to use it in the if statement, but the value of the radio button, the variable "cigs" works... I want to know how to allow the index value to work in the 3rd function I know this is a very silly problem but I cant spend any more time trying to figure it out ...code below ...Thanks ! [code] var index = 0; var element = ""; var cigs = 0; // get the selected item in the list with id listId function getPeriod(listId){ // find the index of the selected item index = document.getElementById(listId).selectedIndex; // use the index to access the text of the selected item element = document.getElementById(listId).options[index].text; // put the favorite into the text field document.getElementById('period').value=index; return index; } function getRadios(what){ // get the cigs value j=what.cigs.length; //alert(j) for (i=0; i<j; i++){ if(what.cigs[i].checked) cigs = what.cigs[i].value } what.buttons.value = (cigs) return cigs; } function calculateAmount (){ if (index = 0) { total = (8.5 * cigs * 182); } else if ( index = 1 ) { total = (8.5 * cigs * 365); } else if (index = 2) { total = (8.5 * cigs * 730); } document.getElementById('total').value=total; } [code] I've seen a bunch of these around but most of them take over the screen, etc. We found the perfect one and wondered if anyone knows of any scripts that are like this one: http://www.panic.com/transmit/ (See "Screenshots" towards the bottom for the zoom lightbox effect). HI I was able to get the position of the video by using the jwplayer().getPosition() function but I get something like 171.97 but the timer on the video showed me 2:51. How can I exactly get the position as 2:51 instead of 171.97? Screenshot: http://i.imgur.com/NzMxk.png My Code: Code: <script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "mane.mp4",
image: "preview.jpg",
events: {
onPlay: function(event) {
timeMsg();
}
}
});
function timeMsg()
{
var t=setTimeout("alertMsg()",100);
}
function alertMsg()
{
var timeline = ( jwplayer().getPosition());
$('#position').text(timeline);
timeMsg();
}
</script>
Any help is appreciated. Hi, I have written a number of functions designed to return frequency data on 1000 randomly chosen numbers using different math functions for the rounding. I would like to include all of these functions within the wrapper of another function so that only one call is needed to get returns from all of the 'inner' functions. However, while each of the functions works in isolation, the moment I wrap them in another function they stop working. The following code is one of the functions 'frequencyWrapperOne' that has been wrapped in the function 'testWrapper'. A call to testWrapper does nothing. Can anyone see what I'm doing wrong? Code: function testWrapper()
{
function frequencyWrapperOne()
{
var numberArrayOne = new Array(0,0,0);
for (var i = 0; i < 1000; i = i + 1)
{
var chosenNumber = Math.floor(Math.random() * 3);
if (chosenNumber == 0)
{
numberArrayOne[0] = numberArrayOne[0] + 1;
}
if (chosenNumber == 1)
{
numberArrayOne[1] = numberArrayOne[1] + 1;
}
if (chosenNumber == 2)
{
numberArrayOne[2] = numberArrayOne[2] + 1;
}
}
return window.alert(numberArrayOne.join(','));
}
}
testWrapper();
Thanks. Hello, How hard is it to make a "mixer" like this one here? http://mixville.ru/choco/create Having only html and css knowledge and minimal javascript(learning it, very interesting language) I can suppose it's like a table filled with buttons which once clicked move to another table on the left side? Which is made like an array or something. Im a newbye i know. Hope you can guide me in the right direction or atleast tell me the subjects that I need to learn to make this myself. P.S. this is in no way a commercial or spam since the website is russian I have been on loads of websites, and they all say the same thing. But the below script will just not change the opacity of the element - which is a DIV - in IE... I do not see why not, W3C says that obj.filters.alpha.opacity = 50; will do it, but it produces an error saying that filers.alpha is null or not defined... Code: function setOpacity(obj) {
obj.style.opacity = "0.5";
obj.filters.alpha.opacity = 50;
obj.style.filter = 'alpha(opacity=50)';
}
So I am working on a function that counts the number of lines a user input takes up. I'm accounting for a line being 114 characters long, and I am trying to account for returns which in some cases are used for a blank line, and in others simply to proceed to a new line for new text. But thats not important really. I am having problems identifying the returns from my form submit. The code below isnt identifying them, I get that. But when I google this issue, it tells me to do something like hard = biotext.indexOf("\r"); Instead of the <br /> which I also understand. Unfortunately, as soon as I do that, my javascript completely breaks and stops working, as though I had a major syntax error. I dont understand as this syntax is suggested in many sites on the net. Code: function count_bio(ctl, ev)
{
var biotext = ctl.value;
var counter = 0;
hard = biotext.indexOf("<br />");
hardx = hard;
while(hard > 0)
{
hard=hardx-y;
if(hard > 114){counter+=Math.ceil(hard/114);}
else{counter+=1;}
y=hardx;
hardx=biotext.indexOf("<br />", hardx+1);
}
if(counter==0)
{
counter=Math.ceil(biotext.length / 114);
}
else
{
if(hardx > 114){counter+=Math.ceil(hardx/114);}
else{counter+=1;}
}
alert(counter);
return true;
}
Okey so im making gladiatus project coping 'www.gladiatus.com' yet i maked a lot fixes and not bad progress, but still it needs a lot of work. Still i got a problem don't really know how to get working, make the items on server whit stats, and how to make inventory and account equi to work, for now they are only images it's hard to explain, so i show you some images... ;] from original gladiatus image account.php file: "http://img715.imageshack.us/f/logorkv.jpg/" on my server there are only img of inventory, character, wearing img there isn't items or stats on items, so im asking some help, and i don't even know if here to search, somebody can make some scripts don't really care if it's not full script i finish them myself so i need a script when char reach (10;15;20;25 levels) char avatar whill change, I got all images... items on server reading from db stats, wearing img can move items on it and give stats,and moving from mini inventory somewhere... i know it's really hard funkcions but still i don't got so big brain to make the scripts... Need help maybe somebody can help me... sorry if somethings wrong im new here. :P <script type="text/javascript"> function display(action, id) { if (action == 'show') { document.getElementById("explanation"+id).style.display = "block"; document.getElementById("link"+id) = "javascript:display('hide', "+id+")"; } if (action == 'hide') { document.getElementById("explanation"+id).style.display = "none"; document.getElementById("link"+id) = "javascript:display('show', "+id+")"; } } </script> <script type="text/javascript"> var myString = "zero one two three four"; var mySplitResult = myString.split(" "); for(i = 0; i < mySplitResult.length; i++){ document.write("<br /> Element " + i + " = " + mySplitResult[i]); } </script> "split" function splits the string whenever it encounters "space". But please explain me how the strings are stored in "mySplitResult". And can we use Arrays for this program? If so, can you code it. Thanks in advance! I tried a a few tutorials but still can't get it, can any simply closures please?
hi, i would like to know what kind of mechanism does the bolded part trigger Code: G = function(a) {
if (i !== a) {
var b = i;
i = a;
for (a = 0; a < A.length; ++a)
A[a](b)
}
}
i dont want to know what the function does, just a wild guess, would it be the A array is replaced with functions names? R. |
|||||||