diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..79285a5eb --- /dev/null +++ b/LICENSE @@ -0,0 +1,3 @@ +This work is licensed under the Creative Commons Attribution 4.0 International License. +To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/ +or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. \ No newline at end of file diff --git a/README.md b/README.md index 53bcaabde..8626c479e 100644 --- a/README.md +++ b/README.md @@ -20,3 +20,5 @@ A good understanding of all the above mentioned topics. Want to check your Knowl *The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)* + +Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 9b9f693bd..948009865 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -26,18 +26,16 @@ _Deadline Wednesday_ Git homework for this week: -Pair up with another student in your class. The homework requires two people to work together. Let's call them admin and user. - -1. admin creates a new repository on github called “animals” (without quotes). -2. admin adds a file called “zoo.txt” with some animals generally found in a zoo. -3. admin commits and pushes his changes (in master branch). -4. admin adds user as a collaborator (find out how to add a collaborator to a git repository). -5. user clones the repository from admin (find out how to clone a repository. Note that `git init` is not required when you clone a repository). -6. user makes a new branch called user-dev. -7. user adds another file called “pets.txt” with some animals generally found in a home. -8. user commits and pushes his branch to remote. -9. admin pulls the branch crated by user (find out how to pull changes from a repository). -10. admin submits the link to his github repository (named "animals"), where Unmesh should be able to see the collaborator’s (i.e. user’s) branch along with his commits. +1. Pair up with another student in your class. The homework requires two people to work together. Let us call them admin and user. +2. admin creates a new repository on github called "animals" (without quotes). +3. admin adds a file called "zoo.txt" with some animal generally found in a zoo. +4. admin commits and pushes his changes (in master branch) +5. admin adds user as a collaborator (find out how to add a collaborator to a git repository) +6. user clones a repository from admin (find out how to clone a repository. Note that `git init` is not required when you clone a repository) +7. user makes a new branch called user-dev +8. user adds another file called "pets.txt" with some animals generally found in a home. +9. user commits and pushes his branch to remote +10. admin pulls the branch crated by user (find out how to pull changes from the repository) Note: diff --git a/Week1/resources/ASmarterWaytoLearnJavaScript.pdf b/Week1/resources/ASmarterWaytoLearnJavaScript.pdf deleted file mode 100644 index d5f3554f6..000000000 Binary files a/Week1/resources/ASmarterWaytoLearnJavaScript.pdf and /dev/null differ diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index f7939c5dc..796744311 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -31,9 +31,34 @@ Provide feedback on the Git assignments (week 1) of one of your fellow students. _Deadline Thursday_ -> For all the following exercises create a new `.js` file. Try to find a proper name for each file or make a small comment about what it does inside for future reference. +### Preparation -1\. Write a `console.log` statement saying "Hello World!" for each language that you know. +We created a `hyf-javascript1` repository on GitHub during the lecture and cloned it to your laptop. + +- Open your `hyf-javascript1` folder with VSCode. +- Create a subfolder named `week1`. +- For each assignment, create a separate file in the `week1` folder, e.g. `step1.js`, `step2.js` etc. +- Start each file with the line `'use strict;` +- Follow the assignment instructions carefully to write your code. +- Ask clarifications on slack if required. +- Write one file at a time and when done, run your code and make sure that it produces the expected results. To run your code, open a terminal/command window in VSCode and change the current directory to the `week1` folder: + ``` + cd week1 + ``` + + Next, type: + + ``` + node step1 + ``` + + Replace `step1` with the actual name of your file, you do not need to type the `.js` extension. + +- If you have tried hard but are still not able to make your code run as expected, ask for help on slack. + +### Assignments + +**1.** Write a `console.log` statement saying "Hello World!" for each language that you know. For example: @@ -43,7 +68,7 @@ Ciao, mondo! // Italian Hola, mundo! // Spanish ``` -2\. Consider the following code: +**2.** Consider the following code: ```js console.log('I'm awesome'); @@ -51,19 +76,19 @@ console.log('I'm awesome'); Copy the code in your `.js` file and run it. You will see that you will get a SyntaxError. Find a solution for this error. Hint: read the error message carefully, it also gives an indication of where the problem is. -3\. Declare a variable `x` and initialize it with an integer, using these exact steps: -3\.1 First, _declare_ your variable `x` (do not initialize it yet). -3\.2 Add a `console.log` statement that explains in words what _you think_ the value of `x` is, like in this example: +**3.** Declare a variable `x` and initialize it with an integer, using these exact steps: +**3.1** First, _declare_ your variable `x` (do not initialize it yet). +**3.2** Add a `console.log` statement that explains in words what _you think_ the value of `x` is, like in this example: ```js // TODO -> here you initialize your variable console.log('the value of my variable x will be: whateverYouThinkItWillLog'); ``` -3\.3 Add a `console.log` statement that logs the value of `x`. -3\.4 Now _initialize_ your variable `x` with an integer. -3\.5 Next, add a `console.log` statement that explains what _you think_ the value of `x` is. -3\.6 Add a `console.log` statement that logs the value of `x`. +**3.3** Add a `console.log` statement that logs the value of `x`. +**3.4** Now _initialize_ your variable `x` with an integer. +**3.5** Next, add a `console.log` statement that explains what _you think_ the value of `x` is. +**3.6** Add a `console.log` statement that logs the value of `x`. Steps to be taken: ```js @@ -75,12 +100,12 @@ Copy the code in your `.js` file and run it. You will see that you will get a Sy // TODO -> log value of x again ``` -4\. Declare a variable `y` and assign a string to it. -4\.1 Write a `console.log` statement in which you explain in words what _you think_ the value of the string is. -4\.2 Now `console.log` the variable `y`. -4\.3 Now assign a new string to the variable `y`. -4\.4 Just like what you did before write a `console.log` statement that explains in words what you think will be logged to the console. -4\.5 Now console.log `y` again. +**4.** Declare a variable `y` and assign a string to it. +**4.1** Write a `console.log` statement in which you explain in words what _you think_ the value of the string is. +**4.2** Now `console.log` the variable `y`. +**4.3** Now assign a new string to the variable `y`. +**4.4** Just like what you did before write a `console.log` statement that explains in words what you think will be logged to the console. +**4.5** Now console.log `y` again. ```js // TODO -> here you declare AND assign your string @@ -91,32 +116,32 @@ Copy the code in your `.js` file and run it. You will see that you will get a Sy // TODO -> log the actual value of the string to the console ``` -5\. How do you round the number 7.25, to the nearest integer (i.e., whole number)? -5\.1 Declare a variable `z` and assign the number 7.25 to it. -5\.2 `console.log` `z`. -5\.3 Declare another variable `a` that has the value of `z` but rounded to the nearest integer. -5\.4 `console.log` `a`. -5\.5 So now we have `z` and `a` find a way to compare the two values and store the highest of the two in a new variable. -5\.6 `console.log` the highest value. - -6\. *Arrays* -6\.1 Declare an empty array. Make sure that the name you choose indicates 'plurality', because an array is capable of containing more than one element. (See [Naming conventions](../fundamentals/naming_conventions.md)). -6\.2 Write a `console.log` statement that explains in words what you think the value of the array is. -6\.3 `console.log` your array. -6\.4 Create an array that has your favorite animals inside (see if you can find a good name that exactly describes what this variable will hold). -6\.5 Log your array. -6\.6 Add a statement that adds Daan's favorite animal ('baby pig') to the *existing array*. -6\.7 Log your new array! - -7\. *More strings* +**5.** How do you round the number 7.25, to the nearest integer (i.e., whole number)? +**5.1** Declare a variable `z` and assign the number 7.25 to it. +**5.2** `console.log` `z`. +**5.3** Declare another variable `a` that has the value of `z` but rounded to the nearest integer. +**5.4** `console.log` `a`. +**5.5** So now we have `z` and `a` find a way to compare the two values and store the highest of the two in a new variable. +**5.6** `console.log` the highest value. + +**6.** *Arrays* +**6.1** Declare an empty array. Make sure that the name you choose indicates 'plurality', because an array is capable of containing more than one element. (See [Naming conventions](../fundamentals/naming_conventions.md)). +**6.2** Write a `console.log` statement that explains in words what you think the value of the array is. +**6.3** `console.log` your array. +**6.4** Create an array that has your favorite animals inside (see if you can find a good name that exactly describes what this variable will hold). +**6.5** Log your array. +**6.6** Add a statement that adds Daan's favorite animal ('baby pig') to the *existing array*. +**6.7** Log your new array! + +**7.** *More strings* Let's consider the following string: `let myString = "this is a test"`. -7\.1 Add the string to your file and console.log it. -7\.2 Find a way to get the length of `myString`. -7\.3 `console.log` the length of `myString`. +**7.1** Add the string to your file and console.log it. +**7.2** Find a way to get the length of `myString`. +**7.3** `console.log` the length of `myString`. -8\. Write a program that checks the types of two variables and prints out `SAME TYPE` if they are the same type. -8\.1 First declare at least four variables and assign them different data types. -8\.2 For each variable write a `console.log` statement that logs the value +**8.** Write a program that checks the types of two variables and prints out `SAME TYPE` if they are the same type. +**8.1** First declare at least four variables and assign them different data types. +**8.2** For each variable write a `console.log` statement that logs the value ```js let foo = 3; console.log('The value of my variable foo is: ' + foo); @@ -124,10 +149,10 @@ Let's consider the following string: `let myString = "this is a test"`. (Curious to know what a `foo` is? Check [this article](https://en.wikipedia.org/wiki/Metasyntactic_variable) on Wikipedia.) -8\.3 Now write a `console.log` statement wherein you first explain in words what you think the _type_ of your variables is. -8\.4 Now use `typeof` to log the actual _type_ of your variables. -8\.5 Now compare the types of your different variables with one another. -8\.6 Make sure to also show a message when the variables you are comparing are not the same type. +**8.3** Now write a `console.log` statement wherein you first explain in words what you think the _type_ of your variables is. +**8.4** Now use `typeof` to log the actual _type_ of your variables. +**8.5** Now compare the types of your different variables with one another. +**8.6** Make sure to also show a message when the variables you are comparing are not the same type. For example: @@ -141,13 +166,35 @@ if (...) { // TODO -> add a way of giving feedback if your variables don't have the same type ``` -9\. If `x` equals 7, and the only other statement is `x = x % 3`, what would be the new value of `x`? -9\.1 Add at least 3 `console.log` statements in which you show that you understand what `%` does. +**9.** If `x` equals 7, and the only other statement is `x = x % 3`, what would be the new value of `x`? +**9.1** Add at least 3 `console.log` statements in which you show that you understand what `%` does. + +**10.** Write a program to answer the following questions: +**10.1** Can you store multiple types in an array? Numbers and strings? Make an example that illustrates your answer. +**10.2** Can you compare infinities? (Not in Eyad's world) - does 6/0 === 10/0? How can you test this? +**10.3** Add `console.log` statements to the above program in which you show that you understand the concepts (just like you've done in the above assignments). + +### How to hand in your homework + +Go over your homework one last time: + +- Does every file run without errors and with the correct results when you run them with Node? +- Does every file start with `'use strict';`? +- Have you used `const` and `let` and avoided `var`? +- Do the variable, function and argument names you created follow the [Naming Conventions](../../fundamentals/blob/master/fundamentals/naming_conventions.md)? +- Is your code well-formatted (see [Code Formatting](../../fundamentals/blob/master/fundamentals/naming_conventions.md))? + +If the answer is 'yes' to all preceding questions you are ready to: + +``` +git add . +git commit -m "added homework week 2" +git push +``` + +Finally, add a link to your repository folder in Trello. + -10\. Write a program to answer the following questions: -10\.1 Can you store multiple types in an array? Numbers and strings? Make an example that illustrates your answer. -10\.2 Can you compare infinities? (Not in Eyad's world) - does 6/0 === 10/0? How can you test this? -10\.3 Add `console.log` statements to the above program in which you show that you understand the concepts (just like you've done in the above assignments). ## Step 4: **Some freeCodeCamp challenges (10 hours):** @@ -155,23 +202,18 @@ _Deadline Saturday_ On freeCodeCamp.com please do the [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises up and until the __"Shopping List"__ exercise (there are some topics we did not cover but you can do it). +> Note that, unfortunately, the freeCodeCamp challenges leave you no choice but to use the older `var` keyword, instead of the more modern `const` and `let` keywords that you should use for the other homework. + +### Hint +If you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a `.js` file and upload them to Github in a repository for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them. + + ## Step 5: Read before next lecture _Deadline Sunday morning_ Go trough the reading material in the [README.md](/Week3/README.md) to prepare for your next class -### How to hand in Homework: -``` -• Create a new repository "hyf-javascript1". Also create a new folder "week1" inside this repository. -• Upload your homework files inside the week1 folder and write a description for this “commit”. -• Your hyf-javascript1/week1 should now contain all your homework files. -• Place the link to your repository folder in Trello. -``` - -### Hint -If you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a `.js` file and upload them to Github in a repository for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them. - :star: Additional resources and review: :star: - [Variables](./../../../../fundamentals/blob/master/fundamentals/variables.md) diff --git a/Week2/README.md b/Week2/README.md index 86eec1464..2b90a937e 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -10,9 +10,15 @@ In week two we will discuss the following topics: ``` ## How to get started + 1. Download and install the *LTS* version of NodeJS - https://nodejs.org/en/download/ -To test that it was installed and running properly, go to your terminal and run the command: node -v You should get the node version printed on your terminal, for example, v8.9.1 -2. Although you are free to make you own choice of text/code editor to use during class and homework, we have good experiences with Microsoft's free VSCode editor, which is supported on Windows, Mac and Linux. Please refer to our [VSCode Tips](./../../../../fundamantals/VSCodeTips/README.md) for more information. +To test that it was installed and running properly, go to your terminal and run the command: + ``` + node -v + ``` + You should get the node version printed on your terminal, for example, `v8.9.1` + +2. Please check the [VSCode Tips](https://github.com/HackYourFuture/fundamentals/tree/master/VSCodeTips/README.md) to ensure that VSCode is installed and configured correctly. ## Here are resources that we like you to read as a preparation for the coming lecture: @@ -29,17 +35,21 @@ Only watch the below chapters: - Read the entire JavaScript Introduction at MDN~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction -- Helpful resource: http://jsbooks.revolunet.com/ (here you can find tons of free JavaScript books online) +:star: You can also already go through the topics of the upcoming lecture. :star: -- The 50 best websites to Learn JavaScript: http://www.codeconquest.com/blog/top-50-websites-to-learn-javascript/ +- [Variables (var, let, const)](../../../../fundamentals/blob/master/fundamentals/variables.md)
+- [Basic Data types (Strings, Numbers, Arrays, Booleans)](../../../../fundamentals/blob/master/fundamentals/values.md)
+- [Operators](../../../../fundamentals/blob/master/fundamentals/operators.md)
+- [Naming conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md) -:star: You can also already go through the topics of the upcoming lecture. :star: +## Optional resources + +These optional resources are not required for the lecture. + +- Helpful resource: http://jsbooks.revolunet.com/ (here you can find tons of free JavaScript books online) +- The 50 best websites to Learn JavaScript: http://www.codeconquest.com/blog/top-50-websites-to-learn-javascript/ -- Intro JavaScript (What is it, where can you use it for) -- [Variables (var, let, const)](./../../../../fundamentals/blob/master/fundamentals/variables.md)
-- [Basic Data types (Strings, Numbers, Arrays, Booleans)](./../../../../fundamentals/blob/master/fundamentals/values.md)
-- [Operators](./../../../../fundamentals/blob/master/fundamentals/operators.md)
-- [Naming conventions](./../../../../fundamentals/blob/master/fundamentals/naming_conventions.md) +--- _Please go through the material and come to class prepared!_ diff --git a/Week2/code_examples/conditional_example_1.js b/Week2/code_examples/conditional_example_1.js deleted file mode 100644 index 821665e90..000000000 --- a/Week2/code_examples/conditional_example_1.js +++ /dev/null @@ -1,33 +0,0 @@ -var code = 1; -let someOtherVariable = 'Hello'; -const PROGRAM_NAME = 'conditional_test1.js'; - -let color = 'BLACK'; -let age = Math.PI; - -console.log(age); -console.log(age = '0'); // What will this line print? -console.log(age == 0); // What will this line print? -// The result of a logical operator like == === < > <= >= || && is a BOOLEAN (true, false) -console.log(age === 0); // What will this line print? -// === checks the TYPE and VALUE of the variable - -if (code === 1) { - console.log("a " + color + ((age = 0 || age > 0) ? " used" : " new") + " car") -}; - -if (code === 1) { - console.log("a " + color + ((age <= 1 || age > 1) ? " used" : " new") + " car") -}; - -// Maybe simpler and easier to read? -if (code == 1) { - var carState; - if (age > 0) { - carState = " used "; - } else { - carState = " new "; - } - console.log("a " + color + carState + " car"); -} - diff --git a/Week2/code_examples/conditional_example_2.js b/Week2/code_examples/conditional_example_2.js deleted file mode 100644 index 2c297291b..000000000 --- a/Week2/code_examples/conditional_example_2.js +++ /dev/null @@ -1,24 +0,0 @@ - -condition = true; -// Conditional block - if (condition) { - // Do this thing if condition is true - console.log('condition is true'); - } else if (condition2) { - // Do this if condition2 is true - console.log('condition2 is true'); - } else { - // finally - end up here - console.log('condition and condition2 are false'); - } - - -// Programmers at some point in their career get LAZY -// They don't want to type so much -// So they make things like vi and shortcuts - -// Here's the shortcut for conditional logic - TRY TO NEVER USE IT - -// condition ? true thing : false thing -let x = 3; -(x > 2) ? console.log('x is greater than 2') : console.log('x is less than or equal to 2'); diff --git a/Week2/code_examples/debug_example.js b/Week2/code_examples/debug_example.js deleted file mode 100644 index 61f5f3d17..000000000 --- a/Week2/code_examples/debug_example.js +++ /dev/null @@ -1,38 +0,0 @@ -// Three ways to declare (and initialize) variables -var code = 1; -let someOtherVariable = 'Hello'; -const PROGRAM_NAME = 'debug_example.js'; - -let color = 'BLACK'; -let age = Math.PI; - -console.log(age); -console.log(age = '0'); // What will this line print? -console.log(age == 0); // What will this line print? -// The result of a logical operator like == === < > <= >= || && is a BOOLEAN (true, false) -console.log(age === 0); // What will this line print? -// // === checks the TYPE and VALUE of the variable -function printCarInfo(code, color, age) { - if (code === 1) { - let carState = ' used'; - if (age === 0) { - carState = ' new'; - } - console.log('a ' + color + carState + ' car'); - }; -} -// What is the difference between '' and "" -// I use ' because I don't have to press SHIFT to get " -printCarInfo(code, color, age); -printCarInfo(1, 'PINKISH BLUE ORANGE(1)', 0); // expect 'a PINKISH BLUE ORANGE(1) new car' -printCarInfo(0, 'PINKISH BLUE ORANGE(2)', 0); // expect nothing -printCarInfo(1, 'Green', 0); // expect 'a Green new car' -printCarInfo(1, 'Green', 1); // expect 'a Green used car' -printCarInfo(1, 'Green', -999999); // -printCarInfo(1, 'Green', 1000000); // -printCarInfo(-1, null, -999999999); // expect nothing -printCarInfo('1', null, -999999999); // expect nothing -printCarInfo(1, null, -999999999); // expect 'a null used car' -printCarInfo(1, undefined, -999999999); // expect 'a undefined used car' - printCarInfo(1); // ?????? WTF ????? expect 'a undefined used car', 'an error', 'an exception' 'a used car' -printCarInfo(2, 'Cyan', 1); // Expect nothing - code is not === 1 diff --git a/Week2/code_examples/initialization_example.js b/Week2/code_examples/initialization_example.js deleted file mode 100644 index 96cc2dc55..000000000 --- a/Week2/code_examples/initialization_example.js +++ /dev/null @@ -1,20 +0,0 @@ -var testValue = ''; -console.log('var testValue = \'\'; gives: ', testValue); - -var testValue = 0; -console.log('var testValue = 0; gives: ', testValue); - -var testValue = null; -console.log('var testValue = null; gives: ', testValue); - -var testValue = undefined; -console.log('var testValue = undefined; gives: ', testValue); - -var testValue; -console.log('var testValue; gives: ', testValue); - -var testValue = ''; -console.log('var testValue = \'\'; gives: ', testValue); - -var someVar = testValue || 'Default'; -console.log('var someVar = testValue || \'Default\' = 0; gives: ', someVar); diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 21d84986b..66c5aafae 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -29,7 +29,7 @@ Provide feedback to the homework of last week to one of your fellow students. Yo - [Naming conventions](./../../../../fundamentals/blob/master/fundamentals/naming_conventions.md) - Go through the topics of this week: - - Git work flow + - [Git work flow](https://github.com/HackYourFuture/Git/blob/master/Lecture-3.md) - [Advanced data types (Objects)](./../../../../fundamentals/blob/master/fundamentals/objects.md) - [Conditional execution](./../../../../fundamentals/blob/master/fundamentals/conditional_execution.md) - [Statements vs Expressions](./../../../../fundamentals/blob/master/fundamentals/statements_expressions.md) @@ -54,16 +54,16 @@ Just watch the 2 min video, you do not have to do the entire JavaScript course ( Go and try out this cool game: [roverjs.com](http://roverjs.com), written by one of our HYF teachers, Joost Lubach. There are different levels, see how far you can get! -## Step 4: String and Array challenges +## Step 4: String, Array and Loop challenges _Deadline Wednesday_ -> For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference +> Create a `week3` folder in your repo `hyf-javascript1`. For each of the following exercises, create a new `.js` file in the `week3` folder with the file name as specified in parentheses in the exercise heading. Remember to start each file with `'use strict';`. *IMPORTANT NOTE* In each assignment write at least two `console.log` statements to verify if your code works correctly. In other words proof that you code works as expected. If you need inspiration look at the steps defined in the assignments from last week. -1\. **Strings!** +### Exercise 1 - Strings! (`strings.js`) Consider the following string: @@ -76,7 +76,7 @@ let myString = "hello,this,is,a,difficult,to,read,sentence"; 1\.3 The commas make that the sentence is quite hard to read. Find a way to remove the commas from the string and replace them with spaces.
1\.4 Log `myString` to see if you succeeded.
-2\. **Arrays!** +### Exercise 2 - Arrays! (`arrays.js`) Consider the following array: @@ -84,97 +84,265 @@ Consider the following array: let favoriteAnimals = ['blowfish', 'capricorn', 'giraffe']; ``` -2\.1 Add a statement that adds Mauro's favorite animal *'turtle'* to the existing array.
-2\.2 Log your new array!
-2\.3 Now add Jim's favorite animal to the array, it's *'meerkat'*, but make sure it will be placed after *'blowfish'* and before *'capricorn'*.
-2\.4 Write a console.log statement that explains in words _you think_ the new value of the array is.
-2\.5 Log your new array!
-2\.6 Log the length of the array, add a message: *'The array has a length of: '* (here you should show the length of the array).
-2\.7 Jason does not like *'giraffe'*, delete this animal from the array.
-2\.8 Again log your new array.
-2\.9 Now if unlike Jim, you don't like *'meerkat'* and you want to delete it from the array, but you don't know the position or the `index` of the item in the array, how can you find it?
-2\.10 Log the index of *'meerkat'*. Add a message so it says: *'The item you are looking for is at index: '* (here you should show the index of the item).
+**2.1** Add a statement that adds Mauro's favorite animal *'turtle'* to the existing array.
+**2.2** Log your new array!
+**2.3** Now add Jim's favorite animal to the array, it's *'meerkat'*, but make sure it will be placed after *'blowfish'* and before *'capricorn'*.
+**2.4** Write a `console.log` statement that explains in words _you think_ the new value of the array is.
+**2.5** Log your new array!
+**2.6** Log the length of the array, add a message: *'The array has a length of: '* (here you should show the length of the array).
+**2.7** Jason does not like *'giraffe'*, delete this animal from the array.
+**2.8** Again log your new array.
+**2.9** Now if unlike Jim, you don't like *'meerkat'* and you want to delete it from the array, but you don't know the position or the `index` of the item in the array, how can you find it?
+**2.10** Log the index of *'meerkat'*. Add a message so it says: *'The item you are looking for is at index: '* (here you should show the index of the item).
+ +### Exercise 3 - Maartje's work (`maartje.js`) + +Below you see a very interesting small insight in Maartje's work (note: the durations are in minutes): + +```js +const monday = [ + { + name: 'Write a summary HTML/CSS', + duration: 180 + }, + { + name: 'Some web development', + duration: 120 + }, + { + name: 'Fix homework for class10', + duration: 20 + }, + { + name: 'Talk to a lot of people', + duration: 200 + } +]; + +const tuesday = [ + { + name: 'Keep writing summary', + duration: 240 + }, + { + name: 'Some more web development', + duration: 180 + }, + { + name: 'Staring out the window', + duration: 10 + }, + { + name: 'Talk to a lot of people', + duration: 200 + }, + { + name: 'Look at application assignments new students', + duration: 40 + } +]; + +const tasks = monday.concat(tuesday); +``` + +Your assignment is to compute how much Maartje has earned by completing these tasks. For some unexplained reason, Maartje only gets paid for tasks that take two hours or more. We don't know what Maartje earns per hour (she won't tell us), so just make up a reasonable number yourself (by the way, she gets paid in Euros). + +When you have computed Maartje's earnings, use a `console.log` statement to print the message (replace the amount by the result of your computation): + +``` +Maartje has earned €123.45 +``` + +You need to do some research on how you can format a number so that it prints with two decimal places. + +In addition to writing code, compute the expected result manually. Use a spreadsheet or pen and paper to compute Maartje's earnings and check it against the result from your code. ## More JavaScript :tada: -1. Create a function that takes 3 arguments and returns the sum of the these arguments. +_Deadline Wednesday_ -2. Create a function named `colorCar` that receives a color, and prints out, *'a red car'* for example. +For each numbered assignment in this list create a separate file, for instance `1-more.js`, `2-more.js`, etc. in the `week3` folder. Remember to start each file with `'use strict';`. -3. Create an object and a function that takes the object as a parameter and prints out all of its properties and values. +**1.** Create a function that takes 3 arguments and returns the sum of the these arguments. Test your function by calling it with three numbers and using `console.log` to print the result. For example: -4. Create a function named `vehicleType` that receives a color, and a code, 1 for car, 2 for motorbike. And prints *'a blue motorbike'* for example when called as `vehicleType("blue", 2)` +```js +// fill in the dots +function sum(...) { + return ...; +} -5. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`? +const result = sum(...); +console.log(result); - ```js - if (3 === 3) { - console.log("yes") - } else { - console.log("no") - } - ``` +// or, in a single line: +// console.log(sum(...)); +``` -6. Create a function called `vehicle`, like before, but takes another parameter called `age`, so that `vehicle("blue", 1, 5)` prints *'a blue used car'* +**2.** Create a function named `colorCar` that receives a `color` argument. It should returns a string, for example`'a red car'` when called with `'red'` as argument. Test your function by calling it, passing a color name as a string and using `console.log` to print the result. -7. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more. +**3.** Create a function called `printObject` that takes an object as a parameter and prints out all of its properties and values. -8. How do you get the third element from that list? +Next, create an object that contains some properties with values. Now call your function and passing the object just created as an argument to test your function. Your function should not make any assumptions about the actual object passed. Instead, you should find a way to obtain the property keys and their values programmatically. -9. Change the function `vehicle` to use the list of question 7. So that `vehicle("green", 3, 1)` prints "a green new bike". +For example: -10. Use the list of vehicles to write an advertisement. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.) +```js +function printObject(obj) { + // Add your code here +} - > Hint, the output should be correct English with all the punctuation in place (that's the challenge). So plurals for the vehicle types, commas followed by a single space, the word and to replace the final comma and closed off by a period. +const person = { + firstName: 'Maartje', + lastName: 'Kruijt', + city: 'Amsterdam' +}; -11. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 10? +printObject(person); +``` -12. Create an empty object. +Output: -13. Create an object that contains the teachers that you have had so far for the different modules. +``` +firstName = Maartje +lastName = Kruijt +city = Amsterdam +``` -14. Add a property to the object you just created that contains the languages that they have taught you. +**4.** Create a function named `vehicleType` that receives a `color`, and a `code`, 1 for 'car', 2 for 'motorbike'. Any code other than 1 or 2 should produce 'unknown vehicle'. Your function should return a string, for example `'a blue motorbike'` when called as `vehicleType('blue', 2)`. Try your function with different values for `color` and `code`. Use a `console.log` to print out each result. -15. Write some code to test two arrays for equality using `==` and `===`. Test the following: +**5.** Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`? - ```js - let x = [1,2,3]; - let y = [1,2,3]; - let z = y; - ``` +```js +if (3 === 3) { + console.log('yes'); +} else { + console.log('no'); +} +``` - What do you think will happen with `x == y`, `x === y` and `z == y` and `z == x`? Prove it! +>Note: If you see a warning from ESLint `Unexpected constant condition.` you can safely ignore it for this particular assignment. But otherwise you should always correct errors and warning flagged by ESLint. - > Don't cheat! Seriously - try it first. +**6.** Copy the `vehicleType` function from assignment **4**, but modify it so that it takes a third parameter called `age`, so that: +```js +console.log(vehicleType('blue', 1, 5)); +``` +prints `'a blue used car'`. + +Note: For this assignment, a car that is at most one year old is still considered `'new'`. - Check out this [Fiddle](http://jsfiddle.net/jimschubert/85M4z/). You need to open your browser’s Developer Tools to see the console output. Press the Run button in the upper right corner to run the code. +**7.** Make a array of vehicles, you can add `'car', 'motorbike'`, `'caravan'`, `'bike'`, or more. - More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript). +Copy the `vehicleType` function from assignment **6** and modify it to use the array just created. When your function is called like this: +```js +console.log(vehicleType('green', 3, 1)); +``` -16. Take a look at the following code: +...it should print `'a green new caravan'`. - ```js - let o1 = { foo: 'bar' }; - let o2 = { foo: 'bar' }; - let o3 = o2; +If `code` is something other than a number between 1 and the length of your vehicle array then the vehicle should be reported as `unknown vehicle`. (Try it!) - ``` +**8.** Create a function called `advertisement` that takes an array of vehicle names as an argument and returns a corresponding advertisement text string, for example: - Show that changing `o2` changes `o3` (or not) and changing `o1` changes `o3`(or not). +```js +function advertisement(vehicleNames) { + // Add your code here +} + +const vehicles = [...]; + +const text = advertisement(vehicles); +console.log(text); +``` + +Example output: + +``` +Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes. +``` - Does the order that you assign (`o3 = o2` or `o2 = o3`) matter? +Copy the array from assignment **7** and call the function you just created, passing the array as an argument. Use `console.log` to print the result. -17. What does the following code return? (And why?) +> Hint, the output should be correct English with all the punctuation in place (that's the challenge). So plurals for the vehicle types, commas followed by a single space, the word and to replace the final comma and closed off by a period. - ```js - let bar = 42; - typeof typeof bar; - ``` +**9.** Copy the code from assignment **7** and add another vehicle to the array. Confirm that your advertisement function now includes the new vehicle in its advertisement text. +**10.** Create a single `.js` file containing the following: -> ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily. +- Declare a variable and initialize it with an empty object. (Just to show that you know what an empty object looks like.) +- Create an array of teachers that you have had so far for the different modules. Each element of the array should be an object that contain properties for the first name and the last name of the teacher. +- Add a property to the objects you just created that contains and array of languages that they have taught you. + +**11.** Write some code to test two arrays for equality using `==` and `===`. Test the following: + +```js +const x = [1, 2, 3]; +const y = [1, 2, 3]; +const z = y; +``` +What do you think will be the result of `x == y`, `x === y` and `z === y` and `z === x`? Prove it! + +> Don't cheat! Seriously - try it first. + +Note: If you see an ESLint error `Expected '===' and instead saw '=='.` then you can ignore it for this assignment. + +Check out the code below (no need to include this code in your homework file, just try and understand the code and play with it, e.g. make a change to one of the arrays or add a value): + +```js +'use strict'; + +const array1 = [4, 8, 9, 10]; +const array2 = [4, 8, 9, 10]; + +function equal(a, b) { + let same = a.length === b.length; + if (same) { + const len = a.length; + for (let i = 0; same && i < len; i++) { + if (a[i] !== b[i]) { + same = false; + } + } + } + + return same; +} + +console.log(equal(array1, array2)); +``` + +More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript). + + +**12.** Copy this code into and run it. + +```js +'use strict'; +const o1 = { foo: 'bar' }; +const o2 = { foo: 'bar' }; +const o3 = o2; + +console.log('o1', o1, 'o2', o2, 'o3', o3); + +o1.foo = 'baz'; +console.log('o1', o1, 'o2', o2, 'o3', o3); + +o2.foo = 'hyf'; +console.log('o1', o1, 'o2', o2, 'o3', o3); +``` + +- Explain why making a change to `o1` does **_not_** affect `o3`. +- Explain why making a changes `o2` **_does_** affect `o3`. + +Add your explanations in a JavaScript comment. + +**13.** What will be the value of `result`? (And why?) Add your explanation in a JavaScript comment. + +```js +const bar = 42; +const result = typeof typeof bar; +``` ## Step 7: **Finish basic freeCodeCamp challenges:** @@ -195,10 +363,24 @@ _Deadline Sunday morning_ Go through the reading material in the [README.md](./../../../../JavaScript2/tree/master/Week1) to prepare for your next class +--- + +## How to hand in your homework: + +Go over your homework one last time: + +- Does every file run without errors and with the correct results when you run them with Node? +- Does every file start with `'use strict';`? +- Have you used `const` and `let` and avoided `var`? +- Do the variable, function and argument names you created follow the [Naming Conventions](../../fundamentals/blob/master/fundamentals/naming_conventions.md)? +- Is your code well-formatted (see [Code Formatting](../../fundamentals/blob/master/fundamentals/naming_conventions.md))? + +If the answer is 'yes' to all preceding questions you are ready to: + ``` -How to hand in your homework: -• Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week2" first. -• Upload your homework files inside the week2 folder and write a description for this “commit”. -• Your hyf-javascript1/week2 should now contain all your homework files. -• Place the link to your repository folder in Trello. +git add . +git commit -m "added homework week 3" +git push ``` + +Finally, add a link to your repository folder in Trello. diff --git a/Week3/README.md b/Week3/README.md index 71df5c72c..f2bed9d61 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -20,32 +20,40 @@ Please watch the following parts of the course, [Programming Foundations Fundame
8. Collections
11. When Things Go Wrong -## Read -- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) +## Arrays -## From the book _A Smarter Way To Learn JavaScript_ please read: -- 'Loops' of [_A Smarter Way To Learn JavaScript_](https://github.com/Sharique-Hasan/SaylaniBatch2-JavaScript/blob/master/A%20Smarter%20Way%20to%20Learn%20JavaScript.pdf) : Chapters 18-20 -- 'Functions' of [_A Smarter Way To Learn JavaScript_](https://github.com/Sharique-Hasan/SaylaniBatch2-JavaScript/blob/master/A%20Smarter%20Way%20to%20Learn%20JavaScript.pdf) : Chapters 35 - 38 -- Functions ~ http://eloquentjavascript.net/03_functions.html -- 'Objects' of [_A Smarter Way To Learn JavaScript_](https://github.com/Sharique-Hasan/SaylaniBatch2-JavaScript/blob/master/A%20Smarter%20Way%20to%20Learn%20JavaScript.pdf) : Chapters 69 - 75 -- 'Conditions' of [_A Smarter Way To Learn JavaScript_](https://github.com/Sharique-Hasan/SaylaniBatch2-JavaScript/blob/master/A%20Smarter%20Way%20to%20Learn%20JavaScript.pdf) : Chapters 10 - 14 -- Program structure ~ http://eloquentjavascript.net/02_program_structure.html +Read the documentation from MDN about arrays: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype). + +Please go through these chapters of _Eloquent JavaScript_ to prepare for your next class. We don't expect you to understand every detail of it on a first reading. + +- [Eloquent JavaScript: Chapter 3 - Functions](http://eloquentjavascript.net/03_functions.html), up until the _Arrow Functions_ section. + +- [Eloquent JavaScript: Chapter 4 - Data Structures: Objects & Arrays](http://eloquentjavascript.net/04_data.html). Unless you are really into statistics, you can skip the following sections: + + * _The Lycanthrope's Log_ + * _Computing Correlation_ + * _The final analysis_ + + Skip these additional sections for now, as they will be covered in later HYF modules. (You are of course free to read them, but we will not cover them in class): + + * _Rest parameters_ + * _Destructuring_ + * _Exercises_ + +- Here is a great [video on pure functions and side effects](https://youtu.be/dZ41D6LDSBg) (6:54 mins). #### Git work flow + - Check out this video of Daan to see how we use Git Workflow to hand in Homework (from now on): https://www.youtube.com/watch?v=-o0yomUVVpU&index=2&list=PLVYDhqbgYpYUGxRdtQdYVE5Q8h3bt6SIA ### Review Review the topics of week 2: -- [Variables](./../../../../fundamentals/blob/master/fundamentals/variables.md) -- [Values](./../../../../fundamentals/blob/master/fundamentals/values.md) -- [Operators](./../../../../fundamentals/blob/master/fundamentals/operators.md) -- [Naming conventions](./../../../../fundamentals/naming_conventions.md) +- [Variables](../../../../fundamentals/blob/master/fundamentals/variables.md) +- [Values](../../../../fundamentals/blob/master/fundamentals/values.md) +- [Operators](../../../../fundamentals/blob/master/fundamentals/operators.md) +- [Naming conventions](../../../../fundamentals/naming_conventions.md) _Please go through the material and come to class prepared!_ - - - -