##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
<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>
#Mentor:
This issue is with how the 'for' loop goes through each item in the array.
If we read it top to bottom, the function says:
array of prizes = 'A Unicorn!', 'A Hug!', and 'Fresh Laundry!' we want to go through each item of the array, starting from the first item (starts at zero).
Each time through the loop, 'btnNum' changes value, but does not print each value it's being assigned.
first loop:
btnNum[0] == 'A Unicorn!'
second loop:
btnNum[1] == 'A Hug!'
third loop:
btnNum[2] == 'Fresh Laundry!'
fourth loop:
btnNum[3] == 'undefined'
So, the last item assigned to 'btnNum' is 'undefined' because the loop went through all of the items in the array, and finished on index '3' (prizes.length == 3).
alert(prizes[btnNum]); => undefined
And we don't have a value for the '3'rd index of the array, hence the returned alert = 'undefined'.
##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
#Mentor:
As you've probably read about associations between Models in Rails, has_many association is like an Article 'has_many' Comments, and many Comments have 'one' Article it is associated with, or a 'has many-to-one' association.
A has_many :through association is made when two models have multiple associations with each other, or a 'has many-to-has many' association. Example would be a Student 'has many' Teachers, and vice versa, a Teacher 'has many' Students.
A has_one :through association is made between a single 'belongs_to' associates two models , or a 'one-to-one' association. An example would be if a Kid belongs_to a Bike, and Bike belongs_to a Kid.
##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
#Mentor
Here's a link to a helpful article: https://www.acunetix.com/websitesecurity/sql-injection/
TL;DR
"SQL Injection (SQLi) refers to an injection attack wherein an attacker can execute malicious SQL statements that control a web application’s database server. Since an 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.
By leveraging an SQL Injection vulnerability, given the right circumstances, an attacker can use it to bypass a web application’s authentication and authorization mechanisms and retrieve the contents of an entire database. SQL Injection can also be used to add, modify and delete records in a database, affecting data integrity."
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?
-Student
#Mentor
reference links: https://angularjs.org/ https://jquery.com/
AngularJS is considered a Javascript framework, and jQuery is a library, and they are not the same.
The difference is how they are used. jQuery is simply shorthand Javascript to make it faster to write code, and AngularJS is a file structure, written in Javascript, that has specific ways to use each component to make web applications.
Think of AngularJS as a bike, and jQuery as the training wheels. AngularJS needs the rider to pedal and steer the bike in a specific way. jQuery is there to make riding (writing code) easier until you learn to ride without them.
The benefits of AngularJS is that it is a layout of your app, and you'll have to learn what each piece does to make your application. It determines how the different parts of the app will communicate with each other. There is an extensive and helpful reference guide to get started. I personally felt confused about the MVC framework at first with Model-View-Controller, but after understanding them and working through a few errors, it becomes logical. AngularJS uses declarative HTML (fancy for 'extra html' in element tags) that shows that an element will do.
The drawbacks to AngularJS would be the use of needing a framework for a small application, as it might have too much extra stuff you won't use.
The benefits of jQuery are the ease of use and the supportive community/documentation (most companies have used, or currently use jQuery)
jQuery shortens the code from document.getElementByID('main').toUpperCase(); or document.getElementByClass('main').toUpperCase(); to $('main').toUpperCase to make it more efficient to write code. jQuery makes logical assumptions.
##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
#Mentor
reference links: https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/
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."
0(1) means that the algorithm will produce a result at the same rate everytime.
i.e. let name = 'John'; const myNameIs = function(n) { return n; } => 'John'
0(N) means an algorithm will output at the same rate as the input values.
i.e. const numbers = [1,2,3,4,5,6,7,8,9,10];
const looped = function(numbers) {
for (let num of numbers) {
if (num % 2 === 0) console.log(true);
console.log(false);
}
};
looped(numbers);
=> false, true, false, false, true, false, false, true, false, false, true, false, false, true, false
0(N^2) means the 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."
##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
<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;
}
#Mentor
Sometimes figuring out can be intimidating and hard to figure out, but I took a look at your code and it's not too far off.
.pricing {
width: 100%;
/* */
height: 200px;
padding: 20px;
background-color: tomato;
}
We start with your .pricing selector, as you want to work with the outer most scope
.pricing-tiers .tier {
width: 260px;
background-color: white;
float: left;
/* */
border: 20px solid #ddd;
/* margin: 20px; */
/* padding: 10px; */
}
Then I added some properties to your .tier selector because each 'tier' needs the same border. I added a border and took away the margin and padding to leave no gaps between each 'tier'
Your CSS should look like this:
header {
width: 100%;
height: 60px;
background-color: #333;
}
.pricing {
width: 100%;
/* */
height: 200px;
padding: 20px;
background-color: tomato;
}
.pricing-tiers {
width: 960px;
margin: 0px auto;
background-color: #ddd;
}
.pricing-tiers .tier {
width: 260px;
background-color: white;
float: left;
/* */
border: 20px solid gray;
/* margin: 20px; */
/* padding: 10px; */
}
.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;
}