diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..723ef36f4 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/README.md b/README.md index 0896f13fa..5e3f75cff 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,7 @@ -> If you are following the HackYourFuture curriculum we recommend you to start with module 1: [HTML/CSS/GIT](https://github.com/HackYourFuture/HTML-CSS). To get a complete overview of the HackYourFuture curriculum first, click [here](https://github.com/HackYourFuture/curriculum). - -> Please help us improve and share your feedback! If you find better tutorials -> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript1/pulls). - -# Module #2 - JavaScript 1: Programming Basics (Frontend) - -![JavaScript1](./assets/javascript1.png) +# DEPRECATED - JavaScript 1 +This module has been replace with the JavaScript module, find it [here](https://github.com/HackYourFuture/JavaScript) +``` In this module you'll make a start into wonderful world of programming. We will be using the programming language `JavaScript` to do so. You'll learn about the basic building blocks of programming: `loops`, `functions`, `control flow` and more. Consider these as the ABC's of programming, without them it's impossible to write working software! You'll be learning two main things: @@ -21,6 +16,8 @@ This should be your mindset when you're learning how to think : **I'm learning h ## Before you start! +### 1. Install some new software! + In order to test your JavaScript code, you'll be using software that will execute your files from the command line. This software is called [Node.js](https://nodejs.org/en/download/). Download the Long-Term Support (LTS) version for your specific operating system. - For Windows, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1-x86.msi) @@ -35,6 +32,32 @@ node --version It should show you version `v12.16.1` or higher. +### 2. A new way of submitting homework! + +Starting from this module you'll submit homework in a different way. You will be only using GIT and GitHub and work **like a real developer would**: pushing code from your computer to GitHub and making pull requests! + +Before you start with the homework, make a `fork` of the following repository: [HackYourHomework/JavaScript1](https://www.github.com/hackyourhomework/javascript1). You'll always use the **HackYourHomework** version of the module repository whenever you have to submit your homework. + +Here are the steps to get started: + +1. `fork` the HackYourHomework repository to your personal account. +2. `clone` your forked repository to your computer. +3. Make `GIT` branches for each week. Start at the `master` branch and execute the following (note that they're 3 different commands): + +`console +foo@bar:~$ git branch week1-YOURNAME +foo@bar:~$ git branch week2-YOURNAME +foo@bar:~$ git branch week3-YOURNAME +` + +4. `checkout` to `week1-YOURNAME` +5. Get started with making your homework! + +Here's a video in order that shows you how it's done: [How to Submit Your Homework](https://www.youtube.com/watch?v=CpYARPYGQU8) + +### 3. Presentation module +Besides learing a lot of technical concepts you'll be focussing on the softskills as well. Please have a look at [this](https://github.com/HackYourFuture/presentation-module) RePo for more details. + ## Learning goals In order to successfully complete this module you will need to master the following: @@ -46,33 +69,53 @@ In order to successfully complete this module you will need to master the follow ## How to use this repository -This repository consists of 3 parts: +### Repository content -1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing. -2. `Homework`: this document contains the instructions for each week's homework. -3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well! +This repository consists of 3 essential parts: -After your first class you should start with checking the `reading materials` for that week. So, for the first time it's the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week. +1. `README`: this document contains all the required theory you need to understand **while** working on the homework. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the **first thing** you should start with every week +2. `MAKEME`: this document contains the instructions for each week's homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier. +3. `LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well! -Before you start with the homework, make sure you've made a `fork` of the right repository: [HackYourHomework/JavaScript1](https://www.github.com/hackyourhomework/javascript1). Once you've cloned it to your computer you can proceed by making `GIT` branches for each week. Start at the `master` branch and execute the following (note that they're 3 different commands): +### How to study -```console -foo@bar:~$ git branch week1-YOURNAME -foo@bar:~$ git branch week2-YOURNAME -foo@bar:~$ git branch week3-YOURNAME -``` +Let's say you are just starting out with the JavaScript1 module. This is what you do... + +1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `JavaScript1`, that would be [Week1 Reading](/Week1/README.md) +2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the HTML-CSS module) +3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript1`, that would be [Week1 Homework](/Week1/MAKEME.md) +4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have +5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel +6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others +7. You spend **Monday** and **Tuesday** finalizing your homework +8. **DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor +9. Start the new week by going back to point 1! + +In summary: + +![Weekflow](assets/weekflow.png) + +To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack! + +### Video lectures + +For each module HackYourFuture provides you with video lectures. These are made by experienced software developers who know what they're talking about. The main teacher for this module will be [Uday Khaki](https://hackyourfuture.slack.com/team/U3T5HDP0W): former HackYourFuture student and now successful web developer for several years! + +You can find out more about him here: + +- [@Uday on Slack](https://hackyourfuture.slack.com/team/U3T5HDP0W) -Then execute `git checkout week1` and you can get started! +Learn from Uday in the following playlist of videos he has made for you! (Click on the image to open the link) -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! +HYF Video ## Planning -| Week | Topic | Reading Materials | Homework | Lesson Plan | -| ---- | --------------------------------------------------------------------------------- | ------------------------------ | ------------------------------- | -------------------------------------- | -| 1. | What is JavaScript?, Variables, Data Structures & Naming Conventions | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) | -| 2. | Statements vs. Expressions, Control flow, Loops, Operators, Conditional statement | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W2](/Week1/LESSONPLAN.md) | -| 3. | Functions, Thinking like a programmer I, How JavaScript relates to HTML/CSS | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W3](/Week3/LESSONPLAN.md) | +| Week | Topic | Reading Materials | Homework | Lesson Plan |Presentation module | +| ---- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |-----------| +| 1. | What is JavaScript?, Variables, Data Structures & Naming Conventions | [Reading W1](https://github.com/HackYourFuture/JavaScript1/tree/master/Week1/README.md) | [Homework W1](https://github.com/HackYourFuture/JavaScript1/tree/master/Week1/MAKEME.md) | [Lesson Plan W1](https://github.com/HackYourFuture/JavaScript1/tree/master/Week1/LESSONPLAN.md) |[W1 presentations](https://github.com/HackYourFuture/presentation-module/blob/main/week1.md) | +| 2. | Statements vs. Expressions, Control flow, Loops, Operators, Conditional statement | [Reading W2](https://github.com/HackYourFuture/JavaScript1/tree/master/Week2/README.md) | [Homework W2](https://github.com/HackYourFuture/JavaScript1/tree/master/Week2/MAKEME.md) | [Lesson Plan W2](https://github.com/HackYourFuture/JavaScript1/tree/master/Week2/LESSONPLAN.md) |[W2 presentation](https://github.com/HackYourFuture/presentation-module/blob/main/week2.md) | +| 3. | Functions, Thinking like a programmer I, How JavaScript relates to HTML/CSS | [Reading W3](https://github.com/HackYourFuture/JavaScript1/tree/master/Week3/README.md) | [Homework W3](https://github.com/HackYourFuture/JavaScript1/tree/master/Week3/MAKEME.md) | [Lesson Plan W3](https://github.com/HackYourFuture/JavaScript1/tree/master/Week3/LESSONPLAN.md) | ## Finished? @@ -82,4 +125,4 @@ If you feel ready for the next challenge, click [here](https://www.github.com/Ha _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. +Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.``` diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index 8e4301456..66ffd2359 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -6,6 +6,7 @@ The purpose of this class is to introduce to the student: - The 2 types of websites: static vs. dynamic - The pillars of web development: HTML/CSS/JavaScript + - where JavaScript can run: Browser / Node - What are variables - How to name variables properly - What are the basic data types @@ -60,7 +61,7 @@ Discuss in class which claim belongs to which type of website: Dynamic: Advantage: - - Easy to pull in data on structured and organised way + - Easy to pull in data on stuctured and organised way - Content management system Disadvantage: - Design is more fixed, because the pages are more of a template @@ -73,6 +74,9 @@ Discuss in class which claim belongs to which type of website: - HTML defines what the content is. - CSS defines the appearance of the page. - JavaScript defines behavior of the page. +- Where can JavaScript run: + - browser + - Node ### Example @@ -80,6 +84,7 @@ Discuss in class which claim belongs to which type of website: ### Exercise +Let students fork and then clone the repository. Let students create a classwork directory and create an index.html along with an app.js. Script tag should be added to the end of body tag(reason for doing so is part of JS2 Week1). The end result should look like: @@ -101,9 +106,9 @@ A big disadvantage of web pages like this is that the only way that a visitor ha It doesn't exhibit any dynamic behavior like: 1. reacting to user actions such as mouse click events or key presses. -1. rendering complex animations -1. sending requests over network to servers and fetching a response -1. and this is where JavaScript steps in. +2. rendering complex animations +3. sending requests over network to servers and fetching a response +4. and this is where JavaScript steps in. ## 3. What are variables (const & let) & naming conventions @@ -143,8 +148,10 @@ console.log(age); ```javascript // Variable Initialization + var firstName = "Yash"; let lastName = "Kapila"; + const age = 29; console.log(firstName); @@ -171,12 +178,13 @@ console.log(lastName); 1. Create 2 variables using the `let` keyword - 1. make 1 variable contain your first name - 1. the second variable should have no value assigned + - make 1 variable contain your first name + - the second variable should have no value assigned 1. Make 2 variables using the `const` keyword - 1. the first variable should contain the city you currently stay at - 1. come up with a value for the second variable yourself + - the first variable should contain the city you currently stay at + - come up with name and a value for the second variable yourself + ### Essence @@ -192,38 +200,32 @@ _SECOND HALF (14.00 - 16.00)_ ### Explanation -Primitive data types are typically types that are built-in or basic to a language implementation. - -There are 5 different types of data. The compiler/computer interprets all the variables we make as one of those data types. -(https://javascript.info/types) +In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are 7 primitive data types: `string`, `number`, `bigint`, `boolean`, `null`, `undefined`, and `symbol`. Boolean — true or false Null — no value Undefined — a declared variable but hasn’t been given a value Number — integers, floats, etc String — an array of characters i.e words -?? Symbol — a unique value that's not equal to any other value ?? +Symbol — a unique value that's not equal to any other value (not used during HYF) ### Example - `string`, e.g. "HackYourFuture" - `number`, e.g. 5, or 10.6 - `boolean`, e.g. `true` or `false` -- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` -- `null and undefined` The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined". - -Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it. +- `array`, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` +- `null` \* +- `undefined` \* +- `symbol` e.g. `new Symbol('example')` -- `symbol` - -```js -let x = 5; -let typeOfX = typeof x; // -> "number" -``` +\* The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined". +Whenever you declare a variable (using `let`), but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it. ### Exercise -Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator: + +Everybody has four minutes to find a way to store all basic data types in a variable by making use of the typeof operator: ```js let x = 5; @@ -238,13 +240,37 @@ In this way we can store a lot of data in a compact way, while the computer/comp ### Explanation +Pieces of information often form a group. For example the names of all the students in this class can be grouped together +as a list. In JavaScript lists are stored in a datatype called an `Array`. + +Another way pieces of information can form a group are multiple properties of the same thing. For example the dimensions +of this room: length, width, height. These groups of information are stored in a datatype called an `Object`. + ### Example -- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` -- `object`, e.g. `{name: 'John', age: 24}`, or the special object `null` +- `array`\*, e.g. `[1, 2, 3]` or `['Gijs', 'Jim', 'Noer', 'Wouter']` +- `object`, e.g. `{name: 'Wilgert', shoeSize: 42}`, or the special object `null` ### Exercise +1. Create a list of your favorite types of food/dishes like this: + +```js +const foods = ['Chocolate', 'Risotto', 'Tuna melt']; +``` + +2. Create an object that contains the properties of your town/city like this: + +```js +const city = { + name: 'Huizen', + province: 'Noord-Holland', + population: 50000, + capital: false, +}; +``` + ### Essence -_Special thanks to Jim Cramer, Yash Kapila, David Nudge for most of the content_ +- Object key: value +- Array numeric index: value diff --git a/Week1/README.md b/Week1/README.md index 622861948..bbcac17ac 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -18,6 +18,12 @@ These are the topics for week 1: 5. What are data types? - 6 basic types +## 0. Video Lectures + +Your teacher Uday has made video lectures for this week's material. You can find them here: [Videos 1 - 10](https://www.youtube.com/playlist?list=PLVYDhqbgYpYUiqH8IxLJ5qomkEGMzes1q) + +HYF Video + ## 1. What is programming? Programming is giving a computer instructions written in a language it can understand, in order to solve a problem you (or the company you work for) have. We don't necessarily need computers to solve problems, but we use them because they provide several benefits: @@ -36,6 +42,7 @@ In order to use this tool, we need to talk to it in a way it understands (progra Go through the following resources to learn more about what programming is: - [What is programming?](https://www.youtube.com/watch?v=3tWMQ3ZMjbg) +- [What do programmers do?](https://www.youtube.com/watch?v=kEjCfsrotAM) - [Introduction into programming Playlist](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZYJC7L-r6rX6utt6wwJCyi) ### Software @@ -50,6 +57,7 @@ Programming is done using a programming language. Why do we need a language to c Smart people decided to make working with this easier to understand, so that a lot of people can more simply communicate with a computer. This is how the development of programming languages started: by defining a vocabulary, grammar and syntax to put more organization to the 0's and 1's, we can more simply communicate exactly what we want to computer to do. +- [What is a programming language?](https://www.youtube.com/watch?v=EGQh5SZctaE) - [What are programming languages](https://hackr.io/blog/what-is-programming-language) There are various languages, each made to fulfill a certain need. For example, Microsoft developed a language called [C#](https://www.youtube.com/watch?v=paJUbVeKEOU) in order to make applications for computers that run a Windows operating system. The language of C# is able to easily "talk" with the preexisting software. diff --git a/Week2/README.md b/Week2/README.md index 015b4eee5..c9a882e9c 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -11,6 +11,12 @@ These are the topics for week 2: 5. Conditional statement 6. Naming conventions +## 0. Video Lectures + +Your teacher Uday has made video lectures for this week's material. You can find them here: [Videos 11 - 20](https://www.youtube.com/playlist?list=PLVYDhqbgYpYUiqH8IxLJ5qomkEGMzes1q) + +HYF Video + ## 1. Statements vs. Expressions A lot of programming is nothing different from regular human communication. When conversing with another person, we often use language in various ways: to ask questions, make statements or simply express yourself about what's going on. diff --git a/Week3/README.md b/Week3/README.md index ed2c7557b..ce6e13694 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -8,6 +8,12 @@ These are the topics for week 3: 2. Thinking like a programmer I 3. How JavaScript relates to HTML & CSS +## 0. Video Lectures + +This week you'll get to know another experienced teacher, that you'll learn from more closely in the next module. His name is Wilgert Velinga, and he'll teach you all about `functions` and `scope`: [Videos 21 - 25] + +HYF Video + ## 1. Functions In programming, we often use code to perform a specific task multiple times. Instead of rewriting the same code, we can group a block of code together and associate it with one task. This is useful, because then we can reuse that block of code whenever we need to perform the task again. @@ -54,6 +60,7 @@ You should see it like this: a function is like a `tool` in the tool box. Only, Go over the following materials to learn more about the how and why of functions: +- [Introduction to Functions](https://www.youtube.com/watch?v=4LklwbSP--4) - [What is a function in programming?](https://www.youtube.com/watch?v=QcCnfAxGpgg) - [JavaScript Functions](https://www.youtube.com/watch?v=R8SjM4DKK80) - [Functions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/functions.md) diff --git a/assets/submit-homework.png b/assets/submit-homework.png new file mode 100644 index 000000000..9d577a58e Binary files /dev/null and b/assets/submit-homework.png differ diff --git a/assets/week1-uday.png b/assets/week1-uday.png new file mode 100644 index 000000000..93f88c63b Binary files /dev/null and b/assets/week1-uday.png differ diff --git a/assets/weekflow.png b/assets/weekflow.png new file mode 100644 index 000000000..9da097126 Binary files /dev/null and b/assets/weekflow.png differ diff --git a/hand-in-homework-guide.md b/hand-in-homework-guide.md index 2a5ebacf8..21e146367 100644 --- a/hand-in-homework-guide.md +++ b/hand-in-homework-guide.md @@ -4,7 +4,9 @@ From this module on you'll submit your homework only using GIT and GitHub. ## 1. GitHub homework guide -Follow the walkthrough to learn how to submit your homework for each week: +HYF Video + +Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your homework: ONE TIME ONLY (START OF EVERY MODULE)