Recap: Programming Fundamentals

by Kayla Dreisinger | Web Development


Posted on July 4th, 2017



Lately I've been learning web development. I am currently working through Udacity's Front End Nanodegree. Having gotten past the HTML and CSS sections of the class, I'm now taking on programming fundamentals specifically in Javascript.

This blog post serves as a synopsis of what I've taken away and a few snippets of code to demonstrate my new found ability.

I really enjoyed working through this lesson because it broke up sections of code into manageable chunks and showed you how to add them together.

1. Conditionals.

First, the lesson started with conditionals. Here, I learned about:

  • Logical Operators
  • Complex logical expressions (how logical operators can be used in conjunction with boolean values)
  • Logical expressions that return boolean values
  • Definitions of truthy and falsy
  • Ternary operators (short cuts for writing if/else statements)

Through out the lesson, I went through a series of exercises that accumulated in independently writing code to re-create a Murder Mystery game. If you're not familiar with the game, it is typically played at parties in real life where one person is assigned the role as the murderer unknown to the other guests. As the party goes on, the host drops clues throughout, and the other attendees must guess who is the murderer. Recreating this in code, we assigned variables to all of the objects involved then wrote statements based off of what the host assigned.

var room = "dining room"; var suspect = "Mr. Parkes";
var weapon = "";
var solved = false;
if (room==="dining room" && suspect ==="Mr. Parkes") {
weapon ="knife";
solved = true;
} else if (room==="billards room" && suspect==="Mrs. Sparr") {
weapon = "pool stick";
solved = true;
} else if (room==="gallery" && suspect==="Ms. Van Cleve") {
weapon="trophy";
solved = true;
} else (room ==="ballroom" && suspect ==="Mr. Kalehoff");{
weapon ="poison";
solved = true;
}
if (solved === true) {
console.log(suspect + " did it in the " + room + " with the " + weapon +"!");
}


2. Loops

Here we explored for loops and while loops and how they can help you write more efficient code in fewer lines. All loops must have three vital pieces of information: when to start, when to stop, and how to get to the next item. Its important to specify when your loop should stop running or else you run the risk of crashing your browser! We covered the short hand way to write incremental values, factorials, and how to write nested loops.

This is a piece of code I wrote to cycle through the (used to be popular) road trip song "99 bottle of beer on the wall", feel free to run it in your browser!

var num = 99;
while (num >= 0) {
if (num > 2){ } else if (num < 2){
console.log(num + " bottles of juice on the wall! 2 bottles of juice! Take one down, pass it around..." + (num - 1) + " bottles of juice on the wall!");
}
num = num - 1
}

We also learned how to tackle the ever popular programming test FizzBuzz, but with a slight twist. These were the directions given by Udacity:

Write a while loop that:

  • Loop through the numbers 1 to 20
  • If the number is divisible by 3, print "Julia"
  • If the number is divisible by 5, print "James"
  • If the number is divisible by 3 and 5, print "JuliaJames"
  • If the number is not divisible by 3 or 5, print the number

See my answer below. All code is my own.

var x = 1;
while (x <= 20) {
if(x % 3 === 0 && x % 5 === 0){
console.log("JuliaJames");
}else if (x % 5 === 0){
console.log("James");
} else if(x % 3 ===0){
console.log("Julia");
} else if(x %3 !== 0 && x % 5 !== 0){
console.log(x);
}
x = x + 1
}


3. Functions

This was both exciting and (the most) challenging at the same time. I really enjoyed learning about functions because I was able to start using conditionals and loops inside these statements. Topics we covered include:

  • Scope ( Global vs Local Variables)
  • Hoisting
  • Expressionsvs Declarations

One exercise I worked on was building a triangle. This involved two functions, a makeLine function that produced X number of asterisks (*) dependent upon it's parameter of length. And a buildTriangle function with a maxWidth parameter that ran a for loop that would return rows of asterisks! See my code here:

function makeLine(length) {
var line = "";
for (var j = 1; j <= length; j++) {
line += "* ";
}
return line + "\n";
}
function buildTriangle(widestWidth){
var newRow=""
for(i =1; i<=widestWidth; i++){
newRow += makeLine(i);
}
return newRow;
}
console.log(buildTriangle(10))


4. Arrrays

Arrays are another way to store data kind of like a list. They are defined by square brackets [] where you can separate values by commas. An important thing to note is that their index (location in an array) starts at zero and not one! You can change the value of an array by targeting it through it's index. Arrays can also be nested inside each other, similar to loops.

In this lesson arrays were used to introduce methods, The ones we worked with directly were: push .pop .length .forEach and .splice.

I found the .forEach method to be useful as a way to replace loops. Check out this exercise I coded below, the directions were, "Use the array's forEach() method to loop over the following array and add 100 to each of the values if the value is divisible by 3."

var test = [12, 929, 11, 3, 199, 1000, 7, 1, 24, 37, 4, 19, 300, 3775, 299, 36, 209, 148, 169, 299, 6, 109, 20, 58, 139, 59, 3, 1, 139];
test.forEach(function(num){
if(num % 3 === 0){
test.splice(num, 1, num+=100);
}
});
console.log(test)


5. Objects

Lastly we learned about creating objects and how they are able to hold all of the different aspects of programming inside them...cool! The entire object is wrapped inside curly brackers {}. The key helps you keep track of all the data inside the object and is written as key : value,

Here is an object I coded that represents my Facebook profile. It was three variables: name, number of friends, and messages. Once those variables are defined, I've applied four methods to the object that all do different things. See below:

var facebookProfile = {
name: "Kayla",
friends: 534,
messages:["hi", "Good", "what's up?"],
postMessage: function(message){
facbookProfile.messages.push(message);
},
deleteMessage: function(index){
facebookProfile.messages.splice(index, 1);
},
addFriend: function(){
return friends+=1;
},
removeFriend: function(){
return friends-=1;
}
};


I'm stoked to be learning about these fundamentals of programming. I can't wait to add more advanced skills to my coding knowledge!

My favorite thing about this class (so far) is that they don't hand-hold you the way I've worked through coding classes in the past. They give you the principles, lay out a problem, show you examples, and then set you free to write brand new code from scratch. Additionally, they point you in the right direction of resources to utilize for your own research and understanding. As such, I'm building up quite the library of resources I'm familiar with and it's a good feeling!


Leave a Comment