The Cellar - Learn Javascript

The Cellar (http://cellar.org/index.php)

- Technology (http://cellar.org/forumdisplay.php?f=7)

- - Learn Javascript (http://cellar.org/showthread.php?t=5389)

Let's make with the programming

Watch for more tomorrow. Yesterday I worked until 1:30am, and then this morning my employer called me and got me out of bed to come back into the office on urgent business. Spare time is, at the moment, a luxury I don't have.

Sorry about the delay.

Ok, sorry about that delay. Due to over-exposure to work, I was clinically dead for a while. But it went away.

Quote:

Originally posted by lumberjim
hey, this is probably premature, but, how do you change the words on the buttons themselves?

does JS support that, or must you create a whole new code or object to be that prompt?

oh, and can you crack the code in a browser or OS and make it change the word that displays on the normal buttons? ie. in stead of the button saying "OK" on it, it could say " Sure, why not"

Javscript is limited in what it can do for reasons of security. Among those limitations is the ability to change what the buttons on a prompt() or alert() dialog say, nor can you change the title text of these boxes. Otherwise, naughty web developers could make innocent Javascript dialogs look like operating system errors, and stuff like that.

Quote:

Originally posted by lumberjim
{(document.bgColor = "red");
(document.write("Coolness Quotient Test Site"));
alert ("click OK to begin test");
document.write(" Results: You're a tool");
}

how do you change the colors of the words?
how do you clear the page to display the results?
how do you change the location of the text on the page?

As for question #2, there really isn't a direct way to clear a page aside from reloading, or loading a new page. It can be accomplished through other means, but we'll get into that stuff later, because that would be getting a little ahead of ourselves. As for question #1 and #3, the answer is to use HTML formatting. I figure I'll start teaching some rudimentary HTML when we get to that point, and if anybody cares enough, I'll include more of that.

More soon.

I think I'm still with you, although it did get a little fuzzy wif objects n cars n stuff.. but so far so good.

This would be a good time to mention variable scope. When you create a variable in your script with the var keyword, that is where the variable is defined. If the variable is defined inside a block, it's scope is limited to that block. What that means is, once you leave the block of code which defined the variable, it goes away, and no code outside of that block can see the variable. However, any sub-blocks of the block which contains the variable definition can access it, no matter how deep the sub-block is.

Any variable defined outside of a block is accessible to everything, because it is in the assumed block which wraps around everything, and every other block is a sub-block of that one. Such a variable is called a "global" variable, since everything can see it.

Here's a chunk of code to illustrate... the numbers are there as a reference, not part of the code itself:

Code:

00 var jimIQ = 135;

01 var userName = prompt("Please enter your name");

02 var userIQ = prompt("Please enter your IQ");

03 

04 if (userName == "Lumberjim") {

05    var jimResponse = "You're too sexy for your shirt";

06    document.write(response);

07  }

08  else {

09    var notJimResponse = "Jim is too sexy for his shirt";

10    document.write(notJimResponse);

11    if (userIQ < jimIQ) {

12       var iqResponse = " ...and you're not as smart as he is.";

13       document.write(iqResponse);

14    }

15 }

jimIQ, userIQ, and userName are all global variables, because they are not defined inside a block. The variable jimResponse was defined in the block which starts on line 04 and ends on line 07, so it's scope is limited to that block. If I tried to access the variable jimResponse on line 09 or line 12, I'd get a "variable not defined" error. But I *could* access notJimResponse on line 13, because that block is a sub-block of the one which defines notJimResponse.

If I tried to accecss jimResponse , notJimResponse or iqResponse at any point after line 15, I'd get a "variable not defined" error, because their blocks ended, and the variables went away.

Next: Functions. Then Operators. Then conditionals and loops. Unless I think of something else that I ought to cover first. The way scope works, and it's usefulness, will become more obvious when we get to Functions and Loops.

Quote:

Originally posted by OnyxCougar
I think I'm still with you, although it did get a little fuzzy wif objects n cars n stuff.. but so far so good.

A lot of what we're covering now is just to give you a notion of how it all works... the pieces will start falling together once you have more of them to work with. That is, if I'm as effective a teacher as I hope I am.

Can you reference line numbers as you could in the old basic programming language? For instance "Goto 20"?

Quote:

Originally posted by Radar
Can you reference line numbers as you could in the old basic programming language? For instance "Goto 20"?

No, the "GOTO" command and all of it's variants are not present in object-oriented programming. The consensus is that there is always a better way to do the same thing with modern programming languages, and GOTO commands make the code very difficult to maintain.

I'll try to post the next bit this afternoon, if I get a break in work...

I tried to post some javascript for a random sound generator, but it was apparantly incorporated into the page so you couldn't see anything (or hear anything because the sounds aren't here)

Quote:

Originally posted by Radar
I tried to post some javascript for a random sound generator, but it was apparantly incorporated into the page so you couldn't see anything (or hear anything because the sounds aren't here)

Yeah, they were probably pulling code from multiple sources, and you didn't manage to get it all. I't sort of like importing libraries, but not quite.

I hope to post more here later today, assuming my brain receovers. I was here at work until 5:30 in the morning, and now I'm back again, so I'm a bit fried at this very moment.

Ok... the gaping maw of work which recently swallowed me up has finally vomited me back out again. Look for more here soon.

yeah, you keep saying that, you big tease. why should we trust you this time?

Ok, on to Functions. If you want to create a function, you use the function keyword. Like with var, the function keyword is then followed by the function name. Then, you include a list of arguments in parethases (we'll get to this in a bit), and then the block of code which will execute when a call is made to this function.

Here's a simple example, using some code from a previous example:

Code:

function changeBackgroundColor () {

   var prompt = "Click OK to change the background to red.\nClick Cancel to make it blue.";



   if (confirm(prompt)) {

      document.bgColor = "red";

   }

   else {

      alert("We'll make it blue then.");

      document.bgColor = "blue";

   }

}

If you paste this into the Javascript Tester, nothing will happen, because though we define the function, we never make a call to it, so it doesn't execute. Try adding this to the bottom:

Code:

changeBackgroundColor();

Now it'll execute. If you added that line twice, you'd go through the dialogs twice.

Now let's modify it to accept arguments. When we create the function with the function keyword, if we define arguments in the parenthases, then we can pass information to the function for it to work with. Here's an example:

Code:

function changeBackgroundColor (prompt, newColor) {



   if (confirm(prompt)) {

      document.bgColor = newColor;

   }

}

When we do this, the variables prompt and newColor are created inside the function when it is called, and those variables contain the values that were passed into the function. So when we call the above function, it would look something like this:

Code:

var colorPrompt = "Click OK to change the background color.\nClick Cancel to leave it unchanged.";

var color = "purple";



changeBackgroundColor(prompt, color);

...or, just like this:

Code:

changeBackgroundColor ("Do you want to change the background color?", "green");

Say we want the function to do something useful, and hand the results back to us... we use the return keyword to send the value back to whatever called the function:

Code:

function addTwoNumbers (first, second) {

   var sum = parseInt(first) + parseInt(second);

   return sum;

}

(The function parseInt() causes Javascript to treat a value like a number rather than like a string, but we'll get to that later). So, we could call the above function like this:

Code:

var someNumber = prompt("Enter any number");

var anotherNumber = prompt("Enter any other number");

var myTotal = addTwoNumbers(someNumber, anotherNumber);



alert(myTotal);

We can return a string, a number... any kind of data.

Suppose the user leaves the entry fields blank when they run this script. The prompt() function would return an empty string (""), and the call to addTwoNumbers() would fail, because there are no numbers to add. If we wanted to be cautious in our programming, and make sure the user didn't provide an empty string, we can test for that in the function, and provide an error if necessary:

Code:

function addTwoNumbers (first, second) {

   if (first == "") {

      alert("You didn't provide the first number");

      return 0;

   }

   if (second == "") {

      alert("You didn't provide the second number");

      return 0;

   }

   var sum = parseInt(first) + parseInt(second);

   return sum;

}

Suppose someone calls our addTwoNumbers() function without sending any arguments... When no value is sent for an argument, the function gives that variable the special value undefined. Many programming languages call this value null.

More later...

Quote:

Originally posted by lumberjim
yeah, you keep saying that, you big tease. why should we trust you this time?

Faith, my friend. Blind, misguided faith.

I'm not seeing any questions from people trying to clarify what I've written... does that mean that I'm doing such a por job of explaining that no one knows what to ask, or am I doing such a wonderful job of explaining that there are no unanswered questions yet?

Or is it just that no one is reading this thread anymore? Hello? Echo echo echo...