|
| 1 | +# Intro to `function`s |
| 2 | + |
| 3 | +## Objectives |
| 4 | + |
| 5 | +1. Know what a `function` is and why we have them |
| 6 | +1. Create a `function` |
| 7 | +1. Invoke a `function` |
| 8 | +1. Know the difference between a `return` statement and `console.log` |
| 9 | + |
| 10 | +## Lecture Slides |
| 11 | + |
| 12 | +[Slides are here](https://docs.google.com/presentation/d/e/2PACX-1vSo5deQKWpUrkPQx4DsKRVmSB1kzr0fvN4hf5GGDG1Ic8dk-_PtLFbqzFuSEwpfCtNYhEGy82oMiRyA/embed?start=false&loop=false&delayms=10000) |
| 13 | + |
| 14 | +## Exercises |
| 15 | + |
| 16 | +### Explore Your Template |
| 17 | + |
| 18 | +1. Download this zip to get started with the exercises below. |
| 19 | +1. Unzip the contents. |
| 20 | +1. Working with the person next to you, try to see if you can figure out how to open the `your-template` folder on Visual Studio Code. |
| 21 | +1. Once you have the folder contents open on Visual Studio Code, take a look at the contents! What do you see? |
| 22 | +1. For the exercises below, you will do them in the `.js` file. |
| 23 | + |
| 24 | +### Basic Requirements |
| 25 | + |
| 26 | +// <-- Two backslashes mark a comment and comments are ignored by the JavaScript engine (the program which reads our code and does stuff.) |
| 27 | + |
| 28 | +```js |
| 29 | +// This line is a comment and not code. |
| 30 | +// This line is also a comment. |
| 31 | +``` |
| 32 | + |
| 33 | +You can also surround multiple lines of comments with a backslash and asterisk |
| 34 | + |
| 35 | +```js |
| 36 | +/* This is more than one line of comments |
| 37 | +In fact it is two lines */ |
| 38 | +``` |
| 39 | + |
| 40 | +1. Now that we are writing our JavaScript in a file rather than directly in the console, we will need to use `console.log` to make sure that values print in our console. Enter the following two lines into your **script.js** file. Open the **index.html** file in your browser and open the developer tools. What do you see in your developer console? |
| 41 | + |
| 42 | + ```js |
| 43 | + 5 + 6; |
| 44 | + console.log(6 + 6); |
| 45 | + ``` |
| 46 | + |
| 47 | + Why does it work this way? |
| 48 | + |
| 49 | +1. Use the `function` below to return the sum of two `number`s. Enter the following code in your script.js file: |
| 50 | + |
| 51 | + ```js |
| 52 | + function add(numOne, numTwo) { |
| 53 | + return numOne + numTwo; |
| 54 | + } |
| 55 | +
|
| 56 | + // Tests |
| 57 | + console.log(add(4, 3)); // should return 7 |
| 58 | + console.log(add(100, 42)); // => 142 |
| 59 | + ``` |
| 60 | + |
| 61 | + **Something Cool**: `function`s that you declare in your **script.js** are available in the console. Try entering the two tests directly in the developer console. You should continue to put your tests in the **script.js** file, but this can be useful when debugging. |
| 62 | + |
| 63 | +1. Declare a function named _subtract_ that subtracts the second argument from the first argument. Remember to try the test cases to see if your function works. |
| 64 | + |
| 65 | + ```js |
| 66 | + function subtract(num1, num2) { |
| 67 | + // your code here |
| 68 | + } |
| 69 | + ``` |
| 70 | + |
| 71 | + Test cases: |
| 72 | + |
| 73 | + ```js |
| 74 | + console.log(subtract(4, 3)); // => 1 |
| 75 | + console.log(subtract(100, 42)); // => 58 |
| 76 | + ``` |
| 77 | + |
| 78 | +1. Declare a `function` named _greeting_ that takes a name `string` as an argument and prints hello! |
| 79 | + |
| 80 | + ```js |
| 81 | + // Your code here |
| 82 | + ``` |
| 83 | + |
| 84 | + Test cases: |
| 85 | + |
| 86 | + ```js |
| 87 | + console.log(greeting("Alex")); // => "Hello, Alex!" |
| 88 | + console.log(greeting("Beau")); // => "Hello, Beau!" |
| 89 | + ``` |
| 90 | + |
| 91 | +1. Declare a `function` called _average_ that takes two `number`s as inputs and returns the average of those `number`s. This time, write two tests for your `function` by yourself! |
| 92 | + |
| 93 | +### Advanced Requirements |
| 94 | + |
| 95 | +1. Check out [this pdf of geometry formulas](http://www.gbcnv.edu/documents/ASC/docs/00000005.pdf). Declare `function`s representing each of the formulas. |
0 commit comments