Skip to content

Commit da3de2e

Browse files
committed
Integrate the edits to chapter 2
1 parent 5c06fa6 commit da3de2e

1 file changed

Lines changed: 50 additions & 78 deletions

File tree

02_program_structure.txt

Lines changed: 50 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ respond well to toxins in the blood.) Man, that stuff will kick the
1212
peaches 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
1616
called _programming_. We will expand our command of the JavaScript
1717
language beyond the nouns and sentence fragments we've seen so far,
1818
to 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
2323
some values and then applied operators to them to get new values.
2424
Creating values like this is an essential part of every JavaScript
2525
program, but it is still only a part.
@@ -138,11 +138,9 @@ tentacles to it.
138138

139139
image::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
146144
give 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
157155
has nothing to grasp, so it ends in thin air. If you ask
158156
for 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
188185
empty. It always contains variables that are part of
189186
the language standard, and most of the time, it has
190187
variables 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
201195
values 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
204198
browser environment, the variable `alert` holds a function that shows
205199
a little dialog box with a message. It is used like this:
@@ -214,12 +208,10 @@ image::img/alert.png[alt="An alert dialog"]
214208
indexsee:[application (of functions),function application]
215209
indexsee:[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
223215
function. The values between the parentheses are given to the program
224216
inside the function. In the example, the `alert` function uses the
225217
string 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
236228
browsers and node.js) provide a `console.log` function that writes out
237229
its arguments to _some_ text output device. In browsers, the output
238230
lands 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

245235
ifdef::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

253241
endif::html_target[]
254242

@@ -260,20 +248,18 @@ console.log("the value of x is", x);
260248
----
261249

262250
Though 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
265253
retrieves the `log` field from the value held by the `console`
266254
variable. 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
273259
box 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
275261
produce 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
277263
function `Math.max` takes two numbers and gives back the
278264
greatest 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
289275
expressions:
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
360346
different routes based on a boolean value.
361347

362348
image::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.
371351
In the simple case, we just want some code to be executed if, and only
372352
if, a certain condition holds. For example, in the previous program,
373353
we 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
391376
this”.
392377

393378
(((else keyword))) You won't always just have code that executes
394379
when 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
396381
second arrow in the diagram above. The `else` keyword can be used,
397382
together 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
428413
and 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

435418
image::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
484467
want to both print out the current number and add two to our variable.
485468
Whenever 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
490473
the 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
519502
similar to the `while` loop. It differs only on one point: a `do` loop
520503
always 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
522505
below the body of the loop:
523506

524507
[source,javascript]
@@ -534,18 +517,15 @@ it gets something that is not an empty string. (Applying the `!`
534517
operator will convert a value to boolean type before negating it, and
535518
all 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

542522
You've probably noticed the spaces I put in front of some
543523
statements. In JavaScript, these are not required—the computer will accept the
544524
program just fine without them. In fact, even the line breaks in
545525
programs 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
549529
where one block ends and another begins. With proper indentation, the
550530
visual shape of a program corresponds to the shape of the blocks
551531
inside 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
562542
track progress.
563543

564544
Because 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
607587
special statement called `break` has the effect of immediately jumping
608588
out 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

631611
If you were to leave out that `break` statement or accidentally write a
632612
condition 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
634614
loop will never finish running, which is usually a bad thing.
635615

636616
ifdef::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`
722698
labels inside the block opened by `switch`. The program will
723699
jump to the label that corresponds to the value that `switch` was
@@ -857,8 +833,6 @@ ifdef::html_target[]
857833
----
858834
endif::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

864838
You 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
887861
out 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

890864
ifdef::html_target[]
891865
[source,javascript]
@@ -904,12 +878,10 @@ divisible by another number (has a remainder of zero).
904878
In the first version, there are three possible outcomes for
905879
every 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-
909881
The second version of the program has a straightforward solution and a
910882
clever one. The simple way is to add another “branch” to precisely test
911883
the 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
913885
if there is no word, potentially by making elegant use of the “||”
914886
operator.
915887

0 commit comments

Comments
 (0)