Homework Part 3

Complete the JS part of the mad libs game.

Homework Part 2

Finish implementing the JS part of battleship

Rock-Paper-Scissors Homework

Finish the JS part of rock paper scissors

Function Constructors with Functions Defined

Function constructors with functions defined

var john = { name: 'John', age: 26, job: 'teacher', presentation: function(style, timeOfDay) { if (style === 'formal') { console.log('Good ' + timeOfDay + ', Ladies and gentlemen! I\'m ' + this.name + ', I\'m a ' + this.job + ' and I\'m ' + this.age + ' years old.'); } else if (style === 'friendly') { console.log('Hey! What\'s up? I\'m ' + this.name + ', I\'m a ' + this.job + ' and I\'m ' + this.age + ' years old. Have a nice ' + timeOfDay + '.'); } } };

Coding Exercise 6

Fill in the Javascript part of the code to complete functionality. A user should be prompted for 6 questions, including their first name, last name, birth year, favorite movie, favorite sport, and favorite book. Once all the info is inputted, the users information should be displayed below the input. You may have to change parts of the html code.

Coding Exercise 5

1. Build a function constructor called Question to describe a question. A question should include: a) question itself b) the answers from which the player can choose the correct one (choose an adequate data structure here, array, object, etc.) c) correct answer (I would use a number for this) 2. Create a couple of questions using the constructor 3. Store them all inside an array 4. Select one random question and log it on the console, together with the possible answers (each question should have a number) (Hint: write a method for the Question objects for this task). 5. Use the 'prompt' function to ask the user for the correct answer. The user should input the number of the correct answer such as you displayed it on Task 4. 6. Check if the answer is correct and print to the console whether the answer is correct ot nor (Hint: write another method for this).


These are examples of closures, functions that return functions within.

function retirement(retirementAge) { var a = ' years left until retirement.'; return function(yearOfBirth) { var age = 2016 - yearOfBirth; console.log((retirementAge - age) + a); } } var retirementUS = retirement(66); var retirementGermany = retirement(65); var retirementIceland = retirement(67); retirementGermany(1990); retirementUS(1990); retirementIceland(1990);

The concept of IIFE

Sometimes you want to create functions that run write when the browser is initialized, meaning you do not need to call this function. It will execute on initialization. IIFE stands for immediately invoked function expression. Run the code below, notice how parameters are defined.

function game() { var score = Math.random() * 10; console.log(score >= 5); } game(); (function () { var score = Math.random() * 10; console.log(score >= 5); })(); //console.log(score); (function (goodLuck) { var score = Math.random() * 10; console.log(score >= 5 - goodLuck); })(5);

Functions that return other functions

Functions can also return other functions. Run the code below and see what the output shows.

function interviewQuestion(job) { if (job === 'designer') { return function(name) { console.log(name + ', can you please explain what UX design is?'); } } else if (job === 'teacher') { return function(name) { console.log('What subject do you teach, ' + name + '?'); } } else { return function(name) { console.log('Hello ' + name + ', what do you do?'); } } } var teacherQuestion = interviewQuestion('teacher'); var designerQuestion = interviewQuestion('designer'); teacherQuestion('John'); designerQuestion('John'); designerQuestion('jane'); designerQuestion('Mark'); designerQuestion('Mike'); interviewQuestion('teacher')('Mark');

Passing Functions as Arguments

This shows how functions can be passed as arguments. Run the following code and see what the output looks like.

var years = [1990, 1965, 1937, 2005, 1998]; function arrayCalc(arr, fn) { var arrRes = []; for (var i = 0; i < arr.length; i++) { arrRes.push(fn(arr[i])); } return arrRes; } function calculateAge(el) { return 2016 - el; } function isFullAge(el) { return el >= 18; } function maxHeartRate(el) { if (el >= 18 && el <= 81) { return Math.round(206.9 - (0.67 * el)); } else { return -1; } } var ages = arrayCalc(years, calculateAge); var fullAges = arrayCalc(ages, isFullAge); var rates = arrayCalc(ages, maxHeartRate); console.log(ages); console.log(rates);

Object Oriented Programming

In lines 1 -5, we are creating a Person object. This is called a function constructor, it contains properties such as name, year of birth and job. We are using the this keyword to make our own copy of the variables, which is distinct from the function parameters. A prototype is a way of creating properties for the object which will be universal to all objects that inherit from this object. For Mark, Jane and John - their names, years of birth and job may be different. However the process of calculating their age is universal for all of them. We are also assuming they are siblings since we have given them all the same last name. Lines 11-13 connect to the idea of inheritance. John inherits the properties of Person, but also defines its own content for these properties. Name, year of birth and job. Lines 14-16 are calculating age for these people.

var Person = function(name, yearOfBirth, job) { this.name = name; this.yearOfBirth = yearOfBirth; this.job = job; } Person.prototype.calculateAge = function() { console.log(2016 - this.yearOfBirth); }; Person.prototype.lastName = 'Smith'; var john = new Person('John', 1990, 'teacher'); var jane = new Person('Jane', 1969, 'designer'); var mark = new Person('Mark', 1948, 'retired'); john.calculateAge(); jane.calculateAge(); mark.calculateAge();

Advanced Javascript Datatypes

We will be going through more complicated data types in Javascript starting with function constructors and object data types

1 2 ... 4