From fa59dbf8da236a01b6f76c4aa5a341bd5e166023 Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 11:27:23 +0000 Subject: [PATCH 01/31] feat: lesson overview items no longer need to be questions --- .../variables_and_operators.md | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index 9cf7bf24bd0..2d4e1ef2964 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -1,24 +1,26 @@ ### 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 to declare a variable. +- The three different ways to declare a variable. +- Which one to use and when. +- The rules for naming variables. +- Discuss what are operators, operands, and operations. +- Learn about concatenation and what happens when you add numbers and strings together. +- The different types of operators in JavaScript. +- The difference between == and ===. +- Discuss what are operator precedence values. +- What the increment/decrement operators are. +- The difference between prefixing and postfixing them. +- What assignment operators are. +- What the Unary Plus Operator is. ### How to run JavaScript code From 47f16e742b7984b964ffa1540778d87bcbd7ef28 Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 14:41:04 +0000 Subject: [PATCH 02/31] feat: improve instructions on how to open the dev tools --- .../javascript_basics/variables_and_operators.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index 2d4e1ef2964..24df0801fcf 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -24,9 +24,11 @@ This section contains a general overview of topics that you will learn in this l ### How to run JavaScript code -All JavaScript we will be writing in the majority of the Foundations course will be run via the browser. Later lessons in Foundations and the NodeJS path will show you how to run JavaScript outside of the browser environment. Outside of these lessons, for now you should always default to running your JavaScript in the browser unless otherwise specified, otherwise you may run into unexpected errors. +All JavaScript we will be writing in the majority of the Foundations course will be run via the browser. Later lessons in Foundations and the NodeJS path will show you how to run JavaScript outside of the browser environment. -The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Type the basic HTML skeleton into a file on your computer somewhere: +Outside of these lessons, for now you should always default to running your JavaScript in the browser unless otherwise specified, otherwise you may run into unexpected errors. + +The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Use the VS Code snippet ! + TAB to create the basic HTML skeleton in a file on your computer somewhere: ```html @@ -44,9 +46,15 @@ The simplest way to get started is to create an HTML file with the JavaScript co ``` -Save and open this file up in a web browser (you can use ["Live Server" on Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to do this!) and then open up the browser's console by right-clicking on the blank webpage and selecting "Inspect" or "Inspect Element". In the 'Developer Tools' pane find and select the 'Console' tab, where you should see the output of our `console.log` statement. +Save and open this file up in a web browser and then open up the browser's console: + +1. Right-click on the blank webpage or press F12. +1. Click on "Inspect" or "Inspect Element" to open the Developer Tools (redundant if you use the keyboard shortcut). +1. Find and select the "Console" tab, where you should see the output of our `console.log` statement. + +**Tip:** You can use ["Live Server" extension in Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to automatically update the browser when you save your file instead of having to manually refresh the page to see any changes when you edit your code. Try edit the text to say something different! -> `console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons. +`console.log()` is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons. Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website. From a4a83d1fd436a92c4d28382b496ef8fbc9ab889c Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 14:45:52 +0000 Subject: [PATCH 03/31] feat: increase clarity on what is the js extension --- foundations/javascript_basics/variables_and_operators.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index 24df0801fcf..6cbb58e81e3 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -64,6 +64,8 @@ Another way to include JavaScript in a webpage is through an external script. Th JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts. +We named our file `javascript.js` but we could have chosen any name like `my-script.js` or even no name `.js`. What is really important is the `.js` extension. + ### Variables You can think of variables as "storage containers" for data in your code. From 9efb284788c8ebc697aec4db6a453b5e3284c0e9 Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 14:50:19 +0000 Subject: [PATCH 04/31] feat: move the javascript article to assignment --- foundations/javascript_basics/variables_and_operators.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index 6cbb58e81e3..7b2ca61e0ee 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -72,11 +72,9 @@ 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`. +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 tutorial on [JavaScript variables](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. +It's important to note: `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 @@ -89,6 +87,8 @@ Numbers are the building blocks of programming logic! In fact, it's hard to thi ### Assignment
+1. This tutorial on [JavaScript variables](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! + 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) From df94d5dc4acda92a9c3ecf578ecd36c5ae41177a Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 15:19:23 +0000 Subject: [PATCH 05/31] feat: example of let and const --- .../variables_and_operators.md | 42 ++++++++++++++++++- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index 7b2ca61e0ee..55271fa4b8a 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -72,9 +72,47 @@ 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`. +You can declare variables using the `let` keyword. Lets try it! (No pun intended). -It's important to note: `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. +```javascript +let name = "John"; +let surname = "Doe"; + +console.log(name); +console.log(surname); +``` + +What will the `console.log` output? Try it out! + +You can also re-assign variables: + +```javascript +let age = 11; +console.log(age); // outputs 11 to the console + +age = 54; // Notice the lack of "let" - we don't need it since the variable has already been *declared* earlier and we are just re-assigning it here! + +console.log(age); // what will be output now? +``` + +Re-assigning is cool and all, but what if we *don't* want it to happen? For example we might have a *constant* `pi` which will never change. We can accomplish this using the `const` keyword. + +```javascript +const pi = 3.14; +pi = 10; + +console.log(pi); // What will be output? +``` + +Your intuition may tell you that `3.14` will be output. Try it! + +An error is thrown. It doesn't even reach the `console.log`! You may wonder why we would *want* an error in our code. Truth be told, errors are incredibly helpful at telling us what is wrong with our code and exactly where the issue is. Without them, our code would still not do what we may want it to, but it would be a major pain to try and find what's wrong! + +So in summary, there are two ways to declare a variable: +- With `let`, which we can re-assign. +- Using `const` which we **can't** re-assign and will throw an error if we try. + +There is also a third way - using `var`. It is the old way and should **not** be used. However, you will likely come across code which uses `var`, so it is important to know that it exists. Do not worry too much about it for now. ### Numbers From 3c1dd302f5ee6a8b12e850b471f94f555cac8caf Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 15:28:34 +0000 Subject: [PATCH 06/31] feat: move to assignment --- .../javascript_basics/variables_and_operators.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index 55271fa4b8a..a6773f8135c 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -118,13 +118,14 @@ There is also a third way - using `var`. It is the old way and should **not** be 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 on [JavaScript arithmetic](https://www.w3schools.com/js/js_arithmetic.asp) followed by this on [JavaScript numbers](https://www.w3schools.com/js/js_numbers.asp), are good introductions to what you can accomplish with numbers in JavaScript. -1. This MDN article on [JavaScript math](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 on [JavaScript operators](http://javascript.info/operators). 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. +If you went to school, you will likely not find the concept too difficult to grasp. For example, the mathematical expression `(3 + 2) - 76 * (1 + 1)` is also valid JavaScript. If you put that into a `console.log`, it'll evaluate the expression and output the correct number. Try it! ### Assignment
+1. This W3Schools lesson on [JavaScript arithmetic](https://www.w3schools.com/js/js_arithmetic.asp) followed by this on [JavaScript numbers](https://www.w3schools.com/js/js_numbers.asp), are good introductions to what you can accomplish with numbers in JavaScript. +1. This MDN article on [JavaScript math](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 on [JavaScript operators](http://javascript.info/operators). 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 tutorial on [JavaScript variables](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! Try the following exercises (and don't forget to use `console.log()`!): @@ -138,10 +139,10 @@ Try the following exercises (and don't forget to use `console.log()`!): - 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` +1. 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. @@ -170,5 +171,4 @@ The following questions are an opportunity to reflect on key topics in this less This section contains helpful links to related 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). - 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. From 9cbd8507d1b5942e7285b61661fa1664c13e6f96 Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 15:33:57 +0000 Subject: [PATCH 07/31] feat: grammar --- foundations/javascript_basics/variables_and_operators.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index a6773f8135c..160e7d2c4f3 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -1,6 +1,6 @@ ### 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 the previous sections you learned 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. From 5e1811d39699236b09e4361b25e2c459b39a6f69 Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 15:40:05 +0000 Subject: [PATCH 08/31] feat: remove redundant information --- foundations/javascript_basics/variables_and_operators.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index 160e7d2c4f3..bf52d1bf512 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -24,10 +24,6 @@ This section contains a general overview of topics that you will learn in this l ### How to run JavaScript code -All JavaScript we will be writing in the majority of the Foundations course will be run via the browser. Later lessons in Foundations and the NodeJS path will show you how to run JavaScript outside of the browser environment. - -Outside of these lessons, for now you should always default to running your JavaScript in the browser unless otherwise specified, otherwise you may run into unexpected errors. - The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Use the VS Code snippet ! + TAB to create the basic HTML skeleton in a file on your computer somewhere: ```html @@ -59,7 +55,7 @@ Save and open this file up in a web browser and then open up the browser's conso Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website. ```html - + ``` JavaScript files have the extension `.js` similar to `.css` for stylesheets. External JavaScript files are used for more complex scripts. From 16dd613d2a5cca98316ec976cc2ea6c5571eacbd Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 15:45:14 +0000 Subject: [PATCH 09/31] feat: include script tag --- foundations/javascript_basics/variables_and_operators.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index bf52d1bf512..7bb54a21e87 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -24,7 +24,7 @@ This section contains a general overview of topics that you will learn in this l ### How to run JavaScript code -The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Use the VS Code snippet ! + TAB to create the basic HTML skeleton in a file on your computer somewhere: +The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Use the VS Code snippet ! + TAB to create the basic HTML skeleton in a file on your computer somewhere. Be sure to include the ` + ``` From 3d5b9d0df8e43710d26cdf24407d48e94ece3b4d Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Sun, 17 Mar 2024 21:20:24 +0000 Subject: [PATCH 18/31] feat: remove confusing example --- foundations/javascript_basics/variables_and_operators.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index 7394b8dfc6b..ac5414d6624 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -37,8 +37,8 @@ The simplest way to get started is to create an HTML file with the JavaScript co Save and open this file up in a web browser and then open up the browser's console: -1. Right-click on the blank webpage or press F12. -1. Click on "Inspect" or "Inspect Element" to open the Developer Tools (redundant if you use the keyboard shortcut). +1. Right-click on the blank webpage. +1. Click on "Inspect" or "Inspect Element" to open the Developer Tools. 1. Find and select the "Console" tab, where you should see the output of our `console.log` statement. **Tip:** You can use ["Live Server" extension in Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to automatically update the browser when you save your file instead of having to manually refresh the page to see any changes when you edit your code. Try edit the text to say something different! From 004d16295e75a325c79ab6444cabd7b5f5f6e8e0 Mon Sep 17 00:00:00 2001 From: Nikita Revenco <154856872+nikitarevenco@users.noreply.github.com> Date: Tue, 20 Aug 2024 23:45:02 +0100 Subject: [PATCH 19/31] feat: restore removed paragraph --- foundations/javascript_basics/variables_and_operators.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/foundations/javascript_basics/variables_and_operators.md b/foundations/javascript_basics/variables_and_operators.md index b26a81cb6ee..189cee3c1af 100644 --- a/foundations/javascript_basics/variables_and_operators.md +++ b/foundations/javascript_basics/variables_and_operators.md @@ -14,6 +14,10 @@ This section contains a general overview of topics that you will learn in this l ### How to run JavaScript code +All JavaScript we will be writing in the majority of the Foundations course will be run via the browser. Later lessons in Foundations and the NodeJS path will show you how to run JavaScript outside of the browser environment. + +Outside of these lessons, for now you should always default to running your JavaScript in the browser unless otherwise specified, otherwise you may run into unexpected errors. + The simplest way to get started is to create an HTML file with the JavaScript code inside of it. Use the VS Code snippet ! + TAB to create the basic HTML skeleton in a file on your computer somewhere. Be sure to include the `