;
22 | }
23 | ```
24 |
25 | There are two types of display elements already built into HTML. Block and Inline.
26 |
27 | ### Block Elements
28 |
29 | As a rule of thumb, a block element will always start on a new line, and will always take up the maximum width of the container it is in. Remember how in the last lesson we learned that the \ element will always start on a new line? It is a block element, as is div and \
30 |
31 | ### Inline elements
32 |
33 | Inline elements are the opposite of Block elements, it will not start on a new line and will only take enough space as is needed to display the data inside of it. span, a, and img elements are all inline elements.
34 |
35 | We can control how an element behaves by using the display: property. If we want an inline element to act as a block element, we set:
36 |
37 | ```css
38 | div {
39 | display: block;
40 | }
41 | ```
42 | And vise-versa.
43 |
44 | ### Display has a few other rules that we should be aware of that can be set on it:
45 |
46 | ### none
47 |
48 | Setting the display to "none" will make an element disappear completely. This is not to be confused with the "visibility: hidden;" rule which only renders the element invisible, but does not remove it from the page (the space will still look occupied by something). If an item is set to display: none there will be no sign of it on the page.
49 |
50 | ### flex
51 |
52 | Flex is a new(CSS3) powerful tool that gives us the ability to control where on the page we want our items to be. We will talk about this later in this lesson
53 |
54 | ### grid
55 |
56 | This is a new feature in CSS3 that will allow you to create a grid system inside of your element.
57 |
58 | ## The Position property
59 |
60 | The position property will specify the type of positioning method used for an HTML element. There are 5 different methods available (we will go over 4 of them).
61 | ```css
62 | div {
63 | position: ;
64 | }
65 | ```
66 |
67 | ### static
68 |
69 | This is the default positioning of an element, setting an item to static will not affect the element's behavior in any way.
70 |
71 | ### relative
72 |
73 | Setting a position to relative will keep the element positioned as if it were static, but this method will allow us the ability to set other positioning methods on the element that we will describe very soon.
74 |
75 | ### fixed
76 |
77 | Setting an element as fixed will keep the element to a fixed place on the screen no matter how much you scroll or move the screen, it will remain in that place. Think about a header or menu bar on a webpage.
78 |
79 | ### absolute
80 |
81 | Absolute is a lot like fixed, except it is anchored relative to its parent element (as long as the parent has any position method on it, except static).
82 |
83 | ## Using the position property to position elements
84 |
85 | Now that we have set our position method to the style we want to use, we can then start position our element. (Note: this works for every position method other than "static", which will not affect the element in any way).
86 |
87 | ### top, left, right, and bottom
88 |
89 | After we set a positioning method we can the use top, bottom, left, and right properties to position our element. The value you give to each of these will determine how far away from the edge we want our element to be. For example, if we want our element to be in the extreme upper left corner (with a fixed position) we would use the following:
90 |
91 | ```css
92 | div {
93 | position: fixed;
94 | top: 0;
95 | left: 0;
96 | }
97 | ```
98 |
99 | If we wanted it to be 10px below the top and 10px off the right edge:
100 |
101 | ```css
102 | div {
103 | position: fixed;
104 | top: 10px;
105 | right: 10px;
106 | }
107 | ```
108 |
109 | ## Introduction to Flexbox
110 |
111 | Introduced in CSS3, Flexbox is an exciting new feature. It allows us to position our elements in relation to it's parent and each other. No longer do we have to apply CSS "hacks" for things like centering. This allows mobile friendly design to really shine; and allows us to spend less time trying to get our positioning just right. Flexbox can quickly get complicated, but we will cover the basics of flexbox positioning here.
112 |
113 | ### display: flex and inline-flex
114 |
115 | As we mentioned in the display property section, one of our display types can be "flex" this makes any container a flex block, we can also use "inline-flex" to make it a flex inline element. For the most part, we will just be using "flex".
116 |
117 | ### justify-content and align-items
118 |
119 | Now that our container(element) is a flex box. We can imagine it as a grid, columns going from left to right and rows going from top to bottom. We can use the justify-content and align-items properties to tell the flex box where we want our items to be on the grid. Initially "justify-content" will apply to the movement from left to right(row), and "align-items" will apply to the movement from top to bottom (column). We have a number of rules we can place on each of these properties:
120 |
121 | * center: will center an item (or group of items) along the axis in which you apply this rule.
122 | * flex-start: This is what each flex box is set to initially, it will display all of the items in a group at the very beginning of the row or column.
123 | * flex-end: the opposite of flex-start, will display the item(s) at the end of the row/column
124 | * space-between: This rule will evenly space your item(s) along the row/column. The first item will be at the flex-start, and the last will be at the flex-end
125 | * space-around: Like space-between, but will put an equal margin between each item, so no item will be directly touching the edge.
126 |
127 | example: if we wanted our items to be center in the exact middle of a flex box we would use the following:
128 | ```css
129 | div {
130 | display: flex;
131 | justify-content: center;
132 | align-items: center;
133 | }
134 | ```
135 |
136 | ### flex-direction
137 |
138 | This property can change the way our browser interprets justify-content(JC) and align-items(AI). The default is "row", and this works for us in the majority of cases, but sometimes we want to change the way direction works.
139 |
140 | * row: this is the default direction. JC applies from left to right, ai applies from top to bottom.
141 | * column: This will flip which property controls which direction. JC will apply from top to bottom and ai will apply from left to right.
142 | * row-reverse: Only flips the direction of JC from right to left, does not affect AI
143 | * column-reverse: Only flips direction of AI from bottom to top, does not affect JC
144 |
145 | ### align-self
146 |
147 | One last, more advanced, property we will cover is called "align-self". This will be applied to an element within a flex box that we want to break out of the align-items control. If we give it the property align-self we can position it anywhere along the align-items axis we want. (Note: there is NO justify-self, this is a primary reason developers will change the flex direction)
148 |
149 | ### Now in your browser window, open and complete homework.html
150 |
151 | ## Additional Resources
152 |
153 | * [Flexbox Froggy (a great flexbox tutorial)](http://flexboxfroggy.com/)
154 | * [CSS tricks: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
155 | * [MDN: Using CSS Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
156 | * [MDN: CSS display propery](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
157 | * [MDN: CSS position property](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
--------------------------------------------------------------------------------
/Lesson12-DOM/README.md:
--------------------------------------------------------------------------------
1 | # Lesson 12: DOM
2 | (Attention: These are the class notes for the [Lambda School](http://www.lambdaschool.com) pre-course instruction workshop. This is meant to serve as an accompaniment to the class)
3 |
4 | In this lesson we will cover:
5 |
6 | * Introduction to the `DOM`
7 | * The `script` Element
8 | * `document`
9 | * `document` Selectors
10 | * Element Methods
11 | * Event Handlers
12 |
13 | ## Introduction to the `DOM`
14 |
15 | The `DOM` (as you will repeatedly hear it called) refers to 'Document Object Model'. When a browser loads a webpage, it takes all of the HTML and creates a model from it. Using Javascript we can access and manipulate that model. Adding and removing elements, changing attributes of elements, and changing styling of elements.
16 |
17 | ## The `script` Element
18 |
19 | We can inject our Javascript code into an HTML page by using the `script` element. We can do this two ways.
20 |
21 | First is to insert opening and closing script tags in the `head` element, the same way we would use the `title` or `style` elements. We then insert our Javascript code directly on the HTML page inline.
22 |
23 | ```html
24 |
25 |
26 |
30 |
31 |
32 | ```
33 |
34 | The second way is to use the script tag to retrieve our external Javascript file and inject that into our HTML page. Note, the attributes (flags) we use in script are `type` which should be set to "text/javascript" and `src` which will be set to the location of your file. We also want to include the keyword `async` and the end of our script tag to tell the browser to load the script asynchronously from the HTML. NOTE: script is not a self closing tag, you must include a closing tag.
35 |
36 | ```html
37 |
38 |
39 |
40 |
41 |
42 | ```
43 |
44 | ## `document`
45 |
46 | The first thing to note about Javascript running on a webpage is it's access to a global object called `document`. Remember that DOM stands for `Document Object Model`, the `document` object contains our DOM and prototype methods that allow us to access elements on the DOM and manipulate them.
47 |
48 | ## `document` Selectors
49 |
50 | `document` contains dozens of methods on it's prototype. But most useful are it's selectors. We will take a look at the five most common.
51 |
52 | ### `document.getElementsByClassName`
53 |
54 | `getElementsByClassName` will find elements based on their class names. It will return an array-like object that we can use to iterate through. The class name supplied will be a string with the class name.
55 |
56 | ```javascript
57 | const divs = document.getElementsByClassName('divClass');
58 | ```
59 |
60 | ### `document.getElementById`
61 |
62 | `getElementById` will find a single element based on it's id. It will return the element itself. The id supplied must be a string of the id name.
63 |
64 | ```javascript
65 | const div = document.getElementById('divId');
66 | ```
67 |
68 | ### `document.querySelector`
69 |
70 | `querySelector` (and `querySelectorAll`) is a new method that takes a CSS style selector as it's argument. Remember that we can ask for classes in CSS using the `.`, ids using the `#`, and elements by using the element name (eg: `'body'`). These selectors will use the same format. It is best to only use ids with `querySelector` because it will only return the first item matching that selector.
71 |
72 | ```javascript
73 | const div = document.querySelector('#divId');
74 | ```
75 |
76 | ### `document.querySelectorAll`
77 |
78 | `querySelectorAll` works just like `querySelector` except it returns an array like object containing all elements that match the selector. Because of this, you can use ids OR class names with this method.
79 |
80 | ```javascript
81 | const divs = document.querySelectorAll('#divId');
82 | ```
83 |
84 | ### `document.createElement`
85 |
86 | If we want to create an element to be added to our `DOM`, we can use `document.createElement`. This method takes one argument, the element type and returns an empty element of that type.
87 |
88 | ```javascript
89 | const newDiv = document.createElement('div');
90 | ```
91 |
92 | ## Element Methods and Properties
93 |
94 | Once we have our elements selected we can use a wide range of methods and properties to affect everything on the element, including: changing the CSS styles, changing the attributes on the element, adding or removing the children of the element, adding or removing event listeners(clicks, etc). There are countless things we can do to affect the element. We will go over some basic methods and properties here.
95 |
96 | ### .innerHTML
97 |
98 | When we have an element, we can set it's `innerHTML`. This is essentially setting the data that is stored between the opening and closing tags of the element.
99 |
100 | ```javascript
101 | const p = document.querySelector('#pId');
102 | console.log(p.innerHtml) // This is the text between the tags
103 |
104 | p.innerHTML = 'This is new text to display between the tags';
105 |
106 | console.log(p.innerHTML); // This is new text to display between the tags
107 | ```
108 |
109 | ### .[attribute] and .setAttribute
110 |
111 | We can call `.setAttribute` on an element to either add an attribute to the element or reassign one that is already on that element. calling `.[name of attribute] = [new value]` is a shorthand way of doing this.
112 |
113 | ```javascript
114 | const img = document.querySelector('#imgId');
115 |
116 | img.setAttribute('src', 'http://www.lambdaschool.com/lambdalogo.png');
117 |
118 | img.src = 'http://www.lambdaschool.com/lambdalogo.png';
119 | ```
120 |
121 | ### .style
122 |
123 | Calling the `.style` property on an element gives us access to the styles associated with the element. Note, this does not give us access to the CSS styles, only the inline styles written in HTML. We chain the style we want to read, or affect, on to the end of the `.style` .We can use this to set certain styles on the element.
124 |
125 | ```javascript
126 | const div = document.querySelector('#divId');
127 |
128 | div.style.height = '300px';
129 | div.style.background = 'red';
130 | ```
131 |
132 | ### .className and .id
133 |
134 | Using the `.className` and `.id` properties we can read and reassign class names and ids. This is most useful when we have two different styles associated and we want to switch the element to another style.
135 |
136 | ```javascript
137 | const div = document.querySelector('#divId');
138 |
139 | console.log(div.id); // divId
140 | div.className = 'newClassName';
141 | div.id = 'newId';
142 | ```
143 | ### .appendChild
144 |
145 | We have the ability to create a new element set its style, class, id, attributes, and innerHTML, and add it to the `DOM` directly. To do this we use `.appendChild` on a parent node:
146 |
147 | ```javascript
148 | const body = document.querySelector('body');
149 | const newDiv = document.createElement('div');
150 |
151 | body.appendChild(newDiv);
152 |
153 | ```
154 | ## Event Listeners
155 |
156 | An event listener is a function that fires when an event occurs. Events can be anything from a click, to a mouse entering the content area, to an image download finishing. We will explore a few different events, but there are dozens we can choose from.
157 |
158 | ### Click
159 |
160 | The most common event listener to assign to an element is the 'click handler' in fact, it is the only one with it's own property, `.onclick`. To use the onclick property, we set it equal to a function that we want fired each time the element is clicked.
161 |
162 | ```javascript
163 | const div = document.querySelector('#divId');
164 | div.onclick = function() {
165 | console.log('clicked!');
166 | };
167 | ```
168 |
169 | ### `addEventListener` and Other Events.
170 |
171 | `.onclick` works if we want to add a click listener, but what happens if we want to fire a function when a user enters text in a form input, or the screen is scrolled. There are dozens of built in event listeners, but we must use `.addEventListener`. `.addEventListener` is a method that takes two arguments, the first is the type of event it is listening for, and the second is a callback function that is called when that event happens. Note: it is best to use addEventListener for all events, even clicks.
172 |
173 | ```javascript
174 | const div = document.querySelector('#divId');
175 | div.addEventListener('mouseenter', function() {
176 | console.log('mouse has entered!');
177 | });
178 | ```
179 |
180 | You can find a list of all events here: [MDN: Events](https://developer.mozilla.org/en-US/docs/Web/Events)
181 |
182 | Using these document methods coupled with the knowledge we have of Javascript, HTML, and CSS, we now how the tools to build a fully functional front end web application.
183 |
184 | ## Additional Resources
185 |
186 | * [MDN: DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
187 | * [MDN: script Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
188 | * [MDN: Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)
189 | * [MDN: Events](https://developer.mozilla.org/en-US/docs/Web/Events)
190 |
191 |
192 |
193 |
--------------------------------------------------------------------------------
/Lesson01-Git/README.md:
--------------------------------------------------------------------------------
1 | # Lesson 1: Git fundamentals
2 | (Attention: These are the class notes for the [Lambda School](http://www.lambdaschool.com) pre-course instruction workshop. This is meant to serve as an accompaniment to the class)
3 |
4 | In this lesson we will cover:
5 |
6 | * Description of version control and Git.
7 | * Basic terminal commands.
8 | * Forking and cloning an existing Github.com repo.
9 | * Basic Git commands (status, add, commit, push).
10 | * Submitting a Pull Request.
11 |
12 | ### Prerequisites:
13 | * Create a [Github.com](https://www.github.com/) account.
14 | * If you are or have applied to Lambda School then set your account email to public in settings.
15 | * If you are on a Windows computer you can install the [git-bash command terminal here](https://git-for-windows.github.io/)
16 | * If you are on a Mac, git is preinstalled and you can access it from your terminal. By pressing ⌘+space and entering "terminal". (You can make sure you have git installed by typing "which git" and pressing enter, if a file path appears on your screen you are go to go. In some cases you may be directed to download the Xcode command line developer tools, follow the instructions)
17 | * If you are on a Linux machine, you may need to install git by accessing your terminal and entering "apt-get install git"
18 | * If you are having trouble installing Git, this resource will help: [https://git-scm.com/book/en/v2/Getting-Started-Installing-Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
19 |
20 | ## Description of version control and Git
21 |
22 | Version control is a concept in software engineering which applies to the management of source code. There are many systems for applying version control practices to source code. We will be focusing on one of the most popular, "Git".
23 |
24 | ### Git
25 |
26 | Git was created in 2005 by Linus Torvalds. Git allows a team to work concurrently on a single project, or "repository", all while staying current and up to date. This is done through branching, each member, or feature, can have a branch from the master branch. That branch can be edited as needed without interfering with the "master". When the time comes to merge the branches back together, git will evaluate where the changes were made and will correct the master to reflect those changes without interfering with other changes. Git also acts as a sort of time machine, allowing a team to revert ANY changes made to the source code throughout the history of the code.
27 |
28 | ### Github.com
29 |
30 | [Github.com](https://github.com) is a network to store your repositories, essentially it is a repository of repositories. It is one of many available on the internet, and the most popular. Git != Github, although they work very well together. Github is a place for you to store your code or find other projects. It also acts as a portfolio for any code you've worked on. If you plan on being a developer you should have a Github account. We will be using Github extensively throughout your time at Lambda School.
31 |
32 | ## Basic terminal commands:
33 |
34 | > We will be using the "terminal" or "command line" throughout your time at Lambda school. If you are on a Mac or Linux machine, you should have the terminal and git installed already, if you are on a Windows machine I recommend installing ["git-bash"](https://git-for-windows.github.io/).
35 |
36 | Within our terminal we can: traverse our file structure, add files, remove files, update files, and tons more! The terminal is a very powerful tool for developers and you will be using it a lot in your professional development career. It might look scary at first, but in time you will enjoy using it. It is best to get accustomed to it now. To begin we will learn the 'basic' commands:
37 |
38 | "List": Allows us to view the contents of the current folder we are in.
39 | ```bash
40 | $ ls
41 | ```
42 |
43 | "Change Directory": Allows us to move to a new folder or 'directory'.
44 | ```bash
45 | $ cd [folder]
46 | ```
47 |
48 | "Make Directory": Makes a new folder in the directory you are currently in.
49 | ```bash
50 | $ mkdir [folder name]
51 | ```
52 | "Touch" will create a new file.
53 | ```bash
54 | $ touch [file]
55 | ```
56 |
57 | "Remove": permanently deletes a file. (WARNING! This bypasses any "trashcan" or recycling can you may have and PERMANENTLY deletes the file) (also of note: This will not remove folders, we need a special command for that, that we will learn later.)
58 | ```bash
59 | $ rm [file]
60 | ```
61 |
62 | ## Exercise
63 |
64 | In this exercise we will create a new folder titled: "LambdaSchool"
65 |
66 | To get to your top level folder type:
67 |
68 | ```bash
69 | cd ~
70 | ```
71 |
72 | and press enter. Once in your top level type:
73 |
74 | ```bash
75 | mkdir LambdaSchool
76 | ```
77 |
78 | and press enter. Congratulations you have created a directory!
79 |
80 | ## Github
81 |
82 | As mentioned before, Github is a central place to store, view, and download repositories, it is not synonymous with "git". You need to have a Github account in order to complete this exercise.
83 |
84 | ### Forking
85 |
86 | Github.com allows users to create their own copy of an repository (as long as it is public) and do whatever work you would like to that on under your own account. This is called "Forking". Essentially this will create a new branch of the repo, and at a future time you may be able to reincorporate("pull") the changes you have made to this branch with the master branch you forked from.
87 |
88 | In order to fork a repo, you will visit the Github repo of your choosing (for this exercise we will be using [this](http://github.com/lambdaschool/precourse) repo). Anywhere within the repo you will see a "Fork" button in the upper right hand corner, click this. Github will take a moment and copy all of the data to your account and it is now available to you to work on.
89 |
90 | ### Cloning
91 |
92 | In order to work on a project you must clone (download) it to your local machine. To do this, visit the top level of the forked repo on your own account, and click on the green button in the upper right hand side of the page that says: "Clone or Download" a dropdown should appear and will can click on the clipboard icon to copy the address. (Note: you can download the entire repo, but this is not advised as cloning will do quite a few steps for you behind the scenes that will make your life much easier.)
93 |
94 | Once you have the address copied, return to your terminal window and enter the following:
95 |
96 | ```bash
97 | $ cd LambdaSchool
98 |
99 | $ git clone [copied address]
100 | ```
101 |
102 | This will download the repo and you now have a local copy of the repo saved to your machine!
103 |
104 | ## Git commands:
105 |
106 | Throughout these lessons, we will interact with git through our terminal. In the future you may wish to use a Git GUI interface, but during these lessons we will need to use the terminal for all git functions.
107 |
108 | In this exercise, we will add a file to our project and then commit this change to memory in git.
109 |
110 | In your terminal, cd into the LambdaSchool/Precourse folder
111 |
112 | Then enter the following in your terminal:
113 | ```bash
114 | $ touch Lesson01-Git/newFile.js
115 | ```
116 |
117 | This will add a new file your your project titled "newFile.js"
118 |
119 | at this time we can use the git command "status". Status will read back the status of all changes made to your repo. Use status often, if you’re not sure if something worked, using status will tell you.
120 |
121 | ```bash
122 | $ git status
123 | ```
124 |
125 | You should see something along these lines:
126 |
127 | ```bash
128 | Changes not staged for commit:
129 | (use "git add ..." to update what will be committed)
130 | (use "git checkout -- ..." to discard changes in working directory)
131 |
132 | modified: Lesson01-Git/README.md
133 |
134 | Untracked files:
135 | (use "git add ..." to include in what will be committed)
136 |
137 | Lesson01-Git/newFile.js
138 |
139 | no changes added to commit (use "git add" and/or "git commit -a")
140 | ```
141 |
142 | This tells us that we have a file that has been changed, but is not saved into the git history yet.
143 |
144 | To do this we will use the 'add' command:
145 |
146 | ```bash
147 | git add Lesson01-Git/newFile.js
148 | ```
149 |
150 | This has added our changes to the history, now to save that history, we will use "commit". Commit will take all of our added changes and save it to git history. For future reference you will be able to leave a message about the changes, this will make it easier to go back and find the changes you(or anyone) are looking for in the future ,if you should need to. It is always a good idea to leave a concise description of the changes in your commit. A shorthand way of leaving an inline message is using the '-m' flag and writing your message directly after, in quotes.
151 |
152 | ```bash
153 | git commit -m 'added new file, newFile.js'
154 | ```
155 |
156 | Now that we have our changes saved locally, we want to share those changes in our Github. To do this we will "push"
157 |
158 | ```bash
159 | git push
160 | ```
161 |
162 | You will be prompted for your username and password. Enter these and then you will receive a message if your changes were pushed successfully:
163 |
164 | ```bash
165 | Counting objects: 5, done.
166 | Delta compression using up to 8 threads.
167 | Compressing objects: 100% (4/4), done.
168 | Writing objects: 100% (5/5), 2.97 KiB | 0 bytes/s, done.
169 | Total 5 (delta 1), reused 0 (delta 0)
170 | remote: Resolving deltas: 100% (1/1), completed with 1 local object.
171 | To git@github.com:[your username]/Precourse.git
172 | cccc682..283b9dd master -> master
173 | ```
174 |
175 | Congratulations! You just pushed your first git commit!
176 |
177 | ## Pull Requests
178 |
179 | Once you have completed the changes you intend to make, it will be time to merge those changes with the master branch. If you are not making changes directly to your own repository, you will need to submit a "Pull Request" or "PR" as we will refer to it. This allows to owner(or manager/supervisor/lead/senior) of the original repo to look over the changes and decide if they want to include these changes in their master. We will do this through Github.
180 |
181 | In this exercise, we will submit a pull request through github.com
182 |
183 |
184 | ## Further reading and tutorials:
185 |
186 | * [Git: official site](https://git-scm.com/)
187 | * [Github: official tutorial](https://try.github.io/levels/1/challenges/1)
188 | * [Codecademy: Learn Git](https://www.codecademy.com/learn/learn-git)
189 | * [Git: official tutorial](https://git-scm.com/docs/gittutorial)
190 | * [Termianl turorial](https://www.davidbaumgold.com/tutorials/command-line/)
191 |
--------------------------------------------------------------------------------
/Lesson05-JS-II/README.md:
--------------------------------------------------------------------------------
1 | # Lesson 5: Javascript II (Control Flow, Comparison Operators, `for` Loops)
2 | (Attention: These are the class notes for the [Lambda School](http://www.lambdaschool.com) pre-course instruction workshop. This is meant to serve as an accompaniment to the class)
3 |
4 | In this lesson we will cover:
5 |
6 | * Undefined and Null
7 | * Comparison Operators (continued)
8 | * Control Flow (continued)
9 | * Logical Operators
10 | * `for` Loops
11 | * `arguments`
12 |
13 | ## Undefined and Null
14 |
15 | There are a couple of Javascript objects that don't really fit into any type. Those are the values `undefined` and `null`. You will get `undefined` when you are looking for something that does not exist like a variable that does not have a value yet. `undefined` simply means what you are asking for does not exist.
16 |
17 | ```javascript
18 | console.log(unkownVar); // undefined
19 | ```
20 |
21 | `null` is an object that we, the developers, set when we want to tell other developers that the item they are looking for exists, but there is no value associated with it. While `undefined` is set by the Javascript language, `null` is set by a developer. If you ever receive `null`, know that another developer set that value to `null`
22 |
23 | ```javascript
24 | let phoneNumber = '123-456-7890';
25 | phoneNumber = null;
26 |
27 | phoneNumer; // null
28 | ```
29 |
30 | One last thing to note, neither `undefined` nor `null` are strings, they are written just as they are with no quotes around them, like a boolean.
31 |
32 | ## Truthiness
33 |
34 | In these lessons we have talked a lot about the boolean values, `true` and `false`. When using an `if` statement or another statement that expects a boolean value (such as the `!`, NOT), and the expression given is not a boolean value, Javascript will do something called type coercion and transform whatever it is given to a boolean value. This is known as truthy and falsey. Every data type has a truthiness to it. Here are some examples:
35 |
36 | ```javascript
37 | // items that are coerced to true
38 | true
39 | 1
40 | ' '
41 | [] // an array, you'll learn more about this later
42 | {} // an object, you'll learn more about this later
43 | function() {}
44 |
45 | // items that are coerced to false
46 | false
47 | 0
48 | undefined
49 | null
50 | ''
51 | ```
52 |
53 | ## Comparison Operators (continued)
54 |
55 | In the last lesson we touched on Comparison Operators, we will go a little more in depth as to how they work and then introduce a close relative of Comparison Operators, Logical Operators.
56 |
57 | In the last lesson we introduced our comparison operators, (`>` `>=` `<` `<=` `===` `!==`). These operators work just as they would in a math class, greater than, less than, etc. We use these operators to evaluate two expressions. As the computer runs the code the operator will return either a `true` (if the statement is true) or a `false`.
58 |
59 | ```javascript
60 | 1 > 2; // alse
61 | 2 < 3; // true
62 | 10 >= 10; // true
63 | 100 <= 1; // false
64 | ```
65 |
66 | The "triple equals" ( `===` ) must not be confused with a single equal sign (which indicates assigning a value to a variable). The triple equal will compare everything about the two items, including type, and return if they are exactly equal or not:
67 | (Something to note: there is a "double equals" ( `==` ) which will compare two items, but it will NOT take into account their types (`1 == '1' // true`). Due to this, it is considered bad practice to use the double equal. We would like to see you always using the triple, and you will always see us using it.)
68 |
69 | ```javascript
70 | 1 === 1; // true
71 | 1 === '1'; // false
72 | 'cat' === 'cat'; // true
73 | 'cat' === 'Cat'; // false
74 | ```
75 |
76 | The last comparison operator we would like to introduce you to has two parts to it.
77 |
78 | First is the "NOT" (`!`) when you see this it will mean that we are asking the opposite of the expression (we will revisit the NOT operator later in this lesson).
79 |
80 | With that in mind, we can introduce the "not equals" ( `!==` ). This will return true if the items are NOT equal to each other, in any way. This, like the triple equal, takes type into account.
81 |
82 | ```javascript
83 | 1 !== 1; // false
84 | 1 !== '1'; // true
85 | 'cat' !== 'cat'; // false
86 | 'cat' !== 'Cat'; // true
87 | ```
88 |
89 | ## Control Flow (continued)
90 |
91 | In the last lesson we learned about the `if` operator. We can use `if` to check and see if an expression is `true`, if it is, run some code. If it is not, skip the code and keep running the program.
92 |
93 | ```javascript
94 | if (1 + 1 === 2) {
95 | console.log('The expression is true!');
96 | }
97 | ```
98 |
99 | To add on to `if`, we can also use the `else if` and `else` statements. These statements must be used with `if` and must come after it. These statements will be evaluated if the initial `if` returns `false`. We can think of the `else if` as another `if` statement that has been chained (we can have as many else if statements we want). Only one `if` or `else if` statement code block will be run. If at any time a statement returns `true`, that code will be run and the rest will be skipped:
100 |
101 | ```javascript
102 | if (false) {
103 | console.log('This will be skipped!');
104 | } else if (true) {
105 | console.log('This code will be run');
106 | } else if (true) {
107 | console.log('This code will NOT be run');
108 | }
109 | ```
110 |
111 | The `else` statement will always come at the end of an if-else `if` chain, and will act as a default. If none of the expressions returned `true`, the `else` code block will be run no matter what. If any of the previous `if` or `else if` expressions are `true`, the `else` statement code block will not be run.
112 |
113 | ```javascript
114 | if (false) {
115 | console.log('This will be skipped!');
116 | } else if (false) {
117 | console.log('This code will NOT be run');
118 | } else {
119 | console.log('This code will be run');
120 | }
121 | ```
122 |
123 | ## Logical Operators
124 |
125 | We can also combine two equality expressions and ask if either of the are true, both of them are true, or neither of them are true. To do this we will use Logical Operators.
126 |
127 | ### &&
128 |
129 | The first logical operator we will look at is the "AND" operator. It is written with two ampersands (`&&`). This will evaluate both expressions and will return true if BOTH expressions are true. If one (or both) of them is false this operator will return false:
130 |
131 | ```javascript
132 | if (100 > 10 && 10 === 10) {
133 | console.log('Both statements are true, so this code will be run');
134 | }
135 |
136 | if (10 === 9 && 10 > 9) {
137 | console.log('One of the statements is false, so the && will return false, this code will not be run');
138 | }
139 | ```
140 |
141 | ### ||
142 |
143 | The next is the "OR" operator. It is written with two vertical bars (`||`). It will determine if one of the expressions is `true`. It will return `true` if one (or both) of the expressions is `true`. It will return `false` if BOTH expressions are `false`:
144 |
145 | ```javascript
146 | if (100 > 10 || 10 === 10) {
147 | console.log('Both statements are true, so this code will be run');
148 | }
149 |
150 | if (10 === 9 || 10 > 9) {
151 | console.log('One of the statements is true so the || will return true, this code will be run');
152 | }
153 |
154 | if (10 === 9 || 1 > 9) {
155 | console.log('Both of the statements are false, so the || will return false. This code will not be run.');
156 | }
157 | ```
158 |
159 | ### !
160 |
161 | The last logical operator is the "NOT" operator. It is written as a single exclamation mark (`!`). We saw this operator earlier when determining equality (`!==`). As before, the NOT operator will return the opposite boolean value of what is passed to it:
162 |
163 | ```javascript
164 | if (!false) {
165 | console.log('The ! will return true, because it is the opposite of false. This code will be run');
166 | }
167 |
168 | if (!(1 === 1)) {
169 | console.log('1 does equal 1, so that expression returns true. The ! operator will then return the opposite of that. This code will NOT run.');
170 | }
171 | ```
172 |
173 | ### Notes About Logical Operators
174 |
175 | A couple things to note about logical operators.
176 |
177 | * The expressions are evaluated in order, and the computer will skip any redundant expressions. In an `&&` statement, if the first expression is `false`, the second expression will not be evaluated because BOTH expressions need to be `true`. Same for the `||` statement. If the first expression is `true`, the second will not be evaluated because there only needs to be one `true` statement to fulfill the requirements of the operator.
178 |
179 | * Use parentheses. As we saw in the second `!` operator example, we used parentheses to evaluate what was inside of the parentheses FIRST, then applied the `!` operator. We can wrap ANY expression in parentheses and it will be evaluated before evaluating the expression as a whole.
180 |
181 |
182 | ## for Loops
183 |
184 | Most software runs on loops, evaluating expressions over and over again until it either returns what we are looking for, or stops after a certain time. Javascript has two looping expressions built in to it and today we will look at the first one, the "for" loop.
185 |
186 | `for` loops have a unique syntax, similar to the `if` statement, but slightly more complex. First we have the `for` keyword, followed by parentheses and then open and close braces. Within the parentheses we will need three things. First, we must declare a variable, this is what the loop will be looping over. Then we will have a conditional expression, the loop will continue happening until this statement is `false`. Third, we will increment our variable. All three of these statements are separated by a semi-colon.
187 |
188 | ```javascript
189 | for (let i = 0 ; i < 10 ; i++ ) {
190 | // | declare a var | conditional expression | increment var|
191 | console.log(i);
192 | }
193 | ```
194 |
195 | In this example we see that we initially set our `counter` variable to 0, the loop will run and each time it gets to the end, it will increase the counter by one. The for loop will then evaluate the conditional expression. If it is `true`, it will run again, if it is `false` it will stop running.
196 |
197 | ### The ++ operator
198 |
199 | We saw in the last two examples the `++` operator. This is Javascript shorthand for "Set the value of the variable to it's current value plus one". There are a few more of these variable math/assignment shorthand expressions, we will visit them in upcoming lessons.
200 |
201 | ### Infinite Loops.
202 |
203 | It is possible to get your loop stuck in what we call an "Infinite Loop". You must make sure there is a way for the loop to end, take for example this loop:
204 |
205 | ```javascript
206 | for (let i = 0; i >= 0; i++) {
207 | console.log(i);
208 | }
209 | ```
210 | Because our conditional expression will ALWAS be `true` (`i` will never be less than 0) this loop will essentially run forever. This will break your program, and may crash your web browser, or computer.
211 |
212 | ## Please open the homework folder and complete the assignment described in the README file
213 |
214 | ## Additional Resources
215 |
216 | * [MDN: Comparison Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
217 | * [MDN: Control Flow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)
218 | * [MDN: Logical Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators)
219 | * [MDN: for Loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)
220 |
--------------------------------------------------------------------------------
/Lesson04-JS-I/README.md:
--------------------------------------------------------------------------------
1 | # Lesson 4: Introduction to Javascript
2 | (Attention: These are the class notes for the [Lambda School](http://www.lambdaschool.com) pre-course instruction workshop. This is meant to serve as an accompaniment to the class)
3 |
4 | In this lesson we will cover:
5 |
6 | * Introduction to Javascript
7 | * Variables
8 | * Strings, Numbers, and Booleans
9 | * Math
10 | * Introduction to Functions
11 | * Control Flow and Comparison Operators
12 | * Introduction to Node and NPM
13 |
14 | ## Introduction to Javascript
15 |
16 | If we imagine a web page as a house, the HTML makes up the materials (wood, brick, and concrete), CSS is how we put all of those materials together, and Javascript is the electricity, plumbing and gas. It's what makes the web page "run". Javascript was originally designed to be used purely on the front end as a way for web developers to add functionality to their web pages, and in its early days it did just that. Recently, the introduction of the "V8 engine" by Google has improved the speed and functionality of JS. That led to the development and release of exciting new front-end Javascript frameworks and eventually Node.js, a way to run Javascript on a server (back-end). This new development has led to a resurgence of Javascript. Javascript is one of the world's most widely used programming languages. We now find Javascript used on front-end, back-end, mobile development, IoT, and really anywhere a traditional programming language would be used. Recently, the newest version of the Javascript language was released (ES6), we will be focusing on and using ES6 in this course, and in the Lambda School full CS course. Keep in mind, Javascript != Java. Although they share similar names (this was, unfortunately, considered a feature by Javascript's early pioneers) that is where the similarities end.
17 |
18 | ## Variables
19 |
20 | At the heart of Javascript are variables. A variable is a way to store the value of something to use later. (A note for those with previous programming knowledge: Javascript is a loosely typed language, a variable can be set (and reset) to any type, we do not need to declare its type when initiating the variable.)
21 |
22 | The anatomy of a variable is first the keyword, a space, the name we are giving the variable, an equal sign, the value we are assigning the variable and then the semi-colon.
23 |
24 | There are three ways to declare a variable.
25 | ```javascript
26 | var firstName = 'John';
27 | let lastName = 'Smith';
28 | const favoriteFood = 'Taco';
29 | ```
30 |
31 | ### var
32 |
33 | `var` is the ES5 way of declaring a variable. This is a generic variable keyword.
34 |
35 | ### let
36 |
37 | `let` is a new ES6 variable keyword, this will assign a variable much like `var`, but with a little bit different behavior. Most notably, it differs by creating "block level scope".
38 |
39 | ### const
40 |
41 | `const` is also new in ES6. A `const` is a variable that will not be able to be changed. This is short for "constant".
42 |
43 | ### console.log
44 |
45 | Another concept we will talk about right away is
46 |
47 | ```javascript
48 | console.log();
49 | ```
50 |
51 | This very simple method will allow us to print to the console anything we put between the parentheses.
52 |
53 | ## Strings, Numbers, and Booleans
54 |
55 | These are the most basic data types in Javascript.
56 |
57 | ### Strings
58 |
59 | Strings are blocks of text, they will always be defined with quotation marks around them, either single or double. Any text with quotes around it is a string.
60 |
61 | ```javascript
62 | const dog = 'fido';
63 | ```
64 | ### Numbers
65 |
66 | Numbers are just that, numbers. Numbers do NOT have quotes around them. They can be negative as well. Javascript does have a limitation on the size of a number (+/- 9007199254740991), but only very rarely will that limitation come up.
67 |
68 | ```javascript
69 | const answer = 42;
70 | const negative = -13;
71 | ```
72 |
73 | ### Boolean
74 |
75 | Booleans come from low level computer science. It is a concept that powers binary code and the very core of computers. You may have seen binary code in the past (0001 0110...), this is boolean logic. It essentially means you have two choices, on or off, 0 or 1, true of false. In Javascript we use Booleans to mean true or false. This may seem simple at first but can get complicated later on.
76 |
77 | ```javascript
78 | const iLoveJavascript = true;
79 | ```
80 |
81 | ## Math
82 |
83 | Math operators work in javascript just as they would on your calculator.
84 |
85 | ### + - * / =
86 |
87 | ```javascript
88 | 1 + 1 = 2
89 | 2 * 2 = 4
90 | 2 - 2 = 0
91 | 2 / 2 = 1
92 | ```
93 |
94 | ### %
95 |
96 | Something you may not have seen before is the Modulo (`%`), this math operator will divide the two numbers and return the remainder.
97 |
98 | ```javascript
99 | 21 % 5 = 1;
100 | 21 % 6 = 3;
101 | 21 % 7 = 0;
102 | ```
103 |
104 | ## Global objects and methods
105 |
106 | Javascript has a number of built in objects for us to use. We have already seen, and have been using, the console object and it's method `log`. Another one of these objects is `Math`. `Math` has a number of methods on it just like `console` has `log`. To add to this, some of our data types also have built in methods.
107 |
108 | ### Math.pow
109 |
110 | We can use the `pow` method on `Math` to return a number risen to an exponent. It will take two numbers.
111 |
112 | ```javascript
113 | Math.pow(2,2) = 4;
114 | Math.pow(3,2) = 9;
115 | Math.pow(3,3) = 27;
116 | ```
117 |
118 | ### Math.round , Math.floor, Math.ceil
119 |
120 | `Math` also has methods that will round numbers for us. `.round` will round a number to the nearest whole number. `.floor` will always round a number down to the nearest whole number. `.ceil` will always round up to the nearest whole number.
121 |
122 | ```javascript
123 | Math.round(6.5) = 7;
124 | Math.round(6.45) = 6;
125 | Math.floor(6.999) = 6;
126 | Math.ceil(6.0001) = 7;
127 | ```
128 |
129 | ### .length
130 |
131 | The string data type has a built in method called `.length` . Any string we call this on will return the amount of characters in that string.
132 |
133 | ```javascript
134 | const cat = 'kitty';
135 | console.log(cat.length); // 5
136 | ```
137 |
138 | We will see many other built it in methods on other data types throughout this course.
139 |
140 | ## Introduction to Functions
141 |
142 | Now that we have variables set we need functions to compute them, change them, do something with them. There are three ways we can build a function.
143 |
144 | ```javascript
145 | function myFunc() {}
146 | const anotherFunc = function () {};
147 | const yetAnother = () => {};
148 | ```
149 |
150 | We will be using the first way in this lesson, and talk about the other ways in future lessons.
151 |
152 | ### Anatomy of a Function
153 |
154 | ```javascript
155 | function myFunc() {}
156 | ```
157 |
158 | A function will start with the `function` keyword, this tells whatever is running your program that what follows is a function and to treat it as such. After that comes the name of the function, we like to give functions names that describe what they do. Then comes an open and a close parentheses. And finally, open and close brackets. In between these brackets is where all of our function code will go.
159 |
160 | ```javascript
161 | function logsHello() {
162 | console.log('hello');
163 | }
164 |
165 | logsHello();
166 | ```
167 |
168 | In this example we declare a function `logsHello` and we set it up to `console.log` `'hello'`. We can then see in order to run this function, we need to write the name and parentheses. This is the syntax to run a function. A function always needs parentheses to run.
169 |
170 | ### Arguments
171 |
172 | Now that we can run a basic function, we are going to start passing it arguments.
173 |
174 | ```javascript
175 | function logsHello(name) {
176 | console.log('Hello, ' + name);
177 | }
178 |
179 | logsHello('Dan');
180 | ```
181 |
182 | If we add a variable to the parentheses when we declare the function we can use this variable within our function. We initiate the value of this variable by passing it into the function when we call it. So in this case `name = 'Dan'`. We can pass other variables into this as well:
183 |
184 | ```javascript
185 | function logsHello(name) {
186 | console.log( `Hello, ${name}`);
187 | }
188 |
189 | const myName = 'Dan';
190 | logsHello(myName);
191 | ```
192 |
193 | We can add multiple arguments by placing a comma in between them:
194 |
195 | ```javascript
196 | function addsTwoNumbers(a, b) {
197 | const sum = a + b;
198 | return sum;
199 | }
200 |
201 | addsTwoNumbers(1, 5); // 6
202 | ```
203 | ### Return statement and Scope
204 |
205 | In the last example we introduced the `return` statement. We will not `console.log` everything that comes out of a function. Most likely we will want to return something. In this case it is the sum of the two numbers. Think of the return statement as the only way for data to escape a function. Nothing other than what is returned can be accessed outside of the function. Also note, that when a function hits a return statement, the function immediately stops what it is doing and returns.
206 |
207 | ```javascript
208 | function dividesTwoNumbers(a, b) {
209 | const product = a / b;
210 | return product;
211 | }
212 |
213 | dividesTwoNumbers(6, 3); // 2
214 | console.log(product); // undefined
215 | ```
216 |
217 | If we tried to `console.log` something that we declared inside of the function it would return `undefined` because we do not have access to it outside of the function. This is called scope. The only way to access something inside of the function is to return it.
218 |
219 | We can also set variables to equal what a function returns.
220 |
221 | ```javascript
222 | function subtractsTwoNumbers(a, b) {
223 | const difference = a - b;
224 | return difference;
225 | }
226 |
227 | const differenceValue = subtractsTwoNumbers(10, 9);
228 | console.log(differenceValue); // 1
229 | console.log(difference); // undefined
230 | ```
231 |
232 | We can see that difference is set inside of the function. The variable inside the function only belongs inside the function.
233 |
234 | ## Control Flow and Comparison Operators
235 |
236 | In this example we are going to use control flow and comparison operators. Control flow is a way for our function to check to see if something is `true`, and either running the code supplied if it is, or moving on if it is not. For this we will use the `if` keyword:
237 |
238 | ```javascript
239 | function canDrive(age) {
240 | if (age > 15) {
241 | return true;
242 | }
243 |
244 | return false;
245 | }
246 |
247 | canDrive(16); // true
248 | ```
249 |
250 | Here we are taking a number (`age`) and checking to see if the statement is `true` (`16 > 15`), it is, so we will return `true`, and the function will stop. If it is not, it will skip that code and the function will return `false`.
251 |
252 | The "Greater Than" symbol ( `>` ) you see in the last example is called a Comparison Operator. Comparison Operators evaluate two items and return either `true` or `false`. These operators are: `<` , `<=`, `>`, `>=`, `===`, `!==` . We will learn more about these operators in the next lesson.
253 |
254 | ## Introduction to Node and NPM
255 |
256 | Node.js is a runtime environment developed originally for use on backend servers. We will need to install it on our machines in order to complete the exercises over the next four days. To install Node please click here: [Download and install Node.js](https://nodejs.org/en/download/). Node comes shipped with "NPM". NPM is a package manager for javascript packages and we will be using it throughout our time at Lambda School. Once you have installed Node.js, you do not need to do anything else to install NPM.
257 |
258 | ## Please open the homework folder and complete the assignment described in the README file
259 |
260 | ## Additional Resources
261 |
262 | * [Codecademy: Learn Javascript](https://www.codecademy.com/learn/learn-javascript)
263 | * [Udacity: Intro to Javascript](https://www.udacity.com/course/intro-to-javascript--ud803)
264 | * [MDN: Official Javascript Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
265 |
--------------------------------------------------------------------------------
/Lesson02-HTML-CSS/README.md:
--------------------------------------------------------------------------------
1 | # Lesson 2: HTML/CSS fundamentals
2 | (Attention: These are the class notes for the [Lambda School](http://www.lambdaschool.com) pre-course instruction workshop. This is meant to serve as an accompaniment to the class)
3 |
4 | In this lesson we will cover:
5 |
6 | * Introduction to HTML.
7 | * Basic HTML elements.
8 | * Introduction to CSS.
9 | * CSS selectors and the \
141 |
142 |
143 |
144 |
10 | Pre-Course Workshop
11 | 
51 |