-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
215 lines (214 loc) · 8.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IF STATEMENTS ; COMPARISON OPERATORS ; IF STATEMENTS NESTED</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="blue"></div>
<div class="heading">
<div class="space"></div>
<div class="head">
<h1>If statements ; Comparison operators ; if statements nested</h1>
</div>
<div class="space"></div>
</div>
<div class="blue-buttom">
<div class="para">
Assinment # 9-10 <br />
JAVASCRIPT
</div>
</div>
<div class="chap">
<h1><br />C h a p t e r s</h1>
<br />
</div>
<div class="moiz">
<h1>-: If statements :-</h1>
<p class="ali">
Suppose you code a prompt that asks, "Where does the Pope live?" <br />
If the user answers correctly, you display an alert congratulating him.
<br />
This is the code. <br />
1 var x = prompt("Where does the Pope live?"); <br />
2 if (x === "Vatican") { <br />
3 alert("Correct!"); <br />
4 } <br />
If the user enters "Vatican" in the prompt field, the congratulations
alert displays. If he <br />
enters something else, nothing happens. (This simplified code doesn't
allow for other correct <br />
answers, like "The Vatican." I don't want to get into that now.) <br />
There's a lot to take in here. Let's break it down. <br />
An if statement always begins with if. The space that separates it from
the parenthesis is <br />
new to you. I've taught you to code alerts and prompts with the opening
parenthesis running up <br />
against the keyword: alert("Hi"); Now I'm asking you not to do that in
an if statement. It's <br />
purely a matter of style, but common style rules sanction this
inconsistency. <br />
Following the if keyword-plus-space is the condition that's being
tested—does the <br />
variable that's been assigned the user's response have a value of
"Vatican"? <br />
The condition is enclosed in parentheses. <br />
If the condition tests true, something happens. Any number of statements
might execute. In <br />
this case, only one statement executes: a congratulatory alert displays.
<br />
The first line of an if statement ends with an opening curly bracket. An
entire if statement <br />
ends with a closing curly bracket on its own line. Note that this is an
exception to the rule that <br />
a statement ends with a semicolon. It's common to omit the semicolon
when it's a complex <br />
statement that's paragraph-like and ends in a curly bracket. <br />
But what about that triple equal sign? You might think that it should
just be an equal sign, <br />
but the equal sign is reserved for assigning a value to a variable. If
you're testing a variable <br />
for a value, you can't use the single equal sign. <br />
If you forget this rule and use a single equal sign when you should use
the triple equal <br />
sign, the code won't run properly. <br />
As you might expect, you can use a variable instead of a string in the
example code. <br />
1 var correctAnswer = "Vatican"; <br />
2 if (x === correctAnswer) { <br />
3 alert("Correct!"); <br />
4 } <br />
When a condition is met, you can have any number of statements execute.
<br />
1 var correctAnswer = "Vatican"; <br />
2 if (x === correctAnswer) { <br />
3 score++; <br />
4 userIQ = "genius"; <br />
5 alert("Correct!"); <br />
6 } <br />
</p>
</div>
<div class="moiz">
<h1>-: Comparison operators :-</h1>
<p class="ali">
Let's talk a little more about ===. It's a type of comparison operator,
specifically an <br />
equality operator. As you learned in the last chapter, you use it to
compare two things to see if <br />
they're equal. <br />
You can use the equality operator to compare a variable with a string, a
variable with a <br />
number, a variable with a math expression, or a variable with a
variable. And you can use it to <br />
compare various combinations. All of the following are legal first lines
in if statements: <br />
if (fullName === "Mark" + " " + "Myers") { <br />
if (fullName === firstName + " " + "Myers") { <br />
if (fullName === firstName + " " + "Myers") { <br />
if (fullName === "firstName + " " + lastName) { <br />
if (totalCost === 81.50 + 135) { <br />
if (totalCost === materialsCost + 135) { <br />
if (totalCost === materialsCost + laborCost) { <br />
if (x + y === a - b) { <br />
When you're comparing strings, the equality operat or is case-sensitive.
"Rose" does not <br />
equal "rose." <br />
Another comparison operator, !==, is the opposite of ===. It means is
not equal to. <br />
1 if (yourTicketNumber !== 487208) { <br />
2 alert("Better luck next time."); <br />
3 } <br />
Like ===, the not-equal operator can be used to compare numbers,
strings, variables, <br />
expressions, and combinations. <br />
Like ===, string comparisons using the not-equal operator are
case-sensitive. It's true that <br />
"Rose" !== "rose". <br />
Here are 4 more comparison operators, usually used to compare numbers.
<br />
> is greater than <br />
< is less than <br />
>= is greater than or equal to <br />
<= is less than or equal to <br />
In the examples below, all the conditions are true. <br />
if (1 > 0) { <br />
if (0 < 1) { <br />
if (1 >= 0) { <br />
if (1 >= 1) { <br />
if (0 <= 1) { <br />
if (1 <= 1) { <br />
</p>
</div>
<div class="moiz">
<h1>-: If statements nested :-</h1>
<p class="ali">
Check out this code. <br />
1 if ((x === y || a === b) && c === d) { <br />
2 g = h; <br />
3 } <br />
4 else { <br />
5 e = f; <br />
6 } <br />
In the code above, if either of the first conditions is true, and, in
addition, the third <br />
condition is true, then g is assigned h. Otherwise, e is assigned f.
<br />
There's another way to code this, using nesting. <br />
1 if (c === d) { <br />
2 if (x === y) { <br />
3 g = h; <br />
4 } <br />
5 else if (a === b) { <br />
6 g = h; <br />
7 } <br />
8 else { <br />
9 e = f; <br />
10 } <br />
11 } <br />
12 else { <br />
13 e = f; <br />
14 } <br />
Nest levels are communicated to JavaScript by the positions of the curly
brackets. There <br />
are three blocks nested inside the top-level if. If the condition tested
by the top-level if—that c <br />
has the same value as d—is false, none of the blocks nested inside
executes. The opening curly <br />
bracket on line 1 and the closing curly bracket on line 11 enclose all
the nested code, telling <br />
JavaScript that everything inside is second-level. <br />
For readability, a lower level is indented 2 spaces beyond the level
above it. <br />
In the relatively simple set of tests and outcomes shown in this
example, I would prefer to <br />
use the more concise structure of multiple conditions. But when things
get really complicated, <br />
nested ifs are a good way to go. <br />
</p>
</div>
<div class="moiz">
<h1>Assignment</h1>
<p class="ali">
<object
data="./chapters9-11-1.pdf"
type="application/pdf"
width="100%"
height="500px"
>
<p>
Unable to display PDF file.
<a href="./chapters9-11-1.pdf">Download</a>
instead.
</p>
</object>
</p>
</div>
<div class="chap">
<h1><br />Perform The Assignment</h1>
<br />
</div>
<script src="./app.js"></script>
</body>
</html>