Merge pull request HackYourFuture#190 from HackYourFuture/js1-week1-lesson-plan-improvements

wilgert · web-flow · commit fb0abfd814fb · 2019-11-16T15:43:41.000+01:00
updates what/why/how for variables
diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md
@@ -18,17 +18,20 @@ The purpose of this class is to introduce to the student:
 #### 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 
 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
+
 Examples the two different kind of websites
+
 - Static: https://www.atlassian.com/time-wasting-at-work-infographic
 - Dynamic: https://www.facebook.com/
 
-
 ##### Exercise
-Discuss in class which claim belongs to wich type of website:
+
+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.
@@ -44,7 +47,8 @@ Discuss in class which claim belongs to wich type of website:
     Same content is delivered everytime the page is loaded.
   
 ##### Essence
-[In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php)     
+
+[In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php)
   
       Static: 
         Advantage:
@@ -67,23 +71,34 @@ _Show examples of static and dynamic websites_
 #### 2. The pillars of web development: HTML/CSS/JavaScript
 
 ##### Explanation
+
 - HTML defines what the content is.
 - CSS defines the appearance of the page.
 - JavaScript defines behavior of the page.
 
 ##### Example
+
 - An example about relationship between HTML, CSS and Javascript using a methaphor of building a city: https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/
 
 ##### Exercise
-  
+
+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:
+
+```
+- js1-week1-classwork
+  - index.html
+  - app.js
+```
+
 ##### Essence
-Up until now at HackYourFuture, we have been writing websites using HTML and CSS. 
-Even though a website written with these two languages works just fine, it is only a static page.
 
-These static pages can interact with a visitor only through the use of forms. Once a form is filled out and submitted, 
-a request is sent back to the server where a new static web page is constructed and eventually downloaded into the browser. 
+Up until now at HackYourFuture, we have been writing websites using HTML and CSS. Even though a website written with these two languages works just fine, it is only a static page.
+
+These static pages can interact with a visitor only through the use of forms. Once a form is filled out and submitted, a request is sent back to the server where a new static web page is constructed and eventually downloaded into the browser.
 
-The big disadavantage 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. 
+A big disadavantage 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:
 
@@ -96,14 +111,80 @@ It doesn't exhibit any dynamic behaviour like:
 
 ##### Explanation
 
-**Do Exercise**
+In JavaScript, there are three ways of creating variables.
+
+- var
+- let
+- const
+
+While `var` has been used in JavaScript for a long period of time, `let` and `const` are recent additions having been introduced in ES6.
+
+Three different stages of working with variables are:
+
+- Variable Declaration
+  - Declaration means creating a variable and providing it with a name. During the whole program, a variable can be declared only once.
+- Variable Initialization
+  - Initialization is declaring a variable and assigning it an initial value at the time of declaration. By default, all variables created in JavaScript have undefined as the default value unless explicitly given a different value.
+- Variable (Re)Assignment
+  - 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.
+
+##### Example
+
+```javascript
+// Variable Declaration
+var firstName;
+let lastName;
+const age; // is this correct???
+
+console.log(firstName);
+console.log(lastName);
+console.log(age);
+```
+
+```javascript
+// Variable Initialization
+var firstName = 'Yash';
+let lastName = 'Kapila';
+const age = 29;
+
+console.log(firstName);
+console.log(lastName);
+console.log(age);
+```
+
+```javascript
+var firstName = 'Tom';
+let lastName = 'Hanks';
+
+console.log(firstName);
+console.log(lastName);
+
+// Assigning variables to a different value
+firstName = 'Hanks';
+lastName = 'Tom';
+
+console.log(firstName);
+console.log(lastName);
+```
+
+##### Exercise
+
+TODO(Could be moved to SECOND HALF)
+
+##### Essence
+
+Any application written in any programming language requires data or information to work with. This information can be as simple as a string, number or complex types like a list of strings, a mix of strings and numbers etc.
+
+For eg, you name and age are simple pieces of information, strings and a number respectively. On the other hand, your house address could be considered as a complex set of information including house number, street name, city, postcode and country.
+
+Variables are simply named storage/pointer for this information.
 
 ### SECOND HALF (14.00 - 16.00)
 
 #### 4. The basic data types (string, boolean, number, undefined, null)
 
-**Do Exercise**
+TODO
 
 #### 5. The compound data types (object, array)
 
-**Do Exercise**
+TODO
