Jacob Johns Basic JS Lesson

Comment Your JS Code

Regularly add comments to clarify the function of parts of code

Declare JS Variables

Variable allow computers to store & manupulate data in a dynamic fasion

Storing Values with the Assignment Operator

Assignment Operator is '='

Assigning the Value of One Variable to Another

An assigned variable can be assigned to another variable

INitializing Variables with the Assignment Operator

Initalize a variable to a value in the same line as it is declared

Understanding Uninitialized Variables

When JS variables are declared their initial value is undefined

Understanding Case Sensitivity in Variables

Variables and Functions are case sensitive

Numbers & JavaScript

Number is a data type which represents numeric data

Compound Assignments

+= | -= | *= | /=

STRINGS!

Declare, Escape Quotes, Quoting, Escape Sequences, Concatenating, Append, etc...

							var myName = 'Jacob'; //declare
							var doubleQuotedString = "I am a /"double quoted/" string inside /"double quotes /"."; //escaping literal quotes
							var singleDoubleQUotes = 'Someone might say,"This is pointless."'; //quoting strings with single quotes
							var lineSequences = 'FirstLine/n/t//SecondLine/nThirdLine'; //escaping sequences in strings
							var concatenatingStrings = 'This is the start.' + ' This is the end.'; //concatenating strings with the plus operator
							var plusEqualsOperator = 'This is the first sentence. ';
							plusEqualsOperator += 'This is the second sentence.'; //concatenating strings with plus equals operator
							var helloGreeting = 'Hello my name is ' + myName + '.'; //constructing sentences with variables;
							var nameSentence = 'My name is ';
							nameSentence += myName; //appending variables to strings
							nameLength = myName.length; //find length of string

Bracket Notation

A way to get a character at a specific index within a string

Arrays

JavaScript array variables can store several pieces of data in one place

							var demographics = ['Jacob', 28]; //Basic array construction
							var teams = [['Titans','Tennessee']['Redskins','Washington']]; //nested arrays
							var firstItemInDemographics = demographics[0]; //arrays can be indexed
							demographics[1] = 29; //arrays are mutable unlike strings
							var numbers = [[1,2,3],[4,5,6],[7,8,9],[[10,11,12],13,14,15]];
							var eleven = numbers[3][0][1]; //multi-dimensional arrays can also be indexed
							demographics.push(["6ft. 1in.", "brown hair"]); //append data with push()
							favoriteTeam = teams.pop(); //pop() will remove the last variable in an array
							myName = demographics.shift(); //shift will remove the first variable in an array
							demographics.unshift('Joe'); //unshift works like push but put the variable at the beginning of the array

Functions!

Divide up code into reusable parts called functions

							function myFunction {
								console.log("Something to the console"); //basic function construction
							}
							myFunction(); //how to call said basic function
							function addTwoNumbers(a,b) {
								console.log(a + b); //function with args
							}
							addTwoNumbers(1,2); //how to call functions with args
							var globalVariable = 'This is global'; //variables created outside of functions are in the global scope
							function anotherFunction() {
								oppsGlobal = 'This is global as well'; //variables created without the var keyword are also in the global scope
							}
							function yaf() {
								var localVar = 'This is local to the function'; //variables created with-in the function using the keyword var are in the local scope
								console.log(localVar); //returns the variable
							}
							console.log(localVar); //returns localVar is not defined
							var meVar = 'Global loses';
							function localWins() {
								var meVar = 'Local takes precedence'; //local scope vars take precedence over globally defined vars
							}
							function timesFive(a) {
								return a * 5; //return will send back a value from a function
							}
							function undefinedReturn() {
								globalVariable = globalVariable + ' and I can add to it from an undefined function';
							} //functions don't require a return... we can change the globalVariable and the function will return undefined
							var ten = timesFive(2); // as everything to the right of an equal sign is resolved before the value is assigned we can call a function get the return and then assign it to our variable
							function myQueue(arr,num) {
								arr.push(num);
								var item = arr.shift(); //a queue removes old data from the front of an array and adds on the new data to the end like so
								return item;
							}
							var numArray = [1,2,3,4,5,6,7,8,9,10];
							myQueue(numArray,11);

Boolean Values

Boolean: true or false, yes or no, on or off

Comparison with If Statements

If statements make the decisons around here

							if (var == 10) { do stuffs; } //equality operator
							if (var === 7) { do stuffs; } //strict equality operator does not convert data types so "7" and 7 are different
							typeof '10'; //typeof shows the data type of a value/variable
							if (var != 99) { do stuffs; } //not equal operator
							if (var !== 17) { do stuffs; } //not strictly equal does not convert data types
							if (var > 10) { do stuffs; } //greater than operator
							if (var >= 20) { do stuffs; } //greater than or equal to operator
							if (var < 55) { do stuffs; } //less than operator
							if (var <= 35) { do stuffs; } //less than or equal to operator
							if (var <= 50 && var >= 25) { do stuffs; } //&& (and) logical operator returns true if and only if the left and right operands are true
							if (var < 10 || var > 20) { do stuffs; } //|| (or) logical operator returns true if either of the operands are true
							if (var > 5) { do stuffs; } else { do other stuffs; } // if/else statement - when the first block is false the preceding blocks can be execuded
							if (var > 5) { do stuffs; } else if (var < 10) { do stuffs; } else { console.log("outside 5-10");} // if/elseif statement - chain if statements together if you have multiple conditions that need to be addressed
							if (var < 2) { return 'less than 2';} else if (var < 1) { return 'less than 1';} else { return 'greater than 2';} //functions are executed from top to bottom - order is important in if statements
							if (var < 5) { do stuff; } else if (var < 10) { do stuff; } else if (var < 15) { do stuff; } // if/else statements can be chained

Golf Code Challenge

Simple challenge

Switch Statements

If you have many options to choose from, use a switch statement

							function caseInSwitch(val) {
								var answer = "";
								switch (val) {
									case 1:
										answer = "alpha"; //statements are executed for the first matched case value until a break is encoutered
										break;
									case 2:
										answer = "beta"; //case values are tested with strict equality
									default:
										answer = "Not 1 or 2"; //add a default option 
										break; //if break is omitted the next statement will be executed
									}
								return answer;
							}
							caseInSwitch(2);

							function sequentialSizes(val) {
								var answer = "";
								switch (val) { //multiple inputs with the same output can be represented as so
									case 1:
									case 2:
									case 3:
										answer = "Low";
										break;
									case 4:
									case 5:
									case 6:
										answer = "Mid";
										break;
									case 7:
									case 8:
									case 9:
										answer = "High";
										break;
									default:
										answer = "invalid";
										break;
								}
							return answer;
							}
							sequentialSizes(1);

							//switch statements can be easier to write than many chained if/else if statements

Returning Boolean Values from Functions

Simplifying if/else statements

Counting Cards Challenge

A player can gain an advantage over the house by keeping track of the relative number of high & low cards remaining in the deck

							/* 
							instructions
							You will write a card counting function. It will receive a card parameter, which can be a number or a string, and increment or decrement the global count variable according to the card's value (see table). The function will then return a string with the current count and the string Bet if the count is positive, or Hold if the count is zero or negative. The current count and the player's decision (Bet or Hold) should be separated by a single space.

							+1 = 2, 3, 4, 5, 6
							0 = 7, 8, 9
							-1 = 10, J, Q, K A
							*/

							// My solution

							var count = 0;
							function cc(card) {
								var answer = "";
								switch (card) {
									case 2:
									case 3:
									case 4:
									case 5:
									case 6:
										count += 1;
										break;
									case 10:
									case "J":
									case "Q":
									case "K":
									case "A":
										count -= 1;
										break;   
								}
								if (count > 0) {
									answer = count + " Bet";
									console.log(count);
								} else {
									answer = count + " Hold";
								}
								return answer;
							}
							cc(2); cc(3); cc(7); cc('K'); cc('A');

JavaScript Objects

Objects are useful for storing data in a structured way, and can represent real world objects. Similar to arrays except you access the data via properties.

							var myDog = {
								name: "Rusty", //single-word string properties do not require quotes
								"age": 10,
								"color": "brown", //JS will typecase non-string properites as strings
								"likes": ["bones","people food"],
								"dislikes": ["kids","other animals"],
							}

							var myDogsAge = myDog.age; //acces an object's property with dot notation
							var myDogsName = myDog["name"];  //or with bracket notation

							var playerRoster = {
								3: "Jacob",
								4: "Kim",
								22: "Joe",
								13: "Jordan",
							}
							var mvpPlayer = 4;
							var player = playerRoster[mvpPlayer]; //access a property as the value of a variable

							myDog.age = 11; //change an object's property like so
							myDog.bark = "loud"; //add new property to object
							delete myDog.color //delete property from object

							function phoneticLookup(val) {
								var result = "";
								var lookup = {
									alpha: "Adams",
									bravo: "Boston",
									charlie: "Chicago"
								}
								var result = lookup[val]; //don't use dot notation here
								return result;
							}
							phoneticLookup("charlie"); //using objects as a key/value storage is most useful when you know input data is limited to a certain range

							function checkObj(obj, checkProp) {
								var result = "";
								var bool = obj.hasOwnProperty(checkProp); //to check if the property of a given object exists or not
								if (bool) {
									result = obj[checkProp];
								} else {
									result = "Not Found";
								}
								return result;
							}

							//complex objects
							var musicAlbum = [
								{
									"artist": "Billy Joel",
									"title": "Piano Man",
								    "release_year": 1973,
								    "formats": [
								      "CD",
								      "8T",
								      "LP"
								    ],
								    "gold": true
								},
								{
									"artist": "Burried Within",
								    "title": "Burried Within",
								    "release_year": 2014,
								    "formats": [
								        "CD",
								        "8T"
								    ],
								    "gold": false
								}
							]
							var brothersBand = musicAlbum[1]["artist"];

							//access nested objects by chaining together dot or bracket notation
							var storage = {
								"car": {
							    "inside": {
							      "glove box": "maps",
							      "passenger seat": "crumbs"
							     },
							    "outside": {
							      "trunk": "jack"
							    }
							  }
							};
							var gloveBoxContents = myStorage.car.inside["glove box"];

Record Collection Challenge

It's the final count down!

							/* instructions
							Your function must always return the entire record collection object.
							If prop isn't tracks and value isn't an empty string, update or set that album's prop to value.
							If prop is tracks but the album doesn't have a tracks property, create an empty array and add value to it.
							If prop is tracks and value isn't an empty string, add value to the end of the album's existing tracks array.
							If value is an empty string, delete the given prop property from the album.
							*/

							// Setup
							var recordCollection = {
								2548: {
									albumTitle: 'Slippery When Wet',
									artist: 'Bon Jovi',
									tracks: ['Let It Rock', 'You Give Love a Bad Name']
								},
								2468: {
									albumTitle: '1999',
									artist: 'Prince',
									tracks: ['1999', 'Little Red Corvette']
								},
								1245: {
									artist: 'Robert Palmer',
									tracks: []
								},
								5439: {
									albumTitle: 'ABBA Gold'
								}
							};

							//My solution
							function updateRecords(records, id, prop, value) {
								var isTracks = prop == "tracks";
								var isArtist = prop == "artist"; //didn't need but when I started thought I would, so I left to show the work
								var hasTracks = records[id].hasOwnProperty(prop);
								if (!(value)) {
									delete records[id][prop];
								} else if (isTracks && hasTracks) {
									records[id][prop].push(value);
								} else if(isTracks && !(hasTracks)) {
									records[id][prop] = [value];
								} else if (!(isTracks)) {
									records[id][prop] = value;
								} else {
									console.log("not done yet");
								}
								return records;
							}

							//example call
							updateRecords(recordCollection, 5439, 'artist', 'ABBA');

JavaScript Loops

Run the same code multiple times

							//while loop
							var anArray = [];
							var i = 0;
							while (i < 5) {
								anArray.push(i); //loop will execute 5 times and append numbers 0-4 to our array
								i++;
							}

							//for loop - for (a; b; c;) {};
							var myArray = [];
							for (var i = 1; i < 6; i++) { //count 1-5
								myArray.push(i);
							}
							for (var i = 1; i < 10; i += 2;) { //count 1-9 odd #s
								myArray.push(i);
							}
							for (var i = 1; i > 0; i -= 2) { //count 9-1 odd #s
								myArray.push(i);
							}
							var numbersArray = [2, 3, 4, 5, 6];
							var numbersTotal = 0;
							for (var i = 0; i < numbersArray.length; i++) {
								numbersTotal += numbersArray[i]; //iterate through array contents
							}
							function multiplyNumbers(arr) {
								var product = 1; //loop through multi-dimensional arrays
								for (var i = 0; i < arr.length; i++) {
									for (var j = 0; j < arr[i].length; j++) {
										product *= arr[i][j];
									}
								}
							}
							multiplyNumbers([[1,2],[3,4],[5,6]]);

							//do while loop
							var doArray = [];
							var i = 10;
							do {
								doArray.push(i); //will run at least once
								i++;
							} while (i < 10);

							//recursion
							function sum(arr,n) { //concept that a function can be expressed in terms of itself
								if (n <= 0) { //recursive functions must have a base case or they will never finish executing
									return 0; 
								} else {
									return sum(arr, n - 1) + arr[n -1];
								}
							}
							sum([2, 3, 4, 5], 3); //equals 9

Profile Lookup Challenge

Searching...

							/* instructions
							We have an array of objects representing different people in our contacts lists.
							The function should check if name is an actual contact's firstName and the given property (prop) is a property of that contact.
							If both are true, then return the "value" of that property.
							If name does not correspond to any contacts then return the string No such contact.
							If prop does not correspond to any valid properties of a contact found to match name then return the string No such property.
							*/

							//Setup
							var contacts = [
							    {
							        "firstName": "Akira",
							        "lastName": "Laine",
							        "number": "0543236543",
							        "likes": ["Pizza", "Coding", "Brownie Points"]
							    },
							    {
							        "firstName": "Harry",
							        "lastName": "Potter",
							        "number": "0994372684",
							        "likes": ["Hogwarts", "Magic", "Hagrid"]
							    },
							    {
							        "firstName": "Sherlock",
							        "lastName": "Holmes",
							        "number": "0487345643",
							        "likes": ["Intriguing Cases", "Violin"]
							    },
							    {
							        "firstName": "Kristian",
							        "lastName": "Vos",
							        "number": "unknown",
							        "likes": ["JavaScript", "Gaming", "Foxes"]
							    }
							];

							//my solution
							function lookUpProfile(name, prop){
								for (var i = 0; i < contacts.length; i++) {
							    	if (contacts[i]["firstName"] == name) {
							        	if (contacts[i].hasOwnProperty(prop)) {
							            	return contacts[i][prop];
								        } else {
							    	        return "No such property";
							        	}
							    	}
								}
								return "No such contact";
							}

							//example call
							lookUpProfile("Akira", "likes");

Random with JavaScript

Random numbers are useful for creating random behavior

parseInt Functions

parses a string and returns an integer

Ternary Operators

Also called the conditional operator

Recursion Challenges

Again!?!?

Basic Javascript