Class 7: JavaScript Functions

Here is a basic Javascript function

There is another syntax which I encourage you not to use: function poly_eval(x){ /* code */}. My version is an anonymous function that you save into a variable name which gives you more freedom. Also my anonymous function inherits the same scope as the surrounding code. (details: here at MDN )

There are also now (in many browsers), arrow functions complete syntax here which look like:

      
empty = () => {};

ident = x => x;
square = x => x*x;
obj_make = val => ({key: val});
odds = evens.map(x => x + 1);
fives = [];
naturals.forEach(x => {if (x % 5 == 0) fives.push(x);});
      
    

Master Task 1: Create a function which uppercases an input string using 4 different styles of function declaration.

Javascript passes around functions in a very functional way. Check out map, filter, reduce (in the standard Array methods ).

Functional Task 2: Use .map to apply your function to the array fam = ["andy", "sara", "simone"];. Now filter to just the family members that start with the letter "s" using (Array.filter).

Golf Task 3: Let's do code golf on the following task. Give me an array of the prime numbers less than 100. Fewest characters wins, submit code in chat. (ES6 is welcome.)

Events

Let's talk events. There are events going on all of the time.

Gotta Log em All Task 4: Follow the steps at this SO answer (Developer tools on Chrome, Timeline, Record, do actions then finish recording). Look at the mass of events. Zoom in until you can find some mouse events.

We can register an event listener using target.addEventListener('eventtype', callback), like this:

Basic Click Listener Task 5: Write a click listening function that rolls a die (changes the value of an element on to a random number from 1 to 6).

Event listeners are passed an all important event object. Take a look at this example:

See the Pen JGyWyW by Andy Novocin (@AndyNovo) on CodePen.

Events bubble up, so a click on an HTML child gets passed to the HTML parent. You can prevent this (you want the click to only be registered on one div for instance).

Event Selection Task 6: Pick 2 interesting sounding events from this list of standard events. Write a demo page which changes when those events fire.

Inputs

One glaring absence from the first JS lecture is input from users. My favorite HTML tag is the input tag and all of it's wonderful types. To read the value from an input box we just need the element.value attribute of a selected input element.

Input Sample Task 7: Build a demo with "data-binding" that takes in a user's name and as they type it ('keyup') it shows up on screen. (For HW perhaps try reading color data, checkbox state, selected option from a dropdown.)

Fun Group Task

Hangman Task 8: Create a hangman game in the remaining time. Choose a codeword (possibly from an array of codewords), display a "blank" for each letter, make an input box for text, when a guess is made (button clicked or letter entered), check to see if it is already selected or in the codeword, if not in codeword tell them they got it wrong (and increment a counter), if so reveal those letters. If the counter is too high death if the word is totally revealed victory. You can work with a partner or group if it will help, but communicate effectively using contracts otherwise you will spend too much time talking and not enough time building.