diff --git a/files/en-us/learn_web_development/core/scripting/arrays/index.md b/files/en-us/learn_web_development/core/scripting/arrays/index.md index f7972bd034c7a8a..3d6e7f5cd18fc78 100644 --- a/files/en-us/learn_web_development/core/scripting/arrays/index.md +++ b/files/en-us/learn_web_development/core/scripting/arrays/index.md @@ -5,7 +5,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Strings", "Learn_web_development/Core/Scripting/Test_your_skills/Arrays", "Learn_web_development/Core/Scripting")}} In this lesson we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), retrieve, add, and remove items stored in an array, and more besides. @@ -493,19 +493,15 @@ searchBtn.addEventListener("click", () => { -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Arrays](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Arrays). - -## Conclusion +## Summary After reading through this article, we are sure you will agree that arrays seem pretty darn useful; you'll see them crop up everywhere in JavaScript, often in association with loops in order to do the same thing to every item in an array. We'll be teaching you all about loops later on in the module. -In the next article we're giving you a challenge to test your understanding of the articles that came before it. +In the next article, we'll give you some tests that you can use to check how well you've understood and retained the information we've provided on arrays. ## See also - {{jsxref("Array")}} - : The `Array` object reference page provides a detailed reference guide to the features discussed in this page, and many other `Array` features. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Strings", "Learn_web_development/Core/Scripting/Test_your_skills/Arrays", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/conditionals/index.md b/files/en-us/learn_web_development/core/scripting/conditionals/index.md index b386240987d644c..78260784c1fe3b6 100644 --- a/files/en-us/learn_web_development/core/scripting/conditionals/index.md +++ b/files/en-us/learn_web_development/core/scripting/conditionals/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting/Loops", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting/Test_your_skills/Conditionals", "Learn_web_development/Core/Scripting")}} In any programming language, the code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article, we'll explore how so-called conditional statements work in JavaScript. @@ -693,13 +693,9 @@ function update(bgColor, textColor) { -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Conditionals](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Conditionals). - ## Summary -That's all you really need to know about conditional structures in JavaScript right now! Next up, we'll look at looping through code. +That's all you really need to know about conditional structures in JavaScript right now! In the next article, we'll give you some tests that you can use to check how well you've understood and retained this information. ## See also @@ -708,4 +704,4 @@ That's all you really need to know about conditional structures in JavaScript ri - [if...else reference](/en-US/docs/Web/JavaScript/Reference/Statements/if...else) - [Conditional (ternary) operator reference](/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting/Loops", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting/Test_your_skills/Conditionals", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/debugging_javascript/index.md b/files/en-us/learn_web_development/core/scripting/debugging_javascript/index.md index 625c3469bdf7d3c..9ac24a638ce7f82 100644 --- a/files/en-us/learn_web_development/core/scripting/debugging_javascript/index.md +++ b/files/en-us/learn_web_development/core/scripting/debugging_javascript/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/JSON","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}} In this lesson, we will return to the subject of debugging JavaScript (which we first looked at in [What went wrong?](/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong)). Here we will delve deeper into techniques for tracking down errors, but also look at how to code defensively and handle errors in your code, avoiding problems in the first place. @@ -364,4 +364,4 @@ So that's JavaScript debugging and error handling. Simple huh? Maybe not so simp That's it for the Dynamic scripting with JavaScript module; congratulations on reaching the end! In the next module we'll help you explore JavaScript frameworks and libraries. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/JSON","Learn_web_development/Core/Frameworks_libraries", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md index 132f2ef410bf5dc..f95e98b91e572bf 100644 --- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Object_basics","Learn_web_development/Core/Scripting/Network_requests", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Object_basics","Learn_web_development/Core/Scripting/Network_requests", "Learn_web_development/Core/Scripting")}} When writing web pages and apps, one of the most common things you'll want to do is change the document structure in some way. This is usually done by manipulating the Document Object Model (DOM) via a set of built-in browser APIs for controlling HTML and styling information. In this article we'll introduce you to **DOM scripting**. @@ -354,4 +354,4 @@ We have reached the end of our study of document and DOM manipulation. At this p - {{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc. - [DOM Scripting](https://explainers.dev/dom-scripting/), explainers.dev -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Object_basics","Learn_web_development/Core/Scripting/Network_requests", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Object_basics","Learn_web_development/Core/Scripting/Network_requests", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/event_bubbling/index.md b/files/en-us/learn_web_development/core/scripting/event_bubbling/index.md index e287df0f1144468..55331c3df2ec17e 100644 --- a/files/en-us/learn_web_development/core/scripting/event_bubbling/index.md +++ b/files/en-us/learn_web_development/core/scripting/event_bubbling/index.md @@ -5,7 +5,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Events","Learn_web_development/Core/Scripting/Image_gallery", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Events","Learn_web_development/Core/Scripting/Test_your_skills/Events", "Learn_web_development/Core/Scripting")}} We've seen that a web page is composed of _elements_ — headings, paragraphs of text, images, buttons, and so on — and that you can listen for events that happen to these elements. For example, you could add a listener to a button, and it will run when the user clicks the button. @@ -408,21 +408,13 @@ Note that when we click the button, `target` is the button element every time, w {{embedlivesample("target and currentTarget")}} -The `target` property is commonly used in event delegation, as in our [Event delegation](#event_delegation) example above. - -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? To verify you've retained this information before you move on — see [Test your skills: Events](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Events). +The `target` property is commonly used in event delegation, as seen in our [Event delegation](#event_delegation) example above. ## Summary -You should now know all you need to know about web events at this early stage. -As mentioned, events are not really part of the core JavaScript — they are defined in browser Web APIs. - -Also, it is important to understand that the different contexts in which JavaScript is used have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). -We are not expecting you to understand all of these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development. +You should now know all you need to know about web events at this early stage. As mentioned, events are not really part of the core JavaScript language — they are defined in browser Web APIs. -Next up, you'll find a challenge that will test your understanding of the last few topics. +In the next article, we'll give you some tests that you can use to check how well you've understood and retained all the information we've given you on events. ## See also @@ -433,4 +425,4 @@ Next up, you'll find a challenge that will test your understanding of the last f - [Event order](https://www.quirksmode.org/js/events_order.html) - : An excellently detailed discussion of capturing and bubbling by Peter-Paul Koch. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Events","Learn_web_development/Core/Scripting/Image_gallery", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Events","Learn_web_development/Core/Scripting/Test_your_skills/Events", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/events/index.md b/files/en-us/learn_web_development/core/scripting/events/index.md index 218995fcfa8ccc9..922763e5884794d 100644 --- a/files/en-us/learn_web_development/core/scripting/events/index.md +++ b/files/en-us/learn_web_development/core/scripting/events/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Return_values","Learn_web_development/Core/Scripting/Event_bubbling", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Functions","Learn_web_development/Core/Scripting/Event_bubbling", "Learn_web_development/Core/Scripting")}} Events are things that happen in the system you are programming, which the system tells you about so your code can react to them. For example, if the user clicks a button on a webpage, you might want to react to that action by displaying an information box. @@ -395,4 +395,4 @@ In this chapter we've learned what events are, how to listen for events, and how You've seen by now that elements in a web page can be nested inside other elements. For example, in the [Preventing default behavior](#preventing_default_behavior) example, we have some text boxes, placed inside {{htmlelement("div")}} elements, which in turn are placed inside a {{htmlelement("form")}} element. What happens when a click event listener is attached to the `
` element, and the user clicks inside one of the text boxes? The associated event handler function is still fired via a process called _event bubbling_, which is covered in the next lesson. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Return_values","Learn_web_development/Core/Scripting/Event_bubbling", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Functions","Learn_web_development/Core/Scripting/Event_bubbling", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/functions/index.md b/files/en-us/learn_web_development/core/scripting/functions/index.md index fb8201ff96f4d21..0798105068086c3 100644 --- a/files/en-us/learn_web_development/core/scripting/functions/index.md +++ b/files/en-us/learn_web_development/core/scripting/functions/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}} Another essential concept in coding is **functions**, which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters. @@ -480,4 +480,4 @@ This article has explored the fundamental concepts behind functions, paving the - [Functions reference](/en-US/docs/Web/JavaScript/Reference/Functions) - [Using functions to write less code](https://scrimba.com/the-frontend-developer-career-path-c0j/~04g?via=mdn), Scrimba [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) - An interactive lesson providing a useful functions introduction. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/image_gallery/index.md b/files/en-us/learn_web_development/core/scripting/image_gallery/index.md index df257404f5ed752..a2e0f844c3345fd 100644 --- a/files/en-us/learn_web_development/core/scripting/image_gallery/index.md +++ b/files/en-us/learn_web_development/core/scripting/image_gallery/index.md @@ -5,7 +5,7 @@ page-type: learn-module-assessment sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Event_bubbling","Learn_web_development/Core/Scripting/Object_basics", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Events","Learn_web_development/Core/Scripting/Object_basics", "Learn_web_development/Core/Scripting")}} Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery. @@ -99,4 +99,4 @@ overlay.style.backgroundColor = xxx; - You don't need to edit the HTML or CSS in any way. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Event_bubbling","Learn_web_development/Core/Scripting/Object_basics", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Events","Learn_web_development/Core/Scripting/Object_basics", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/index.md b/files/en-us/learn_web_development/core/scripting/index.md index b7d741644627644..bb69c72dba54e8f 100644 --- a/files/en-us/learn_web_development/core/scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/index.md @@ -63,8 +63,10 @@ Before starting this module, you don't need any previous JavaScript knowledge, b - : JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article, we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON. - [JavaScript debugging and error handling](/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript) - : In this lesson, we will return to the subject of debugging JavaScript (which we first looked at in [What went wrong?](/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong)). Here we will delve deeper into techniques for tracking down errors, but also look at how to code defensively and handle errors in your code, avoiding problems in the first place. -- [Test your skills: JavaScript](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills) - - : This page lists JavaScript tests you can try so you can verify if you've understood the content in this module. + +## Test your skills + +You will find "Test your skills" articles placed between the tutorial articles to check whether you have retained the most important information before you move on. If you want to explore all of these together, you can find them listed at [Test your skills: JavaScript](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills). ## See also diff --git a/files/en-us/learn_web_development/core/scripting/json/index.md b/files/en-us/learn_web_development/core/scripting/json/index.md index 5a1a5753b489858..6abb743ce5e8e01 100644 --- a/files/en-us/learn_web_development/core/scripting/json/index.md +++ b/files/en-us/learn_web_development/core/scripting/json/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Test_your_skills/JSON", "Learn_web_development/Core/Scripting")}} JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article, we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON. @@ -346,15 +346,11 @@ let myString = JSON.stringify(myObj); myString; ``` -Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using `stringify()` — saving the return value in a new variable — then checking it again. - -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: JSON](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/JSON). +Here we're creating a JavaScript object, checking what it contains, converting it to a JSON string using `stringify()` — saving the return value in a new variable — then checking it again. ## Summary -In this lesson, we've introduced you to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll look at practical techniques for debugging JavaScript and handling errors. +In this lesson, we've introduced you to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll give you some tests that you can use to check how well you've understood and retained all this information. ## See also @@ -363,4 +359,4 @@ In this lesson, we've introduced you to using JSON in your programs, including h - [Using Fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) - [HTTP request methods](/en-US/docs/Web/HTTP/Reference/Methods) -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Test_your_skills/JSON", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/loops/index.md b/files/en-us/learn_web_development/core/scripting/loops/index.md index 8f2e13089ccdfcb..0044652ac821eca 100644 --- a/files/en-us/learn_web_development/core/scripting/loops/index.md +++ b/files/en-us/learn_web_development/core/scripting/loops/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Conditionals","Learn_web_development/Core/Scripting/Test_your_skills/Loops", "Learn_web_development/Core/Scripting")}} Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs. @@ -850,16 +850,12 @@ do { > [!NOTE] > There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced [Loops and iteration guide](/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration). -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Loops](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Loops). - ## Summary This article has revealed to you the basic concepts behind, and different options available when looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code and raring to use them in your own examples! -Next up, we'll look at functions. +In the next article, we'll give you some tests that you can use to check how well you've understood and retained this information. ## See also @@ -869,4 +865,4 @@ Next up, we'll look at functions. - [while](/en-US/docs/Web/JavaScript/Reference/Statements/while) and [do...while](/en-US/docs/Web/JavaScript/Reference/Statements/do...while) references - [break](/en-US/docs/Web/JavaScript/Reference/Statements/break) and [continue](/en-US/docs/Web/JavaScript/Reference/Statements/continue) references -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Conditionals","Learn_web_development/Core/Scripting/Test_your_skills/Loops", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/math/index.md b/files/en-us/learn_web_development/core/scripting/math/index.md index 2208f8e6d2601a8..928538ae951dba3 100644 --- a/files/en-us/learn_web_development/core/scripting/math/index.md +++ b/files/en-us/learn_web_development/core/scripting/math/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Variables", "Learn_web_development/Core/Scripting/Test_your_skills/Math", "Learn_web_development/Core/Scripting")}} At this point in the course, we discuss math in JavaScript — how we can use {{Glossary("Operator","operators")}} and other features to successfully manipulate numbers to do our bidding. @@ -458,19 +458,15 @@ You can see the equality operator being used just inside the `updateBtn()` funct > [!NOTE] > Such a control that swaps between two states is generally referred to as a **toggle**. It toggles between one state and another — light on, light off, etc. -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Math](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Math). - ## Summary In this article, we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short. -In the next article, we'll explore text and how JavaScript allows us to manipulate it. +In the next article, we'll give you some tests that you can use to check how well you've understood and retained this information. ## See also - [Numbers and strings](/en-US/docs/Web/JavaScript/Guide/Numbers_and_strings) - [Expressions and operators](/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators) -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Variables", "Learn_web_development/Core/Scripting/Test_your_skills/Math", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/object_basics/index.md b/files/en-us/learn_web_development/core/scripting/object_basics/index.md index 0f13b728248be8a..8004bb86fc99667 100644 --- a/files/en-us/learn_web_development/core/scripting/object_basics/index.md +++ b/files/en-us/learn_web_development/core/scripting/object_basics/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Image_gallery","Learn_web_development/Core/Scripting/DOM_scripting", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Image_gallery","Learn_web_development/Core/Scripting/Test_your_skills/Object_basics", "Learn_web_development/Core/Scripting")}} In this article, we'll look at fundamental JavaScript object syntax, and revisit some JavaScript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects. @@ -407,14 +407,10 @@ Note that built in objects and APIs don't always create object instances automat const myNotification = new Notification("Hello!"); ``` -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Object basics](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Object_basics). - ## Summary You should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our `person` object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way. -In the next article we'll look at **DOM scripting**, which unlocks a large amount of fundamental browser API functionality. +In the next article, we'll give you some tests that you can use to check how well you've understood and retained all this information. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Image_gallery","Learn_web_development/Core/Scripting/DOM_scripting", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Image_gallery","Learn_web_development/Core/Scripting/Test_your_skills/Object_basics", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/return_values/index.md b/files/en-us/learn_web_development/core/scripting/return_values/index.md index 3e2cf1f660b70ef..c8ac807cb904589 100644 --- a/files/en-us/learn_web_development/core/scripting/return_values/index.md +++ b/files/en-us/learn_web_development/core/scripting/return_values/index.md @@ -5,7 +5,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Build_your_own_function","Learn_web_development/Core/Scripting/Events", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Build_your_own_function","Learn_web_development/Core/Scripting/Test_your_skills/Functions", "Learn_web_development/Core/Scripting")}} There's one last essential concept about functions for us to discuss — return values. Some functions don't return a significant value, but others do. It's important to understand what their values are, how to use them in your code, and how to make functions return useful values. We'll cover all of these below. @@ -173,21 +173,15 @@ Some extra function-related tips: - Look at another example of writing _error handling_ into functions. It is generally a good idea to check that any necessary parameters are validated, and that any optional parameters have some kind of default value provided. This way, your program will be less likely to throw errors. - Think about the idea of creating a _function library_. As you go further into your programming career, you'll start doing the same kinds of things over and over again. It is a good idea to create your own library of utility functions to do these sorts of things. You can copy them over to new code, or even just apply them to HTML pages wherever you need them. -## Test your skills! - -You've reached the end of our set of functions articles, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Functions](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Functions). - -## Conclusion +## Summary So there we have it — functions are fun, very useful, and although there's a lot to talk about in regards to their syntax and functionality, they are fairly understandable. -If there is anything you didn't understand, feel free to read through the article again, or [contact us](/en-US/docs/MDN/Community/Communication_channels) to ask for help. - -Next, we'll move on to look at events in more detail. +In the next article, we'll give you some tests that you can use to check how well you've understood and retained all the information we gave you on functions in the last few articles. ## See also - [Functions in-depth](/en-US/docs/Web/JavaScript/Reference/Functions) — a detailed guide covering more advanced functions-related information. - [Callback functions in JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — a common JavaScript pattern is to pass a function into another function _as an argument_. It is then called inside the first function. This is a little beyond the scope of this course, but worth studying before too long. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Build_your_own_function","Learn_web_development/Core/Scripting/Events", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Build_your_own_function","Learn_web_development/Core/Scripting/Test_your_skills/Functions", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/silly_story_generator/index.md b/files/en-us/learn_web_development/core/scripting/silly_story_generator/index.md index 376fa29e9e0a9b0..b98da8733d9ed61 100644 --- a/files/en-us/learn_web_development/core/scripting/silly_story_generator/index.md +++ b/files/en-us/learn_web_development/core/scripting/silly_story_generator/index.md @@ -6,7 +6,7 @@ page-type: learn-module-assessment sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting/Conditionals", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Arrays", "Learn_web_development/Core/Scripting/Conditionals", "Learn_web_development/Core/Scripting")}} In this challenge you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun! @@ -89,4 +89,4 @@ Completing the `result()` function: - [`Math.round()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round) is a built-in JavaScript method that rounds the result of a calculation to the nearest whole number. - There are three instances of strings that need to be replaced. You may repeat the `replace()` method multiple times, or you can use `replaceAll()`. Remember, Strings are immutable! -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting/Conditionals", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Arrays", "Learn_web_development/Core/Scripting/Conditionals", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/strings/index.md b/files/en-us/learn_web_development/core/scripting/strings/index.md index 9e6335650371c66..9a37920ed3d5cb9 100644 --- a/files/en-us/learn_web_development/core/scripting/strings/index.md +++ b/files/en-us/learn_web_development/core/scripting/strings/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Math", "Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting")}} Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining strings together. @@ -265,4 +265,4 @@ These constructs can be really useful in some situations. For example, if a user So that's the very basics of strings covered in JavaScript. In the next article, we'll build on this, looking at some of the built-in methods available to strings in JavaScript and how we can use them to manipulate our strings into just the form we want. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Test_your_skills/Math", "Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/arrays/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/arrays/index.md index efd6eba2fa12d63..693feaaa71b70d3 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/arrays/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/arrays/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Arrays" -short-title: Arrays +short-title: "Test: Arrays" slug: Learn_web_development/Core/Scripting/Test_your_skills/Arrays page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [Arrays](/en-US/docs/Learn_web_development/Core/Scripting/Arrays) article. > [!NOTE] @@ -247,3 +249,5 @@ const eBirds = birds.filter(startsWithE); ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/conditionals/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/conditionals/index.md index 51d77fa3ac786bb..5d287c5ef4e3d09 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/conditionals/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/conditionals/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Conditionals" -short-title: Conditionals +short-title: "Test: Conditionals" slug: Learn_web_development/Core/Scripting/Test_your_skills/Conditionals page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals", "Learn_web_development/Core/Scripting/Loops", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [Making decisions in your code — conditionals](/en-US/docs/Learn_web_development/Core/Scripting/Conditionals) article. > [!NOTE] @@ -222,3 +224,5 @@ if (machineActive) { ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals", "Learn_web_development/Core/Scripting/Loops", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/events/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/events/index.md index 706859d765ca11f..721bd308fab9da4 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/events/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/events/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Events" -short-title: Events +short-title: "Test: Events" slug: Learn_web_development/Core/Scripting/Test_your_skills/Events page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Event_bubbling","Learn_web_development/Core/Scripting/Image_gallery", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [Introduction to events](/en-US/docs/Learn_web_development/Core/Scripting/Events) article. > [!NOTE] @@ -221,3 +223,5 @@ buttonBar.addEventListener("click", setColor); ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Event_bubbling","Learn_web_development/Core/Scripting/Image_gallery", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/functions/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/functions/index.md index 70fbeaac7423853..7c6360cbdfe114c 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/functions/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/functions/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Functions" -short-title: Functions +short-title: "Test: Functions" slug: Learn_web_development/Core/Scripting/Test_your_skills/Functions page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Return_values","Learn_web_development/Core/Scripting/Events", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [Functions — reusable blocks of code](/en-US/docs/Learn_web_development/Core/Scripting/Functions), [Build your own function](/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function), and [Function return values](/en-US/docs/Learn_web_development/Core/Scripting/Return_values) articles. > [!NOTE] @@ -259,3 +261,5 @@ para.textContent = shortNames; ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Return_values","Learn_web_development/Core/Scripting/Events", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/index.md index f770778a590c1a0..edca0df5028f698 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/index.md @@ -1,6 +1,6 @@ --- title: "Test your skills: JavaScript" -short-title: Test your skills +short-title: "Test: JavaScript tests index" slug: Learn_web_development/Core/Scripting/Test_your_skills page-type: learn-module-assessment sidebar: learnsidebar diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/json/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/json/index.md index 8fc3faa88bccecc..e8333b65148af40 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/json/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/json/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: JSON" -short-title: JSON +short-title: "Test: JSON" slug: Learn_web_development/Core/Scripting/Test_your_skills/JSON page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [Working with JSON](/en-US/docs/Learn_web_development/Core/Scripting/JSON) article. > [!NOTE] @@ -116,3 +118,5 @@ function displayCatInfo(catString) { ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/JSON","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/loops/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/loops/index.md index a187cb00657add2..9c49575fe7f18a2 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/loops/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/loops/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Loops" -short-title: Loops +short-title: "Test: Loops" slug: Learn_web_development/Core/Scripting/Test_your_skills/Loops page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [Looping code](/en-US/docs/Learn_web_development/Core/Scripting/Loops) article. > [!NOTE] @@ -199,3 +201,5 @@ do { ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/math/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/math/index.md index 4aca0f65dc11f8e..98098b1a18eeca1 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/math/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/math/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Math" -short-title: Math +short-title: "Test: Math" slug: Learn_web_development/Core/Scripting/Test_your_skills/Math page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}} + The aim of the tests on this page is to help you assess whether you've understood the [Basic math in JavaScript — numbers and operators](/en-US/docs/Learn_web_development/Core/Scripting/Math) article. > [!NOTE] @@ -228,3 +230,5 @@ const pwdMatch = pwd1 === pwd2; ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/object_basics/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/object_basics/index.md index acea595a0791847..314dd42b38d62b4 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/object_basics/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/object_basics/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Object basics" -short-title: Objects +short-title: "Test: Objects" slug: Learn_web_development/Core/Scripting/Test_your_skills/Object_basics page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Object_basics","Learn_web_development/Core/Scripting/DOM_scripting", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [JavaScript object basics](/en-US/docs/Learn_web_development/Core/Scripting/Object_basics) article. > [!NOTE] @@ -279,3 +281,5 @@ const cat2 = new Cat("Elfie", "Aphrodite Giant", "ginger"); ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Object_basics","Learn_web_development/Core/Scripting/DOM_scripting", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/strings/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/strings/index.md index a04a58dedb686c6..4eb2428cc629bc9 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/strings/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/strings/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Strings" -short-title: Strings +short-title: "Test: Strings" slug: Learn_web_development/Core/Scripting/Test_your_skills/Strings page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [Handling text — strings in JavaScript](/en-US/docs/Learn_web_development/Core/Scripting/Strings) and [Useful string methods](/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods) articles. > [!NOTE] @@ -224,3 +226,5 @@ const myString = `Using ${theorem}, we can work out that if the two shortest sid ``` + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/test_your_skills/variables/index.md b/files/en-us/learn_web_development/core/scripting/test_your_skills/variables/index.md index 34e5801f8b12972..c5ae22cb89f6a5d 100644 --- a/files/en-us/learn_web_development/core/scripting/test_your_skills/variables/index.md +++ b/files/en-us/learn_web_development/core/scripting/test_your_skills/variables/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Variables" -short-title: Variables +short-title: "Test: Variables" slug: Learn_web_development/Core/Scripting/Test_your_skills/Variables page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting")}} + The aim of this skill test is to help you assess whether you've understood our [Storing the information you need — Variables](/en-US/docs/Learn_web_development/Core/Scripting/Variables) article. > [!NOTE] @@ -119,3 +121,9 @@ let myAge = 42; ``` + +## See also + +Also check out [Practice time - Part 3: let and const](https://scrimba.com/learn-javascript-c0v/~059?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) from Scrimba: An interactive challenge providing multiple tests concerning `let` and `const`. + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Variables", "Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/useful_string_methods/index.md b/files/en-us/learn_web_development/core/scripting/useful_string_methods/index.md index 127e153134cf74c..3a7635f4463eef4 100644 --- a/files/en-us/learn_web_development/core/scripting/useful_string_methods/index.md +++ b/files/en-us/learn_web_development/core/scripting/useful_string_methods/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting/Test_your_skills/Strings", "Learn_web_development/Core/Scripting")}} Now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more. @@ -407,12 +407,10 @@ for (const station of stations) { -## Test your skills! +## Summary -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Strings](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Strings). +You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. -## Conclusion +In the next article, we'll give you some tests that you can use to check how well you've understood and retained the information we've provided about strings and string methods. -You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — arrays. - -{{PreviousMenuNext("Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Strings", "Learn_web_development/Core/Scripting/Test_your_skills/Strings", "Learn_web_development/Core/Scripting")}} diff --git a/files/en-us/learn_web_development/core/scripting/variables/index.md b/files/en-us/learn_web_development/core/scripting/variables/index.md index 77d3642331a0f8e..e2346e9c931d840 100644 --- a/files/en-us/learn_web_development/core/scripting/variables/index.md +++ b/files/en-us/learn_web_development/core/scripting/variables/index.md @@ -6,7 +6,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting/Test_your_skills/Variables", "Learn_web_development/Core/Scripting")}} After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article, we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables. @@ -424,14 +424,8 @@ _Use `const` when you can, and use `let` when you have to._ This means that if you can initialize a variable when you declare it, and don't need to reassign it later, make it a constant. -## Test your skills! - -You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: variables](/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Variables). - -Also check out [Practice time - Part 3: let and const](https://scrimba.com/learn-javascript-c0v/~059?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) from Scrimba: An interactive challenge providing multiple tests concerning `let` and `const`. - ## Summary -By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript. +By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll give you some tests that you can use to check how well you've understood and retained this information. -{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting/Math", "Learn_web_development/Core/Scripting")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting/Test_your_skills/Variables", "Learn_web_development/Core/Scripting")}} diff --git a/files/sidebars/learnsidebar.yaml b/files/sidebars/learnsidebar.yaml index 268474c8431de30..b64137ddd314a04 100644 --- a/files/sidebars/learnsidebar.yaml +++ b/files/sidebars/learnsidebar.yaml @@ -131,28 +131,35 @@ sidebar: - /Learn_web_development/Core/Scripting/A_first_splash - /Learn_web_development/Core/Scripting/What_went_wrong - /Learn_web_development/Core/Scripting/Variables + - /Learn_web_development/Core/Scripting/Test_your_skills/Variables - /Learn_web_development/Core/Scripting/Math + - /Learn_web_development/Core/Scripting/Test_your_skills/Math - /Learn_web_development/Core/Scripting/Strings - /Learn_web_development/Core/Scripting/Useful_string_methods + - /Learn_web_development/Core/Scripting/Test_your_skills/Strings - /Learn_web_development/Core/Scripting/Arrays + - /Learn_web_development/Core/Scripting/Test_your_skills/Arrays - /Learn_web_development/Core/Scripting/Silly_story_generator - /Learn_web_development/Core/Scripting/Conditionals + - /Learn_web_development/Core/Scripting/Test_your_skills/Conditionals - /Learn_web_development/Core/Scripting/Loops + - /Learn_web_development/Core/Scripting/Test_your_skills/Loops - /Learn_web_development/Core/Scripting/Functions - /Learn_web_development/Core/Scripting/Build_your_own_function - /Learn_web_development/Core/Scripting/Return_values + - /Learn_web_development/Core/Scripting/Test_your_skills/Functions - /Learn_web_development/Core/Scripting/Events - /Learn_web_development/Core/Scripting/Event_bubbling + - /Learn_web_development/Core/Scripting/Test_your_skills/Events - /Learn_web_development/Core/Scripting/Image_gallery - /Learn_web_development/Core/Scripting/Object_basics + - /Learn_web_development/Core/Scripting/Test_your_skills/Object_basics - /Learn_web_development/Core/Scripting/DOM_scripting - /Learn_web_development/Core/Scripting/Network_requests - /Learn_web_development/Core/Scripting/JSON + - /Learn_web_development/Core/Scripting/Test_your_skills/JSON - /Learn_web_development/Core/Scripting/Debugging_JavaScript - - type: listSubPages - path: /Learn_web_development/Core/Scripting/Test_your_skills - link: /Learn_web_development/Core/Scripting/Test_your_skills - details: closed + - /Learn_web_development/Core/Scripting/Test_your_skills - link: /Learn_web_development/Core/Frameworks_libraries title: JavaScript_frameworks_and_libraries details: closed