## JavaScript

Hey mentor,

I was working through an assignment last night and came across a bug. I'm so confused!

The text in the alert is showing up as "undefined" instead of either "A Unicorn", "A hug", or "Fresh Laundry" and
I'm not quite sure what's going on. Can you point me in the right direction?

-Student

```js
<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>

<script type="text/javascript">
  var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
  for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
      // for each of our buttons, when the user clicks it...
      document.getElementById('btn-' + btnNum).onclick = function() {
          // tell her what she's won!
          alert(prizes[btnNum]);
      };
  }
</script>
```

```
Can you run the program for me. Lets put a couple of console.logs inside the for loop

for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
      // for each of our buttons, when the user clicks it...
      console.log(btnNum);
      document.getElementById('btn-' + btnNum).onclick = function() {
          // tell her what she's won!
           console.log(btnNum)
          alert(prizes[btnNum]);
      };
  }

Wow! you just found a real JS quirk! Lets start by using our friend the "console.log". First thing you notice is that the
console.log(btnNum) inside the for loop, when you run it see  0,1,2 being logged. Alsoconsole.log(btnNum) inside the function
returns a 3. This means the for loop is looping over all the btnNum before running the function associated with the onclick.
Remember when we talked about JavaScript closures? can you tell me what a closure is[at this point I will try and gauge how
comfortable the student is with closures].
A closure, is a function in JavaScript, can simply be described as a retained scope. The benefit of a closure is in
the fact that it retains the scope of the outer or “parent execution context. The looping problem occurs when you
create a function within a loop and expect the current value of a variable to retain itself within that new function
even though it changes in the loops context before your new function is called. That is the reason when we see that
the two console.logs are returning values that have already been run by the for loop, the only thing that is being
passed to the onclick is the final value of 3.
 Now lets change stuff around. How about if we create a function outside of the for loop and extract the closure
 from the loop and put it in that function, lets try that[I would do this step-by-step explainng each step]

 var callThisFunction = function(arr, index) {
          document.getElementById('btn-' + btnNum).onclick = function() {
            alert(arr[index]);
          }
      };

  var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];

  for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
      // for each of our buttons, when the user clicks it...
      callThisFunction(prizes, btnNum)
  }

 As you see, this problem can be solved by creating a function and calling it on each iteration of the loop,
 while passing the btnNum on each call; calling the function will form a brand new execution context where the
 value of btnNum is retained and can be used in any way within that context, including within the returned function.
```
Rails

Hey mentor,

I am starting to understand associations, but I'm still confused about through. What's the practical difference between a has_many and a has_many :through? What about has_one :through? When do I use them?

-Student

```
Good Question, and a really important one! Lets jog our memories back to associations between two models. In general, Why do
we need associations between models?[I would wait for the students response]. Correct! because they make common operations
simpler and easier in your code. There are different type of associations between two models, has_many one of those associations.
A has_many association indicates a one-to-many connection with another model.his association indicates that each instance of
the model has zero or more instances of another model. For example, in an application containing authors and books, the author
model could be declared like this:

class Author < ApplicationRecord
  has_many :books
end

This one is easy right! Now say we are running a medical practice, with many patients, and everytime a patient needs to see us
they need to make an appointment. Now can you tell me how many models would be needed here? Thats correct, three models: patients,
physician, appointments. So if we put it in plain English, a physician has many appointments with many patients, and a
patient can have a lot of physicians. What kind of relationship does this depict? a has_many:through, do you see it?
[see if the student is following along]. A has_many :through association is often used to set up a many-to-many connection
with another model. This association indicates that the declaring model can be matched with zero or more instances of another
model by proceeding through a third model. In our example it would look something like this[I would probably draw some form
of a diagram while explaining this]

class Physician < ApplicationRecord
  has_many :appointments
  has_many :patients, through: :appointments
end

class Appointment < ApplicationRecord
  belongs_to :physician
  belongs_to :patient
end

class Patient < ApplicationRecord
  has_many :appointments
  has_many :physicians, through: :appointments
end

I would suggest that you thoroguhly practice these association, the only way of doing this is by coming up with some examples.
why don't you think of an examples for both has_many and has_many :through. Once you are done we can discuss this further.
Also, lets discuss has_one :through once you finish practicing has_many. Once you are able to come with some example for
has_many, has_one will become clearer.
```
### SQL

Hey mentor,

Thanks for the lecture yesterday, it really helped me get motivated again. I've been working through this assignment about databases and I'm confused about "SQL injection." What does that mean and how does it work? How do I prevent it in my apps?

Thanks!

-Student

```
Databases, one of my favorite topics! Thank you for bringing up 'SQL injection' it is really important, to understand what it
is and how to secure your databases from it. Since a SQL Injection vulnerability could possibly affect any website or web
application that makes use of an SQL-based database, the vulnerability is one of the oldest, most prevalent and most dangerous
of web application vulnerabilities.
SQL Injection refers to an injection attack wherein an attacker can execute malicious SQL statements that control a web
application’s database server. In order to, run malicious SQL queries against a database server, an attacker must first find
an input within the web application that is included inside of an SQL query. In order for, an SQL Injection attack to take
place, the vulnerable website needs to directly include user input within an SQL statement. An attacker can then insert a
payload that will be included as part of the SQL query and run against the database server.
Look at the following pseudocode:

# Define POST variables
uname = request.POST['username']
passwd = request.POST['password']

# SQL query vulnerable to SQLi
sql = “SELECT id FROM users WHERE username=’” + uname + “’ AND password=’” + passwd + “’”

# Execute the SQL statement
database.execute(sql)

The above script is a simple example of authenticating a user with a username and a password against a database with a table
named users, and a username and password column. The above script is vulnerable to SQL Injection because an attacker could
submit malicious input in such a way that would alter the SQL statement being executed by the database server.A simple
example of an SQL Injection payload could be something as simple as setting the password field to password’ OR 1=1.

This would result in the following SQL query being run against the database server.

SELECT id FROM users WHERE username=’username’ AND password=’password’ OR 1=1’

Once the query executes, the result is returned to the application to be processed, is could lead to an authentication bypass. In the event of authentication bypass being possible, the application will most likely log the attacker in with the first account from the query result — the first account in a database is usually of an administrative user. So this is pretty serious stuff.

Now how how do we prevent this from happening? So there are many ways of doing this, in diffrent frameworks, but lets
specifically talk about Rails application. Most Rails applications interact with a database through ActiveRecord, the
default and convenient Object Relational Mapping (ORM) layer which comes with Rails. Generally, use of ORMs is safer
than not. They can provide abstraction and safety and allow developers to avoid manually building SQL queries.
They can embody best practices and prevent careless handling of external input.

Instead of unsafe code like

query = "SELECT * FROM users WHERE name = '#{name}' AND password = '#{password'} LIMIT 1"
results = DB.execute(query)

You can have safer, simpler code like

User.where(:name => name, :password => :password).first
```
### Angular/jQuery

Hey mentor,

I'm really excited about starting on learning Angular. I'm having a problem understanding what angular is.
Up until this point we've used jQuery, which we've called a library. Now we are using Angular, which is a framework.
What's the difference? What are the drawbacks/benefits of using a framework like Angular vs a library like jQuery?

```
Really good question, you just hit the nail in the head between age old question between when does a library become a
framework? what are the differences? lets tackle this one at a time.
Lets start with difference between library and a framework. A library is a reusable piece of code which you use as it comes
i.e it does not provide any hooks for you to extend it. A library will usually focus on a single piece of functionality,
which you access. A framework is a piece of code which dictates the architecture your project will follow. Once you choose
a framework to work with, you have to follow the framework's code and design methodologies. Why is jQuery called a library?
because it is good at one thing; DOM manipulation, that makes it easier to use JavaScript on your website. JavaScript is
the language of choice for making webpages dynamic and interactive. jQuery takes the complex code that would be required '
to make AJAX calls or manipulate the DOM and wraps them into simple methods you can call with a single line of JavaScript.
While AngularJS is a JavaScript framework that was specifically designed to help developers build Single Page Applications
aka SPAs[more on this once we get into Angular] in accordance with best practices for web development. By providing a
structured environment for building SPAs, the risk of producing “spaghetti code” is greatly reduced.
YOU SHOULD USE JQUERY IF…
You’re seeking a lightweight and powerful tool for DOM manipulation. jQuery is a library of code designed to do one thing,
as I mentioned earlier—help you manipulate the DOM with JavaScript.
YOU SHOULD USE ANGULARJS IF…
You require a full-featured framework for developing web applications from scratch. AngularJS gives you everything you need
to build the client-side of an application. It will also make it easier to keep your web project organized and modular to
avoid repeating code.
I am going to list some drawbacks/benefits of using a framework like Angular vs a library like jQuery, because you asked,
but remember before I do that; you I have to tell you. Once you start exploring these tools further, you will develop your
own opinions on which one you prefer. So take anything I say with a grain of salt.
jQuery is very easy to get a handle on and continues to be an amazing way to delegate events(learn more as you get into JS)
and normalize them. It simplified DOM manipulation and Ajax calls before it became a thing. If jQuery is classy, Angular
is the cool kid in JS code-town.
Angular is an open-source structural framework for web apps brought to us by Google, so it’s pretty solid on credentials.
It aims to simplify single-page applications by making development and testing phases easier. How does it do that?
It brings “server-side development tools and capabilities to web client” turf. It is OK if you do not understand all the
terminology here, once you start working with these frameworks all this technical jargon will become second nature.

Drawing Some Comparisons here
Advantages of jQuery:
Easy to learn, easy to use
Community:Popularity practically equates to scores of developers actively coding, experimenting and improving upon the base.
Disadvantages of jQuery:
Not built for larger apps

Advantages of AngularJS:
Automatic DOM manipulation
MVVW Principle: You ask what the heck is that? For now just know that it is a design paradigm that stands for model, view,
viewmodel. There are others, we will talk more about these as we go along. These paradigms are like a set of rules that
shape applications...thats all you need to know for now.
Disadvantages of AngularJS:
Steep learning curve: You need to apply yourself to learning this framework for a while before you get the hang of it.
jQuery is easier to learn.
```
### Algorithms

Hey mentor,

I hope you're doing well. I'm really enjoying learning algorithms, but I'm pretty confused by this Big O Notation thing. Can you explain how I'm supposed to figure out which notation my algorithm uses?

-Student

```
Thats is a tricky one! Lets start by a simple definition of what the Big O notation is Big O notation is used in Computer
Science to describe the performance or complexity of an algorithm. Big O specifically describes the worst-case scenario,
and can be used to describe the execution time required or the space used (e.g. in memory or on disk) by an algorithm.
The relationship between the time it takes and the data increase in Big O has different measurements.
As you can see, O(1)  is constant complexity, which basically means that it will take the same time to run the algorithm,
regardless of the length of the data set. (for example, it takes the same time to find the first element or the last in a
sorted data set).
O(N) describes an algorithm whose performance will grow linearly and in direct proportion to the size of the input data set.
The example below also demonstrates how Big O favours the worst-case performance scenario; a matching string could be found
during any iteration of the for loop and the function would return early, but Big O notation will always assume the upper
limit where the algorithm will perform the maximum number of iterations.
bool ContainsValue(IList<string> elements, string value)
{
    foreach (var element in elements)
    {
        if (element == value) return true;
    }

    return false;
}
O(N2) represents an algorithm whose performance is directly proportional to the square of the size of the input data set.
This is common with algorithms that involve nested iterations over the data set. Deeper nested iterations will result in
O(N3), O(N4) etc.
Logarithms are slightly trickier to explain so I'll use a common example:
Binary search is a technique used to search sorted data sets. It works by selecting the middle element of the data set,
essentially the median, and compares it against a target value. If the values match it will return success. If the target
value is higher than the value of the probe element it will take the upper half of the data set and perform the same
operation against it. Likewise, if the target value is lower than the value of the probe element it will perform the
operation against the lower half. It will continue to halve the data set with each iteration until the value has been
found or until it can no longer split the data set.
This type of algorithm is described as O(log N). The iterative halving of data sets described in the binary search example
produces a growth curve that peaks at the beginning and slowly flattens out as the size of the data sets increase e.g.
an input data set containing 10 items takes one second to complete, a data set containing 100 items takes two seconds,
and a data set containing 1000 items will take three seconds. Doubling the size of the input data set has little effect
on its growth as after a single iteration of the algorithm the data set will be halved and therefore on a par with an
input data set half the size. This makes algorithms like binary search extremely efficient when dealing with large data sets.
It is Ok if this all seems too complicated, a key to understanding Big O is writing programs, and actually thinking about
what kind of time and complexity you think they work in. In this case, practice makes perfect.
```
### CSS

Hey mentor,

I'm having a really hard time with some CSS. I've been given a PSD in an assignment. I know what the document should look
like, but I'm getting this instead.

Can you help me with this? Here is my code!

-Student
```css
<header>

</header>
<section class="pricing">
  <div class="pricing-tiers">
    <div class="tier">
      <h1>The plan</h1>
      <ul>
        <li>You get all the things</li>
        <li>plus more!!</li>
      </ul>
    </div>

    <div class="tier">
      <h1>The plan</h1>
      <ul>
        <li>You get all the things</li>
        <li>plus more!!</li>
      </ul>
    </div>

    <div class="tier">
      <h1>The plan</h1>
      <ul>
        <li>You get all the things</li>
        <li>plus more!!</li>
      </ul>
    </div>
  </div>
</section>
header {
  width: 100%;
  height: 60px;
  background-color: #333;
}

.pricing {
  width: 100%;
  padding: 20px;
  background-color: tomato;
}

.pricing-tiers {
  width: 960px;
  margin: 0px auto;
  background-color: #ddd;
}

.pricing-tiers .tier {
  width: 260px;
  margin: 20px;
  padding: 10px;
  background-color: white;
  float: left;
}

.tier h1 {
  font-family: "Helvetica", sans-serif;
  font-weight: bold;
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
}

.pricing-tiers > .tier:last-child {
  margin-right: 0px;
}
```
```
CSS can be tricky sometimes. There are a few small changes that we need to make to fix this layout. I encourage you to open
the chrome dev tools and make the changes one by one so you can see the effect. Once you get it how you like, you can make
the same changes to your CSS.
The first thing we’d like to have is the orange and gray outlines to stretch around our three boxes. This can be fixed by
adding display: inline-block; to the .pricing-tiers selector. This has to do with the fact that inline-block elements and
block (what it was before) elements handle height differently. Essentially, as a block element, it sees no direct text in
the div, so it assumes a height of zero. It should work well for this application though. Now the heights look right, but
it is no longer centered. We can fix this by adding text-align: center; to the .pricing selector. The text inside the smaller
boxes is centered, but we want them aligned left. For this, we’ll use text-align: left;. We could add this as a property to
each box, but instead, we can add it to the .pricing-tiers selector and the boxes will all inherit it. Lastly, lets get rid
of those ul bullets. We can do this with list-style-type: none;. Instead of applying it to ul, lets apply it to .tier ul in
case we decide we need the bullets elsewhere on the page.
The best way to work with CSS, is to play around with it using the inspector tools, and once you have it the way you like,
to make the changes in the CSS file.


```