Learn JavaScript Functions (Video Tutorials for Beginners)
Hack Reactor could best be described as a JavaScript bootcamp. While we cover tons of different languages, frameworks and developer tools in our curriculum, the heart of what we teach is JavaScript.
JavaScript may be the most important programming language today: it is the only language that runs in web browsers, and it is used on the server side by companies like Paypal, Microsoft, and Yahoo -- making it the world's only full-stack language. It is what allows web visitors to interact with websites, something we do every single day. Given its importance, we've decided to curate some of the best beginner videos for those who want to learn JavaScript functions and fundamentals. (For even more JavaScript, check out our Hack Reactor run JavaScript subreddit.)
Learn JavaScript Terms and Definitions
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.
Event Handler: An alert triggered by a web visitors action that executes JavaScript code.
Embedding JavaScript in HTML: <script type = "text/JavaScript"> ...(where you type your code) </script>.
JavaScript Functions: Groupings of statements that you write one time and can use again as needed.
JavaScript Loops: Looping statements can perform an action over and over again until a certain condition is met, at which point they can stop. For example, "subtract from this purchase order until you've reached 20% of the original total."
JavaScript Conditionals: Conditionals will make your code do one thing if something is true, and a different thing if something is false.
JavaScript Variables: Locations defined by you where you can store information you want.
Learn JavaScript Functions
In the video above you'll dive deeper into JavaScript functions to understand how they can be used within your website and how to create them. The video will show you a function's basic syntax, how to call the function, and how to return something.
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.
Transcription:
"(JavaScript) functions are very, very similar to variables in that when we define a variable, we're defining a value, whether it be an integer or a piece of text, or boolean that we just want to use multiple times within our script. We may also need to edit it at some point.
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.
When you're doing math in JavaScript, remember that it will follow order of operations. Since this is just a fictional little formula we'll leave it as is. We'll make an alert here and give them what the price actually is. Let me set a variable here, and then I'll alert the shipping.
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 JavaScript with These Recommended Resources
To read more about why you should learn JavaScript, check out this blog by Hack Reactor cofounder Shawn Drost. Hack Reactor advises the following resources if you're interested in learning advanced JavaScript concepts and think you're ready for the next levels.
eloquentjavascript.net (chapters 1-4)
Javascript Koans (https://github.com/mrdavidlaing/javascript-koans )
Learn Street (http://www.learnstreet.com/)
Codecademy (http://www.codecademy.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!