From a57ac33bb14818bdad09810572e7d2dc87beb72d Mon Sep 17 00:00:00 2001 From: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Date: Sun, 22 Dec 2024 18:21:09 +0100 Subject: [PATCH] fix(curriculum): update video ids (#57605) --- .../6733aa9b006d29f4d11307a5.md | 2 +- .../6733bec70d86e13522e98a4f.md | 2 +- .../6733becf4b0c353553b9bfa4.md | 2 +- .../6733bee844600f35c05b8264.md | 2 +- .../6733befb703ca6361da3755b.md | 2 +- .../67329fbcfaf5ff5cdaa38a42.md | 2 +- .../67335f45489c5a11b71d0ed5.md | 2 +- .../672aa578a2129554d4675049.md | 2 +- .../672ab82c1a9bbd0e3aabc39d.md | 2 +- .../672ab83c4297910eade53c2e.md | 2 +- .../672ab849aa1ef70eefd29364.md | 2 +- .../672ab8573f32480f192aaae1.md | 2 +- .../67329f9e9eb84e5c6a5e4366.md | 2 +- .../6732c68f4520d160584a6fd2.md | 2 +- .../6732c69d82814160951b1aa7.md | 2 +- .../6732c6ab21031b60d2b0c999.md | 2 +- .../6732c6ba2ea42b610b9f9ce1.md | 2 +- .../6732c6c72d3738614e1230a2.md | 2 +- .../6732c6d4dec34c61850a1276.md | 2 +- .../6732c6e281c14a61c4858361.md | 2 +- .../6733aae9d25004f60d1e86f2.md | 2 +- .../6733d3a33abdd27cd562bdf2.md | 2 +- .../6733d3ab69e94b7df7ee91b0.md | 79 +++++++++- .../67329fd6ad99c75d4a4b74e4.md | 2 +- .../6733b02d1e556005a544c5e3.md | 136 +++++++++++++++++- .../672d266034b5242126271995.md | 2 +- .../672d269da46786225e3fe3fd.md | 109 +++++++++++++- .../673284d5e52ef81a2169b097.md | 104 +++++++++++++- .../673284e7244c0c1a649121b9.md | 68 ++++++++- .../67329ffd75010f5ddeb4ea13.md | 2 +- .../67336296a3c1591da81856c2.md | 2 +- .../673362a34edda41dedf87623.md | 57 +++++++- .../673362b3f763ae1e38e17df7.md | 2 +- .../673362be2f70c21e65bc5459.md | 2 +- .../673362cbb475e21eab726506.md | 2 +- .../673362d7f94d551edb532d24.md | 2 +- .../673362e43d57b51f1ad2d466.md | 2 +- .../6733ab269b378bf724c9ac71.md | 2 +- .../6733dd694f91d61a5272b4ac.md | 2 +- 39 files changed, 568 insertions(+), 51 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md index 97f2f848488..b17cee5c3f2 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md @@ -2,7 +2,7 @@ id: 6733aa9b006d29f4d11307a5 title: What Are Some Examples of Common JavaScript Errors? challengeType: 11 -videoId: nVAaxZ34khk +videoId: e5P8nJkOSMQ dashedName: what-are-some-examples-of-common-javascript-errors --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md index bafabd33d8a..2118071aa6d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md @@ -2,7 +2,7 @@ id: 6733bec70d86e13522e98a4f title: How Does the Throw Statement Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: vNlPchT8nr8 dashedName: how-does-the-throw-statement-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md index 2623a2c2a90..191090dd59f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md @@ -2,7 +2,7 @@ id: 6733becf4b0c353553b9bfa4 title: How Does the Debugger Statement Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: gn0q7gXiMRo dashedName: how-does-the-debugger-statement-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md index be904cdc66a..cc678b11647 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md @@ -2,7 +2,7 @@ id: 6733bee844600f35c05b8264 title: How Does try...catch...finally Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: _3whfUfxGYI dashedName: how-does-try-catch-finally-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md index 49e7be346e7..29654088e7b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md @@ -2,7 +2,7 @@ id: 6733befb703ca6361da3755b title: What Are Some Examples of Using Advanced JavaScript Debugging Techniques? challengeType: 11 -videoId: nVAaxZ34khk +videoId: hHWAQYXRvxs dashedName: what-are-some-examples-of-using-advanced-javascript-debugging-techniques --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md b/curriculum/challenges/english/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md index 0982d60a3e0..5d1897b9df9 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md @@ -2,7 +2,7 @@ id: 67329fbcfaf5ff5cdaa38a42 title: What Is the var Keyword, and Why Is It No Longer Suggested to Use It? challengeType: 11 -videoId: nVAaxZ34khk +videoId: Ae4bq5IcDfI dashedName: what-is-the-var-keyword-and-why-is-it-no-longer-suggested-to-use-it --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md b/curriculum/challenges/english/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md index bc8a1a6b21a..c4decaafbe4 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md @@ -2,7 +2,7 @@ id: 67335f45489c5a11b71d0ed5 title: What Is Hoisting? challengeType: 11 -videoId: nVAaxZ34khk +videoId: Aa1bLYTu5T8 dashedName: what-is-hoisting --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md index 11fc3425862..96d642737cb 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md @@ -2,7 +2,7 @@ id: 672aa578a2129554d4675049 title: What Are the Basic Parts of a Computer? challengeType: 11 -videoId: nVAaxZ34khk +videoId: SJT6r_ejSqw dashedName: what-are-the-basic-parts-of-a-computer --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md index 99c7c12bda4..91a1e843803 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md @@ -2,7 +2,7 @@ id: 672ab82c1a9bbd0e3aabc39d title: How Can You Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices challengeType: 11 -videoId: nVAaxZ34khk +videoId: AcTxNEVccxc dashedName: how-to-effectively-work-with-your-keyboard-mouse-and-other-pointing-devices --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md index 9105b060dc7..515d189cc86 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md @@ -2,7 +2,7 @@ id: 672ab83c4297910eade53c2e title: What Are the Different Types of Internet Service Providers? challengeType: 11 -videoId: nVAaxZ34khk +videoId: pNR0QzFzSrg dashedName: what-are-the-different-types-of-internet-service-providers --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md index 1b6c9c0bd3e..8e1b267afd6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md @@ -2,7 +2,7 @@ id: 672ab849aa1ef70eefd29364 title: What Are Safe Ways to Sign Into Your Computer? challengeType: 11 -videoId: nVAaxZ34khk +videoId: pGoZFEMjC-g dashedName: what-are-safe-ways-to-sign-into-your-computer --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md index 18c74684ad0..0aba68160a5 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md @@ -2,7 +2,7 @@ id: 672ab8573f32480f192aaae1 title: What Are the Different Types of Tools Professional Developers Use? challengeType: 11 -videoId: nVAaxZ34khk +videoId: FHUfC8cm_AA dashedName: what-are-the-different-types-of-tools-professional-developers-use --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md index 1604f7ec9b9..43fdc2091ce 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md @@ -2,7 +2,7 @@ id: 67329f9e9eb84e5c6a5e4366 title: What Is a String Object, and How Does It Differ from String Primitive? challengeType: 11 -videoId: nVAaxZ34khk +videoId: _-EJRG7vr-0 dashedName: what-is-a-string-object-and-how-does-it-differ-from-string-primitive --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md index 772d1bf66e9..b81371dcae5 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md @@ -2,7 +2,7 @@ id: 6732c68f4520d160584a6fd2 title: What Is the toString() Method, and How Does It Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: OYOHw8Xmatw dashedName: what-is-the-tostring-method-and-how-does-it-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md index a2fe162e728..3bfd6c643ef 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md @@ -2,7 +2,7 @@ id: 6732c69d82814160951b1aa7 title: What Is the Number Constructor, and How Does It Work for Type Coercion? challengeType: 11 -videoId: nVAaxZ34khk +videoId: ZY_GdH7FbPI dashedName: what-is-the-number-constructor-and-how-does-it-work-for-type-coercion --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md index 9fe8fd7de9e..3054b3b977a 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md @@ -2,7 +2,7 @@ id: 6732c6ab21031b60d2b0c999 title: What Are Some Common Practices for Naming Variables and Functions? challengeType: 11 -videoId: nVAaxZ34khk +videoId: wheRZCpE724 dashedName: what-are-some-common-practices-for-naming-variables-and-functions --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md index 96a5d877627..627d73b2a3b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md @@ -2,7 +2,7 @@ id: 6732c6ba2ea42b610b9f9ce1 title: How Do You Get the Length for an Array, and How Can You Create an Empty Array of Fixed Length? challengeType: 11 -videoId: nVAaxZ34khk +videoId: ezk1SIbBDqw dashedName: how-do-you-get-the-length-for-an-array-and-how-can-you-create-an-empty-array-of-fixed-length --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md index 0c2a92d8a0f..6aca9b93a91 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md @@ -2,7 +2,7 @@ id: 6732c6c72d3738614e1230a2 title: What Are Linters and Formatters, and How Can They Help You with Code Consistency? challengeType: 11 -videoId: nVAaxZ34khk +videoId: XDPvu4bk8IA dashedName: what-are-linters-and-formatters-and-how-can-they-help-you-with-code-consistency --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md index a7150859dc3..781cc1c448c 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md @@ -2,7 +2,7 @@ id: 6732c6d4dec34c61850a1276 title: What Is Memory Management, and How Does It Work in JavaScript? challengeType: 11 -videoId: nVAaxZ34khk +videoId: HJF89E-ODlw dashedName: what-is-memory-management-and-how-does-it-work-in-javascript --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md index b93d6309632..a5f72166df9 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md @@ -2,7 +2,7 @@ id: 6732c6e281c14a61c4858361 title: What Are Closures, and How Do They Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: J4ZBwMbDAgE dashedName: what-are-closures-and-how-do-they-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md index 38797fe0eab..aafb368aabb 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md @@ -2,7 +2,7 @@ id: 6733aae9d25004f60d1e86f2 title: What Are Some Ways to Validate Forms Using JavaScript? challengeType: 11 -videoId: nVAaxZ34khk +videoId: azh-Mh6dxyo dashedName: what-are-some-ways-to-validate-forms-using-javascript --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md index 614a257d864..ad0285c05d3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md @@ -2,7 +2,7 @@ id: 6733d3a33abdd27cd562bdf2 title: What Is the Purpose of e.preventDefault? challengeType: 11 -videoId: nVAaxZ34khk +videoId: gBUdCKcBJSg dashedName: what-is-the-purpose-of-e-preventdefault --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md index 74b2c72627a..022a39c11f3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md @@ -1,14 +1,87 @@ --- id: 6733d3ab69e94b7df7ee91b0 title: How Does the Submit Event Work with Forms? -challengeType: 11 -videoId: nVAaxZ34khk +challengeType: 19 +# videoId: nVAaxZ34khk dashedName: how-does-the-submit-event-work-with-forms --- # --description-- -Watch the lecture video and answer the questions below. +The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: + +Let’s learn about how the submit event works with HTML forms. + +First, we need to understand how to submit a form. There are three ways a form can be submitted. + +The first is when the user clicks a button in the form which has the type attribute set to `submit`. + +The second is when the user presses the `Enter` key on any editable input field in the form. + +The third is through a JavaScript call to the `requestSubmit()` or `submit()` methods of the form element. + +But what happens when a form is submitted? There’s a few things that happen, and the behavior of the form depends on its attributes. + +The first attribute that we need to look at is the `action` attribute. + +The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data. If you do not set an `action` attribute, the form will send data to the current page’s URL. + +Here is an example of a form with an action attribute set to a specific URL: + +```js +
+ + +
+``` + +When this form is submitted, it will send data to freeCodeCamp’s homepage, which probably won’t do anything. + +Here’s another form, which submits to a relative path: + +```js +
+ + +
+``` + +This one submits to the /data path on the current domain. In our case, it would submit to `http://127.0.0.1:5500/data`. + +The second attribute to control how a submission behaves is the `method` attribute. This attribute accepts a standard HTTP method, such as `“GET”` or `“POST”`, and uses that method when making the request to the action URL. + +HTTP stands for Hypertext Transfer Protocol and it is used to transfer data over the web. + +HTTP methods are used to define the actions that can be performed on resources, such as `GET`, `POST`, `PUT`, `DELETE`, and so on. You will more about these methods in future lecture videos. + +When a method is not set, the form will default to a `“GET”` request. + +A `GET` request is used to retrieve data from a specified resource without making any changes to it, and the parameters are typically appended to the URL in the form of a query string. + +The data in the form will be URL encoded as name=value pairs and appended to the action URL as query parameters. Our form then tries to GET the URL `http://127.0.0.1:5500/data?number=3342`, for example. + +This is great for something like a search form, where your user is querying data. But if you want your user to submit new data, such as in a registration form, the idiomatic method to use would be the `POST` method. The `POST` method is used to send data to the server to create or update a resource. + +Let’s set the method attribute to the value of `POST`: + +```js +
+ + +
+``` + +When you send a `POST` request, a body can be included which contains the data for your request. So unlike a `GET`, the data are not appended to the URL, and our form sends the POST request to `http://127.0.0.1:5500/data`. The data, instead, can be found in the body of the request, still as URL-encoded form data. + +URL-encoded form data is when form data is converted into a string of key-value pairs, like `name=John+Doe&email=john%40example.com`, where special characters are replaced with encoded versions to safely send the data over the web. You will learn more about this in future lecture videos + +But maybe you don’t want to send the data as a URL-encoded form payload? + +The form element accepts an `enctype` attribute, which represents the encoding type to use for the data. + +This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in name=value pairs separated by new lines), or `mulitpart/form-data`, which is specifically for handling forms with a file upload. + +In this video, you’ve learned the basics of form submissions. In future videos, we’ll dive deeper into working with forms and how they interact with the server. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md index cccaf8c884d..46366eb342d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md @@ -2,7 +2,7 @@ id: 67329fd6ad99c75d4a4b74e4 title: What Is a Module in JavaScript, and How Can You Import and Export Modules in Your Program? challengeType: 11 -videoId: nVAaxZ34khk +videoId: mGPyLJLTUpo dashedName: what-is-a-module-in-javascript-and-how-can-you-import-and-export-modules-in-your-program --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md index d9ca791db7c..54ae17fe664 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md @@ -1,14 +1,144 @@ --- id: 6733b02d1e556005a544c5e3 title: What Is Recursion, and How Does It Work? -challengeType: 11 -videoId: nVAaxZ34khk +challengeType: 19 +# videoId: nVAaxZ34khk dashedName: what-is-recursion-and-how-does-it-work --- # --description-- -Watch the video lecture and answer the questions below. +The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: + +Let’s learn how recursion works in JavaScript. + +Recursion is a complicated feature that allows you to call a function repeatedly until a base-case is reached. Unlike a traditional loop, recursion allows you to handle something with an unknown depth, such as deeply nested objects/arrays, or a file tree. But you can also use it for more basic tasks, such as counting down from a given number. + +Let’s construct a function to do exactly that. We’ll call our function recursiveCountdown, and it needs to accept a number. We’ll have it print this number to the console: + +```js +const recursiveCountdown = (number) => { + console.log(number); +}; +``` + +Now if we call this and pass the number 5, we’ll see the number print to our terminal. But nothing else happens – and the number 5 certainly isn’t a countdown. + +Before we start building the recursive portion of our function, we need to establish our base case first. If you don’t have a base case established, your code will run until it exceeds your memory allocation and crashes. + +```js +const recursiveCountdown = (number) => { + if (number < 1) { + return; + } + console.log(number); + }; + +recursiveCountdown(5); +``` + +For our base case, we want the countdown to stop if the number is less than 1. When we hit that base-case, we can return to break out of the function execution. + +Now that we’ve safely prepared a base-case, we can set up the recursion. The key point that makes a function recursive is that it calls itself in its execution. In this case, we want to call the function after we print the number. But in order to count down, our new number needs to be one less: + +```js +const recursiveCountdown = (number) => { + if (number < 1) { + return; + } + console.log(number); + recursiveCountdown(number - 1); + }; + +recursiveCountdown(5); // +``` + +This would log the numbers 5, 4, 3, 2, and 1 to the console. + +We do get our five numbers! But what if we wanted to count up instead? Rather than writing an entirely new function, we can swap the order of our log and our recursive call: + +```js +const recursiveCountdown = (number) => { + if (number < 1) { + return; + } + recursiveCountdown(number - 1); + console.log(number); + }; + +recursiveCountdown(5); +``` + +This would log the numbers 1, 2, 3, 4, and 5 to the console. + +But why does that work? Well, to understand this you need to understand the call stack. The call stack is how JavaScript tracks and resolves function calls. The stack functions as a last-in-first-out queue of sorts. To understand this better, let’s add some logging to our function: + +```js +const recursiveCountdown = (number) => { + console.log(`Function execution started for number: ${number}`); + if (number < 1) { + console.log(`Base case reached, begin resolving stack`); + return; + } + console.log(`Calling recursiveCountdown with number: ${number - 1}`); + recursiveCountdown(number - 1); + console.log(`Function execution completed for number: ${number}`); + }; + +recursiveCountdown(5); +``` + +We’ve added four key statements here. The first log runs when a function call begins executing. The third log runs just before the recursive function is called. And the fourth log runs when the function execution has ended. The result is: + +```md +Function execution started for number: 5 +Calling recursiveCountdown with number: 4 +Function execution started for number: 4 +Calling recursiveCountdown with number: 3 +Function execution started for number: 3 +Calling recursiveCountdown with number: 2 +Function execution started for number: 2 +Calling recursiveCountdown with number: 1 +Function execution started for number: 1 +Calling recursiveCountdown with number: 0 +Function execution started for number: 0 +Base case reached, begin resolving stack +Function execution completed for number: 1 +Function execution completed for number: 2 +Function execution completed for number: 3 +Function execution completed for number: 4 +Function execution completed for number: 5 +``` + +But how does this happen? Well, this is where the call stack comes in to play. When we call `recursiveCountdown(5)`, that function call is added to the call stack. + +When that function call reaches the point where it needs to call `recursiveCountdown(4)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(4)` gets added to the call stack, on top of the `recursiveCountdown(5)`. + +When that function call reaches the point where it needs to call `recursiveCountdown(3)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(3)` gets added to the call stack, on top of the `recursiveCountdown(4)`. + +When that function call reaches the point where it needs to call `recursiveCountdown(2)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(2)` gets added to the call stack, on top of the `recursiveCountdown(3)`. + +When that function call reaches the point where it needs to call `recursiveCountdown(1)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(1)` gets added to the call stack, on top of the `recursiveCountdown(2)`. + +And finally, when that function call reaches the point where it needs to call `recursiveCountdown(0)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(0)` gets added to the call stack, on top of the `recursiveCountdown(1)`. + +But `recursiveCountdown(0)` doesn’t call another function – it hits our base case, where it returns early. Because the execution of that function has ended, the function call can be considered “resolved”. When the call is resolved, it’s removed from the stack. + +Now our `recursiveCountdown(1)` is no longer waiting on that call – it’s at the top of the stack and can resume executing. + +`recursiveCountdown(1)` resolves, is removed from the stack, and allows `recursiveCountdown(2)` to resume execution. + +`recursiveCountdown(2)` resolves, is removed from the stack, and allows `recursiveCountdown(3)` to resume execution. + +`recursiveCountdown(3)` resolves, is removed from the stack, and allows `recursiveCountdown(4)` to resume execution. + +`recursiveCountdown(4)` resolves, is removed from the stack, and allows `recursiveCountdown(5)` to resume execution. + +And `recursiveCountdown(5)` resolves and is removed from the stack. Our call stack is now empty, so the recursion is complete! + +This is a basic overview of how recursion works in JavaScript. It’s a complicated concept, and you should play around with some code and log statements until you’re comfortable with the behavior of the call stack. + +For a little fun fact, we talked about how a lack of a base-case can cause your code to crash when it runs out of memory. This is because the recursion keeps piling more and more function calls into the call stack until the stack overflows. Just like the name of the popular programming community. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md index 5a90369f397..600de23b15f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md @@ -2,7 +2,7 @@ id: 672d266034b5242126271995 title: What Is ASCII, and How Does It Work with charCodeAt() and fromCharCode()? challengeType: 11 -videoId: xpB7Wr4kiis +videoId: XMi4lKr0FRw dashedName: what-is-ascii-and-how-does-it-work-with-charcodeat-and-fromcharcode --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md index 28f4518c0d3..ad8c66e1a86 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md @@ -1,14 +1,117 @@ --- id: 672d269da46786225e3fe3fd title: What Is the Purpose of Functions, and How Do They Work? -challengeType: 11 -videoId: nVAaxZ34khk +challengeType: 19 +# videoId: nVAaxZ34khk dashedName: what-is-the-purpose-of-functions-and-how-do-they-work --- # --description-- -Watch the video lecture and answer the questions below. +The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: + +Functions are reusable pieces of code that perform a specific task or calculate a value. Think of functions as a machine that takes some input, does some operations on it, and then produces an output. + +Here is an example of declaring a function: + +```js +function greet() { + console.log("Hello, Jessica!"); +} +``` + +In this example, we have declared a function called `greet`. Inside that function, we have a `console.log` that logs the message `"Hello, Jessica!"`. + +If we tried to run this code, we would not see the message appear in the console. This because we need to call the function. + +A function call, or or invocation, is when we actually use or execute the function. To call a function, you will need to reference the function name followed by a set of parentheses: + +```js +function greet() { + console.log("Hello, Jessica!"); +} + +greet(); // "Hello, Jessica!" +``` + +Now the message of `"Hello, Jessica!"` will be logged to the console. + +But what if we wanted the message to say `"Hello, Nick!"` or `"Hello, Anna!"`? + +We don’t want to write a new function each time we greet a different user. Instead, we can create a reusable function that uses function parameters and arguments. + +Parameters act as placeholders for the values that will be passed to the function when it is called. They allow functions to accept input and work with that input. + +Arguments are the actual values passed to the function when it is called. + +Here is an updated version of the greet function that uses parameters and arguments: + +```js +function greet(name) { + console.log("Hello, " + name + "!"); +} + +greet("Alice"); // Hello, Alice! +greet("Nick"); // Hello, Nick! +``` + +The name serves as the parameter while the strings `"Alice"` and `"Nick"` serve as the arguments. Now we have a reusable function that can be used dozens of times throughout our code with different arguments. + +When a function finishes its execution, it will always return a value. By default, the return value will be `undefined`. + +Here is an example: + +```js +function doSomething() { + console.log("Doing something..."); +} + +let result = doSomething(); +console.log(result); // undefined +``` + +If you need your function to return a specific value, then you will need to use the `return` statement. + +Here is an example of using a `return` statement to return the sum of two values: + +```js +function calculateSum(num1, num2) { + return num1 + num2; +} + +console.log(calculateSum(3, 4)); // 7 +``` + +Often times you will be using the `return` statement, because you can use that value that was output from the function later on in your code. + +So far, we’ve been working with named functions, but you can also create what’s called an anonymous function. + +An anonymous function is a function without a name that can be assigned to a variable like this: + +```js +const sum = function (num1, num2) { + return num1 + num2; +}; + +console.log(sum(3, 4)); // 7 +``` + +In this example, we have a `const` variable called `sum` and we are assigning it an anonymous function that returns the sum of `num1` and `num2`. We are then able to call `sum` and pass in the numbers `3` and `4` to get the result of `7`. + +Functions support default parameters, allowing you to set default values for parameters. These default values are used if the function is called without an argument for that parameter. Here’s an example: + +```js +function greetings(name = "Guest") { + console.log("Hello, " + name + "!"); +} + +greetings(); // Hello, Guest! +greetings("Anna"); // Hello, Anna! +``` + +In this example, if no argument is provided for name, it defaults to `Guest`. + +In summary, functions allow you to write reusable and organized code. They can take inputs (parameters), perform actions, and return outputs. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md index 5f0968c66d9..b9fc6d6b550 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md @@ -1,14 +1,112 @@ --- id: 673284d5e52ef81a2169b097 title: What Are Arrow Functions, and How Do They Work? -challengeType: 11 -videoId: nVAaxZ34khk +challengeType: 19 +# videoId: nVAaxZ34khk dashedName: what-are-arrow-functions-and-how-do-they-work --- # --description-- -Watch the lecture video and answer the questions below. +The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: + +In the previous lecture, you learned how to work with functions, which are reusable pieces of code that help make your code more modular, easier to maintain, and more efficient. + +All previous examples used the regular function syntax, like this: + +```js +function greetings(name) { + console.log("Hello, " + name + "!"); +} +``` + +But another way to write functions in JavaScript is to create an arrow function expression. + +Here is how you can refactor the previous example to use arrow function syntax instead: + +```js +const greetings = (name) => { + console.log("Hello, " + name + "!"); +}; +``` + +In this revised example, we are creating a const variable called `greetings` and assigning it an anonymous function. + +Most of the syntax will look familiar to you except for the missing `function` keyword and the addition of the arrow `=>` between the `name` parameter and the function body. + +If your parameter list only has one parameter in it, then you can remove the parentheses like this: + +```js +const greetings = name => { + console.log("Hello, " + name + "!"); +}; +``` + +If your arrow function has no parameters, then you must use the parentheses like this: + +```js +const greetings = () => { + console.log("Hello"); +}; +``` + +When first learning about functions, you had to wrap the function body in curly braces. + +But if your function body only contains a single line of code, you can remove the curly braces like this: + +```js +const greetings = name => console.log("Hello, " + name + "!"); +``` + +It is important to note that removing the parentheses and curly braces for regular function syntax will not work. You will get errors if you tried to do something like this: + +```js +// This will produce syntax errors +function greetings name console.log("Hello, " + name + "!"); +``` + +These types of one line functions only work if you are using the arrow function syntax. + +Another key concept is the `return` statement. + +Here is an example of using the arrow function syntax to calculate the area: + +```js +const calculateArea = (width, height) => { + const area = width * height; + return area; +}; + +console.log(calculateArea(5, 3)); // 15 +``` + +We are creating a variable inside the function called `area` and then returning that variable. But we could clean up our code a bit and return the calculation itself: + +```js +const calculateArea = (width, height) => { + return width * height; +}; +``` + +If you tried to remove the curly braces and place the calculation on the same line, then you would get an `Uncaught SyntaxError: Unexpected token 'return' message`. + +```js +const calculateArea = (width, height) => return width * height; +``` + +The reason why you are getting this error, is because you need to remove the `return` statement. When you remove that `return` statement, the error will disappear and the function will still implicitly return the calculation. + +```js +const calculateArea = (width, height) => width * height; +``` + +So when should you use the arrow function syntax? + +Well, it depends. + +Many developers use it consistently in their personal projects. However, when working on a team, the choice usually depends on whether the existing codebase uses regular functions or arrow functions. + +In future lectures, we’ll cover when to use arrow functions and when to avoid them. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md index 87e98db0a01..16e6ba5d873 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md @@ -1,14 +1,76 @@ --- id: 673284e7244c0c1a649121b9 title: What Is Scope in Programming, and How Does Global, Local, and Block Scope Work? -challengeType: 11 -videoId: nVAaxZ34khk +challengeType: 19 +# videoId: nVAaxZ34khk dashedName: what-is-scope-in-programming-and-how-does-global-local-and-block-scope-work --- # --description-- -Watch the lecture video and answer the questions below. +The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: + +Scope in programming refers to the visibility and accessibility of variables in different parts of your code. It determines where variables can be accessed or modified. + +In JavaScript, understanding scope is crucial for writing clean, efficient, and bug-free code. There are three main types of scope: global scope, local scope, and block scope. + +Global scope is the outermost scope in a JavaScript program. Variables declared in the global scope are accessible from anywhere in your code, including within functions and blocks. These variables are often called global variables. + +While global variables can be convenient, they should be used sparingly as they can lead to naming conflicts and make your code harder to maintain. + +Here's an example of a global variable: + +```js +let globalVar = "I'm a global variable"; + +function printGlobalVar() { + console.log(globalVar); +} + +printGlobalVar(); // Output: "I'm a global variable" +``` + +In this example, `globalVar` is declared in the global scope and can be accessed inside the `printGlobalVar` function. + +Local scope, on the other hand, refers to variables that are only accessible within a function. + +Here's an example of local scope: + +```js +function greet() { + let message = "Hello, local scope!"; + console.log(message); +} + +greet(); // Output: "Hello, local scope!" +console.log(message); // This will throw an error +``` + +In this code, `message` is a local variable within the `greet` function. It can be used inside the function, but trying to access it outside the function will result in an error. + +Block scope is a concept introduced with the let and const keywords in ES6. A block is any code section within curly braces `{}`, such as in `if` statements, `for` loops, or `while` loops. The concept of loops will be taught in an upcoming lecture. + +Variables declared with `let` or `const` inside a block are only accessible within that block. Here's an example of block scope: + +```js +if (true) { + let blockVar = "I'm in a block"; + console.log(blockVar); // Output: "I'm in a block" +} +console.log(blockVar); // This will throw an error +``` + +In this example, `blockVar` is only accessible within the `if` block. Trying to access it outside the block will result in an error. + +Understanding these different types of scope is essential for managing variable accessibility and avoiding unintended side effects in your code. + +Global variables should be used sparingly, as they can lead to naming conflicts and make your code harder to maintain. + +Local variables help to keep different parts of your code isolated, which is especially useful in larger programs. + +Block scoping with `let` and `const` provides even finer control over variable accessibility, helping to prevent errors and make your code more predictable. + +Mastering these basic concepts of global, local, and block scope will provide a solid foundation for understanding more advanced topics. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md index 6c407d3ce4b..1aae18e36bc 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md @@ -2,7 +2,7 @@ id: 67329ffd75010f5ddeb4ea13 title: What Is a Callback Function, and How Does It Work with the forEach Method? challengeType: 11 -videoId: nVAaxZ34khk +videoId: Ye6d69RVeqY dashedName: what-is-a-callback-function-and-how-does-it-work-with-the-foreach-method --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md index e922b881c1c..fe5a9fbf34f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md @@ -2,7 +2,7 @@ id: 67336296a3c1591da81856c2 title: What Are Higher-Order Functions? challengeType: 11 -videoId: nVAaxZ34khk +videoId: dj9Pt4tODfA dashedName: what-are-higher-order-functions --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md index 816314c5127..b98dc58b4f1 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md @@ -1,14 +1,65 @@ --- id: 673362a34edda41dedf87623 title: What Is the Map Method, and How Does It Work? -challengeType: 11 -videoId: nVAaxZ34khk +challengeType: 19 +# videoId: nVAaxZ34khk dashedName: what-is-the-map-method-and-how-does-it-work --- # --description-- -Watch the lecture video and answer the questions below. +The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: + +The `map` method is a powerful and widely used function in JavaScript that operates on arrays. It is designed to create a new array by applying a given function to each element of the original array. + +This method does not modify the original array but instead returns a new array containing the results of the function applied to each element. + +Here is an example of using the `map` method on an array of numbers: + +```js +const numbers = [1, 2, 3, 4, 5]; +const doubled = numbers.map((num) => num * 2); +console.log(numbers); // [1,2,3,4,5] +console.log(doubled); // [2,4,6,8,10] +``` + +To create a new array where each number is doubled, we are using the `map` method. The `map` method accepts a callback function where the function is called on every single element in the array. + +In this case, each number in the array will be multiplied by 2. The result will be a new array of the numbers 2,4,6,8,10. + +The callback function can accept up to three arguments. + +The first argument is the current element being processed. + +```js +const numbers = [3, 4, 5, 6, 7].map((element) => { + console.log("Element:", element); + return element * 2; +}); +``` + +The second argument is the index of the current element being processed. + +```js +const numbers = [3, 4, 5, 6, 7].map((element, index) => { + console.log("Element:", element); + console.log("Index:", index); + return element * 2; +}); +``` + +The third argument is the array where `map` is being called on. + +```js +const numbers = [3, 4, 5, 6, 7].map((element, index, array) => { + console.log("Element:", element); + console.log("Index:", index); + console.log("Array:", array); + return element * 2; +}); +``` + +Understanding and effectively using the map method can significantly improve your ability to work with arrays in JavaScript. In future lecture videos, we'll dive deeper into more advanced uses of map and explore how it can be a powerful tool for building dynamic and efficient programs. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md index f8599431676..c4b05e81191 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md @@ -2,7 +2,7 @@ id: 673362b3f763ae1e38e17df7 title: What Is the Filter Method, and How Does It Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: EaVyNFI53Mk dashedName: what-is-the-filter-method-and-how-does-it-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md index be1d5e441f9..bea6d82f983 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md @@ -2,7 +2,7 @@ id: 673362be2f70c21e65bc5459 title: What Is the Reduce Method, and How Does It Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: fxgwdO-Eii8 dashedName: what-is-the-reduce-method-and-how-does-it-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md index a3f74c4374b..f721c1d624b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md @@ -2,7 +2,7 @@ id: 673362cbb475e21eab726506 title: What Is Method Chaining, and How Does It Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: bsCkwxZ4sho dashedName: what-is-method-chaining-and-how-does-it-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md index 540d92a0f8c..99550b28a52 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md @@ -2,7 +2,7 @@ id: 673362d7f94d551edb532d24 title: How Does the Sort Method Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: eA5HGl-qsdA dashedName: how-does-the-sort-method-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md index 6ec357a968a..12db4474500 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md @@ -2,7 +2,7 @@ id: 673362e43d57b51f1ad2d466 title: How Do the every() and some() Methods Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: ELHJGK4IyqU dashedName: how-do-the-every-and-some-methods-work --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md index e685e1c792d..b30e098b688 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md @@ -2,7 +2,7 @@ id: 6733ab269b378bf724c9ac71 title: What Are Sets in JavaScript, and How Does It Differ from WeakSets? challengeType: 11 -videoId: nVAaxZ34khk +videoId: 4XFTr08_hog dashedName: what-are-sets-in-javascript-and-how-does-it-differ-from-weaksets --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md index f09c5a81584..977210422ed 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md @@ -2,7 +2,7 @@ id: 6733dd694f91d61a5272b4ac title: What Is the Map Object, and How Does It Differ from WeakMaps? challengeType: 11 -videoId: nVAaxZ34khk +videoId: 2hHKZBPJQRY dashedName: what-is-the-map-object-and-how-does-it-differ-from-weakmaps ---