From 6040b1ae56be1e964478e77255acca40e2f27b94 Mon Sep 17 00:00:00 2001 From: Wilgert Velinga Date: Sun, 24 Nov 2019 10:32:21 +0100 Subject: [PATCH 1/2] add exercises to part 2 --- .gitignore | 1 + Week1/LESSONPLAN.md | 110 ++++++++++++++++++++++++++++++++------------ 2 files changed, 81 insertions(+), 30 deletions(-) create mode 100644 .gitignore 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/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index f8beb0910..c083baa28 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -13,13 +13,13 @@ The purpose of this class is to introduce to the student: ## Core concepts -*FIRST HALF (12.00 - 13.30)* +_FIRST HALF (12.00 - 13.30)_ ## 1. The 2 types of websites: static vs. dynamic ### Explanation -Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS +Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS Compared to static websites, which are purely informational, a dynamic website is more functional. It allows users to interact with the information that is listed on the page. Of course, that requires utilizing more than just HTML code. ### Example @@ -45,23 +45,31 @@ Discuss in class which claim belongs to which type of website: Feature of Content Management System. HTML, CSS, Javascript is used for developing the website. Same content is delivered everytime the page is loaded. - + +<<<<<<< HEAD + ### Essence +======= + +##### Essence + +> > > > > > > add exercises to part 2 + [In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php) - - Static: + + Static: Advantage: - Flexible - Cheaper Disadvantages: - not updating content - Scalability - + Dynamic: Advantage: - - Easy to pull in data on stuctured and organised way - - Content management system + - Easy to pull in data on stuctured and organised way + - Content management system Disadvantage: - Design is more fixed, becasue the pages are more of a template - Costs @@ -104,9 +112,16 @@ It doesn't exhibit any dynamic behaviour like: 1. rendering complex animations 1. sending requests over network to servers and fetching a response 1. and this is where JavaScript steps in. - + <<<<<<< HEAD + ## 3. What are variables (const & let) & naming conventions +======= + +#### 3. What are variables (const & let) & naming conventions + +> > > > > > > add exercises to part 2 + ### Explanation In JavaScript, there are three ways of creating variables. @@ -127,6 +142,7 @@ Three different stages of working with variables are: - Variable assignment means throwing away the old value of a variable and replacing it with a new one. Initialization can be thought of as a special way of assignment. https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/variables.md + ### Example ```javascript @@ -169,12 +185,13 @@ console.log(lastName); ### Exercise 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 - + + 1. make 1 variable contain your first name + 1. 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 + 1. the first variable should contain the town/city you currently stay at + 1. come up with a value for the second variable yourself ### Essence @@ -184,14 +201,16 @@ For example, your name and age are simple pieces of information, a string and a Variables are simply named storage/pointer for this information. -*SECOND HALF (14.00 - 16.00)* +_SECOND HALF (14.00 - 16.00)_ ## 4. The basic data types (string, boolean, number, undefined, null) ### 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 interpretates all the variables we make as one of those datatypes. +> > > > > > > add exercises to part 2 +> > > > > > > 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 datatypes. (https://javascript.info/types) Boolean — true or false @@ -200,40 +219,71 @@ 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 ?? + ### 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. -* `symbol` +- `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` +- `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 (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. + +- `symbol` ```js let x = 5; let typeOfX = typeof x; // -> "number" ``` - ### Exercise -Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator: + +Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator: + ```js let x = 5; let typeOfX = typeof x; // -> "number" ``` -### Essence -In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpretate the 1's and 0's/ + +##### Essence + +In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpret the 1's and 0's/ ## 5. The compound data types (object, array) ### Explanation +- Object key / value +- Array numeric key value +- Array ordered +- Object not ordered + ### 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 `['what', 'is', 'your', 'name']` +- `object`, e.g. `{name: 'John', age: 24}`, or the special object `null` + ### Exercise + +1. Create a list of your favorite types of food/dishes like this: + +```js +['Chocolate', 'Risotto', 'Tuna melt']; +``` + +2. Create an object that contains the properties of your town/city like this: + +```js +{ + name: 'Huizen', + province: 'Noord-Holland', + citizens: 50000 +} +``` + ### Essence _Special thanks to Jim Cramer, Yash Kapila, David Nudge for most of the content_ From 5f89a8b44ba1a7221e36a26b02669cbd412b01ef Mon Sep 17 00:00:00 2001 From: Wilgert Velinga Date: Sat, 30 Nov 2019 17:10:48 +0100 Subject: [PATCH 2/2] improve lessonplan week1 --- Week1/LESSONPLAN.md | 114 ++++++++++++++++++++++++-------------------- 1 file changed, 61 insertions(+), 53 deletions(-) diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index c083baa28..54f533450 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 @@ -34,27 +35,43 @@ Examples the two different kind of websites Discuss in class which claim belongs to which type of website: Content of Web pages can not be change at runtime. + + Server side languages such as PHP, Node.js are used. + + Content of Web pages can be changed. - No interation with database possible. - Interaction with database is possible - It is faster to load as compared to the other typ of website. + + + No interaction with database possible. + + + Interaction with database is + + + It is faster to load as compared to the other type of website. + + It is slower then static website. + + + Lower Development costs. + + + Content may change everytime the page is loaded. + + Feature of Content Management System. - HTML, CSS, Javascript is used for developing the website. - Same content is delivered everytime the page is loaded. -<<<<<<< HEAD -### Essence + HTML, CSS, Javascript is used for developing the website. -======= -##### Essence + Same content is delivered everytime the page is loaded. -> > > > > > > add exercises to part 2 +### Essence [In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php) @@ -81,6 +98,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 @@ -88,6 +108,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: @@ -106,7 +127,7 @@ These static pages can interact with a visitor only through the use of forms. On A big disadvantage of web pages like this is that the only way that a visitor has of interacting with the page is by filling out the form and waiting for a new page to load. -It doesn't exhibit any dynamic behaviour like: +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 @@ -116,12 +137,6 @@ It doesn't exhibit any dynamic behaviour like: ## 3. What are variables (const & let) & naming conventions -======= - -#### 3. What are variables (const & let) & naming conventions - -> > > > > > > add exercises to part 2 - ### Explanation In JavaScript, there are three ways of creating variables. @@ -158,8 +173,8 @@ console.log(age); ```javascript // Variable Initialization -var firstName = 'Yash'; -let lastName = 'Kapila'; +var firstName = 'Marco'; +let lastName = 'Borsato'; const age = 29; console.log(firstName); @@ -174,9 +189,9 @@ let lastName = 'Hanks'; console.log(firstName); console.log(lastName); -// Assigning variables to a different value -firstName = 'Hanks'; -lastName = 'Tom'; +// Assigning a different value to variables +firstName = 'Katy'; +lastName = 'Perry'; console.log(firstName); console.log(lastName); @@ -191,7 +206,7 @@ console.log(lastName); 1. Make 2 variables using the `const` keyword 1. the first variable should contain the town/city you currently stay at - 1. come up with a value for the second variable yourself + 1. come up with name and a value for the second variable yourself ### Essence @@ -207,48 +222,38 @@ _SECOND HALF (14.00 - 16.00)_ ### Explanation -> > > > > > > add exercises to part 2 -> > > > > > > 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 datatypes. -(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` -- `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". +- `array`, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` +- `null` \* +- `undefined` \* +- `symbol` e.g. `new Symbol('example')` +\* 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. -- `symbol` - -```js -let x = 5; -let typeOfX = typeof x; // -> "number" -``` - ### 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; let typeOfX = typeof x; // -> "number" ``` -##### Essence +### Essence In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpret the 1's and 0's/ @@ -256,34 +261,37 @@ In this way we can store a lot of data in a compact way, while the computer/comp ### Explanation -- Object key / value -- Array numeric key value -- Array ordered -- Object not ordered +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 -['Chocolate', 'Risotto', 'Tuna melt']; +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', - citizens: 50000 -} + 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