Caution to reader: this blog post is 3 months or older. Blog posts older than three months may contain details about the Hack Reactor program that are no longer accurate. Please refer to other pages on our website to confirm current information and email us with questions.
This video is tremendously helpful if you learn better by understanding definitions of the words and parts of a programming language before you start coding. You'll get a walkthrough of "if then" statements, conditionals, functions, For loops, While loops and more.
By default, functions do not invoke themselves even though they're in your code. The awesome thing about functions is they can be called upon whenever you need them.
Functions on the other hand they are an entire block of code that you want to run whenever you want. So basically if you have the bunch of scripts that execute multiple times on your page, you can put them into one function and just call that single function whenever it's needed.
The benefit of doing so is that you can now edit that function at any time and it will automatically update wherever your script uses that function. So let's jump right into this and define a function.
To do that, we want to type function at the top. And after we type functional we're going to type a space and then the name of that function. So I'll name this - do note that this is case insensitive - so "example" is different from "Example" and so forth.
We're going to put two parenthesis at the end. As for right now, just leave them there, but at the end of this video or near the end of this video I'll show you exactly what they do for us and what you can put inside those parentheses.
Just like in CSS, we're going to put in an open curly bracket, and at the end of our function will be closed curly bracket.
In the last video we only used a single command, which was document.write. In this video, I'll give you another one you can used called 'alert.' And alert just basically makes a dialogue box come up on your web page alerting the user of some information.
In the function I'll call in alert. This works pretty much the same as document.write. I'm going to have two parentheses after alert, and inside is going to be a string or number. Don't forget to put single or double quotes when you're typing a string. We'll say, "Hello there" in our alert box, and put a semicolon at the end.
In our browser we don't see anything. That's because by default these functions won't invoke themselves. They aren't used unless you specifically say 'use this function.'
So let's do that now. All we have to do is type example, parentheses and a semicolon. If we refresh, we get this nifty dialogue box at the top of our page. That's a simple example.
The true greatness of functions is that we can choose to use them only when we want. Right here, I just have example in my script. As soon as the page is being accessed, it's running this function because it's on this line. However, maybe we don't want to run this function as soon as the page is loaded. Maybe we want it to run when something is pressed.
To do that we have to go into HTML. You see over here I have just a regular button, but I also added this 'onclick' attribute. There are a bunch of these attributes you can add. All of them are used very frequently. There is onclick, onhover, onmouse...there's a lot you can use.
To actually tell it to use that function on the click we can type the function name in these quotations mark here. You still need those two parentheses. If we load the page nothing happens by default but if we click it, we get "hello there."
Not too difficult. You can actually chain together different commands in the attributes here. If I wanted to run this function, but also write something else onto the page, we can put another semicolon. Maybe we want another alert box that is exclusive to this button. We can say, "this is the shipping button." Now when we click it, we get "hello there" and "this is the shipping button."
Let's add some more functionality to our functions. We'll actually make this calculate shipping function as the button says. Here's how this is useful. Basically, functions can have variables that are exclusive to that function and will only run inside that function. Let's just say that for whatever reason this company has this weird shipping policy which requires a lot of different variables. Maybe it's the price times 0.2 + 25 - discount, times three. Something like that, some crazy formula.
We have these variables in this formula, but where are we going to get them? We could define them and if we set it to run this function, we get a correct result. However, why would we want to do that if the formula can change based on these variables. We need the function to run based on any variables.
Inside these two parentheses I'm going to put price, discount. Now that's just saying that if these two variables are specified, use them in that function. The way we specify is we go into our HTML and where it says onclick - or even in scripts whenever we're just executing this function - we can type in those two variables.
So let's say three and five. Three will be the price, five will be the discount. If we run that, we get 10.6 about. The beauty of this is we can now have multiple instances of that function with different prices.
If we allow variables to be input into those functions, we can use them multiple times.
End of Transcription
Learn Street (http://www.learnstreet.com/)
Mozilla Developer Network (https://developer.mozilla.org/en-US/)
If you want to test your programming skills, take on our admissions challenge and apply to our school here!