Wednesday. Wednesday, September 17, CS 1251 Page 1

Transcription

1 CS 1251 Page 1 Wednesday Wednesday, September 17, :20 AM Here's another good JavaScript practice site This site approaches things from yet another point of view it will be awhile before we cover all the background necessary for the site to make complete sense, but it's not bad for what it is. It has two JavaScript options and both cover different material so go to town: Arguments and cell references Just like any other function you can pass it a reference to a cell: The spreadsheet is pretty smart but it's not perfect strange things can happen if you try to pass your function something it wasn't expecting: We'll talk about what this means eventually, but for now don't worry too much about it just make sure YOU have a pretty good idea what kind of data you expect your functions to use and make sure you USE that kind of data (because the spreadsheet won't correct that kind of problem) Variables in Javascript You already have experience using variables. We called them cell references. We also were able to name data ranges and use the NAME of the data range in place of the actual range. That's pretty much all a variable is: Imagine that you have a spreadsheet somewhere and that all the cells have been given names (instead of begin organized as rows and columns). Now you know what a variable is. Let's dig down a bit deeper The Console Every modern browser has a JavaScript Console (I find Chrome's to be easiest to use, but Firefox is the default browser on many of the computers on campus so I'll show you how it works there. First make your menu visible by pushing the [alt] key (I'm not sure how you do this on a Mac-- if you let me know I'll add it to these notes). From Tools select Web Developer, and then Web Console: (ctrl-shift-k for a shortcut):

2 CS 1251 Page 2 That reveals this sort of thing to me at the bottom of the page: In Chrome select the 3 horizontal bar button: then select Tools, and finally JavaScript Console (ctrl-shift-j for a shortcut) Or, if I'm using chrome:

3 CS 1251 Page 3 If you end up clicking on the wrong place you might see something like this: Notice that Elements has the focus. You want Console to have the focus: This is the skeleton key that takes you into the service corridors of your web browser. It also gives you access to a test-bed. This is a GREAT place to try out simple things. A Warning First a warning! The scripts that you create for google docs run on a server far, far away. The short little commands that you run from the inspector are run locally.

4 CS 1251 Page 4 This can make a BIG difference, because just like in regular life, the meaning of a reference depends upon your surroundings. Let me make that last sentence a bit clearer with an example from real life: Suppose I suggest that you go down to the coffee shop and get me a Mocha. Morris only has one coffee shop, so you could trot on over to the Common Cup and do just that without having to think about it too much However, if we were in Eugene, Oregon and I gave the same directions you would face a few challenges (not the least of which is deciding WHICH coffee shop because there's about 20) but if you knew me well you could probably figure out I meant Espresso Roma and you could go there and buy something tasty.

5 CS 1251 Page 5 The key point is that the exact same suggestion "Go to the coffee shop and order a mocha" results in different (but related) actions depending upon where you happen to be when you make the suggestion. Now what if I was in Morris and but talking to a friend in Eugene using Skype. (Yes, this example is starting to get strained). Let's further suppose that I had just moved to Morris and both of us had completely forgotten that we were no longer in the same town. Now if I ask you to go get a mocha I'm picture this in my head: But my friend is actually going to go out and do this: And the worst thing is that my friend will have a mocha in their hand, but no way to actually get that mocha to me. Running a google-spreadsheet script is a lot like talking to a friend over the phone-- every request you make is occurring on the server. Typing code into the inspector is like talking to a friend in town-- every command you make is occurring on your computer. There are two types of problems that can arise: 1. You ask the server to interact with something that only exists on your local computer, or 2. you ask your local computer to do something that can only happen on the server.

6 CS 1251 Page 6 Okay, with that warning out of the way let's see what we can do JavaScript features: Just like in a google spreadsheet formula EVERYTHING is an expression, and it is JavaScript also keeps track of data types. Here are some of the most common: numbers strings (text) booleans (logical) The function typeof() will help you keep track: 3. Arithmetic mostly works the same in Google spreadsheet formulas as it does in JavaScript: Try playing with +, -, *, / 4. In JavaScript text data is called a string. Use quotes to let the computer know the difference between text and the name of a variable (just like in a spreadsheet formula). In the example below I use '=' to assign the value of 3 to the variable 'a'. See if you understand what is happening: 5. Joining two strings together to form a third is an example of a string operation. This operation is called called concatenation. Google spreadsheet formulas use & to "concatenate" text. In JavaScript use + for both numbers and strings. The basic pattern for strings is <string>+<string> = <string>. It is particularly important to pay attention to spaces: 6. In JavaScript, the operation '+' will also let you add a <string> and a <number>. If one of the two is a number, JavasScript converts the number to a string, then concatenates the two strings: <string> + <number> = <string>. Play around with it for a bit. Try adding together two numbers, and adding together two strings, and then a combination of the two:

7 CS 1251 Page 7 7. What will happen when I type "2" + "3"? Every distinct line in a function should end with a semicolon ; Fancy brackets like { denote blocks of code and they typically do NOT require a semicolon. VARIABLES Variables are words that store a value. They are replaced with the value that they store when the program is being run. The basic structure of an assignment is variable = value or expression When fooling around in the console you can assign a value to a variable without really thinking too much about it. Once a value has been assigned to the variable that value is used in calculations: JavaScript is pretty lax about what can be a variable, but JavaScript might get a bit cranky if you try to use a built-in function's name as if it were a variable. For example, recall that we were able to use typeof() to find the type of data. JavaScript will get upset if you try to treat 'typeof' like a variable: You may assign text data, logical data, or numbers to a variable (amongst other things): Variables in your own function JavaScript has a hard time telling what is supposed to be a built-in and what is supposed to be a variable, so when you are writing your own functions it is *very* important to get into the habit of introducing the variables you will be using to the computer. There are two ways to do this: 1. Add the variable to the argument list (the section between parenthesis after the function name) 2. Add a line to the program of the form <variable name>. Here is an example that uses both: function=onevar(n){ var m; m=n; return(m); ; Typically a variable in the argument list is called an argument, and a variable that you define using var is called a variable, although both are variables and occasionally the same term is used for both.

8 CS 1251 Page 8 Here is an example of a function that takes two arguments and uses them to produce a simple mad-lib: Type this in, and give it a test on your spreadsheet. See if you can tell me: The name of the function The variables in the argument list The code in the function body A short description of the result of running this function. Here's another short example of a function function test(n){ return(typeof(n)); See if you can answer these questions: What is the name of the function What are the variables in the argument list Give a short description of the results of running this function. Now try the following Give it various data types Give it various cells with various data types (number, string, boolean) Give it a cell-range Flow Control Programs are not very interesting if they can't make decisions There are structures in JavaScript that control which BLOCK of code gets executed (this is easiest understood by example). We will start by examining three. The first is the complete version of the if statement. It comes in *two* forms-- one is a bit simpler: form one: if (<condition>){ [true block] form two: if (<condition>){ [true block] else { [false block] You can The second is the while loop: while(<condition>){ [block] The third is the for loop: for(<initialization>,<condition>,<increment>){ [block]