- [Voiceover] Let's build a simple, named function and see how all of this works over the next couple of movies. In the exercise files for this movie, 0402, you'll find our trusty old blank index.html document and an empty script.js file. I'm previewing both in my browser, using atom-live-server and have the console open. If you don't have atom-live-server, or you don't want to use it, you can get the exact, same result by just reloading index.html in your browser. Now we need a reason to create a function. Fractions can be really hard to compare, so I want to create a function that quickly tells me what fraction is bigger, so I can ask it things like, "Which is bigger; three over four or five over seven?" We start off by creating the function itself - "function", then give it a name, "findBiggestFraction()", and then, just to make sure everything works, I'll console.log out "The function is running!" Save that and nothing happens.
That's because, although we've defined the function, we have not actually made it run. To get the function to run, we have to call it by its name: "find" -- and you notice here my quote editor is trying to help me, so it says, "Hey, you just created a new function called findBiggestFraction, is that what you want?" If it is, just hit Enter. Quote editor completes the quote for you, this is amazing for people like me, who keep misspelling things all the time, but it also just reminds you, maybe you already have a function by this name, if you're defining a new one. Now that I've called a function, when I save, everything runs properly and we get the console log, "The function is running!" Awesome! So far, so good.
Now we need to get the function to compare some fractions. To start off, we'll define two new variables that actually hold the fractions: I'll call them a and set up three over four; and b which is five over seven. These are the two fractions I want to compare. Then, I set up some logic inside the function to compare the two, and here I'll use a ternary operator, so I'll say, "If a is bigger than b," then console.log the text a: and then the value of a, else console.log text b: and the value of b." Save that, and we get the result right away.
The biggest fraction is a, at the value of 0.75. Now, pay close attention to the order of the contents here. I define the function first, and here I'm using the variables a and b even though they haven't been defined yet. Then I define the variables a and b and then I call the function. The reason why this works is until I call the function, it's just sitting in the memory of the browser. That means as long as I define my variables before I call the function, everything will work fine. However, if I take these variables and move them down below the function call and then try to run this, I get "b: undefined".
That means it's trying to find the function and it goes, "I don't have a variable called a so "I'm just going to make one." Remember how I said if you don't define your variables and then just call them, JavaScript automatically makes them? That is exactly what is happening here. So, because I define my variables too late, everything breaks. The order in which you place things in JavaScript really matters. Alright, we have a function that works. In the next movie, we'll expand on it.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Build a basic function