javascript-tutorial · vplentinax · Jun 1, 2020 · May 31, 2020 · May 31, 2020
diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+  <script>
+    alert( "I'm JavaScript!" );
+  </script>
+
+</body>
+
+</html>
diff --git a/...-prompt-confirm/1-simple-page/solution.md → ...-prompt-confirm/1-simple-page/solution.md b/...-prompt-confirm/1-simple-page/solution.md → ...-prompt-confirm/1-simple-page/solution.md
diff --git a/...lert-prompt-confirm/1-simple-page/task.md → ...lert-prompt-confirm/1-simple-page/task.md b/...lert-prompt-confirm/1-simple-page/task.md → ...lert-prompt-confirm/1-simple-page/task.md
diff --git a/...-steps/09-alert-prompt-confirm/article.md → ...-steps/06-alert-prompt-confirm/article.md b/...-steps/09-alert-prompt-confirm/article.md → ...-steps/06-alert-prompt-confirm/article.md
diff --git a/...2-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md b/...2-first-steps/06-type-conversions/1-primitive-conversions-questions/solution.md
diff --git a/...irst-steps/06-type-conversions/article.md → ...irst-steps/07-type-conversions/article.md b/...irst-steps/06-type-conversions/article.md → ...irst-steps/07-type-conversions/article.md
diff --git a/...7-operators/1-increment-order/solution.md → ...8-operators/1-increment-order/solution.md b/...7-operators/1-increment-order/solution.md → ...8-operators/1-increment-order/solution.md
diff --git a/...ps/07-operators/1-increment-order/task.md → ...ps/08-operators/1-increment-order/task.md b/...ps/07-operators/1-increment-order/task.md → ...ps/08-operators/1-increment-order/task.md
diff --git a/...operators/2-assignment-result/solution.md → ...operators/2-assignment-result/solution.md b/...operators/2-assignment-result/solution.md → ...operators/2-assignment-result/solution.md
diff --git a/.../07-operators/2-assignment-result/task.md → .../08-operators/2-assignment-result/task.md b/.../07-operators/2-assignment-result/task.md → .../08-operators/2-assignment-result/task.md
diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
@@ -0,0 +1,26 @@
+
+```js no-beautify
+"" + 1 + 0 = "10" // (1)
+"" - 1 + 0 = -1 // (2)
+true + false = 1
+6 / "3" = 2
+"2" * "3" = 6
+4 + 5 + "px" = "9px"
+"$" + 4 + 5 = "$45"
+"4" - 2 = 2
+"4px" - 2 = NaN
+7 / 0 = Infinity
+" -9  " + 5 = " -9  5" // (3)
+" -9  " - 5 = -14 // (4)
+null + 1 = 1 // (5)
+undefined + 1 = NaN // (6)
+" \t \n" - 2 = -2 // (7)
+```
+
+1. The addition with a string `"" + 1` converts `1` to a string: `"" + 1 = "1"`, and then we have `"1" + 0`, the same rule is applied.
+2. The subtraction `-` (like most math operations) only works with numbers, it converts an empty string `""` to `0`.
+3. The addition with a string appends the number `5` to the string.
+4. The subtraction always converts to numbers, so it makes `"  -9  "` a number `-9` (ignoring spaces around it).
+5. `null` becomes `0` after the numeric conversion.
+6. `undefined` becomes `NaN` after the numeric conversion.
+7. Space characters, are trimmed off string start and end when a string is converted to a number. Here the whole string consists of space characters, such as `\t`, `\n` and a "regular" space between them. So, similarly to an empty string, it becomes `0`.
diff --git a/...1-primitive-conversions-questions/task.md → ...3-primitive-conversions-questions/task.md b/...1-primitive-conversions-questions/task.md → ...3-primitive-conversions-questions/task.md
@@ -21,6 +21,7 @@ true + false
 "  -9  " - 5
 null + 1
 undefined + 1
+" \t \n" - 2
 ```
 
 Piensa cuidadosamente, luego escribe los resultados y compáralos con la respuesta.
diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md b/1-js/02-first-steps/08-operators/4-fix-prompt/solution.md
@@ -0,0 +1,32 @@
+The reason is that prompt returns user input as a string.
+
+So variables have values `"1"` and `"2"` respectively.
+
+```js run
+let a = "1"; // prompt("First number?", 1);
+let b = "2"; // prompt("Second number?", 2);
+
+alert(a + b); // 12
+```
+
+What we should to is to convert strings to numbers before `+`. For example, using `Number()` or prepending them with `+`.
+
+For example, right before `prompt`:
+
+```js run
+let a = +prompt("First number?", 1);
+let b = +prompt("Second number?", 2);
+
+alert(a + b); // 3
+```
+
+Or in the `alert`:
+
+```js run
+let a = prompt("First number?", 1);
+let b = prompt("Second number?", 2);
+
+alert(+a + +b); // 3
+```
+
+Using both unary and binary `+` in the latest code. Looks funny, doesn't it?
diff --git a/1-js/02-first-steps/08-operators/4-fix-prompt/task.md b/1-js/02-first-steps/08-operators/4-fix-prompt/task.md
@@ -0,0 +1,18 @@
+importance: 5
+
+---
+
+# Fix the addition
+
+Here's a code that asks the user for two numbers and shows their sum.
+
+It works incorrectly. The output in the example below is `12` (for default prompt values).
+
+Why? Fix it. The result should be `3`.
+
+```js run
+let a = prompt("First number?", 1);
+let b = prompt("Second number?", 2);
+
+alert(a + b); // 12
+```
diff --git a/1-js/02-first-steps/07-operators/article.md → 1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/07-operators/article.md → 1-js/02-first-steps/08-operators/article.md
diff --git a/...arison/1-comparison-questions/solution.md → ...arison/1-comparison-questions/solution.md b/...arison/1-comparison-questions/solution.md → ...arison/1-comparison-questions/solution.md
diff --git a/...comparison/1-comparison-questions/task.md → ...comparison/1-comparison-questions/task.md b/...comparison/1-comparison-questions/task.md → ...comparison/1-comparison-questions/task.md
diff --git a/1-js/02-first-steps/08-comparison/article.md → 1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/08-comparison/article.md → 1-js/02-first-steps/09-comparison/article.md
diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md
@@ -0,0 +1,17 @@
+
+```js run
+function ask(question, yes, no) {
+  if (confirm(question)) yes()
+  else no();
+}
+
+ask(
+  "Do you agree?",
+*!*
+  () => alert("You agreed."),
+  () => alert("You canceled the execution.")
+*/!*
+);
+```
+
+Looks short and clean, right?
diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md
@@ -0,0 +1,17 @@
+
+# Rewrite with arrow functions
+
+Replace Function Expressions with arrow functions in the code below:
+
+```js run
+function ask(question, yes, no) {
+  if (confirm(question)) yes()
+  else no();
+}
+
+ask(
+  "Do you agree?",
+  function() { alert("You agreed."); },
+  function() { alert("You canceled the execution."); }
+);
+```
diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md
@@ -0,0 +1,111 @@
+# Arrow functions, the basics
+
+There's another very simple and concise syntax for creating functions, that's often better than Function Expressions.
+
+It's called "arrow functions", because it looks like this:
+
+```js
+let func = (arg1, arg2, ...argN) => expression
+```
+
+...This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result.
+
+In other words, it's the shorter version of:
+
+```js
+let func = function(arg1, arg2, ...argN) {
+  return expression;
+};
+```
+
+Let's see a concrete example:
+
+```js run
+let sum = (a, b) => a + b;
+
+/* This arrow function is a shorter form of:
+
+let sum = function(a, b) {
+  return a + b;
+};
+*/
+
+alert( sum(1, 2) ); // 3
+```
+
+As you can, see `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result.
+
+- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.
+
+    For example:
+
+    ```js run
+    *!*
+    let double = n => n * 2;
+    // roughly the same as: let double = function(n) { return n * 2 }
+    */!*
+
+    alert( double(3) ); // 6
+    ```
+
+- If there are no arguments, parentheses will be empty (but they should be present):
+
+    ```js run
+    let sayHi = () => alert("Hello!");
+
+    sayHi();
+    ```
+
+Arrow functions can be used in the same way as Function Expressions.
+
+For instance, to dynamically create a function:
+
+```js run
+let age = prompt("What is your age?", 18);
+
+let welcome = (age < 18) ?
+  () => alert('Hello') :
+  () => alert("Greetings!");
+
+welcome();
+```
+
+Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
+
+They are very convenient for simple one-line actions, when we're just too lazy to write many words.
+
+## Multiline arrow functions
+
+The examples above took arguments from the left of `=>` and evaluated the right-side expression with them.
+
+Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them.
+
+Like this:
+
+```js run
+let sum = (a, b) => {  // the curly brace opens a multiline function
+  let result = a + b;
+*!*
+  return result; // if we use curly braces, then we need an explicit "return" 
+*/!*
+};
+
+alert( sum(1, 2) ); // 3
+```
+
+```smart header="More to come"
+Here we praised arrow functions for brevity. But that's not all!
+
+Arrow functions have other interesting features.
+
+To study them in-depth, we first need to get to know some other aspects of JavaScript, so we'll return to arrow functions later in the chapter <info:arrow-functions>.
+
+For now, we can already use arrow functions for one-line actions and callbacks.
+```
+
+## Summary
+
+Arrow functions are handy for one-liners. They come in two flavors:
+
+1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
+2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something.