diff --git a/foundations/javascript_basics/fundamentals-1.md b/foundations/javascript_basics/fundamentals-1.md index da6dfc0f204..9e866bce3c6 100644 --- a/foundations/javascript_basics/fundamentals-1.md +++ b/foundations/javascript_basics/fundamentals-1.md @@ -1,23 +1,24 @@ ### Introduction -In the previous sections you learnt how to structure webpages with HTML and style them with CSS. The next step is to make the webpage _interactive_, which is exactly what JavaScript is for. In this section, we will focus on the fundamentals of JavaScript and how you can use it to manipulate all the various interactions between the web page and user. + +In the previous sections you learnt how to structure webpages with HTML and style them with CSS. The next step is to make the webpage *interactive*, which is exactly what JavaScript is for. In this section, we will focus on the fundamentals of JavaScript and how you can use it to manipulate all the various interactions between the web page and user. ### Lesson overview This section contains a general overview of topics that you will learn in this lesson. -* How do you declare a variable? -* What are three different ways to declare a variable? -* Which one should you use when? -* What are the rules for naming variables? -* What are operators, operands, and operations? -* What is concatenation and what happens when you add numbers and strings together? -* What are the different types of operators in JavaScript? -* What is the difference between == and ===? -* What are operator precedence values? -* What are the increment/decrement operators? -* What is the difference between prefixing and postfixing them? -* What are assignment operators? -* What is the Unary Plus Operator? +- How do you declare a variable? +- What are three different ways to declare a variable? +- Which one should you use when? +- What are the rules for naming variables? +- What are operators, operands, and operations? +- What is concatenation and what happens when you add numbers and strings together? +- What are the different types of operators in JavaScript? +- What is the difference between == and ===? +- What are operator precedence values? +- What are the increment/decrement operators? +- What is the difference between prefixing and postfixing them? +- What are assignment operators? +- What is the Unary Plus Operator? ### How to run JavaScript code @@ -55,46 +56,46 @@ JavaScript files have the extension `.js` similar to `.css` for stylesheets. Ext ### Variables -You can think of variables as "storage containers" for data in your code. +You can think of variables as "storage containers" for data in your code. ![Variable Box Illustration](https://cdn.statically.io/gh/TheOdinProject/curriculum/d39eaf2ca95e80705f703bb218216c10508f5047/foundations/javascript_basics/fundamentals-1/imgs/00.png) Until recently there was only one way to create a variable in JavaScript — the `var` statement. But in the newest JavaScript versions we have two more ways — `let` and `const`. -1. [This variable tutorial](http://javascript.info/variables) will explain everything you need to know! Be sure to do the __Tasks__ at the end. Information won't stick without practice! +1. [This variable tutorial](http://javascript.info/variables) will explain everything you need to know! Be sure to do the **Tasks** at the end. Information won't stick without practice! -The above tutorial mentioned this, but it's important enough to note again: `let` and `const` are both relatively new ways to declare variables in JavaScript. In _many_ tutorials (and code) across the internet you're likely to encounter `var` statements. Don't let it bother you! There's nothing inherently wrong with `var`, and in most cases `var` and `let` behave the same way. But sometimes the behavior of `var` is _not_ what you would expect. Just stick to `let` (and `const`) for now. +The above tutorial mentioned this, but it's important enough to note again: `let` and `const` are both relatively new ways to declare variables in JavaScript. In *many* tutorials (and code) across the internet you're likely to encounter `var` statements. Don't let it bother you! There's nothing inherently wrong with `var`, and in most cases `var` and `let` behave the same way. But sometimes the behavior of `var` is *not* what you would expect. Just stick to `let` (and `const`) for now. ### Numbers Numbers are the building blocks of programming logic! In fact, it's hard to think of any useful programming task that doesn't involve at least a little basic math... so knowing how numbers work is obviously quite important. Luckily, it's also fairly straightforward. 1. [This W3Schools lesson](https://www.w3schools.com/js/js_arithmetic.asp) followed by [this one](https://www.w3schools.com/js/js_numbers.asp), are good introductions to what you can accomplish with numbers in JavaScript. -2. [This MDN article](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math) covers the same info from a slightly different point of view, while also teaching you how to apply some basic math in JavaScript. There's much more that you can do with numbers, but this is all you need at the moment. -3. Read through \(and code along with!\) [this article](http://javascript.info/operators) about operators in Javascript. Don't forget to do the "Tasks" at the bottom of the page! It will give you a pretty good idea of what you can accomplish with numbers (among other things!) in JavaScript. +1. [This MDN article](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math) covers the same info from a slightly different point of view, while also teaching you how to apply some basic math in JavaScript. There's much more that you can do with numbers, but this is all you need at the moment. +1. Read through \(and code along with!\) [this article](http://javascript.info/operators) about operators in JavaScript. Don't forget to do the "Tasks" at the bottom of the page! It will give you a pretty good idea of what you can accomplish with numbers (among other things!) in JavaScript. ### Assignment
Try the following exercises (and don't forget to use `console.log()`!): -1. Add 2 numbers together! (just type `console.log(23 + 97)` into your html file) -2. Add a sequence of 6 different numbers together. -3. Print the solution to the following equation: `(4 + 6 + 9) / 77` - * Answer should be approximately `0.24675` -4. Let's use variables! - * Type this statement at the top of the script tag: `let a = 10` - * In the console `console.log(a)` should print `10` - * Try the following in the console: `9 * a` - * and this: `let b = 7 * a` (returns `undefined` \*) and then `console.log(b)` -5. You should be getting the hang of this by now... try this sequence: - * Declare a constant variable `MAX` with the value `57` - * Set another variable `actual` to `MAX - 13` - * Set another variable `percentage` to `actual / MAX` - * If you type `percentage` in the console and press Enter you should see a value like `0.7719` -6. Take a few minutes to keep playing around with various things in your script tag. Eventually, we will learn how to actually make those numbers and things show up on the webpage, but all of this logic will remain the same, so make sure you're comfortable with it before moving on. - -_* As you might have noticed by running Javascript code in the console, the console prints the result of the code it executes (called a return statement). You will learn more about these in the next lessons, however for now it is good to remember that a declaration with an assignment (such as `let b = 7 * a`) returns `undefined` and so you cannot declare and assign a value to a variable and read its value in the same line._ +1. Add 2 numbers together! (just type `console.log(23 + 97)` into your HTML file) +1. Add a sequence of 6 different numbers together. +1. Print the solution to the following equation: `(4 + 6 + 9) / 77` + - Answer should be approximately `0.24675` +1. Let's use variables! + - Type this statement at the top of the script tag: `let a = 10` + - In the console `console.log(a)` should print `10` + - Try the following in the console: `9 * a` + - and this: `let b = 7 * a` (returns `undefined` \*) and then `console.log(b)` +1. You should be getting the hang of this by now... try this sequence: + - Declare a constant variable `MAX` with the value `57` + - Set another variable `actual` to `MAX - 13` + - Set another variable `percentage` to `actual / MAX` + - If you type `percentage` in the console and press Enter you should see a value like `0.7719` +1. Take a few minutes to keep playing around with various things in your script tag. Eventually, we will learn how to actually make those numbers and things show up on the webpage, but all of this logic will remain the same, so make sure you're comfortable with it before moving on. + +** As you might have noticed by running JavaScript code in the console, the console prints the result of the code it executes (called a return statement). You will learn more about these in the next lessons, however for now it is good to remember that a declaration with an assignment (such as `let b = 7 * a`) returns `undefined` and so you cannot declare and assign a value to a variable and read its value in the same line.*
### Knowledge check @@ -119,5 +120,5 @@ This section contains questions for you to check your understanding of this less This section contains helpful links to other content. It isn't required, so consider it supplemental. -- The differences between `var` and `let` are explained in [this javascript.info article titled the old "var"](https://javascript.info/var). +- The differences between `var` and `let` are explained in [this JavaScript.info article titled the old "var"](https://javascript.info/var). - This [MDN article on what is JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript) explains a bit more about it on a high-level.