diff --git a/README.md b/README.md index 423710fec..4a382bc15 100644 --- a/README.md +++ b/README.md @@ -2,40 +2,26 @@ # HackYourJavaScript - - Here you can find course content and homework for the JavaScript 1,2 and 3 modules |Week|Topic|Read|Homework|Review| |----|-----|----|--------|------| -|0.|Preparation for your first JavaScript session|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)|-| -|1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
• Intro JavaScript (What is it, where can you use it for)
• Variables [var, let, const]
• Basic Data types [Strings, Numbers, Arrays, Booleans]
• Operators|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) | [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)| -|2.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)| -|3.|• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week3/REVIEW.md)| -|4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md)|Review| -|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week5/REVIEW.MD)| -|6.|• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review| -|7.|• Third Git Session (Git Workflow :muscle:)
• Map, reduce, filter
• Arrow functions|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week7/REVIEW.md)| -|8.|• (re)writing data structures (in JSON)
• Closures
• Promises
|[Reading Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)|[Homework Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/MAKEME.md)|Review| -|9.| • Object Literals (and other patterns)
TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/REVIEW.md)| - +|0.|Preparation for your first JavaScript session|[Pre-reading](/Week0/README.md)|-|-| +|1.|Git Session with Unmesh|[Reading Week 1](/Week1/README.md) | [Homework Week 1](/Week1/MAKEME.md)|[Review](/Week1/REVIEW.md)| +|2.|• Intro JavaScript (What is it, where can you use it for)
• Variables [var, let, const]
• Basic Data types [Strings, Numbers, Arrays, Booleans]
• Operators
• Naming conventions|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Review](/master/Week2/REVIEW.md)| +|3.|• Git work flow :smiling_imp:
• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Scope|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|[Review](/Week3/REVIEW.md)| +|4.|• Capturing user input

• Events • Basic DOM manipulations[img src, innerHTML]
• Code debugging using the browser
• Code commenting
• Structuring code files |[Reading Week 4](/Week4/README.md)|[Homework Week 4](/Week4/MAKEME.md)|Review| +|5.|• Functions + JSON/Arrays
• Array Manipulations
• JSON
• Map and filter
• Arrow functions |[Reading Week 5](/Week5/README.md)|[Homework Week 5](/Week5/MAKEME.md)|[Review](/Week5/REVIEW.MD)| +|6.|• Closures
• Scope
• Callbacks|[Reading Week 6](/Week6/README.md)|[Homework Week 6](/Week6/MAKEME.md)|[Review](/Week6/REVIEW.md)| +|7.|• Object Oriented Programming
• Code flow (order of execution)
• Async VS Sync|[Reading Week 7](/Week7/README.md)|[Homework Week 7](/Week7/MAKEME.md)|[Review](/Week7/REVIEW.md)| +|8.|• Structure for a basic SPA
• XHTTP Requests
• API calls|[Reading Week 8](/Week8/README.md)|[Homework Week 8](/Week8/MAKEME.md)|Review| +|9.|• (re)writing data structures (in JSON)
• Promises|[Reading Week 9](/Week9/README.md)|[Homework Week 9](/Week9/MAKEME.md)|[Review](/Week9/REVIEW.md)| __Kind note:__ We expect you to __always__ come prepared to the class on Sunday. -## Module goals: - -### Week 1-3: -A basic program with multiple functions (reacting to user input) - -### Week 4-6: -A tool capable of loading a JSON file and representing it in the DOM - -### Week 7-9: -A web app with external data source using at least one API 《〠_〠》 - ### Overall -A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentals) and research/ ask for help (Slack!) with the concepts that are not entirely clear. +A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](/fundamentals) and research/ ask for help (Slack!) with the concepts that are not entirely clear. diff --git a/Week0/README.md b/Week0/README.md index dfef98351..829795be4 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -2,36 +2,12 @@ ``` In week one we will discuss the following topics: -• The first part of the day Unmesh will talk about CLI (Command Line Interface) -• Intro JavaScript (What is it, where can you use it for) -• Variables [var, let, const] -• Basic Data types [Strings, Numbers, Arrays, Booleans] -• Operators +• Git ``` +### Here are resources that we like you to read as a preparation for the coming lecture. -## How to get started -1. Download and install the latest Current version of NodeJS - from https://nodejs.org/en/download/current/ -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.8.0 -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](../VSCodeTips/README.md) for more information. - -### Here are resources that we like you to read as a preparation for the coming lecture: - -Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): - -Only watch the below chapters: - -0. Introduction -1. Programming Basics -2. Core Programming Syntax -3. Variables and Data Types - -- Read this ~ http://speakingjs.com/es5/ch01.html read up to and including the *Strings* chapter (it’s okay if you don’t understand all of it yet, we will cover these concepts in class as well. Do make sure to write or document the questions you have so we can discuss them in class) - -- 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 [review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) of the upcoming lecture. - -_Please go through the material and come to class prepared!_ +- In you next lecture **Unmesh** will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals. +- Please watch [Up Running with Bash Scripting](https://www.lynda.com/Bash-tutorials/Up-Running-Bash-Scripting/142989-2.html) +as a recap on the cli classes you have had (1 hour and 25 min). +- Please watch the first 5 chapters of the [Git essential training](https://www.lynda.com/Git-tutorials/Git-Essential-Training/100222-2.html) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 67bfb7459..5c3fa05a5 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,183 +1,46 @@ ## Homework week 1: ->[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) you find the readings you have to complete before the second lecture. - -## Before you start with the homework: - -1. Go through the review of [week 1](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) -2. Watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though). -3. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): - 0. Introduction - 1. Programming Basics - 2. Core Programming Syntax - 3. Variables and Data Types - -## Step 1: Command Line - -_Deadline Tuesday_ - ->We covered a bit of command line usage in the first class and got a program running which is great. If you need a refresher for the command line please have a look here: https://github.com/HackYourFuture/CommandLine - -1. Create a `.js` file that prints `Hello` when you run it from the command line. (Hint: `node` is the program that can run your JavaScript files.) - ``` -Write commands to do following: -1. create a directory. Enter a directory. Create an empty file named blank. - 2. Then write the content `"Hello"` five times to the file greetings.txt. - Then copy the file greetings.txt and paste its contents into 1.txt, 2.txt, 3.txt, 4.txt and 5.txt. - 3. Then write the text "cat" to pets.txt - Then append the text "dog" to pets.txt - Then append the text "hamster" to pets.txt - 4. Then write the text "cat" to commands.txt - Then append the text "ls" to commands.txt - Then append the text "pwd" to commands.txt - 5. Then find unique strings from these two files pets.txt and commands.txt - and store the unique strings in lovelyCommands.txt +Topics discussed in class this week: +• Git ``` +>[Here](/Week1/README.md) you find the readings you have to complete before the fifth lecture. -## Step 2: Feedback - -_Deadline Wednesday_ - -Provide feedback on the HTML-CSS assignments (week 3) of one of your fellow students. You will be assigned to one of the assignments by the class lead of this week. +## Step 1: Share a useful resource -## Step 3: JavaScript +_Deadline Monday_ -_Deadline Thursday_ +All share a video or a resource (this can be a drawing, article or a pod cast) that was helpful for you the last few weeks with learning JavaScript. Please share this in the channel of your class in Slack. Also write as small note about what the resource i about and why you think it's so helpful (you can share more than one if you like). -> 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. All these +## Step 2: Feedback -1. Write a `console.log` statement saying "Hello World!" for each language that you know. +_Deadline Monday_ -For example: -``` -Halo, dunia! // Indonesian -Ciao, mondo! // Italian -Hola, mundo! // Spanish -``` - -2. Consider the following code: -``` -console.log('I'm awesome'); -``` -2.1 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. - 3.1 First, _declare_ your variable `x`. -
3.2 Add a console.log statement that explains 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 Now 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 - // TODO -> here you declare your variable - console.log('the value of x will be: whateverYouThinkItWillLog'); - // TODO -> log the actual value of x - // TODO -> here you initialize your variable - console.log('the value of x will be: whateverYouThinkItWillLog'); - // 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 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 - console.log('the value of my string will be: whateverYouThinkItWillLog'); - // TODO -> log the actual value of the string to the console - // TODO -> assign a new value to your variable x - console.log('the value of my string will be: whateverYouThinkItWillLog'); - // TODO -> log the actual value of the string to the console - ``` - -5. How do you round the number 7.25, to the nearest integer? - 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 (you can decide on how to call it yourself, but read on a bit here and see if you can find a good name that exactly describes what this variable will hold). -
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 -
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 -
7.1 Let's consider the following string: `let myString = "this,is,a,test"`. -
7.2 Add the string to your file and console.log it. -
7.3 Find a way to get the length of `myString`. -
7.4 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 - ```js - let foo = 3; - console.log('The value of my variable foo is: ' + foo); - ``` -
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: - -```js -let x = 9; -let y = 'Hello'; - -if () { - console.log('SAME TYPE'); -} -// TODO -> add a way of giving feedback if your variables don't have the same type -``` +Give one of your fellow students in Github feedback about their homework of the previous week: create an issue in their repo, telling them what they did great and what they can improve. -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. +Step3 -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's in which you show that you understand the concepts (just like you've done in the above assignments). +## Step 3: Git homework -### Step 4: **Some freeCodeCamp challenges (10 hours):** +_Deadline Wednesday_ -Deadline Saturday_ +Git homework for this week: -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). +Pair up with another student in your class. The homework requires two people to work together. Let us call them admin and user. -### How to hand in Homework: -``` -steps: -• Create a Github account -• Create a new repository (name it something like hyf-javascript1) make sure you select the option: initialize with README -• inside this repository create a folder "week1" -• Upload the files you created on your computer inside the week1 folder, write a description for this “commit” -• Open the file in your README to check if this all worked - -• 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. -``` +1. admin creates a new repository on github called “animals” (without quotes). +2. admin adds a file called “zoo.txt” with some animal 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 a 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 the repository) +10. admin submits the link to his github repository (named animal), where unmesh should be able to see the collaborator’s (i.e. user’s) branch along with his commits. -### 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. +Note: -:star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/REVIEW.md) (work in progress):star: +The *user* is *not supposed to fork* the admin’s repository. *admin* is supposed to add user as a collaborator and *user* should just *clone* the repository (i.e. *user* will only have the local copy of the repository). Only *admin* will have the *github* server copy of the repository. Of course, admin will have its local copy of the repository too. diff --git a/Week1/README.md b/Week1/README.md index a306a7fa3..6946d5257 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -2,33 +2,36 @@ ``` In week two we will discuss the following topics: -• Loops (for/while) -• Functions -• Advanced data types [Objects] -• Conditions (if/else statements) -• Statements vs Expressions +• Intro JavaScript (What is it, where can you use it for) +• Variables [var, let, const] +• Basic Data types [Strings, Numbers, Arrays, Booleans] +• Operators • Naming conventions ``` -### Here are resources that we like you to read as a preparation for the coming lecture: +## 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](../VSCodeTips/README.md) for more information. + +## Here are resources that we like you to read as a preparation for the coming lecture: Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): -
4. Writing Conditional Code -
5. Modular Code -
6. Iteration: Writing Loops -
7. More About Strings -
8. Collections -
11. When Things Go Wrong - -- '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 - -### Review -- Go through the review of [week 1](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) -- Go through the review of [week 2](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) + +Only watch the below chapters: + +0. Introduction +1. Programming Basics +2. Core Programming Syntax +3. Variables and Data Types + +- Read this ~ http://speakingjs.com/es5/ch01.html read up to and including the *Strings* chapter (it’s okay if you don’t understand all of it yet, we will cover these concepts in class as well. Do make sure to write or document the questions you have so we can discuss them in class) + +- 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 [review](/Week2/REVIEW.md) of the upcoming lecture. :star: _Please go through the material and come to class prepared!_ + diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 455b3d64e..8c1e02a24 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,180 +1,166 @@ ## Homework Week 2 ->[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md) you find the readings you have to complete before the third lecture. - -## Step 0: Feedback - -_Deadline Monday_ - -Provide feedback to step 1 and step 3 of the homework of last week to one of your fellow students. You will be assigned to one of the assignments by the class lead of this week. +``` +Topics discussed in class this week: +• Intro JavaScript (What is it, where can you use it for) +• Variables [var, let, const] +• Basic Data types [Strings, Numbers, Arrays, Booleans] +• Operators +``` -## Step 1: Recap/Read +>[Here](/Week1/README.md) you find the readings you have to complete before the second lecture. -- Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/) -- Go through the review of [last week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) -- Go through the review of [this week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) +## Before you start with the homework: -## Step 2: Watch +1. Go through the review of [week 1](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) +2. Watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though). +3. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): +
0. Introduction + 1. Programming Basics + 2. Core Programming Syntax + 3. Variables and Data Types -1. If you haven't done already, watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though). -2. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): -
4. Writing Conditional Code -
5. Modular Code -
6. Iteration: Writing Loops -
7. More About Strings -
8. Collections -
11. When Things Go Wrong -## Step 3: Rover the Robot +## Step 2: Feedback -Go and try out this cool game: http://hyf-robot.herokuapp.com/index.html, there are different levels, see how far you can get! +_Deadline Wednesday_ +Provide feedback on the HTML-CSS assignments (week 3) of one of your fellow students. You will be assigned to one of the assignments by the class lead of this week. -## Step 4: JavaScript +## Step 3: JavaScript _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 - -*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. Create a function that takes 3 arguments and returns the sum of the three arguments. - -2. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example. - -3. Create an object and a function that takes the object as a parameter and prints out all of its names and values. - -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)` - -5. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`? - - ```js - if (3 === 3) { - console.log("true") - } else { - console.log("false") - } - ``` - -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" - -7. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more. - -8. How do you get the third element from that list? - -9. Change the function `vehicle` to use the list of question 7. So that `vehicle("green", 3, 1)` prints "a green new caravan". - -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.) - -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? - -12. Create an empty object. - -13. Create an object that contains the teachers that you have had so far for the different modules. - -14. Add a property to the object you just created that contains the languages that they have taught you. +> 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. -15. We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it. +1\. Write a `console.log` statement saying "Hello World!" for each language that you know. - ```js - function foo(func) { - // What to do here? - } - - function bar() { - console.log('Hello, I am bar!'); - } - - foo(bar); - ``` - - -16. Write some code to test two arrays for equality using `==` and `===`. Test the following: - - ```js - let x = [1,2,3]; - let y = [1,2,3]; - let z = y; - ``` - - What do you think will happen with `x == y`, `x === y` and `z == y` and `z == x`? Prove it! - - > Don't cheat! Seriously - try it first. - +For example: +``` +Halo, dunia! // Indonesian +Ciao, mondo! // Italian +Hola, mundo! // Spanish +``` - 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. +2\. Consider the following code: +``` +console.log('I'm awesome'); +``` +2\.1 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. - More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript). +3\. Declare a variable `x` and initialize it with an integer. +3\.1 First, _declare_ your variable `x`. +3\.2 Add a console.log statement that explains 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 Now 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 + // TODO -> here you declare your variable + console.log('the value of x will be: whateverYouThinkItWillLog'); + // TODO -> log the actual value of x + // TODO -> here you initialize your variable + console.log('the value of x will be: whateverYouThinkItWillLog'); + // 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 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 + console.log('the value of my string will be: whateverYouThinkItWillLog'); + // TODO -> log the actual value of the string to the console + // TODO -> assign a new value to your variable x + console.log('the value of my string will be: whateverYouThinkItWillLog'); + // TODO -> log the actual value of the string to the console +``` -17. Take a look at the following code: +5\. How do you round the number 7.25, to the nearest integer? +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. +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 (you can decide on how to call it yourself, but read on a bit here and 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* +7\.1 Let's consider the following string: `let myString = "this,is,a,test"`. +7\.2 Add the string to your file and console.log it. +7\.3 Find a way to get the length of `myString`. +7\.4 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 + ```js + let foo = 3; + console.log('The value of my variable foo is: ' + foo); + ``` +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: - ```js - let o1 = { foo: 'bar' }; - let o2 = { foo: 'bar' }; - let o3 = o2; +```js +let x = 9; +let y = 'Hello'; - ``` +if () { + console.log('SAME TYPE'); +} +// TODO -> add a way of giving feedback if your variables don't have the same type +``` - Show that changing `o2` changes `o3` (or not) and changing `o1` changes `o3`(or not). - - Does the order that you assign (`o3 = o2` or `o2 = o3`) matter? +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. -18. What does the following code return? (And why?) +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's in which you show that you understand the concepts (just like you've done in the above assignments). - ```js - let bar = 42; - typeof typeof bar; - ``` +## Step 4: **Some freeCodeCamp challenges (10 hours):** - -> ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily. +_Deadline Saturday_ -## Step 5: **Finish basic freeCodeCamp challenges:** +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). -_Deadline Saturday_ +## Step 5: Read before next lecture -Go back to FreeCodeCamp, start where you left of and finish the rest of the Basic JavaScript challenges. +_Deadline Sunday morning_ -Please make sure you REALLY understand the exercises below: -- https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript -- https://www.freecodecamp.com/challenges/store-multiple-values-in-one-variable-using-javascript-arrays -- https://www.freecodecamp.com/challenges/build-javascript-objects -- https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object -- https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object +Go trough the reading material in the [README.md](/Week1/README.md) to prepare for your next class +### How to hand in Homework: ``` -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. +• 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. ``` -:star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/REVIEW.md) (work in progress):star: - - +:star: Additional resources and review: [here](/Week1/REVIEW.md):star: diff --git a/Week2/README.md b/Week2/README.md index 56f7cd01a..6bb3ed5c5 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -2,33 +2,40 @@ ``` In week three we will discuss the following topics: -• CLI (Command Line Interface) -• Closures -• Scope -• Array Manipulations -• Basic DOM manipulations [img src, innerHTML] -• Code commenting +• Git work flow +• Advanced data types [Objects] +• Conditions +• Statements vs Expressions +• Loops (for/while) +• Functions ``` -### Here are resources that we like you to read as a preparation for the coming lecture. +### Here are resources that we like you to read as a preparation for the coming lecture: -- [Closures](http://javascriptissexy.com/understand-javascript-closures-with-ease/) -- [MDN Closures](https://developer.mozilla.org/en/docs/Web/JavaScript/Closures) -- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) +Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): +
4. Writing Conditional Code +
5. Modular Code +
6. Iteration: Writing Loops +
7. More About Strings +
8. Collections +
11. When Things Go Wrong +## Read +- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) -### Refresher: -* Objects (*important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more*):
-Chapters 70-71, 75 +## 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 +#### 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 -- Go through the review of [week 1](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) -- Go through the review of [week 2](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) -- Go through the review of [week 3](https://github.com/HackYourFuture/JavaScript/blob/master/Week3/REVIEW.md) +- Go through the review of [week 1](/Week1/REVIEW.md) +- Go through the review of [week 2](/Week2/REVIEW.md) _Please go through the material and come to class prepared!_ - - - - diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 6eeaaf04a..095b3f425 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -1,34 +1,53 @@ ## Homework Week 3 ->[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/README.md) you find the readings you have to complete before the fourth lecture. +``` +Topics discussed in class this week: +• Git work flow +• Advanced data types [Objects] +• Conditions +• Statements vs Expressions +• Loops (for/while) +• Functions +``` -Go here to see the [Git Homework](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md) +>[Here](/Week2/README.md) you find the readings you have to complete before the third lecture. -## Step 0 review: -- Go through the review of [the first week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) (Work in progress, update this week :wrench:) -- Go through the review of [the second week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) (work in progress, update this week :nut_and_bolt:) -- Go through the review of [the third week](https://github.com/HackYourFuture/JavaScript/blob/master/Week3/REVIEW.md) +## Step 0: Feedback +_Deadline Monday_ -## Step 1: Implement feedback +Provide feedback to step 1 and step 3 of the homework of last week to one of your fellow students. You will be assigned to one of the assignments by the class lead of this week. -_Deadline Monday_ +## Step 1: Recap/Read -Your fellow students have provided you with feedback in Trello. Your teachers have provided you with feedback in issues in Github. +- Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/) +- Go through the review of [last week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) +- Go through the review of [this week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) -- Implement both feedback from Trello and Github. -- Check on one of your fellow students code and issues and see if her or she implemented their feedback correctly. If there are some things that can be improved make an issue suggesting further improvements. If you think that the feedback has been implemented correctly create a issue saying something like: "nice work you can clear your issues". +## Step 2: Watch -## Step 2: Reorganize your Github +1. If you haven't done already, watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though). +2. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): +
4. Writing Conditional Code +
5. Modular Code +
6. Iteration: Writing Loops +
7. More About Strings +
8. Collections +
11. When Things Go Wrong -_Deadline Monday_ +## Step 3: Rover the Robot -Your Github should contain two repositories called hyf-javascript1 and hyf-commandline . Inside the JavaScript repository you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Ty and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a `.js` extension. +Go and try out this cool game: http://hyf-robot.herokuapp.com/index.html, there are different levels, see how far you can get! -## Step 3: String and Array challenges +## Step 4: String and Array 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 + +*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!** 1\.1 Let's consider the following string: `let myString = "hello,this,is,a,difficult,to,read,sentence"` 1\.2 Add the string to your file and console.log it. @@ -54,59 +73,112 @@ let favoriteAnimals = ['blowfish', 'capricorn', 'giraffe']; 2\.9 Now if unlike Jim, you don't like meerkats 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 to the console. Add a message so it says: "The item you are looking for is at index: " (here you should show the index of the item) -## Step 4: Custom DOM manipulation challenge :mortar_board: +## More JavaScript :tada: -_Deadline Saturday_ +1. Create a function that takes 3 arguments and returns the sum of the three arguments. -1. Open a new js file and start by declaring an array that contains 10 strings. These strings should be of book titles you have read (or made up) and be lowercase without spaces or special characters so that you can use these later as Id's. (Example: Harry Potter's - The Chamber of Secrets -> `harry_potter_chamber_secrets`). +2. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example. -2. Create a basic html file called index.html and use it to load the js file, confirm the console.log show the array. (This is for debugging and making sure everything is in order. Delete it later when you're done :)) +3. Create an object and a function that takes the object as a parameter and prints out all of its names and values. -3. Make a function (or functions) that generate a `ul` with `li` elements for each book ID in the array using a for loop. +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)` -4. Make an object containing information for each book. Each item (object) in this object should have the book ID you thought up in point 1 as a key, and it should have at least the following fields: title, language and author. +5. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`? -5. Now change the function you used to display the book ID's in a list to take the actual information about the book from the object and display that. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title. + ```js + if (3 === 3) { + console.log("true") + } else { + console.log("false") + } + ``` -6. Beautify your html page with css, add sources and alts to each of the images. - -7. Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. `{"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}`). Now loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before_) +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" -``` -How to hand in your homework: -• Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week3" first. -• Upload your homework files inside the week3 folder and write a description for this “commit”. -• Your hyf-javascript1/week3 should now contain an index.html, main.css and a script.js file (and the images folder) -• Place the link to your repository folder in Trello. -``` +7. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more. -## Step 5: **FreeCodeCamp challenges:** +8. How do you get the third element from that list? -_Deadline Saturday_ +9. Change the function `vehicle` to use the list of question 7. So that `vehicle("green", 3, 1)` prints "a green new caravan". + +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.) + +> 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. + +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? + +12. Create an empty object. -- https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables -- https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function -- https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor -- https://www.freecodecamp.com/challenges/make-object-properties-private +13. Create an object that contains the teachers that you have had so far for the different modules. +14. Add a property to the object you just created that contains the languages that they have taught you. -And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range +15. Write some code to test two arrays for equality using `==` and `===`. Test the following: + + ```js + let x = [1,2,3]; + let y = [1,2,3]; + let z = y; + ``` -### :boom: Bonus homework :boom: -the Bonus homework for this week (for those of you want an extra challenge) do the following: + What do you think will happen with `x == y`, `x === y` and `z == y` and `z == x`? Prove it! + + > Don't cheat! Seriously - try it first. + -- Sign up on codewars.com -- In you account setting under “clan” write “Hack Your Future” -- Go do the challenges in the following playlist: https://www.codewars.com/collections/fun-fun-fundamentals + 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. -Codewars is really a lot of fun, and you can compete against each other who has the most points :trollface: -it’s a great way to really practice JavaScript a lot in various problems. + More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript). -Please note, there are various challenges all sorted on difficultly called KIU. Kiu 8 is the easiest, Kiu 1 is the hardest, we expect you to do challenges around level 8, 7 maybe. -enjoy! +16. Take a look at the following code: -:star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/REVIEW.md) (work in progress):star: + ```js + let o1 = { foo: 'bar' }; + let o2 = { foo: 'bar' }; + let o3 = o2; + ``` + Show that changing `o2` changes `o3` (or not) and changing `o1` changes `o3`(or not). + + Does the order that you assign (`o3 = o2` or `o2 = o3`) matter? + +17. What does the following code return? (And why?) + + ```js + let bar = 42; + typeof typeof bar; + ``` + + +> ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily. + +## Step 7: **Finish basic freeCodeCamp challenges:** + +_Deadline Saturday_ + +Go back to FreeCodeCamp, start where you left of and finish the rest of the Basic JavaScript challenges. + +Please make sure you REALLY understand the exercises below: +- https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript +- https://www.freecodecamp.com/challenges/store-multiple-values-in-one-variable-using-javascript-arrays +- https://www.freecodecamp.com/challenges/build-javascript-objects +- https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object +- https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object + +## Step 8: Read before next lecture + +_Deadline Sunday morning_ + +Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class + +``` +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. +``` +:star: Additional resources and review: [here](/Week2/REVIEW.md):star: \ No newline at end of file diff --git a/Week3/README.md b/Week3/README.md index 413fb2d0d..5962c3da3 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -1,29 +1,20 @@ # Reading material for the fourth lecture: ``` -In week four we will discuss the following topics: -• Git -• JSON +In week three we will discuss the following topics: +• Capturing user input +• Basic DOM manipulations[img src, innerHTML] • Code debugging using the browser -• Functions + JSON/Arrays -• Code flow (order of execution) -• (capturing user input) +• Events +• Code commenting • Structuring code files ``` -### Here are resources that we like you to read as a preparation for the coming lecture. - -- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN) -- In you next lecture **Unmesh** will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals. - Chrome DevTools [Debugging](https://developers.google.com/web/tools/chrome-devtools/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3) ### A Refresher from some previous covered topics: Links to MDN (Mozilla Developer Network) topics: - -- [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) -- [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) -- [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) - [Arguments object](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments) - [Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 2e080dc1e..77b0892e2 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -1,48 +1,98 @@ # Homework Week 4 ->[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/README.md) you find the readings you have to complete before the fifth lecture. +``` +Topics discussed in class this week: +• Capturing user input +• Basic DOM manipulations [img src, innerHTML] +• Code debugging using the browser +• Code commenting +• Structuring code files +• Scope +• State +``` + +>[Here](/Week3/README.md) you find the readings you have to complete before the fourth lecture. + +## Step 0: Make a small dance +Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: + +## Step 0: review +- Go through the review of [the first week](/Week1/REVIEW.md) +- Go through the review of [the second week](/Week2/REVIEW.md) +- Go through the review of [the third week](/Week3/REVIEW.md) + +## Step 1: Implement feedback + +_Deadline Monday_ + +Your fellow students have provided you with feedback in Trello. + +- Implement both feedback from Trello and Github. +- Check on one of your fellow students code and issues and see if her or she implemented their feedback correctly. If there are some things that can be improved make an issue suggesting further improvements. If you think that the feedback has been implemented correctly create a issue saying something like: "nice work you can clear your issues". + +## Step 2: Reorganize your Github + +_Deadline Monday_ + +Your Github should contain two repositories called hyf-javascript1 and hyf-commandline. Inside the JavaScript repository you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Try and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a `.js` extension. -## Step 0: -Give yourself (or your neighbour) a little tap on the shoulder, you've made it to JS2! :muscle: +## Step 3: Custom DOM manipulation challenge :mortar_board: -## Step 1: Some Challenges -Let's practice working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.' +_Deadline Saturday_ -## Step 2: Custom challenge -1. Go to https://api.github.com/orgs/HackYourFuture/repos, you will see a list of the repositories our HYF organization has (yes it's a lot of JSON). -2. You can copy the JSON and put it in a string at the top of your `.js` file. Print the name of the 3rd repository in the array to the console. -3. Make a `