|
1 |
| -//Level 1 |
2 |
| - |
3 |
| -/* Comments. |
4 |
| - Let's start with comments - notes that people can read and computers will ignore. |
5 |
| - They will help us up to guide you through the javaScript introduction journey. |
6 |
| - There is a multi-line comments, like this one and also you can leave a single line comment |
7 |
| - right in your code, example below. If you need to write some notes use comments starting with '//' |
8 |
| - To comment out - means comment your lines of code, so computer skip them. |
| 1 | +// Level 1 |
| 2 | + |
| 3 | +/* |
| 4 | + Comments |
| 5 | + ======== |
| 6 | +
|
| 7 | + Let's start with comments. Comments are notes that people can read and |
| 8 | + computers will ignore. |
| 9 | +
|
| 10 | + They will help us up to guide you through the JavaScript introduction |
| 11 | + journey. |
| 12 | +*/ |
| 13 | + |
| 14 | +/* |
| 15 | + Multi-line comments look like this. |
9 | 16 | */
|
10 | 17 |
|
11 |
| -//I'm your one-line comment |
| 18 | +// Single line comments look like this. |
12 | 19 |
|
13 | 20 |
|
14 |
| -/* Let's start with getting your code on the screen. |
15 |
| - There is few ways you can do it and we will look into few of them: |
16 |
| - - console.log('Hello World!'); - this line of code will print 'Hello World!' to the browser's console. |
17 |
| - P.S: To see browser's console you can do right click in the window of you browser(Chrome, Firefox etc) |
18 |
| - and select 'Inspect' or 'Inspect element' after that a console will appear on the bottom/right side of the page. |
19 |
| - - alert('Hello girls!'); - this line of code will pop-up a small window in your browser with text 'Hello girls!' in it, |
20 |
| - but you need to refresh opened page first. |
| 21 | +/* |
| 22 | + Let's start with getting your code on the screen. |
| 23 | +
|
| 24 | + There are a few ways you can do it and we will look into few of them: |
| 25 | +
|
| 26 | + * alert('Hello girls!'); |
| 27 | + ** this line of code will pop-up a small window in your browser with text |
| 28 | + 'Hello girls!' in it, but you need to refresh opened page first. |
| 29 | +
|
| 30 | + * console.log('Hello World!'); |
| 31 | + ** this line of code will print 'Hello World!' to the browser's console. |
| 32 | +
|
| 33 | + P.S: To see browser's console you can do right click in the window of you |
| 34 | + browser(Chrome, Firefox etc) and select 'Inspect' or 'Inspect element' |
| 35 | + after that a console will appear on the bottom/right side of the page. |
21 | 36 | */
|
22 | 37 |
|
23 | 38 |
|
24 |
| -//TODO: Now try to create an alert with any phrase you like. |
| 39 | +// TODO: Now try to create an alert with any phrase you like. |
| 40 | + |
| 41 | + |
25 | 42 |
|
26 | 43 |
|
27 | 44 |
|
| 45 | +// TODO: After alert works for you, comment it out(put '//' on the line where |
| 46 | +// your code is and save changes) after refresh the page - it should not pop-up |
| 47 | +// anymore. |
28 | 48 |
|
| 49 | +// TODO: What you say about trying console.log your message to browser? Send |
| 50 | +// any message you like. |
29 | 51 |
|
30 |
| -//TODO: After alert works for you, comment it out(put '//' on the line where your code is and save changes) after refresh the page - |
31 |
| -// it should not pop-up anymore. |
32 | 52 |
|
33 |
| -//TODO: What you say about trying console.log your message to browser? Send any message you like. |
34 | 53 |
|
35 | 54 |
|
36 | 55 |
|
| 56 | +/* |
| 57 | + Variables |
| 58 | + ========= |
37 | 59 |
|
| 60 | + Variable is a place to store information. To create (also called declare) a |
| 61 | + variable use a keyword 'var', as follows: |
38 | 62 |
|
39 |
| -/* Variables. |
40 |
| - Variable is a place to store information. To create(declare) a variable use a keyword 'var', as follows: |
41 | 63 | var variableName;
|
42 |
| - So, we created a variable named variableName, but it has no information/value inside, it is empty. To give value(initialize) |
43 |
| - to variable follow next step: |
| 64 | +
|
| 65 | + So, we created a variable named variableName, but it has no information or |
| 66 | + value inside. It is empty. To give our variable a value (initialize it) |
| 67 | + use the '=' sign: |
| 68 | +
|
44 | 69 | variableName = 'Hello world!';
|
| 70 | +
|
45 | 71 | We also can create and give value to variable in one step, as follows:
|
| 72 | +
|
46 | 73 | var newVariable = 1;
|
47 |
| - As you noticed we can give different types of values to our variables - strings, numbers, booleans etc. |
48 |
| - String - is a set of characters, word or phrase that we wrap into quotes, see 'hello world!' in previous task. |
| 74 | +
|
| 75 | + As you noticed we can give different types of values to our variables - |
| 76 | + strings, numbers, booleans etc. |
| 77 | +
|
| 78 | + String - is a set of characters, word or phrase that we wrap into quotes, |
| 79 | + see 'hello world!' in previous task. |
49 | 80 | Numbers - either integers or floats(decimals).
|
50 | 81 | Boolean - it represents logical values - True or False
|
51 | 82 | */
|
52 | 83 |
|
53 |
| -//TODO: Now create two empty variables named numberOne and numberTwo |
| 84 | +// TODO: Now create two empty variables named numberOne and numberTwo |
54 | 85 |
|
55 | 86 |
|
56 | 87 |
|
57 | 88 |
|
58 | 89 | /*
|
59 | 90 | You also can use your variables to represent information that it has inside.
|
| 91 | +
|
60 | 92 | Example:
|
| 93 | +
|
61 | 94 | var hello = 'Hello World';
|
62 | 95 | alert(hello);
|
| 96 | +
|
63 | 97 | It will pop-up an alert box with string 'Hello World!'
|
64 | 98 | */
|
65 | 99 |
|
66 |
| -//TODO: Create 2 variables, 1 with your name and 2nd with your age and display them with alert pop-up box |
| 100 | +// TODO: Create 2 variables, 1 with your name and 2nd with your age and display |
| 101 | +// them with alert pop-up box |
67 | 102 |
|
68 | 103 |
|
69 | 104 |
|
70 | 105 |
|
71 | 106 |
|
72 |
| -//TODO: Don't forget to comment out alerts if you don't want them to pop-up every time |
| 107 | +// TODO: Don't forget to comment out alerts if you don't want them to pop-up |
| 108 | +// every time. |
73 | 109 |
|
74 | 110 |
|
75 |
| -/* Arithmetic operators |
76 |
| - There are a bunch of different operators in programming. We will look through arithmetical operators now. |
77 |
| - They are standard arithmetical operators (+, -, /, *, etc) that you can use to do math with your numbers. |
| 111 | +/* |
| 112 | + Arithmetic Operators |
| 113 | + ==================== |
| 114 | +
|
| 115 | + There are a bunch of different operators in programming. We will look |
| 116 | + through arithmetical operators now. JavaScript incudes several standard |
| 117 | + arithmetical operators (+, -, /, *) that you can use to do math with your |
| 118 | + numbers. |
| 119 | +
|
78 | 120 | Example:
|
| 121 | +
|
79 | 122 | var sumOfNumbers = 1 + 3;
|
80 | 123 | alert(sumOfNumbers);
|
| 124 | +
|
81 | 125 | It will pop-up alert box with number 4
|
| 126 | +
|
| 127 | + (You can see a full list of ) |
82 | 128 | */
|
83 | 129 |
|
84 |
| -//TODO: Create 3 variables, 1st variable named ten with value 10 inside, 2nd variable named three with value 3. And finally 3rd variable named multipleOfNumbers that will be equal to 1st variable multiplied by the 2nd variable. And in the end display the value of multipleOfNumbers |
| 130 | +// TODO: Create 3 variables: |
| 131 | +// |
| 132 | +// * 1st variable named ten with value 10 inside, |
| 133 | +// * 2nd variable named three with value 3 |
| 134 | +// * And finally 3rd variable named multipleOfNumbers that will be equal to |
| 135 | +// 1st variable multiplied by the 2nd variable. And in the end display the |
| 136 | +// value of multipleOfNumbers. |
85 | 137 |
|
86 | 138 |
|
87 | 139 |
|
88 | 140 |
|
89 | 141 |
|
90 |
| -/* Functions |
91 |
| - Function is a separable, reusable piece of code. Some action that you want to do. It takes some input(arguments), do some manipulation |
92 |
| - on it and returns the output with key-word 'return'. |
93 |
| - To create a function you need do following: |
94 |
| - var functionName = function(argument){ |
| 142 | +/* |
| 143 | + Functions |
| 144 | + ========= |
| 145 | +
|
| 146 | + A function is a reusable piece of code. Some action that you |
| 147 | + want to do. It takes some input (arguments), do some manipulation |
| 148 | + on it and returns the output. Use the keyword 'return' to define the return |
| 149 | + value. |
| 150 | +
|
| 151 | + To create a function use the following format: |
| 152 | +
|
| 153 | + function functionName(argument) { |
95 | 154 | return argument * 2;
|
96 | 155 | };
|
97 |
| - So, our function will take 1 argument and return argument multiplied by 2. But for now it will do nothing as we need to call our function. |
98 |
| - To call the function we do so: |
| 156 | +
|
| 157 | + This function will take one argument and return the argument multiplied by |
| 158 | + 2. Our function won't actually run unless we 'call' it. |
| 159 | +
|
| 160 | + To 'call' the function we write: |
| 161 | +
|
99 | 162 | functionName(10);
|
100 |
| - Now we will call our function with argument that is 10. And our function will return us 20. To see what our function |
101 |
| - returns us we can console.log it, for example: |
| 163 | +
|
| 164 | + Now we will call our function with argument that is 10. And our function |
| 165 | + will return us 20. To see what our function returns us we can console.log |
| 166 | + it, for example: |
| 167 | +
|
102 | 168 | console.log(functionName(10));
|
103 | 169 | */
|
104 | 170 |
|
105 |
| -//TODO: It's your turn to create a function. |
106 |
| -//Step 1 - Name it 'add' and pass in two argumnets (num1 and num2) - to pass multiple arguments into function we seperate them with coma. |
107 |
| -//Step 2 - This function should return us a sum of num1 and num2. |
108 |
| -//Step 3 - Call the function passing numbers 2 and 3 as arguments. To see result you can alert it or console.log it - to be sure that it works right. |
| 171 | +// TODO: It's your turn to create a function. |
| 172 | +// Step 1 - Name it 'add' and pass in two argumnets (num1 and num2) |
| 173 | +// - to pass multiple arguments into function we seperate them with comma. |
| 174 | +// Step 2 - This function should return us a sum of num1 and num2. |
| 175 | +// Step 3 - Call the function passing numbers 2 and 3 as arguments. |
| 176 | +// - To see the result you can console.log it. |
| 177 | + |
| 178 | + |
| 179 | + |
109 | 180 |
|
110 | 181 |
|
111 | 182 |
|
| 183 | +// TODO: Great, you made it! Now let's do another function named 'subtract' and |
| 184 | +// pass 2 arguments num1 and num2. |
| 185 | +// Call it with the numbers 5 and 1 and console.log the result. |
112 | 186 |
|
| 187 | +// PS: Do you know that instead of numbers you can create variables that store |
| 188 | +// those numbers and pass them as an arguments to your function? Try it out! |
113 | 189 |
|
114 | 190 |
|
115 |
| -//TODO: Great, you made it! Now let's do another function named 'subtract' and pass 2 arguments num1 and num2. |
116 |
| -//Call on it with numbers 5 and 1 and console.log the result. |
117 |
| -//PS: do you know that instead of numbers you can create variables that store those numbers and pass them as an arguments to your function, try it up. |
118 | 191 |
|
119 | 192 |
|
120 | 193 |
|
121 | 194 |
|
122 | 195 |
|
123 | 196 |
|
| 197 | +/* |
| 198 | + If-Else Statements |
| 199 | + ================== |
124 | 200 |
|
| 201 | + What if we want our program to make a decision about which function it |
| 202 | + should run? In this case we can use conditions. |
| 203 | + If you have TV you can watch it in the evening, if not - you might do |
| 204 | + something else. Same with code, you can give 'if' condition to machine to |
| 205 | + make a decision what part of code to run. |
125 | 206 |
|
126 |
| -/*If-else statements |
127 |
| - What if we want our program to make a decision which function it should run? In this case we can use conditions. |
128 |
| - If you have TV you can watch it in the evening, if not - you might do something else. |
129 |
| - Same with code, you can give 'if' condition to machine to make a decision what part of code to run. |
130 | 207 | Structure:
|
131 |
| - if(condition){ |
| 208 | +
|
| 209 | + if (condition) { |
132 | 210 | do this
|
133 | 211 | } else {
|
134 | 212 | do something else
|
|
139 | 217 | console.log('Our number is bigger then 7');
|
140 | 218 | } else {
|
141 | 219 | console.log('Our number is smaller then 7');
|
142 |
| - }; |
| 220 | + } |
143 | 221 | */
|
144 | 222 |
|
145 |
| -/*Comparison operators |
146 |
| - You remember we were talking about arithmetical operators and that we have different operators in programming, so |
147 |
| - here comes time to introduce you to comparison operators that are used to compare values(>, <, <=, =>, ==, !=). |
148 |
| - Most of them you know from math classes in school, some of them can be new for you, so '==' is checking equality, if two values are equal. |
| 223 | +/* |
| 224 | + Comparison Operators |
| 225 | + ==================== |
| 226 | +
|
| 227 | + Earlier we introduced JavaScript's arithmetic operators. Now comes time to |
| 228 | + introduce you to the next set. JavaScript's Comparison operators' are used |
| 229 | + to compare values(>, <, <=, =>, ==, !=). Most of them you know from math |
| 230 | + classes in school, some of them can be new for you, so '==' is checking |
| 231 | + equality, if two values are equal. |
| 232 | +
|
149 | 233 | '!=' - checks if they are not equal.
|
| 234 | +
|
150 | 235 | PS: Don't mix up '=' and '==' as they have different meaning.
|
151 | 236 | */
|
152 | 237 |
|
153 |
| -//TODO: So now we have 2 functions from previous task - add and subtract. Let's tell machine to decide what action to run |
154 |
| -//depending on arithmetical operator(+,-,/, * etc). If operator is '+' we should use add function, else - subtract function. |
155 |
| -//Step 1, create a variable called operator and let it be equal to '-' |
156 |
| -//Step 2, create if/else statement based on what operator we have, |
157 |
| -// if we have operator equal to '+' we call add function with any two numbers, else subtract function with any 2 numbers. |
158 |
| -//Don't forget to console.log it to see the result |
| 238 | +// TODO: So now we have 2 functions from previous task - add and subtract. |
| 239 | +// Let's tell machine to decide what action to run depending on arithmetical |
| 240 | +// operator(+,-,/, * etc). If operator is '+' we should use add function, else |
| 241 | +// - subtract function. |
| 242 | +// |
| 243 | +// Step 1 - create a variable called operator and let it be equal to '-' |
| 244 | +// Step 2 - create if/else statement based on what operator we have, |
| 245 | +// |
| 246 | +// if we have operator equal to '+' we call add function with any two numbers, |
| 247 | +// else subtract function with any 2 numbers. |
| 248 | +// |
| 249 | +// Don't forget to console.log it to see the result |
| 250 | + |
159 | 251 |
|
160 | 252 |
|
161 | 253 |
|
|
176 | 268 |
|
177 | 269 |
|
178 | 270 |
|
| 271 | +/* |
| 272 | + if - else if - else |
| 273 | + =================== |
| 274 | +
|
| 275 | + Hm, but what if we have 4 arithmetical operations in our calculator? Well, |
| 276 | + we can use if - else if - else structure. |
179 | 277 |
|
180 |
| -/*If - else if - else |
181 |
| - Hm, but what if we have 4 arithmetical operations in our calculator? Well, we can use if - else if - else structure. |
182 | 278 | Example:
|
| 279 | +
|
183 | 280 | var number = 7;
|
184 | 281 | if (number > 7) {
|
185 | 282 | console.log('Our number is bigger then 7');
|
186 |
| - } else if (number < 7){ |
| 283 | + } else if (number < 7) { |
187 | 284 | console.log('Our number is smaller then 7');
|
188 | 285 | } else {
|
189 | 286 | console.log('Our number is equal to 7');
|
190 |
| - }; |
| 287 | + } |
191 | 288 | */
|
192 | 289 |
|
193 | 290 |
|
194 |
| -//TODO: Let's create 2 more functions and name them divide and multiply. After that let's extend our 'if else' check that we already created by |
195 |
| -// checking if it is equal to '/' - call 'divide' function, if it is '*' call multiply function, |
196 |
| -// else console.log - "Sorry, we don't know this operator". |
| 291 | +// TODO: Let's create 2 more functions and name them divide and multiply. After |
| 292 | +// that let's extend our 'if else' check that we already created by checking if |
| 293 | +// it is equal to '/' - call 'divide' function, if it is '*' call multiply |
| 294 | +// function, else console.log - "Sorry, we don't know this operator". |
197 | 295 |
|
198 | 296 |
|
199 | 297 |
|
|
0 commit comments