OpenBrackets

Intermediate Web Development

Week 6 Day 1

Welcome!

Welcome to class!

This is the Intermediate Web Development class. Make sure you’re in the right place!

​

We’ll be spending all of today tackling functions, which is one of the most important programming concepts.

How are you doing today?

On a scale of 1-10, how are you doing today and why?

​

Asking Questions

Type in chat

Or

1. Click Reactions
2. Click Raise Hand

Functions

• A function is a bit of code that does a certain job
• We’ve used functions before!
• Everything with parentheses at the end, whether or not there’s anything in the parentheses, is a function
• console.log, window.prompt, window.confirm, Math.random, document.getElementById, element.getBoundingClientRect

Calling Functions and Function Parameters

• Calling a function will make its code run
• To call a function, we put parentheses after the function name
• Some functions require extra information
• For console.log, we need to tell the function what to print

Defining Functions

• We can define our own functions
• This helps reduce repeated code
• Our code stays more organized
• Other people can use our code by writing only one line
• Exercise: pick three <p>s in your website and change background color, underline, and font size. Then change its text content as well.
• Give each one the same color/underline/font size/text content

10 minute break!

Defining Functions

• Exercise: pick three <p>s in your website and change background color, underline, and font size. Then change its text content as well.
• Give each one the same color/underline/font size/text content
• Doing this will require a lot of repeated code!
• For each of the <p>s, we’re doing the exact same thing
• Let’s define a function to do this job
• Then we can call the function once for each <p>

Defining Functions

function sayHello() {

console.log("Hello!")

}

When creating a function, we start with "function"

The name of this function is "sayHello"

After the function’s name, we put parentheses with any extra information our function needs (which is none for sayHello)

The function’s code goes between curly braces

This code will run whenever the function gets called

Defining Functions

function addFive(x) {

return x + 5

}

​

​

let result = addFive(8)

When creating a function, we start with "function"

The name of this function is "addFive"

Here, our function needs a number named x. Now we can use x like a variable name

The function’s code goes between curly braces

Functions can return a value, which can be used by the code that called it. Math.random and window.prompt are functions that return values.

Defining Functions

• Exercise: pick three <p>s in your website and change background color, underline, and font size. Then change its text content as well.
• Give each one the same color/underline/font size/text content
• This time, let’s write a function to do it

When you need help outside class

Email contact@openbrackets.us and say what class and teacher you have

• Don't email teacher directly

​

If you are age 13 or older, you can try Discord

• https://discord.gg/ZRtk534

​

The age restriction is because of Discord’s Terms of Service

Thanks for coming to class!

Please let us know if you have any questions!