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 de9bb13e58fd42f..bcf8de7975872bf 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 @@ -356,7 +356,9 @@ function greeting() { } ``` -Both functions you want to call are called `greeting()`, but you can only ever access the `first.js` file's `greeting()` function (the second one is ignored). In addition, an error results when attempting (in the `second.js` file) to assign a new value to the `name` variable — because it was already declared with `const`, and so can't be reassigned. +You will see that the second script does not load and run at all, and an error is printed in the console: `Uncaught SyntaxError: Identifier 'name' has already been declared`. This is because the `name` constant is already declared in `first.js`, and you can't declare the same constant twice in the same scope. Because the second script did not load, the `greeting()` function from `second.js` is not available to be called. Therefore, you will see an alert box displaying `Hello Chris: welcome to our company.`. + +Try removing the second `const name = "Zaptec";` line from `second.js` and reloading the page. Now both scripts execute, and the alert box says `Our company is called Chris.`. Functions are allowed to be redeclared, and the last declaration gets used. The previous declarations are effectively overwritten. > [!NOTE] > You can see this example [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)). 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 356a33666ad4a13..7122a2b90620b08 100644 --- a/files/en-us/learn_web_development/core/scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/index.md @@ -12,7 +12,7 @@ JavaScript is a huge topic, with so many different features, styles, and techniq ## Prerequisites -Before starting this module, you don't need any previous JavaScript knowledge, but you should have worked through the previous modules in the course. You should have at least know [HTML](/en-US/docs/Learn_web_development/Core/Structuring_content) and the [basic fundamentals of CSS](/en-US/docs/Learn_web_development/Core/Styling_basics). +Before starting this module, you don't need any previous JavaScript knowledge, but you should have worked through the previous modules in the course. You should at least know [HTML](/en-US/docs/Learn_web_development/Core/Structuring_content) and the [basic fundamentals of CSS](/en-US/docs/Learn_web_development/Core/Styling_basics). > [!NOTE] > If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/). diff --git a/files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md b/files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md index 1ef1a9a2ae1cfbe..b62bb416046297d 100644 --- a/files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md +++ b/files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md @@ -34,7 +34,7 @@ When you built up the "Guess the number" game in the previous article, you may h Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across: -- **Syntax errors**: These are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean! +- **Syntax errors**: These are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually not too hard to fix, as long as you are familiar with the right tools and know what the error messages mean! - **Logic errors**: These are errors where the syntax is actually correct but the code is not what you intended it to be, meaning that program runs successfully but gives incorrect results. These are often harder to fix than syntax errors, as there usually isn't an error message to direct you to the source of the error. Okay, so it's not quite _that_ simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward. diff --git a/files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md b/files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md index 94392fb9ee045e5..0436dcd9942771e 100644 --- a/files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md @@ -426,8 +426,7 @@ In addition to branches, it is possible to create `tags` on any branch and later ### Create an account and repository on GitHub -First we will create a free account on GitHub. -With a free account you can't create private repos, but you can create as many _public_ repositories ("repos") as you like. +First we will create an account on GitHub (this is free). Then we create and configure a repository named "django_local_library" for storing the [Local library website](/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) as we evolve it in the rest of this tutorial. The steps are: diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md index b5f77efc4962c13..62c37f3bc54d5a3 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md @@ -144,7 +144,7 @@ When you access the web, quite a lot happens between your first interaction (for 2. When that file is received by the browser, it will start to parse it, and will probably find instructions to make more requests. As discussed above, these might be for files to embed such as images, style information, scripts, and so on. 4. When all of the resources have been requested, the web browser parses and renders them as required, before displaying the result to the user. -This description of how the web works is heavily simplified, but it is all you really need to know at this point. You will find a more detailed account of how web pages and requested and rendered by a web browser in our [Web standards](/en-US/docs/Learn_web_development/Getting_started/Web_standards) module, slightly later on. +This description of how the web works is heavily simplified, but it is all you really need to know at this point. You will find a more detailed account of how web pages are requested and rendered by a web browser in our [Web standards](/en-US/docs/Learn_web_development/Getting_started/Web_standards) module, slightly later on. For now, try opening a web browser and loading up a couple of your favorite sites, thinking about the above steps as you do so. @@ -208,7 +208,7 @@ As a result, you need to be careful to check the answers they give you, and not - Typing in `"ant fish cheese"` (with the quotes) will only return results that contain that exact phrase. - `"ant cheese" -fish` will return results that contain `ant` and/or `cheese` but not `fish`. - - `and OR cheese` will only return results with one term or the other, not both. From our testing, this one only seemed to work effectively in Google. + - `ant OR cheese` will only return results with one term or the other, not both. From our testing, this one only seemed to work effectively in Google. - `intitle:cheese` will only return results that have "cheese" in the main title of the page. > [!NOTE] diff --git a/files/en-us/web/api/animation/index.md b/files/en-us/web/api/animation/index.md index 94b574321cc42ca..148b052a41d069a 100644 --- a/files/en-us/web/api/animation/index.md +++ b/files/en-us/web/api/animation/index.md @@ -26,6 +26,8 @@ The **`Animation`** interface of the [Web Animations API](/en-US/docs/Web/API/We - : Returns the current finished Promise for this animation. - {{domxref("Animation.id")}} - : Gets and sets the `String` used to identify the animation. +- {{domxref("Animation.overallProgress")}} {{ReadOnlyInline}} {{experimental_inline}} + - : Returns a number between `0` and `1` indicating the animation's overall progress towards its finished state. - {{domxref("Animation.pending")}} {{ReadOnlyInline}} - : Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation. - {{domxref("Animation.playState")}} {{ReadOnlyInline}} diff --git a/files/en-us/web/api/animation/overallprogress/index.md b/files/en-us/web/api/animation/overallprogress/index.md new file mode 100644 index 000000000000000..bf7214bbf8f8ee2 --- /dev/null +++ b/files/en-us/web/api/animation/overallprogress/index.md @@ -0,0 +1,149 @@ +--- +title: "Animation: overallProgress property" +short-title: overallProgress +slug: Web/API/Animation/overallProgress +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.Animation.overallProgress +--- + +{{APIRef("Web Animations")}}{{seecompattable}} + +The **`overallProgress`** read-only property of the {{domxref("Animation")}} interface returns a number between `0` and `1` indicating the animation's overall progress towards its finished state. This is the overall progress across all of the animation's iterations, not each individual iteration. + +`overallProgress` works consistently across all animations, regardless of the type of {{domxref("AnimationTimeline", "timeline")}}. + +## Value + +A number between `0` and `1`, or `null` if the animation lacks a timeline, is inactive or hasn't been played yet, or if its {{domxref("Animation/currentTime", "currentTime")}} is set to a non-time value. + +If the animation's [`iterations`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#iterations) property is set to `Infinity`, or if its {{domxref("Animation/currentTime", "currentTime")}} is set to a negative value, `overallProgress` will return `0`. + +If the animation's [`duration`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#duration) is set to `0`, `overallProgress` will return `1`. + +## Examples + +### Displaying a percentage progress + +This demo uses `overallProgress` to create a "percentage progress" readout, which is displayed to the screen while an animation runs. + +### HTML + +The HTML contains a {{htmlelement("button")}} to press to start the animation, a {{htmlelement("p")}} element in which to display the percentage progress, and a {{htmlelement("div")}} that will be animated. + +```html + +

Progress: 0%

+
+``` + +The demo's CSS provides some rudimentary styling, which is not important for understanding how the JavaScript works, therefore we have hidden it for brevity. + +```css hidden +* { + box-sizing: border-box; +} + +html { + font-family: Arial, Helvetica, sans-serif; +} + +body { + margin: 0; + width: 500px; + margin: 0 auto; + padding: 20px; +} + +.progress { + font-weight: bold; +} + +.box { + width: 100px; + height: 100px; + border-radius: 40px 20px; + border: 10px solid black; + background: lightseagreen; + margin: 0 auto; +} +``` + +### JavaScript + +In the JavaScript, we start off by grabbing references to the {{htmlelement("button")}}, {{htmlelement("p")}}, and {{htmlelement("div")}} elements. + +We then create: + +- an `animation` variable which will reference the animation, once we've created it +- a [keyframes](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) array +- an options object containing timing properties. + +```js +const btn = document.querySelector("button"); +const progress = document.querySelector(".progress"); +const box = document.querySelector(".box"); + +let animation; + +const keyframes = [{ rotate: "0deg" }, { rotate: "360deg" }]; + +const timingProps = { + duration: 3000, + iterations: 1, +}; +``` + +Next we add a `"click"` event listener to the `