├── .gitignore ├── .vscode └── extensions.json ├── LICENSE ├── README.md ├── cheat-sheet.md ├── css └── main.css ├── img ├── kittens.jpeg ├── logo_muses_color.svg └── woman_bw.jpg ├── index.html └── js ├── level1.js ├── level2.js └── level3.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .vscode/launch.json 3 | # Mac related system files 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "wayou.vscode-todo-highlight", 8 | "streetsidesoftware.code-spell-checker", 9 | "esbenp.prettier-vscode" 10 | ], 11 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 12 | "unwantedRecommendations": [ 13 | 14 | ] 15 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Node Girls Australia 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # js-intro-workshop 2 | 3 | An introductory JavaScript workshop for beginners. 4 | 5 | ## Slides 6 | 7 | Check on slides, click [here](https://goo.gl/5HNvxD) 8 | 9 | ## Feedback 10 | 11 | To leave feedback click [here](https://docs.google.com/forms/d/e/1FAIpQLSdoOaviRIqsDPi1ZPTvTDVEzeQrSiEoDhsS0tmAIQZmkLkvxw/viewform?c=0&w=1) 12 | 13 | ## How to use 14 | 15 | If you are familiar with git, you can clone this repository to your machine. 16 | 17 | If you don't know what git is, relax. You can easily download the folder on your machine - go to 18 | the 'releases' tab over the yellow line on the page and click the link 'Source code (zip)'. 19 | Unzip it (Extract) and open the folder, don't open files inside the .zip. 20 | 21 | Start from the `README.md` file, then open `js/level1.js`. 22 | 23 | To see the web-page in your browser, open `index.html` by double clicking on it, if you see 24 | an option 'open in browser' then choose that. Preferably use Chrome, but Firefox and Safari will work as well. 25 | 26 | Follow the instructions in `js/level1.js` and type code in your Text Editor (this is where your code lives and you can write, edit and delete code). 27 | 28 | In order to see anything that you edit, you need to save the file and refresh the web page. The result of any console.log() statement will be in the _browser console_. 29 | 30 | ### How to open the `Browser Console` 31 | 32 | | Browser | Platform | Instruction | 33 | | --- | --- | --- | 34 | | **Chrome** | Any | right-click the page and select `Inspect`, switch to `Console` tab in the developer tools | 35 | | **Chrome** | Mac | press `COMMAND + OPTION + J` | 36 | | **Chrome** | Windows | press `CONTROL + SHIFT + J` | 37 | | **Firefox** | Any | right-click the page and select `Inspect Element`, switch to `Console` tab | 38 | | **Firefox** | Mac | press `COMMAND + OPTION + K` | 39 | | **Firefox** | Windows | press `CONTROL + SHIFT + K` | 40 | | **Safari** | Mac | go to the menu bar and open `Safari > Preferences > Advanced >` and tick the box `Show Develop Menu` at the bottom, restart Safari, now you can right-click on the page and select `Inspect Element` to see the console. | 41 | | **Safari** | Mac | press `COMMAND + OPTION + C` | 42 | 43 | The console/developer tools will appear at the bottom or on the right side of the screen. 44 | 45 | You can write JavaScript code directly here and see the result straight away, but as soon as you refresh the page all the code will be gone, this is why we use a Text Editor in order to save our code. 46 | 47 | ## Structure 48 | 49 | - `css` folder - contains css files that are responsible for styles and how our project looks on the web. 50 | 51 | - `img` folder - a place where we can store images that we will use on our web-page. 52 | 53 | - `js` folder contains JavaScript files that makes our project work, it defines content and makes a static page functional. 54 | It contains 3 files: 55 | - `level1.js` - basics with explanations (comments, variables, functions, if/else statements) 56 | - `level2.js` - more complex JavaScript with explanations (arrays, loops) 57 | - `level3.js` - html, css and how manipulate them with JavaScript (selectors) 58 | 59 | - `index.html` - a file responsible for the structure of our project 60 | 61 | - `Readme.md` - a file with explanations and any information about the project, how to run it, what it is for etc 62 | 63 | - `cheat-sheet.md` - a file with a quick overlook for key namings and their explanations 64 | 65 | ## Author 66 | Tanya Butenko 67 | github: [https://github.com/ButenkoT](https://github.com/ButenkoT) 68 | twitter: [@ButenkoMe](https://twitter.com/ButenkoMe) 69 | -------------------------------------------------------------------------------- /cheat-sheet.md: -------------------------------------------------------------------------------- 1 | # JavaScript Cheatsheet 2 | 3 | ## JavaScript (or JS) 4 | 5 | A popular programming language commonly used to create interactive effects within web browsers. 6 | 7 | ## variable 8 | 9 | A place to store values, can store any kind of information (data types): numbers, words, collections of data 10 | 11 | ### undefined variable 12 | 13 | A variable that has no value 14 | 15 | ### to declare variable 16 | 17 | To create a variable - done by using: 18 | 19 | ``` 20 | let variableName = value; 21 | ``` 22 | 23 | ### to initialize variable 24 | 25 | Set (give) some value to a variable. 26 | 27 | ## value types 28 | 29 | ### string 30 | 31 | A set of characters, word(s), phrase. To initialize variable with a string you need to put this string into quotes. 32 | 33 | ### boolean 34 | 35 | Boolean variable represent a logical value True or False 36 | 37 | ### array 38 | 39 | An ordered list of values, can store different types of data inside 40 | 41 | ### operator 42 | 43 | Mathematical operators, such as: +, -, *, /, >, <, = etc 44 | 45 | ## comments 46 | 47 | Comments are notes that you can leave for yourself or another person, a note that a computer will not read. You can write a comment on a new line or on the same line after code as so: 48 | 49 | ``` 50 | let variableName; // I’m your comment 51 | ``` 52 | Single line comments start with `//` and continue for the entire line 53 | Multi line comments are placed between `/* .. */` and can end at any point on a line 54 | 55 | ## function 56 | 57 | A separable, reusable piece of code. It takes some input, does some manipulation on it and returns an output. 58 | 59 | ### to declare function 60 | 61 | To create a function 62 | 63 | ### argument 64 | 65 | A value input that functions can accept 66 | 67 | ## if/else statement 68 | 69 | `if` is used to decide if lines of code should be executed, `else` - gives an alternative set of instructions. 70 | 71 | Example: 72 | 73 | ``` 74 | if (x > 5) { 75 | console.log("X bigger than 5"); 76 | } 77 | else { 78 | console.log("X smaller than or equal to 5"); 79 | } 80 | ``` 81 | 82 | ## Iterating/Loops 83 | 84 | ### while loop 85 | 86 | It repeats code over and over again until some condition is met. 87 | 88 | ### for loop 89 | 90 | This loop is similar to ‘while loop’, just with a set amount of repetition. You declare counter in the statement as so: 91 | 92 | ``` 93 | for (let i = 0; i < 5; i++) { 94 | do something 5 times 95 | } 96 | ``` 97 | 98 | ### infinite loop 99 | 100 | This is an error which means that a loop does not stop. 101 | 102 | In order to avoid this error each loop should have some condition so it can stop, and contain some way to trigger the condition. 103 | 104 | ## object 105 | 106 | A collection of properties 107 | 108 | ## event 109 | 110 | A type of object that is created when a user interacts with a web page. For example, JavaScript creates an event when a user clicks on a button. 111 | 112 | ## CSS 113 | 114 | Stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen. It is presentation. 115 | 116 | ## HTML 117 | 118 | Stands for Hyper Text Markup Language. It is a structure of the elements on the page. 119 | 120 | ## DOM 121 | 122 | Stands for Document Object Model. It defines the logical structure of documents and the way a document is accessed and manipulated. 123 | 124 | ## scope 125 | 126 | Scope is the set of variables, objects, and functions that you can access. 127 | 128 | ## console 129 | 130 | A method of interacting with the system. In order to write to the browser console, you could use console.log(‘Hello World’). This would write Hello World in the browser console. 131 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html { 7 | font-size: 62.5%; 8 | } 9 | 10 | body { 11 | align-items: center; 12 | background: #EFEFEF; 13 | display: flex; 14 | flex-direction: column; 15 | font-family: Avenir, 'Source Sans Pro', sans-serif; 16 | justify-content: center; 17 | } 18 | 19 | body * { 20 | box-sizing: border-box; 21 | } 22 | 23 | header { 24 | box-sizing: border-box; 25 | flex: 0 1 auto; 26 | text-align: center; 27 | } 28 | 29 | h1 { 30 | font-family: Didot, 'GFS Didot', serif; 31 | font-size: 5rem; 32 | margin: 0 3.5rem; 33 | } 34 | 35 | h2 { 36 | font-family: Didot, 'GFS Didot', serif; 37 | font-size: 4rem; 38 | margin: 0 3rem; 39 | } 40 | 41 | img { 42 | width: 100%; 43 | max-width: 24rem; 44 | margin: 2rem; 45 | } 46 | 47 | a { 48 | color: #DA3296; 49 | text-decoration: none; 50 | } 51 | 52 | abbr { 53 | text-decoration: none; 54 | } 55 | 56 | main { 57 | display: flex; 58 | flex: 1; 59 | width: calc(100% - 4rem); 60 | } 61 | 62 | main > div { 63 | margin: 0 auto; 64 | max-width: 64rem; 65 | } 66 | 67 | main p { 68 | font-size: 2.6rem; 69 | } 70 | 71 | main a { 72 | font-weight: 800; 73 | } 74 | 75 | footer { 76 | background-color: #7986e5; 77 | padding: 1rem 1rem 2rem; 78 | width: 100%; 79 | } 80 | 81 | footer > div { 82 | color: white; 83 | display: flex; 84 | flex-direction: row; 85 | font-family: Avenir, 'Source Sans Pro', sans-serif; 86 | font-size: 1.4rem; 87 | justify-content: space-between; 88 | margin: 0 auto; 89 | padding: 0 2rem; 90 | max-width: 64rem; 91 | } 92 | 93 | footer ul { 94 | list-style: none; 95 | margin: 0; 96 | padding: 0; 97 | } 98 | 99 | footer li { 100 | padding: .25rem; 101 | } 102 | 103 | footer span { 104 | display: block; 105 | } 106 | 107 | footer a { 108 | color: white; 109 | font-style: italic; 110 | text-decoration: none; 111 | } 112 | 113 | footer a:hover { 114 | color:white; 115 | } 116 | 117 | #surprise { 118 | color: red; 119 | font-size: 2.25rem; 120 | } 121 | 122 | @media only screen and (min-width: 640px) { 123 | footer span { 124 | display: inline; 125 | } 126 | } 127 | 128 | @media only screen and (min-width: 1024px) { 129 | body { 130 | background: #EFEFEF url(../img/woman_bw.jpg) no-repeat bottom right; 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /img/kittens.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muses-code-js/js-intro-workshop/0e76312e449057ed9bb382a4089b8f0761616a5e/img/kittens.jpeg -------------------------------------------------------------------------------- /img/logo_muses_color.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logo Muses_colour (1) 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /img/woman_bw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muses-code-js/js-intro-workshop/0e76312e449057ed9bb382a4089b8f0761616a5e/img/woman_bw.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | MusesCodeJS | Intro to JavaScript Workshop 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 17 |

Hello everyone.

18 |

Let's do some interactive coding today!

19 |
20 | 21 |
22 |
23 |

On Chrome and Firefox, 24 | to open the Browser Console, right-click the page and select 'Inspect'. The console will 25 | appear at the bottom or on the right side of the screen. On Opera it will be 26 | 'Inspect Element'

27 |

If you're ready for a shortcut, press 'CMD+OPT+J' 28 | on Mac, or 'F12' on Windows

29 |

On Safari, go to the menu bar and open 'Safari > Preferences > Advanced >' 30 | and tick the box 'Show Develop Menu', restart Safari, now you can right-click on the page and 31 | select 'Inspect Element' to see the console.

32 |
33 |
34 | 35 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /js/level1.js: -------------------------------------------------------------------------------- 1 | // Level 1 2 | 3 | /* 4 | Comments 5 | ======== 6 | 7 | Let's start with comments. This is a comment. Comments are notes that people 8 | can read and computers will ignore. 9 | 10 | They will help us to guide you through the JavaScript introduction 11 | journey. 12 | 13 | A comment can either be a single line comment, or a multi line comment block 14 | */ 15 | 16 | // Single line comments look like this. Just add // to the left of your comment. 17 | 18 | /* 19 | Multi-line comments look like this. 20 | 21 | When you are writing actual code, put it outside these comment blocks, 22 | so the computer doesn't ignore them. 23 | */ 24 | 25 | 26 | 27 | 28 | 29 | 30 | /* 31 | Displaying text 32 | =============== 33 | 34 | Let's start with getting your code on the screen. 35 | 36 | There are a few ways you can do it and we will look into a few of them: 37 | 38 | alert('Hello World!'); 39 | This line of code will pop-up a small window in your browser with the 40 | text 'Hello World!' in it, when you refresh the opened page. 41 | 42 | console.log('Hello World!'); 43 | This line of code will print 'Hello World!' to the browser's console. 44 | 45 | P.S.: To see the browser's console you can right click on the window of your 46 | browser (Chrome, Firefox, Opera etc) and select 'Inspect' or 'Inspect element'. 47 | After that a console will appear on the bottom or right side of the page. 48 | More info in the file `Readme.md` 49 | */ 50 | 51 | // TODO: Now it's your turn! Try to create an alert with any phrase you want. 52 | 53 | 54 | 55 | 56 | 57 | 58 | // TODO: Once the alert works for you, comment it out (put '//' on the line 59 | // where your code is and save the changes). After you refresh the page, 60 | // it should not pop-up anymore. 61 | 62 | // TODO: Shall we try to console.log a message to the browser? 63 | // Send any message you want. 64 | 65 | 66 | 67 | 68 | 69 | // TIP: Shortcut to refresh a browser is 'CMD + R' on Mac and 'CTRL + R' on 70 | // Windows. 71 | 72 | 73 | // TIP: Shortcut to save changes to file is 'CMD + S' on Mac and 'CTRL + S' on 74 | // Windows. 75 | 76 | 77 | /* 78 | Variables 79 | ========= 80 | 81 | A variable is a place to store information. To create (also called declare) 82 | a variable use the keyword 'let', as follows: 83 | 84 | let variableName; 85 | 86 | So, we created a variable named variableName, but it has no information or 87 | value inside. It is `undefined`. 88 | 89 | If we print the variable to the console we can see that. 90 | console.log("variableName is " + variableName); 91 | The result will be "variableName is undefined". 92 | 93 | To give our variable a value (assign a value) use the '=' sign: 94 | 95 | variableName = 'Hello world!'; 96 | 97 | We also can create and give value to a variable in one step (initialize it): 98 | 99 | let newVariable = 1; 100 | 101 | As you can notice, we can give different types of values to our variables - 102 | Strings, Numbers, Booleans etc. 103 | 104 | Strings - a set of characters, word(s), or phrases that we wrap in quotes, 105 | like 'hello world!'. This can be anything, including numbers. 106 | 107 | Numbers - either integer or floating point (decimal). Not wrapped in quotes. 108 | 109 | Boolean - it represents logical values - true or false. 110 | 111 | 112 | P.S. You may see code that uses the keyword 'var' instead of 'let'. 113 | This is an older keyword that also creates variables, but with different 114 | rules about where that variable is available ("scope"). For now, consider 115 | 'let' and 'var' as essentially equivalent, but use 'let' because it is less 116 | prone to programming mistakes. 117 | */ 118 | 119 | // TODO: Now create two undefined variables named numberOne and numberTwo. 120 | 121 | 122 | 123 | 124 | 125 | 126 | /* 127 | You can use the name of your variables to represent what information 128 | that they have inside. 129 | 130 | Example: 131 | 132 | let hello = 'Hello World'; 133 | alert(hello); 134 | 135 | This will pop-up an alert box with the string 'Hello World!' 136 | */ 137 | 138 | // TODO: Create 2 new variables, 1 with your name and the 2nd with your age, 139 | // give them appropriate names and display them with an alert pop-up box. 140 | 141 | 142 | 143 | 144 | 145 | // TIP: to display both variables at the same time, 146 | // you can join them with the '+' sign. 147 | 148 | 149 | 150 | 151 | 152 | 153 | /* 154 | Constants 155 | ========= 156 | 157 | A constant is just like a variable, but it must be given a value when it is 158 | declared (created), and that value can never change. In other words, a 159 | constant always contains the same information. 160 | 161 | To declare (create) a constant, we use the keyword 'const'. 162 | 163 | Example: 164 | 165 | const earthRadiusKm = 6371; 166 | 167 | Assigning a new value to the constant will cause an error, we can not do: 168 | earthRadiusKm = 6400; 169 | 170 | The name of constants can also be used to represent the information they 171 | contain, in the same way as variables. 172 | */ 173 | 174 | // TODO: Create a constant, and display it an alert pop-up box. 175 | 176 | 177 | 178 | 179 | 180 | 181 | // TODO: Try to assign a new value to your constant to see what happens. 182 | 183 | 184 | 185 | 186 | 187 | 188 | // TIP: Don't forget to comment out alerts if you don't want them to pop-up 189 | // every time. 190 | 191 | /* 192 | Maths - Arithmetic Operators 193 | ============================ 194 | 195 | There are a bunch of different 'operators' in programming. Let's have a look 196 | through arithmetical operators now. JavaScript includes several standard 197 | arithmetical operators (+, -, /, *) that you can use to do maths with your 198 | numbers. 199 | 200 | Example: 201 | 202 | const sumOfNumbers = 1 + 3; 203 | console.log(sumOfNumbers); 204 | 205 | This will print the number 4 in our console. 206 | 207 | TIP: Note how we didn't put 1 and 3 in quotes, because they are numbers. 208 | */ 209 | 210 | // TODO: Create 3 variables: 211 | // 212 | // * 1st variable named ten with value 10 213 | // * 2nd variable named three with value 3 214 | // * And finally 3rd variable named multipleOfNumbers that will be equal to 215 | // 1st variable multiplied by the 2nd variable. 216 | 217 | 218 | 219 | 220 | 221 | 222 | // TODO: And in the end display the value of multipleOfNumbers. 223 | 224 | 225 | 226 | 227 | 228 | 229 | /* 230 | Functions 231 | ========= 232 | 233 | A function is a set of instructions that performs the same task every time 234 | we call it. It takes input in the form of 'arguments', calculates a result 235 | based on the input and returns the result as output. 236 | 237 | To create a function use the following format: 238 | 239 | function functionName(argumentName) { 240 | return argumentName * 2; 241 | }; 242 | 243 | This function will take one 'argument' and 'return' the argument multiplied 244 | by 2. An argument works like a variable, if something is passed to the 245 | function the argument contains that value, and if nothing is passed then 246 | the argument is undefined. 247 | 248 | Our function won't actually run unless we 'call' it. 249 | To 'call' the function we write: 250 | 251 | functionName(10); 252 | 253 | This will call our function with the argument 10. And our function 254 | will return 20. To see what our function returns we can console.log it, 255 | for example: 256 | 257 | console.log(functionName(10)); 258 | 259 | This takes the result of our function and sends it to console.log. 260 | 261 | TIP: The keyword 'return' is used to define the return value, we can do 262 | things before the line with 'return' on it, 263 | but after we 'return' the function ends. 264 | 265 | TIP: We can accept multiple arguments by separating them with a comma: 266 | function functionName(argument1, argument2) {} 267 | */ 268 | 269 | // TODO: It's your turn to create a function. 270 | 271 | // Create a function called 'add'. 272 | // Tell it to accept two arguments (number1 and number2) 273 | // - To pass multiple arguments into function we separate them with a comma. 274 | // Tell it to return a sum of number1 and number2. 275 | // Call the function passing numbers 2 and 3 as arguments. 276 | // - To see the result you can console.log it. 277 | 278 | 279 | 280 | 281 | 282 | 283 | // TODO: Great, you made it! Now let's create another function named 'subtract', 284 | // Tell it to accept 2 arguments, number1 and number2, and subtract 285 | // number2 from number1 then return that value. 286 | // Call it with the numbers 5 and 1 and console.log the result. 287 | 288 | 289 | 290 | 291 | 292 | 293 | // P.S.: Do you know that instead of numbers you can create variables that store 294 | // those numbers and pass them as an arguments to your function? Try it out! 295 | 296 | // P.P.S.: Leave the functions as they are, don't comment them out, 297 | // we will use them again. 298 | 299 | /* 300 | If-Else Statements 301 | ================== 302 | 303 | What if we want our program to make a decision about which function it 304 | should run? This is when we use conditions! If you have a TV you can 305 | watch it in the evening. If not, you might do something else. 306 | It's the same with code. You can give an 'if' condition to a machine to 307 | make a decision about what part of the code to run. 308 | 309 | Structure: 310 | 311 | if (condition) { 312 | do this 313 | } else { 314 | do something else 315 | } 316 | 317 | We need condition to either be true or false, so if we have something like 318 | a number we need to compare it to something. 319 | 320 | Example: 321 | 322 | const number = 7; 323 | if (number >= 7) { 324 | console.log('Our number is bigger than or equal to 7'); 325 | } else { 326 | console.log('Our number is smaller than 7'); 327 | } 328 | */ 329 | 330 | /* 331 | Comparison Operators 332 | ==================== 333 | 334 | Earlier we introduced JavaScript's arithmetic operators. Now comes time to 335 | introduce you to the next set of operators. 'Comparison operators' are used 336 | to compare values (>, <, <=, >=, ===, !==). Most of them you know from math 337 | classes in school, some of them can be new for you: 338 | 339 | '===' checks equality, results in true if two values are equal. 340 | '!==' checks inequality, results in true if two values are not equal. 341 | 342 | TIP: Don't mix up '=' and '===' as they have different meanings. 343 | '=' means Assign 344 | '===' means Is it equal 345 | 346 | There are also '==' and '!=' operators, which are very similar to '===' 347 | and '!==', but with a slightly different meaning that is more prone to 348 | programming errors, so you should always use '===' and '!=='. 349 | 350 | The result of a comparison operator is a boolean value (true or false). 351 | For example: 352 | 353 | 3 < 4 is true. 354 | 1 + 1 === 3 is false. 355 | */ 356 | 357 | // TODO: So now we have 2 functions from the previous task - add and subtract. 358 | // Let's tell the machine to decide which to run depending on the 359 | // arithmetical operator (+,-,/, * etc). 360 | // 361 | // If the operator is '+', we should use the add function, 362 | // else we should use the subtract function. 363 | // 364 | // Step 1 - Create a variable called operator and let it be equal to '+'. 365 | // Step 2 - Create 2 variables with any 2 numbers. 366 | // Step 3 - Create an if/else statement based on what operator we have. 367 | // 368 | // If we have an operator equal to '+', we call the add function with our numbers, 369 | // else we call the subtract function with our numbers. 370 | // 371 | // Don't forget to console.log it to see the result. 372 | 373 | 374 | 375 | 376 | 377 | 378 | // TODO: Change your operator to '-', and check that it calls the 379 | // subtract function instead. 380 | 381 | 382 | 383 | 384 | 385 | 386 | /* 387 | If - Else if - Else 388 | =================== 389 | 390 | Hmm, but what if we have 4 arithmetical operations in our calculator? Well, 391 | we can use an if - else if - else structure. 392 | 393 | Example: 394 | 395 | const number = 7; 396 | if (number > 7) { 397 | console.log('Our number is bigger then 7'); 398 | } else if (number < 7) { 399 | console.log('Our number is smaller then 7'); 400 | } else { 401 | console.log('Our number is equal to 7'); 402 | } 403 | 404 | TIP: We can use any number of 'else if' statements in a row. 405 | The first one which is true is the only one which happens. 406 | */ 407 | 408 | // TODO: Let's create 2 more functions and name them 'divide' and 'multiply'. 409 | 410 | 411 | 412 | 413 | 414 | 415 | // TODO: Then let's extend our 'if else' check that we already created by adding 416 | // 'else if' operator is equal to '+' - call 'add' function, 417 | // 'else if' operator is equal to '/' - call 'divide' function, 418 | // 'else if' operator is equal to '*' - call 'multiply' function 419 | // else console.log - "Sorry, we don't know this operator". 420 | // (Copy it to here and comment out the first version) 421 | 422 | 423 | 424 | 425 | 426 | 427 | /* 428 | Boolean Operators 429 | ================= 430 | Putting an exclamation (!) before a Boolean variable gives 431 | the opposite value. The ! is called a "not" operator when 432 | used this way. 433 | 434 | The result of a comparison is a Boolean value, we can save it to a variable 435 | const bool = (1 < 2); 436 | 437 | Then we can check if 'bool' is true or false by using console.log 438 | 439 | console.log(bool); // This will return true 440 | console.log(!bool); // "not true", therefore returns false 441 | console.log(bool); // The original value isn't affected, still returns true 442 | 443 | We can also assign a Boolean value straight to a variable with the keywords 444 | true and false: 445 | 446 | const aLie = false; 447 | let previousStatement = true; 448 | */ 449 | 450 | // TODO: Try inverting a true or false value and print the result to the console 451 | 452 | 453 | 454 | 455 | 456 | 457 | //////////////////////////////////////////////////////////////////////////// 458 | // Congratulations! You have finished Level 1 of JavaScript Basics! // 459 | // Stand up, stretch your legs, and celebrate your achievement. // 460 | // The next step will be following the instructions in the file level2.js // 461 | //////////////////////////////////////////////////////////////////////////// 462 | -------------------------------------------------------------------------------- /js/level2.js: -------------------------------------------------------------------------------- 1 | // Level 2 2 | 3 | /* 4 | Introduction 5 | ============ 6 | 7 | Welcome to level 2! It is time to interact with HTML. 8 | 9 | Hyper Text Markup Language (HTML) files are the backbone of the internet. 10 | Every website you visit is loaded first as an HTML file. 11 | 12 | We won't talk too much about HTML today. What you need to know is that HTML 13 | files function as a sort of skeleton for your page. Our index.html file 14 | combines all the files from this project together so that you can open them 15 | in your web browser. 16 | 17 | This project has a file called index.html. At the bottom of index.html you 18 | will see the following tag: 19 | 20 | 21 | 22 | That is how you have been running the level1.js file in a browser. Now change 23 | level1.js to point to this file — level2.js. 24 | 25 | Now you are ready to start! 26 | */ 27 | 28 | /* 29 | Arrays 30 | ====== 31 | 32 | An array is an ordered list of values. It can keep any number of values 33 | inside. And also any type of values — Numbers, Strings, Objects, even 34 | other Arrays. 35 | 36 | Example: 37 | 38 | let animals = ['cat', 'dog', 'horse']; 39 | let randomThings = [2, 'book', 'today is Saturday', 10]; 40 | let numbers = [1, 2, 8, 19]; 41 | */ 42 | 43 | // TODO: Create your own array, named favouriteFood, and write in a couple of 44 | // things you like. 45 | 46 | 47 | 48 | 49 | 50 | 51 | /* 52 | Array Length 53 | ============ 54 | 55 | We can easily check how many items we have in our array with a property: 56 | '.length' 57 | 58 | Example: 59 | 60 | let randomThings = [2, 'book', 'today is Saturday', 10]; 61 | console.log(randomThings.length); // We will get 4. 62 | */ 63 | 64 | // TODO: Check how many values you have in your array favouriteFood. 65 | // console.log the result. 66 | 67 | 68 | 69 | 70 | 71 | 72 | /* 73 | Array Usage 74 | =========== 75 | 76 | It's useful to keep all of these values in one place. But what if we want 77 | to use only 1 item from the array? 78 | 79 | We can get them out using 'bracket notation'. Thanks to a guy named Edsger 80 | Dijkstra*, array indices start counting from 0. The usage looks like this. 81 | 82 | Example: 83 | 84 | let randomThings = [2, 'book', 'today is Saturday', 10]; 85 | let firstItem = randomThings[0]; 86 | let secondItem = randomThings[1]; and so on 87 | 88 | * https://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EWD831.html 89 | */ 90 | 91 | // TODO: Get the third element from your array favouriteFood and console.log it. 92 | 93 | 94 | 95 | 96 | 97 | 98 | /* 99 | Changing Values in Arrays 100 | ========================= 101 | 102 | We also can replace values inside of the arrays by assigning a new value to 103 | a specific index. 104 | 105 | Example: 106 | 107 | let animals = ['cat', 'dog', 'horse']; 108 | 109 | // let's replace 'dog' with 'fish' 110 | animals[1] = 'fish'; 111 | 112 | // now our animals array will be ['cat', 'fish', 'horse'] 113 | */ 114 | 115 | // TODO: Take your array favouriteFood and replace the first value 116 | // with anything else. 117 | 118 | 119 | 120 | 121 | 122 | 123 | // TODO: console.log the whole array to check. 124 | 125 | 126 | 127 | 128 | 129 | 130 | // TIP: Don't forget, index positions start from 0! 131 | 132 | /* 133 | Array.push() 134 | ============ 135 | 136 | If you want to add new values to an existing array you can use the method 137 | '.push()'. Push will add a new value to the end of the array. 138 | 139 | Example: 140 | 141 | let animals = ['cat', 'dog', 'horse']; 142 | animals.push('rabbit'); 143 | 144 | // animals will be ['cat', 'dog', 'horse','rabbit'] 145 | */ 146 | 147 | // TODO: Let's extend your list of favouriteFood and add one more value to it. 148 | 149 | 150 | 151 | 152 | 153 | 154 | // TODO: console.log the whole array to check. 155 | 156 | 157 | 158 | 159 | 160 | 161 | /* 162 | Note about constant Arrays 163 | ========================== 164 | 165 | An array is what is known as a "reference type". What this means is that 166 | even if an array is declared (created) using 'const', the values *inside* that 167 | array can still be changed; only the array itself cannot be overwritten. 168 | 169 | Example: 170 | 171 | const animals = ['cat', 'dog', 'horse']; 172 | 173 | // These are both legal, and works the same way as when animals is a variable: 174 | animals[1] = 'fish'; 175 | animals.push('rabbit'); 176 | 177 | // This is illegal, and will return an error the same as changing any constant: 178 | animals = [ 'mouse', 'elephant' ]; 179 | */ 180 | 181 | // TODO: Try creating an array as a constant and modifying the values in it. 182 | 183 | 184 | 185 | 186 | 187 | 188 | // TODO: See what happens if you add something with .push(), change something 189 | // with bracket notation (array[1]) and 190 | // assigning a new whole new array to the constant 191 | 192 | 193 | 194 | 195 | 196 | 197 | /* 198 | Loops 199 | ===== 200 | 201 | People have always been lazy, but sometimes it moves progress forward! We 202 | don't like to repeat the same boring actions again and again, so we look 203 | for ways to avoid it. 204 | 205 | Programming is the same. For example, if I want to print 'JavaScript is 206 | awesome!' 10 times, what are my options? Of course, I can type ten lines of 207 | code repeating the same instruction, but I can also tell the computer to 208 | repeat it instead of me writing it 10 times! 209 | 210 | For this we have loops. 211 | 212 | Each loop should have three main things: 213 | - a starting point 214 | - a condition (finishing point) 215 | - a counter (a step) 216 | 217 | If you miss one of these, you can get into an infinite loop! 218 | 219 | Let's look into different looping structures. 220 | */ 221 | 222 | /* 223 | While Loops 224 | =========== 225 | 226 | 'While' loop will do an action forever until some condition is met. 227 | 228 | Example: 229 | 230 | // starting point 231 | let number = 0; 232 | 233 | while (number < 10) { 234 | // 'less than 10' is a condition (finishing point) 235 | 236 | console.log('JavaScript is awesome!'); 237 | 238 | number = number + 1; 239 | // + 1 is a counter/size of the step 240 | } 241 | */ 242 | 243 | // TODO: Using a 'while loop', tell your computer to log the numbers from 244 | // ten to one. 245 | 246 | 247 | 248 | 249 | 250 | 251 | /* 252 | For Loops 253 | ========= 254 | 255 | For loops are very similar to the 'while loop'. In a for loop, you 256 | declare a counter in the statement. 257 | 258 | Example: 259 | 260 | let i; 261 | for (i = 0; i <= 5; i = i + 1) { // (starting point; condition; step) 262 | console.log('Purr'); 263 | } 264 | */ 265 | 266 | // TODO: Log every 3rd number from three to 22 using a 'for loop'. 267 | 268 | 269 | 270 | 271 | 272 | 273 | /* 274 | Iterating Through Arrays 275 | ======================== 276 | 277 | Now we know about loops, I want to use each value from my animal list 278 | and express my love for each. How shall I do it? 279 | 280 | We can use a 'for loop' to iterate through our array and get each value 281 | from it. 282 | 283 | Note: i++ is another way of writing i = i + 1. 284 | 285 | Example: 286 | 287 | const animals = ['cats', 'dogs', 'horses']; 288 | for(let i = 0; i < animals.length; i++){ 289 | console.log('I love ' + animals[i]); 290 | } 291 | */ 292 | 293 | // TODO: Try it out with your favouriteFood array. 294 | 295 | 296 | 297 | 298 | 299 | 300 | /* 301 | Loops and Logic 302 | =============== 303 | 304 | Let's bring loops together with the if/else statements we learned in 305 | level 1, and make something interesting. 306 | 307 | Let's count from 10 to 0 and log all the numbers. But, when we get to the 308 | middle (5) print 'Woohoo, we are in the middle!'. 309 | 310 | Example: 311 | 312 | for (let i = 10; i >= 0; i = i - 1) { 313 | if (i === 5) { 314 | console.log('WooHoo, we are in the middle!'); 315 | } else { 316 | console.log(i); 317 | } 318 | } 319 | */ 320 | 321 | // TODO: Time has come for a classic exercise — 'FizzBuzz'. 322 | 323 | // Count from 1 to 50 and print the numbers out: 324 | // 325 | // * If a number is a multiple of three, print 'Fizz'. 326 | // * If it's a multiple of 5, print 'Buzz'. 327 | // * If it's a multiple of 3 and 5, print 'FizzBuzz'. 328 | // * For everything else, print the number itself. 329 | 330 | // P.S. You may wish to use arithmetic operator remainder (%): 331 | // It calculates the remainder when dividing. 332 | // 333 | // 10 % 3 = 1 — in 10 we have 3*3 + 1 334 | // 16 % 4 = 0 — in 16 we have 4*4 335 | // 19 % 4 = 3 — in 19 we have 4*4 + 3 etc 336 | 337 | 338 | 339 | 340 | 341 | 342 | //////////////////////////////////////////////////////////////////////////// 343 | // Congratulations! You have finished Level 2 of JavaScript Basics! // 344 | // Stand up, stretch your legs, and celebrate your achievement. // 345 | // The next step will be following up the instructions in level3.js file. // 346 | //////////////////////////////////////////////////////////////////////////// 347 | -------------------------------------------------------------------------------- /js/level3.js: -------------------------------------------------------------------------------- 1 | // Level 3 2 | 3 | /* 4 | Introduction 5 | ============ 6 | 7 | WooHoo, you got so far on your first day! Great! 8 | 9 | But we still have more things for you. First of all, open index.html, and 10 | replace our script from level2.js to our current file — level3.js. 11 | 12 | TIP: If you want to use multiple js files simultaneously, simply add more 13 | script tags. 14 | */ 15 | 16 | /* 17 | Lets talk a little more about HTML, CSS, and how we can interact with them 18 | in JavaScript. 19 | 20 | 21 | Hypertext Markup Language (HTML) 22 | -------------------------------- 23 | As you noticed, HTML is divided into elements that look like this: 24 | 25 |
26 |

27 | 28 | 29 | We call these "tags". Each element on the page has an opening and closing 30 | tag. (NOTE: Some tags are self-closing like , this means we don't 31 | need a matching end tag.) 32 | 33 | The outermost tag in every HTML file is . 34 | 35 | Inside the tag you will find a and a tag. 36 | 37 | In we keep meta information, the page title and links to css files. 38 | contains our actual content. 39 | 40 | For a full list of HTML tags, you can refer to this listing: 41 | http://htmldog.com/references/html/tags/ 42 | 43 | HTML tags may contain attributes: 44 |
45 | 46 | This div has an attribute named 'class' that has a value: 'settings'. 47 | 48 | 49 | Cascading Style Sheets (CSS) 50 | ---------------------------- 51 | CSS describes how HTML elements look. 52 | 53 | CSS files consist of 'declaration blocks'. Each declaration block is 54 | composed of a selector and a set of visual style rules. A declaration looks 55 | like this: 56 | 57 | [selector] { 58 | style-name: value; 59 | style-name: value; 60 | style-name: value; 61 | } 62 | 63 | Selectors specify which elements the visual styles are applied to. 64 | 65 | The most basic selectors refer to elements by their tag-name. They look 66 | like this: 67 | 68 | body { 69 | background-color: white; 70 | } 71 | 72 | Selectors can also refer to elements by their class attribute like this: 73 | 74 | .settings { 75 | margin: 0; 76 | } 77 | 78 | or IDs, like this: 79 | 80 | #logo { 81 | text-align: center; 82 | } 83 | 84 | The list of css properties is huge, you can read more here, if you're 85 | interested: 86 | https://www.w3.org/TR/CSS21/propidx.html 87 | 88 | Don't worry, you don't need to remember all of this immediately! 89 | */ 90 | 91 | 92 | /* 93 | Phew, lots of new things. Let's come back to JavaScript and see how we can 94 | interact with HTML. 95 | */ 96 | 97 | 98 | /* 99 | Accessing Elements 100 | ================== 101 | 102 | Document Object Model (DOM) 103 | --------------------------- 104 | The DOM is the JavaScript representation of the active HTML file. The DOM 105 | is available under a special global variable called 'document'. We can get 106 | specific nodes (page elements) with the DOM method: '.querySelector'. 107 | 108 | Let's get our twitter link from the page. 109 | 110 | Example: 111 | 112 | const ourTwitter = document.querySelector('.twitter'); 113 | 114 | // We can store page elements in variables, just like any other value! 115 | // However, note that a page element is an object, which is a "reference 116 | // type" just like arrays (see level 2). That means you can change 117 | // attributes and properties of the element, but not the variable itself. 118 | // You will see this in action in this section. 119 | */ 120 | 121 | // TODO: Now it's your turn — get the h1 tag from the page and store it into a 122 | // variable named ourTitle. 123 | // console.log it and see what you get! 124 | 125 | 126 | 127 | 128 | 129 | 130 | /* 131 | Getting Similar Elements 132 | ======================== 133 | 134 | We also can get all elements with the same tag. In our footer, we have an 135 | unordered list (