@@ -12,14 +12,14 @@ respond well to toxins in the blood.) Man, that stuff will kick the
1212peaches right out your gills!
1313____
1414
15- Now , we'll start to do things that can actually be
15+ In this chapter , we will start to do things that can actually be
1616called _programming_. We will expand our command of the JavaScript
1717language beyond the nouns and sentence fragments we've seen so far,
1818to the point where we can actually express some meaningful prose.
1919
2020== Expressions and statements ==
2121
22- (((grammar)))(((JavaScript,syntax)))In the previous chapter , we made
22+ (((grammar)))(((JavaScript,syntax)))In Chapter 1 , we made
2323some values and then applied operators to them to get new values.
2424Creating values like this is an essential part of every JavaScript
2525program, but it is still only a part.
@@ -138,11 +138,9 @@ tentacles to it.
138138
139139image::img/octopus.jpg[alt="Variables as tentacles"]
140140
141- //Ok to move the Luigi example to before you describe undefined variables? Having it
142- //after made me expect a different sort of example. /JG
143141
144- As an example, to remember the amount of dollars that Luigi still owes
145- you, you could create a variable. And then when he pays back 35 dollars, you'd
142+ An example. To remember the amount of dollars that Luigi still owes
143+ you, you create a variable. And then when he pays back 35 dollars, you
146144give this variable a new value.
147145
148146[source,javascript]
@@ -157,7 +155,6 @@ When you define a variable without giving it a value, the tentacle
157155has nothing to grasp, so it ends in thin air. If you ask
158156for the value of an empty variable, you'll get the value `undefined`.
159157
160-
161158== Keywords and reserved words ==
162159
163160(((keyword)))(((reserved words)))(((variable,naming)))Words with
@@ -188,18 +185,15 @@ _environment_. When a program starts up, this environment is not
188185empty. It always contains variables that are part of
189186the language standard, and most of the time, it has
190187variables that provide ways to interact with the
191- surrounding system. For example, your browser's environment
192- contains variables pointing at functions that read your mouse and keyboard input,
193- which allow you to inspect and influence the currently loaded website.
194-
195- //Do I have you right with my edits above? I found the last sentence a little
196- //hard to follow, so I tried to clarify. /JG
188+ surrounding system. For example, in a browser, there are variables
189+ and functions to inspect and influence
190+ the currently loaded website, and to read mouse and keyboard input.
197191
198192== Functions ==
199193
200194(((Function type)))(((alert function)))(((message box)))A lot of the
201195values provided in the default environment have the type _function_. A
202- function is a piece of a program wrapped in a value. Such values can be
196+ function is a piece of program wrapped in a value. Such values can be
203197_applied_ in order to run the wrapped program. For example, in a
204198browser environment, the variable `alert` holds a function that shows
205199a little dialog box with a message. It is used like this:
@@ -214,12 +208,10 @@ image::img/alert.png[alt="An alert dialog"]
214208indexsee:[application (of functions),function application]
215209indexsee:[invoking (of functions),function application]
216210
217- //Do I have you right with my edits below? /JG
218-
219211(((function,application)))Executing a function is called _invoking_,
220212_calling_, or _applying_ it. You can call a function by putting
221- parentheses after any expression that produces a function value.
222- Usually, however, you'll directly refer to a variable that holds a
213+ parentheses after an expression that produces a function value.
214+ Usually you'll directly refer to a variable that holds a
223215function. The values between the parentheses are given to the program
224216inside the function. In the example, the `alert` function uses the
225217string that we give it as the text to show in the dialog box. Values
@@ -236,19 +228,15 @@ output values. Most JavaScript systems (including all modern web
236228browsers and node.js) provide a `console.log` function that writes out
237229its arguments to _some_ text output device. In browsers, the output
238230lands in the JavaScript console. This part of the browser interface
239- is hidden by default, but you can find in the menu if you dig.
240- Just look for an item like “web console” or “developer tools”,
241- usually under a “Tools” or “Developer” sub-menu.
242-
243- //Would it make sense to provide an example menu sequence for an existing broswer? /JG
231+ is hidden by default, but most browsers open it when you press F12.
232+ If that does not work, search through the menus for an item named
233+ “web console” or “developer tools”.
244234
245235ifdef::html_target[]
246236
247- For the examples in this book, any `console.log` output will be
248- shown below the example, instead of in the browser's JavaScript console.
249-
250- //I was a bit confused by the paragraph above, so I tried to clarify.
251- //Do I have you right?
237+ When running the examples, or your own code, on the pages of this
238+ book, `console.log` output will be shown below the example, instead of
239+ in the browser's JavaScript console.
252240
253241endif::html_target[]
254242
@@ -260,20 +248,18 @@ console.log("the value of x is", x);
260248----
261249
262250Though variable names can not contain dots,
263- `console.log` clearly has one. That's because `console.log` isn't
264- a simple variable. It's actually an expression that
251+ `console.log` clearly has one. This is because `console.log` isn't
252+ a simple variable. It is actually an expression that
265253retrieves the `log` field from the value held by the `console`
266254variable. We will find out exactly what this means in Chapter 4.
267255
268256== Return values ==
269257
270- //Maybe we should italicize the first instance of side effect below? /JG
271-
272258(((side effect)))(((return value)))(((max function)))Showing a dialog
273259box or writing text to the screen is a _side effect_. A lot of functions
274- are useful because of the side effects they produce. Fuctions an also
260+ are useful because of the side effects they produce. Fuctions can also
275261produce a values, and in that case, they don't
276- need to have side effects to be useful. For example, the
262+ need to have a side effect to be useful. For example, the
277263function `Math.max` takes two numbers and gives back the
278264greatest of the two:
279265
@@ -285,7 +271,7 @@ console.log(Math.max(2, 4));
285271
286272(((min function)))When a function produces a value, it is said to
287273_return_ that value. Anything that produces a value is an expression
288- in JavaScript, which means function calls can be used within bigger
274+ in JavaScript, which means function calls can be used within larger
289275expressions:
290276
291277[source,javascript]
@@ -355,19 +341,13 @@ image::img/controlflow-straight.svg[alt="Trivial control flow"]
355341== Conditional execution ==
356342
357343(((control flow)))(((conditional execution)))Executing statements in
358- straight-line order isn't the only option.
359- _Conditional execution_ is common, and it lets a program choose between two
344+ straight-line order isn't the only option we have. An alternative is
345+ _conditional execution_, where we choose between two
360346different routes based on a boolean value.
361347
362348image::img/controlflow-if.svg[alt="Conditional control flow"]
363349
364- In JavaScript, conditional execution is written with the `if` keyword.
365- This keyword (((if keyword))) tells a program execute or skip a
366- statement depending on the value of a boolean expression. It is always
367- followed by an expression between parentheses and then a statement.
368-
369- //I moved the details of the if keyword to the paragraph above; do I have this right? /JG
370-
350+ Conditional execution is written with the `if` keyword in JavaScript.
371351In the simple case, we just want some code to be executed if, and only
372352if, a certain condition holds. For example, in the previous program,
373353we might want to show the square of the input only if the input is
@@ -381,18 +361,23 @@ if (!isNaN(theNumber))
381361 theNumber * theNumber);
382362----
383363
384- With this modification, if you enter anything that isn't a number, like
385- “cheese” or even nothing at all, no output will be shown.
364+ With this modification, if you enter “cheese”—or nothing at all—no
365+ output will be shown.
366+
367+ (((if keyword)))The keyword `if` executes or skips a
368+ statement depending on the value of a boolean expression. The deciding
369+ expression is written after the keywords, between parentheses, followed
370+ by the statement to execute.
386371
387- The `isNaN` function is a standard JavaScript function that returns `true` if the
388- argument it is given is `NaN`. The `Number` function returns
372+ The `isNaN` function is a standard JavaScript function that return `true` if the
373+ argument it is given is `NaN`. The `Number` function happens to return
389374`NaN` when you give it a string that doesn't represent a valid number.
390- Thus, the condition translates to, “unless `theNumber` is not-a-number, do
375+ Thus, the condition translates to “unless `theNumber` is not-a-number, do
391376this”.
392377
393378(((else keyword))) You won't always just have code that executes
394379when a condition holds true. Often, you'll also need code that handles the
395- case when the condition doesn't hold. This alternate path is represented by the
380+ other case, when the condition doesn't hold. This alternate path is represented by the
396381second arrow in the diagram above. The `else` keyword can be used,
397382together with `if`, to create two separate, parallel execution paths:
398383
@@ -428,9 +413,7 @@ second condition (`< 100`) holds, that means the number is between 10
428413and 100, and `"Medium"` is shown. If it doesn't, the second and last
429414`else` branch is chosen.
430415
431- //Would it make sense to say flow chart instead of arrow schema below? /JG
432-
433- The arrow schema for this program looks something like this:
416+ The flow chart for this program looks something like this:
434417
435418image::img/controlflow-nested-if.svg[alt="Nested if control flow"]
436419
@@ -483,8 +466,8 @@ is `true` when converted to boolean type.
483466((({} block)))(((statement)))(((block (of statements))))In this loop, we
484467want to both print out the current number and add two to our variable.
485468Whenever we want to execute multiple statements inside a loop, we wrap them in braces
486- (`{` and `}`). Similar to what parentheses do for expressions, braces
487- group statements together, making them count as a single statement.
469+ (`{` and `}`). Braces do for statements what parentheses do for expressions, they
470+ group them together, making them count as a single statement.
488471
489472(((variable)))(((state)))The variable `number` demonstrates
490473the way a variable can track the progress of a program. Every time the
@@ -518,7 +501,7 @@ to counting from 0.
518501(((do loop)))(((control flow))) The `do` loop is a control structure
519502similar to the `while` loop. It differs only on one point: a `do` loop
520503always executes its body at least once, and it only starts testing whether
521- it should stop after that first execution. To reflect this, the test is
504+ it should stop after that first execution. To reflect this, the test appears
522505below the body of the loop:
523506
524507[source,javascript]
@@ -534,18 +517,15 @@ it gets something that is not an empty string. (Applying the `!`
534517operator will convert a value to boolean type before negating it, and
535518all strings except `""` convert to `true`.)
536519
537- //What do you think about boxing this section on indenting code? It just feels
538- //like a detour from discussing loops, so it might make sense to it apart. /JG
539-
540520== Indenting Code ==
541521
542522You've probably noticed the spaces I put in front of some
543523statements. In JavaScript, these are not required—the computer will accept the
544524program just fine without them. In fact, even the line breaks in
545525programs are optional. You could write a program as a single long line if
546- you felt like it, but using ((indentation)) inside blocks
547- makes the code's structure clear . In complex code, where new blocks open
548- inside other blocks, it can become hard to see
526+ you felt like it. The role of the ((indentation)) inside blocks is to
527+ make the structure of the code stand out . In complex code, where new blocks
528+ are opened inside other blocks, it can become hard to see
549529where one block ends and another begins. With proper indentation, the
550530visual shape of a program corresponds to the shape of the blocks
551531inside it. I like to use two spaces for every open block, but tastes
@@ -562,7 +542,7 @@ boundary yet. At the end of the loop body, the counter is updated to
562542track progress.
563543
564544Because this pattern is so common, JavaScript and similar languages
565- provide a slightly shorter and more comprehensive form, called the `for` loop:
545+ provide a slightly shorter and more comprehensive form, the `for` loop:
566546
567547[source,javascript]
568548----
@@ -602,13 +582,13 @@ that it “belongs” to the line before it.
602582
603583== Breaking Out of a Loop ==
604584
605- (((looping,termination)))(((break keyword)))It's possible for a loop to finish
606- without having its condition produce `false`. A
585+ (((looping,termination)))(((break keyword)))Having its condition
586+ produce `false` is not the only way a loop can finish. There is a
607587special statement called `break` has the effect of immediately jumping
608588out of the enclosing loop.
609589
610- Let's look at the `break` statement in action. This program finds the first
611- number that is both greater than or equal to 20 and divisible by 7:
590+ This program illustrates the `break` statement. It finds the first number
591+ that is both greater than or equal to 20 and divisible by 7:
612592
613593[source,javascript]
614594----
@@ -630,7 +610,7 @@ the `break` statement inside is executed.
630610
631611If you were to leave out that `break` statement or accidentally write a
632612condition that always produces `true`, your program would get stuck in
633- an _((infinite loop))_. A program running an infinite
613+ an _((infinite loop))_. A program stuck in an infinite
634614loop will never finish running, which is usually a bad thing.
635615
636616ifdef::html_target[]
@@ -714,10 +694,6 @@ switch (prompt("What is the weather like?")) {
714694}
715695----
716696
717- //Saying that the case structure "continues past" other labels made it
718- //sound as though it skips the code under those labels, so I tried to clarify.
719- //Do I have you right? /JG
720-
721697(((case keyword)))(((default keyword)))You may put any number of `case`
722698labels inside the block opened by `switch`. The program will
723699jump to the label that corresponds to the value that `switch` was
@@ -857,8 +833,6 @@ ifdef::html_target[]
857833----
858834endif::html_target[]
859835
860- //Since these aren't the coded solutions, would it make sense to wrap them in !!hint!!? /JG
861-
862836!!solution!!
863837
864838You can start with a program that simply prints out the numbers 1 to
@@ -885,7 +859,7 @@ for numbers that are divisible by both 3 and 5.
885859
886860(This is actually an interview question that has been claimed to weed
887861out a significant percentage of programmer candidates. So if you
888- solved it, feel proud! )
862+ solved it, you're now allowed to feel good about yourself. )
889863
890864ifdef::html_target[]
891865[source,javascript]
@@ -904,12 +878,10 @@ divisible by another number (has a remainder of zero).
904878In the first version, there are three possible outcomes for
905879every number, so you'll have to create an `if`/`else if`/`else` chain.
906880
907- //Did you mean "word or words to output" below or "word or number," instead of "word or word"? /JG
908-
909881The second version of the program has a straightforward solution and a
910882clever one. The simple way is to add another “branch” to precisely test
911883the given condition. For the clever method, build up a string containing
912- the word or word to output, and print either this word or the number
884+ the word or words to output, and print either this word or the number
913885if there is no word, potentially by making elegant use of the “||”
914886operator.
915887
0 commit comments