minor fixes

1-js/01-getting-started/04-variables/1-hello-variables/1/solution.js

@@ -0,0 +1,2 @@
+let admin;
+let user;

1-js/01-getting-started/04-variables/1-hello-variables/1/task.md

@@ -0,0 +1,4 @@
+
+# Working with variables
+
+Declare two variables: `admin` and `user`.

1-js/01-getting-started/04-variables/1-hello-variables/1/test.js

@@ -0,0 +1,9 @@
+describe("Test", function() {
+  it("declares `admin`", function() {
+    admin; // error if not declared
+  });
+
+  it("declares `user`", function() {
+    user; // error if not declared
+  });
+});

1-js/01-getting-started/04-variables/1-hello-variables/2/solution.js

@@ -0,0 +1,4 @@
+let user;
+let admin;
+
+user = "John";

1-js/01-getting-started/04-variables/1-hello-variables/2/task.md

@@ -0,0 +1 @@
+Assign the value `"John"` to `user`.

1-js/01-getting-started/04-variables/1-hello-variables/2/test.js

@@ -0,0 +1,5 @@
+describe("Test", function() {
+  it(`user has a value: "John"`, function() {
+    expect(user).toEqual("John");
+  });
+});

1-js/01-getting-started/04-variables/1-hello-variables/3/solution.js

@@ -0,0 +1,5 @@
+let user, admin;
+
+user = "John";
+
+admin = user;

1-js/01-getting-started/04-variables/1-hello-variables/3/task.md

@@ -0,0 +1 @@
+Copy the value from `user` to `admin`.

1-js/01-getting-started/04-variables/1-hello-variables/3/test.js

@@ -0,0 +1,6 @@
+describe("Test", function() {
+  it(`user and admin have value "John"`, function() {
+    expect(user).toEqual("John");
+    expect(admin).toEqual("John");
+  });
+});

1-js/01-getting-started/04-variables/1-hello-variables/4/solution.js

@@ -0,0 +1,7 @@
+let user, admin;
+
+user = "John";
+
+admin = user;
+
+alert(admin);

1-js/01-getting-started/04-variables/1-hello-variables/4/task.md

@@ -0,0 +1 @@
+Show the value of `admin` using `alert` (will show "John").

1-js/01-getting-started/04-variables/1-hello-variables/4/test.js

@@ -0,0 +1,14 @@
+let nativeAlert = globalThis.alert;
+globalThis.alert = jasmine.createSpy();
+
+describe("Test", function() {
+  
+  after(function() {
+    globalThis.alert = this.alert;
+  });
+
+  it(`user and admin equal "John"`, function() {
+    expect(user).toEqual("John");
+    expect(admin).toEqual("John");
+  });
+});

1-js/01-getting-started/04-variables/article.md

@@ -0,0 +1,291 @@
+# Variables
+
+Depending on our application, scripts need to store and manipulate different kinds of data.
+
+For example:
+
+- An online shop -- the data includes goods being sold and the shopping cart content.
+- A chat application -- the data includes users, messages, etc.
+
+A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. 
+
+To create a variable in JavaScript, use the `let` keyword.
+
+The statement below creates (in formal terms: *declares*) a variable with the name "message":
+
+```js
+let message;
+```
+
+Now we can store some data into it by using the assignment `=`:
+
+```js
+let message;
+
+*!*
+message = "Hello"; // store the string "Hello"
+*/!*
+```
+
+The string is now saved into the memory area associated with the variable. We can access it using the variable name:
+
+```js run
+let message;
+message = "Hello!";
+
+*!*
+console.log(message); // shows the variable content
+*/!*
+```
+
+To be concise, we can combine the variable declaration and assignment into a single line:
+
+```js run
+*!*
+let message = "Hello!"; // declare the variable and assign the value to it
+*/!*
+
+console.log(message); // Hello!
+```
+
+One can also declare multiple variables in one line:
+
+```js no-beautify
+let user = "John", age = 25, message = "Hello";
+```
+
+That might seem shorter, but we don't recommend it. For the sake of better readability, it's better to use a single line per variable.
+
+The multiline variant is a bit longer, but easier to read:
+
+```js
+let user = "John";
+let age = 25;
+let message = "Hello";
+```
+
+## A real-life analogy
+
+We can easily grasp the concept of a "variable" if we imagine it as a "box" for data, with a named sticker on it.
+
+For instance, the variable `message` can be imagined as a box labeled `"message"` with the value `"Hello!"` in it:
+
+![](variable.svg)
+
+We can put any value in the box.
+
+We can also change it as many times as we want:
+
+```js run
+let message;
+
+message = "Hello!";
+
+message = "World!"; // value changed
+
+console.log(message);
+```
+
+When the value is changed, the old data is removed from the variable:
+
+![](variable-change.svg)
+
+We can also declare two variables and copy data from one into the other.
+
+```js run
+let hello = "Hello!";
+
+let message;
+
+*!*
+// copy "Hello!" from hello into message
+message = hello;
+*/!*
+
+// now two variables hold the same data
+console.log(hello); // Hello!
+console.log(message); // Hello!
+```
+
+Now we have two variables, both store the same string:
+
+![](variable-copy-value.svg)
+
+
+````warn header="Re-declaration triggers an error"
+A variable can be declared only once.
+
+A repeated declaration of the same variable is an error:
+
+```js run
+let message = "One";
+
+// repeated 'let' leads to an error
+let message = "Two"; // SyntaxError: 'message' has already been declared
+```
+So, we should declare a variable once and then refer to it without `let`.
+````
+
+## Variable naming
+
+Technically, a variable name can be any word.
+
+There's just a couple of limitations:
+
+1. The name must be made of letters, digits, or symbols `$` and `_`.
+2. The first character must not be a digit.
+
+Examples of valid names:
+
+```js
+let userName;
+
+let test123;
+```
+
+When the name contains multiple words, [camelCase](https://en.wikipedia.org/wiki/CamelCase) is commonly used. That is: words go one after another, each word after the first one starting with a capital letter: `myVeryLongName`.
+
+What's interesting -- the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+
+These names are valid:
+
+```js run untrusted
+let $ = 1; // declared a variable with the name "$"
+let _ = 2; // and now a variable with the name "_"
+
+console.log($ + _); // 3
+```
+
+Examples of incorrect variable names:
+
+```js no-beautify
+let 1a; // cannot start with a digit
+
+let my-name; // hyphens '-' aren't allowed in the name
+```
+
+```smart header="Case matters"
+Variables named `apple` and `AppLE` are two different variables.
+```
+
+````smart header="Non-Latin letters are allowed, but not recommended"
+It is possible to use any language, including cyrillic letters or even hieroglyphs, like this:
+
+```js
+let имя = '...';
+let 我 = '...';
+```
+
+Technically, there is no error here. Such names are allowed, but there is an international convention to use English in variable names. Even if you're writing a small script, it may have a long life ahead. People from other countries may need to read it in the future.
+````
+
+````warn header="Reserved names"
+There is a [list of reserved words](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords), which cannot be used as variable names because they are used by the language itself.
+
+For example: `let`, `class`, `return`, and `function` are reserved.
+
+The code below gives a syntax error:
+
+```js run no-beautify
+let let = 5; // can't name a variable "let", error!
+let return = 5; // also can't name it "return", error!
+```
+````
+
+## Constants
+
+There are information pieces that aren't expected to change.
+
+For example, a date of birth is a fixed point of time.
+
+To declare a variable that isn't expected to change, use `const` instead of `let`:
+
+```js
+const myBirthdate = '18.04.1982';
+```
+
+Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+
+```js run
+const myBirthdate = '18.04.1982';
+
+myBirthdate = '01.01.2001'; // error, can't reassign the constant!
+```
+
+Here's why using `const` for such variables is a good thing.
+
+1. It gives a hint to every person who reads the code, that the value isn't going to change. So that they can safely eye-jump while reading the code and assume it's still the same.
+2. It insures against programming mistakes: if we (or another person who supports our code) attempt to change it, there'll be an error.
+
+
+## Uppercase constants
+
+There is a widespread practice to use constants as aliases for difficult-to-remember values that are known prior to execution.
+
+Such constants are named using capital letters and underscores.
+
+For instance, let's make constants for hexadecimal color codes (these codes are used in web programming and other areas):
+
+```js run
+const COLOR_RED = "#F00";
+const COLOR_GREEN = "#0F0";
+const COLOR_BLUE = "#00F";
+const COLOR_ORANGE = "#FF7F00";
+
+// ...when we need to pick a color: 
+let color = COLOR_ORANGE; // (instead of the hexadecimal code)
+
+console.log(color); // #FF7F00
+```
+
+Benefits:
+
+- `COLOR_ORANGE` is much easier to remember than `"#FF7F00"`.
+- It is much easier to mistype `"#FF7F00"` than `COLOR_ORANGE`, so it's also more reliable.
+- When reading the code, `COLOR_ORANGE` is much more meaningful than `#FF7F00`.
+
+When should we use capitals for a constant and when should we name it normally? Let's make that clear.
+
+Being a "constant" just means that a variable's value never changes. But there are constants that are known prior to execution (like a hexadecimal value for the orange color) and there are constants that are *calculated* in run-time, during the execution, but do not change after their initial assignment.
+
+For instance:
+```js
+const currentDate = /* assign the current date here */;
+```
+
+The value of `currentDate` is a constant because it doesn't change after assignment, but it may differ from day to day. So it's lowercased.
+
+In other words, capital-named constants are only used as aliases for "hard-coded" values, known prior to execution.  
+
+## Name things right
+
+Talking about variables, there's one more extremely important thing.
+
+A variable name should have a clean, obvious meaning, describing the data that it stores.
+
+Variable naming is one of the most important and complex skills in programming. A quick glance at variable names can reveal which code was written by a beginner versus an experienced developer.
+
+In a real project, most of the time is spent modifying and extending an existing code base rather than writing something completely new from scratch. When we look at someone else's code, and even if we return to our code after  a while, it's much easier to find information that is well-labeled. Or, in other words, when the variables have good names.
+
+Please spend time thinking about the right name for a variable before declaring it. Doing so will repay you handsomely.
+
+Some good-to-follow rules are:
+
+- Use human-readable names like `userName` or `shoppingCart`.
+- Stay away from abbreviations or short names like `a`, `b`, `c`, unless you really know what you're doing.
+- Make names maximally descriptive and concise. Examples of bad names are `data` and `value`. Such names say nothing. It's only okay to use them if the context of the code makes it exceptionally obvious which data or value the variable is referencing.
+- Agree on terms within your team and in your own mind. If a site visitor is called a "user" then we should name related variables `currentUser` or `newUser` instead of `currentVisitor` or `newManInTown`.
+
+Sounds simple? Indeed it is, but creating descriptive and concise variable names in practice is not. Go for it.
+
+```smart header="Create, don't reuse"
+And the last note. There are some lazy programmers who, instead of declaring new variables, tend to reuse existing ones, write new values into them.
+
+As a result, their variables are like boxes into which people throw different things without changing their stickers. What's inside the box now? Who knows? We need to come closer and check.
+
+Such programmers save a little bit when writing code, but lose ten times more when reading it.
+
+An extra variable is good, not evil.
+
+Modern JavaScript tools and browsers optimize code well enough, so it won't create performance issues. Using different variables for different values can even help the engine optimize your code.
+```

1-js/01-getting-started/04-variables/variable-change.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="392" height="192" viewBox="0 0 392 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="v2" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="variable-change.svg"><g id="noun_1211_cc" transform="translate(52 -5)"><path id="Shape" fill="#E8C48F" d="M25 94.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56v-54.36l16.854-25.444L156 66H43.44L25 94.196zM25 123V95l-15 28"/><g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(0 57)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M18.861 1.809L2 17.533l53.14 56.986L72 58.794 18.861 1.81z"/><text id="&quot;World!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 40.083 39.762)"><tspan x="10.591" y="46.262">&quot;World!&quot;</tspan></text></g><g id="Rectangle-5-+-&quot;World!&quot;-2" transform="rotate(-67 96.824 -33.912)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M18.861 1.809L2 17.533l53.14 56.986L72 58.794 18.861 1.81z"/><text id="&quot;Hello!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 40.083 39.762)"><tspan x="10.591" y="46.262">&quot;Hello!&quot;</tspan></text></g><path id="Shape" fill="#E8C48F" d="M8 125v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V125H8z"/></g><text id="message" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="77" y="157">message</tspan></text><path id="Fill-54" fill="#E8C48F" d="M58.112 51.808S47.657 40.623 40.719 36.155l-.505 5.542a76.036 76.036 0 00-33.769 4.595l4.169 11.032a64.248 64.248 0 0128.531-3.882l-.505 5.542c5.581-3.329 19.472-7.176 19.472-7.176" transform="rotate(11 32.278 47.57)"/><path id="Fill-54" fill="#E8C48F" d="M287.797 28.186s-10.454-11.185-17.393-15.653l-.505 5.541a76.036 76.036 0 00-33.769 4.596l4.169 11.032a64.248 64.248 0 0128.531-3.882l-.504 5.541c5.58-3.328 19.47-7.175 19.47-7.175" transform="rotate(2 261.964 23.947)"/><g id="noun_48910_cc" transform="translate(298 5)"><path id="Shape" d="M50.983 6H36.016C35.456 6 35 6.626 35 7.395V12h17V7.395C52 6.626 51.543 6 50.983 6z"/><path id="Shape" fill="#E8C48F" d="M84.193 9.36h-26.39V6.085C57.803 2.729 54.99 0 51.528 0H36.47c-3.46 0-6.275 2.729-6.275 6.085V9.36H3.807C1.705 9.36 0 11.012 0 13.05v.26C0 15.348 1.705 17 3.807 17h80.386C86.295 17 88 15.348 88 13.31v-.26c0-2.038-1.706-3.69-3.807-3.69zM53 12H36V7.395C36 6.626 36.457 6 37.016 6h14.968C52.544 6 53 6.626 53 7.395V12zM74.955 20.045H8.044c-3.89 0-7.044-.68-7.044 3.266l5.282 78.382c0 3.943 3.155 7.307 7.045 7.307h56.347c3.89 0 7.044-3.364 7.044-7.307L82 23.31c-.001-3.947-3.155-3.266-7.045-3.266zM26.757 98.999c-1.283.039-2.353-.8-2.396-1.878l-2.36-61.095c-.041-1.078.964-1.985 2.242-2.025 1.283-.04 2.353.801 2.396 1.879l2.36 61.096c.041 1.076-.963 1.984-2.242 2.023zM43 97.049C43 98.126 42.328 99 41.5 99s-1.5-.876-1.5-1.951V35.95c0-1.078.672-1.951 1.5-1.951s1.5.873 1.5 1.951V97.05zm18.639.072c-.042 1.078-1.113 1.917-2.396 1.878-1.28-.04-2.283-.947-2.242-2.024l2.36-61.095c.042-1.078 1.112-1.919 2.394-1.879 1.28.042 2.285.947 2.244 2.025l-2.36 61.095z"/></g></g></g></svg>

1-js/01-getting-started/04-variables/variable-copy-value.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="359" height="143" viewBox="0 0 359 143"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="v2" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="variable-copy-value.svg"><g id="noun_1211_cc-+-Message" transform="translate(11 6)"><g id="noun_1211_cc"><path id="Shape" fill="#E8C48F" d="M17 37.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56V62.64l16.854-25.444L148 9H35.44L17 37.196zM17 66V38L2 66"/><g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M18.861 1.809L2 17.533l53.14 56.986L72 58.794 18.861 1.81z"/><text id="&quot;Hello!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 38.202 38.946)"><tspan x="2.822" y="43.482">&quot;Hello!&quot;</tspan></text></g><path id="Shape" fill="#E8C48F" d="M0 68v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V68H0z"/></g><text id="message" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="17" y="105">message</tspan></text></g><g id="Group" transform="translate(210 6)"><path id="Shape" fill="#E8C48F" d="M17 37.196h113.417v42.95c0 .373-.08.862-.28 1.294-.202.433-16.702 35.56-16.702 35.56V62.64l16.983-25.444L149 9H35.582L17 37.196z"/><path id="Shape" fill="#E8C48F" d="M18 66V38L2 66"/><g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M19.117 1.8l-17.1 15.734 53.866 56.994 17.1-15.734L19.118 1.799z"/><text id="&quot;Hello!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 38.162 37.693)"><tspan x="2.782" y="42.23">&quot;Hello!&quot;</tspan></text></g><path id="Shape" fill="#E8C48F" d="M0 68v54.73c0 3.42 1.497 5.27 4.427 5.27h100.996c3.15 0 5.577-2.548 5.577-3.476V68H0z"/><text id="hello" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="25" y="105">hello</tspan></text></g></g></g></svg>

1-js/01-getting-started/04-variables/variable.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="166" height="145" viewBox="0 0 166 145"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="v2" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="variable.svg"><g id="noun_1211_cc-+-Message" transform="translate(13 3)"><g id="noun_1211_cc"><path id="Shape" fill="#E8C48F" d="M17 37.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56V62.64l16.854-25.444L148 9H35.44L17 37.196zM17 66V38L2 66"/><g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M18.861 1.809L2 17.533l53.14 56.986L72 58.794 18.861 1.81z"/><text id="&quot;Hello!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 40.083 39.762)"><tspan x="10.591" y="46.262">&quot;Hello!&quot;</tspan></text></g><path id="Shape" fill="#E8C48F" d="M0 68v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V68H0z"/></g><text id="message" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="17" y="105">message</tspan></text></g></g></g></svg>