Permalink
Browse files

added Danny's previous notes to this repo

  • Loading branch information...
deconstructionalism
deconstructionalism committed Jun 16, 2018
1 parent cc73ee6 commit c016bedad180b26a320ea60a7f7b18d3a3cacc7a
@@ -0,0 +1,34 @@
## LESSON: [html-css](https://git.generalassemb.ly/ga-wdi-boston/html-css)

---

**2018-06-08**

> Tags: html, css

### VOCABULARY

**Semantic html elements**

**Block level element**

**Inline level elements**

### NOTES

- Access styles and CSS for a webpage via chrome dev tools
- Shortcuts:
- Ctrl + Shift + C
- Cmd + Shift + C

### EXAMPLES

#### Block level elements in HTML

```js
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption><figure> <footer> <form> <h1>- <h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output><p> <pre> <section> <table> <tfoot> <ul> <video>
```

- Example of a class in css => ` .class`
- Example of an id in css => `#id`
Binary file not shown.
@@ -0,0 +1,18 @@
## LESSON: [ jquery-ajax-get-collection](https://git.generalassemb.ly/ga-wdi-boston/jquery-ajax-get-collection)
---
**2018-06-12**
> Tags: javascript, jquery, http, json, api
### OBJECTIVES
- Make HTTP requests using **curl**, the **browser address bar**, and **AJAX** for:A resource collection.- Use response data in future requests.
### VOCABULARY
**curl**: A unix program used to access a resource at a specific server location. `man curl` says curl is used to transfer a URL, allowing one to transfer data to or from a URL.
**browser address bar**: where you can type a server address to issue a GET request to a web server
**AJAX**: Asynchronous Javascript and XML
### NOTES
- library api is hosted here: https://wdi-library-api.herokuapp.com
- library api is a ruby on rails application running a web server, with a real database,
- curl by default does a GET request to the location provided-  to view your website, start your server with `grunt serve`, which allows you to browse to `localhost:7165` and view your local website

### EXAMPLES

@@ -0,0 +1,85 @@
## LESSON: [js-functions](https://git.generalassemb.ly/ga-wdi-boston/js-functions)

---

**2018-06-11**

> Tags: javascript, objects, functions
### OBJECTIVES

- Create and invoke functions that take an arbitrary number of arguments
- Create and invoke functions that take reference types as arguments
- Create and invoke functions that return reference types
- Create and invoke functions that take functions as arguments
- Create and invoke functions that return functions


### VOCABULARY

**Function**: a block code that can be invoked at a later time, defined with the function keyword.

- Functions can be defined in various ways:

- Functions can be named so you can reference them later with the variable name:

- ```js
let someFunc = function() {
// code here
}
```

- or anonymous:

- ```js
function() {
// code that runs when function is
// called is here
}
```

**Function body**: the code contained within a function that runs when the function is invoked:

```js
let someFunc = function() {
// body is in here, between the
// curly braces
}
```

**Function Return value**: the value returned from the function, that other parts of the program receive by invoking the function. When no return value is specified with the `return` keyword, `undefined` is returned. So, a function always returns something.

**Function argument**: the value(s) passed into a function that match up with the parameters that were specified when the function was defined

**Function Parameter**: The named local variables that a function can receive when invoked. These are defined when the function is defined within the parentheses:

```js
let someFunc = function (param1, param2, etc) { … }
```

- If you do not define any parameters, then the function cannot receive any named values when invoked. The `arguments` variable is always set up as an array of incoming arguments when a function is invoked.

**Callback**: A callback is a function that is passed to another function.

```js
let funcWithCallback = function(num1, num2, operation) {
operation(num1, num2)
// operation is another function that will be
// passed into funcWithCallback as an argument.
// Whatever functions is passed in as the 3rd
// argument is a callback function. It could be
// something like add(), subtract(), multiply(),
// etc.
}
```

### NOTES

- Order and type of arguments are important
- It is up to the developer to know the order and type of arguments a function is expecting.
- You must call the function with the correct order and type of argument that the function expects to receive. That is, when you define the function, you specify an order and kind of parameter that will be used in the function body. So when you invoke it, you need to pass in the correct order and type of argument.
- Functions can return primitives or reference types
- Reference types are useful to return when you need to return multiple things

### EXAMPLES
@@ -0,0 +1,52 @@
## LESSON: [**js-object-constructors**](https://git.generalassemb.ly/ga-wdi-boston/js-object-constructors)

---

**2018-06-11**

> Tags: javascript, objects
### OBJECTIVES

- Use a constructor function to produce objects of a particular type.
- Attach attributes to a new object using the constructor function.
- Recall the cost of defining methods inside a constructor function.


### VOCABULARY

**Constructor function**: used to make new objects with the same properties

- Always start with capital letter
- Use the keyword new
- Used to reduce duplication

**Instance**: an object made from a constructor function

### NOTES

- Constructors:
- Make the same type of objects again
- Reduces duplicate code!
- Duplicate code increases typos and errors and makes code less readable
- Attributes with an underscore (ie this._power)
- Indicates to other developers that you don’t intend this property to be directly called
### EXAMPLES
- Make a new constructor:
```js
const Run = function (date, distance, timeTaken) {
this.date = date
this.distance = distance
this.timeTaken = timeTaken
}
```
- Make a new instance of the object using the constructor:
```js
const currentRun = new Run ('2018-06-11', 1300, 700)
```
@@ -0,0 +1,42 @@
## LESSON: [js-objects-this](https://git.generalassemb.ly/ga-wdi-boston/js-objects-this)

---

**2018-06-08**

> Tags: javascript, objects
### OBJECTIVES

- Contrast the definitions of "property", "attribute", and "method"
- Access properties within a method of the same object using this.


### VOCABULARY

**Property**: keys within an object

**Attribute**: a property that holds a value

**Method**: a property that points to a function (behavior of an object)

**`this`**: used within an object. It references an object’s own property. References the containing object. All other uses of `this` are out of scope at this time
**Entity Relationship Diagram (ERD)**: a way to diagram an object that you will use in your program. Shows relationships between objects (entities)

- A box with the entity name at the top, and the properties underneath

- Can have the datatypes next to each property
- Relationships can be a single line to other entities
- useful to communicate with other stakeholders, like project managers and other developers

### NOTES

- We cannot know what “this” is until the code runs
- Think of methods as behavior of an object
- Both methods and attributes are properties of an object
- Another word for property is key
- Another word for object is key / value pair, associative array, dictionary, or hash. In javascript, we usually say object, but other languages may prefer something else.
- One way to break up complexity of a problem (creating an abstraction or solving a real-world problem) is to use multiple objects
- Objects can have other objects as properties, or even collections of other objects

### EXAMPLES
Binary file not shown.
@@ -0,0 +1,58 @@
## LESSON: [js-scope](https://git.generalassemb.ly/ga-wdi-boston/js-scope)

---

**2018-06-12**

> Tags: javascript, objects, functions
### OBJECTIVES

- Explain what a block is.
- Describe the difference between global and local scope in JavaScript.
- Identify which part(s) of JavaScript create new scope.
- Identify which variables are accessible in various scopes.
- Create a closure.
- Explain why a closure is beneficial.


### VOCABULARY

**Interdependency**

**Coupling**

**Encapsulation**

**Code block**: code within a set of curly braces {}, like within a function or conditional body, or within a loop.

**Scope**: the level of access your program has to a particular variable at a particular time while executing code. Scope can be thought of as a container or set of nested boxes. Where and how a variable is defined determines its scope, or availability to other parts of the program.

- Created by using functions and blocks

**Local scope**: when the program has limited access to variables, like within a code block.

**Global scope**: the broad access to variables at a higher level than inside a block. There are various “levels” of global scope. The highest potential scope is the window object (or some similar global object in other environments). It’s usually a bad idea to define variables in the highest global scope, but it is often necessary to move variables to a higher scope than block scope.

**Child scope**: any inner scopes that a variable has access to

**Parent scope**: the scope(s) higher than what the variable has access to

**Sibling scope**: scopes created at the same level of hierarchy, so not child or parent.

**Closure**: A way to gain access to the scope a function had when it was defined. When a function is created, it closes around its current level of scope, so any variables it can currently access at the time the function is defined are accessible later when the function is invoked. This combination of a function and it's lexical scope is called a *closure*. By creating a closure, we can use a function to close over the current scope and access it at a later time.

### NOTES

- Functions, conditionals, loops create blocks, as does a standalone set of curly braces
- Blocks create new scope for the variables defined within the block
- Variables defined within a block are limited in scope to the block in which they are defined
- Variables defined outside of a block can reach into a block, but variables defined within a block cannot reach outside of the block (global vs local scope)
- If you want to access the same variable within multiple blocks, make sure it’s defined at the appropriate scope level (define it outside of the block vs inside the block)
- You can create scope with a function, which is called function scope. It’s pretty much the same as block scope (scope created with a block)
- Always use let and const so that we avoid confusing scope issues that arise with var
- Different scopes can have variables that are declared with the same name and they do not conflict or know about each other.
- **When you have a bug in your code...think about scope**! Do I have access to what I need at this point in the program? Is the thing I’m accessing the thing I think I’m accessing?
- Variables defined within an inner scope cannot be applicable to anything that is part of an outer scope. On the contrary, things that are defined on the outer scope can affect functions and variables part of an inner scope. (This explains why a const variable within an inner scope causes an error when you try to console.log it... Define as a ‘var’ instead)

### EXAMPLES

0 comments on commit c016bed

Please sign in to comment.