diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000000..d3877a5382 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +* text=auto eol=lf +*.svg binary diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000000..490051876d --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: iliakan diff --git a/.gitignore b/.gitignore index 6f90fd1907..1a71fb7c82 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,4 @@ sftp-config.json Thumbs.db +/svgs \ No newline at end of file diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index b2c304475a..b90fbb76cb 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -1,9 +1,14 @@ # JavaScript 入門 +<<<<<<< HEAD JavaScript について、何が特別なのか、それを使ってできることや他のどの技術と上手くやるのか見てみましょう。 +======= +Let's see what's so special about JavaScript, what we can achieve with it, and what other technologies play well with it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## JavaScript とは？ +<<<<<<< HEAD *JavaScript* は当初 *"Webページを活かすため"* に作られました。 この言語のプログラムは *スクリプト* と呼ばれます。それらはHTMLの中に書かれ、ページが読み込まれると自動的に実行されます。 @@ -31,23 +36,68 @@ JavaScript が作られたとき, 当初は別の名前を持っていました: これらの用語は、インターネット上の開発者の記事で使用されているため、覚えておくと良いでしょう。 たとえば、"ある機能 X がV8でサポートされている" と言った場合、おそらくChromeとOperaで動作します。 ```smart header="エンジンはどのように動く?" +======= +*JavaScript* was initially created to "make web pages alive". + +The programs in this language are called *scripts*. They can be written right in a web page's HTML and run automatically as the page loads. + +Scripts are provided and executed as plain text. They don't need special preparation or compilation to run. + +In this aspect, JavaScript is very different from another language called [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). + +```smart header="Why is it called JavaScript?" +When JavaScript was created, it initially had another name: "LiveScript". But Java was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help. + +But as it evolved, JavaScript became a fully independent language with its own specification called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), and now it has no relation to Java at all. +``` + +Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine). + +The browser has an embedded engine sometimes called a "JavaScript virtual machine". + +Different engines have different "codenames". For example: + +- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome, Opera and Edge. +- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. +- ...There are other codenames like "Chakra" for IE, "JavaScriptCore", "Nitro" and "SquirrelFish" for Safari, etc. + +The terms above are good to remember because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome, Opera and Edge. + +```smart header="How do engines work?" +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d エンジンは複雑ですが、基本は単純です。 +<<<<<<< HEAD 1. エンジン (ブラウザの場合は組み込まれています) はスクリプトを読み("パース")ます。 2. その後、スクリプトを機械語に変換("コンパイル")します。 3. 機械語が実行されます。非常に早く動作します。 エンジンは処理の各ステップで最適化を行います。実行時にコンパイルされたスクリプトも見ており、そこを流れるデータを分析し、それ基づいて機械語を最適化します。 最終的に、スクリプトはとても速く実行されます。 +======= +1. The engine (embedded if it's a browser) reads ("parses") the script. +2. Then it converts ("compiles") the script to machine code. +3. And then the machine code runs, pretty fast. + +The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and further optimizes the machine code based on that knowledge. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ## ブラウザ内のJavaScriptができることは？ +<<<<<<< HEAD モダンなJavaScriptは "安全な" プログラミング言語です。それは、メモリやCPUのような低レベルのアクセスは提供しません。なぜなら、当初はそれらを必要としないブラウザ用に作成されたものだからです。 JavaScript の機能は、実行される環境に大きく依存します。 例えば、[Node.js](https://wikipedia.org/wiki/Node.js) では、JavaScriptが任意のファイルを読み書きしたりできる機能をサポートしています。 ブラウザ内のJavaScriptは、Webページの操作、ユーザやWebサーバとのやり取りに関する様々なことを実行できます。 +======= +Modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or the CPU, because it was initially created for browsers which do not require it. + +JavaScript's capabilities greatly depend on the environment it's running in. For instance, [Node.js](https://wikipedia.org/wiki/Node.js) supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc. + +In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the webserver. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d たとえば、ブラウザ内のJavaScriptは次のようなことが可能です: @@ -58,15 +108,24 @@ JavaScript の機能は、実行される環境に大きく依存します。 - クライアント側でデータを記憶する("ローカルストレージ")。 +<<<<<<< HEAD ## ブラウザ内のJavaScriptで出来ないことは？ ブラウザでは、JavaScriptの機能はユーザの安全のために制限されています。 その目的は、悪意のあるWebページがプライベートな情報へアクセスしたり、ユーザデータへ危害を加えることを防ぐことです。 制限の例として、次のようなものがあります: +======= +JavaScript's abilities in the browser are limited to protect the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data. + +Examples of such restrictions include: + +- JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS functions. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d - Webページ上のJavaScriptは、ハードディスク上の任意のファイルの読み書きや、それらのコピー、プログラムの実行をすることができません。OSのシステム機能に直接アクセスすることはできません。 +<<<<<<< HEAD 現代のブラウザは、ファイルを扱うことはできますがアクセスは制限されており、ブラウザウィンドウへのファイルの "ドロップ" や、`` タグを経由したファイル選択と言ったユーザの特定の操作のみを提供しています。 カメラ/マイクやその他デバイスとやり取りする方法はありますが、ユーザの明示的な許可が求められます。したがって、JavaScriptが有効なページがWebカメラを密かに有効にしたり、それを利用して利用者の周囲を観察したり、[NSA](https://en.wikipedia.org/wiki/National_Security_Agency) に情報を送信すると言ったことはできません。 @@ -78,6 +137,19 @@ JavaScript の機能は、実行される環境に大きく依存します。 - JavaScriptはネットワークを介して、現在のページがきたサーバと簡単にやり取りすることができます。しかし、他のサイト/ドメインからデータを受信することは制限されています。可能ですが、リモート側からの明示的な同意(HTTPヘッダで表現)が必要になります。繰り返しますが、これらは安全上の制限です。 ![](limitations.svg) +======= + There are ways to interact with the camera/microphone and other devices, but they require a user's explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency). +- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other page if they come from different sites (from a different domain, protocol or port). + + This is called the "Same Origin Policy". To work around that, *both pages* must agree for data exchange and must contain special JavaScript code that handles it. We'll cover that in the tutorial. + + This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com`, for example, and steal information from there. +- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation. + +![](limitations.svg) + +Such limitations do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugins/extensions which may ask for extended permissions. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d JavaScriptがブラウザ外で使われる場合はこのような制限は存在しません。たとえば、サーバ上です。また、現代のブラウザは、より拡張されたアクセス権限を必要とするプラグイン/拡張機能を利用することもできます。 @@ -86,16 +158,29 @@ JavaScriptがブラウザ外で使われる場合はこのような制限は存 JavaScriptには少なくとも *3つ* の素晴らしいことがあります: ```compare +<<<<<<< HEAD + HTML/CSSとの完全な統合 + シンプルなことはシンプルに + すべてのメジャーブラウザでサポートされており、デフォルトで有効 +======= ++ Full integration with HTML/CSS. ++ Simple things are done simply. ++ Supported by all major browsers and enabled by default. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` +JavaScript is the only browser technology that combines these three things. +<<<<<<< HEAD JavaScriptは、これら3つのことを組み合わせた唯一のブラウザテクノロジーです。 それがJavaScriptをユニークなものにしています。だからこそ、ブラウザインターフェイスを作成するための最も普及しているツールとなっています。 とは言え、JavaScript を利用してサーバやモバイルアプリケーションなどを作成することもできます。 +======= +That's what makes JavaScript unique. That's why it's the most widespread tool for creating browser interfaces. + +That said, JavaScript can be used to create servers, mobile applications, etc. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## JavaScriptを "覆う" 言語 @@ -103,12 +188,19 @@ JavaScriptの構文は、すべての人のニーズにマッチしている訳 プロジェクトや要件はそれぞれ異なるため、それは自然なことです。 +<<<<<<< HEAD そのため、最近では新しい言語が数多く登場しています。これらはブラウザで実行する前にJavaScriptに *トランスパイル* (変換)されます。 最新のツールは非常に高速にトランスパイルでき、透過的です。開発者が別の言語でコードを作成し、それを自動変換することができます。 +======= +So, recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser. + +Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and auto-converting it "under the hood". +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d これは、そのような言語の例です: +<<<<<<< HEAD - [CoffeeScript](http://coffeescript.org/) はJavaScriptの "シンタックスシュガー"です。より短い構文を導入し、より簡潔でクリアなコードを書くことができます。たいてい、Ruby 開発者は好きです。 - [TypeScript](http://www.typescriptlang.org/) は "厳密なデータ型指定" の追加に焦点をあてています。それは複雑なシステムの開発とサポートを簡素化するためです。これは Microsoftにより開発されています。 - [Flow](http://flow.org/) もデータ型定義を追加しますが、その方法は異なります。Facebook により開発されました。 @@ -116,9 +208,25 @@ JavaScriptの構文は、すべての人のニーズにマッチしている訳 - [Brython](https://brython.info/) は JavaScript への Python トランスパイラで、JavaScript を使用することなく、純粋な Python でアプリケーションを作成することができます。 他にもあります。もちろん、上記のような言語を利用する予定だとしても、実際に行われていることを本当に理解するためにJavaScriptは知っておくのがよいです。 +======= +- [CoffeeScript](https://coffeescript.org/) is "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it. +- [TypeScript](https://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft. +- [Flow](https://flow.org/) also adds data typing, but in a different way. Developed by Facebook. +- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google. +- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript. +- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node. + +There are more. Of course, even if we use one of these transpiled languages, we should also know JavaScript to really understand what we're doing. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## サマリ +<<<<<<< HEAD - JavaScriptは当初ブラウザ用の言語として作られました。しかし今はその他の多くの環境で利用されています。 - 現時点では、JavaScriptはHTML/CSSと完全に統合し、最も広く採用されたブラウザ言語として、独立した地位にいます。 - JavaScriptに "トランスパイル" し、特定の機能を提供する多くの言語があります。 JavaScriptをマスターした後、少なくとも簡単にでも目を通しておくことをお勧めします。 +======= +- JavaScript was initially created as a browser-only language, but it is now used in many other environments as well. +- Today, JavaScript has a unique position as the most widely-adopted browser language, fully integrated with HTML/CSS. +- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md index 794bccbd80..7e3969d31f 100644 --- a/1-js/01-getting-started/2-manuals-specifications/article.md +++ b/1-js/01-getting-started/2-manuals-specifications/article.md @@ -1,4 +1,5 @@ +<<<<<<< HEAD # マニュアルと仕様 この本は *チュートリアル* であり、あなたが徐々に言語を学ぶのを助けることを目的としています。そのため、基本が理解できたら別の情報源が必要になってきます。 @@ -39,3 +40,41 @@ JavaScript は開発中の言語であり、定期的に新機能が追加され これらのリソースは、言語の詳細やサポートなどに関する貴重な情報が含まれているため、実際の開発に役立ちます。 特定の機能に関する詳細な情報が必要な場合は、それら（またはこのページ）を覚えておいてください。 +======= +# Manuals and specifications + +This book is a *tutorial*. It aims to help you gradually learn the language. But once you're familiar with the basics, you'll need other resources. + +## Specification + +[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contains the most in-depth, detailed and formalized information about JavaScript. It defines the language. + +But being that formalized, it's difficult to understand at first. So if you need the most trustworthy source of information about the language details, the specification is the right place. But it's not for everyday use. + +A new specification version is released every year. Between these releases, the latest specification draft is at . + +To read about new bleeding-edge features, including those that are "almost standard" (so-called "stage 3"), see proposals at . + +Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial. + +## Manuals + +- **MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc. + + You can find it at . + +Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. to search for the `parseInt` function. + +## Compatibility tables + +JavaScript is a developing language, new features get added regularly. + +To see their support among browser-based and other engines, see: + +- - per-feature tables of support, e.g. to see which engines support modern cryptography functions: . +- - a table with language features and engines that support those or don't support. + +All these resources are useful in real-life development, as they contain valuable information about language details, their support, etc. + +Please remember them (or this page) for the cases when you need in-depth information about a particular feature. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md index 2536271d99..772f1bc2f8 100644 --- a/1-js/01-getting-started/3-code-editors/article.md +++ b/1-js/01-getting-started/3-code-editors/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # コードエディタ コードエディタはプログラマが最も時間を費やす場所です。 @@ -44,3 +45,54 @@ Windows には、"Visual Studio"もあります。"Visual Studio Code" と混同 この広い世界には他にも素晴らしいエディタがあります。ぜひあなたが最も好きなものを選んでください。 エディタの選択は、他のツールのようにプロジェクト、習慣や個人の趣向によります。 +======= +# Code editors + +A code editor is the place where programmers spend most of their time. + +There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type. + +## IDE + +The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment." + +An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff. + +If you haven't selected an IDE yet, consider the following options: + +- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free). +- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, paid). + +For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/). + +Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you. + +## Lightweight editors + +"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple. + +They are mainly used to open and edit a file instantly. + +The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file. + +In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE. + +There are many options, for instance: + +- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware). +- [Notepad++](https://notepad-plus-plus.org/) (Windows, free). +- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them. + +## Let's not argue + +The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with. + +There are other great editors in our big world. Please choose the one you like the most. + +The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences. + +The author's personal opinion: + +- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend. +- Otherwise, if it's mostly another language/platform and partially frontend, then consider other editors, such as XCode (Mac), Visual Studio (Windows) or Jetbrains family (Webstorm, PHPStorm, RubyMine etc, depending on the language). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md index 7e78a2e23a..78d0916875 100644 --- a/1-js/01-getting-started/4-devtools/article.md +++ b/1-js/01-getting-started/4-devtools/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # 開発者コンソール コードにエラーはつきものです。少なくともあなたが [ロボット](https://en.wikipedia.org/wiki/Bender_(Futurama)) ではなく人間であるなら、*絶対に* 間違いをする、ということです。 @@ -61,3 +62,68 @@ Preferencesを開き、"Advanced" ペインに行きます。一番下にチェ - Windows下では、ほとんどのブラウザは `key:F12` で開くことができます。Mac用のChromeは `key:Cmd+Opt+J` が必要で、Safariは`key:Cmd+Opt+C`です(最初に有効化が必要)。 これで環境が整いました。次のセクションでは、JavaScriptの説明に入ります。 +======= +# Developer console + +Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)). + +But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it. + +To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers. + +Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific. + +Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands. + +## Google Chrome + +Open the page [bug.html](bug.html). + +There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it. + +Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`. + +The developer tools will open on the Console tab by default. + +It looks somewhat like this: + +![chrome](chrome.png) + +The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar. + +- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command. +- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred. + +Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them. + +Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter . + +```smart header="Multi-line input" +Usually, when we put a line of code into the console, and then press `key:Enter`, it executes. + +To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code. +``` + +## Firefox, Edge, and others + +Most other browsers use `key:F12` to open developer tools. + +The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another. + +## Safari + +Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first. + +Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom: + +![safari](safari.png) + +Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options. + +## Summary + +- Developer tools allow us to see errors, run commands, examine variables, and much more. +- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first). + +Now we have the environment ready. In the next section, we'll get down to JavaScript. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md index e69de29bb2..81552913b9 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md @@ -0,0 +1,2 @@ + +[html src="index.html"] diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 7c49ebbf69..3a9770fec5 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,5 +1,6 @@ # Hello, world! +<<<<<<< HEAD このチュートリアルは、プラットフォームに依存しないJavaScriptのコアについてです。もっと先に、Node.jsや他のプラットフォームについて学びます。 しかし、私たちは今スクリプトを動かすための動作環境が必要です。ちょうどこのチュートリアルはオンラインなので、ブラウザが良い選択肢です。もしも別の環境( Node.js など)に集中する予定がある場合に時間を費やさないように、ここでは、ブラウザ固有のコマンド(`alert`のような)が最小限になるようにします。チュートリアルの[次のパート](/ui) では、ブラウザの JavaScript に焦点を当てます。 @@ -12,6 +13,20 @@ JavaScriptプログラムは、` ``` +<<<<<<< HEAD それらのコメントは` ``` +<<<<<<< HEAD ここで `/path/to/script.js` はスクリプトファイルの絶対パスです(サイトルートからの)。また、現在のページからの相対パスで指定することもできます。例えば、`src="script.js"` は現在のフォルダにある `"script.js"` を意味するでしょう。 完全なURLも同様に可能です。たとえば: +======= +Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"`, just like `src="./script.js"`, would mean a file `"script.js"` in the current folder. + +We can give a full URL as well. For instance: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html - + ``` 複数のスクリプトを使う場合は、複数のタグを使います: @@ -92,6 +142,7 @@ JavaScriptプログラムは、` ``` +<<<<<<< HEAD 外部の `` で挿入できます。 ブラウザスクリプトやそれらとWebページとのやり取りについては、学ぶことがまだまだあります。しかし、このチュートリアルのこのパートは JavaScript 言語に専念していることに留意してください。JavaScriptを実行するための方法としてここではブラウザを使っており、オンラインでの読み込みではとても便利ですが、数ある実行方法の1つでしかありません。 +======= +- We can use a ``. + + +There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index 66e8da1bec..31c089e1f4 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -1,22 +1,38 @@ # コード構造 +<<<<<<< HEAD 最初に学ぶことは、コードの基本的な構成要素です。 ## 文(命令文) +======= +The first thing we'll study is the building blocks of code. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 文は、構文構造でアクションを実行するコマンドです。 私たちはすでに `alert('Hello, world!')` という文を見ており、これは "Hello, world!" というメッセージを表示します。 +<<<<<<< HEAD コードには必要なだけ文を含めることができ、文はセミコロンで区切ることができます。 たとえば、これは "Hello World" のメッセージを2つのアラートに分けます: +======= +We've already seen a statement, `alert('Hello, world!')`, which shows the message "Hello, world!". + +We can have as many statements in our code as we want. Statements can be separated with a semicolon. + +For example, here we split "Hello World" into two alerts: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify alert('Hello'); alert('World'); ``` +<<<<<<< HEAD 通常、それぞれの文は別の行に書かれます。これによりコードの可読性が向上します。 +======= +Usually, statements are written on separate lines to make the code more readable: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify alert('Hello'); @@ -34,12 +50,20 @@ alert('Hello') alert('World') ``` +<<<<<<< HEAD ここで JavaScript は、改行を "暗黙" のセミコロンと解釈します。 これは[自動セミコロン挿入](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)と呼ばれます。 **ほとんどのケースで改行はセミコロンを意味します。しかし "ほとんどのケース" は "常に" ではありません!** これは改行はセミコロンを意味しないケースです、例えば: +======= +Here, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). + +**In most cases, a newline implies a semicolon. But "in most cases" does not mean "always"!** + +There are cases when a newline does not mean a semicolon. For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify alert(3 + @@ -47,7 +71,11 @@ alert(3 + + 2); ``` +<<<<<<< HEAD このコードは `6` を出力します、なぜなら JavaScript はセミコロンを挿入しないからです。もし行の終わりがプラス `"+"` で終わっている場合、直感的には "不完全な表現" であり、セミコロンが必要ないのは明らかです。このケースでは、それは意図した通りに動作します。 +======= +The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d **しかし本当に必要なときに JavaScriptがセミコロンを想定 "し損なう" ケースがあります。** @@ -57,19 +85,25 @@ alert(3 + このようなエラーの具体例に興味があるなら、このコードを確認してみてください: ```js run -[1, 2].forEach(alert) +alert("Hello"); + +[1, 2].forEach(alert); ``` +<<<<<<< HEAD 角括弧 `[]` や `forEach` の意味についてはまだ考える必要はありません。それらについては後ほど勉強するので今のところ問題ではありません。ただ結果を覚えておきましょう: "1", そして "2" が表示されます。 今、コードの前に `alert` を追加し、セミコロンで終わら "ない" ようにしましょう: +======= +No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`. -```js run no-beautify -alert("There will be an error") +Now let's remove the semicolon after the `alert`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d -[1, 2].forEach(alert) -``` +```js run no-beautify +alert("Hello") +<<<<<<< HEAD 実行すると、最初の `alert` だけが表示され、エラーが発生するでしょう! しかし、`alert` の後にセミコロンをつけた場合はすべてうまく行きます: @@ -84,11 +118,24 @@ alert("All fine now"); JavaScriptでは角括弧 `[...]` の前にはセミコロンを想定しません。 そのため、セミコロンは自動挿入されないので最初の例のコードは1つの文として扱われます。 エンジンは次のように解釈しています: +======= +[1, 2].forEach(alert); +``` + +The difference compared to the code above is only one character: the semicolon at the end of the first line is gone. + +If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more. + +That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement. + +Here's how the engine sees it: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify -alert("There will be an error")[1, 2].forEach(alert) +alert("Hello")[1, 2].forEach(alert); ``` +<<<<<<< HEAD しかし、本来は1つではなく2つの文であるべきです。今回のケースのようなマージは間違っているのでエラーです。このようなことが起こる状況は他にもあります。 ```` @@ -101,6 +148,22 @@ alert("There will be an error")[1, 2].forEach(alert) コメントはスクリプトのどの場所にも書くことができます。エンジンはそれらを無視するので、実行には影響しません。 **1行のコメントは、2つのスラッシュ文字 `//` から始まります。** +======= +Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly. + +This can happen in other situations also. +```` + +We recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them. + +## Comments [#code-comments] + +As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why. + +Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them. + +**One-line comments start with two forward slash characters `//`.** +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 残りの行はコメントです。それは行全体または文に従います。 @@ -124,10 +187,16 @@ alert('Hello'); alert('World'); ``` +<<<<<<< HEAD コメントの内容は無視されます、そのため、/* ... */ の中にコードをおいても実行されません。 これはコードの一部を一時的に無効にしたいときに便利です: +======= +The content of comments is ignored, so if we put code inside /* ... */, it won't execute. + +Sometimes it can be handy to temporarily disable a part of code: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run /* コードのコメントアウト @@ -136,9 +205,14 @@ alert('Hello'); alert('World'); ``` +<<<<<<< HEAD ```smart header="ホットキーを使いましょう!" ほとんどのエディタでは、コードの行は1行コメントとして `key:Ctrl+/` ホットキーによりコメントアウトすることができます。そして `key:Ctrl+Shift+/` で複数行コメントです(コードの一部を選択し、ホットキーを押します)。 Macでは、 `key:Ctrl` の代わりに `key:Cmd` を試してください。 +======= +```smart header="Use hotkeys!" +In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ````warn header="入れ子のコメントはサポートされていません!" @@ -156,6 +230,12 @@ alert( 'World' ); コードにコメントするのを躊躇わないでください。 +<<<<<<< HEAD コメントはコード規模を増加させますが、それは全く問題ではありません。プロダクションサーバへリリースする前にコードを minify する多くのツールがあります。それらはコメントを除去するので、実行されるスクリプトには現れません。そのため、コメント書くことによるネガティブな影響は全くありません。 さらにこのチュートリアルでは、より良いコメントの書き方を説明するチャプター もあります。 +======= +Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don't appear in the working scripts. Therefore, comments do not have negative effects on production at all. + +Later in the tutorial there will be a chapter that also explains how to write better comments. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md index 61e00aab05..c7d1772e57 100644 --- a/1-js/02-first-steps/03-strict-mode/article.md +++ b/1-js/02-first-steps/03-strict-mode/article.md @@ -1,5 +1,6 @@ # モダンなモード, "use strict" +<<<<<<< HEAD 長い間、JavaScriptは互換性の問題なしに進化していました。新しい機能は言語に追加されましたが、古い機能は変更されませんでした。 それは既存のコードが決して壊れないというメリットがありました。しかし、欠点はJavaScript作成者による間違いや不十分な決定がこの言語から抜け出せなくなったことです。 @@ -7,12 +8,25 @@ ECMAScript 5(ES5) が登場したときは2009年でした。新しい機能が言語に追加され、既存の機能のいくつかが修正されました。古いコードが動作するのを保つために、ほとんどの修正はデフォルトではOFFです。特別なディレクティブ `"use strict"` を明示的に有効にする必要があります。 [cut] +======= +For a long time, JavaScript evolved without compatibility issues. New features were added to the language while old functionality didn't change. + +That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript's creators got stuck in the language forever. + +This was the case until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most such modifications are off by default. You need to explicitly enable them with a special directive: `"use strict"`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## "use strict" +<<<<<<< HEAD そのディレクティブは文字列のように見えます: `"use strict"` もしくは `'use strict'`。 これがスクリプトの先頭に位置する場合、すべてのスクリプトは "最新の" 方法で動作します。 例えば +======= +The directive looks like a string: `"use strict"` or `'use strict'`. When it is located at the top of a script, the whole script works the "modern" way. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js "use strict"; @@ -21,6 +35,7 @@ ECMAScript 5(ES5) が登場したときは2009年でした。新しい機能が ... ``` +<<<<<<< HEAD 私たちはこの後まもなく関数(コマンドをグループ化する方法)を学ぶのでここで言及しますが、`"use strict"` は関数の頭に置くことができることに留意してください。 この場合はその関数内でのみStrictモードが有効になります。しかし通常はスクリプト全体に対して使います。 @@ -32,6 +47,18 @@ ECMAScript 5(ES5) が登場したときは2009年でした。新しい機能が ```js no-strict alert("some code"); // 下の "use strict" は無視されます, 先頭にある必要があります +======= +Quite soon we're going to learn functions (a way to group commands), so let's note in advance that `"use strict"` can be put at the beginning of a function. Doing that enables strict mode in that function only. But usually people use it for the whole script. + +````warn header="Ensure that \"use strict\" is at the top" +Please make sure that `"use strict"` is at the top of your scripts, otherwise strict mode may not be enabled. + +Strict mode isn't enabled here: + +```js no-strict +alert("some code"); +// "use strict" below is ignored--it must be at the top +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d "use strict"; @@ -41,6 +68,7 @@ alert("some code"); コメントだけは `"use strict"` の上に置けます。 ```` +<<<<<<< HEAD ```warn header="`use strict` をキャンセルする方法はありません" `"no use strict"` または同系の古い振る舞いを返すようなディレクティブはありません。 @@ -69,6 +97,35 @@ alert("some code"); もし古いブラウザなどでそれができない場合、いまいちではありますが `use strict` を確実にするための信頼できる方法があります。ラッパーの中に置きます: ```js +======= +```warn header="There's no way to cancel `use strict`" +There is no directive like `"no use strict"` that reverts the engine to old behavior. + +Once we enter strict mode, there's no going back. +``` + +## Browser console + +When you use a [developer console](info:devtools) to run code, please note that it doesn't `use strict` by default. + +Sometimes, when `use strict` makes a difference, you'll get incorrect results. + +So, how to actually `use strict` in the console? + +First, you can try to press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, like this: + +```js +'use strict'; +// ...your code + +``` + +It works in most browsers, namely Firefox and Chrome. + +If it doesn't, e.g. in an old browser, there's an ugly, but reliable way to ensure `use strict`. Put it inside this kind of wrapper: + +```js +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d (function() { 'use strict'; @@ -76,6 +133,7 @@ alert("some code"); })() ``` +<<<<<<< HEAD ## "use strict" は必要？ この質問は明白かもしれませんが、そうではありません。 @@ -91,3 +149,20 @@ alert("some code"); 次のチャプターでは、言語の機能を学びながら strict モードと 古いモードの違いについて説明します。幸い、それほど多くありません。そしてそれらは実際に我々の開発をより良くします。 常に `"use strict"` で始まるスクリプトは推奨されます。このチュートリアルのすべての例は、そうでないと明示されていない限り(ほとんどないですが)それを想定しています。 +======= +## Should we "use strict"? + +The question may sound obvious, but it's not so. + +One could recommend to start scripts with `"use strict"`... But you know what's cool? + +Modern JavaScript supports "classes" and "modules" - advanced language structures (we'll surely get to them), that enable `use strict` automatically. So we don't need to add the `"use strict"` directive, if we use them. + +**So, for now `"use strict";` is a welcome guest at the top of your scripts. Later, when your code is all in classes and modules, you may omit it.** + +As of now, we've got to know about `use strict` in general. + +In the next chapters, as we learn language features, we'll see the differences between the strict and old modes. Luckily, there aren't many and they actually make our lives better. + +All examples in this tutorial assume strict mode unless (very rarely) specified otherwise. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md index ae6f10cc10..53737ec6cf 100644 --- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md +++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md @@ -1,4 +1,8 @@ +<<<<<<< HEAD 最初に、我々の惑星の名前に対する変数からです。 +======= +## The variable for our planet +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d シンプルです: @@ -6,9 +10,15 @@ let ourPlanetName = "Earth"; ``` +<<<<<<< HEAD 注意してください。より短い名前 `planet` を使うことはできますが、どの惑星を指しているかが明白ではありません。より冗長な方がよいです。少なくとも変数が長すぎない程度まで。 2つ目に、現在の訪問者の名前です。: +======= +Note, we could use a shorter name `planet`, but it might not be obvious what planet it refers to. It's nice to be more verbose. At least until the variable isNotTooLong. + +## The name of the current visitor +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let currentUserName = "John"; @@ -18,4 +28,8 @@ let currentUserName = "John"; 現代のエディタや自動補完により、長い変数名を簡単に書くことができます。節約は不要です。3単語の名前は良いです。 +<<<<<<< HEAD また、もしあなたのエディタが適切な自動補完を持っていない場合には、[新しいエディタ](/code-editors) を入手してください。 +======= +And if your editor does not have proper autocompletion, get [a new one](/code-editors). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/task.md b/1-js/02-first-steps/04-variables/2-declare-variables/task.md index 98e33463f7..d856301ec6 100644 --- a/1-js/02-first-steps/04-variables/2-declare-variables/task.md +++ b/1-js/02-first-steps/04-variables/2-declare-variables/task.md @@ -4,5 +4,10 @@ importance: 3 # 正しい名前を与える +<<<<<<< HEAD 1. 我々の惑星の名前を持つ変数を作成してください。あなたはこのような変数の名前をどのように指定しますか？ 2. 現在の訪問者の名前を格納する変数を作成してください。あなたはそのような変数の名前をどのように指定しますか？ +======= +1. Create a variable with the name of our planet. How would you name such a variable? +2. Create a variable to store the name of a current visitor to a website. How would you name that variable? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md index a4785f0a55..259f9846d4 100644 --- a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md +++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md @@ -2,4 +2,8 @@ このコードでは、`birthday` はまさにそうです。なので、大文字を使います。 +<<<<<<< HEAD 対照的に、`age` は実行時に評価されます。 今日はある年齢で、1年後に別の年齢になります。コード実行によって変化しないという意味で一定ですがそれは `birthday` より "定数ではありません"。それは計算されるので、小文字を維持する必要があります。 +======= +In contrast, `age` is evaluated in run-time. Today we have one age, a year after we'll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit "less of a constant" than `birthday`: it is calculated, so we should keep the lower case for it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md index 6972772cd8..1c592a6f8e 100644 --- a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md +++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md @@ -12,13 +12,19 @@ const birthday = '18.04.1982'; const age = someCode(birthday); ``` +<<<<<<< HEAD ここで、私たちは定数 `birthday` の日付を持っており、`age` はいくつかのコードの助けを借りて `birthday` から計算されます（詳細はここでは重要ではないため、someCodeの中身はここでは書きません)。 +======= +Here we have a constant `birthday` for the date, and also the `age` constant. + +The `age` is calculated from `birthday` using `someCode()`, which means a function call that we didn't explain yet (we will soon!), but the details don't matter here, the point is that `age` is calculated somehow based on the `birthday`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `birthday` に対して大文字を使うのは正しいでしょうか？ `age` はどうでしょう？ ```js -const BIRTHDAY = '18.04.1982'; // make uppercase? +const BIRTHDAY = '18.04.1982'; // make birthday uppercase? -const AGE = someCode(BIRTHDAY); // make uppercase? +const AGE = someCode(BIRTHDAY); // make age uppercase? ``` diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index 39b8cebac0..e5961e3dc5 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -1,11 +1,18 @@ # 変数 +<<<<<<< HEAD ほとんどの場合、JavaScript アプリケーションは情報を処理する必要があります。ここに2つの例があります。 1. オンラインショップ -- 情報は "売られている商品" や "ショッピングカート" などが考えられます。 2. チャットアプリケーション -- 情報は "ユーザ"、"メッセージ" やその他より多くのものが考えられます。 +======= +Most of the time, a JavaScript application needs to work with information. Here are two examples: +1. An online shop -- the information might include goods being sold and a shopping cart. +2. A chat application -- the information might include users, messages, and much more. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 変数は情報を保持するために使われます。 +<<<<<<< HEAD ## 変数 [変数](https://en.wikipedia.org/wiki/Variable_(computer_science)) はデータのための "名前付けされた格納場所" です。私たちは商品や訪問者、その他のデータを格納するために変数が利用できます。 @@ -13,18 +20,35 @@ JavaScriptで変数を作るには、`let` キーワードを使います。 下の文は "message" という名前の変数を作ります(別の言い方: *宣言* または *定義* ): +======= +## A variable + +A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goodies, visitors, and other data. + +To create a variable in JavaScript, use the `let` keyword. + +The statement below creates (in other words: *declares*) a variable with the name "message": +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let message; ``` +<<<<<<< HEAD 代入演算子 `=` を使って、データを置く事ができます。 +======= +Now, we can put some data into it by using the assignment operator `=`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let message; *!* +<<<<<<< HEAD message = 'Hello'; // 文字列を格納します +======= +message = 'Hello'; // store the string 'Hello' in the variable named message +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d */!* ``` @@ -39,7 +63,11 @@ alert(message); // 変数の中身を表示します */!* ``` +<<<<<<< HEAD 簡潔にするために、変数宣言と代入を1行で書くことができます。 +======= +To be concise, we can combine the variable declaration and assignment into a single line: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let message = 'Hello!'; // 変数宣言と値の代入 @@ -53,7 +81,11 @@ alert(message); // Hello! let user = 'John', age = 25, message = 'Hello'; ``` +<<<<<<< HEAD より短いように見えるかもしれませんが、これは推奨しません。可読性のため、1変数1行にしてください。 +======= +That might seem shorter, but we don't recommend it. For the sake of better readability, please use a single line per variable. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 複数行のケースはちょっと長くなりますが、読みやすいです。 @@ -63,7 +95,12 @@ let age = 25; let message = 'Hello'; ``` +<<<<<<< HEAD 多くの変数がある場合、このように書く人もいます: +======= +Some people also define multiple variables in this multiline style: + +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js no-beautify let user = 'John', age = 25, @@ -78,29 +115,50 @@ let user = 'John' , message = 'Hello'; ``` +<<<<<<< HEAD 技術的にはこれらすべてのパターンは同じです。なので、これは個人の好みと美学の問題です。 ````smart header="`let` の代わりに `var`" 古いスクリプトには、別のキーワードがあるかもしれません: `let` の代わりに `var` です: +======= +Technically, all these variants do the same thing. So, it's a matter of personal taste and aesthetics. + +````smart header="`var` instead of `let`" +In older scripts, you may also find another keyword: `var` instead of `let`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js *!*var*/!* message = 'Hello'; ``` +<<<<<<< HEAD キーワード `var` は `let` と *ほとんど* 一緒です。それも変数を宣言します。が、わずかに違います, 伝統的スタイルのやり方です。 `let` と `var` には微妙な違いがありますが、まだ気にする必要はありません。その詳細については、 のチャプターで説明します。 +======= +The `var` keyword is *almost* the same as `let`. It also declares a variable but in a slightly different, "old-school" way. + +There are subtle differences between `let` and `var`, but they do not matter to us yet. We'll cover them in detail in the chapter . +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```` ## 現実での例え ユニークな名前のステッカーを付けたデータの "箱" として想像すれば、"変数" という概念を簡単に把握できます。 +<<<<<<< HEAD たとえば、変数 `message` は値 `"Hello!"` を持った `"message"` とラベル付けされた箱として想像することができます。: ![](variable.svg) 箱の中にはどんな値でも入れることができます。 +======= +![](variable.svg) + +We can put any value in the box. + +We can also change it as many times as we want: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d また、それを変えることもできます。値は必要なだけ何度でも変更することができます。 ```js run @@ -134,16 +192,39 @@ alert(hello); // Hello world! alert(message); // Hello world! ``` +<<<<<<< HEAD ````warn header="2回宣言すると、エラーが発生します" 変数は一度だけ宣言する必要があります。 +======= +````warn header="Declaring twice triggers an error" +A variable should be declared only once. + +A repeated declaration of the same variable is an error: + +```js run +let message = "This"; + +// repeated 'let' leads to an error +let message = "That"; // SyntaxError: 'message' has already been declared +``` +So, we should declare a variable once and then refer to it without `let`. +```` + +```smart header="Functional languages" +It's interesting to note that there exist so-called [pure functional](https://en.wikipedia.org/wiki/Purely_functional_programming) programming languages, such as [Haskell](https://en.wikipedia.org/wiki/Haskell), that forbid changing variable values. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 同じ変数の繰り替えし宣言はエラーになります: +<<<<<<< HEAD ```js run let message = "This"; // 'let' の繰り返しはエラーになります let message = "That"; // SyntaxError: 'message' has already been declared +======= +Though it may seem a little odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation confers certain benefits. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` そのため、変数は1度だけ宣言し、その後は `let` なしで参照する必要があります。 ```` @@ -151,6 +232,7 @@ let message = "That"; // SyntaxError: 'message' has already been declared ```smart header="関数型言語" 変数の値の変更を禁止する[関数型プログラミング言語](https://ja.wikipedia.org/wiki/関数型言語)と呼ばれる言語も存在することを知っておくと良いかもしれません。関数型言語の例として[Scala](http://www.scala-lang.org/) や[Erlang](http://www.erlang.org/)が挙げられます。 +<<<<<<< HEAD このような言語では、一度"箱の中"に格納された値は、永遠に変化することがありません。もし他の値を"箱の中"に格納したい場合、新たな箱を作る、すなわち新たな変数を宣言する必要があります。一度使った変数を再利用することはできません。 一見すると少し奇妙に見えるかもしれませんが、それらの言語は本格的な開発に適しています。それ以上に、並列計算のような分野ではこの制限が恩恵をもたらしさえします。このような言語を勉強することは視野を広げるために推奨されています(たとえすぐにそれを使う予定がなくても)。 @@ -164,13 +246,25 @@ JavaScript変数名は2つの制限があります: 2. 最初の文字は数字であってはいけません。 変数名の例: +======= +There are two limitations on variable names in JavaScript: + +1. The name must contain only letters, digits, or the symbols `$` and `_`. +2. The first character must not be a digit. + +Examples of valid names: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let userName; let test123; ``` +<<<<<<< HEAD 名前に複数の単語を含む場合、[camelCase](https://en.wikipedia.org/wiki/CamelCase) が一般的に使われます。 つまり、単語が続々と続き、各単語は大文字で始まります: `myVeryLongName`. +======= +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 except first starting with a capital letter: `myVeryLongName`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 興味深いことに -- ドル `'$'` や アンダースコア `'_'` も名前に使うことができます。それらは単に文字のように特別な意味をもたない普通の記号です。 @@ -188,6 +282,7 @@ alert($ + _); // 3 ```js no-beautify let 1a; // 数値から開始はできません +<<<<<<< HEAD let my-name; // ハイフン '-' は名前で許可されていません ``` @@ -197,12 +292,24 @@ let my-name; // ハイフン '-' は名前で許可されていません ````smart header="英語以外の文字も使用できますが、推奨されません。" キリル文字や象牙文字を含め、どの言語を使うことも可能です。: +======= +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, Chinese logograms and so on, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let имя = '...'; let 我 = '...'; ``` +<<<<<<< HEAD 技術的には、ここでエラーは起きず、このような名前も許可されます。しかし変数名では英語を使うのが国際的な伝統です。たとえ小さなスクリプトを書いているとしても、そのコードはこの先も残るかもしれません。他の国の人々がそれを見ることがあるかもしれません。 ```` @@ -210,6 +317,15 @@ let 我 = '...'; [予約語の一覧](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)があります。これらは言語自身によって使用されるため、変数名として使用することはできません。 たとえば、単語 `let`, `class`, `return`, `function` は予約されています。 +======= +Technically, there is no error here. Such names are allowed, but there is an international convention to use English in variable names. Even if we're writing a small script, it may have a long life ahead. People from other countries may need to read it sometime. +```` + +````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. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 下のコードは構文エラーです: @@ -221,19 +337,31 @@ let return = 5; // 同様に "return" という名前もエラーです! ````warn header="`use strict` なしでの代入" +<<<<<<< HEAD 通常、変数を使う前に定義する必要があります。しかし、以前は `let` なしで、単に値を代入するだけで変数を作成することが技術的に可能でした。`use strict` でない場合には今でも動作します。この動作は古いスクリプトの互換性のために維持されています。 +======= +Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value without using `let`. This still works now if we don't put `use strict` in our scripts to maintain compatibility with old scripts. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-strict // 注意: この例は "use strict" なしモードです +<<<<<<< HEAD num = 5; // 存在しなかった場合、変数 "num" が作られます +======= +num = 5; // the variable "num" is created if it didn't exist +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert(num); // 5 ``` +<<<<<<< HEAD これは悪い習慣です、strict モードではエラーになります: +======= +This is a bad practice and would cause an error in strict mode: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d -```js run untrusted +```js "use strict"; *!* @@ -244,13 +372,21 @@ num = 5; // エラー: num が未定義です ## 定数 +<<<<<<< HEAD 定数を宣言するためには、 `let` の代わりに `const` を使います。 +======= +To declare a constant (unchanging) variable, use `const` instead of `let`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js const myBirthday = '18.04.1982'; ``` +<<<<<<< HEAD `const` を使って宣言された変数は "定数" と呼ばれます。それらは変更することが出来ません。変更しようとするとエラーになります: +======= +Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run const myBirthday = '18.04.1982'; @@ -258,16 +394,28 @@ const myBirthday = '18.04.1982'; myBirthday = '01.01.2001'; // エラー, 定数の再代入はできません! ``` +<<<<<<< HEAD プログラマがその変数は決して変更されるべきでないと確信するとき、それを保証しつつみんなにその事実を明示的に示すために `const` を使います。 +======= +When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ### 大文字の定数 +<<<<<<< HEAD 実行する前に分かっているが、覚えるのが難しいという値に対しては、エイリアスとして定数を使うという慣習は広く行われています。 +======= +There is a widespread practice to use constants as aliases for difficult-to-remember values that are known before execution. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d このような定数は大文字とアンダースコアを使って名前がつけられます。 +<<<<<<< HEAD 例えば、いわゆる "web"(16進数) 形式での色の定数を作りましょう: +======= +For instance, let's make constants for colors in so-called "web" (hexadecimal) format: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run const COLOR_RED = "#F00"; @@ -282,6 +430,7 @@ alert(color); // #FF7F00 メリット: +<<<<<<< HEAD - `COLOR_ORANGE` は `"#FF7F00"` よりも覚えるのが遥かに簡単です。 - `COLOR_ORANGE` よりも `"#FF7F00"` のほうがタイプミスをし易いです。 - コードを読むとき、`#FF7F00` よりも `COLOR_ORANGE` のほうがより意味があります。 @@ -291,18 +440,37 @@ alert(color); // #FF7F00 "定数" であることは、その値は決して変わらないことを意味します。が、実行する前に知られている定数(赤の16進数のような)と、実行中にランタイムで *計算* されますが、代入後は変更されないものがあります。 たとえば: +======= +- `COLOR_ORANGE` is much easier to remember than `"#FF7F00"`. +- It is much easier to mistype `"#FF7F00"` than `COLOR_ORANGE`. +- 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 some constants are known before execution (like a hexadecimal value for red) and some constants are *calculated* in run-time, during the execution, but do not change after their initial assignment. + +For instance: + +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js const pageLoadTime = /* webページの読み込み時間 */; ``` +<<<<<<< HEAD `pageLoadTime` の値はページロードする前にはわからないので、通常の名前がつけられます。しかし代入後は変更されないのでこれも定数です。 つまり、大文字の名前の定数は "ハードコードされた" 値のエイリアスとしてのみ使います。 +======= +The value of `pageLoadTime` is not known before the page load, so it's named normally. But it's still a constant because it doesn't change after the assignment. + +In other words, capital-named constants are only used as aliases for "hard-coded" values. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## 正しい名前をつける 変数について話すとき、もう1つ極めて重要な事があります。 +<<<<<<< HEAD 変数は分かりやすい名前にしてください。必要に応じて考えましょう。 変数のネーミングは、プログラミングにおいて、もっとも重要で複雑なスキルの1つです。変数名をちょっと見れば、どのコードが初心者で書かれ、どれが経験豊富な開発者によって書かれたものかがわかります。 @@ -310,9 +478,19 @@ const pageLoadTime = /* webページの読み込み時間 */; 実際のプロジェクトでは、スクラッチで完全に分離された何かを書くよりも、既存のコードベースの修正や拡張に最も時間を費やします。そして、何か他のことをした後にコードに戻ったとき、よくラベル付けされた情報を探すのははるかに簡単です。それは言い換えると、適切な名前がついている変数、です。 変数を宣言する前に正しい名前について考えるようにしてください。それは多くのことに報いるでしょう。 +======= +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 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 separate from scratch. When we return to some code after doing something else for a while, it's much easier to find information that is well-labelled. 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. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d いくつかの良いルールです: +<<<<<<< HEAD - `userName` または `shoppingCart` のように人間が読みやすい名前を使ってください。 - 本当に何をしているか分かっている場合を除き、 `a`, `b`, `c` のような略語や短い名前は避けてください。 - 最大限説明的、かつ簡潔な名前を作ってください。悪い名前の例としては `data` や `value` です。このような名前からは何も分かりません。コンテキストからデータや値が意味することが例外的に明白な場合のみ使ってもOKです。 @@ -326,14 +504,34 @@ const pageLoadTime = /* webページの読み込み時間 */; その結果、変数はステッカーの変更なしに異なったものを投げ入れる箱になります。今何が入っているでしょうか？誰が知っているでしょうか...? より細かくチェックが必要になります。 このようなプログラマは変数定義では多少節約しますが、デバッグで10倍以上の時間を失います。 +======= +- Use human-readable names like `userName` or `shoppingCart`. +- Stay away from abbreviations or short names like `a`, `b`, and `c`, unless you 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 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="Reuse or create?" +And the last note. There are some lazy programmers who, instead of declaring new variables, tend to reuse existing ones. + +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 on variable declaration but lose ten times more on debugging. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 余分な変数は良く、悪ではないです。 +<<<<<<< HEAD モダンなJavaScriptは minify したり、ブラウザは十分にコードを最適化します。なので、パフォーマンスの問題になることはありません。異なる値に対して異なる変数を使うことは、エンジンの最適化を助けることもあります。 +======= +Modern JavaScript minifiers 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. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ## サマリ +<<<<<<< HEAD データを格納するために変数を宣言することができます。それは `var`, `let`, または `const` を使うことでできます。 - `let` -- は現代の変数宣言です。Chrome(V8)では、`let` を使うには、そのコードは strict モードである必要があります。 @@ -341,3 +539,12 @@ const pageLoadTime = /* webページの読み込み時間 */; - `const` --　は `let` のようですが、変数の値は変更することができません。 変数は、内部のことを簡単に理解できるように命名するべきです。 +======= +We can declare variables to store data by using the `var`, `let`, or `const` keywords. + +- `let` -- is a modern variable declaration. +- `var` -- is an old-school variable declaration. Normally we don't use it at all, but we'll cover subtle differences from `let` in the chapter , just in case you need them. +- `const` -- is like `let`, but the value of the variable can't be changed. + +Variables should be named in a way that allows us to easily understand what's inside them. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md index d8c12edb52..6278ca55a2 100644 --- a/1-js/02-first-steps/05-types/article.md +++ b/1-js/02-first-steps/05-types/article.md @@ -1,10 +1,18 @@ # データ型 +<<<<<<< HEAD JavaScript の値は常に特定の型です。例えば、文字列や数値です。 JavaScript には8つの基本的なデータ型があります。ここでは基本を学び、次のチャプターでそれらの詳細について話しましょう。 なお、変数はどんなデータでも入れることができます。変数はある時点では文字列で、その後数値を設定することができます: +======= +A value in JavaScript is always of a certain type. For example, a string or a number. + +There are eight basic data types in JavaScript. Here, we'll cover them in general and in the next chapters we'll talk about each of them in detail. + +We can put any type in a variable. For example, a variable can at one moment be a string and then store a number: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // エラーなし @@ -12,20 +20,34 @@ let message = "hello"; message = 123456; ``` +<<<<<<< HEAD このようなことができるプログラミング言語は "動的型付け" と呼ばれ、データ型はありますが、変数はそのどれにもバインドされないことを意味します。 ## 数値 +======= +Programming languages that allow such things, such as JavaScript, are called "dynamically typed", meaning that there exist data types, but variables are not bound to any of them. + +## Number +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let n = 123; n = 12.345; ``` +<<<<<<< HEAD *数値* 型は整数と浮動小数点両方に使われます。 数値に関する多くの操作があります、 e.g. 乗算 `*`, 除算 `/`, 加算 `+`, 減算 `-` など。 通常の数値に加えて、これらのタイプに属する "特別な数値型" もあります。: `Infinity`、 `-Infinity`、 `NaN`. +======= +The *number* type represents both integer and floating point numbers. + +There are many operations for numbers, e.g. multiplication `*`, division `/`, addition `+`, subtraction `-`, and so on. + +Besides regular numbers, there are so-called "special numeric values" which also belong to this data type: `Infinity`, `-Infinity` and `NaN`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d - `Infinity` は数学的な[無限大](https://en.wikipedia.org/wiki/Infinity) ∞ を表します。どの値よりも大きい特別な値です。 @@ -35,7 +57,11 @@ n = 12.345; alert( 1 / 0 ); // 無限大 ``` +<<<<<<< HEAD もしくは、単にコードに直接書くこともできます: +======= + Or just reference it directly: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( Infinity ); // 無限大 @@ -46,12 +72,19 @@ n = 12.345; alert( "not a number" / 2 ); // NaN, このような除算は誤りです ``` +<<<<<<< HEAD `NaN` は粘着性です。`NaN` 以降はどのような操作をしても `NaN` になります: +======= + `NaN` is sticky. Any further mathematical operation on `NaN` returns `NaN`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run - alert( "not a number" / 2 + 5 ); // NaN + alert( NaN + 1 ); // NaN + alert( 3 * NaN ); // NaN + alert( "not a number" / 2 - 1 ); // NaN ``` +<<<<<<< HEAD そのため、数学的な表現の中のどこかに `NaN` がある場合、結果全体に伝搬します。 ```smart header="算術演算子は安全です" @@ -81,6 +114,17 @@ const bigInt = 1234567890123456789012345678901234567890n; `BigInt` の数値はめったに必要とされないのでここでは説明しませんが、別のチャプター で記載しています。このような大きな数値が必要なときは参照してください。 +======= + So, if there's a `NaN` somewhere in a mathematical expression, it propagates to the whole result (there's only one exception to that: `NaN ** 0` is `1`). + +```smart header="Mathematical operations are safe" +Doing maths is "safe" in JavaScript. We can do anything: divide by zero, treat non-numeric strings as numbers, etc. + +The script will never stop with a fatal error ("die"). At worst, we'll get `NaN` as the result. +``` + +Special numeric values formally belong to the "number" type. Of course they are not numbers in the common sense of this word. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```smart header="互換性の問題" 現時点では、`BigInt` は Firefox/Chrome/Edge/Safari でサポートされていますが、IE ではサポートされていません。 @@ -88,14 +132,48 @@ const bigInt = 1234567890123456789012345678901234567890n; [*MDN* BigInt compatibility table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility) で、どのバージョンのブラウザがサポートしているか確認できます。 +<<<<<<< HEAD ## 文字列 JavaScriptの文字列は引用符で囲む必要があります。 +======= +## BigInt [#bigint-type] + +In JavaScript, the "number" type cannot safely represent integer values larger than (253-1) (that's `9007199254740991`), or less than -(253-1) for negatives. + +To be really precise, the "number" type can store larger integers (up to 1.7976931348623157 * 10308), but outside of the safe integer range ±(253-1) there'll be a precision error, because not all digits fit into the fixed 64-bit storage. So an "approximate" value may be stored. + +For example, these two numbers (right above the safe range) are the same: + +```js +console.log(9007199254740991 + 1); // 9007199254740992 +console.log(9007199254740991 + 2); // 9007199254740992 +``` + +So to say, all odd integers greater than (253-1) can't be stored at all in the "number" type. + +For most purposes ±(253-1) range is quite enough, but sometimes we need the entire range of really big integers, e.g. for cryptography or microsecond-precision timestamps. + +`BigInt` type was recently added to the language to represent integers of arbitrary length. + +A `BigInt` value is created by appending `n` to the end of an integer: + +```js +// the "n" at the end means it's a BigInt +const bigInt = 1234567890123456789012345678901234567890n; +``` + +As `BigInt` numbers are rarely needed, we don't cover them here, but devoted them a separate chapter . Read it when you need such big numbers. + +## String + +A string in JavaScript must be surrounded by quotes. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let str = "Hello"; let str2 = 'Single quotes are ok too'; -let phrase = `can embed ${str}`; +let phrase = `can embed another ${str}`; ``` JavaScriptでは3種類の引用符があります。 @@ -104,7 +182,11 @@ JavaScriptでは3種類の引用符があります。 2. シングルクォート: `'Hello'`. 3. バッククォート: `Hello`. +<<<<<<< HEAD ダブル/シングルクォートは "シンプルな" 引用符です。JavaScriptの中ではそれらに違いはありません。 +======= +Double and single quotes are "simple" quotes. There's practically no difference between them in JavaScript. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d バッククォートは "拡張機能" の引用符です。変数を `${…}` の中にラップすることで、変数を埋め込み文字列の中で表現することができます。たとえば: @@ -118,15 +200,22 @@ alert( `Hello, *!*${name}*/!*!` ); // Hello, John! alert( `the result is *!*${1 + 2}*/!*` ); // 結果は 3 ``` +<<<<<<< HEAD `${…}` の中の表現は評価され、結果は文字列の一部になります。そこには何でも置くことができます: `name` のような変数、`1 + 2` のような算術表現、またはより複雑なものを書くこともできます。 これはバッククォートでのみ可能なことに留意してください。他のクォートはこのような埋め込みは許容しません! +======= +The expression inside `${…}` is evaluated and the result becomes a part of the string. We can put anything in there: a variable like `name` or an arithmetical expression like `1 + 2` or something more complex. + +Please note that this can only be done in backticks. Other quotes don't have this embedding functionality! +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( "the result is ${1 + 2}" ); // 結果は ${1 + 2} です(ダブルクォートは何もしません) ``` チャプター で、より深く文字列の説明をします。 +<<<<<<< HEAD ```smart header="*character* 型はありません" 言語によっては、1文字のための特別な "文字" 型があります。たとえば、C言語やJavaでは、それは `char` です。 @@ -134,6 +223,15 @@ JavaScriptではこのような型はありません。`string` 型の1つなだ ``` ## boolean (論理型) +======= +```smart header="There is no *character* type." +In some languages, there is a special "character" type for a single character. For example, in the C language and in Java it is called "char". + +In JavaScript, there is no such type. There's only one type: `string`. A string may consist of zero characters (be empty), one character or many of them. +``` + +## Boolean (logical type) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d boolean 型は2つの値だけを持ちます: `true` と `false` @@ -154,57 +252,99 @@ let isGreater = 4 > 1; alert( isGreater ); // true (比較結果は "yes" です) ``` +<<<<<<< HEAD 後ほどチャプターでbooleanのより詳細を説明します。 +======= +We'll cover booleans more deeply in the chapter . +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## "null" 値 +<<<<<<< HEAD 特殊な `null` 値は上で述べたどの型にも属しません。 それは自身の別の型を形成し、`null` 値だけを含みます。 +======= +The special `null` value does not belong to any of the types described above. + +It forms a separate type of its own which contains only the `null` value: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let age = null; ``` +<<<<<<< HEAD JavaScriptでは、 `null` は他の言語のような "存在しないオブジェクトへの参照" または "null へのポインタ" ではありません。 それは、 "無し"、"空" または "不明な値" と言った意味を持つ特別な値です。 上のコードは、 `age` は何らかの理由で不明な値もしくは空であることを述べています。 +======= +In JavaScript, `null` is not a "reference to a non-existing object" or a "null pointer" like in some other languages. + +It's just a special value which represents "nothing", "empty" or "value unknown". + +The code above states that `age` is unknown. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## "undefined" 値 +<<<<<<< HEAD 特殊な値 `undefined` も別に扱われます。`null` のように、それ自身の型を持ちます。 +======= +The special value `undefined` also stands apart. It makes a type of its own, just like `null`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `undefined` の意味は "値は代入されていません" です。 +<<<<<<< HEAD もしも変数は宣言されているが代入されていない場合、その値は正確には `undefined` です: +======= +If a variable is declared, but not assigned, then its value is `undefined`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run -let x; +let age; +<<<<<<< HEAD alert(x); // "undefined" を表示 ``` 技術的にはどの変数にも `undefined` を代入することができます。 +======= +alert(age); // shows "undefined" +``` + +Technically, it is possible to explicitly assign `undefined` to a variable: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let age = 100; +<<<<<<< HEAD // 値を undefined に変更 +======= +// change the value to undefined +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d age = undefined; alert(age); // "undefined" ``` +<<<<<<< HEAD ...しかし、そのようにするのは推奨されません。一般的には、 "空" や "不明な値" と言った用途では `null` を使い、`undefined` は変数が割り当てられているか、もしくは似たような確認のために使います。 ## オブジェクトとシンボル +======= +...But we don't recommend doing that. Normally, one uses `null` to assign an "empty" or "unknown" value to a variable, while `undefined` is reserved as a default initial value for unassigned things. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `object` 型は特殊です。 他のすべての型は、値は1つのもの(文字列, 数値, または何でも)だけを含むので、"プリミティブ" と呼ばれます。対照的に、オブジェクトはデータのコレクションやより複雑なエンティティを格納するために使われます。 +<<<<<<< HEAD その重要性から、オブジェクトに関してはプリミティブについて詳しく学んだ後に、チャプターで扱います。 `symbol` 型はオブジェクトの一意な識別子を作るのに使われます。完全性のためにここで言及していますが、オブジェクトの後で勉強するのがよいでしょう。 @@ -221,6 +361,19 @@ alert(age); // "undefined" 言い換えると、それは括弧があってもなくても動作します。結果は同じです。 `typeof x` の呼び出しは型名の文字列を返します。: +======= +All other types are called "primitive" because their values can contain only a single thing (be it a string or a number or whatever). In contrast, objects are used to store collections of data and more complex entities. + +Being that important, objects deserve a special treatment. We'll deal with them later in the chapter , after we learn more about primitives. + +The `symbol` type is used to create unique identifiers for objects. We have to mention it here for the sake of completeness, but also postpone the details till we know objects. + +## The typeof operator [#type-typeof] + +The `typeof` operator returns the type of the operand. It's useful when we want to process values of different types differently or just want to do a quick check. + +A call to `typeof x` returns a string with the type name: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js typeof undefined // "undefined" @@ -248,14 +401,33 @@ typeof alert // "function" (3) */!* ``` +<<<<<<< HEAD 最後の3行については追加の説明が必要かもしれません: 1. `Math` は数学的な操作を提供する組み込みオブジェクトです。チャプターで学ぶでしょう。ここでは、単にオブジェクトとしての例です。 2. `typeof null` の結果は `"object"` です。これは間違っています。これは `typeof` において、公式に認められているエラーで、互換性のために維持されています。もちろん、`null` はオブジェクトではありません。それは自身の別の型をもつ特殊な値です。なので、繰り返しますがそれは言語のエラーです。 3. `alert` は言語の機能なので、`typeof alert` の結果は `"function"` です。我々は次のチャプターで function を勉強します。そして、言語の中には特別な "function" 型がないことがわかるでしょう。function はオブジェクト型に属します。しかし `typeof` はそれらを別々に扱います。正式にはそれは正しくありませんが、実際にはとても便利です。 +======= +The last three lines may need additional explanation: + +1. `Math` is a built-in object that provides mathematical operations. We will learn it in the chapter . Here, it serves just as an example of an object. +2. The result of `typeof null` is `"object"`. That's an officially recognized error in `typeof`, coming from very early days of JavaScript and kept for compatibility. Definitely, `null` is not an object. It is a special value with a separate type of its own. The behavior of `typeof` is wrong here. +3. The result of `typeof alert` is `"function"`, because `alert` is a function. We'll study functions in the next chapters where we'll also see that there's no special "function" type in JavaScript. Functions belong to the object type. But `typeof` treats them differently, returning `"function"`. That also comes from the early days of JavaScript. Technically, such behavior isn't correct, but can be convenient in practice. + +```smart header="The `typeof(x)` syntax" +You may also come across another syntax: `typeof(x)`. It's the same as `typeof x`. + +To put it clear: `typeof` is an operator, not a function. The parentheses here aren't a part of `typeof`. It's the kind of parentheses used for mathematical grouping. + +Usually, such parentheses contain a mathematical expression, such as `(2 + 2)`, but here they contain only one argument `(x)`. Syntactically, they allow to avoid a space between the `typeof` operator and its argument, and some people like it. + +Some people prefer `typeof(x)`, although the `typeof x` syntax is much more common. +``` +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## サマリ +<<<<<<< HEAD JavaScriptには7つの基本型があります。 - `number` あらゆる種類の数値: 整数または浮動小数点 @@ -274,3 +446,25 @@ JavaScriptには7つの基本型があります。 - `null` は `"object"` を返します -- それは言語のエラーで、実際はオブジェクトではありません。 次のチャプターではプリミティブ値について集中し、それらに精通した後オブジェクトに進みます。 +======= +There are 8 basic data types in JavaScript. + +- Seven primitive data types: + - `number` for numbers of any kind: integer or floating-point, integers are limited by ±(253-1). + - `bigint` for integer numbers of arbitrary length. + - `string` for strings. A string may have zero or more characters, there's no separate single-character type. + - `boolean` for `true`/`false`. + - `null` for unknown values -- a standalone type that has a single value `null`. + - `undefined` for unassigned values -- a standalone type that has a single value `undefined`. + - `symbol` for unique identifiers. +- And one non-primitive data type: + - `object` for more complex data structures. + +The `typeof` operator allows us to see which type is stored in a variable. + +- Usually used as `typeof x`, but `typeof(x)` is also possible. +- Returns a string with the name of the type, like `"string"`. +- For `null` returns `"object"` -- this is an error in the language, it's not actually an object. + +In the next chapters, we'll concentrate on primitive values and once we're familiar with them, we'll move on to objects. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md index fc4befa79d..a65a654e05 100644 --- a/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md +++ b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md @@ -2,8 +2,8 @@ importance: 4 --- -# シンプルなページ +# A simple page -名前を訪ねて、それを出力する web ページを作りなさい。 +Create a web-page that asks for a name and outputs it. [demo] diff --git a/1-js/02-first-steps/06-alert-prompt-confirm/article.md b/1-js/02-first-steps/06-alert-prompt-confirm/article.md index b923845e65..ac3db3871b 100644 --- a/1-js/02-first-steps/06-alert-prompt-confirm/article.md +++ b/1-js/02-first-steps/06-alert-prompt-confirm/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # インタラクション: alert, prompt, confirm デモ環境としてブラウザを使っているので、ユーザと対話するためのいくつかの関数を見ておきましょう: `alert`, `prompt` そして `confirm` です @@ -7,11 +8,23 @@ 既にご覧になったと思いますが、メッセージを表示し、ユーザが "OK" をクリックするのを待ちます。 例: +======= +# Interaction: alert, prompt, confirm + +As we'll be using the browser as our demo environment, let's see a couple of functions to interact with the user: `alert`, `prompt` and `confirm`. + +## alert + +This one we've seen already. It shows a message and waits for the user to press "OK". + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert("Hello"); ``` +<<<<<<< HEAD メッセージのある小さいウィンドウは *モーダルウィンドウ* と呼ばれます。"モーダル" という言葉は、そのウィンドウを処理するまで（今の場合であれば、OKボタンを押すまで）、訪問者はページの他の部分と対話したり、他のボタンを押すことができないことを意味します。 ## prompt @@ -39,6 +52,35 @@ result = prompt(title[, default]); `prompt` の呼び出しはフィールドのテキスト、もしくは入力がキャンセルされた場合には `null` が返却されます。 例: +======= +The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons, etc, until they have dealt with the window. In this case -- until they press "OK". + +## prompt + +The function `prompt` accepts two arguments: + +```js no-beautify +result = prompt(title, [default]); +``` + +It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel. + +`title` +: The text to show the visitor. + +`default` +: An optional second parameter, the initial value for the input field. + +```smart header="The square brackets in syntax `[...]`" +The square brackets around `default` in the syntax above denote that the parameter is optional, not required. +``` + +The visitor can type something in the prompt input field and press OK. Then we get that text in the `result`. Or they can cancel the input by pressing Cancel or hitting the `key:Esc` key, then we get `null` as the `result`. + +The call to `prompt` returns the text from the input field or `null` if the input was canceled. + +For instance: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let age = prompt('How old are you?', 100); @@ -46,16 +88,27 @@ let age = prompt('How old are you?', 100); alert(`You are ${age} years old!`); // You are 100 years old! ``` +<<<<<<< HEAD ````warn header="IE: 常に `デフォルト` を設定してください" 2つ目のパラメータは任意です。しかし、それを指定しない場合、Internet Explorer はプロンプトにテキスト `"undefined"` を挿入します。 確認する場合、Internet Explorer でこのコードを実行しましょう: +======= +````warn header="In IE: always supply a `default`" +The second parameter is optional, but if we don't supply it, Internet Explorer will insert the text `"undefined"` into the prompt. + +Run this code in Internet Explorer to see: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let test = prompt("Test"); ``` +<<<<<<< HEAD なので IEで良く見えるようにするには、常に2つ目の引数を指定することが推奨されます。: +======= +So, for prompts to look good in IE, we recommend always providing the second argument: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let test = prompt("Test", ''); // <-- for IE @@ -64,21 +117,34 @@ let test = prompt("Test", ''); // <-- for IE ## confirm +<<<<<<< HEAD 構文: +======= +The syntax: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js result = confirm(question); ``` +<<<<<<< HEAD `confirm` 関数は `question` と 2つのボタンをもつモーダルウィンドウを表示します。: OK と キャンセル OK が押された場合の結果は `true` で、それ以外は `false` です。 例: +======= +The function `confirm` shows a modal window with a `question` and two buttons: OK and Cancel. + +The result is `true` if OK is pressed and `false` otherwise. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let isBoss = confirm("Are you the boss?"); +<<<<<<< HEAD alert( isBoss ); // true OKが押された場合 ``` @@ -103,3 +169,29 @@ alert( isBoss ); // true OKが押された場合 2. ウィンドウの正確な見た目もまたブラウザに依存し、それを修正することはできません。 それは単純化に対する代償です。より良いウィンドウを表示し、訪問者とのよりリッチなインタラクションを実現する方法もありますが、"必要以上の装飾" が重要でない場合、これらの方法が使えます。 +======= +alert( isBoss ); // true if OK is pressed +``` + +## Summary + +We covered 3 browser-specific functions to interact with visitors: + +`alert` +: shows a message. + +`prompt` +: shows a message asking the user to input text. It returns the text or, if Cancel button or `key:Esc` is clicked, `null`. + +`confirm` +: shows a message and waits for the user to press "OK" or "Cancel". It returns `true` for OK and `false` for Cancel/`key:Esc`. + +All these methods are modal: they pause script execution and don't allow the visitor to interact with the rest of the page until the window has been dismissed. + +There are two limitations shared by all the methods above: + +1. The exact location of the modal window is determined by the browser. Usually, it's in the center. +2. The exact look of the window also depends on the browser. We can't modify it. + +That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if "bells and whistles" do not matter much, these methods work just fine. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md index fcfe4fd090..3295561419 100644 --- a/1-js/02-first-steps/07-type-conversions/article.md +++ b/1-js/02-first-steps/07-type-conversions/article.md @@ -1,102 +1,102 @@ -# 型変換 +# Type Conversions -多くの場合、演算子と関数は自動的に値を正しい型に変換します。それを "型変換" と呼びます。 +Most of the time, operators and functions automatically convert the values given to them to the right type. -たとえば `alert` は、表示のためにどのような値も文字列へと自動的に変換します。数学的な演算では、値は数値に変換されます。 +For example, `alert` automatically converts any value to a string to show it. Mathematical operations convert values to numbers. -また、物事を正しくするために、ある値を明示的に変換する必要がある場合もあります。 +There are also cases when we need to explicitly convert a value to the expected type. -```smart header="まだオブジェクトについては話していません" -このチャプターでは、まだ オブジェクト は説明しません。ここでは最初にプリミティブを学びます。 +```smart header="Not talking about objects yet" +In this chapter, we won't cover objects. For now, we'll just be talking about primitives. -その後、オブジェクトについて学んだ後、チャプター で、どのようにオブジェクト変換が動作するのかを見ていきます。 +Later, after we learn about objects, in the chapter we'll see how objects fit in. ``` -## 文字列変換 +## String Conversion -文字列変換は、文字列形式の値が必要なときに発生します。 +String conversion happens when we need the string form of a value. -たとえば、`alert(value)` は値を表示するためにそれを行います。 +For example, `alert(value)` does it to show the value. -また、そのために、`String(value)` 関数を使うこともできます: +We can also call the `String(value)` function to convert a value to a string: ```js run let value = true; alert(typeof value); // boolean *!* -value = String(value); // 今、値は文字列の "true" +value = String(value); // now value is a string "true" alert(typeof value); // string */!* ``` -文字列変換はほとんどが明白です。`false` は `"false"` に、 `null` は `"null"` になります。 +String conversion is mostly obvious. A `false` becomes `"false"`, `null` becomes `"null"`, etc. -## 数値変換 +## Numeric Conversion -数値変換は数学的関数や表現の中で自動的に起こります。 +Numeric conversion in mathematical functions and expressions happens automatically. -たとえば、非数値に除算 `/` が適用された場合: +For example, when division `/` is applied to non-numbers: ```js run -alert( "6" / "2" ); // 3, 文字列は数値に変換されます +alert( "6" / "2" ); // 3, strings are converted to numbers ``` -また、明示的に `value` を変換するために `Number(value)` を使うことができます。 +We can use the `Number(value)` function to explicitly convert a `value` to a number: ```js run let str = "123"; alert(typeof str); // string -let num = Number(str); // 数値の 123 になります +let num = Number(str); // becomes a number 123 alert(typeof num); // number ``` -テキストフォームのような、文字列ベースのソースから値を読むが、数値が入力されることを想定するときには通常明示的な変換が必要になります。 +Explicit conversion is usually required when we read a value from a string-based source like a text form but expect a number to be entered. -文字列が有効な数値でない場合、このような変換の結果は `NaN` です。たとえば: +If the string is not a valid number, the result of such a conversion is `NaN`. For instance: ```js run let age = Number("an arbitrary string instead of a number"); -alert(age); // NaN, 変換失敗 +alert(age); // NaN, conversion failed ``` -数値変換ルール: +Numeric conversion rules: -| 値 | 変換後... | +| Value | Becomes... | |-------|-------------| |`undefined`|`NaN`| |`null`|`0`| -|true と false | `1` and `0` | -| `string` | 最初と最後のスペースは取り除かれます。そして、残った文字列が空の場合は結果は 0 になります。そうでなければ、文字列から "読んだ" 数値です。 エラーでは `NaN` が与えられます。| +|true and false | `1` and `0` | +| `string` | Whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. | -例: +Examples: ```js run alert( Number(" 123 ") ); // 123 -alert( Number("123z") ); // NaN ("z" の読み込みでエラー) +alert( Number("123z") ); // NaN (error reading a number at "z") alert( Number(true) ); // 1 alert( Number(false) ); // 0 ``` -`null` と `undefined` はここでは異なる振る舞いをすることに留意してください。: `undefined` が `NaN` になる一方、`null` は 0 になります。 +Please note that `null` and `undefined` behave differently here: `null` becomes zero while `undefined` becomes `NaN`. -ほとんどの算術演算もこのような変換を行います。次のチャプターでそれらを詳しく見ていきます。 +Most mathematical operators also perform such conversion, we'll see that in the next chapter. -## Boolean変換 +## Boolean Conversion -真偽値(Boolean)変換はシンプルです。 +Boolean conversion is the simplest one. -論理演算(後ほど条件テストや他の種類を見ます)で起こりますが、`Boolean(value)` を呼ぶことで手動で実行することもできます。 +It happens in logical operations (later we'll meet condition tests and other similar things) but can also be performed explicitly with a call to `Boolean(value)`. -変換ルール: +The conversion rule: -- `0`, 空文字, `null`, `undefined` や `NaN` のように直感的に "空" の値は `false` になります。 -- 他の値は `true` になります。 +- Values that are intuitively "empty", like `0`, an empty string, `null`, `undefined`, and `NaN`, become `false`. +- Other values become `true`. -例: +For instance: ```js run alert( Boolean(1) ); // true @@ -106,45 +106,45 @@ alert( Boolean("hello") ); // true alert( Boolean("") ); // false ``` -````warn header="注意してください: ゼロの文字列 `\"0\"` は `true` です" -幾つかの言語(すなわち PHP)は `”0”` を `false` として扱います。しかし、JavaScriptでは、非空文字は常に `true` です。 +````warn header="Please note: the string with zero `\"0\"` is `true`" +Some languages (namely PHP) treat `"0"` as `false`. But in JavaScript, a non-empty string is always `true`. ```js run alert( Boolean("0") ); // true -alert( Boolean(" ") ); // スペースもまた true です (任意の非空文字は true) +alert( Boolean(" ") ); // spaces, also true (any non-empty string is true) ``` ```` -## サマリ +## Summary -3つの最も広く使われている型変換があります: 文字列変換, 数値変換, 真偽値変換です。 +The three most widely used type conversions are to string, to number, and to boolean. -**`文字列変換`** -- 何かを出力するときに起こり、`String(value)` で行うことができます。文字列への変換は、通常はプリミティブな値にとって明白です。 +**`String Conversion`** -- Occurs when we output something. Can be performed with `String(value)`. The conversion to string is usually obvious for primitive values. -**`数値変換`** -- 算術演算で起こり、`Number(value)` で実行できます。 +**`Numeric Conversion`** -- Occurs in math operations. Can be performed with `Number(value)`. -変換は次のルールに従います: +The conversion follows the rules: -| 値 | 変換後... | +| Value | Becomes... | |-------|-------------| |`undefined`|`NaN`| |`null`|`0`| -|true と false | `1` と `0` | -| `string` | 前後の連続した空白は取り除かれます。そして、残った文字列が空の場合は結果は 0 になります。そうでなければ、文字列から "読んだ" 数値です。 エラーでは `NaN` が与えられます。| +|true / false | `1 / 0` | +| `string` | The string is read "as is", whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. | -**`真偽値変換`** -- 論理演算で発生するか、`Boolean(value)` で実行できます。 +**`Boolean Conversion`** -- Occurs in logical operations. Can be performed with `Boolean(value)`. -次のルールに従います: +Follows the rules: -| 値 | 変換後... | +| Value | Becomes... | |-------|-------------| |`0`, `null`, `undefined`, `NaN`, `""` |`false`| -|それ以外の値| `true` | +|any other value| `true` | -ルールのほとんどは理解し覚えるのが簡単です。通常間違える注目すべき例外は: +Most of these rules are easy to understand and memorize. The notable exceptions where people usually make mistakes are: -- `undefined` は文字列としては `NaN` です, `0` ではりません。 -- `"0"` と `" "` のようなスペースだけの文字列は真偽値としては true です。 +- `undefined` is `NaN` as a number, not `0`. +- `"0"` and space-only strings like `" "` are true as a boolean. -オブジェクトについてはここでは説明しませんが、JavaScriptについての基本的なことを学んだら、オブジェクトに専念する の章の後半に戻ります。 +Objects aren't covered here. We'll return to them later in the chapter that is devoted exclusively to objects after we learn more basic things about JavaScript. diff --git a/1-js/02-first-steps/08-operators/1-increment-order/solution.md b/1-js/02-first-steps/08-operators/1-increment-order/solution.md index cd510145ac..8a44d798eb 100644 --- a/1-js/02-first-steps/08-operators/1-increment-order/solution.md +++ b/1-js/02-first-steps/08-operators/1-increment-order/solution.md @@ -1,5 +1,5 @@ -答えは次の通りです: +The answer is: - `a = 2` - `b = 2` @@ -9,9 +9,10 @@ ```js run no-beautify let a = 1, b = 1; -alert( ++a ); // 2, 前置式は新しい値を返します -alert( b++ ); // 1, 後置式は古い値を返します +alert( ++a ); // 2, prefix form returns the new value +alert( b++ ); // 1, postfix form returns the old value -alert( a ); // 2, 1回インクリメントされています -alert( b ); // 2, 1回インクリメントされています +alert( a ); // 2, incremented once +alert( b ); // 2, incremented once ``` + diff --git a/1-js/02-first-steps/08-operators/1-increment-order/task.md b/1-js/02-first-steps/08-operators/1-increment-order/task.md index 9c07e5f7ef..7db0923890 100644 --- a/1-js/02-first-steps/08-operators/1-increment-order/task.md +++ b/1-js/02-first-steps/08-operators/1-increment-order/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# プレフィックス(接頭辞)とサフィックス(接尾辞)の形式 +# The postfix and prefix forms -下のコードが実行されたあと、変数 `a`, `b`, `c`, `d` はいくつになるでしょう？ +What are the final values of all variables `a`, `b`, `c` and `d` after the code below? ```js let a = 1, b = 1; diff --git a/1-js/02-first-steps/08-operators/2-assignment-result/solution.md b/1-js/02-first-steps/08-operators/2-assignment-result/solution.md index d9c3d96683..e3113b4cd3 100644 --- a/1-js/02-first-steps/08-operators/2-assignment-result/solution.md +++ b/1-js/02-first-steps/08-operators/2-assignment-result/solution.md @@ -1,4 +1,5 @@ -答えは次の通りです: +The answer is: + +- `a = 4` (multiplied by 2) +- `x = 5` (calculated as 1 + 4) -- `a = 4` (2で掛けられています) -- `x = 5` (1 + 4 と計算されます) diff --git a/1-js/02-first-steps/08-operators/2-assignment-result/task.md b/1-js/02-first-steps/08-operators/2-assignment-result/task.md index 4b6db6a9e1..5345c9485b 100644 --- a/1-js/02-first-steps/08-operators/2-assignment-result/task.md +++ b/1-js/02-first-steps/08-operators/2-assignment-result/task.md @@ -2,9 +2,9 @@ importance: 3 --- -# 代入の結果 +# Assignment result -下のコードが実行されたあと、`a` と `x` はいくつになるでしょう？ +What are the values of `a` and `x` after the code below? ```js let a = 2; 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 index d3e7ee2e8a..21fa7cc4bb 100644 --- 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 @@ -9,14 +9,20 @@ true + false = 1 "$" + 4 + 5 = "$45" "4" - 2 = 2 "4px" - 2 = NaN +<<<<<<< HEAD 7 / 0 = Infinity " -9 " + 5 = " -9 5" // (3) " -9 " - 5 = -14 // (4) +======= +" -9 " + 5 = " -9 5" // (3) +" -9 " - 5 = -14 // (4) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d null + 1 = 1 // (5) undefined + 1 = NaN // (6) " \t \n" - 2 = -2 // (7) ``` +<<<<<<< HEAD 1. 文字列の追加 `"" + 1` では `1` を文字列に変換します: `"" + 1 = "1"`, そして `"1" + 0` には同じルールが適用されます。 2. 減算 `-` (ほとんどの算術演算子と同様)は数値でのみ動作し、空の文字列 `""` を `0` に変換します 3. 文字列の追加は、数値 `5` を文字列に追加します。 @@ -24,3 +30,12 @@ undefined + 1 = NaN // (6) 5. `null` は数値変換後は `0` になります。 6. `undefined` は数値変換後は `NaN` になります。 7. 文字列の先頭/末尾のスペースは、文字列が数値に変換される際に削除されます。ここでは文字列全体が `\t` や `\n`、"通常" のスペース文字から構成されています。したがって、空文字列のときと同様、`0` になります。 +======= +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`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md index 4d25a1f207..068420c7d3 100644 --- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md +++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# 型変換 +# Type conversions -これらの式の結果はどうなるでしょう？ +What are results of these expressions? ```js no-beautify "" + 1 + 0 @@ -16,7 +16,6 @@ true + false "$" + 4 + 5 "4" - 2 "4px" - 2 -7 / 0 " -9 " + 5 " -9 " - 5 null + 1 @@ -24,4 +23,4 @@ undefined + 1 " \t \n" - 2 ``` -よく考え、書き留めてから答えあわせしてみてください。 +Think well, write down and then compare with the answer. 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 index 32cc581eaf..219f3909a7 100644 --- 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 @@ -1,6 +1,12 @@ +<<<<<<< HEAD 理由はプロンプトがユーザ入力を文字列として返すからです。 なので、変数はそれぞれ値 `"1"` と `"2"` になります。 +======= +The reason is that prompt returns user input as a string. + +So variables have values `"1"` and `"2"` respectively. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let a = "1"; // prompt("First number?", 1); @@ -9,9 +15,15 @@ let b = "2"; // prompt("Second number?", 2); alert(a + b); // 12 ``` +<<<<<<< HEAD すべきことは、`+` の前に、文字列から数値へ変換することです。例えば、`Number()` を使用したり、それらの前に `+` をつけます。 例えば、。`prompt` の直前: +======= +What we should do is to convert strings to numbers before `+`. For example, using `Number()` or prepending them with `+`. + +For example, right before `prompt`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let a = +prompt("First number?", 1); @@ -20,7 +32,11 @@ let b = +prompt("Second number?", 2); alert(a + b); // 3 ``` +<<<<<<< HEAD あるいは `alert`: +======= +Or in the `alert`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let a = prompt("First number?", 1); @@ -29,4 +45,8 @@ let b = prompt("Second number?", 2); alert(+a + +b); // 3 ``` +<<<<<<< HEAD 最新のコードでは、単項と二項の `+` 両方を使用しています。面白いですね。 +======= +Using both unary and binary `+` in the latest code. Looks funny, doesn't it? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 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 index 7809de4545..1a273d478d 100644 --- 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 @@ -2,6 +2,7 @@ importance: 5 --- +<<<<<<< HEAD # 足し算を修正する ユーザに２つの数字を訪ね、その合計を表示するコードがあります。 @@ -9,6 +10,15 @@ importance: 5 これは正しく機能していません。以下の例の出力は `12` です（デフォルトのプロンプトの値の場合）。 なぜでしょうか？修正してください。結果は `3` になるべきです。 +======= +# 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`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let a = prompt("First number?", 1); diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md index 4b4a8fbaab..f5b2ca3915 100644 --- a/1-js/02-first-steps/08-operators/article.md +++ b/1-js/02-first-steps/08-operators/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # 演算子 多くの演算子は既に学校で学んでおり、よく知られています。加算 `+`, 乗算 `*`, 減算 `-` などです。 @@ -10,6 +11,20 @@ - *オペランド* -- は演算子が適用されるものです。たとえば、 乗算 `5 * 2` では、2つのオペランドがあります: 左のオペランドは `5`, 右のオペランドは `2` です。"オペランド" は "引数" と呼ばれることもあります。 - 演算子が単一のオペランドをもつ場合は *単項演算* です。たとえば、負の単項演算 `"-"` は数値の符号を反転します: +======= +# Basic operators, maths + +We know many operators from school. They are things like addition `+`, multiplication `*`, subtraction `-`, and so on. + +In this chapter, we’ll start with simple operators, then concentrate on JavaScript-specific aspects, not covered by school arithmetic. + +## Terms: "unary", "binary", "operand" + +Before we move on, let's grasp some common terminology. + +- *An operand* -- is what operators are applied to. For instance, in the multiplication of `5 * 2` there are two operands: the left operand is `5` and the right operand is `2`. Sometimes, people call these "arguments" instead of "operands". +- An operator is *unary* if it has a single operand. For example, the unary negation `-` reverses the sign of a number: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let x = 1; @@ -17,6 +32,7 @@ *!* x = -x; */!* +<<<<<<< HEAD alert( x ); // -1, 負の単項演算が適用されました ``` - 演算子が2つのオペランドを持つ場合は *二項演算* です。同じマイナスも二項演算で同様に存在します: @@ -81,21 +97,99 @@ alert( 8 ** (1/3) ); // 2 (1/3 の累乗は立方根と同じです) 通常、プラス演算子 `+` は数値の合計です。 しかし二項演算子 `+` が文字列に適用された場合は、お互いの文字を結合します。 +======= + alert( x ); // -1, unary negation was applied + ``` +- An operator is *binary* if it has two operands. The same minus exists in binary form as well: + + ```js run no-beautify + let x = 1, y = 3; + alert( y - x ); // 2, binary minus subtracts values + ``` + + Formally, in the examples above we have two different operators that share the same symbol: the negation operator, a unary operator that reverses the sign, and the subtraction operator, a binary operator that subtracts one number from another. + +## Maths + +The following math operations are supported: + +- Addition `+`, +- Subtraction `-`, +- Multiplication `*`, +- Division `/`, +- Remainder `%`, +- Exponentiation `**`. + +The first four are straightforward, while `%` and `**` need a few words about them. + +### Remainder % + +The remainder operator `%`, despite its appearance, is not related to percents. + +The result of `a % b` is the [remainder](https://en.wikipedia.org/wiki/Remainder) of the integer division of `a` by `b`. + +For instance: + +```js run +alert( 5 % 2 ); // 1, the remainder of 5 divided by 2 +alert( 8 % 3 ); // 2, the remainder of 8 divided by 3 +alert( 8 % 4 ); // 0, the remainder of 8 divided by 4 +``` + +### Exponentiation ** + +The exponentiation operator `a ** b` raises `a` to the power of `b`. + +In school maths, we write that as ab. + +For instance: + +```js run +alert( 2 ** 2 ); // 2² = 4 +alert( 2 ** 3 ); // 2³ = 8 +alert( 2 ** 4 ); // 2⁴ = 16 +``` + +Just like in maths, the exponentiation operator is defined for non-integer numbers as well. + +For example, a square root is an exponentiation by ½: + +```js run +alert( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root) +alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root) +``` + + +## String concatenation with binary + + +Let's meet the features of JavaScript operators that are beyond school arithmetics. + +Usually, the plus operator `+` sums numbers. + +But, if the binary `+` is applied to strings, it merges (concatenates) them: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let s = "my" + "string"; alert(s); // mystring ``` +<<<<<<< HEAD 一方のオペランドが文字列の場合、他のオペランドも文字列に変換されることに注意してください。 例: +======= +Note that if any of the operands is a string, then the other one is converted to a string too. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( '1' + 2 ); // "12" alert( 2 + '1' ); // "21" ``` +<<<<<<< HEAD ご覧の通り、どちらのオペランドが文字列なのかは関係ありません。 こちらはより複雑な例です: @@ -130,6 +224,42 @@ alert( '6' / '2' ); // 3, 両方のオペランドを数値に変換します ```js run // 数値の場合、何の影響もありません +======= +See, it doesn't matter whether the first operand is a string or the second one. + +Here's a more complex example: + +```js run +alert(2 + 2 + '1' ); // "41" and not "221" +``` + +Here, operators work one after another. The first `+` sums two numbers, so it returns `4`, then the next `+` adds the string `1` to it, so it's like `4 + '1' = '41'`. + +```js run +alert('1' + 2 + 2); // "122" and not "14" +``` +Here, the first operand is a string, the compiler treats the other two operands as strings too. The `2` gets concatenated to `'1'`, so it's like `'1' + 2 = "12"` and `"12" + 2 = "122"`. + +The binary `+` is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers. + +Here's the demo for subtraction and division: + +```js run +alert( 6 - '2' ); // 4, converts '2' to a number +alert( '6' / '2' ); // 3, converts both operands to numbers +``` + +## Numeric conversion, unary + + +The plus `+` exists in two forms: the binary form that we used above and the unary form. + +The unary plus or, in other words, the plus operator `+` applied to a single value, doesn't do anything to numbers. But if the operand is not a number, the unary plus converts it into a number. + +For example: + +```js run +// No effect on numbers +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d let x = 1; alert( +x ); // 1 @@ -137,32 +267,52 @@ let y = -2; alert( +y ); // -2 *!* +<<<<<<< HEAD // 非数値を数値に変換します +======= +// Converts non-numbers +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert( +true ); // 1 alert( +"" ); // 0 */!* ``` +<<<<<<< HEAD これは `Number(...)` と同じですが、より短い表現です。 文字列から数値への変換が必要なケースは多いです。例えば、HTMLのフォームフィールドから値を取得する場合、それらは通常文字列です。今、それらの合計が欲しい場合はどうなるでしょう？ 二項演算子プラスはそれらを文字列として結合します。: +======= +It actually does the same thing as `Number(...)`, but is shorter. + +The need to convert strings to numbers arises very often. For example, if we are getting values from HTML form fields, they are usually strings. What if we want to sum them? + +The binary plus would add them as strings: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let apples = "2"; let oranges = "3"; +<<<<<<< HEAD alert( apples + oranges ); // "23", 二項演算子プラスは文字列を結合します ``` 数値として扱いたい場合は変換して合計します: +======= +alert( apples + oranges ); // "23", the binary plus concatenates strings +``` + +If we want to treat them as numbers, we need to convert and then sum them: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let apples = "2"; let oranges = "3"; *!* +<<<<<<< HEAD // 二項演算子プラスの処理の前に、両方の値が数値に変換されます alert( +apples + +oranges ); // 5 */!* @@ -208,6 +358,53 @@ JavaScriptでは多くの演算子があります。どの演算子も対応す 代入 `=` もまた演算子であることに注意しましょう。 `2`というとても低い値として優先順位の一覧に並んでいます。 なので `x = 2 * 2 + 1` のように変数に代入するとき、計算が最初に行われ、その後 `=` が評価され、 `x` に結果が格納されます。 +======= +// both values converted to numbers before the binary plus +alert( +apples + +oranges ); // 5 +*/!* + +// the longer variant +// alert( Number(apples) + Number(oranges) ); // 5 +``` + +From a mathematician's standpoint, the abundance of pluses may seem strange. But from a programmer's standpoint, there's nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up. + +Why are unary pluses applied to values before the binary ones? As we're going to see, that's because of their *higher precedence*. + +## Operator precedence + +If an expression has more than one operator, the execution order is defined by their *precedence*, or, in other words, the default priority order of operators. + +From school, we all know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That's exactly the precedence thing. The multiplication is said to have *a higher precedence* than the addition. + +Parentheses override any precedence, so if we're not satisfied with the default order, we can use them to change it. For example, write `(1 + 2) * 2`. + +There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right. + +Here's an extract from the [precedence table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones): + +| Precedence | Name | Sign | +|------------|------|------| +| ... | ... | ... | +| 14 | unary plus | `+` | +| 14 | unary negation | `-` | +| 13 | exponentiation | `**` | +| 12 | multiplication | `*` | +| 12 | division | `/` | +| 11 | addition | `+` | +| 11 | subtraction | `-` | +| ... | ... | ... | +| 2 | assignment | `=` | +| ... | ... | ... | + +As we can see, the "unary plus" has a priority of `14` which is higher than the `11` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition. + +## Assignment + +Let's note that an assignment `=` is also an operator. It is listed in the precedence table with the very low priority of `2`. + +That's why, when we assign a variable, like `x = 2 * 2 + 1`, the calculations are done first and then the `=` is evaluated, storing the result in `x`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let x = 2 * 2 + 1; @@ -215,6 +412,7 @@ let x = 2 * 2 + 1; alert( x ); // 5 ``` +<<<<<<< HEAD ### 代入 = は値を返します `=` が演算子であり、"魔法の" 言語構造でないという事実は、興味深い意味合いを持っています。 @@ -224,6 +422,17 @@ JavaScript のすべての演算子は値を返却します。これは `+` や `x = value` の呼び出しでは、`value` を `x` に書き込み、*その値を返却します。* これは、複雑な式の一部に代入を使用した例です: +======= +### Assignment = returns a value + +The fact of `=` being an operator, not a "magical" language construct has an interesting implication. + +All operators in JavaScript return a value. That's obvious for `+` and `-`, but also true for `=`. + +The call `x = value` writes the `value` into `x` *and then returns it*. + +Here's a demo that uses an assignment as part of a more complex expression: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let a = 1; @@ -237,6 +446,7 @@ alert( a ); // 3 alert( c ); // 0 ``` +<<<<<<< HEAD 上記の例では、式 `(a = b + 1)` の結果は `a` に代入された値（つまり `3`）です。その後、以降の評価で利用されています。 面白いですよね？ JavaScript ライブラリで時々目にするので、これがどのように動くのかは理解しておく必要があります。 @@ -246,6 +456,17 @@ alert( c ); // 0 # 代入のチェーン もう１つの興味深い特徴は、代入をチェーンする機能です: +======= +In the example above, the result of expression `(a = b + 1)` is the value which was assigned to `a` (that is `3`). It is then used for further evaluations. + +Funny code, isn't it? We should understand how it works, because sometimes we see it in JavaScript libraries. + +Although, please don't write the code like that. Such tricks definitely don't make code clearer or readable. + +### Chaining assignments + +Another interesting feature is the ability to chain assignments: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let a, b, c; @@ -259,15 +480,22 @@ alert( b ); // 4 alert( c ); // 4 ``` +<<<<<<< HEAD チェーンされた代入は右から左へ評価されます。最初に最も右の式 `2 + 2` が評価され、次に左の変数に代入されます。: `c`, `b` と `a`です。最後にすべての変数は単一の値になります。 改めて言いますが、可読性を上げるためには、このようなコードを複数行に分割する方がよいです: +======= +Chained assignments evaluate from right to left. First, the rightmost expression `2 + 2` is evaluated and then assigned to the variables on the left: `c`, `b` and `a`. At the end, all the variables share a single value. + +Once again, for the purposes of readability it's better to split such code into few lines: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js c = 2 + 2; b = c; a = c; ``` +<<<<<<< HEAD これは読みやすいですね。コードを素早く眺めているときには特に。 ## インプレース(in-place)修正 @@ -275,6 +503,15 @@ a = c; 変数に演算子を適用したあと、新しい結果を同じ変数に格納したいことは頻繁にあります。 例: +======= +That's easier to read, especially when eye-scanning the code fast. + +## Modify-in-place + +We often need to apply an operator to a variable and store the new result in that same variable. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let n = 2; @@ -282,23 +519,39 @@ n = n + 5; n = n * 2; ``` +<<<<<<< HEAD この表記は演算子 `+=` や `*=` を使用して短縮することができます: ```js run let n = 2; n += 5; // n = 7 (n = n + 5 と同じ) n *= 2; // n = 14 (n = n * 2 と同じ) +======= +This notation can be shortened using the operators `+=` and `*=`: + +```js run +let n = 2; +n += 5; // now n = 7 (same as n = n + 5) +n *= 2; // now n = 14 (same as n = n * 2) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert( n ); // 14 ``` +<<<<<<< HEAD 短縮の "変更と代入" 演算子はすべての算術演算とビット演算子に存在します: `/=`, `-=` 等 このような演算子は通常の代入と同じ優先順位になります。なので、他のほとんどの計算の後に実行されます: +======= +Short "modify-and-assign" operators exist for all arithmetical and bitwise operators: `/=`, `-=`, etc. + +Such operators have the same precedence as a normal assignment, so they run after most other calculations: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let n = 2; +<<<<<<< HEAD n *= 3 + 5; alert( n ); // 16 (最初に右辺が評価されるので n *= 8　と同じです) @@ -324,10 +577,38 @@ alert( n ); // 16 (最初に右辺が評価されるので n *= 8　と同じ ```js run no-beautify let counter = 2; counter--; // counter = counter - 1 と同じですがより短いです +======= +n *= 3 + 5; // right part evaluated first, same as n *= 8 + +alert( n ); // 16 +``` + +## Increment/decrement + + + +Increasing or decreasing a number by one is among the most common numerical operations. + +So, there are special operators for it: + +- **Increment** `++` increases a variable by 1: + + ```js run no-beautify + let counter = 2; + counter++; // works the same as counter = counter + 1, but is shorter + alert( counter ); // 3 + ``` +- **Decrement** `--` decreases a variable by 1: + + ```js run no-beautify + let counter = 2; + counter--; // works the same as counter = counter - 1, but is shorter +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert( counter ); // 1 ``` ```warn +<<<<<<< HEAD インクリメント/デクリメントは変数に対してのみ適用可能です。 それを `5++` のように値に対して使おうとするとエラーになります。 ``` @@ -343,6 +624,23 @@ alert( n ); // 16 (最初に右辺が評価されるので n *= 8　と同じ 違いを明確にしましょう。ご存知の通り、すべての演算子は値を返します。インクリメント/デクリメントも例外ではありません。前置式は新しい値を返す一方、後置式は古い値を返します(インクリメント/デクリメントの前)。 違いを例で見てみましょう。 +======= +Increment/decrement can only be applied to variables. Trying to use it on a value like `5++` will give an error. +``` + +The operators `++` and `--` can be placed either before or after a variable. + +- When the operator goes after the variable, it is in "postfix form": `counter++`. +- The "prefix form" is when the operator goes before the variable: `++counter`. + +Both of these statements do the same thing: increase `counter` by `1`. + +Is there any difference? Yes, but we can only see it if we use the returned value of `++/--`. + +Let's clarify. As we know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement). + +To see the difference, here's an example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let counter = 1; @@ -351,6 +649,7 @@ let a = ++counter; // (*) alert(a); // *!*2*/!* ``` +<<<<<<< HEAD ここで `(*)` の行の前置呼び出し `++counter` は `counter` を増加させ、`2` という新しい値を返します。そのため、 `alert` は `2` を表示します。 後置式を使いましょう: @@ -358,45 +657,80 @@ alert(a); // *!*2*/!* ```js run let counter = 1; let a = counter++; // (*) ++counter を counter++ に変更 +======= +In the line `(*)`, the *prefix* form `++counter` increments `counter` and returns the new value, `2`. So, the `alert` shows `2`. + +Now, let's use the postfix form: + +```js run +let counter = 1; +let a = counter++; // (*) changed ++counter to counter++ +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert(a); // *!*1*/!* ``` +<<<<<<< HEAD `(*)` の行で、 *後置* 式 `counter++` は `counter` を増加させますが、 *古い* 値を返します(増加する前)。そのため、 `alert` は `1` を表示します。 要約すると: - インクリメント/デクリメントの結果を使わない場合、どちらの形式を使っても違いはありません。: +======= +In the line `(*)`, the *postfix* form `counter++` also increments `counter` but returns the *old* value (prior to increment). So, the `alert` shows `1`. + +To summarize: + +- If the result of increment/decrement is not used, there is no difference in which form to use: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let counter = 0; counter++; ++counter; +<<<<<<< HEAD alert( counter ); // 2, 上の行は同じことをします ``` - 値の増加に *加えて*、すぐに演算子の結果を使いたい場合は前置式が必要になります: +======= + alert( counter ); // 2, the lines above did the same + ``` +- If we'd like to increase a value *and* immediately use the result of the operator, we need the prefix form: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let counter = 0; alert( ++counter ); // 1 ``` +<<<<<<< HEAD - 増加させるが、以前の値を使いたい場合は後置式が必要です: +======= +- If we'd like to increment a value but use its previous value, we need the postfix form: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let counter = 0; alert( counter++ ); // 0 ``` +<<<<<<< HEAD ````smart header="他の演算子の中でのインクリメント/デクリメント" 演算子 `++/--` は同様に式の中でも使うことができます。それらの優先順位は他の算術演算子よりも高いです。 例: +======= +````smart header="Increment/decrement among other operators" +The operators `++/--` can be used inside expressions as well. Their precedence is higher than most other arithmetical operations. + +For instance: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let counter = 1; alert( 2 * ++counter ); // 4 ``` +<<<<<<< HEAD 比較: ```js run @@ -409,6 +743,20 @@ alert( 2 * counter++ ); // 2, counter++ は "古い" 値を返すからです コードを読むとき、上から読んでいく "縦の" 目視はこのような `counter++` を見逃しやすく、また変数の増加が明白ではありません。 "1行は1アクション" のスタイルが推奨されます: +======= +Compare with: + +```js run +let counter = 1; +alert( 2 * counter++ ); // 2, because counter++ returns the "old" value +``` + +Though technically okay, such notation usually makes code less readable. One line does multiple things -- not good. + +While reading code, a fast "vertical" eye-scan can easily miss something like `counter++` and it won't be obvious that the variable increased. + +We advise a style of "one line -- one action": +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let counter = 1; @@ -417,6 +765,7 @@ counter++; ``` ```` +<<<<<<< HEAD ## ビット演算子 ビット演算子は引数を 32ビットの整数値として扱い、それらのバイナリ表現のレベルで処理します。 @@ -424,6 +773,15 @@ counter++; これらの演算子はJavaScript固有のものではありません。多くのプログラミング言語でサポートされています。 演算子のリスト: +======= +## Bitwise operators + +Bitwise operators treat arguments as 32-bit integer numbers and work on the level of their binary representation. + +These operators are not JavaScript-specific. They are supported in most programming languages. + +The list of operators: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d - AND ( `&` ) - OR ( `|` ) @@ -433,6 +791,7 @@ counter++; - RIGHT SHIFT ( `>>` ) - ZERO-FILL RIGHT SHIFT ( `>>>` ) +<<<<<<< HEAD これらの演算子はめったに使われません。それらを理解するためには、低レベルの数値表現について掘り下げるべきであり、それは現時点では最適ではないでしょう。すぐには必要ないからです。もし興味がある場合は、MDNの[ビット演算子 ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators#binary_bitwise_operators)の記事を参照してください。実際に必要になったときにそれをするのが現実的でしょう。 ## カンマ @@ -442,12 +801,24 @@ counter++; カンマ演算子を使うと複数の式を評価できます。それらの式はカンマ `','` で区切られています。それぞれが評価されますが、最後の結果のみが返却されます。 例: +======= +These operators are used very rarely, when we need to fiddle with numbers on the very lowest (bitwise) level. We won't need these operators any time soon, as web development has little use of them, but in some special areas, such as cryptography, they are useful. You can read the [Bitwise Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) chapter on MDN when a need arises. + +## Comma + +The comma operator `,` is one of the rarest and most unusual operators. Sometimes, it's used to write shorter code, so we need to know it in order to understand what's going on. + +The comma operator allows us to evaluate several expressions, dividing them with a comma `,`. Each of them is evaluated but only the result of the last one is returned. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run *!* let a = (1 + 2, 3 + 4); */!* +<<<<<<< HEAD alert( a ); // 7 (3 + 4 の結果) ``` @@ -467,9 +838,34 @@ alert( a ); // 7 (3 + 4 の結果) ```js // 1行に3つの演算子 +======= +alert( a ); // 7 (the result of 3 + 4) +``` + +Here, the first expression `1 + 2` is evaluated and its result is thrown away. Then, `3 + 4` is evaluated and returned as the result. + +```smart header="Comma has a very low precedence" +Please note that the comma operator has very low precedence, lower than `=`, so parentheses are important in the example above. + +Without them: `a = 1 + 2, 3 + 4` evaluates `+` first, summing the numbers into `a = 3, 7`, then the assignment operator `=` assigns `a = 3`, and the rest is ignored. It's like `(a = 1 + 2), 3 + 4`. +``` + +Why do we need an operator that throws away everything except the last expression? + +Sometimes, people use it in more complex constructs to put several actions in one line. + +For example: + +```js +// three operations in one line +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d for (*!*a = 1, b = 3, c = a * b*/!*; a < 10; a++) { ... } ``` +<<<<<<< HEAD このようなトリックは多くのJavaScriptフレームワークで利用されているため、ここで言及しています。しかし通常それらはコードの可読性を下げます。なので、そのように書く前によく考えるべきです。 +======= +Such tricks are used in many JavaScript frameworks. That's why we're mentioning them. But usually they don't improve code readability so we should think well before using them. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md index de42c992a0..f96fb76947 100644 --- a/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md +++ b/1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md @@ -10,6 +10,7 @@ null == "\n0\n" → false null === +"\n0\n" → false ``` +<<<<<<< HEAD 理由: 1. 明らかに true ですね。 @@ -19,3 +20,14 @@ null === +"\n0\n" → false 5. 厳密等価は厳密です。両側が異なる型だと false になります。 6. (4) をみてください。 7. 異なる型の厳密等価です。 +======= +Some of the reasons: + +1. Obviously, true. +2. Dictionary comparison, hence false. `"a"` is smaller than `"p"`. +3. Again, dictionary comparison, first char `"2"` is greater than the first char `"1"`. +4. Values `null` and `undefined` equal each other only. +5. Strict equality is strict. Different types from both sides lead to false. +6. Similar to `(4)`, `null` only equals `undefined`. +7. Strict equality of different types. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md b/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md index c1153f6323..2b31778385 100644 --- a/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md +++ b/1-js/02-first-steps/09-comparison/1-comparison-questions/task.md @@ -4,7 +4,11 @@ importance: 5 # 比較 +<<<<<<< HEAD:1-js/02-first-steps/09-comparison/1-comparison-questions/task.md 式の結果はどうなるでしょう？ +======= +What will be the result for these expressions? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d:1-js/02-first-steps/09-comparison/1-comparison-questions/task.md ```js no-beautify 5 > 4 diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md index 7d73111424..7bc5f91d2f 100644 --- a/1-js/02-first-steps/09-comparison/article.md +++ b/1-js/02-first-steps/09-comparison/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # 比較 私たちは数学にある多くの比較演算子を知っています。: @@ -42,6 +43,52 @@ alert( result ); // true 言い換えると、文字列は文字単位で比較されます。 例: +======= +# Comparisons + +We know many comparison operators from maths. + +In JavaScript they are written like this: + +- Greater/less than: a > b, a < b. +- Greater/less than or equals: a >= b, a <= b. +- Equals: `a == b`, please note the double equality sign `==` means the equality test, while a single one `a = b` means an assignment. +- Not equals: In maths the notation is ≠, but in JavaScript it's written as a != b. + +In this article we'll learn more about different types of comparisons, how JavaScript makes them, including important peculiarities. + +At the end you'll find a good recipe to avoid "JavaScript quirks"-related issues. + +## Boolean is the result + +All comparison operators return a boolean value: + +- `true` -- means "yes", "correct" or "the truth". +- `false` -- means "no", "wrong" or "not the truth". + +For example: + +```js run +alert( 2 > 1 ); // true (correct) +alert( 2 == 1 ); // false (wrong) +alert( 2 != 1 ); // true (correct) +``` + +A comparison result can be assigned to a variable, just like any value: + +```js run +let result = 5 > 4; // assign the result of the comparison +alert( result ); // true +``` + +## String comparison + +To see whether a string is greater than another, JavaScript uses the so-called "dictionary" or "lexicographical" order. + +In other words, strings are compared letter-by-letter. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( 'Z' > 'A' ); // true @@ -49,6 +96,7 @@ alert( 'Glow' > 'Glee' ); // true alert( 'Bee' > 'Be' ); // true ``` +<<<<<<< HEAD 2つの文字列を比較するアルゴリズムはシンプルです: 1. 両方の文字列の最初の文字を比較します。 @@ -85,12 +133,51 @@ alert( '01' == 1 ); // true, 文字列 '01' は数値 1 になります 真偽値の場合、`true` は `1` になり、 `false` は `0` になります。: 例: +======= +The algorithm to compare two strings is simple: + +1. Compare the first character of both strings. +2. If the first character from the first string is greater (or less) than the other string's, then the first string is greater (or less) than the second. We're done. +3. Otherwise, if both strings' first characters are the same, compare the second characters the same way. +4. Repeat until the end of either string. +5. If both strings end at the same length, then they are equal. Otherwise, the longer string is greater. + +In the first example above, the comparison `'Z' > 'A'` gets to a result at the first step. + +The second comparison `'Glow'` and `'Glee'` needs more steps as strings are compared character-by-character: + +1. `G` is the same as `G`. +2. `l` is the same as `l`. +3. `o` is greater than `e`. Stop here. The first string is greater. + +```smart header="Not a real dictionary, but Unicode order" +The comparison algorithm given above is roughly equivalent to the one used in dictionaries or phone books, but it's not exactly the same. + +For instance, case matters. A capital letter `"A"` is not equal to the lowercase `"a"`. Which one is greater? The lowercase `"a"`. Why? Because the lowercase character has a greater index in the internal encoding table JavaScript uses (Unicode). We'll get back to specific details and consequences of this in the chapter . +``` + +## Comparison of different types + +When comparing values of different types, JavaScript converts the values to numbers. + +For example: + +```js run +alert( '2' > 1 ); // true, string '2' becomes a number 2 +alert( '01' == 1 ); // true, string '01' becomes a number 1 +``` + +For boolean values, `true` becomes `1` and `false` becomes `0`. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( true == 1 ); // true alert( false == 0 ); // true ``` +<<<<<<< HEAD ````smart header="興味深い結果" 次の2つが同時に発生する場合があります: @@ -98,6 +185,15 @@ alert( false == 0 ); // true - それらの一方は真偽値の `true` で、もう一方は真偽値の `false` 例: +======= +````smart header="A funny consequence" +It is possible that at the same time: + +- Two values are equal. +- One of them is `true` as a boolean and the other one is `false` as a boolean. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let a = 0; @@ -109,23 +205,37 @@ alert( Boolean(b) ); // true alert(a == b); // true! ``` +<<<<<<< HEAD JavaScriptの立場からすると、それは普通です。等価チェックは数値変換を使って変換をします(したがって、`"0"` は `0` になります)。一方、 明示的な `Boolean` 変換は別のルールセットを利用します。 ```` ## 厳密な等価 通常の等価チェック `"=="` は問題を持っています。`0` と `false` を異なるものと判断させることはできません: +======= +From JavaScript's standpoint, this result is quite normal. An equality check converts values using the numeric conversion (hence `"0"` becomes `0`), while the explicit `Boolean` conversion uses another set of rules. +```` + +## Strict equality + +A regular equality check `==` has a problem. It cannot differentiate `0` from `false`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( 0 == false ); // true ``` +<<<<<<< HEAD 空文字列でも同じです: +======= +The same thing happens with an empty string: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( '' == false ); // true ``` +<<<<<<< HEAD これは、異なる型のオペランドは等価演算子 `==` によって数値に変換されるためです。空文字は、ちょうど `false` のように 0 になります。 もしも `0` と `false` を分けたい場合、どうすべきでしょうか？ @@ -150,18 +260,50 @@ alert( 0 === false ); // false, 型が異なるためです 厳密な等価チェック `===` の場合 : それぞれが自身の別々の型に所属しているため、これらの値は異なります。 +======= +This happens because operands of different types are converted to numbers by the equality operator `==`. An empty string, just like `false`, becomes a zero. + +What to do if we'd like to differentiate `0` from `false`? + +**A strict equality operator `===` checks the equality without type conversion.** + +In other words, if `a` and `b` are of different types, then `a === b` immediately returns `false` without an attempt to convert them. + +Let's try it: + +```js run +alert( 0 === false ); // false, because the types are different +``` + +There is also a "strict non-equality" operator `!==` analogous to `!=`. + +The strict equality operator is a bit longer to write, but makes it obvious what's going on and leaves less room for errors. + +## Comparison with null and undefined + +There's a non-intuitive behavior when `null` or `undefined` are compared to other values. + +For a strict equality check `===` +: These values are different, because each of them is a different type. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( null === undefined ); // false ``` +<<<<<<< HEAD 非厳密なチェック `==` の場合 : 特別なルールがあります。この2つは "スイートカップル" と呼ばれ、(`==` の意味で)等しくなりますが、これら以外の値とは等しいと扱われることはありません。 +======= +For a non-strict check `==` +: There's a special rule. These two are a "sweet couple": they equal each other (in the sense of `==`), but not any other value. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( null == undefined ); // true ``` +<<<<<<< HEAD 数学や他の比較 `< > <= >=` : 値 `null/undefined` は数値に変換されます: `null` は `0` になり、`undefined` は `NaN` (Not a Number)になります。 @@ -170,6 +312,16 @@ alert( 0 === false ); // false, 型が異なるためです ### 奇妙な結果: null vs 0 `null` とゼロを比較してみましょう: +======= +For maths and other comparisons `< > <= >=` +: `null/undefined` are converted to numbers: `null` becomes `0`, while `undefined` becomes `NaN`. + +Now let's see some funny things that happen when we apply these rules. And, what's more important, how to not fall into a trap with them. + +### Strange result: null vs 0 + +Let's compare `null` with a zero: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( null > 0 ); // (1) false @@ -177,6 +329,7 @@ alert( null == 0 ); // (2) false alert( null >= 0 ); // (3) *!*true*/!* ``` +<<<<<<< HEAD 上の3つの例は数学的には奇妙です。最後の結果は "`null` はゼロより大きいまたは等しい" ことを述べています。そうであれば上2つの比較のどちらかは正しくなければいけませんが、両方とも false です。 その理由は等価チェック `==` と比較 `> < >= <=` は異なった処理するためです。比較は `null` を数値に変換します、したがって `0` として扱います。そういう訳で (3) `null >= 0` は true で、 (1) は false になります。 @@ -186,6 +339,17 @@ alert( null >= 0 ); // (3) *!*true*/!* ### 比べるものがない undefined 値 `undefined` は比較に関与しません。: +======= +Mathematically, that's strange. The last result states that "`null` is greater than or equal to zero", so in one of the comparisons above it must be `true`, but they are both false. + +The reason is that an equality check `==` and comparisons `> < >= <=` work differently. Comparisons convert `null` to a number, treating it as `0`. That's why (3) `null >= 0` is true and (1) `null > 0` is false. + +On the other hand, the equality check `==` for `undefined` and `null` is defined such that, without any conversions, they equal each other and don't equal anything else. That's why (2) `null == 0` is false. + +### An incomparable undefined + +The value `undefined` shouldn't be compared to other values: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( undefined > 0 ); // false (1) @@ -193,6 +357,7 @@ alert( undefined < 0 ); // false (2) alert( undefined == 0 ); // false (3) ``` +<<<<<<< HEAD なぜそこまでゼロが嫌いなのでしょう？常に false です! このような結果になった理由は次の通りです: @@ -214,3 +379,26 @@ alert( undefined == 0 ); // false (3) - 異なった型の値が比較される場合、それらは数値に変換されます(厳密な等価チェックを除く) - 値 `null` と `undefined` はそれぞれ等価 `==` であり、それ以外の値とは等価ではありません。 - `>` または `<` のような比較を、`null/undefined` になる可能性のある変数に対して使う場合は注意してください。`null/undefined` を別々にチェックするのが良いアイデアです。 +======= +Why does it dislike zero so much? Always false! + +We get these results because: + +- Comparisons `(1)` and `(2)` return `false` because `undefined` gets converted to `NaN` and `NaN` is a special numeric value which returns `false` for all comparisons. +- The equality check `(3)` returns `false` because `undefined` only equals `null`, `undefined`, and no other value. + +### Avoid problems + +Why did we go over these examples? Should we remember these peculiarities all the time? Well, not really. Actually, these tricky things will gradually become familiar over time, but there's a solid way to avoid problems with them: + +- Treat any comparison with `undefined/null` except the strict equality `===` with exceptional care. +- Don't use comparisons `>= > < <=` with a variable which may be `null/undefined`, unless you're really sure of what you're doing. If a variable can have these values, check for them separately. + +## Summary + +- Comparison operators return a boolean value. +- Strings are compared letter-by-letter in the "dictionary" order. +- When values of different types are compared, they get converted to numbers (with the exclusion of a strict equality check). +- The values `null` and `undefined` equal `==` each other and do not equal any other value. +- Be careful when using comparisons like `>` or `<` with variables that can occasionally be `null/undefined`. Checking for `null/undefined` separately is a good idea. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md index 401a857ae5..f6f1b75131 100644 --- a/1-js/02-first-steps/10-ifelse/2-check-standard/task.md +++ b/1-js/02-first-steps/10-ifelse/2-check-standard/task.md @@ -6,7 +6,11 @@ importance: 2 `if..else` 構造を使って、次の内容を尋ねるコードを書いてください: 'JavaScriptの "公式な" 名前は何ですか？' +<<<<<<< HEAD もし、訪問者が "ECMAScript" と入力したら、 "Right!" を出力し、それ以外は -- "Didn't know? ECMAScript!" と出力します。 +======= +If the visitor enters "ECMAScript", then output "Right!", otherwise -- output: "You don't know? ECMAScript!" +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ![](ifelse_task2.svg) diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md index 638ce81f13..ff32354fae 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md @@ -1,6 +1,6 @@ ```js -result = (a + b < 4) ? 'Below' : 'Over'; +let result = (a + b < 4) ? 'Below' : 'Over'; ``` diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md index b13126f949..5c6db42148 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md @@ -4,9 +4,15 @@ importance: 5 # 'if' を '?' で書き直しましょう +<<<<<<< HEAD 三項演算子 `'?'` を使って、この `if` を書き直してください。: +======= +Rewrite this `if` using the conditional operator `'?'`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js +let result; + if (a + b < 4) { result = 'Below'; } else { diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md index b58c8ff7ea..134cfb935c 100644 --- a/1-js/02-first-steps/10-ifelse/article.md +++ b/1-js/02-first-steps/10-ifelse/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # 条件分岐: if, '?' 時には、条件に基づき異なるアクションを実行する必要があります。 @@ -5,10 +6,23 @@ そのための `if` 文と、 "疑問符" 演算子とも呼ばれる条件付き演算子(3項演算子) `"?"` があります。 ## "if" 文 +======= +# Conditional branching: if, '?' + +Sometimes, we need to perform different actions based on different conditions. + +To do that, we can use the `if` statement and the conditional operator `?`, that's also called a "question mark" operator. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d "if" 文は与えられた条件を評価します。結果が `true` であればコードを実行します。 +<<<<<<< HEAD 例: +======= +The `if(...)` statement evaluates a condition in parentheses and, if the result is `true`, executes a block of code. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let year = prompt('In which year was ECMAScript-2015 specification published?', ''); @@ -18,9 +32,15 @@ if (year == 2015) alert( 'You are right!' ); */!* ``` +<<<<<<< HEAD 上の例は、シンプルな等価チェック(`year == 2015`)ですが、より複雑にすることもできます。 実行する文が複数ある場合、コードブロックを波括弧で囲む必要があります。: +======= +In the example above, the condition is a simple equality check (`year == 2015`), but it can be much more complex. + +If we want to execute more than one statement, we have to wrap our code block inside curly braces: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js if (year == 2015) { @@ -29,16 +49,29 @@ if (year == 2015) { } ``` +<<<<<<< HEAD たとえ1つの文しかない場合でも `if` を使用するときは波括弧 `{}` でコードブロックを囲むことを推奨します。これは可読性を向上させます。 +======= +We recommend wrapping your code block with curly braces `{}` every time you use an `if` statement, even if there is only one statement to execute. Doing so improves readability. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## Boolean 変換 +<<<<<<< HEAD `if (…)` 文は括弧の中の式を評価し、Boolean型に変換します。 +======= +The `if (…)` statement evaluates the expression in its parentheses and converts the result to a boolean. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d チャプター の変換ルールを思い出してみましょう: +<<<<<<< HEAD - 数値 `0`, 空文字 `""`, `null`, `undefined` そして `NaN` は `false` になります。そのため、これらは "偽とみなされる" 値とよばれています。 - 他の値は `true` になるため、"真とみなされる" 値と呼ばれます。 +======= +- A number `0`, an empty string `""`, `null`, `undefined`, and `NaN` all become `false`. Because of that they are called "falsy" values. +- Other values become `true`, so they are called "truthy". +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d さて、下のコードですがこの条件は決して実行されません: @@ -48,7 +81,11 @@ if (0) { // 0 は偽 } ``` +<<<<<<< HEAD また、この条件は -- 常に処理されます: +======= +...and inside this condition -- it always will: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js if (1) { // 1 は真 @@ -56,7 +93,11 @@ if (1) { // 1 は真 } ``` +<<<<<<< HEAD 次のように事前評価されたBool値を `if` に通すこともできます: +======= +We can also pass a pre-evaluated boolean value to `if`, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let cond = (year == 2015); // == は true または false を評価する @@ -68,11 +109,15 @@ if (cond) { ## "else" 句 +<<<<<<< HEAD `if` 文は任意の "else" ブロックを持つ場合があり、それは条件が偽の場合に実行されます。 +======= +The `if` statement may contain an optional `else` block. It executes when the condition is falsy. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: ```js run -let year = prompt('In which year was ECMAScript-2015 specification published?', ''); +let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); if (year == 2015) { alert( 'You guessed it right!' ); @@ -83,12 +128,16 @@ if (year == 2015) { ## いくつかの条件: "else if" +<<<<<<< HEAD いくつかの条件のパターンをテストしたい時があります。そのために `else if` 句があります。 +======= +Sometimes, we'd like to test several variants of a condition. The `else if` clause lets us do that. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: ```js run -let year = prompt('In which year was ECMAScript-2015 specification published?', ''); +let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); if (year < 2015) { alert( 'Too early...' ); @@ -99,6 +148,7 @@ if (year < 2015) { } ``` +<<<<<<< HEAD 上のコードで、JavaScriptは最初に `year < 2015` をチェックします。それが偽の場合、次の条件 `year > 2015` の判定を行います。それもまた偽の場合、最後の `alert` を表示します。 複数の `else if` ブロックを持つことができます。最後の `else` は任意です。 @@ -106,6 +156,15 @@ if (year < 2015) { ## 3項演算子 '?' 条件に依存して変数へ代入を行う必要がある場合があります。 +======= +In the code above, JavaScript first checks `year < 2015`. If that is falsy, it goes to the next condition `year > 2015`. If that is also falsy, it shows the last `alert`. + +There can be more `else if` blocks. The final `else` is optional. + +## Conditional operator '?' + +Sometimes, we need to assign a variable depending on a condition. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: @@ -124,16 +183,26 @@ if (age > 18) { alert(accessAllowed); ``` +<<<<<<< HEAD いわゆる、"条件付き" もしくは "疑問符" 演算子では、より短く簡単に行うことができます。 演算子は疑問符 `"?"` で表されます。演算子が3つのオペランドを持つことから、 "三項演算子" と呼ばれることもあります。これは、JavaScriptの中で3つのオペランドを持つ唯一の演算子です。 +======= +The so-called "conditional" or "question mark" operator lets us do that in a shorter and simpler way. + +The operator is represented by a question mark `?`. Sometimes it's called "ternary", because the operator has three operands. It is actually the one and only operator in JavaScript which has that many. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 構文は次の通りです: ```js -let result = condition ? value1 : value2 +let result = condition ? value1 : value2; ``` +<<<<<<< HEAD `condition` は評価され、もしも真であれば、`value1` が返却され、そうでなければ -- `value2` になります。 +======= +The `condition` is evaluated: if it's truthy then `value1` is returned, otherwise -- `value2`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: @@ -141,9 +210,15 @@ let result = condition ? value1 : value2 let accessAllowed = (age > 18) ? true : false; ``` +<<<<<<< HEAD 技術的には、`age > 18` の周りの括弧を省くことができます。疑問符演算子は低い優先順位を持っているので、比較 `>` の後に実行されます。 以下の例は上の例と同じように動作します: +======= +Technically, we can omit the parentheses around `age > 18`. The question mark operator has a low precedence, so it executes after the comparison `>`. + +This example will do the same thing as the previous one: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 比較演算子 "age > 18" が最初に実行されます @@ -151,10 +226,17 @@ let accessAllowed = (age > 18) ? true : false; let accessAllowed = age > 18 ? true : false; ``` +<<<<<<< HEAD しかし、括弧はコードの可読性をより良くします。そのため、括弧を使うことが推奨されます。 ````smart 上の例では、比較自体が `true/false` を返すため、疑問符演算子を回避することが可能です。 +======= +But parentheses make the code more readable, so we recommend using them. + +````smart +In the example above, you can avoid using the question mark operator because the comparison itself returns `true/false`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // the same @@ -164,7 +246,11 @@ let accessAllowed = age > 18; ## 複数の '?' +<<<<<<< HEAD 連続する疑問符 `"?"` 演算子は1つ以上の条件に依存した値を返すことができます。 +======= +A sequence of question mark operators `?` can return a value that depends on more than one condition. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: ```js run @@ -178,6 +264,7 @@ let message = (age < 3) ? 'Hi, baby!' : alert( message ); ``` +<<<<<<< HEAD 最初、それが何をしているのか掴むのが難しいかもしれません。しかしよく見るとそれがただの通常の一連のテストであることがわかります。 1. 最初の疑問符は `age < 3` かどうかチェックします。 @@ -186,11 +273,21 @@ alert( message ); 4. それが真であれば -- `'Greetings!'` を返します。そうでなければ -- コロン `":"` の後に行き、`What an unusual age` を返します。 `if..else` を使った同じロジックです: +======= +It may be difficult at first to grasp what's going on. But after a closer look, we can see that it's just an ordinary sequence of tests: + +1. The first question mark checks whether `age < 3`. +2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon ":", checking `age < 18`. +3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon ":", checking `age < 100`. +4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon ":", returning `'What an unusual age!'`. + +Here's how this looks using `if..else`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js if (age < 3) { message = 'Hi, baby!'; -} else if (a < 18) { +} else if (age < 18) { message = 'Hello!'; } else if (age < 100) { message = 'Greetings!'; @@ -201,7 +298,11 @@ if (age < 3) { ## 非伝統的な '?' の使用 +<<<<<<< HEAD 時々、疑問符 `'?'` は `if` の置換として使われます: +======= +Sometimes the question mark `?` is used as a replacement for `if`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify let company = prompt('Which company created JavaScript?', ''); @@ -212,6 +313,7 @@ let company = prompt('Which company created JavaScript?', ''); */!* ``` +<<<<<<< HEAD 条件 `company == 'Netscape'` に応じて、`"?"` の後の1つ目もしくは2つ目の部分が実行されアラートが表示されます。 ここでは変数に結果を代入していません。このアイデアは条件に応じて異なるコードを実行させるものです。 @@ -221,6 +323,17 @@ let company = prompt('Which company created JavaScript?', ''); 表記は `if` よりも短いように見え、一部のプログラマには魅力的です。しかしそれは読みにくいです。 比較として `if` を使った同じコードです: +======= +Depending on the condition `company == 'Netscape'`, either the first or the second expression after the `?` gets executed and shows an alert. + +We don't assign a result to a variable here. Instead, we execute different code depending on the condition. + +**It's not recommended to use the question mark operator in this way.** + +The notation is shorter than the equivalent `if` statement, which appeals to some programmers. But it is less readable. + +Here is the same code using `if` for comparison: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify let company = prompt('Which company created JavaScript?', ''); @@ -234,6 +347,12 @@ if (company == 'Netscape') { */!* ``` +<<<<<<< HEAD 私たちの目はコードを縦に見ていきます。複数行にまたがる構造は、長い水平な命令セットよりも理解しやすいです。 疑問符 `'?'` の目的は、条件によって別の値を返すことです。まさにそのために使ってください。異なるコードの枝葉を実行するために `if` があります。 +======= +Our eyes scan the code vertically. Code blocks which span several lines are easier to understand than a long, horizontal instruction set. + +The purpose of the question mark operator `?` is to return one value or another depending on its condition. Please use it for exactly that. Use `if` when you need to execute different branches of code. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md index fdba6dbd82..9cf56c800f 100644 --- a/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md +++ b/1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md @@ -4,7 +4,11 @@ importance: 5 # OR の結果はなんでしょう? +<<<<<<< HEAD 下のコードは何を出力するでしょう？ +======= +What is the code below going to output? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js alert( null || 2 || undefined ); diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md index 9f45e4b68d..81383b2f5e 100644 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md +++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md @@ -6,8 +6,14 @@ alert( alert(1) || 2 || alert(3) ); `alert` の呼び出しは値を返しません。また、言い換えると、 `undefined` を返します。 +<<<<<<< HEAD 1. 最初の OR `||` はその左のオペランド `alert(1)` を検査します。それは `1` の最初のメッセージを表示します。 2. `alert` は `undefined` を返すので、OR は真値を探すのに2つ目のオペランドに行きます。 3. 2つ目のペランド `2` は真値なので、実行が中止され `2` が返却されます。次に外部の alert でそれが表示されます。 +======= +1. The first OR `||` evaluates its left operand `alert(1)`. That shows the first message with `1`. +2. The `alert` returns `undefined`, so OR goes on to the second operand searching for a truthy value. +3. The second operand `2` is truthy, so the execution is halted, `2` is returned and then shown by the outer alert. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 検査は `alert(3)` に到達しないので、 `3` は現れません。 diff --git a/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md b/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md index d47e8079b1..948c80a07b 100644 --- a/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md +++ b/1-js/02-first-steps/11-logical-operators/2-alert-or/task.md @@ -4,7 +4,11 @@ importance: 3 # OR されたアラートの結果は何ですか？ +<<<<<<< HEAD 下のコードは何を出力するでしょう？ +======= +What will the code below output? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js alert( alert(1) || 2 || alert(3) ); diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md index f727d5f9b2..8e620271e9 100644 --- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md +++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md @@ -1,5 +1,5 @@ 答え: `null` です。なぜなら、それがリストの中の最初の偽値だからです。 ```js run -alert( 1 && null && 2 ); +alert(1 && null && 2); ``` diff --git a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md index 94b47c7b0a..bb7eaebc23 100644 --- a/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md +++ b/1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md @@ -4,7 +4,11 @@ importance: 5 # AND の結果は何? +<<<<<<< HEAD このコードは何を表示するでしょう？ +======= +What is this code going to show? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js alert( 1 && null && 2 ); diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md index 8261b19498..2d7e44ae42 100644 --- a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md +++ b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md @@ -12,4 +12,9 @@ AND `&&` の優先順位は `||` よりも高いので、最初に実行され null || 3 || 4 ``` +<<<<<<< HEAD これの最初の真値の結果なので、`3` です。 +======= +Now the result is the first truthy value: `3`. + +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md index 0193df66a8..657ad099b2 100644 --- a/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md +++ b/1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md @@ -4,7 +4,11 @@ importance: 5 # OR AND OR の結果 +<<<<<<< HEAD 結果はどうなるでしょう？ +======= +What will the result be? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js alert( null || 2 && 3 || 4 ); diff --git a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md index a9f245041f..47cf80ec93 100644 --- a/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md +++ b/1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md @@ -4,6 +4,10 @@ importance: 3 # 範囲内のチェック +<<<<<<< HEAD 包括的に `age` が `14` と `90` の間かをチェックする `if` 条件を書きなさい。 +======= +Write an `if` condition to check that `age` is between `14` and `90` inclusively. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d "包括的に" は `age` が `14` または `90` の端に到達できることを意味します。 diff --git a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md index 60000109d6..bf91cc97f4 100644 --- a/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md +++ b/1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md @@ -4,6 +4,10 @@ importance: 3 # 範囲外のチェック +<<<<<<< HEAD 包括的に `age` が 14 と 90 間ではないことをチェックするための `if` 条件を書きなさい。 +======= +Write an `if` condition to check that `age` is NOT between `14` and `90` inclusively. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 2つのバリアントを作ってください: 最初は NOT `!` を使い、2つ目は -- それなしです。 diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/task.md b/1-js/02-first-steps/11-logical-operators/8-if-question/task.md index d92b499b0e..e541031836 100644 --- a/1-js/02-first-steps/11-logical-operators/8-if-question/task.md +++ b/1-js/02-first-steps/11-logical-operators/8-if-question/task.md @@ -6,7 +6,11 @@ importance: 5 これらの `alert` で実行されるのはどれでしょう？ +<<<<<<< HEAD `if(...)` の内側の式の結果はどうなるでしょう？ +======= +What will the results of the expressions be inside `if(...)`? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js if (-1 || 0) alert( 'first' ); diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md index b46558f985..604606259f 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/solution.md @@ -22,4 +22,4 @@ if (userName === 'Admin') { } ``` -`if` ブロック内の縦のインデントに注意してください。技術的には必須ではありませんが、コードの可読性をより良くします。 +Note the vertical indents inside the `if` blocks. They are technically not required, but make the code more readable. diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md index bcedacb062..290a52642f 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/task.md +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/task.md @@ -2,23 +2,24 @@ importance: 3 --- -# ログインのチェック +# Check the login -`prompt` でログインを要求するコードを書いてください。 +Write the code which asks for a login with `prompt`. -もし訪問者が `"Admin"` と入力したら、パスワードのための `prompt` を出します。もし入力が空行または `key:Esc` の場合 -- "Canceled" と表示します。別の文字列の場合は -- "I don't know you" と表示します。 +If the visitor enters `"Admin"`, then `prompt` for a password, if the input is an empty line or `key:Esc` -- show "Canceled", if it's another string -- then show "I don't know you". -パスワードは次に沿ってチェックされます: +The password is checked as follows: -- ”TheMaster" と等しい場合には "Welcome!" と表示します。 -- 別の文字列の場合 -- "Wrong password" を表示します。 -- 空文字または入力がキャンセルされた場合には "Canceled." と表示します。 +- If it equals "TheMaster", then show "Welcome!", +- Another string -- show "Wrong password", +- For an empty string or cancelled input, show "Canceled" - -図: +The schema: ![](ifelse_task.svg) -入れ子の `if` ブロックを使ってください。コードの全体的な読みやすさに気をつけてください。 +Please use nested `if` blocks. Mind the overall readability of the code. + +Hint: passing an empty input to a prompt returns an empty string `''`. Pressing `key:ESC` during a prompt returns `null`. [demo] diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md index e4841fd332..b61cac59c8 100644 --- a/1-js/02-first-steps/11-logical-operators/article.md +++ b/1-js/02-first-steps/11-logical-operators/article.md @@ -1,22 +1,40 @@ # 論理演算子 +<<<<<<< HEAD JavaScriptには4つの論理演算子があります: `||` (OR:論理和), `&&` (AND:論理積), `!` (NOT:否定), `??` (Null合体)。ここでは最初の３つを説明し、`??` 演算子は次の記事で説明します。 これらは "論理" と呼ばれますが、Boolean 型だけでなく、どの型の値にも適用することができます。結果もまた任意の型になります。 +======= +There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), `??` (Nullish Coalescing). Here we cover the first three, the `??` operator is in the next article. + +Although they are called "logical", they can be applied to values of any type, not only boolean. Their result can also be of any type. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d では、詳細を見ていきましょう。 +<<<<<<< HEAD ## || (OR) "OR" 演算子は2つの縦の記号で表現されます: +======= +## || (OR) + +The "OR" operator is represented with two vertical line symbols: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js result = a || b; ``` +<<<<<<< HEAD 古典的なプログラミングでは、論理和は真偽値のみを操作することを意味していました。もしもその引数のいずれかが `true` の場合、それは `true` を返します。そうでなければ `false` を返します。 JavaScriptでは、演算子は少し難解ですが強力です。最初に真偽値で起こることを見てみましょう。 +======= +In classical programming, the logical OR is meant to manipulate boolean values only. If any of its arguments are `true`, it returns `true`, otherwise it returns `false`. + +In JavaScript, the operator is a little bit trickier and more powerful. But first, let's see what happens with boolean values. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 4つの取りうる論理的な組み合わせがあります: @@ -29,9 +47,15 @@ alert( false || false ); // false ご覧の通り、両方のオペランドが `false` の場合を除き、結果は常に `true` です。 +<<<<<<< HEAD もしもオペランドが Boolean でない場合、評価のために Boolean に変換されます。 例えば、数値 `1` は `true` として扱われ、数値 `0` は `false` となります: +======= +If an operand is not a boolean, it's converted to a boolean for the evaluation. + +For instance, the number `1` is treated as `true`, the number `0` as `false`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run if (1 || 0) { // if( true || false ) のように動作します @@ -39,7 +63,11 @@ if (1 || 0) { // if( true || false ) のように動作します } ``` +<<<<<<< HEAD ほとんどの場合、OR `||` は `if` 文の中で、与えられた条件のいずれかが正しいかを確認するのに使われます。 +======= +Most of the time, OR `||` is used in an `if` statement to test if *any* of the given conditions is `true`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: @@ -64,9 +92,15 @@ if (hour < 10 || hour > 18 || isWeekend) { } ``` +<<<<<<< HEAD ## OR は最初の真値を探します 上で描かれたロジックはいくらか古典的です。ここで JavaScriptの特別な機能を持ってきましょう。 +======= +## OR "||" finds the first truthy value [#or-finds-the-first-truthy-value] + +The logic described above is somewhat classical. Now, let's bring in the "extra" features of JavaScript. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 拡張されたアルゴリズムは次の通りに動作します。 @@ -76,19 +110,32 @@ if (hour < 10 || hour > 18 || isWeekend) { result = value1 || value2 || value3; ``` +<<<<<<< HEAD OR `"||"` 演算子は次のように動きます: - 左から右にオペランドを評価します。 - それぞれのオペランドで、それを Boolean に変換します。もしも結果が `true` であれば、停止しオペランドの本来の値を返します。 - もしもすべての他のオペランドが評価された場合(i.e. すべて `偽` のとき), 最後のオペランドを返します。 +======= +The OR `||` operator does the following: + +- Evaluates operands from left to right. +- For each operand, converts it to boolean. If the result is `true`, stops and returns the original value of that operand. +- If all operands have been evaluated (i.e. all were `false`), returns the last operand. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 値は変換されていない元の形式で返却されます。 +<<<<<<< HEAD つまり、OR `"||"` のチェーンは最初に真となる値を返し、そのような値がない場合には最後のオペランドが返却されます。 +======= +In other words, a chain of OR `||` returns the first truthy value or the last one if no truthy value is found. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: ```js run +<<<<<<< HEAD alert( 1 || 0 ); // 1 (1 は真) alert( null || 1 ); // 1 (1 は最初の真値) @@ -104,6 +151,23 @@ alert( undefined || null || 0 ); // 0 (すべて偽、なので最後の値が 例えば、`firstName`, `lastName` と `nickName` 変数があり、すべて任意( undefined あるいは偽となる値になりうる)とします。 データを持っているものを選び、表示する(あるいは何も設定されていな場合は `"Anonymous"`)のに、OR `||` が利用できます: +======= +alert( 1 || 0 ); // 1 (1 is truthy) + +alert( null || 1 ); // 1 (1 is the first truthy value) +alert( null || 0 || 1 ); // 1 (the first truthy value) + +alert( undefined || null || 0 ); // 0 (all falsy, returns the last value) +``` + +This leads to some interesting usage compared to a "pure, classical, boolean-only OR". + +1. **Getting the first truthy value from a list of variables or expressions.** + + For instance, we have `firstName`, `lastName` and `nickName` variables, all optional (i.e. can be undefined or have falsy values). + + Let's use OR `||` to choose the one that has the data and show it (or `"Anonymous"` if nothing set): +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let firstName = ""; @@ -115,6 +179,7 @@ alert( undefined || null || 0 ); // 0 (すべて偽、なので最後の値が */!* ``` +<<<<<<< HEAD すべての変数が偽であれば、`"Anonymous"` が表示されます。 2. **短絡評価(最小評価)** @@ -126,15 +191,34 @@ alert( undefined || null || 0 ); // 0 (すべて偽、なので最後の値が この機能の重要性は、オペランドが単なる値ではなく、変数の割当や関数呼び出しなどの副作用のある式である場合に明らかになります。 以下の例を実行した場合、２つ目のメッセージだけが表示されます: +======= + If all variables were falsy, `"Anonymous"` would show up. + +2. **Short-circuit evaluation.** + + Another feature of OR `||` operator is the so-called "short-circuit" evaluation. + + It means that `||` processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument. + + The importance of this feature becomes obvious if an operand isn't just a value, but an expression with a side effect, such as a variable assignment or a function call. + + In the example below, only the second message is printed: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify *!*true*/!* || alert("not printed"); *!*false*/!* || alert("printed"); ``` +<<<<<<< HEAD １行目では、OR `||` 演算子が `true` を見るとすぐに評価を停止するため、`alert` は実行されません。 条件の左側が false のときにだけコマンドを実行するためにこの特徴を利用する人もいます。 +======= + In the first line, the OR `||` operator stops the evaluation immediately upon seeing `true`, so the `alert` isn't run. + + Sometimes, people use this feature to execute commands only if the condition on the left part is falsy. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## && (AND) @@ -144,7 +228,11 @@ AND 演算子は2つのアンパサンド `&&` で表されます: result = a && b; ``` +<<<<<<< HEAD 古典的なプログラミングでは、AND は両方のオペランドが真のときに `true` を返します。それ以外の場合は `false` です: +======= +In classical programming, AND returns `true` if both operands are truthy and `false` otherwise: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert( true && true ); // true @@ -160,11 +248,15 @@ let hour = 12; let minute = 30; if (hour == 12 && minute == 30) { - alert( 'Time is 12:30' ); + alert( 'The time is 12:30' ); } ``` +<<<<<<< HEAD OR のように、AND のオペランドとして任意の値が許可されています: +======= +Just as with OR, any value is allowed as an operand of AND: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run if (1 && 0) { // true && false として評価される @@ -173,7 +265,11 @@ if (1 && 0) { // true && false として評価される ``` +<<<<<<< HEAD ## AND は最初の偽値を探します +======= +## AND "&&" finds the first falsy value +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 複数のANDされた値が与えられました: @@ -181,11 +277,19 @@ if (1 && 0) { // true && false として評価される result = value1 && value2 && value3; ``` +<<<<<<< HEAD AND `"&&"` 演算子は次のように動きます: - 左から右にオペランドを評価します。 - それぞれのオペランドで、それを Boolean に変換します。もしも結果が `false` の場合、ストップしそのオペランドの本来の値を返します。 - もしもすべての他のオペランドが評価された場合(i.e. すべて `真` のとき), 最後のオペランドを返します。 +======= +The AND `&&` operator does the following: + +- Evaluates operands from left to right. +- For each operand, converts it to a boolean. If the result is `false`, stops and returns the original value of that operand. +- If all operands have been evaluated (i.e. all were truthy), returns the last operand. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d つまり、ANDは最初の偽値、またはない場合には最後の値を返します。 @@ -217,6 +321,7 @@ alert( 1 && 2 && null && 3 ); // null alert( 1 && 2 && 3 ); // 3, 最後のオペランド ``` +<<<<<<< HEAD ````smart header="AND `&&` は OR `||` の前に実行します" AND `&&` 演算子の優先順位は OR `||` よりも高いです。 @@ -225,6 +330,16 @@ AND `&&` 演算子の優先順位は OR `||` よりも高いです。 ````warn header="`if` を `||` や `&&` に置き換えないでください" 時々、AND `&&` 演算子を "`if`を短く書く方法" として利用する人がいます。 +======= +````smart header="Precedence of AND `&&` is higher than OR `||`" +The precedence of AND `&&` operator is higher than OR `||`. + +So the code `a && b || c && d` is essentially the same as if the `&&` expressions were in parentheses: `(a && b) || (c && d)`. +```` + +````warn header="Don't replace `if` with `||` or `&&`" +Sometimes, people use the AND `&&` operator as a "shorter way to write `if`". +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: @@ -234,7 +349,11 @@ let x = 1; (x > 0) && alert( 'Greater than zero!' ); ``` +<<<<<<< HEAD `&&` の右側のアクションは、その評価に到達した場合にのみ実行されます。つまり: `(x > 0)` が true の場合のみです。 +======= +The action in the right part of `&&` would execute only if the evaluation reaches it. That is, only if `(x > 0)` is true. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d なので、基本的に同じことをする別の方法があります: @@ -244,13 +363,21 @@ let x = 1; if (x > 0) alert( 'Greater than zero!' ); ``` +<<<<<<< HEAD `&&` を含むやり方は、より短いように見えますが、`if` はより明白で、読みやすい傾向にあります。そのため、すべての構文をその目的に合わせて使うことを推奨します。条件判定が必要なら `if` を、論理積が必要なら `&&` を使います。 +======= +Although, the variant with `&&` appears shorter, `if` is more obvious and tends to be a little bit more readable. So we recommend using every construct for its purpose: use `if` if we want `if` and use `&&` if we want AND. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```` ## ! (NOT) +<<<<<<< HEAD 真偽値否定演算子は感嘆符 `"!"` で表現されます。 +======= +The boolean NOT operator is represented with an exclamation sign `!`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 構文はとてもシンプルです: @@ -260,8 +387,13 @@ result = !value; 演算子は1つの引数を取り、次のようにします: +<<<<<<< HEAD 1. オペランドを真偽値型に変換します: `true/false`。 2. 逆の値を返します。 +======= +1. Converts the operand to boolean type: `true/false`. +2. Returns the inverse value. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: @@ -277,7 +409,11 @@ alert( !!"non-empty string" ); // true alert( !!null ); // false ``` +<<<<<<< HEAD つまり、最初の NOT は値を真偽値に変換しその逆を返します。そして、2つ目の NOT は再びその逆をします。最終的に、明示的な値からブール値への変換を行います。 +======= +That is, the first NOT converts the value to boolean and returns the inverse, and the second NOT inverses it again. In the end, we have a plain value-to-boolean conversion. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 少し冗長ですが同じことをする方法があります -- 組み込みの `Boolean` 関数です。: @@ -286,4 +422,8 @@ alert( Boolean("non-empty string") ); // true alert( Boolean(null) ); // false ``` +<<<<<<< HEAD NOT `!` の優先順はすべての論理演算子でもっとも高いので、`&&` や `||` よりも常に最初に実行されます。 +======= +The precedence of NOT `!` is the highest of all logical operators, so it always executes first, before `&&` or `||`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md index fe1db3bfc9..a63c7c05c5 100644 --- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md +++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # NULL合体演算子(Nullish coalescing operator) '??' [recent browser="new"] @@ -15,28 +16,63 @@ NULL合体演算子は２つの疑問符 `??` で記述されます。 NULL合体演算子はまったく新しいものではありません。2つのうちから、最初の "定義済み" の値を取得するには良い構文です。 既に知っている演算子を使用して `result = a ?? b` を書き直すことができます: +======= +# Nullish coalescing operator '??' + +[recent browser="new"] + +The nullish coalescing operator is written as two question marks `??`. + +As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. For brevity, we'll say that a value is "defined" when it's neither `null` nor `undefined`. + +The result of `a ?? b` is: +- if `a` is defined, then `a`, +- if `a` isn't defined, then `b`. + +In other words, `??` returns the first argument if it's not `null/undefined`. Otherwise, the second one. + +The nullish coalescing operator isn't anything completely new. It's just a nice syntax to get the first "defined" value of the two. + +We can rewrite `result = a ?? b` using the operators that we already know, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js result = (a !== null && a !== undefined) ? a : b; ``` +<<<<<<< HEAD これで、`??` がすることがなにか明確ですね。これがどこで役立つが見ていきましょう。 `??` の一般的なユースケースは、潜在的に未定義の変数のデフォルト値を提供することです。 例えば、ここでは定義済みであれば `user` を、そうでなければ `Anonymous` を表示します: +======= +Now it should be absolutely clear what `??` does. Let's see where it helps. + +The common use case for `??` is to provide a default value. + +For example, here we show `user` if its value isn't `null/undefined`, otherwise `Anonymous`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let user; +<<<<<<< HEAD alert(user ?? "Anonymous"); // Anonymous (user は未定義) ``` こちらは名前が割り当てられた `user` の例です: +======= +alert(user ?? "Anonymous"); // Anonymous (user is undefined) +``` + +Here's the example with `user` assigned to a name: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let user = "John"; +<<<<<<< HEAD alert(user ?? "Anonymous"); // John (user は定義済み) ``` @@ -47,35 +83,64 @@ alert(user ?? "Anonymous"); // John (user は定義済み) これらの変数の1つを使用してユーザ名を表示、あるいはすべて未定義の場合には "Anonymous" と表示したいです。 そのために `??` 演算子を使用しましょう: +======= +alert(user ?? "Anonymous"); // John (user is not null/undefined) +``` + +We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`. + +Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to fill in the corresponding values. + +We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are `null/undefined`. + +Let's use the `??` operator for that: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let firstName = null; let lastName = null; let nickName = "Supercoder"; +<<<<<<< HEAD // 最初の null/undefined でない値を表示します +======= +// shows the first defined value: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d *!* alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder */!* ``` +<<<<<<< HEAD ## || との比較 [前のチャプター](info:logical-operators#or-finds-the-first-truthy-value) で説明したように、OR `||` 演算子は `??` と同じ方法で利用することができます。 例えば、上のコードで `??` を `||` に置き換えることができ、同じ結果を得ることができます: +======= +## Comparison with || + +The OR `||` operator can be used in the same way as `??`, as it was described in the [previous chapter](info:logical-operators#or-finds-the-first-truthy-value). + +For example, in the code above we could replace `??` with `||` and still get the same result: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let firstName = null; let lastName = null; let nickName = "Supercoder"; +<<<<<<< HEAD // 最初の真値を表示 +======= +// shows the first truthy value: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d *!* alert(firstName || lastName || nickName || "Anonymous"); // Supercoder */!* ``` +<<<<<<< HEAD 歴史的には、OR `||` 演算子が最初にありました。JavaScript の登場以来存在しているため、開発者は長い間そのような目的で使用していました。 一方、NULL合体演算子 `??` が JavaScript に追加されたのは最近のことで、その理由は人々が `||` にあまり満足していなかったためです。 @@ -89,6 +154,21 @@ alert(firstName || lastName || nickName || "Anonymous"); // Supercoder ただし、実際には、変数が `null/undefined` の場合にのみデフォルト値を使用したい場合があります。つまり、値が本当に未知/設定されていない場合です。 例として次を考えましょう: +======= +Historically, the OR `||` operator was there first. It's been there since the beginning of JavaScript, so developers were using it for such purposes for a long time. + +On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`. + +The important difference between them is that: +- `||` returns the first *truthy* value. +- `??` returns the first *defined* value. + +In other words, `||` doesn't distinguish between `false`, `0`, an empty string `""` and `null/undefined`. They are all the same -- falsy values. If any of these is the first argument of `||`, then we'll get the second argument as the result. + +In practice though, we may want to use default value only when the variable is `null/undefined`. That is, when the value is really unknown/not set. + +For example, consider this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let height = 0; @@ -97,6 +177,7 @@ alert(height || 100); // 100 alert(height ?? 100); // 0 ``` +<<<<<<< HEAD - `height || 100` は `height` が偽値になるかをチェックし、それは `0` であり偽です。 - なので、`||` の結果は2つ目の引数である `100` です。 - `height ?? 100` は `height` が `null/undefined` かをチェックしますが、そうではありません。 @@ -111,17 +192,38 @@ alert(height ?? 100); // 0 つまり、`||` と同様に NULL合体演算子 `??` は `=` と `?` の前に評価されますが、`+` や `*` などの他のほとんどの演算子の後に評価されます。 したがって、他の演算子を含む式で `??` で値を選択したい場合は、括弧を追加することを検討してください: +======= +- The `height || 100` checks `height` for being a falsy value, and it's `0`, falsy indeed. + - so the result of `||` is the second argument, `100`. +- The `height ?? 100` checks `height` for being `null/undefined`, and it's not, + - so the result is `height` "as is", that is `0`. + +In practice, the zero height is often a valid value, that shouldn't be replaced with the default. So `??` does just the right thing. + +## Precedence + +The precedence of the `??` operator is the same as `||`. They both equal `3` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table). + +That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`. + +So we may need to add parentheses in expressions like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let height = null; let width = null; +<<<<<<< HEAD // 重要: 括弧を使用します +======= +// important: use parentheses +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d let area = (height ?? 100) * (width ?? 50); alert(area); // 5000 ``` +<<<<<<< HEAD そうでない場合、括弧を省略すると `*` は `??` よりも優先度が高いため、最初に実行され、正しくない結果になるでしょう。 ```js @@ -137,11 +239,29 @@ let area = height ?? (100 * width) ?? 50; 安全上の理由により、JavaScript は優先順位が括弧で明示的に指定されていない限り、`&&` や `||` 演算子と一緒に `??` を用いることを禁止しています。 次のコードは構文エラーになります: +======= +Otherwise, if we omit parentheses, then as `*` has the higher precedence than `??`, it would execute first, leading to incorrect results. + +```js +// without parentheses +let area = height ?? 100 * width ?? 50; + +// ...works this way (not what we want): +let area = height ?? (100 * width) ?? 50; +``` + +### Using ?? with && or || + +Due to safety reasons, JavaScript forbids using `??` together with `&&` and `||` operators, unless the precedence is explicitly specified with parentheses. + +The code below triggers a syntax error: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let x = 1 && 2 ?? 3; // Syntax error ``` +<<<<<<< HEAD この制限には当然議論の余地がありますが、人々が `||` から `??` に切り替え始めるときに、プログラミングのミスを避ける目的で言語仕様に追加されました。 回避するには明示的に括弧を使用します: @@ -149,11 +269,21 @@ let x = 1 && 2 ?? 3; // Syntax error ```js run *!* let x = (1 && 2) ?? 3; // 動作します +======= +The limitation is surely debatable, it was added to the language specification with the purpose to avoid programming mistakes, when people start to switch from `||` to `??`. + +Use explicit parentheses to work around it: + +```js run +*!* +let x = (1 && 2) ?? 3; // Works +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d */!* alert(x); // 2 ``` +<<<<<<< HEAD ## サマリ - Null合体演算子 `??` は一覧から "定義済み" の値を選択するための簡単な方法を提供します。 @@ -167,3 +297,18 @@ alert(x); // 2 - 演算子 `??` は優先度が低く、`?` や `=` よりも少し高い程度です。そのため、式の中で使用する際には括弧を追加することを検討してください。 - 明示的な括弧なしに `||` や `&&` と一緒に利用することは禁止されています。 +======= +## Summary + +- The nullish coalescing operator `??` provides a short way to choose the first "defined" value from a list. + + It's used to assign default values to variables: + + ```js + // set height=100, if height is null or undefined + height = height ?? 100; + ``` + +- The operator `??` has a very low precedence, only a bit higher than `?` and `=`, so consider adding parentheses when using it in an expression. +- It's forbidden to use it with `||` or `&&` without explicit parentheses. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md index c6bda96ffd..43ee4aad3d 100644 --- a/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md +++ b/1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md @@ -1,4 +1,4 @@ -答え: `1`. +The answer: `1`. ```js run let i = 3; @@ -8,18 +8,18 @@ while (i) { } ``` -各ループイテレーションは `i` を `1` 減らします。チェック `while(i)` は `i = 0` のときにループを停止します。 +Every loop iteration decreases `i` by `1`. The check `while(i)` stops the loop when `i = 0`. -従って、ループのステップは次のシーケンスを形成します。: +Hence, the steps of the loop form the following sequence ("loop unrolled"): ```js let i = 3; -alert(i--); // 3 を表示, i を 2 に減らす +alert(i--); // shows 3, decreases i to 2 -alert(i--) // 2 を表示, i を 1 に減らす +alert(i--) // shows 2, decreases i to 1 -alert(i--) // 1 を表示, i を 0 に減らす +alert(i--) // shows 1, decreases i to 0 -// 完了。while(i)チェックでループが停止します。 +// done, while(i) check stops the loop ``` diff --git a/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md index 4792b925bb..3b847dfa2d 100644 --- a/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md +++ b/1-js/02-first-steps/13-while-for/1-loop-last-value/task.md @@ -2,9 +2,9 @@ importance: 3 --- -# 最後のループ値 +# Last loop value -このコードで最後にアラートされる値は何でしょう？それはなぜでしょう？ +What is the last value alerted by this code? Why? ```js let i = 3; diff --git a/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md b/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md index a1f3a01dcc..3ff74618e9 100644 --- a/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md +++ b/1-js/02-first-steps/13-while-for/2-which-value-while/solution.md @@ -1,24 +1,40 @@ +<<<<<<< HEAD このタスクは、ポストフィックス/サフィックス形式を比較で使ったときに、どのように異なる結果に繋がるかを示します。 1. **1 から 4** +======= +The task demonstrates how postfix/prefix forms can lead to different results when used in comparisons. + +1. **From 1 to 4** +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let i = 0; while (++i < 5) alert( i ); ``` +<<<<<<< HEAD 最初の値は `i=1` です。なぜなら、`i++` は最初に `i` をインクリメントし、新しい値を返します。なので、最初の比較は `1 < 5` で、`alert` は `1` を表示します。 次に、`2,3,4…` に続きます -- 値は次々に表示されます。比較は常にインクリメントされた値を使います。なぜなら `++` は変数の前にあるからです。 最終的に、`i=4` では `5` にインクリメントされ、比較 `while(5 < 5)` が偽になりループが停止します。なので、`5` は表示されません。 2. **1 から 5** +======= + The first value is `i = 1`, because `++i` first increments `i` and then returns the new value. So the first comparison is `1 < 5` and the `alert` shows `1`. + + Then follow `2, 3, 4…` -- the values show up one after another. The comparison always uses the incremented value, because `++` is before the variable. + + Finally, `i = 4` is incremented to `5`, the comparison `while(5 < 5)` fails, and the loop stops. So `5` is not shown. +2. **From 1 to 5** +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let i = 0; while (i++ < 5) alert( i ); ``` +<<<<<<< HEAD 最初の値は再び `i=1` です。`i++` のポストフィックス形式は `i` をインクリメントし、*古い* 値を返します。なので、比較 `i++ < 5` は `i=0` を使います (`++i < 5` とは逆です)。 しかし、`alert` 呼び出しは別です。インクリメントと比較の後に実行される別の文なので、現在の `i=1` を使います。 @@ -29,3 +45,14 @@ 値 `i=5` は最後です。なぜなら次のステップ `while(5 < 5)` は偽になるからです。 +======= + The first value is again `i = 1`. The postfix form of `i++` increments `i` and then returns the *old* value, so the comparison `i++ < 5` will use `i = 0` (contrary to `++i < 5`). + + But the `alert` call is separate. It's another statement which executes after the increment and the comparison. So it gets the current `i = 1`. + + Then follow `2, 3, 4…` + + Let's stop on `i = 4`. The prefix form `++i` would increment it and use `5` in the comparison. But here we have the postfix form `i++`. So it increments `i` to `5`, but returns the old value. Hence the comparison is actually `while(4 < 5)` -- true, and the control goes on to `alert`. + + The value `i = 5` is the last one, because on the next step `while(5 < 5)` is false. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/13-while-for/2-which-value-while/task.md b/1-js/02-first-steps/13-while-for/2-which-value-while/task.md index 4acb7805c4..298213237b 100644 --- a/1-js/02-first-steps/13-while-for/2-which-value-while/task.md +++ b/1-js/02-first-steps/13-while-for/2-which-value-while/task.md @@ -2,19 +2,19 @@ importance: 4 --- -# while でどの値が表示される？ +# Which values does the while loop show? -各ループで、どの値が表示されるか、あなたの意見を書きなさい。また、それと答えを見比べてみてください。 +For every loop iteration, write down which value it outputs and then compare it with the solution. -両方のループは同じ数だけ `alert` されますか？それとも違いますか？ +Both loops `alert` the same values, or not? -1. プレフィックス形式 `++i`: +1. The prefix form `++i`: ```js let i = 0; while (++i < 5) alert( i ); ``` -2. ポストフィックス形式 `i++` +2. The postfix form `i++` ```js let i = 0; diff --git a/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md b/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md index 90ef539d2f..e2e28e75b4 100644 --- a/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md +++ b/1-js/02-first-steps/13-while-for/3-which-value-for/solution.md @@ -1,4 +1,4 @@ -**答え: どちらも場合も `0` から `4` です** +**The answer: from `0` to `4` in both cases.** ```js run for (let i = 0; i < 5; ++i) alert( i ); @@ -6,12 +6,12 @@ for (let i = 0; i < 5; ++i) alert( i ); for (let i = 0; i < 5; i++) alert( i ); ``` -これは `for` のアルゴリズムから簡単に差し引くことができます: +That can be easily deducted from the algorithm of `for`: -1. すべての前(最初)に `i = 0` を一度実行します。 -2. 条件 `i < 5` をチェックします。 -3. もし `true` なら -- ループ本体 `alert(i)` を実行し、`i++` します。 +1. Execute once `i = 0` before everything (begin). +2. Check the condition `i < 5` +3. If `true` -- execute the loop body `alert(i)`, and then `i++` -インクリメント `i++` は条件チェック (2) とは分離されています。それは単に別の文です。 +The increment `i++` is separated from the condition check (2). That's just another statement. -インクリメントによって返された値はここでは使われていません。なので、 `i++` と `++i` の間に違いはありません。 +The value returned by the increment is not used here, so there's no difference between `i++` and `++i`. diff --git a/1-js/02-first-steps/13-while-for/3-which-value-for/task.md b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md index df6d7a6f5b..bfefa63f53 100644 --- a/1-js/02-first-steps/13-while-for/3-which-value-for/task.md +++ b/1-js/02-first-steps/13-while-for/3-which-value-for/task.md @@ -2,18 +2,18 @@ importance: 4 --- -# どの値が "for" ループによって表示されますか？ +# Which values get shown by the "for" loop? -各ループでどの値が表示されるか書き留めてください。そして答えと比較してください。 +For each loop write down which values it is going to show. Then compare with the answer. -両ループ同じ値を `alert` しますか？それとも違いますか？ +Both loops `alert` same values or not? -1. ポストフィックス形式: +1. The postfix form: ```js for (let i = 0; i < 5; i++) alert( i ); ``` -2. プレフィックス形式: +2. The prefix form: ```js for (let i = 0; i < 5; ++i) alert( i ); diff --git a/1-js/02-first-steps/13-while-for/4-for-even/solution.md b/1-js/02-first-steps/13-while-for/4-for-even/solution.md index 3650508ef5..e8e66bb47c 100644 --- a/1-js/02-first-steps/13-while-for/4-for-even/solution.md +++ b/1-js/02-first-steps/13-while-for/4-for-even/solution.md @@ -8,4 +8,4 @@ for (let i = 2; i <= 10; i++) { } ``` -ここでは、残りを取得するための "剰余" 演算子 `%` を使って偶数のチェックをしています。 +We use the "modulo" operator `%` to get the remainder and check for the evenness here. diff --git a/1-js/02-first-steps/13-while-for/4-for-even/task.md b/1-js/02-first-steps/13-while-for/4-for-even/task.md index b66becb112..ff34e7e40f 100644 --- a/1-js/02-first-steps/13-while-for/4-for-even/task.md +++ b/1-js/02-first-steps/13-while-for/4-for-even/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# ループで偶数を出力する +# Output even numbers in the loop -`for` ループを使って `2` から `10` までの偶数を出力してください。 +Use the `for` loop to output even numbers from `2` to `10`. [demo] diff --git a/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md b/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md index 47dc27b3f2..0c69d9c2d5 100644 --- a/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md +++ b/1-js/02-first-steps/13-while-for/5-replace-for-while/task.md @@ -2,12 +2,13 @@ importance: 5 --- -# "for" を "while" で置き換える +# Replace "for" with "while" -その振る舞いを変えず(出力は同じまま)に、`for` ループから `while` にコードを書き換えてください。 +Rewrite the code changing the `for` loop to `while` without altering its behavior (the output should stay same). ```js run for (let i = 0; i < 3; i++) { alert( `number ${i}!` ); } ``` + diff --git a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md index a3b82c3051..c7de5f09b0 100644 --- a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md +++ b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md @@ -7,9 +7,9 @@ do { } while (num <= 100 && num); ``` -ループ `do..while` は両方のチェックが真になるまで繰り返します。: +The loop `do..while` repeats while both checks are truthy: -1. `num <= 100` のチェック -- つまり、入力値がまだ `100` よりも大きくない。 -2. `&& num` チェックは、`num` が `null` または空文字の場合に false です。そのとき、`while` ループも停止します。 +1. The check for `num <= 100` -- that is, the entered value is still not greater than `100`. +2. The check `&& num` is false when `num` is `null` or an empty string. Then the `while` loop stops too. -P.S. `num`が `null` の場合、`num <= 100` は `true` なので、2回目のチェックがなければ、ユーザーがCANCELをクリックするとループは止まらなくなります。 両方のチェックが必要です。 +P.S. If `num` is `null` then `num <= 100` is `true`, so without the 2nd check the loop wouldn't stop if the user clicks CANCEL. Both checks are required. diff --git a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md index 94e8841649..0788ee76e4 100644 --- a/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md +++ b/1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# 正しい値が入力されるまで繰り返す +# Repeat until the input is correct -`100` より大きい数値を入力するプロンプトを書いてください。もし訪問者が別の数値を入力したら -- 再度、入力を促します。 +Write a loop which prompts for a number greater than `100`. If the visitor enters another number -- ask them to input again. -ループは、訪問者が `100` より大きい値を入力するか、入力をキャンセル/空行の入力をするまで訪ねます。 +The loop must ask for a number until either the visitor enters a number greater than `100` or cancels the input/enters an empty line. -ここでは、訪問者は数値のみを入力すると仮定します。このタスクでは、非数値に対する特別な処理を実装する必要はありません。 +Here we can assume that the visitor only inputs numbers. There's no need to implement a special handling for a non-numeric input in this task. [demo] diff --git a/1-js/02-first-steps/13-while-for/7-list-primes/solution.md b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md index 985de98382..b4b64b6faa 100644 --- a/1-js/02-first-steps/13-while-for/7-list-primes/solution.md +++ b/1-js/02-first-steps/13-while-for/7-list-primes/solution.md @@ -1,6 +1,6 @@ -このタスクを解決するのに、多くのアルゴリズムがあります。 +There are many algorithms for this task. -入れ子ループを使ってみましょう: +Let's use a nested loop: ```js For each i in the interval { @@ -10,7 +10,7 @@ For each i in the interval { } ``` -ラベルを使ったコードです。: +The code using a label: ```js run let n = 10; @@ -26,4 +26,4 @@ for (let i = 2; i <= n; i++) { // for each i... } ``` -ここには最適化の余地が沢山あります。例えば、`2` から `i` の平方根までの約数を探すことができます。しかし、とにかく、私たちが大きな間隔に対して効率的になりたいなら、アプローチを変更し、高度な数学と[Quadratic sieve](https://en.wikipedia.org/wiki/Quadratic_sieve), [General number field sieve](https://en.wikipedia.org/wiki/General_number_field_sieve)などの複雑なアルゴリズムに頼る必要があります。 +There's a lot of space to optimize it. For instance, we could look for the divisors from `2` to square root of `i`. But anyway, if we want to be really efficient for large intervals, we need to change the approach and rely on advanced maths and complex algorithms like [Quadratic sieve](https://en.wikipedia.org/wiki/Quadratic_sieve), [General number field sieve](https://en.wikipedia.org/wiki/General_number_field_sieve) etc. diff --git a/1-js/02-first-steps/13-while-for/7-list-primes/task.md b/1-js/02-first-steps/13-while-for/7-list-primes/task.md index cccb621837..6344b9f6f8 100644 --- a/1-js/02-first-steps/13-while-for/7-list-primes/task.md +++ b/1-js/02-first-steps/13-while-for/7-list-primes/task.md @@ -2,16 +2,16 @@ importance: 3 --- -# 素数の出力 +# Output prime numbers -`1` よりも大きい整数で、`1` と自身以外では、余りなく割ることができない場合、その数値は [素数(prime)](https://ja.wikipedia.org/wiki/%E7%B4%A0%E6%95%B0) と呼ばれます。 +An integer number greater than `1` is called a [prime](https://en.wikipedia.org/wiki/Prime_number) if it cannot be divided without a remainder by anything except `1` and itself. -つまり、1より大きいnが `1` と `n` 以外では割り切れない場合、素数となります。 +In other words, `n > 1` is a prime if it can't be evenly divided by anything except `1` and `n`. -例えば、`5` は素数です。なぜなら、`2`, `3` と `4` ではあまり無く割ることができなからです。 +For example, `5` is a prime, because it cannot be divided without a remainder by `2`, `3` and `4`. -**`2` から `n` の範囲で、素数を出力するコードを書きなさい。** +**Write the code which outputs prime numbers in the interval from `2` to `n`.** -`n = 10` の場合、結果は `2,3,5,7` です。 +For `n = 10` the result will be `2,3,5,7`. -P.S. コードは任意の `n` で動作させてください。固定値でハードコードはしないでください。 +P.S. The code should work for any `n`, not be hard-tuned for any fixed value. diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md index 292f02a55d..cf4ac62449 100644 --- a/1-js/02-first-steps/13-while-for/article.md +++ b/1-js/02-first-steps/13-while-for/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # ループ: while と for 繰り返し処理は頻繁に必要になります。 @@ -22,10 +23,37 @@ ## "while" ループ `while` ループは次の構文になります: +======= +# Loops: while and for + +We often need to repeat actions. + +For example, outputting goods from a list one after another or just running the same code for each number from 1 to 10. + +*Loops* are a way to repeat the same code multiple times. + +```smart header="The for..of and for..in loops" +A small announcement for advanced readers. + +This article covers only basic loops: `while`, `do..while` and `for(..;..;..)`. + +If you came to this article searching for other types of loops, here are the pointers: + +- See [for..in](info:object#forin) to loop over object properties. +- See [for..of](info:array#loops) and [iterables](info:iterable) for looping over arrays and iterable objects. + +Otherwise, please read on. +``` + +## The "while" loop + +The `while` loop has the following syntax: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js while (condition) { // code +<<<<<<< HEAD // いわゆる "ループ本体" です } ``` @@ -37,11 +65,25 @@ while (condition) { ```js run let i = 0; while (i < 3) { // 0, 次に 1, 次に 2 を表示 +======= + // so-called "loop body" +} +``` + +While the `condition` is truthy, the `code` from the loop body is executed. + +For instance, the loop below outputs `i` while `i < 3`: + +```js run +let i = 0; +while (i < 3) { // shows 0, then 1, then 2 +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert( i ); i++; } ``` +<<<<<<< HEAD ループ本体の1回の実行は *イテレーション* と呼ばれます。上の例のループは3回イテレーションします。 もしも上の例に `i++` がない場合、ループは (理論上は) 永遠に繰り返されます。実際には、ブラウザはこのようなループを止める方法を提供しており、サーバサイドJavaScriptではそのプロセスを殺すことができます。 @@ -49,19 +91,37 @@ while (i < 3) { // 0, 次に 1, 次に 2 を表示 比較に限らず、どんな式や変数もループの条件にすることができます。条件は `while` によって評価され、真偽値に変換されます。 たとえば、`while (i != 0)` をより短く書く方法として`while (i)`があります: +======= +A single execution of the loop body is called *an iteration*. The loop in the example above makes three iterations. + +If `i++` was missing from the example above, the loop would repeat (in theory) forever. In practice, the browser provides ways to stop such loops, and in server-side JavaScript, we can kill the process. + +Any expression or variable can be a loop condition, not just comparisons: the condition is evaluated and converted to a boolean by `while`. + +For instance, a shorter way to write `while (i != 0)` is `while (i)`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let i = 3; *!* +<<<<<<< HEAD while (i) { // i が 0 になったとき、条件が偽になり、ループが止まります +======= +while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d */!* alert( i ); i--; } ``` +<<<<<<< HEAD ````smart header="本体が1行の場合、括弧は必須ではありません" ループの本体が単一の文である場合、括弧`{…}`を省略することができます: +======= +````smart header="Curly braces are not required for a single-line body" +If the loop body has a single statement, we can omit the curly braces `{…}`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let i = 3; @@ -71,9 +131,15 @@ while (i) alert(i--); ``` ```` +<<<<<<< HEAD ## "do..while" ループ `do..while` 構文を使うことで、条件チェックをループ本体の *下に* 移動させることができます。: +======= +## The "do..while" loop + +The condition check can be moved *below* the loop body using the `do..while` syntax: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js do { @@ -81,9 +147,15 @@ do { } while (condition); ``` +<<<<<<< HEAD ループは最初に本体を実行した後、条件をチェックし、条件が真である間、本体の実行を繰り返します。 例: +======= +The loop will first execute the body, then check the condition, and, while it's truthy, execute it again and again. + +For example: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let i = 0; @@ -93,6 +165,7 @@ do { } while (i < 3); ``` +<<<<<<< HEAD この構文の形式は、条件が真になるかどうかに関わらず、**少なくとも1度** はループ本体を実行したい場合にのみ使用されるべきです。通常は他の形式が好まれます: `while(…) {…}` ## "for" ループ @@ -100,6 +173,15 @@ do { `for` ループは最も使われるものの1つです。 このようになります: +======= +This form of syntax should only be used when you want the body of the loop to execute **at least once** regardless of the condition being truthy. Usually, the other form is preferred: `while(…) {…}`. + +## The "for" loop + +The `for` loop is more complex, but it's also the most commonly used loop. + +It looks like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js for (begin; condition; step) { @@ -107,14 +189,22 @@ for (begin; condition; step) { } ``` +<<<<<<< HEAD 例でこれらのパーツの意味を学びましょう。下のループは `i` が `0` から `3` になるまで(`3` は含みません)、 `alert(i)` を実行します。: ```js run for (let i = 0; i < 3; i++) { // 0, 次に 1, 次に 2 を表示 +======= +Let's learn the meaning of these parts by example. The loop below runs `alert(i)` for `i` from `0` up to (but not including) `3`: + +```js run +for (let i = 0; i < 3; i++) { // shows 0, then 1, then 2 +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert(i); } ``` +<<<<<<< HEAD `for` 文を部分的に調べてみましょう: | パート | | | @@ -139,10 +229,37 @@ begin を実行 もしループに慣れていない場合は、上の例に戻って、紙の上でステップ毎にどのように動作するかを再現してみると理解しやすいでしょう。 これが今のケースで正確に起こっていることです: +======= +Let's examine the `for` statement part-by-part: + +| part | | | +|-------|----------|----------------------------------------------------------------------------| +| begin | `let i = 0` | Executes once upon entering the loop. | +| condition | `i < 3`| Checked before every loop iteration. If false, the loop stops. | +| body | `alert(i)`| Runs again and again while the condition is truthy. | +| step| `i++` | Executes after the body on each iteration. | + +The general loop algorithm works like this: + +``` +Run begin +→ (if condition → run body and run step) +→ (if condition → run body and run step) +→ (if condition → run body and run step) +→ ... +``` + +That is, `begin` executes once, and then it iterates: after each `condition` test, `body` and `step` are executed. + +If you are new to loops, it could help to go back to the example and reproduce how it runs step-by-step on a piece of paper. + +Here's exactly what happens in our case: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // for (let i = 0; i < 3; i++) alert(i) +<<<<<<< HEAD // begin を実行 let i = 0 // if condition → body を実行し step を実行 @@ -156,19 +273,42 @@ if (i < 3) { alert(i); i++ } ````smart header="インライン変数宣言" ここで "カウンタ" 変数 `i` はループの中で正しく宣言されます。それは "インライン" 変数宣言と呼ばれます。このような変数はループの中でだけ見えます。 +======= +// run begin +let i = 0 +// if condition → run body and run step +if (i < 3) { alert(i); i++ } +// if condition → run body and run step +if (i < 3) { alert(i); i++ } +// if condition → run body and run step +if (i < 3) { alert(i); i++ } +// ...finish, because now i == 3 +``` + +````smart header="Inline variable declaration" +Here, the "counter" variable `i` is declared right in the loop. This is called an "inline" variable declaration. Such variables are visible only inside the loop. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run for (*!*let*/!* i = 0; i < 3; i++) { alert(i); // 0, 1, 2 } +<<<<<<< HEAD alert(i); // エラー, そのような変数はありません ``` 変数を宣言する代わりに、既存のものを使うこともできます: +======= +alert(i); // error, no such variable +``` + +Instead of defining a variable, we could use an existing one: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let i = 0; +<<<<<<< HEAD for (i = 0; i < 3; i++) { // 既存の変数を使用 alert(i); // 0, 1, 2 } @@ -189,11 +329,37 @@ alert(i); // 3, ループの外で宣言されているので見える let i = 0; // すでに i を宣言し代入済み for (; i < 3; i++) { // "begin" 不要 +======= +for (i = 0; i < 3; i++) { // use an existing variable + alert(i); // 0, 1, 2 +} + +alert(i); // 3, visible, because declared outside of the loop +``` +```` + +### Skipping parts + +Any part of `for` can be skipped. + +For example, we can omit `begin` if we don't need to do anything at the loop start. + +Like here: + +```js run +let i = 0; // we have i already declared and assigned + +for (; i < 3; i++) { // no need for "begin" +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert( i ); // 0, 1, 2 } ``` +<<<<<<< HEAD 同じように `step` パートも除去することができます。: +======= +We can also remove the `step` part: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let i = 0; @@ -203,6 +369,7 @@ for (; i < 3;) { } ``` +<<<<<<< HEAD ループは `while (i < 3)` と同じになりました。 実際にはすべてを除くこともできます。それは無限ループになります: @@ -224,6 +391,29 @@ for (;;) { 例えば、以下のループはユーザに一連の数字を入力するよう求めますが、数字が入力されなかった場合は "中断" します。: ```js +======= +This makes the loop identical to `while (i < 3)`. + +We can actually remove everything, creating an infinite loop: + +```js +for (;;) { + // repeats without limits +} +``` + +Please note that the two `for` semicolons `;` must be present. Otherwise, there would be a syntax error. + +## Breaking the loop + +Normally, a loop exits when its condition becomes falsy. + +But we can force the exit at any time using the special `break` directive. + +For example, the loop below asks the user for a series of numbers, "breaking" when no number is entered: + +```js run +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d let sum = 0; while (true) { @@ -240,6 +430,7 @@ while (true) { alert( 'Sum: ' + sum ); ``` +<<<<<<< HEAD もしもユーザが空を入力、もしくは入力をキャンセルした場合、`break` ディレクティブは行 `(*)` で有効になります。それはループをすぐに停止し、ループ後の最初の行へ制御を渡します。つまり、`alert` です。 "無限ループ + 必要に応じた `break`" の組み合わせは、ループの最初や最後ではなく、途中や本体の様々な場所で条件をチェックする必要がある状況で最適です。 @@ -251,10 +442,24 @@ alert( 'Sum: ' + sum ); 現在のイテレーションが完了し、次へ移動したいときに使います。 以下のループは、奇数値のみを出力するよう `continue` を使用しています: +======= +The `break` directive is activated at the line `(*)` if the user enters an empty line or cancels the input. It stops the loop immediately, passing control to the first line after the loop. Namely, `alert`. + +The combination "infinite loop + `break` as needed" is great for situations when a loop's condition must be checked not in the beginning or end of the loop, but in the middle or even in several places of its body. + +## Continue to the next iteration [#continue] + +The `continue` directive is a "lighter version" of `break`. It doesn't stop the whole loop. Instead, it stops the current iteration and forces the loop to start a new one (if the condition allows). + +We can use it if we're done with the current iteration and would like to move on to the next one. + +The loop below uses `continue` to output only odd values: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify for (let i = 0; i < 10; i++) { +<<<<<<< HEAD // true の場合、本体の残りのパートをスキップ *!*if (i % 2 == 0) continue;*/!* @@ -268,6 +473,21 @@ for (let i = 0; i < 10; i++) { 奇数値を表示するループはこのように書くこともできます: ```js +======= + // if true, skip the remaining part of the body + *!*if (i % 2 == 0) continue;*/!* + + alert(i); // 1, then 3, 5, 7, 9 +} +``` + +For even values of `i`, the `continue` directive stops executing the body and passes control to the next iteration of `for` (with the next number). So the `alert` is only called for odd values. + +````smart header="The `continue` directive helps decrease nesting" +A loop that shows odd values could look like this: + +```js run +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d for (let i = 0; i < 10; i++) { if (i % 2) { @@ -277,6 +497,7 @@ for (let i = 0; i < 10; i++) { } ``` +<<<<<<< HEAD 技術的な観点からは、これは上の例と同じです。確かに、`continue` の代わりに `if` ブロックでコードをラップするだけです。 しかし、副作用として括弧のネストが1段深くなります。`if` の中のコードが長い場合、全体の可読性が下がる可能性があります。 @@ -286,6 +507,17 @@ for (let i = 0; i < 10; i++) { 式ではない構文構造は、 三項演算子 `?` の中では使えないことに注意してください。特に、ディレクティブ `break/continue` はそこでは許可されません。 例えば、次のようなコードがあるとします: +======= +From a technical point of view, this is identical to the example above. Surely, we can just wrap the code in an `if` block instead of using `continue`. + +But as a side effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability. +```` + +````warn header="No `break/continue` to the right side of '?'" +Please note that syntax constructs that are not expressions cannot be used with the ternary operator `?`. In particular, directives such as `break/continue` aren't allowed there. + +For example, if we take this code: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js if (i > 5) { @@ -295,6 +527,7 @@ if (i > 5) { } ``` +<<<<<<< HEAD ...これを、疑問符を使って書き直します: ```js no-beautify @@ -311,6 +544,24 @@ if (i > 5) { 一度に複数のネストしたループから抜け出すことが必要となる場合があります。 例えば、下のコードでは 座標 `(i, j)` を `(0,0)` から `(2,2)` へプロンプトするよう、`i` と `j` をループします: +======= +...and rewrite it using a question mark: + +```js no-beautify +(i > 5) ? alert(i) : *!*continue*/!*; // continue isn't allowed here +``` + +...it stops working: there's a syntax error. + +This is just another reason not to use the question mark operator `?` instead of `if`. +```` + +## Labels for break/continue + +Sometimes we need to break out from multiple nested loops at once. + +For example, in the code below we loop over `i` and `j`, prompting for the coordinates `(i, j)` from `(0,0)` to `(2,2)`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify for (let i = 0; i < 3; i++) { @@ -319,18 +570,30 @@ for (let i = 0; i < 3; i++) { let input = prompt(`Value at coords (${i},${j})`, ''); +<<<<<<< HEAD // もしここで終了して下にある Done をしたい場合にはどうすればよいでしょう？ +======= + // what if we want to exit from here to Done (below)? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d } } alert('Done!'); ``` +<<<<<<< HEAD ユーザが入力をキャンセルした場合、処理をストップする方法が必要です。 `input` の後の通常の `break` は内部ループのみの終了です。それだけでは十分ではありません。ここでラベルが救いの手を差し伸べてくれます。 *ラベル* は、ループの前のコロンがついた識別子です: +======= +We need a way to stop the process if the user cancels the input. + +The ordinary `break` after `input` would only break the inner loop. That's not sufficient -- labels, come to the rescue! + +A *label* is an identifier with a colon before a loop: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js labelName: for (...) { @@ -338,7 +601,11 @@ labelName: for (...) { } ``` +<<<<<<< HEAD ループの中の `break ` 文はラベルまで抜け出します: +======= +The `break ` statement in the loop below breaks out to the label: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run no-beautify *!*outer:*/!* for (let i = 0; i < 3; i++) { @@ -347,27 +614,43 @@ labelName: for (...) { let input = prompt(`Value at coords (${i},${j})`, ''); +<<<<<<< HEAD // 文字から文字またはキャンセルされた場合、両方のループから抜ける if (!input) *!*break outer*/!*; // (*) // 値に何かをする処理... +======= + // if an empty string or canceled, then break out of both loops + if (!input) *!*break outer*/!*; // (*) + + // do something with the value... +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d } } alert('Done!'); ``` +<<<<<<< HEAD 上のコードで、`break outer` は `outer` と名付けされたラベルを上に探し、そのループを抜けます。 そのため、制御は `(*)` から `alert('Done!')` にまっすぐに進みます。 ラベルを別の行に移動させることもできます: +======= +In the code above, `break outer` looks upwards for the label named `outer` and breaks out of that loop. + +So the control goes straight from `(*)` to `alert('Done!')`. + +We can also move the label onto a separate line: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js no-beautify outer: for (let i = 0; i < 3; i++) { ... } ``` +<<<<<<< HEAD `continue` ディレクティブもラベルと一緒に使うことができます。このケースでは、実行はラベル付けされたループの次のイテレーションにジャンプします。 ````warn header="ラベルはどこにでも \"ジャンプ\" を許可するものではありません" @@ -377,11 +660,27 @@ for (let i = 0; i < 3; i++) { ... } ```js break label; // 以下のラベルにジャンプはしません +======= +The `continue` directive can also be used with a label. In this case, code execution jumps to the next iteration of the labeled loop. + +````warn header="Labels do not allow to \"jump\" anywhere" +Labels do not allow us to jump into an arbitrary place in the code. + +For example, it is impossible to do this: + +```js +break label; // jump to the label below (doesn't work) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d label: for (...) ``` +<<<<<<< HEAD `break` ディレクティブはコードブロックの中にある必要があります。技術的には任意のラベル付けされたコードブロックであれば機能します。 +======= +A `break` directive must be inside a code block. Technically, any labelled code block will do, e.g.: + +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js label: { // ... @@ -390,6 +689,7 @@ label: { } ``` +<<<<<<< HEAD ...ですが、`break` が利用される 99.9% は上の例で見てきたように、ループの内側です。 `continue` はループの内側でのみ利用可能です。 @@ -408,3 +708,23 @@ label: { もしも現在のイテレーションで何もしたくなく、次のイテレーションに進みたい場合は、`continue` ディレクティブを使います。 `break/continue` はループの前のラベルをサポートします。ラベルは、 `break/continue` でネストされたループを抜けて外側のループに行くための唯一の方法です。 +======= +...Although, 99.9% of the time `break` is used inside loops, as we've seen in the examples above. + +A `continue` is only possible from inside a loop. +```` + +## Summary + +We covered 3 types of loops: + +- `while` -- The condition is checked before each iteration. +- `do..while` -- The condition is checked after each iteration. +- `for (;;)` -- The condition is checked before each iteration, additional settings available. + +To make an "infinite" loop, usually the `while(true)` construct is used. Such a loop, just like any other, can be stopped with the `break` directive. + +If we don't want to do anything in the current iteration and would like to forward to the next one, we can use the `continue` directive. + +`break/continue` support labels before the loop. A label is the only way for `break/continue` to escape a nested loop to go to an outer one. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md index b195ae6773..d3e397434b 100644 --- a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md +++ b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md @@ -1,6 +1,6 @@ -`switch` の機能に正確にマッチさせるためには、`if` は厳密な比較 `'==='` を使わなければなりません。 +To precisely match the functionality of `switch`, the `if` must use a strict comparison `'==='`. -が、与えられた文字列に対しては、単純な `'=='` も使えます。 +For given strings though, a simple `'=='` works too. ```js no-beautify if(browser == 'Edge') { @@ -15,6 +15,6 @@ if(browser == 'Edge') { } ``` -注意してください: 構造 `browser == 'Chrome' || browser == 'Firefox' …` はより良い可読性のために複数行に分割されています。 +Please note: the construct `browser == 'Chrome' || browser == 'Firefox' …` is split into multiple lines for better readability. -しかし、`switch` 構造は以前としてより洗練されており、説明的です。 +But the `switch` construct is still cleaner and more descriptive. diff --git a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md index 014b3ab83a..ed87dd94b6 100644 --- a/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md +++ b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md @@ -1,4 +1,4 @@ -最初の2つのチェックは2つの `case` になります。3つ目のチェックは2つのケースに分割されます。: +The first two checks turn into two `case`. The third check is split into two cases: ```js run let a = +prompt('a?', ''); @@ -21,6 +21,6 @@ switch (a) { } ``` -注意してください: 末尾の `break` は必須ではありませんが、将来のためにそれを置く方がよいです。 +Please note: the `break` at the bottom is not required. But we put it to make the code future-proof. -将来、たとえば `case 4` のような `case` を追加したい機会があります。そして、以前に break を置くのを忘れていた場合、 `case 3` の終わりでエラーが発生します。なので、これは一種の自己保険です。 +In the future, there is a chance that we'd want to add one more `case`, for example `case 4`. And if we forget to add a break before it, at the end of `case 3`, there will be an error. So that's a kind of self-insurance. diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 90e485b2eb..d86babcec0 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -1,14 +1,14 @@ -# switch文 +# The "switch" statement -`switch` 文は複数の `if` チェックに置換できます。 +A `switch` statement can replace multiple `if` checks. -これは値を複数のパターンと比較するための、よりわかりやすい方法を提供します。 +It gives a more descriptive way to compare a value with multiple variants. -## 構文 +## The syntax -`switch` は1つ以上の `case` ブロックを持ち、 オプションで default を持ちます。 +The `switch` has one or more `case` blocks and an optional default. -このようになります: +It looks like this: ```js no-beautify switch(x) { @@ -26,13 +26,13 @@ switch(x) { } ``` -- `x` の値は、最初の `case` (それは `value1`)の値と厳密な等価のチェックをされます、そして2つ目(`value2`)と続きます。 -- 等価なものが見つかった場合、 `switch` は該当する `case` から始まるコードを実行し始めます。最も近い `break` まで(もしくは `switch` の終わりまで)。 -- マッチするケースが無い場合は、`default` コードが実行されます(存在する場合) +- The value of `x` is checked for a strict equality to the value from the first `case` (that is, `value1`) then to the second (`value2`) and so on. +- If the equality is found, `switch` starts to execute the code starting from the corresponding `case`, until the nearest `break` (or until the end of `switch`). +- If no case is matched then the `default` code is executed (if it exists). -## 例 +## An example -`switch` の例です(実行されるコードはハイライトされています) +An example of `switch` (the executed code is highlighted): ```js run let a = 2 + 2; @@ -47,20 +47,20 @@ switch (a) { break; */!* case 5: - alert( 'Too large' ); + alert( 'Too big' ); break; default: alert( "I don't know such values" ); } ``` -ここで、 `switch` は、最初の `case` である `3` から `a` との比較を始めます。マッチはしません。 +Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails. -そして `4` です。マッチするので、`case 4` から最も近い `break` までの実行を開始します。 +Then `4`. That's a match, so the execution starts from `case 4` until the nearest `break`. -**`break` がない場合、チェックなしで次の `case` の実行を継続します。** +**If there is no `break` then the execution continues with the next `case` without any checks.** -`break` なしの例です: +An example without `break`: ```js run let a = 2 + 2; @@ -79,7 +79,7 @@ switch (a) { } ``` -上の例では、3つの `alert` が順に実行されるでしょう。 +In the example above we'll see sequential execution of three `alert`s: ```js alert( 'Exactly!' ); @@ -87,10 +87,10 @@ alert( 'Too big' ); alert( "I don't know such values" ); ``` -````smart header="どのような式も `switch / case` の引数になります" -`switch` と `case` の両方は任意の表現が可能です。 +````smart header="Any expression can be a `switch/case` argument" +Both `switch` and `case` allow arbitrary expressions. -例: +For example: ```js run let a = "1"; @@ -107,17 +107,17 @@ switch (+a) { alert("this doesn't run"); } ``` -ここで `+a` は `1` が与えられ、 `case` で `b + 1` と比較されます。そして、対応するコードが実行されます。 +Here `+a` gives `1`, that's compared with `b + 1` in `case`, and the corresponding code is executed. ```` -## "case"のグルーピング +## Grouping of "case" -同じコードを共有する複数の `case` のパターンはグループ化できます。 +Several variants of `case` which share the same code can be grouped. -たとえば、`case 3` と `case 5` で同じコードを実行したい場合: +For example, if we want the same code to run for `case 3` and `case 5`: ```js run no-beautify -let a = 2 + 2; +let a = 3; switch (a) { case 4: @@ -125,7 +125,7 @@ switch (a) { break; *!* - case 3: // (*) 2つのケースをグループ化 + case 3: // (*) grouped two cases case 5: alert('Wrong!'); alert("Why don't you take a math class?"); @@ -137,18 +137,18 @@ switch (a) { } ``` -今、`3` と `5` は同じメッセージを表示します。 +Now both `3` and `5` show the same message. -ケースを "グループ化" する機能は、`break` がない場合の `switch/case` の動作の副作用です。ここで `case 3` の実行は、`break` がないので `(*)` の行から始まり、`case 5` を通り抜けます。 +The ability to "group" cases is a side effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`. -## 型の問題 +## Type matters -等価チェックは常に厳密であることに注目しましょう。マッチするために値は同じ型である必要があります。 +Let's emphasize that the equality check is always strict. The values must be of the same type to match. -たとえば、このコードを考えてみましょう: +For example, let's consider the code: ```js run -let arg = prompt("Enter a value?") +let arg = prompt("Enter a value?"); switch (arg) { case '0': case '1': @@ -163,10 +163,10 @@ switch (arg) { alert( 'Never executes!' ); break; default: - alert( 'An unknown value' ) + alert( 'An unknown value' ); } ``` -1. `0`, `1` の場合、最初の `alert` が実行されます。 -2. `2` の場合は2つ目の `alert` が実行されます。 -3. しかし `3` の場合、`prompt` の結果は文字列の `"3"`なので、数字の `3` との厳密な等価 `===` ではありません。そのため、`case 3` はデッドコードです! `default` ケースが実行されるでしょう。 +1. For `0`, `1`, the first `alert` runs. +2. For `2` the second `alert` runs. +3. But for `3`, the result of the `prompt` is a string `"3"`, which is not strictly equal `===` to the number `3`. So we've got a dead code in `case 3`! The `default` variant will execute. diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md index 331d318df8..daefe5dcf1 100644 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md +++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md @@ -1 +1,7 @@ +<<<<<<< HEAD 違いはありません。 +======= +No difference! + +In both cases, `return confirm('Did parents allow you?')` executes exactly when the `if` condition is falsy. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md index 142efa1896..4f69a5c8c3 100644 --- a/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md +++ b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md @@ -2,11 +2,11 @@ importance: 4 --- -# "else" は必須ですか？ +# Is "else" required? -次の関数は、パラメータ `age` が `18` より大きい場合に `true` を返します。 +The following function returns `true` if the parameter `age` is greater than `18`. -それ以外の場合には確認を行い、その結果を返します。: +Otherwise it asks for a confirmation and returns its result: ```js function checkAge(age) { @@ -21,7 +21,7 @@ function checkAge(age) { } ``` -もし `else` が削除された場合、この関数は違う動きになるでしょうか？ +Will the function work differently if `else` is removed? ```js function checkAge(age) { @@ -35,4 +35,4 @@ function checkAge(age) { } ``` -これら2つのバリアントの振る舞いで何か違いはあるでしょうか？ +Is there any difference in the behavior of these two variants? diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md index 0594570c72..e48502642a 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md @@ -1,4 +1,4 @@ -疑問符演算子 `'?'` を利用: +Using a question mark operator `'?'`: ```js function checkAge(age) { @@ -6,7 +6,7 @@ function checkAge(age) { } ``` -OR `||` を利用(最も短いバリアント): +Using OR `||` (the shortest variant): ```js function checkAge(age) { @@ -14,4 +14,4 @@ function checkAge(age) { } ``` -`age > 18` の周りの括弧はここでは必須ではないことに留意してください。より良い可読性のために存在しています。 +Note that the parentheses around `age > 18` are not required here. They exist for better readability. diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md index 156192196a..46da079c0d 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md @@ -2,26 +2,25 @@ importance: 4 --- -# '?' または '||' を使って関数を書き直す +# Rewrite the function using '?' or '||' +The following function returns `true` if the parameter `age` is greater than `18`. -次の関数は、パラメータ `age` が `18` より大きい場合に `true` を返します。 - -それ以外の場合には確認を行い、その結果を返します。: +Otherwise it asks for a confirmation and returns its result. ```js function checkAge(age) { if (age > 18) { return true; } else { - return confirm('Do you have your parents permission to access this page?'); + return confirm('Did parents allow you?'); } } ``` -それを書き直し、1行で `if` なしで同じをことを実行してください。 +Rewrite it, to perform the same, but without `if`, in a single line. -`checkAge` の2つのバリアントを作ってください。: +Make two variants of `checkAge`: -1. 疑問符演算子 `'?'` を使うケース -2. OR `||` を使うケース +1. Using a question mark operator `?` +2. Using OR `||` diff --git a/1-js/02-first-steps/15-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md index 3d2e41de5f..2236d9203f 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/solution.md +++ b/1-js/02-first-steps/15-function-basics/3-min/solution.md @@ -1,4 +1,4 @@ -`if` を使った方法: +A solution using `if`: ```js function min(a, b) { @@ -10,7 +10,7 @@ function min(a, b) { } ``` -疑問符演算子 `'?'` を使った方法: +A solution with a question mark operator `'?'`: ```js function min(a, b) { @@ -18,4 +18,4 @@ function min(a, b) { } ``` -P.S. 等しい `a == b` 場合、何を返すかは気にする必要ありません。 +P.S. In the case of an equality `a == b` it does not matter what to return. \ No newline at end of file diff --git a/1-js/02-first-steps/15-function-basics/3-min/task.md b/1-js/02-first-steps/15-function-basics/3-min/task.md index a92bad0620..50edd0d36f 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/task.md +++ b/1-js/02-first-steps/15-function-basics/3-min/task.md @@ -2,14 +2,15 @@ importance: 1 --- -# 関数 min(a, b) +# Function min(a, b) -2つの数値 `a` と `b` で小さい方を返す関数 `min(a,b)` を書きなさい。 +Write a function `min(a,b)` which returns the least of two numbers `a` and `b`. -例: +For instance: ```js min(2, 5) == 2 min(3, -1) == -1 min(1, 1) == 1 ``` + diff --git a/1-js/02-first-steps/15-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md index 79eb2b442e..19fe9011fc 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/solution.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/solution.md @@ -13,11 +13,9 @@ function pow(x, n) { let x = prompt("x?", ''); let n = prompt("n?", ''); -if (n <= 1) { - alert(`Power ${n} is not supported, - use an integer greater than 0`); +if (n < 1) { + alert(`Power ${n} is not supported, use a positive integer`); } else { alert( pow(x, n) ); } ``` - diff --git a/1-js/02-first-steps/15-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md index 651733fa70..f569320c7f 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/task.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/task.md @@ -2,19 +2,18 @@ importance: 4 --- -# 関数 pow(x,n) +# Function pow(x,n) - -`x` の累乗 `n` を返す関数 `pow(x,n)` を書いてください。 つまり、 `x` をそれ自身で `n` 回掛け、その結果を返します。 +Write a function `pow(x,n)` that returns `x` in power `n`. Or, in other words, multiplies `x` by itself `n` times and returns the result. ```js pow(3, 2) = 3 * 3 = 9 pow(3, 3) = 3 * 3 * 3 = 27 -pow(1, 100) = 1 * 1 * ...*1 = 1 +pow(1, 100) = 1 * 1 * ...* 1 = 1 ``` -`x` と `n` を聞くプロンプトをもつ web ページを作り、`pow(x,n)` の結果を表示しなさい。 +Create a web-page that prompts for `x` and `n`, and then shows the result of `pow(x,n)`. [demo] -P.S. このタスクでは、`n` に自然数のみをサポートします。 +P.S. In this task the function should support only natural values of `n`: integers up from `1`. diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index f85034e2a8..415fed3e0a 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -1,18 +1,18 @@ -# 関数 +# Functions -スクリプトの色々な場所で同じアクションを実行する必要がある場合がよくあります。 +Quite often we need to perform a similar action in many places of the script. -例えば、訪問者がログイン/ログアウトしたり、また複数の箇所で見栄の良いメッセージを表示する必要があったりします。 +For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else. -関数はプログラムのメインの "構成要素" です。これによりコードを繰り返すことなく何度も呼び出すことができます。 +Functions are the main "building blocks" of the program. They allow the code to be called many times without repetition. -私たちは既に組み込み関数の例を見ています。 `alert(message)`, `prompt(message, default)` や `confirm(question)`です。これと同じように私たち自身も関数を作ることができます。 +We've already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well. -## 関数定義 +## Function Declaration -関数を作るために、*関数定義* を使います。 +To create a function we can use a *function declaration*. -次のようになります: +It looks like this: ```js function showMessage() { @@ -20,17 +20,17 @@ function showMessage() { } ``` -`function` キーワードが最初にきて、次に *関数名* がきます、そして括弧の中に *パラメータ* のリスト(カンマ区切り、上の例では空)がきて、最後に中括弧の間に関数のコード、 "関数本体" です。 +The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above, we'll see examples later) and finally the code of the function, also named "the function body", between curly braces. ```js -function name(parameters) { - ...body... +function name(parameter1, parameter2, ... parameterN) { + // body } ``` -作成した関数はその関数名で呼び出すことができます: `showMessage()` +Our new function can be called by its name: `showMessage()`. -例: +For instance: ```js run function showMessage() { @@ -43,22 +43,22 @@ showMessage(); */!* ``` -`showMessage()` の呼び出しは、関数のコードを実行します。この例では、2度メッセージが表示されます。 +The call `showMessage()` executes the code of the function. Here we will see the message two times. -この例は関数のメインの目的の1つを明確に示しています: コードの複製を回避する、と言うことです。 +This example clearly demonstrates one of the main purposes of functions: to avoid code duplication. -もしメッセージ内容、または表示方法を変更する必要がある場合、1箇所のコード(関数)を修正するだけで十分です。 +If we ever need to change the message or the way it is shown, it's enough to modify the code in one place: the function which outputs it. -## ローカル変数 +## Local variables -関数内で定義された変数は、関数内でのみ参照可能です。 +A variable declared inside a function is only visible inside that function. -例: +For example: ```js run function showMessage() { *!* - let message = "Hello, I'm JavaScript!"; // ローカル変数 + let message = "Hello, I'm JavaScript!"; // local variable */!* alert( message ); @@ -66,12 +66,12 @@ function showMessage() { showMessage(); // Hello, I'm JavaScript! -alert( message ); // <-- エラー! 変数は関数のローカルです +alert( message ); // <-- Error! The variable is local to the function ``` -## 外部変数 +## Outer variables -関数は外部変数にアクセスすることもできます。次の例を見てください: +A function can access an outer variable as well, for example: ```js run no-beautify let *!*userName*/!* = 'John'; @@ -84,84 +84,81 @@ function showMessage() { showMessage(); // Hello, John ``` -関数は外部変数に対してフルアクセス権を持ち、変更することもできます。 +The function has full access to the outer variable. It can modify it as well. -例: +For instance: ```js run let *!*userName*/!* = 'John'; function showMessage() { - *!*userName*/!* = "Bob"; // (1) 外部変数の変更 + *!*userName*/!* = "Bob"; // (1) changed the outer variable let message = 'Hello, ' + *!*userName*/!*; alert(message); } -alert( userName ); // 関数呼び出しの前は *!*John*/!* +alert( userName ); // *!*John*/!* before the function call showMessage(); -alert( userName ); // *!*Bob*/!*, 関数によって値が変更されました +alert( userName ); // *!*Bob*/!*, the value was modified by the function ``` -外部の変数は、同じ名前のローカル変数が存在しない場合にのみ使われます。そのため、`let` を忘れた場合、意図せず外部の変数を変更してしまう可能性があります。 +The outer variable is only used if there's no local one. -同じ名前の変数が関数内に宣言されている場合は、外部変数を *隠します*。例えば、以下のコードでは関数はローカルの `userName` を使います。外部の `userName` は無視されます。 +If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored: ```js run let userName = 'John'; function showMessage() { *!* - let userName = "Bob"; // ローカル変数の宣言 + let userName = "Bob"; // declare a local variable */!* let message = 'Hello, ' + userName; // *!*Bob*/!* alert(message); } -// 関数は作られ独自の userName を使います +// the function will create and use its own userName showMessage(); -alert( userName ); // *!*John*/!*, 変更されていません。関数は外部変数へアクセスしませんでした +alert( userName ); // *!*John*/!*, unchanged, the function did not access the outer variable ``` -```smart header="グローバル変数" -上のコードにおいて、外部の `userName` のような、関数の外で宣言されている変数は *グローバル* と呼ばれます。 +```smart header="Global variables" +Variables declared outside of any function, such as the outer `userName` in the code above, are called *global*. -グローバル変数はどの関数からも見えます(ローカル変数により隠れていなければ)。 +Global variables are visible from any function (unless shadowed by locals). -通常、関数は自身のタスクに必要なすべての変数を宣言します。また、グローバル変数にはプロジェクトレベルのデータのみを保持するため、どこからでも見える事が重要です。現代のコードはほとんどもしくは全くグローバル変数を持ちません。ほぼすべての変数は関数に属します。 +It's a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data. ``` -## パラメータ +## Parameters -パラメータを使うことで、任意のデータを関数に渡すことができます。 +We can pass arbitrary data to functions using parameters. -下の例では、関数は2つのパラメータを持っています: `from` と `text` です。 +In the example below, the function has two parameters: `from` and `text`. ```js run -function showMessage(*!*from, text*/!*) { // 引数: from, text +function showMessage(*!*from, text*/!*) { // parameters: from, text alert(from + ': ' + text); } -*!* -showMessage('Ann', 'Hello!'); // Ann: Hello! (*) -showMessage('Ann', "What's up?"); // Ann: What's up? (**) -*/!* +*!*showMessage('Ann', 'Hello!');*/!* // Ann: Hello! (*) +*!*showMessage('Ann', "What's up?");*/!* // Ann: What's up? (**) ``` -行 `(*)` と `(**)` で関数が呼ばれたとき、与えられた値はローカル変数 `from` と `text` にコピーされます。そして関数はそれらを使います。 - -ここにもう1つ例があります: 私たちは変数 `from` を持っており、それを関数に渡します。注意してください：関数は常に値のコピーを取得するため、関数の中の処理は `from` を変更していますが、その変更は外には見えません: +When the function is called in lines `(*)` and `(**)`, the given values are copied to local variables `from` and `text`. Then the function uses them. +Here's one more example: we have a variable `from` and pass it to the function. Please note: the function changes `from`, but the change is not seen outside, because a function always gets a copy of the value: ```js run function showMessage(from, text) { *!* - from = '*' + from + '*'; // "from" をより良く見せる + from = '*' + from + '*'; // make "from" look nicer */!* alert( from + ': ' + text ); @@ -171,33 +168,35 @@ let from = "Ann"; showMessage(from, "Hello"); // *Ann*: Hello -// "from" の値は同じで、関数はローカルコピーを変更しています。 +// the value of "from" is the same, the function modified a local copy alert( from ); // Ann ``` -関数のパラメータとして渡された値は "引数（ひきすう）" とも呼ばれます。 -これらの用語を整理すると: +When a value is passed as a function parameter, it's also called an *argument*. + +In other words, to put these terms straight: + +- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term). +- An argument is the value that is passed to the function when it is called (it's a call time term). -- パラメータとは、関数の宣言時に括弧内に記述される変数のこと(宣言時の用語) -- 引数とは、関数が呼び出されたときに渡される値のこと(呼び出し時の用語) +We declare functions listing their parameters, then call them passing arguments. -パラメータを列挙して関数を宣言し、引数を渡して関数を呼び出すことになります。 +In the example above, one might say: "the function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`". -上の例ではこのように言えるでしょう。「関数showMessageは2つのパラメータを持つと宣言されており、from と "Hello" という2つの引数を与えて呼び出されている」 -## デフォルト値 +## Default values -関数の呼び出し時に引数が与えられていない場合、対応する値は `undefined` になります。 +If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`. -例えば、前述の関数 `showMessage(from, text)` は1つの引数で呼ぶことも出来ます: +For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument: ```js showMessage("Ann"); ``` -それはエラーではありません。このような呼び出しは `"*Ann*: undefined"` を出力します。`text` が渡されていないため、`text` は `undefined` となります。 +That's not an error. Such a call would output `"*Ann*: undefined"`. As the value for `text` isn't passed, it becomes `undefined`. -パラメータのいわゆる "デフォルト" (呼び出し時に省略された場合に使用される)値を、関数宣言の中で `=` を使用して指定することが可能です: +We can specify the so-called "default" (to use if omitted) value for a parameter in the function declaration, using `=`: ```js run function showMessage(from, *!*text = "no text given"*/!*) { @@ -207,33 +206,75 @@ function showMessage(from, *!*text = "no text given"*/!*) { showMessage("Ann"); // Ann: no text given ``` -これで `text` パラメータが渡されていない場合、 値は `"no text given"` になります。 +Now if the `text` parameter is not passed, it will get the value `"no text given"`. + +The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this: + +```js +showMessage("Ann", undefined); // Ann: no text given +``` -ここで、 `"no text given"` は文字列ですが、より複雑な式にすることもできます。そしてそれはパラメータが無い場合にのみ評価され、代入されます。なので、このようなことも可能です: +Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible: ```js run function showMessage(from, text = anotherFunction()) { - // anotherFunction() はテキストが与えられなかった場合にのみ実行されます - // その結果がtextの値になります + // anotherFunction() only executed if no text given + // its result becomes the value of text +} +``` + +```smart header="Evaluation of default parameters" +In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter. + +In the example above, `anotherFunction()` isn't called at all, if the `text` parameter is provided. + +On the other hand, it's independently called every time when `text` is missing. +``` + +````smart header="Default parameters in old JavaScript code" +Several years ago, JavaScript didn't support the syntax for default parameters. So people used other ways to specify them. + +Nowadays, we can come across them in old scripts. + +For example, an explicit check for `undefined`: + +```js +function showMessage(from, text) { +*!* + if (text === undefined) { + text = 'no text given'; + } +*/!* + + alert( from + ": " + text ); } ``` -```smart header="デフォルト値の評価" -JavaScriptでは、デフォルト値はそれぞれのパラメータが与えられずに関数が呼び出されるたびに評価されます。 +...Or using the `||` operator: -上の例だと `anotherFunction()` は、 `text` のパラメータが与えられずに `showMessage()` が呼び出されるたびに実行されます。 +```js +function showMessage(from, text) { + // If the value of text is falsy, assign the default value + // this assumes that text == "" is the same as no text at all + text = text || 'no text given'; + ... +} ``` +```` -### 代替のデフォルトパラメータ -パラメータのデフォルト値を関数宣言ではなく、後の段階で実行中に設定することが理にかなっている場合があります。 +### Alternative default parameters -省略されたパラメータをチェックするために、`undefined` と比較できます: +Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration. + +We can check if the parameter is passed during the function execution, by comparing it with `undefined`: ```js run function showMessage(text) { + // ... + *!* - if (text === undefined) { + if (text === undefined) { // if the parameter is missing text = 'empty message'; } */!* @@ -244,21 +285,21 @@ function showMessage(text) { showMessage(); // empty message ``` -...もしくは `||` 演算子: +...Or we could use the `||` operator: ```js -// パラメータが省略 or "" の場合, 'empty' を設定 function showMessage(text) { + // if text is undefined or otherwise falsy, set it to 'empty' text = text || 'empty'; ... } ``` -モダンな JavaScript エンジンは [NULL合体演算子](info:nullish-coalescing-operator) `??` をサポートしており、`0` などの偽値を通常とみなす場合に適しています: +Modern JavaScript engines support the [nullish coalescing operator](info:nullish-coalescing-operator) `??`, it's better when most falsy values, such as `0`, should be considered "normal": ```js run -// count パラメータがない場合は "unknown" function showCount(count) { + // if count is undefined or null, show "unknown" alert(count ?? "unknown"); } @@ -267,11 +308,11 @@ showCount(null); // unknown showCount(); // unknown ``` -## 値の返却 +## Returning a value -関数は、実行結果として呼び出しコードに値を戻すことが出来ます。 +A function can return a value back into the calling code as the result. -最もシンプルな例は2つの値の合計を行う関数です: +The simplest example would be a function that sums two values: ```js run no-beautify function sum(a, b) { @@ -282,19 +323,19 @@ let result = sum(1, 2); alert( result ); // 3 ``` -ディレクティブ `return` は関数の任意の場所に置くことが出来ます。もしも実行がそこに到達したとき、関数は停止し、値を呼び出し元のコードに返します(上の `result` へ代入します)。 +The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to `result` above). -1つの関数に多くの `return` が出現することもあります。例えば: +There may be many occurrences of `return` in a single function. For instance: ```js run function checkAge(age) { - if (age > 18) { + if (age >= 18) { *!* return true; */!* } else { *!* - return confirm('Got a permission from the parents?'); + return confirm('Do you have permission from your parents?'); */!* } } @@ -308,9 +349,9 @@ if ( checkAge(age) ) { } ``` -値なしで `return` を使うことも出来ます。これは関数を直ぐに終了させます。 +It is possible to use `return` without a value. That causes the function to exit immediately. -例: +For example: ```js function showMovie(age) { @@ -325,10 +366,10 @@ function showMovie(age) { } ``` -上のコードでは、`checkAge(age)` が `false` を返すと、`showMovie` は `alert` の処理をしません。 +In the code above, if `checkAge(age)` returns `false`, then `showMovie` won't proceed to the `alert`. -````smart header="空の `return`、 または返却がないものは `undefined` を返します" -関数が値を返却しない場合、それは `undefined` を返却した場合と同じになります。: +````smart header="A function with an empty `return` or without it returns `undefined`" +If a function does not return a value, it is the same as if it returns `undefined`: ```js run function doNothing() { /* empty */ } @@ -336,7 +377,7 @@ function doNothing() { /* empty */ } alert( doNothing() === undefined ); // true ``` -空の `return` もまた `return undefined` と同じです: +An empty `return` is also the same as `return undefined`: ```js run function doNothing() { @@ -347,23 +388,23 @@ alert( doNothing() === undefined ); // true ``` ```` -````warn header="`return`と値の間に改行を入れないでください" -`return` が長い式の場合、このように別の行に書くのが魅力的に見えるかもしれません: +````warn header="Never add a newline between `return` and the value" +For a long expression in `return`, it might be tempting to put it on a separate line, like this: ```js return (some + long + expression + or + whatever * f(a) + f(b)) ``` -JavaScriptは `return` の後にセミコロンを想定するため、これは動作しません。これは次と同じように動作します: +That doesn't work, because JavaScript assumes a semicolon after `return`. That'll work the same as: ```js return*!*;*/!* (some + long + expression + or + whatever * f(a) + f(b)) ``` -従って、これは事実上空の返却になります。なので、値は同じ行に置く必要があります。 +So, it effectively becomes an empty return. -もし複数行にまたがった式を返却したい場合は、`return` と同じ行から開始する必要があります。あるいは、少なくとも次のように開始括弧を置きます: +If we want the returned expression to wrap across multiple lines, we should start it at the same line as `return`. Or at least put the opening parentheses there as follows: ```js return ( @@ -372,67 +413,67 @@ return ( whatever * f(a) + f(b) ) ``` -これは期待する通りに動作するでしょう。 +And it will work just as we expect it to. ```` -## 関数の命名 +## Naming a function [#function-naming] -関数はアクションです。そのため、それらの名前は通常は動詞です。それは簡潔にすべきですが、関数がすることをできるだけ正確に表現してください。そして、コードを読む人が正しい手がかりを得られるようにします。 +Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does. -曖昧なアクションを示す動詞のプレフィックスから関数名を始めることは広く行われています。プレフィックスの意味についてはチーム内での合意が必要です。 +It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes. -例えば、`"show"` で始まる関数は、通常何かを表示します。 +For instance, functions that start with `"show"` usually show something. -以下で始まる関数... +Function starting with... -- `"get…"` -- 値を返します, -- `"calc…"` -- 何かを計算します, -- `"create…"` -- 何かを生成します, -- `"check…"` -- 何かをチェックし、真偽値を返します, etc +- `"get…"` -- return a value, +- `"calc…"` -- calculate something, +- `"create…"` -- create something, +- `"check…"` -- check something and return a boolean, etc. -このような名前の例です: +Examples of such names: ```js no-beautify -showMessage(..) // メッセージを表示します -getAge(..) // 年齢を返します(なんとかしてその値を得る) -calcSum(..) // 合計を計算し、それを返します -createForm(..) // フォームを生成します(通常それを返却します) -checkPermission(..) // 権限をチェックし、true/false を返します +showMessage(..) // shows a message +getAge(..) // returns the age (gets it somehow) +calcSum(..) // calculates a sum and returns the result +createForm(..) // creates a form (and usually returns it) +checkPermission(..) // checks a permission, returns true/false ``` -決まった位置にプレフィックスを使用すると、関数名を見ただけでそれがどのような種類の処理を行い、どのような値を返すのかを理解することが出来ます。 +With prefixes in place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns. -```smart header="1つの関数 -- 1つのアクション" -関数はその名前により提案されたことを正確にするべきです。 +```smart header="One function -- one action" +A function should do exactly what is suggested by its name, no more. -通常、2つの独立したアクションは、たとえそれらが一緒に呼ばれるとしても、2つの関数にするのが良いです(その場合は、通常その2つを呼ぶ3つ目の関数を作ります)。 +Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two). -このルールを破るいくつかの例です: +A few examples of breaking this rule: -- `getAge` -- 年齢を取得するとともに `警告` を表示します(取得のみをするべきです) -- `createForm` -- フォームを作成して、ドキュメントに追加します(作成とその返却だけにするべきです) -- `checkPermission` -- `アクセス許可/拒否` のメッセージを表示するのは良くありません(チェックを実行し、その結果を返すのみにすべきです) +- `getAge` -- would be bad if it shows an `alert` with the age (should only get). +- `createForm` -- would be bad if it modifies the document, adding a form to it (should only create it and return). +- `checkPermission` -- would be bad if it displays the `access granted/denied` message (should only perform the check and return the result). -これらの例はプレフィックスの共通の意味を前提としています。これらが意味することは、あなたとあなたのチームで前提を決めるということです。恐らく、コードが異なる振る舞いをするのは普通なことです。しかし、プレフィックスが意味すること、プレフィックスの付いた関数ができること、できないことについてはしっかりとした理解をもっておくべきです。同じプレフィックスの関数はルールに従うべきです。そして、チームはそれを共有するべきです。 +These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually they're not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge. ``` -```smart header="究極的に短い関数名" -*非常に頻繁に* 使われる関数は、究極的に短い名前を持っていることがあります。 +```smart header="Ultrashort function names" +Functions that are used *very often* sometimes have ultrashort names. -例えば、[jQuery](http://jquery.com) フレームワークは関数 `$` を定義しています。[LoDash](http://lodash.com/) ライブラリは、そのコアな関数として `_` を持っています。 +For example, the [jQuery](https://jquery.com/) framework defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`. -それらは例外です。一般的に関数名は簡潔で説明的でなければなりません。 +These are exceptions. Generally function names should be concise and descriptive. ``` -## 関数 == コメント +## Functions == Comments -関数は短く明確に1つのことを行うべきです。もし関数が大きい場合、恐らくそれを幾つかの小さい関数に分けることは価値があるでしょう。このルールに従うことは簡単ではないこともありますが、間違いなく良いことです。 +Functions should be short and do exactly one thing. If that thing is big, maybe it's worth it to split the function into a few smaller functions. Sometimes following this rule may not be that easy, but it's definitely a good thing. -分割した関数はテストやデバッグが簡単になるだけでなく、 -- その存在自体が素晴らしいコメントになります! +A separate function is not only easier to test and debug -- its very existence is a great comment! -例えば、下にある2つの関数 `showPrimes(n)`を比べてみましょう。どちらも[素数](https://en.wikipedia.org/wiki/Prime_number)を `n` に達するまで出力します。 +For instance, compare the two functions `showPrimes(n)` below. Each one outputs [prime numbers](https://en.wikipedia.org/wiki/Prime_number) up to `n`. -1つ目のパターンはラベルを使います: +The first variant uses a label: ```js function showPrimes(n) { @@ -447,7 +488,7 @@ function showPrimes(n) { } ``` -2つ目のパターンは、素数の確認をするための追加の関数 `isPrime(n)` を使います。 +The second variant uses an additional function `isPrime(n)` to test for primality: ```js function showPrimes(n) { @@ -467,13 +508,13 @@ function isPrime(n) { } ``` -2つ目のパターンのほうが理解しやすいですね。コードの塊の代わりに、アクション(`isPrime`) の名前を見ます。このようなコードは *自己記述的* と呼ばれる場合があります。 +The second variant is easier to understand, isn't it? Instead of the code piece we see a name of the action (`isPrime`). Sometimes people refer to such code as *self-describing*. -従って、関数はその再利用を意図していない場合でも作ることがあります。それらはコードを構造化し、読みやすくします。 +So, functions can be created even if we don't intend to reuse them. They structure the code and make it readable. -## サマリ +## Summary -関数はこのように定義します: +A function declaration looks like this: ```js function name(parameters, delimited, by, comma) { @@ -481,18 +522,18 @@ function name(parameters, delimited, by, comma) { } ``` -- パラメータとして関数に渡される値は、ローカル変数にコピーされます。 -- 関数は外部の変数にアクセスすることができます。しかし、それは内側からのみ機能します。関数の外側のコードは、関数のローカル変数を見ることはできません。 -- 関数は値を返すことができます。もしもそれをしなかった場合、戻り値は `undefined` です。 +- Values passed to a function as parameters are copied to its local variables. +- A function may access outer variables. But it works only from inside out. The code outside of the function doesn't see its local variables. +- A function can return a value. If it doesn't, then its result is `undefined`. -コードを綺麗で理解しやすいようにするために、その関数内では外部変数ではなく、ローカル変数やパラメータを利用することを推奨します。 +To make the code clean and easy to understand, it's recommended to use mainly local variables and parameters in the function, not outer variables. -パラメータを取得せずに外部変数を変更する関数よりも、パラメータを取得してそれを処理して結果を返す関数の方が、常に理解しやすいものです。 +It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect. -関数名: +Function naming: -- 名前は、関数がすることを明確に記述するべきです。コードの中で関数呼び出しを見るとき、良い名前であればそれが何をして何を返すのかを簡単に理解することができます。 -- 関数はアクションなので、関数名は通常動詞的です。 -- `create…`, `show…`, `get…`, `check…` など、数多くのよく知られた関数のプレフィックスが存在します。関数がすることのヒントとしてそれらを使いましょう。 +- A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns. +- A function is an action, so function names are usually verbal. +- There exist many well-known function prefixes like `create…`, `show…`, `get…`, `check…` and so on. Use them to hint what a function does. -関数はスクリプトの主な構成要素です。今や私たちは基礎をカバーしたので、実際にそれらを作り使い始めることができます。しかし、それはまだほんの始まりに過ぎません。私たちは何度もそれらに戻り、より高度な機能について深めていきます。 +Functions are the main building blocks of scripts. Now we've covered the basics, so we actually can start creating and using them. But that's only the beginning of the path. We are going to return to them many times, going more deeply into their advanced features. diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index 8537f038eb..b952d59435 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -1,8 +1,8 @@ -# 関数式 +# Function expressions -JavaScriptでは、関数は "魔法の言語構造" ではなく、特別な種類の値です。 +In JavaScript, a function is not a "magical language structure", but a special kind of value. -前に私たちが使っていた構文は *関数宣言* と呼ばれます: +The syntax that we used before is called a *Function Declaration*: ```js function sayHi() { @@ -10,9 +10,11 @@ function sayHi() { } ``` -これとは別に、*関数式* と呼ばれる、関数を作るための別の構文があります。 +There is another syntax for creating a function that is called a *Function Expression*. -それはこのようになります: +It allows us to create a new function in the middle of any expression. + +For example: ```js let sayHi = function() { @@ -20,11 +22,21 @@ let sayHi = function() { }; ``` -ここでは、関数は他の任意の値と同じように明示的に変数に代入されています。どのように関数が定義されても、それは単に変数 `sayHi` に格納される値です。 +Here we can see a variable `sayHi` getting a value, the new function, created as `function() { alert("Hello"); }`. + +As the function creation happens in the context of the assignment expression (to the right side of `=`), this is a *Function Expression*. + +Please note, there's no name after the `function` keyword. Omitting a name is allowed for Function Expressions. + +Here we immediately assign it to the variable, so the meaning of these code samples is the same: "create a function and put it into the variable `sayHi`". + +In more advanced situations, that we'll come across later, a function may be created and immediately called or scheduled for a later execution, not stored anywhere, thus remaining anonymous. + +## Function is a value -これらのコード例の意味は同じです: "関数を作成し、変数 `sayHi` にそれを格納します" +Let's reiterate: no matter how the function is created, a function is a value. Both examples above store a function in the `sayHi` variable. -`alert` を使ってその値を出力することもできます: +We can even print out that value using `alert`: ```js run function sayHi() { @@ -32,53 +44,53 @@ function sayHi() { } *!* -alert( sayHi ); // 関数のコードが表示されます +alert( sayHi ); // shows the function code */!* ``` -`sayHi` の後に括弧がないので、最後の行は関数は実行されないことに注意してください。関数名への言及がその実行となるプログラミング言語も存在しますが、JavaScriptはそうではありません。 +Please note that the last line does not run the function, because there are no parentheses after `sayHi`. There are programming languages where any mention of a function name causes its execution, but JavaScript is not like that. -JavaScriptでは、関数は値です。そのため、それを値として扱うことができます。上のコードはその文字列表現を表示します(それはソースコードです)。 +In JavaScript, a function is a value, so we can deal with it as a value. The code above shows its string representation, which is the source code. -`sayHi()` のように呼ぶことができる点で、もちろんそれは特別な値です。 +Surely, a function is a special value, in the sense that we can call it like `sayHi()`. -しかし、それは値なので、他のタイプの値のように扱うことができます。 +But it's still a value. So we can work with it like with other kinds of values. -関数を別の変数にコピーすることができます: +We can copy a function to another variable: ```js run no-beautify -function sayHi() { // (1) 作成 +function sayHi() { // (1) create alert( "Hello" ); } -let func = sayHi; // (2) コピー +let func = sayHi; // (2) copy -func(); // Hello // (3) コピーの実行(動きます)! -sayHi(); // Hello // これもまだ動きます(なぜでしょう？) +func(); // Hello // (3) run the copy (it works)! +sayHi(); // Hello // this still works too (why wouldn't it) ``` -上で起こっていることの詳細は次の通りです: +Here's what happens above in detail: -1. 関数宣言 `(1)` で関数を生成し、変数名 `sayHi` に格納します。 -2. 行 `(2)` でそれを変数 `func` にコピーします。 +1. The Function Declaration `(1)` creates the function and puts it into the variable named `sayHi`. +2. Line `(2)` copies it into the variable `func`. Please note again: there are no parentheses after `sayHi`. If there were, then `func = sayHi()` would write *the result of the call* `sayHi()` into `func`, not *the function* `sayHi` itself. +3. Now the function can be called as both `sayHi()` and `func()`. - 改めて注意してください:`sayHi` の後に括弧はありません。もし括弧があった場合、`sayHi` の *関数自身* ではなく、`func = sayHi()` は `sayHi()` の呼び出し結果を `func` に書き込みます。 -3. これで、関数は `sayHi()` と `func()` どちらでも呼ぶことができます。 - -また、1行目で `sayHi` を宣言するのに関数式を使うこともできます: +We could also have used a Function Expression to declare `sayHi`, in the first line: ```js -let sayHi = function() { ... }; +let sayHi = function() { // (1) create + alert( "Hello" ); +}; let func = sayHi; // ... ``` -すべて同じように動作します。何が起こっているのかより明白ですね。 +Everything would work the same. -````smart header="なぜ末尾にセミコロンがあるのでしょう？" -疑問があるかもしれません。なぜ関数式は末尾にセミコロン `;` を持つのか、そして関数宣言にはそれがないのか: +````smart header="Why is there a semicolon at the end?" +You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not: ```js function sayHi() { @@ -90,27 +102,27 @@ let sayHi = function() { }*!*;*/!* ``` -答えはシンプルです: -- コードブロックや `if { ... }`, `for { }`, `function f { }` などの構文構造の末尾には `;` が必要ありません。 -- 関数式は文の内側で使われます: `let sayHi = ...;` の値として利用します。これはコードブロックではありません。セミコロン `;` はどんな値であれ文の最後に推奨されています。従って、ここのセミコロンは関数式自体と関係はなく、単に文の終わりです。 +The answer is simple: a Function Expression is created here as `function(…) {…}` inside the assignment statement: `let sayHi = …;`. The semicolon `;` is recommended at the end of the statement, it's not a part of the function syntax. + +The semicolon would be there for a simpler assignment, such as `let sayHi = 5;`, and it's also there for a function assignment. ```` -## コールバック関数 +## Callback functions -値として関数を渡し、関数式を使う例をみてみましょう。 +Let's look at more examples of passing functions as values and using function expressions. -私たちは、3つのパラメータを持つ関数 `ask(question, yes, no)` を書きます: +We'll write a function `ask(question, yes, no)` with three parameters: `question` -: 質問内容 +: Text of the question `yes` -: 答えが "はい" の場合に実行する関数 +: Function to run if the answer is "Yes" `no` -: 答えが "いいえ" の場合に実行する関数 +: Function to run if the answer is "No" -関数は `question` を聞き、ユーザの回答に合わせて、`yes()` または `no()` を呼びます: +The function should ask the `question` and, depending on the user's answer, call `yes()` or `no()`: ```js run *!* @@ -128,17 +140,17 @@ function showCancel() { alert( "You canceled the execution." ); } -// 使用法: 関数 showOk, showCancel は ask の引数として渡されます +// usage: functions showOk, showCancel are passed as arguments to ask ask("Do you agree?", showOk, showCancel); ``` -これをもっと簡単に書く方法を探る前に、ブラウザ(と場合によってはサーバ側)では、このような関数は非常に一般的であること留意しましょう。実際の実装と上の例の主な違いは、実際の関数は単純な `confirm` よりも、より複雑な方法でユーザとやり取りをすることです。ブラウザでは、通常このような関数は見栄えのよい質問ウィンドウを描画します。が、それはまた別の話です。 +In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that's another story. -**`ask`の引数の `showOk` と `showCancel` は *コールバック関数* または単に *コールバック* と呼ばれます。** +**The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.** -このアイデアは、渡した関数が必要に応じて後から "コールバック" されることを期待するというものです。このケースでは、`showOK` は "はい" のためのコールバック関数になり、`showCancel` は "いいえ" の回答のためのコールバック関数です。 +The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for "yes" answer, and `showCancel` for "no" answer. -同じ関数をより短く書くために関数式を使うことができます: +We can use Function Expressions to write an equivalent, shorter function: ```js run no-beautify function ask(question, yes, no) { @@ -155,59 +167,59 @@ ask( */!* ``` -ここでは、関数は `ask(...)` 呼び出しの中で正しく宣言されています。これらは名前を持たないので *無名関数* と呼ばれます。このような関数は、変数に割り当てられていないため `ask` の外側からはアクセスできませんが、ここでは私たちにとってちょうどよいものとなっています。 +Here, functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that's just what we want here. -このようなコードはスクリプトの中で自然に現れます。それは JavaScript の精神に基づいています。 +Such code appears in our scripts very naturally, it's in the spirit of JavaScript. -```smart header="関数は \"アクション\" を表す値です" -文字列や数値のような通常の値は *データ* を現します。 +```smart header="A function is a value representing an \"action\"" +Regular values like strings or numbers represent the *data*. -関数は *アクション* として認識されます。 +A function can be perceived as an *action*. -変数間で渡し、必要な時に実行させることができます。 +We can pass it between variables and run when we want. ``` -## 関数式 vs 関数宣言 +## Function Expression vs Function Declaration -関数宣言と関数式の違いを明確に述べてみましょう。 +Let's formulate the key differences between Function Declarations and Expressions. -まず、構文です: +First, the syntax: how to differentiate between them in the code. -- *関数宣言:* メインのコードフローで別の文として宣言された関数 +- *Function Declaration:* a function, declared as a separate statement, in the main code flow: ```js - // 関数宣言 + // Function Declaration function sum(a, b) { return a + b; } ``` -- *関数式:* 式の内部、または別の構文構造の中で作れらた関数。ここでは、関数は "代入式" `=` の右側で作られます: +- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the "assignment expression" `=`: ```js - // 関数式 + // Function Expression let sum = function(a, b) { return a + b; }; ``` -よりささいな違いは、関数がJavaScriptエンジンによって *作られたとき* です。 +The more subtle difference is *when* a function is created by the JavaScript engine. -**関数式は、実行がそれに到達した時に作られ、それ以降で利用可能になります。** +**A Function Expression is created when the execution reaches it and is usable only from that moment.** -一度実行フローが代入 `let sum = function…` の右辺へ渡ったら -- 関数は作られ、そこから使えるようになります(代入や呼び出しなど)。 +Once the execution flow passes to the right side of the assignment `let sum = function…` -- here we go, the function is created and can be used (assigned, called, etc. ) from now on. -関数宣言は異なります +Function Declarations are different. -**関数宣言はスクリプト/コードブロック全体で使用できます。** +**A Function Declaration can be called earlier than it is defined.** -つまり、JavaScriptがスクリプトまたはコードブロックの実行の準備をする時、最初にその中の関数定義を探し、関数を生成します。それは "初期化段階" と考えることができます。 +For example, a global Function Declaration is visible in the whole script, no matter where it is. -そして、すべての関数宣言が処理されたあと、実行が続けられます。 +That's due to internal algorithms. When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an "initialization stage". -結果的に、関数宣言として宣言された関数は、関数が定義されている場所よりも前で呼ぶことができます。 +And after all Function Declarations are processed, the code is executed. So it has access to these functions. -例えば、これは動作します: +For example, this works: ```js run refresh untrusted *!* @@ -219,13 +231,13 @@ function sayHi(name) { } ``` -関数宣言 `sayHi` は、JavaScriptがスクリプトの開始の準備をしているときに生成され、その中でどこからでも見えます。 +The Function Declaration `sayHi` is created when JavaScript is preparing to start the script and is visible everywhere in it. -...もしもそれが関数式だった場合、動作しないでしょう: +...If it were a Function Expression, then it wouldn't work: ```js run refresh untrusted *!* -sayHi("John"); // エラー! +sayHi("John"); // error! */!* let sayHi = function(name) { // (*) no magic any more @@ -233,20 +245,20 @@ let sayHi = function(name) { // (*) no magic any more }; ``` -関数式は、実行がそれに到達した時に作られます。それは行 `(*)` で起こります。遅すぎます。 +Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late. -**関数宣言がコードブロックの中で作られるとき、そのブロックの内側であればどこからでも見えます。しかし、その外側からは見えません。** +Another special feature of Function Declarations is their block scope. -必要とされるブロックの中だけでローカル変数を宣言することは、時には便利です。しかし、その機能も問題を引き起こす可能性があります。 +**In strict mode, when a Function Declaration is within a code block, it's visible everywhere inside that block. But not outside of it.** -例えば、ランタイムの中で得た `age` 変数に依存する関数 `welcome()` を宣言する必要があるとしましょう。そして、しばらくしてから使用する予定だとします。 +For instance, let's imagine that we need to declare a function `welcome()` depending on the `age` variable that we get during runtime. And then we plan to use it some time later. -下のコードはうまく動作しません: +If we use Function Declaration, it won't work as intended: ```js run let age = prompt("What is your age?", 18); -// 条件付きで関数を宣言する +// conditionally declare a function if (age < 18) { function welcome() { @@ -261,52 +273,52 @@ if (age < 18) { } -// ...後で使う +// ...use it later *!* -welcome(); // エラー: welcome は未定義です +welcome(); // Error: welcome is not defined */!* ``` -なぜなら、関数宣言は、それが存在するコードブロックの内側でのみ見えるからです。 +That's because a Function Declaration is only visible inside the code block in which it resides. -別の例です: +Here's another example: ```js run -let age = 16; // 例として16 +let age = 16; // take 16 as an example if (age < 18) { *!* - welcome(); // \ (実行) + welcome(); // \ (runs) */!* // | - function welcome() { // | - alert("Hello!"); // | 関数宣言はそれが宣言されたブロックの中であれば - } // | どこでも利用可能です + function welcome() { // | + alert("Hello!"); // | Function Declaration is available + } // | everywhere in the block where it's declared // | *!* - welcome(); // / (実行) + welcome(); // / (runs) */!* } else { - function welcome() { // age = 16 の場合, この "welcome" は決して作られません + function welcome() { alert("Greetings!"); } } -// ここは、波括弧の外です -// なのでその中で作られた関数宣言は見ることができません +// Here we're out of curly braces, +// so we can not see Function Declarations made inside of them. *!* -welcome(); // エラー: welcome は定義されていません +welcome(); // Error: welcome is not defined */!* ``` -`if` の外側で `welcome` を見えるようにするためにはどうしたらよいでしょうか？ +What can we do to make `welcome` visible outside of `if`? -正しいアプローチは、関数式を使い、`welcome` を `if` の外で宣言し、適切なスコープをもつ変数に代入することです。 +The correct approach would be to use a Function Expression and assign `welcome` to the variable that is declared outside of `if` and has the proper visibility. -これは、意図したとおりに動作します: +This code works as intended: ```js run let age = prompt("What is your age?", 18); @@ -332,7 +344,7 @@ welcome(); // ok now */!* ``` -もしくは、疑問符演算子 `?` を使うことでさらにシンプルにできます: +Or we could simplify it even further using a question mark operator `?`: ```js run let age = prompt("What is your age?", 18); @@ -347,22 +359,22 @@ welcome(); // ok now ``` -```smart header="関数宣言と関数式のどちらを選択するのか？" -経験則として、関数を宣言する必要があるとき、最初に考えるのは関数宣言構文です。関数が宣言される前に呼ぶことができるため、コードを体系化する自由度が増します。 +```smart header="When to choose Function Declaration versus Function Expression?" +As a rule of thumb, when we need to declare a function, the first thing to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared. -また、コードの中で、`let f = function(…) {…}` よりも `function f(…) {…}` の方が調べるのが少し簡単です。関数宣言はより "目を引きます"。 +That's also better for readability, as it's easier to look up `function f(…) {…}` in the code than `let f = function(…) {…};`. Function Declarations are more "eye-catching". -...しかし、関数宣言が幾つかの理由で適していない場合(上でみた例)、関数式を使用するべきです。 +...But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we've just seen an example), then Function Expression should be used. ``` -## サマリ +## Summary -- 関数は値です。それらはコード上のどの場所でも、割り当て、コピー、宣言をすることができます。 -- 関数がメインのコードフローの中で別の文として宣言されていたら、それは "関数宣言" と呼ばれます。 -- 関数が式の一部として作られたら、それは "関数式" と呼ばれます。 -- 関数宣言は、コードブロックが実行される前に処理されます。ブロックの中ではどこからでも見えます。 -- 関数式は、実行フローがそれに到達した時に作られます。 +- Functions are values. They can be assigned, copied or declared in any place of the code. +- If the function is declared as a separate statement in the main code flow, that's called a "Function Declaration". +- If the function is created as a part of an expression, it's called a "Function Expression". +- Function Declarations are processed before the code block is executed. They are visible everywhere in the block. +- Function Expressions are created when the execution flow reaches them. -たいていのケースでは、関数の宣言が必要な場合、関数宣言が望ましいです。なぜなら、それ自身の宣言の前でも利用することができるからです。これにより、コード構成の柔軟性が増し、通常は読みやすくなります。 +In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable. -従って、関数宣言がそのタスクに適さない場合にのみ関数式を使うべきです。この章ではそのような例をいくつか見てきましたが、今後もさらに多くの例を見ていくことになるでしょう。 +So we should use a Function Expression only when a Function Declaration is not fit for the task. We've seen a couple of examples of that in this chapter, and will see more in the future. 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 index 2557dda9f8..4a790d631c 100644 --- 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 @@ -1,7 +1,7 @@ ```js run function ask(question, yes, no) { - if (confirm(question)) yes() + if (confirm(question)) yes(); else no(); } 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 index 783419e867..745f172f67 100644 --- 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 @@ -1,11 +1,15 @@ # アロー関数を使った書き換え +<<<<<<< HEAD:1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md 次のコードで、関数式をアロー関数に置き換えてください。: +======= +Replace Function Expressions with arrow functions in the code below: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d:1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md ```js run function ask(question, yes, no) { - if (confirm(question)) yes() + if (confirm(question)) yes(); else no(); } 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 index 9006138193..d78fe7a3df 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD # アロー関数の基本 関数を作成するための、よりシンプルで簡潔な構文がもう1つあります。それはしばしば関数式よりも優れています。 @@ -19,11 +20,38 @@ let func = function(arg1, arg2, ...argN) { ``` 具体的な例を見てみましょう: +======= +# 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: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let sum = (a, b) => a + b; +<<<<<<< HEAD /* アロー関数は次よりも短い形式です: +======= +/* This arrow function is a shorter form of: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d let sum = function(a, b) { return a + b; @@ -33,22 +61,38 @@ let sum = function(a, b) { alert( sum(1, 2) ); // 3 ``` +<<<<<<< HEAD ご覧の通り、`(a, b) => a + b` は `a` と `b` 、2つの引数を受け取る関数を意味します。実行時に、`a + b` を評価し、結果を返します。 - 引数が1つだけの場合、括弧は省略可能なので、さらに短くできます: 例: +======= +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: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run *!* let double = n => n * 2; +<<<<<<< HEAD // おおよそこちらと同じ: let double = function(n) { return n * 2 } +======= + // roughly the same as: let double = function(n) { return n * 2 } +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d */!* alert( double(3) ); // 6 ``` +<<<<<<< HEAD - 引数がない場合、空の括弧が必須です: +======= +- If there are no arguments, parentheses are empty, but they must be present: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let sayHi = () => alert("Hello!"); @@ -56,14 +100,21 @@ alert( sum(1, 2) ); // 3 sayHi(); ``` +<<<<<<< HEAD アロー関数は、関数式として同じ方法で使用できます。 例えば、ここでは `welcome()` の例を再び書きます: +======= +Arrow functions can be used in the same way as Function Expressions. + +For instance, to dynamically create a function: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let age = prompt("What is your age?", 18); let welcome = (age < 18) ? +<<<<<<< HEAD () => alert('Hello') : () => alert("Greetings!"); @@ -87,12 +138,38 @@ let sum = (a, b) => { // 波括弧を使って複数行の関数を書けます let result = a + b; *!* return result; // 波括弧を使う場合、明示的な return が必要です +======= + () => 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 arrow functions that we've seen so far were very simple. They took arguments from the left of `=>`, evaluated and returned the right-side expression with them. + +Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a `return` within them to return a value (just like a regular function does). + +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" +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d */!* }; alert( sum(1, 2) ); // 3 ``` +<<<<<<< HEAD ```smart header="他にもあります" ここでは、簡潔にするためにアロー関数を賞賛しました。しかし、それだけではありません!! @@ -109,3 +186,21 @@ alert( sum(1, 2) ); // 3 1. 波括弧無し: `(...args) => expression` -- 右側は式です: 関数はそれを評価しその結果を返します。 2. 波括弧あり: `(...args) => { body }` -- 括弧があると、関数内で複数の文を書くことができます、しかし何かを返却する場合には、明示的な `return` が必要です。 +======= +```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 . + +For now, we can already use arrow functions for one-line actions and callbacks. +``` + +## Summary + +Arrow functions are handy for simple actions, especially 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. Parentheses can be omitted, if there's only a single argument, e.g. `n => n*2`. +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. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/02-first-steps/18-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md index 39131e0045..e7ddacac41 100644 --- a/1-js/02-first-steps/18-javascript-specials/article.md +++ b/1-js/02-first-steps/18-javascript-specials/article.md @@ -1,23 +1,23 @@ -# JavaScript スペシャル（これまでのおさらい） +# JavaScript specials -このチャプターでは、微妙なケースに注意を払いながら、私たちが今まで学んだJavaScriptの機能を簡単に再確認します。 +This chapter briefly recaps the features of JavaScript that we've learned by now, paying special attention to subtle moments. -## コード構造 +## Code structure -文はセミコロンで区切られます: +Statements are delimited with a semicolon: ```js run no-beautify alert('Hello'); alert('World'); ``` -通常、行の終わりは区切りとして扱われますので、これは動作します: +Usually, a line-break is also treated as a delimiter, so that would also work: ```js run no-beautify alert('Hello') alert('World') ``` -これは "自動セミコロン挿入" と呼ばれます。ときどき、これは動作しません。例えば: +That's called "automatic semicolon insertion". Sometimes it doesn't work, for instance: ```js run alert("There will be an error after this message") @@ -25,27 +25,27 @@ alert("There will be an error after this message") [1, 2].forEach(alert) ``` -ほとんどのコードスタイルのガイドは、各文の後にセミコロンを置くことに賛同しています。 +Most codestyle guides agree that we should put a semicolon after each statement. -セミコロンはコードブロック `{...}` や、ループのような構文構造の後では必要ありません: +Semicolons are not required after code blocks `{...}` and syntax constructs with them like loops: ```js function f() { - // 関数宣言のあとにセミコロンは不要です + // no semicolon needed after function declaration } for(;;) { - // ループの後にセミコロンは不要です + // no semicolon needed after the loop } ``` -...しかし、"余分な" セミコロンを任意の場所に置いたとしても、それはエラーではありません。それは無視されます。 +...But even if we can put an "extra" semicolon somewhere, that's not an error. It will be ignored. -より詳細はこちら: . +More in: . -## Strict モード +## Strict mode -現在のJavaScriptのすべての機能を完全に有効にするには、`"use strict"` でスクリプトを始める必要があります。 +To fully enable all features of modern JavaScript, we should start scripts with `"use strict"`. ```js 'use strict'; @@ -53,68 +53,68 @@ for(;;) { ... ``` -そのディレクティブはスクリプトの先頭、もしくは関数の最初である必要があります。 +The directive must be at the top of a script or at the beginning of a function body. -`"use strict"` がなくてもすべて動作しますが、幾つかの機能は "互換性のある" 旧来の振る舞いとなります。一般的に、現代的な動作が好まれるでしょう。 +Without `"use strict"`, everything still works, but some features behave in the old-fashioned, "compatible" way. We'd generally prefer the modern behavior. -言語に最新の機能のいくつか（今後学ぶクラスなど）は暗黙的に strict モードを有効にします。 +Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly. -より詳細はこちら: . +More in: . -## 変数 +## Variables -これらを使って定義できます: +Can be declared using: - `let` -- `const` (定数, 変更できない) -- `var` (古いスタイル, あとで見ます) +- `const` (constant, can't be changed) +- `var` (old-style, will see later) -変数の名前は次を含むことができます: -- 文字と数字、しかし1文字目に数字は指定できません。 -- 記号の `$` と `_` は普通の文字と同等です。 -- 非ラテンのアルファベットや象形文字も使えますが、一般的には使用されません。 +A variable name can include: +- Letters and digits, but the first character may not be a digit. +- Characters `$` and `_` are normal, on par with letters. +- Non-Latin alphabets and hieroglyphs are also allowed, but commonly not used. -変数は動的に型付けされます。 それらは任意の値を格納することができます: +Variables are dynamically typed. They can store any value: ```js let x = 5; x = "John"; ``` -7つのデータ型があります: +There are 8 data types: -- `number` 浮動少数点と整数値両方 -- `bigint` 任意の長さの整数値 -- `string` 文字列 -- `boolean` 論理値: `true/false` -- `null` -- 単一の値 `null` を持つ型。"空", "存在しない" を意味する -- `undefined` -- 単一の値 `undefined` を持つ型。"未割り当て" を意味する -- `object` と `symbol` -- 複雑なデータ構造やユニークな識別子です。私たちはまだそれらは学んでいません。 +- `number` for both floating-point and integer numbers, +- `bigint` for integer numbers of arbitrary length, +- `string` for strings, +- `boolean` for logical values: `true/false`, +- `null` -- a type with a single value `null`, meaning "empty" or "does not exist", +- `undefined` -- a type with a single value `undefined`, meaning "not assigned", +- `object` and `symbol` -- for complex data structures and unique identifiers, we haven't learnt them yet. -`typeof` 演算子は値の型を返します。2つ例外があります: +The `typeof` operator returns the type for a value, with two exceptions: ```js -typeof null == "object" // 言語の間違い -typeof function(){} == "function" // 関数は特別に扱われます +typeof null == "object" // error in the language +typeof function(){} == "function" // functions are treated specially ``` -より詳細はこちらです: and . +More in: and . -## インタラクション +## Interaction -私たちは動作環境としてブラウザを使っているので、基本のUI関数は次の通りです: +We're using a browser as a working environment, so basic UI functions will be: -[`prompt(question[, default])`](mdn:api/Window/prompt) -: `question` を尋ね、訪問者が入力した内容を返すか、"cancel" がクリックされたときは `null` を返します。 +[`prompt(question, [default])`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) +: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel". -[`confirm(question)`](mdn:api/Window/confirm) -: `question` を尋ね、OKとキャンセルのどちらかを選択するように提案します。選択された結果は `true/false` として返されます。 +[`confirm(question)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) +: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`. -[`alert(message)`](mdn:api/Window/alert) -: `message` を出力します。 +[`alert(message)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) +: Output a `message`. -それらの関数はすべて *モーダル* であり、コードの実行を止め、訪問者が回答するまでそのページとのやり取りを防ぎます。 +All these functions are *modal*, they pause the code execution and prevent the visitor from interacting with the page until they answer. -例えば: +For instance: ```js run let userName = prompt("Your name?", "Alice"); @@ -124,61 +124,61 @@ alert( "Visitor: " + userName ); // Alice alert( "Tea wanted: " + isTeaWanted ); // true ``` -より詳細はこちらです: . +More in: . -## 演算子 +## Operators -JavaScriptは次のような演算子をサポートします: +JavaScript supports the following operators: -算術 -: 通常の四則演算の `* + - /`、また剰余として `%`、冪乗として `**`。 +Arithmetical +: Regular: `* + - /`, also `%` for the remainder and `**` for power of a number. - 二項演算子プラス `+` は文字列を連結します。また、オペランドのいずれかが文字列であれば、もう一方も文字列に変換されます: + The binary plus `+` concatenates strings. And if any of the operands is a string, the other one is converted to string too: ```js run alert( '1' + 2 ); // '12', string alert( 1 + '2' ); // '12', string ``` -代入 -: 単純な代入の `a = b` と `a *= 2` のような他の演算子と組み合わせたものがあります。 +Assignments +: There is a simple assignment: `a = b` and combined ones like `a *= 2`. -ビット単位 -: ビット演算子はビットレベルで整数を扱います。必要なときに、[docs](mdn:/JavaScript/Reference/Operators/Bitwise_Operators)を見てください。 +Bitwise +: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) when they are needed. -3項 -: 3つのパラメータを持つ唯一の演算子です: `cond ? resultA : result B`. `cond` が真の場合、`resultA` を返し、そうでなければ `resultB` を返します。 +Conditional +: The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`. -論理演算子 -: 論理積 `&&` と 論理和 `||` は短絡評価を行い、それが停止したところの値(`true`/`false` である必要はありません)を返します。論理否定 `!` はオペランドをブール型に変換し、その逆の値を返します。 +Logical operators +: Logical AND `&&` and OR `||` perform short-circuit evaluation and then return the value where it stopped (not necessary `true`/`false`). Logical NOT `!` converts the operand to boolean type and returns the inverse value. -NULL合体演算子 -: `??` 演算子は変数のリストから定義済みの値を選択する方法として提供されています。`a ?? b` の結果は `a` が `null/undefined` の場合は `b`、そうでなければ `a` です。 +Nullish coalescing operator +: The `??` operator provides a way to choose a defined value from a list of variables. The result of `a ?? b` is `a` unless it's `null/undefined`, then `b`. -比較 -: 異なる型の値のための等価チェック `==` は、それらを数値に変換します(`null` と `undefined`を除きます。それらは、お互いに等しく、他とは等しくなりません)。従って以下は等価です。: +Comparisons +: Equality check `==` for values of different types converts them to a number (except `null` and `undefined` that equal each other and nothing else), so these are equal: ```js run alert( 0 == false ); // true alert( 0 == '' ); // true ``` - 他の比較も同様に数値に変換します。 + Other comparisons convert to a number as well. - 厳密等価演算子 `===` は変換を行いません: 異なる型は常に異なる値を意味します。 + The strict equality operator `===` doesn't do the conversion: different types always mean different values for it. - 値 `null` と `undefined` は特別です: それらはお互いに等価 `==` であり、それ以外と等しくありません。 + Values `null` and `undefined` are special: they equal `==` each other and don't equal anything else. - より大きい/少ない演算子は文字列を1文字ずつ比較し、他の型は数値に変換します。 + Greater/less comparisons compare strings character-by-character, other types are converted to a number. -その他 -: 他にもカンマ演算子などがあります。 +Other operators +: There are few others, like a comma operator. -より詳細はこちらです: , , . +More in: , , , . -## ループ +## Loops -- 私たちは3つのタイプのループを説明しました: +- We covered 3 types of loops: ```js // 1 @@ -197,25 +197,26 @@ NULL合体演算子 } ``` -- `for(let...)` ループの中で宣言された変数はループの内側でのみ見えます。しかし、`let` を省略することができ、既存の変数を再利用することも出来ます。 -- ディレクティブ `break/continue` はループ全体/現在のイテレーションを終了させることができます。ネストされたループを停止する場合にはラベルを使ってください。 +- The variable declared in `for(let...)` loop is visible only inside the loop. But we can also omit `let` and reuse an existing variable. +- Directives `break/continue` allow to exit the whole loop/current iteration. Use labels to break nested loops. -詳細はこちらです: . +Details in: . -今後、オブジェクトを扱うためのより多くの種類のループを学びます。 +Later we'll study more types of loops to deal with objects. -## "switch" 構造 +## The "switch" construct -"switch" 構造は複数の `if` チェックに置換できます。それは比較に `===` を使います。 +The "switch" construct can replace multiple `if` checks. It uses `===` (strict equality) for comparisons. -例えば: +For instance: ```js run let age = prompt('Your age?', 18); switch (age) { case 18: - alert("Won't work"); // プロンプトの結果は文字列であり、数値ではありません + alert("Won't work"); // the result of prompt is a string, not a number + break; case "18": alert("This works!"); @@ -226,13 +227,13 @@ switch (age) { } ``` -詳細はこちらです: . +Details in: . -## 関数 +## Functions -私たちは、JavaScriptで関数を作る3つの方法をカバーしました。: +We covered three ways to create a function in JavaScript: -1. 関数宣言: メインコードフローの中の関数 +1. Function Declaration: the function in the main code flow ```js function sum(a, b) { @@ -242,42 +243,42 @@ switch (age) { } ``` -2. 関数式: 式のコンテキストにある関数 +2. Function Expression: the function in the context of an expression ```js let sum = function(a, b) { let result = a + b; return result; - } + }; ``` -3. アロー関数: +3. Arrow functions: ```js - // 右側の式です + // expression on the right side let sum = (a, b) => a + b; - // もしくは { ... } を使った複数行の構文で、return が必要です: + // or multi-line syntax with { ... }, need return here: let sum = (a, b) => { // ... return a + b; } - // 引数なし + // without arguments let sayHi = () => alert("Hello"); - // 1つの引数 + // with a single argument let double = n => n * 2; ``` -- 関数はローカル変数を持ちます: それらはその関数本体の中で宣言されます。このような変数は関数の中でだけ見えます。 -- パラメータはデフォルト値を持つことが出来ます。: `function sum(a = 1, b = 2) {...}`. -- 関数は常に何かを返します。もしも `return` 文がない場合は　`undefined` を返します。 +- Functions may have local variables: those declared inside its body or its parameter list. Such variables are only visible inside the function. +- Parameters can have default values: `function sum(a = 1, b = 2) {...}`. +- Functions always return something. If there's no `return` statement, then the result is `undefined`. -詳細はこちら: , . +Details: see , . -## これからが本番です +## More to come -ここまではJavaScriptの機能の簡単な一覧でした。今のところ、私たちは基本だけを学びました。このチュートリアルではさらに、JavaScriptのより特別で高度な機能について説明していきます。 +That was a brief list of JavaScript features. As of now we've studied only basics. Further in the tutorial you'll find more specials and advanced features of JavaScript. diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index df0232f737..348baeeb19 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,7 +1,12 @@ +<<<<<<< HEAD # Chrome でのデバッグ +======= +# Debugging in the browser +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d より複雑なコードを書く前に、デバッグについて話しましょう。 +<<<<<<< HEAD [デバッギング](https://en.wikipedia.org/wiki/Debugging)はスクリプト内のエラーを見つけ、修正するプロセスです。すべてのモダンブラウザと他の環境のほとんどはデバッギングツール（デバッグを簡単に行えるようにする開発者ツールのUI）をサポートしています。また、コードをステップ毎に追跡して正確に起きていることを確認することもできます。 ここでは、恐らくこの観点では最も機能が充実している Chrome を使います。 @@ -9,15 +14,29 @@ ## "sources" パネル Chromeのバージョンによっては少し違って見えるかもしれませんが、何があるかは明白でしょう。 +======= +[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on. + +We'll be using Chrome here, because it has enough features, most other browsers have a similar process. + +## The "Sources" panel +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d - Chromeの [example page](debugging/index.html) を開きます。 - `key:F12` (Mac: `key:Cmd+Opt+I`) で開発者ツールをONにします。 - `source` パネルを選択します。 +<<<<<<< HEAD この画面を見るのが初めてであれば、見ておくべきものがあります: +======= +- Open the [example page](debugging/index.html) in Chrome. +- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`). +- Select the `Sources` panel. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ![](chrome-open-sources.svg) +<<<<<<< HEAD トグルボタン はファイルを表示するタブを開きます。 それをクリックして、`index.html` 、次にツリービューの `hello.js` を選択しましょう。ここで表示される内容は次の通りです: @@ -33,26 +52,61 @@ Chromeのバージョンによっては少し違って見えるかもしれま 同じトグル を再びクリックすること、リソースの一覧やコードを隠すことができます。 ## コンソール +======= +![](chrome-open-sources.svg) + +The toggler button opens the tab with files. + +Let's click it and select `hello.js` in the tree view. Here's what should show up: + +![](chrome-tabs.svg) + +The Sources panel has 3 parts: + +1. The **File Navigator** pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. +2. The **Code Editor** pane shows the source code. +3. The **JavaScript Debugging** pane is for debugging, we'll explore it soon. + +Now you could click the same toggler again to hide the resources list and give the code some space. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `Esc` を押すとコンソールが下に表示されます。そこでコマンドを入力し、`key:Enter` を押すとコマンドを実行することができます。 +<<<<<<< HEAD 実行結果は下に表示されます。 +======= +If we press `key:Esc`, then a console opens below. We can type commands there and press `key:Enter` to execute. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例えば、ここでは `1+2 ` は `3` になり、`hello("debugger")` は何も返さないので、結果は `undefined` です: +<<<<<<< HEAD ![](chrome-sources-console.svg) ## ブレイクポイント +======= +For example, here `1+2` results in `3`, while the function call `hello("debugger")` returns nothing, so the result is `undefined`: + +![](chrome-sources-console.svg) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d [example page](debugging/index.html) のコードの中で何が起こっているのか見てみましょう。`hello.js` で、行番号 `4` をクリックします。コードではなく、左側にある数字の `"4"` です。 +<<<<<<< HEAD これでブレイクポイントがセットできました。行 `8` の数字もクリックしましょう。 +======= +Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d このようになるはずです(青はあなたがクリックした場所です): ![](chrome-sources-breakpoint.svg) +<<<<<<< HEAD *ブレイクポイント* はデバッガが自動でJavaScriptの実行を停止するコードのポイントです。 +======= +![](chrome-sources-breakpoint.svg) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d コードが停止している間、現在の変数を検査したり、コンソールでコマンドを実行することができます。つまり、そこでデバッグができます。 @@ -62,6 +116,7 @@ Chromeのバージョンによっては少し違って見えるかもしれま - 右クリックから削除を選択することで、ブレイクポイントを削除する - ...など +<<<<<<< HEAD ```smart header="条件付きのブレイクポイント" 行番号の *右クリック* で *条件付きの* ブレイクポイントを作ることができます。与えられた式が真の場合にのみトリガします。 @@ -71,6 +126,23 @@ Chromeのバージョンによっては少し違って見えるかもしれま ## デバッガコマンド 次のように、`debugger` コマンドを使うことでもコードを停止することができます: +======= +We can always find a list of breakpoints in the right panel. That's useful when we have many breakpoints in various files. It allows us to: +- Quickly jump to the breakpoint in the code (by clicking on it in the right panel). +- Temporarily disable the breakpoint by unchecking it. +- Remove the breakpoint by right-clicking and selecting Remove. +- ...And so on. + +```smart header="Conditional breakpoints" +*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression, that you should provide when you create it, is truthy. + +That's handy when we need to stop only for a certain variable value or for certain function parameters. +``` + +## The command "debugger" + +We can also pause the code by using the `debugger` command in it, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js function hello(name) { @@ -84,6 +156,7 @@ function hello(name) { } ``` +<<<<<<< HEAD これは、コードエディタで作業中、ブラウザに切り替えて開発者ツールを起動し、ブレイクポイントをセットするために開発者ツールでスクリプトを探すなどという手間をかけたくない場合にとても便利です。 @@ -96,27 +169,47 @@ function hello(name) { ![](chrome-sources-debugger-pause.svg) 右側にある情報のドロップダウンを開いてください(矢印のラベルがついています)。現在のコードの状態を調べることができます: +======= +Such command works only when the development tools are open, otherwise the browser ignores it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 1. **`Watch` -- 任意の式の現在の値を表示します。** +<<<<<<< HEAD `+` をクリックし、式を入力することができます。デバッガは、常にその値を表示し、実行中に自動的に再計算を行います。 +======= +In our example, `hello()` is called during the page load, so the easiest way to activate the debugger (after we've set the breakpoints) is to reload the page. So let's press `key:F5` (Windows, Linux) or `key:Cmd+R` (Mac). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 2. **`Call Stack` -- ネストされた呼び出しのチェーンを表示します。** +<<<<<<< HEAD 現時点では、デバッガは `hello()` 呼び出しの内側におり、`index.html` のスクリプト(そこに関数はないので、 "anonymous" と呼ばれます)によって呼び出されました。 +======= +![](chrome-sources-debugger-pause.svg) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d スタックの項目をクリックすると、デバッガは該当のコードにジャンプし、すべての変数も同様に調べられます。 3. **`Scope` -- 現在の変数。** `Local` はローカル関数の変数を表示します。また、ソース上でもハイライト表示されたそれらの値を見ることができます。 +<<<<<<< HEAD `Global` はグローバル変数を持っています +======= + You can click the plus `+` and input an expression. The debugger will show its value, automatically recalculating it in the process of execution. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d そこには我々がまだ学んでいない `this` キーワードもありますが、もうすぐ学びます。 ## 実行を追跡する +<<<<<<< HEAD スクリプトを *追跡* してみましょう。 +======= + If you click on a stack item (e.g. "anonymous"), the debugger jumps to the corresponding code, and all its variables can be examined as well. +3. **`Scope` -- current variables.** +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 右ペインの上部にそのボタンがあります。 @@ -132,13 +225,21 @@ function hello(name) { -- "ステップ": 次のコマンドを実行します, ホットキー `key:F9`. : 次の文を実行します。クリックすると、`alert` が表示されます。 +<<<<<<< HEAD これを何度もクリックすることで、1つずつスクリプト文が実行されます。 -- "ステップオーバー": 次のコマンドを実行しますが、*関数の中には入りません*, ホットキー `key:F10`。 : 上の "ステップ" コマンドと同じですが、次の文が関数呼び出しの場合に振る舞いが異なります。つまり、`alert` のような組み込みではなく、我々自身が作成した関数です。 +======= +There are buttons for it at the top of the right panel. Let's engage them. + + -- "Resume": continue the execution, hotkey `key:F8`. +: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d "ステップ" コマンドはその中に入り、その最初の行で実行を一時停止します。一方 "ステップオーバー" はネストされた関数呼び出しを目に見えない状態で実行し、関数の内部をスキップします。 +<<<<<<< HEAD その後、その関数の直後で実行が一時停止されます。 これは、関数呼び出しの内部で起きていることに興味がない場合に便利です。 @@ -156,32 +257,78 @@ function hello(name) { -- エラー発生時の自動一時停止の有効/無効 : 有効にして開発者ツールを開いている場合、スクリプトエラーが起きると実行が自動で一時停止します。そして、何が間違っていたかを知るために変数を分析することができます。なので、スクリプトがエラーで死んだ場合は、どこで死んでその時どんなコンテキストであるかを確認するため、デバッガを起動しこのオプションを有効にしてページを再読込しましょう。 +======= + ![](chrome-sources-debugger-trace-1.svg) + + The execution has resumed, reached another breakpoint inside `say()` and paused there. Take a look at the "Call Stack" at the right. It has increased by one more call. We're inside `say()` now. + + -- "Step": run the next command, hotkey `key:F9`. +: Run the next statement. If we click it now, `alert` will be shown. + + Clicking this again and again will step through all script statements one by one. + + -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`. +: Similar to the previous "Step" command, but behaves differently if the next statement is a function call (not a built-in, like `alert`, but a function of our own). + + If we compare them, the "Step" command goes into a nested function call and pauses the execution at its first line, while "Step over" executes the nested function call invisibly to us, skipping the function internals. + + The execution is then paused immediately after that function call. + + That's good if we're not interested to see what happens inside the function call. + + -- "Step into", hotkey `key:F11`. +: That's similar to "Step", but behaves differently in case of asynchronous function calls. If you're only starting to learn JavaScript, then you can ignore the difference, as we don't have asynchronous calls yet. + + For the future, just note that "Step" command ignores async actions, such as `setTimeout` (scheduled function call), that execute later. The "Step into" goes into their code, waiting for them if necessary. See [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) for more details. + + -- "Step out": continue the execution till the end of the current function, hotkey `key:Shift+F11`. +: Continue the execution and stop it at the very last line of the current function. That's handy when we accidentally entered a nested call using , but it does not interest us, and we want to continue to its end as soon as possible. + + -- enable/disable all breakpoints. +: That button does not move the execution. Just a mass on/off for breakpoints. + + -- enable/disable automatic pause in case of an error. +: When enabled, if the developer tools is open, an error during the script execution automatically pauses it. Then we can analyze variables in the debugger to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```smart header="Continue to here" コードの行で右クリックすると、"Continue to here" と呼ばれる素晴らしい選択肢を持つコンテキストメニューが開きます。 +<<<<<<< HEAD これは複数のステップを進めたいが、ブレイクポイントをセットするのが面倒なときに便利です。 +======= +That's handy when we want to move multiple steps forward to the line, but we're too lazy to set a breakpoint. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ## ロギング +<<<<<<< HEAD コンソールに何かを出力するために `console.log` 関数があります。 +======= +To output something to console from our code, there's `console.log` function. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例えば、これはコンソールに `0` から `4` までの値を出力します: ```js run // 見るにはコンソールを開いてください for (let i = 0; i < 5; i++) { - console.log("value", i); + console.log("value,", i); } ``` +<<<<<<< HEAD コンソールの中なので、通常のユーザはその出力を見ることはありません。見るためには、開発者ツールのコンソールタブを開くか、開発者ツールの別のタブで `key:Esc` を押します。 :下にコンソールが表示されます。 +======= +Regular users don't see that output, it is in the console. To see it, either open the Console panel of developer tools or press `key:Esc` while in another panel: that opens the console at the bottom. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d コードに十分なログを仕込んでいれば、デバッガなしで何が行われているか知ることができます。 ## サマリ +<<<<<<< HEAD これまで見てきた通り、スクリプトを一時停止するには主に3つの方法があります。 1. ブレイクポイント 2. `debugger` 文 @@ -190,7 +337,21 @@ for (let i = 0; i < 5; i++) { これらにより変数を検査し実行が間違っている場所を確認することができます。 ここで説明した以上に、開発者ツールには多くのオプションがあります。完全なマニュアルは です。 +======= +As we can see, there are three main ways to pause a script: +1. A breakpoint. +2. The `debugger` statements. +3. An error (if dev tools are open and the button is "on"). + +When paused, we can debug: examine variables and trace the code to see where the execution goes wrong. + +There are many more options in developer tools than covered here. The full manual is at . +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d このチャプターの情報はデバッグを始めるには十分ですが、今後、特にブラウザの作業が多い場合は、上記のサイトを見て開発者ツールのより高度な機能を調べてください。 +<<<<<<< HEAD また、開発者ツールの色んな場所をクリックすることで何が表示されるかを見ることが出来ます。恐らくそれは開発者ツールを学ぶのに最も近道です。同様に右クリックも忘れないように! +======= +Oh, and also you can click at various places of dev tools and just see what's showing up. That's probably the fastest route to learn dev tools. Don't forget about the right click and context menus! +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md index 60a22707d1..81e47c0e27 100644 --- a/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md +++ b/1-js/03-code-quality/02-coding-style/1-style-errors/solution.md @@ -2,6 +2,7 @@ あなたは次のような事に気づけます: ```js no-beautify +<<<<<<< HEAD function pow(x,n) // <- 引数の間にスペースがない { // <- 別の行に波括弧がある let result=1; // <- = の両側にスペースがない @@ -15,11 +16,30 @@ let x=prompt("x?",''), n=prompt("n?",'') // <-- 技術的には可能ですが, if (n<0) // <- (n < 0) の中にスペースがありません。また、その上に余分な行があるべきです。 { // <- 波括弧が別の行に分かれています // 下は -- 1行が長いです。2行に分けたほうがよいです +======= +function pow(x,n) // <- no space between arguments +{ // <- figure bracket on a separate line + let result=1; // <- no spaces before or after = + for(let i=0;i>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert(`Power ${n} is not supported, please enter an integer number greater than zero`); } else // <- "} else {" のように1行で書いたほうがいいです。 { +<<<<<<< HEAD alert(pow(x,n)) // spaces と ; がありません。 +======= + alert(pow(x,n)) // no spaces and missing ; +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d } ``` @@ -39,7 +59,7 @@ function pow(x, n) { let x = prompt("x?", ""); let n = prompt("n?", ""); -if (n < 0) { +if (n <= 0) { alert(`Power ${n} is not supported, please enter an integer number greater than zero`); } else { diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md index 60e3fd1480..7ef57d979a 100644 --- a/1-js/03-code-quality/02-coding-style/article.md +++ b/1-js/03-code-quality/02-coding-style/article.md @@ -1,13 +1,26 @@ +<<<<<<< HEAD # コーディングスタイル +======= +# Coding Style +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d コードはできるだけ綺麗で読みやすいものでなければなりません。 +<<<<<<< HEAD 複雑なタスクを正しくかつ読みやすい形でコード化する、それはまさにプログラミングの極意です。優れたコーディングスタイルは、そのための大きな助けとなるのです。 ## 構文 下記は、いくつかの推奨ルールを示したチートシートです(詳細は後述): +======= +That is actually the art of programming -- to take a complex task and code it in a way that is both correct and human-readable. A good code style greatly assists in that. + +## Syntax + +Here is a cheat sheet with some suggested rules (see below for more details): + +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ![](code-style.svg) 結果をジェネレータに渡します +======= +let question = generator.next().value; // <-- yield returns the value + +generator.next(4); // --> pass the result into the generator +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ![](genYield2.svg) +<<<<<<< HEAD 1. 最初の呼び出し `generator.next()` は常に引数なしです。実行を開始し、最初の `yield` ("2+2?") の結果を返します。この時点で、ジェネレータは実行を一時停止します(依然としてその行にいます)。 2. 次に、上の図にあるように、`yield` の結果は呼び出しコードの `question` 変数に入ります。 3. `generator.next(4)` でジェネレータが再開し、結果として `4` が入ります: `let result = 4` @@ -375,19 +581,52 @@ function* gen() { alert(ask1); // 4 let ask2 = yield "3 * 3?" +======= +1. The first call `generator.next()` should be always made without an argument (the argument is ignored if passed). It starts the execution and returns the result of the first `yield "2+2=?"`. At this point the generator pauses the execution, while staying on the line `(*)`. +2. Then, as shown at the picture above, the result of `yield` gets into the `question` variable in the calling code. +3. On `generator.next(4)`, the generator resumes, and `4` gets in as the result: `let result = 4`. + +Please note, the outer code does not have to immediately call `next(4)`. It may take time. That's not a problem: the generator will wait. + +For instance: + +```js +// resume the generator after some time +setTimeout(() => generator.next(4), 1000); +``` + +As we can see, unlike regular functions, a generator and the calling code can exchange results by passing values in `next/yield`. + +To make things more obvious, here's another example, with more calls: + +```js run +function* gen() { + let ask1 = yield "2 + 2 = ?"; + + alert(ask1); // 4 + + let ask2 = yield "3 * 3 = ?" +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert(ask2); // 9 } let generator = gen(); +<<<<<<< HEAD alert( generator.next().value ); // "2 + 2?" alert( generator.next(4).value ); // "3 * 3?" +======= +alert( generator.next().value ); // "2 + 2 = ?" + +alert( generator.next(4).value ); // "3 * 3 = ?" +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert( generator.next(9).done ); // true ``` +<<<<<<< HEAD 実行の図です: ![](genYield2-2.svg) @@ -409,15 +648,46 @@ alert( generator.next(9).done ); // true エラーを `yield` に渡すには、`generator.throw(err)` を呼び出す必要があります。この場合、`err` は `yield` のある行に投げられます。 例えば、ここで `"2 + 2?"` の yield はエラーになります: +======= +The execution picture: + +![](genYield2-2.svg) + +1. The first `.next()` starts the execution... It reaches the first `yield`. +2. The result is returned to the outer code. +3. The second `.next(4)` passes `4` back to the generator as the result of the first `yield`, and resumes the execution. +4. ...It reaches the second `yield`, that becomes the result of the generator call. +5. The third `next(9)` passes `9` into the generator as the result of the second `yield` and resumes the execution that reaches the end of the function, so `done: true`. + +It's like a "ping-pong" game. Each `next(value)` (excluding the first one) passes a value into the generator, that becomes the result of the current `yield`, and then gets back the result of the next `yield`. + +## generator.throw + +As we observed in the examples above, the outer code may pass a value into the generator, as the result of `yield`. + +...But it can also initiate (throw) an error there. That's natural, as an error is a kind of result. + +To pass an error into a `yield`, we should call `generator.throw(err)`. In that case, the `err` is thrown in the line with that `yield`. + +For instance, here the yield of `"2 + 2 = ?"` leads to an error: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run function* gen() { try { +<<<<<<< HEAD let result = yield "2 + 2?"; // (1) alert("The execution does not reach here, because the exception is thrown above"); } catch(e) { alert(e); // エラーを表示します +======= + let result = yield "2 + 2 = ?"; // (1) + + alert("The execution does not reach here, because the exception is thrown above"); + } catch(e) { + alert(e); // shows the error +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d } } @@ -430,6 +700,7 @@ generator.throw(new Error("The answer is not found in my database")); // (2) */!* ``` +<<<<<<< HEAD エラーは、行 `(2)` でジェネレータにスローされ、`yield` のある行 `(1)` で例外となります。上の例では、`try..catch` がそれをキャッチし表示しています。 キャッチしない場合、他の例外のように、ジェネレータは呼び出しコードで "落ちます"。 @@ -439,6 +710,17 @@ generator.throw(new Error("The answer is not found in my database")); // (2) ```js run function* generate() { let result = yield "2 + 2?"; // この行でエラー +======= +The error, thrown into the generator at line `(2)` leads to an exception in line `(1)` with `yield`. In the example above, `try..catch` catches it and shows it. + +If we don't catch it, then just like any exception, it "falls out" the generator into the calling code. + +The current line of the calling code is the line with `generator.throw`, labelled as `(2)`. So we can catch it here, like this: + +```js run +function* generate() { + let result = yield "2 + 2 = ?"; // Error in this line +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d } let generator = generate(); @@ -449,11 +731,16 @@ let question = generator.next().value; try { generator.throw(new Error("The answer is not found in my database")); } catch(e) { +<<<<<<< HEAD alert(e); // エラーを表示します +======= + alert(e); // shows the error +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d } */!* ``` +<<<<<<< HEAD ここでエラーをキャッチしなければ、通常どおり、外部の呼び出しコード(あれば)へ渡され、キャッチされなければスクリプトが強制終了します。 ## サマリ @@ -467,3 +754,40 @@ try { また、次のチャプターでは、非同期のジェネレータについて学びます。それは `for` ループで非同期的に生成されたデータをのストリームを読むのに使われます。 web プログラミングでは、しばしばストリーミングデータを扱います。e.g. ページングされた結果を取得する必要があるため、これはとても重要なユースケースです。 +======= +If we don't catch the error there, then, as usual, it falls through to the outer calling code (if any) and, if uncaught, kills the script. + +## generator.return + +`generator.return(value)` finishes the generator execution and return the given `value`. + +```js +function* gen() { + yield 1; + yield 2; + yield 3; +} + +const g = gen(); + +g.next(); // { value: 1, done: false } +g.return('foo'); // { value: "foo", done: true } +g.next(); // { value: undefined, done: true } +``` + +If we again use `generator.return()` in a completed generator, it will return that value again ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator/return)). + +Often we don't use it, as most of time we want to get all returning values, but it can be useful when we want to stop generator in a specific condition. + +## Summary + +- Generators are created by generator functions `function* f(…) {…}`. +- Inside generators (only) there exists a `yield` operator. +- The outer code and the generator may exchange results via `next/yield` calls. + +In modern JavaScript, generators are rarely used. But sometimes they come in handy, because the ability of a function to exchange data with the calling code during the execution is quite unique. And, surely, they are great for making iterable objects. + +Also, in the next chapter we'll learn async generators, which are used to read streams of asynchronously generated data (e.g paginated fetches over a network) in `for await ... of` loops. + +In web-programming we often work with streamed data, so that's another very important use case. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/article.md b/1-js/12-generators-iterators/2-async-iterators-generators/article.md index 404f0803d2..c394b3587b 100644 --- a/1-js/12-generators-iterators/2-async-iterators-generators/article.md +++ b/1-js/12-generators-iterators/2-async-iterators-generators/article.md @@ -1,4 +1,5 @@ +<<<<<<< HEAD # 非同期イテレーションとジェネレータ 非同期イテレーションを使用すると、要求に応じて非同期に来るデータに対して反復処理することができます。例えば、ネットワーク経由でチャンクごとに何かをダウンロードする場合です。そして、非同期ジェネレータはそれをさらに便利にします。 @@ -10,6 +11,19 @@ 反復可能（iterable）についてのトピックを思い出しましょう。 ここでは `range` のようなオブジェクトがあると考えます: +======= +# Async iteration and generators + +Asynchronous iteration allow us to iterate over data that comes asynchronously, on-demand. Like, for instance, when we download something chunk-by-chunk over a network. And asynchronous generators make it even more convenient. + +Let's see a simple example first, to grasp the syntax, and then review a real-life use case. + +## Recall iterables + +Let's recall the topic about iterables. + +The idea is that we have an object, such as `range` here: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let range = { from: 1, @@ -17,6 +31,7 @@ let range = { }; ``` +<<<<<<< HEAD そして、これに対して `for(value of range)` のように `for..of` を使用して、`1` から `5` までの値を取得したいとします。 つまり、オブジェクトに *反復する機能* を追加したい、です。 @@ -28,6 +43,19 @@ let range = { - `next()` は `{done: true/false, value:}` の形式の値の返却が必要で、`done:true` はループが終わりであることを意味します。 以下は、反復可能な `range` の実装です: +======= +...And we'd like to use `for..of` loop on it, such as `for(value of range)`, to get values from `1` to `5`. + +In other words, we want to add an *iteration ability* to the object. + +That can be implemented using a special method with the name `Symbol.iterator`: + +- This method is called in by the `for..of` construct when the loop is started, and it should return an object with the `next` method. +- For each iteration, the `next()` method is invoked for the next value. +- The `next()` should return a value in the form `{done: true/false, value:}`, where `done:true` means the end of the loop. + +Here's an implementation for the iterable `range`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let range = { @@ -35,14 +63,22 @@ let range = { to: 5, *!* +<<<<<<< HEAD [Symbol.iterator]() { // for..of の最初に一度呼ばれます +======= + [Symbol.iterator]() { // called once, in the beginning of for..of +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d */!* return { current: this.from, last: this.to, *!* +<<<<<<< HEAD next() { // 各イテレーションで呼ばれ、次の値を取得します +======= + next() { // called every iteration, to get the next value +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d */!* if (this.current <= this.last) { return { done: false, value: this.current++ }; @@ -59,6 +95,7 @@ for(let value of range) { } ``` +<<<<<<< HEAD 不明点があれば、通常のイテレータの詳細について [](info:iterable) を参照してください。 ## 非同期の反復可能 @@ -78,6 +115,27 @@ for(let value of range) { 最初の例として、先程と同様、反復可能な `range` オブジェクトを作成しましょう。ですが、今度は1秒毎に値を非同期的に返します。: やるべきことは、上のコードに対し少し置き換えるだけです: +======= +If anything is unclear, please visit the chapter [](info:iterable), it gives all the details about regular iterables. + +## Async iterables + +Asynchronous iteration is needed when values come asynchronously: after `setTimeout` or another kind of delay. + +The most common case is that the object needs to make a network request to deliver the next value, we'll see a real-life example of it a bit later. + +To make an object iterable asynchronously: + +1. Use `Symbol.asyncIterator` instead of `Symbol.iterator`. +2. The `next()` method should return a promise (to be fulfilled with the next value). + - The `async` keyword handles it, we can simply make `async next()`. +3. To iterate over such an object, we should use a `for await (let item of iterable)` loop. + - Note the `await` word. + +As a starting example, let's make an iterable `range` object, similar like the one before, but now it will return values asynchronously, one per second. + +All we need to do is to perform a few replacements in the code above: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let range = { @@ -96,7 +154,11 @@ let range = { */!* *!* +<<<<<<< HEAD // async next の中で、 "await" が使えます +======= + // note: we can use "await" inside the async next: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d await new Promise(resolve => setTimeout(resolve, 1000)); // (3) */!* @@ -121,6 +183,7 @@ let range = { })() ``` +<<<<<<< HEAD ご覧の通り、構成は通常のイテレータと同様です: 1. オブジェクトを非同期的に反復可能にするために、`Symbol.asyncIterator` メソッドが必要です。 `(1)` @@ -140,17 +203,45 @@ let range = { 通常の、同期的なイテレータを要する機能は、非同期イテレータでは動作しません。 例えば、スプレッド演算子は動作しません: +======= +As we can see, the structure is similar to regular iterators: + +1. To make an object asynchronously iterable, it must have a method `Symbol.asyncIterator` `(1)`. +2. This method must return the object with `next()` method returning a promise `(2)`. +3. The `next()` method doesn't have to be `async`, it may be a regular method returning a promise, but `async` allows us to use `await`, so that's convenient. Here we just delay for a second `(3)`. +4. To iterate, we use `for await(let value of range)` `(4)`, namely add "await" after "for". It calls `range[Symbol.asyncIterator]()` once, and then its `next()` for values. + +Here's a small table with the differences: + +| | Iterators | Async iterators | +|-------|-----------|-----------------| +| Object method to provide iterator | `Symbol.iterator` | `Symbol.asyncIterator` | +| `next()` return value is | any value | `Promise` | +| to loop, use | `for..of` | `for await..of` | + +````warn header="The spread syntax `...` doesn't work asynchronously" +Features that require regular, synchronous iterators, don't work with asynchronous ones. + +For instance, a spread syntax won't work: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js alert( [...range] ); // Error, no Symbol.iterator ``` +<<<<<<< HEAD `Symbol.asyncIterator` ではなく、`Symbol.iterator` があることを期待しているので、これは当然の結果です。 また、`for..of` のケースに対しても同様です: `await` なしの構文は `Symbol.iterator` を必要とします。 +======= +That's natural, as it expects to find `Symbol.iterator`, not `Symbol.asyncIterator`. + +It's also the case for `for..of`: the syntax without `await` needs `Symbol.iterator`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```` ## Recall generators +<<<<<<< HEAD ここでジェネレータを思い出しましょう。ジェネレータを使用すると、イテレーションのコードをはるかに短くすることができます。ほとんどの場合、反復可能にしたい場合、ジェネレータを使用します。 単純にするために、いくつかの重要な点を省略すると、ジェネレータは "値を生成(yield)する関数" です。この詳細は [](info:generators) で説明しています。 @@ -158,6 +249,15 @@ alert( [...range] ); // Error, no Symbol.iterator ジェネレータは `function*` ( * に注目)でラベル付けされたもので、値を生成すのに `yield` を使用します。ジェネレータをループするのに `for..of` が利用できます。 この例は `start` から end` までの一連の値を生成します: +======= +Now let's recall generators, as they allow to make iteration code much shorter. Most of the time, when we'd like to make an iterable, we'll use generators. + +For sheer simplicity, omitting some important stuff, they are "functions that generate (yield) values". They are explained in detail in the chapter [](info:generators). + +Generators are labelled with `function*` (note the star) and use `yield` to generate a value, then we can use `for..of` to loop over them. + +This example generates a sequence of values from `start` to `end`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run function* generateSequence(start, end) { @@ -171,7 +271,11 @@ for(let value of generateSequence(1, 5)) { } ``` +<<<<<<< HEAD すでにご存知の通り、オブジェクトを反復可能にするには `Symbol.iterator` の追加が必要です。 +======= +As we already know, to make an object iterable, we should add `Symbol.iterator` to it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js let range = { @@ -185,14 +289,22 @@ let range = { } ``` +<<<<<<< HEAD `Symbol.iterator` の一般的なプラクティスはジェネレータを返すことで、以下のようにコードをより短くできます: +======= +A common practice for `Symbol.iterator` is to return a generator, it makes the code shorter, as you can see: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let range = { from: 1, to: 5, +<<<<<<< HEAD *[Symbol.iterator]() { // [Symbol.iterator]: function*() の短縮形 +======= + *[Symbol.iterator]() { // a shorthand for [Symbol.iterator]: function*() +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d for(let value = this.from; value <= this.to; value++) { yield value; } @@ -204,6 +316,7 @@ for(let value of range) { } ``` +<<<<<<< HEAD より詳細を知りたい場合は、[](info:generators) の章を参照してください。 通常のジェネレータでは、`await` は使用できません。すべての値は `for..of` 構造によって同期的である必要があります。 @@ -219,6 +332,23 @@ for(let value of range) { 構文はシンプルです。`function*` の前に `async` をつけます。これでジェネレートが非同期になります。 また、次のようにそれをイテレートするのに、`for await (...)` を使用します。 +======= +Please see the chapter [](info:generators) if you'd like more details. + +In regular generators we can't use `await`. All values must come synchronously, as required by the `for..of` construct. + +What if we'd like to generate values asynchronously? From network requests, for instance. + +Let's switch to asynchronous generators to make it possible. + +## Async generators (finally) + +For most practical applications, when we'd like to make an object that asynchronously generates a sequence of values, we can use an asynchronous generator. + +The syntax is simple: prepend `function*` with `async`. That makes the generator asynchronous. + +And then use `for await (...)` to iterate over it, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run *!*async*/!* function* generateSequence(start, end) { @@ -226,7 +356,11 @@ for(let value of range) { for (let i = start; i <= end; i++) { *!* +<<<<<<< HEAD // await が使えます! +======= + // Wow, can use await! +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d await new Promise(resolve => setTimeout(resolve, 1000)); */!* @@ -239,12 +373,17 @@ for(let value of range) { let generator = generateSequence(1, 5); for *!*await*/!* (let value of generator) { +<<<<<<< HEAD alert(value); // 1, then 2, then 3, then 4, then 5 (間に遅延をはさみながら) +======= + alert(value); // 1, then 2, then 3, then 4, then 5 (with delay between) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d } })(); ``` +<<<<<<< HEAD ジェネレータは非同期なので、その中で `await` や promise に依存するネットワークリクエストを実行したりできます。 ````smart header="内部的な違い" @@ -253,33 +392,63 @@ for(let value of range) { 非同期ジェネレータの場合、`generator.next()` メソッドは非同期であり、promise を返します。 通常のジェネレータでは、`result = generator.next()` を使用して値を取得します。非同期ジェネレータでは、次のように `await` を追加する必要があります: +======= +As the generator is asynchronous, we can use `await` inside it, rely on promises, perform network requests and so on. + +````smart header="Under-the-hood difference" +Technically, if you're an advanced reader who remembers the details about generators, there's an internal difference. + +For async generators, the `generator.next()` method is asynchronous, it returns promises. + +In a regular generator we'd use `result = generator.next()` to get values. In an async generator, we should add `await`, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js result = await generator.next(); // result = {value: ..., done: true/false} ``` +<<<<<<< HEAD そういうわけで、非同期ジェネレータは `for await...of` で動作します。 +======= +That's why async generators work with `for await...of`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```` ### Async iterable range +<<<<<<< HEAD 通常のジェネレータは `Symbol.iterator` を使用することで、イテレーションコードをより短くすることができます。 それと同様に、非同期ジェネレータも `Symbol.asyncIterator` を使用することで、非同期のイテレーションを実装することができます。 例えば、1秒に1回、非同期に値を生成する `range` オブジェクトを作りたい場合、`Symbol.iterator` を非同期の `Symbol.asyncIterator` に置き換えることで実現できます: +======= +Regular generators can be used as `Symbol.iterator` to make the iteration code shorter. + +Similar to that, async generators can be used as `Symbol.asyncIterator` to implement the asynchronous iteration. + +For instance, we can make the `range` object generate values asynchronously, once per second, by replacing synchronous `Symbol.iterator` with asynchronous `Symbol.asyncIterator`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run let range = { from: 1, to: 5, +<<<<<<< HEAD // この行は次と同じです: [Symbol.asyncIterator]: async function*() { +======= + // this line is same as [Symbol.asyncIterator]: async function*() { +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d *!* async *[Symbol.asyncIterator]() { */!* for(let value = this.from; value <= this.to; value++) { +<<<<<<< HEAD // 値の間に間隔を作り、なにかを待ちます +======= + // make a pause between values, wait for something +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d await new Promise(resolve => setTimeout(resolve, 1000)); yield value; @@ -296,6 +465,7 @@ let range = { })(); ``` +<<<<<<< HEAD これで、値は繰り返し毎に1秒の遅延で来ます。 ```smart @@ -323,6 +493,35 @@ let range = { `fetchCommits(repo)` 関数を作り、必要に応じてリクエストを行いコミットを取得します。そして、ページネーションについて考慮します。それは単純な非同期イテレーション `for await..of` です。 使い方は以下の通りです: +======= +Now values come with a delay of 1 second between them. + +```smart +Technically, we can add both `Symbol.iterator` and `Symbol.asyncIterator` to the object, so it's both synchronously (`for..of`) and asynchronously (`for await..of`) iterable. + +In practice though, that would be a weird thing to do. +``` + +## Real-life example: paginated data + +So far we've seen basic examples, to gain understanding. Now let's review a real-life use case. + +There are many online services that deliver paginated data. For instance, when we need a list of users, a request returns a pre-defined count (e.g. 100 users) - "one page", and provides a URL to the next page. + +This pattern is very common. It's not about users, but just about anything. + +For instance, GitHub allows us to retrieve commits in the same, paginated fashion: + +- We should make a request to `fetch` in the form `https://api.github.com/repos//commits`. +- It responds with a JSON of 30 commits, and also provides a link to the next page in the `Link` header. +- Then we can use that link for the next request, to get more commits, and so on. + +For our code, we'd like to have a simpler way to get commits. + +Let's make a function `fetchCommits(repo)` that gets commits for us, making requests whenever needed. And let it care about all pagination stuff. For us it'll be a simple async iteration `for await..of`. + +So the usage will be like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js for await (let commit of fetchCommits("username/repository")) { @@ -330,7 +529,11 @@ for await (let commit of fetchCommits("username/repository")) { } ``` +<<<<<<< HEAD これがその関数で、非同期ジェネレータで実装しています: +======= +Here's such function, implemented as async generator: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js async function* fetchCommits(repo) { @@ -338,6 +541,7 @@ async function* fetchCommits(repo) { while (url) { const response = await fetch(url, { // (1) +<<<<<<< HEAD headers: {'User-Agent': 'Our script'}, // github は user-agent ヘッダを要求します }); @@ -350,12 +554,27 @@ async function* fetchCommits(repo) { url = nextPage; for(let commit of body) { // (4) ページが終わるまで1つずつ yield commits +======= + headers: {'User-Agent': 'Our script'}, // github needs any user-agent header + }); + + const body = await response.json(); // (2) response is JSON (array of commits) + + // (3) the URL of the next page is in the headers, extract it + let nextPage = response.headers.get('Link').match(/<(.*?)>; rel="next"/); + nextPage = nextPage?.[1]; + + url = nextPage; + + for(let commit of body) { // (4) yield commits one by one, until the page ends +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d yield commit; } } } ``` +<<<<<<< HEAD どのように動くかの説明です: 1. ブラウザの [fetch](info:fetch) メソッドを使ってコミットをダウンロードします。 @@ -368,6 +587,20 @@ async function* fetchCommits(repo) { 4. そして、受け取ったすべてのコミットを返し、それらが終了すると、次の `while(url)` イテレーションがトリガーされ、もう1つ要求を行います。 使用例 (コンソールにコミット者を表示します): +======= +More explanations about how it works: + +1. We use the browser [fetch](info:fetch) method to download the commits. + + - The initial URL is `https://api.github.com/repos//commits`, and the next page will be in the `Link` header of the response. + - The `fetch` method allows us to supply authorization and other headers if needed -- here GitHub requires `User-Agent`. +2. The commits are returned in JSON format. +3. We should get the next page URL from the `Link` header of the response. It has a special format, so we use a regular expression for that (we will learn this feature in [Regular expressions](info:regular-expressions)). + - The next page URL may look like `https://api.github.com/repositories/93253246/commits?page=2`. It's generated by GitHub itself. +4. Then we yield the received commits one by one, and when they finish, the next `while(url)` iteration will trigger, making one more request. + +An example of use (shows commit authors in console): +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run (async () => { @@ -385,6 +618,7 @@ async function* fetchCommits(repo) { })(); +<<<<<<< HEAD // 補足: 外部のサンドボックスで実行している場合、上で記述した fetchCommits 関数をここに貼り付ける必要があります。 ``` @@ -414,4 +648,36 @@ async function* fetchCommits(repo) { Web 開発では、データがチャンクごとに流れるとき、データのストリームを扱うことがよくあります。例えば、大きなファイルのダウンロードやアップロードです。 -非同期ジェネレータを使用して、このようなデータを処理することもできます。また、ブラウザなどの一部の環境では、Stream と呼ばれる別の API もあることに注目してください。これは、データを変換してあるストリームから別のストリームに渡す特別なインターフェースを提供しますす(e.g ある場所からダウンロードして、すぐに別の場所に送信する場合)。 \ No newline at end of file +非同期ジェネレータを使用して、このようなデータを処理することもできます。また、ブラウザなどの一部の環境では、Stream と呼ばれる別の API もあることに注目してください。これは、データを変換してあるストリームから別のストリームに渡す特別なインターフェースを提供しますす(e.g ある場所からダウンロードして、すぐに別の場所に送信する場合)。 +======= +// Note: If you are running this in an external sandbox, you'll need to paste here the function fetchCommits described above +``` + +That's just what we wanted. + +The internal mechanics of paginated requests is invisible from the outside. For us it's just an async generator that returns commits. + +## Summary + +Regular iterators and generators work fine with the data that doesn't take time to generate. + +When we expect the data to come asynchronously, with delays, their async counterparts can be used, and `for await..of` instead of `for..of`. + +Syntax differences between async and regular iterators: + +| | Iterable | Async Iterable | +|-------|-----------|-----------------| +| Method to provide iterator | `Symbol.iterator` | `Symbol.asyncIterator` | +| `next()` return value is | `{value:…, done: true/false}` | `Promise` that resolves to `{value:…, done: true/false}` | + +Syntax differences between async and regular generators: + +| | Generators | Async generators | +|-------|-----------|-----------------| +| Declaration | `function*` | `async function*` | +| `next()` return value is | `{value:…, done: true/false}` | `Promise` that resolves to `{value:…, done: true/false}` | + +In web-development we often meet streams of data, when it flows chunk-by-chunk. For instance, downloading or uploading a big file. + +We can use async generators to process such data. It's also noteworthy that in some environments, like in browsers, there's also another API called Streams, that provides special interfaces to work with such streams, to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/head.html b/1-js/12-generators-iterators/2-async-iterators-generators/head.html index 74d66a8b8c..b787cffd2d 100644 --- a/1-js/12-generators-iterators/2-async-iterators-generators/head.html +++ b/1-js/12-generators-iterators/2-async-iterators-generators/head.html @@ -11,7 +11,11 @@ // the URL of the next page is in the headers, extract it let nextPage = response.headers.get('Link').match(/<(.*?)>; rel="next"/); +<<<<<<< HEAD nextPage = nextPage && nextPage[1]; +======= + nextPage = nextPage?.[1]; +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d url = nextPage; diff --git a/1-js/12-generators-iterators/index.md b/1-js/12-generators-iterators/index.md index 9a6bab7c9f..95bc46a832 100644 --- a/1-js/12-generators-iterators/index.md +++ b/1-js/12-generators-iterators/index.md @@ -1,2 +1,6 @@ +<<<<<<< HEAD # ジェネレータ, 高度なイテレーション +======= +# Generators, advanced iteration +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index 8214e7aae3..9c79746151 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -1,4 +1,5 @@ +<<<<<<< HEAD # モジュール, 導入 アプリケーションが大きくなるにつれ、それを複数のファイルに分割したくなります。いわゆる 'モジュール' です。通常、モジュールはクラスや便利な関数のライブラリを含みます。 @@ -27,6 +28,36 @@ - `import` は他のモジュールから機能をインポートできるようにします。 例えば、関数をエクスポートしているファイル `sayHi.js` があります: +======= +# Modules, introduction + +As our application grows bigger, we want to split it into multiple files, so called "modules". A module may contain a class or a library of functions for a specific purpose. + +For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple, so there was no need. + +But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand. + +To name some (for historical reasons): + +- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](https://requirejs.org/). +- [CommonJS](https://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server. +- [UMD](https://github.com/umdjs/umd) -- one more module system, suggested as a universal one, compatible with AMD and CommonJS. + +Now these all slowly became a part of history, but we still can find them in old scripts. + +The language-level module system appeared in the standard in 2015, gradually evolved since then, and is now supported by all major browsers and in Node.js. So we'll study the modern JavaScript modules from now on. + +## What is a module? + +A module is just a file. One script is one module. As simple as that. + +Modules can load each other and use special directives `export` and `import` to interchange functionality, call functions of one module from another one: + +- `export` keyword labels variables and functions that should be accessible from outside the current module. +- `import` allows the import of functionality from other modules. + +For instance, if we have a file `sayHi.js` exporting a function: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 📁 sayHi.js @@ -35,7 +66,11 @@ export function sayHi(user) { } ``` +<<<<<<< HEAD ...そして、別のファイルでそれをインポートして使います。: +======= +...Then another file may import and use it: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 📁 main.js @@ -45,6 +80,7 @@ alert(sayHi); // function... sayHi('John'); // Hello, John! ``` +<<<<<<< HEAD `import` ディレクティブは現在のファイルからの相対パス `./sayHi.js` のモジュールを読み込み、エクスポートされた関数 `sayHi` を対応する変数に割り当てます。 ブラウザで例を実行してみましょう。 @@ -70,6 +106,33 @@ sayHi('John'); // Hello, John! ### 常に "use strict" モジュールは常に `use strict` です。E.g. 未宣言変数への代入はエラーになります。 +======= +The `import` directive loads the module by path `./sayHi.js` relative to the current file, and assigns exported function `sayHi` to the corresponding variable. + +Let's run the example in-browser. + +As modules support special keywords and features, we must tell the browser that a script should be treated as a module, by using the attribute ` ``` +<<<<<<< HEAD ### モジュールレベルのスコープ 各モジュールには独自の最上位のスコープがあります。つまり、モジュール内の最上位の変数や関数は他のスクリプトからは見えません。 @@ -103,6 +167,34 @@ sayHi('John'); // Hello, John! ```html run @@ -114,6 +206,7 @@ sayHi('John'); // Hello, John! ``` ```smart +<<<<<<< HEAD ブラウザでは、e.g. `window.user = "John"` のように、変数を明示的に `window` プロパティに割り当てることで、ウィンドウレベルのグローバルな変数を作ることができます。 以降、`type="module"` の有無に関わらず、すべてのスクリプトはそれが参照できます。 @@ -130,6 +223,24 @@ sayHi('John'); // Hello, John! いくつか例を見てみましょう。 まず、メッセージを表示すると言ったような、副作用をもたらすモジュールコードを実行する場合、複数回インポートしてもトリガされるのは1度だけです(初回)。: +======= +In the browser, we can make a variable window-level global by explicitly assigning it to a `window` property, e.g. `window.user = "John"`. + +Then all scripts will see it, both with `type="module"` and without it. + +That said, making such global variables is frowned upon. Please try to avoid them. +``` + +### A module code is evaluated only the first time when imported + +If the same module is imported into multiple other modules, its code is executed only once, upon the first import. Then its exports are given to all further importers. + +The one-time evaluation has important consequences, that we should be aware of. + +Let's see a couple of examples. + +First, if executing a module code brings side-effects, like showing a message, then importing it multiple times will trigger it only once -- the first time: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 📁 alert.js @@ -137,12 +248,17 @@ alert("Module is evaluated!"); ``` ```js +<<<<<<< HEAD // 別のファイルから同じモジュールをインポート +======= +// Import the same module from different files +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d // 📁 1.js import `./alert.js`; // Module is evaluated! // 📁 2.js +<<<<<<< HEAD import `./alert.js`; // (nothing) ``` @@ -153,6 +269,18 @@ import `./alert.js`; // (nothing) より高度な例を考えてみましょう。 モジュールがオブジェクトをエクスポートするとしましょう: +======= +import `./alert.js`; // (shows nothing) +``` + +The second import shows nothing, because the module has already been evaluated. + +There's a rule: top-level module code should be used for initialization, creation of module-specific internal data structures. If we need to make something callable multiple times - we should export it as a function, like we did with `sayHi` above. + +Now, let's consider a deeper example. + +Let's say, a module exports an object: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 📁 admin.js @@ -161,9 +289,15 @@ export let admin = { }; ``` +<<<<<<< HEAD このモジュールが複数のファイルからインポートされた場合、モジュールは初回にだけ評価され、`admin` オブジェクトが生成され、その後このモジュールをインポートするすべてのモジュールに渡されます。 すべてのインポータは正確に1つの `admin` オブジェクトを取得することになります。: +======= +If this module is imported from multiple files, the module is only evaluated the first time, `admin` object is created, and then passed to all further importers. + +All importers get exactly the one and only `admin` object: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 📁 1.js @@ -175,6 +309,7 @@ import {admin} from './admin.js'; alert(admin.name); // Pete *!* +<<<<<<< HEAD // 1.js と 2.js 同じオブジェクトをインポートしました // 1.js で行われた変更は 2.js でも見えます */!* @@ -194,6 +329,27 @@ alert(admin.name); // Pete 3. 以降のインポートでは、そのモジュールを使用します。 例えば、`admin.js` モジュールは特定の機能（例. 認証など）を提供するかもしれませんが、外部から `admin` オブジェクトにクレデンシャル情報が来ることを期待します。: +======= +// Both 1.js and 2.js reference the same admin object +// Changes made in 1.js are visible in 2.js +*/!* +``` + +As you can see, when `1.js` changes the `name` property in the imported `admin`, then `2.js` can see the new `admin.name`. + +That's exactly because the module is executed only once. Exports are generated, and then they are shared between importers, so if something changes the `admin` object, other importers will see that. + +**Such behavior is actually very convenient, because it allows us to *configure* modules.** + +In other words, a module can provide a generic functionality that needs a setup. E.g. authentication needs credentials. Then it can export a configuration object expecting the outer code to assign to it. + +Here's the classical pattern: +1. A module exports some means of configuration, e.g. a configuration object. +2. On the first import we initialize it, write to its properties. The top-level application script may do that. +3. Further imports use the module. + +For instance, the `admin.js` module may provide certain functionality (e.g. authentication), but expect the credentials to come into the `config` object from outside: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 📁 admin.js @@ -204,9 +360,15 @@ export function sayHi() { } ``` +<<<<<<< HEAD ここで、`admin.js` は `config` オブジェクトをエクスポートします（初期は空ですが、デフォルトプロパティもある場合もあります）。 次に `init.js` 、我々のアプリの最初のスクリプトで、`config` をインポートし、`config.user` を設定します: +======= +Here, `admin.js` exports the `config` object (initially empty, but may have default properties too). + +Then in `init.js`, the first script of our app, we import `config` from it and set `config.user`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 📁 init.js @@ -214,9 +376,15 @@ import {config} from './admin.js'; config.user = "Pete"; ``` +<<<<<<< HEAD ...これでモジュール `admin.js` は構成されました。 以降のインポートはこれを呼び出すことができ、現在のユーザが正しく表示されます: +======= +...Now the module `admin.js` is configured. + +Further importers can call it, and it correctly shows the current user: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // 📁 another.js @@ -228,6 +396,7 @@ sayHi(); // Ready to serve, *!*Pete*/!*! ### import.meta +<<<<<<< HEAD オブジェクト `import.meta` は現在のモジュールに関する情報を含んでいます。 この内容は環境に依存します。ブラウザでは、スクリプトの url、HTML 内であれば現在のウェブページの url を含んでいます。: @@ -246,6 +415,26 @@ sayHi(); // Ready to serve, *!*Pete*/!*! モジュールでは、最上位の `this` は undefined です。 `this` がグローバルオブジェクトである非モジュールスクリプトとの比較です:。 +======= +The object `import.meta` contains the information about the current module. + +Its content depends on the environment. In the browser, it contains the URL of the script, or a current webpage URL if inside HTML: + +```html run height=0 + +``` + +### In a module, "this" is undefined + +That's kind of a minor feature, but for completeness we should mention it. + +In a module, top-level `this` is undefined. + +Compare it to non-module scripts, where `this` is a global object: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run height=0 ``` +<<<<<<< HEAD ## ブラウザ固有の特徴 通常のスクリプトと比べて、`type="module"` を持つスクリプトには、ブラウザ固有の違いもいくつかあります。 @@ -275,10 +465,31 @@ sayHi(); // Ready to serve, *!*Pete*/!*! 副作用として、モジュールスクリプトは常にその下の HTML 要素が見えます。 例: +======= +## Browser-specific features + +There are also several browser-specific differences of scripts with `type="module"` compared to regular ones. + +You may want to skip this section for now if you're reading for the first time, or if you don't use JavaScript in a browser. + +### Module scripts are deferred + +Module scripts are *always* deferred, same effect as `defer` attribute (described in the chapter [](info:script-async-defer)), for both external and inline scripts. + +In other words: +- downloading external module scripts ` + +Compare to regular script below: + + ``` +<<<<<<< HEAD 注意: 実際には1つ目のスクリプトの前に2つ目のスクリプトが動作します! なので、最初に `undefined` が表示され、その後 `object` が表示されます。 これは、モジュールが遅延されているためです。通常のスクリプトはすぐに実行するので、最初に出力されます。 @@ -317,6 +543,29 @@ sayHi(); // Ready to serve, *!*Pete*/!*! ```html +======= +Please note: the second script actually runs before the first! So we'll see `undefined` first, and then `object`. + +That's because modules are deferred, so we wait for the document to be processed. The regular script runs immediately, so we see its output first. + +When using modules, we should be aware that the HTML page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put "loading indicators", or otherwise ensure that the visitor won't be confused by that. + +### Async works on inline scripts + +For non-module scripts, the `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document. + +For module scripts, it works on inline scripts as well. + +For example, the inline script below has `async`, so it doesn't wait for anything. + +It performs the import (fetches `./analytics.js`) and runs when ready, even if the HTML document is not finished yet, or if other scripts are still pending. + +That's good for functionality that doesn't depend on anything, like counters, ads, document-level event listeners. + +```html + + +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` +<<<<<<< HEAD ### 外部スクリプト 外部モジュールスクリプトには、2つの大きな違いがあります。: @@ -331,10 +581,20 @@ sayHi(); // Ready to serve, *!*Pete*/!*! 1. 同じ `src` の外部スクリプトは一度だけ実行されます: ```html +======= +### External scripts + +External scripts that have `type="module"` are different in two aspects: + +1. External scripts with the same `src` run only once: + ```html + +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` +<<<<<<< HEAD 2. 別のドメインから取得された外部スクリプトは[CORS](mdn:Web/HTTP/CORS) ヘッダを必要とします。言い換えると、モジュールスクリプトが別のドメインから取得された場合、リモートサーバはその取得が許可されていることを示すために、ヘッダ `Access-Control-Allow-Origin: *` (`*` の代わりに取得するドメインを指定する場合もあります)を提供しなければなりません。 ```html @@ -359,6 +619,32 @@ Node.js やバンドルツールのような特定の環境では、モジュー ### 互換性, "nomodule" 古いブラウザは `type="module"` を理解しません。未知のタイプのスクリプトは単に無視されます。それらには、`nomodule` 属性を使って、フォールバックを提供することが可能です。: +======= +2. External scripts that are fetched from another origin (e.g. another site) require [CORS](mdn:Web/HTTP/CORS) headers, as described in the chapter . In other words, if a module script is fetched from another origin, the remote server must supply a header `Access-Control-Allow-Origin` allowing the fetch. + ```html + + + + ``` + + That ensures better security by default. + +### No "bare" modules allowed + +In the browser, `import` must get either a relative or absolute URL. Modules without any path are called "bare" modules. Such modules are not allowed in `import`. + +For instance, this `import` is invalid: +```js +import {sayHi} from 'sayHi'; // Error, "bare" module +// the module must have a path, e.g. './sayHi.js' or wherever the module is +``` + +Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have their own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet. + +### Compatibility, "nomodule" + +Old browsers do not understand `type="module"`. Scripts of an unknown type are just ignored. For them, it's possible to provide a fallback using the `nomodule` attribute: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run @@ -416,3 +703,55 @@ Node.js やバンドルツールのような特定の環境では、モジュー プロダクション環境では多くの場合、パフォーマンスや他の理由で、モジュールを1つにまとめるために [Webpack](https://webpack.js.org) などのバンドラを使用します。 次の章ではより多くのモジュールの例と、どのようにエクスポート/インポートされるかを見ていきます。 +======= + alert("Modern browsers know both type=module and nomodule, so skip this") + alert("Old browsers ignore script with unknown type=module, but execute this."); + +``` + +## Build tools + +In real-life, browser modules are rarely used in their "raw" form. Usually, we bundle them together with a special tool such as [Webpack](https://webpack.js.org/) and deploy to the production server. + +One of the benefits of using bundlers -- they give more control over how modules are resolved, allowing bare modules and much more, like CSS/HTML modules. + +Build tools do the following: + +1. Take a "main" module, the one intended to be put in ` +``` + +That said, native modules are also usable. So we won't be using Webpack here: you can configure it later. + +## Summary + +To summarize, the core concepts are: + +1. A module is a file. To make `import/export` work, browsers need ` + + diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.js b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.js new file mode 100644 index 0000000000..ea55b44781 --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.js @@ -0,0 +1,24 @@ +const startMessagesBtn = document.querySelector('.start-messages'); // (1) +const closeWindowBtn = document.querySelector('.window__button'); // (2) +const windowElementRef = new WeakRef(document.querySelector(".window__body")); // (3) + +startMessagesBtn.addEventListener('click', () => { // (4) + startMessages(windowElementRef); + startMessagesBtn.disabled = true; +}); + +closeWindowBtn.addEventListener('click', () => document.querySelector(".window__body").remove()); // (5) + + +const startMessages = (element) => { + const timerId = setInterval(() => { // (6) + if (element.deref()) { // (7) + const payload = document.createElement("p"); + payload.textContent = `Message: System status OK: ${new Date().toLocaleTimeString()}`; + element.deref().append(payload); + } else { // (8) + alert("The element has been deleted."); // (9) + clearInterval(timerId); + } + }, 1000); +}; \ No newline at end of file diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-01.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-01.svg new file mode 100644 index 0000000000..2a507dbcdb --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-01.svg @@ -0,0 +1,32 @@ + + + + + + + + user + + name: "John" + Object + + <global> + + + + + + + + + + + + + + + + admin + + + \ No newline at end of file diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-02.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-02.svg new file mode 100644 index 0000000000..6cc199a128 --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-02.svg @@ -0,0 +1,33 @@ + + + + + + + + + + <global> + + + name: "John" + Object + + + + + + + + + + + + admin + + + + + + + \ No newline at end of file diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-03.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-03.svg new file mode 100644 index 0000000000..949a14f9f3 --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-03.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + key + value + image-01.jpg + image-02.jpg + image-03.jpg + + + + + + + + + + + + + + WeakRef object + + + + + + + + + + + + + + + + WeakRef object + + + + + + + + + + + + + + + + + + + WeakRef object + + + + + + + \ No newline at end of file diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-04.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-04.svg new file mode 100644 index 0000000000..1177d6580d --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-04.svg @@ -0,0 +1,77 @@ + + + + + + + name: "John" + Object + + admin + + + + + + + + + key + value + image-01.jpg + image-02.jpg + image-03.jpg + + + + + + + + + + + + + + WeakRef object + + + + + + + + + + + + + + + + WeakRef object + + + + + undefined + undefined + + + + + + + + + + + + + + + WeakRef object + + + \ No newline at end of file diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-05.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-05.svg new file mode 100644 index 0000000000..e738f8e7ed --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-05.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + image-02.jpg + image-03.jpg + + key + value + image-01.jpg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + WeakRef object + + + + + + + + + + + + + + + + WeakRef object + + + + + undefined + undefined + Deleted by FinalizationRegistry cleanup callback + + + + + + + + + + + + + + + WeakRef object + + + + \ No newline at end of file diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-01.png b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-01.png new file mode 100644 index 0000000000..fc33a023af Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-01.png differ diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-02.png b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-02.png new file mode 100644 index 0000000000..7d8bb01e88 Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-02.png differ diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-03.gif b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-03.gif new file mode 100644 index 0000000000..b81966dda4 Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-03.gif differ diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-04.jpg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-04.jpg new file mode 100644 index 0000000000..ba60f1e860 Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-04.jpg differ diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-05.gif b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-05.gif new file mode 100644 index 0000000000..d34bda4d73 Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-05.gif differ diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-06.jpg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-06.jpg new file mode 100644 index 0000000000..b2655540f9 Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-06.jpg differ diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-07.gif b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-07.gif new file mode 100644 index 0000000000..51f8745188 Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-07.gif differ diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-08.jpg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-08.jpg new file mode 100644 index 0000000000..5f98aec14d Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-08.jpg differ diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.css b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.css new file mode 100644 index 0000000000..e6c9e39606 --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.css @@ -0,0 +1,285 @@ +:root { + --mineralGreen: 60, 98, 85; + --viridianGreen: 97, 135, 110; + --swampGreen: 166, 187, 141; + --fallGreen: 234, 231, 177; + --brinkPink: #FA7070; + --silverChalice: 178, 178, 178; + --white: 255, 255, 255; + --black: 0, 0, 0; + + --topBarHeight: 64px; + --itemPadding: 32px; + --containerGap: 8px; +} + +@keyframes zoom-in { + 0% { + transform: scale(1, 1); + } + + 100% { + transform: scale(1.30, 1.30); + } +} + +body, html { + margin: 0; + padding: 0; +} + +.app { + min-height: 100vh; + background-color: rgba(var(--viridianGreen), 0.5); +} + +.header { + height: var(--topBarHeight); + padding: 0 24px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: rgba(var(--mineralGreen), 1); +} + +.header-text { + color: white; +} + +.container { + display: flex; + gap: 24px; + padding: var(--itemPadding); +} + +.item { + width: 50%; +} + +.item--scrollable { + overflow-y: scroll; + height: calc(100vh - var(--topBarHeight) - (var(--itemPadding) * 2)); +} + +.thumbnails-container { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + align-items: center; +} + +.thumbnail-item { + width: calc(25% - var(--containerGap)); + cursor: pointer; + position: relative; +} + +.thumbnail-item:hover { + z-index: 1; + animation: zoom-in 0.1s forwards; +} + +.thumbnail-item--selected { + outline: 3px solid rgba(var(--fallGreen), 1); + outline-offset: -3px; +} + +.badge { + width: 16px; + height: 16px; + display: flex; + justify-content: center; + align-items: center; + padding: 4px; + position: absolute; + right: 8px; + bottom: 8px; + border-radius: 50%; + border: 2px solid rgba(var(--fallGreen), 1); + background-color: rgba(var(--swampGreen), 1); +} + +.check { + display: inline-block; + transform: rotate(45deg); + border-bottom: 2px solid white; + border-right: 2px solid white; + width: 6px; + height: 12px; +} + +.img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + padding: 0 0 16px 0; + gap: 8px; +} + +.select { + padding: 16px; + cursor: pointer; + font-weight: 700; + color: rgba(var(--black), 1); + border: 2px solid rgba(var(--swampGreen), 0.5); + background-color: rgba(var(--swampGreen), 1); +} + +.select:disabled { + cursor: not-allowed; + background-color: rgba(var(--silverChalice), 1); + color: rgba(var(--black), 0.5); + border: 2px solid rgba(var(--black), 0.25); +} + +.btn { + outline: none; + padding: 16px; + cursor: pointer; + font-weight: 700; + color: rgba(var(--black), 1); + border: 2px solid rgba(var(--black), 0.5); +} + +.btn--primary { + background-color: rgba(var(--mineralGreen), 1); +} + +.btn--primary:hover:not([disabled]) { + background-color: rgba(var(--mineralGreen), 0.85); +} + +.btn--secondary { + background-color: rgba(var(--viridianGreen), 0.5); +} + +.btn--secondary:hover:not([disabled]) { + background-color: rgba(var(--swampGreen), 0.25); +} + +.btn--success { + background-color: rgba(var(--fallGreen), 1); +} + +.btn--success:hover:not([disabled]) { + background-color: rgba(var(--fallGreen), 0.85); +} + +.btn:disabled { + cursor: not-allowed; + background-color: rgba(var(--silverChalice), 1); + color: rgba(var(--black), 0.5); + border: 2px solid rgba(var(--black), 0.25); +} + +.previewContainer { + margin-bottom: 16px; + display: flex; + width: 100%; + height: 40vh; + overflow: scroll; + border: 3px solid rgba(var(--black), 1); +} + +.previewContainer--disabled { + background-color: rgba(var(--black), 0.1); + cursor: not-allowed; +} + +.canvas { + margin: auto; + display: none; +} + +.canvas--ready { + display: block; +} + +.spinnerContainer { + display: flex; + gap: 8px; + flex-direction: column; + align-content: center; + align-items: center; + margin: auto; +} + +.spinnerContainer--hidden { + display: none; +} + +.spinnerText { + margin: 0; + color: rgba(var(--mineralGreen), 1); +} + +.spinner { + display: inline-block; + width: 50px; + height: 50px; + margin: auto; + border: 3px solid rgba(var(--mineralGreen), 0.3); + border-radius: 50%; + border-top-color: rgba(var(--mineralGreen), 0.9); + animation: spin 1s ease-in-out infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.loggerContainer { + display: flex; + flex-direction: column; + gap: 8px; + padding: 0 8px 8px 8px; + width: 100%; + min-height: 30vh; + max-height: 30vh; + overflow: scroll; + border-left: 3px solid rgba(var(--black), 0.25); +} + +.logger-title { + display: flex; + align-items: center; + padding: 8px; + position: sticky; + height: 40px; + min-height: 40px; + top: 0; + left: 0; + background-color: rgba(var(--viridianGreen), 1); + font-size: 24px; + font-weight: 700; + margin: 0; +} + +.logger-item { + font-size: 14px; + padding: 8px; + border: 2px solid #5a5a5a; + color: white; +} + +.logger--primary { + background-color: #13315a; +} + +.logger--success { + background-color: #385a4e; +} + +.logger--error { + background-color: #5a1a24; +} \ No newline at end of file diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.html b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.html new file mode 100644 index 0000000000..7ce52f927f --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.html @@ -0,0 +1,49 @@ + + + + + + + Photo Library Collage + + + + +
+
+

+ Photo Library Collage +

+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+ +

+
+ +
+
+

Logger:

+
+
+
+
+
+ + + + + diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.js b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.js new file mode 100644 index 0000000000..983b34d9ab --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.js @@ -0,0 +1,228 @@ +import { + createImageFile, + loadImage, + weakRefCache, + LAYOUTS, + images, + THUMBNAIL_PARAMS, + stateObj, +} from "./utils.js"; + +export const state = new Proxy(stateObj, { + set(target, property, value) { + const previousValue = target[property]; + + target[property] = value; + + if (previousValue !== value) { + handleStateChange(target); + } + + return true; + }, +}); + +// Elements. +const thumbnailsContainerEl = document.querySelector(".thumbnails-container"); +const selectEl = document.querySelector(".select"); +const previewContainerEl = document.querySelector(".previewContainer"); +const canvasEl = document.querySelector(".canvas"); +const createCollageBtn = document.querySelector(".btn-create-collage"); +const startOverBtn = document.querySelector(".btn-start-over"); +const downloadBtn = document.querySelector(".btn-download"); +const spinnerContainerEl = document.querySelector(".spinnerContainer"); +const spinnerTextEl = document.querySelector(".spinnerText"); +const loggerContainerEl = document.querySelector(".loggerContainer"); + +// Renders. +// Render thumbnails previews. +images.forEach((img) => { + const thumbnail = document.createElement("div"); + thumbnail.classList.add("thumbnail-item"); + + thumbnail.innerHTML = ` + + `; + + thumbnail.addEventListener("click", (e) => handleSelection(e, img)); + + thumbnailsContainerEl.appendChild(thumbnail); +}); +// Render layouts select. +LAYOUTS.forEach((layout) => { + const option = document.createElement("option"); + option.value = JSON.stringify(layout); + option.innerHTML = layout.name; + selectEl.appendChild(option); +}); + +const handleStateChange = (state) => { + if (state.loading) { + selectEl.disabled = true; + createCollageBtn.disabled = true; + startOverBtn.disabled = true; + downloadBtn.disabled = true; + previewContainerEl.classList.add("previewContainer--disabled"); + spinnerContainerEl.classList.remove("spinnerContainer--hidden"); + spinnerTextEl.innerText = "Loading..."; + canvasEl.classList.remove("canvas--ready"); + } else if (!state.loading) { + selectEl.disabled = false; + createCollageBtn.disabled = false; + startOverBtn.disabled = false; + downloadBtn.disabled = false; + previewContainerEl.classList.remove("previewContainer--disabled"); + spinnerContainerEl.classList.add("spinnerContainer--hidden"); + canvasEl.classList.add("canvas--ready"); + } + + if (!state.selectedImages.size) { + createCollageBtn.disabled = true; + document.querySelectorAll(".badge").forEach((item) => item.remove()); + } else if (state.selectedImages.size && !state.loading) { + createCollageBtn.disabled = false; + } + + if (!state.collageRendered) { + downloadBtn.disabled = true; + } else if (state.collageRendered) { + downloadBtn.disabled = false; + } +}; +handleStateChange(state); + +const handleSelection = (e, imgName) => { + const imgEl = e.currentTarget; + + imgEl.classList.toggle("thumbnail-item--selected"); + + if (state.selectedImages.has(imgName)) { + state.selectedImages.delete(imgName); + state.selectedImages = new Set(state.selectedImages); + imgEl.querySelector(".badge")?.remove(); + } else { + state.selectedImages = new Set(state.selectedImages.add(imgName)); + + const badge = document.createElement("div"); + badge.classList.add("badge"); + badge.innerHTML = ` +
+ `; + imgEl.prepend(badge); + } +}; + +// Make a wrapper function. +let getCachedImage; +(async () => { + getCachedImage = await weakRefCache(loadImage); +})(); + +const calculateGridRows = (blobsLength) => + Math.ceil(blobsLength / state.currentLayout.columns); + +const drawCollage = (images) => { + state.drawing = true; + + let context = canvasEl.getContext("2d"); + + /** + * Calculate canvas dimensions based on the current layout. + * */ + context.canvas.width = + state.currentLayout.itemWidth * state.currentLayout.columns; + context.canvas.height = + calculateGridRows(images.length) * state.currentLayout.itemHeight; + + let currentRow = 0; + let currentCanvasDx = 0; + let currentCanvasDy = 0; + + for (let i = 0; i < images.length; i++) { + /** + * Get current row of the collage. + * */ + if (i % state.currentLayout.columns === 0) { + currentRow += 1; + currentCanvasDx = 0; + + if (currentRow > 1) { + currentCanvasDy += state.currentLayout.itemHeight; + } + } + + context.drawImage( + images[i], + 0, + 0, + images[i].width, + images[i].height, + currentCanvasDx, + currentCanvasDy, + state.currentLayout.itemWidth, + state.currentLayout.itemHeight, + ); + + currentCanvasDx += state.currentLayout.itemWidth; + } + + state.drawing = false; + state.collageRendered = true; +}; + +const createCollage = async () => { + state.loading = true; + + const images = []; + + for (const image of state.selectedImages.values()) { + const blobImage = await getCachedImage(image.img); + + const url = URL.createObjectURL(blobImage); + const img = await createImageFile(url); + + images.push(img); + URL.revokeObjectURL(url); + } + + state.loading = false; + + drawCollage(images); +}; + +/** + * Clear all settled data to start over. + * */ +const startOver = () => { + state.selectedImages = new Set(); + state.collageRendered = false; + const context = canvasEl.getContext("2d"); + context.clearRect(0, 0, canvasEl.width, canvasEl.height); + + document + .querySelectorAll(".thumbnail-item--selected") + .forEach((item) => item.classList.remove("thumbnail-item--selected")); + + loggerContainerEl.innerHTML = '

Logger:

'; +}; + +const downloadCollage = () => { + const date = new Date(); + const fileName = `Collage-${date.getDay()}-${date.getMonth()}-${date.getFullYear()}.png`; + const img = canvasEl.toDataURL("image/png"); + const link = document.createElement("a"); + link.download = fileName; + link.href = img; + link.click(); + link.remove(); +}; + +const changeLayout = ({ target }) => { + state.currentLayout = JSON.parse(target.value); +}; + +// Listeners. +selectEl.addEventListener("change", changeLayout); +createCollageBtn.addEventListener("click", createCollage); +startOverBtn.addEventListener("click", startOver); +downloadBtn.addEventListener("click", downloadCollage); diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js new file mode 100644 index 0000000000..f0140c116a --- /dev/null +++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js @@ -0,0 +1,321 @@ +const loggerContainerEl = document.querySelector(".loggerContainer"); + +export const images = [ + { + img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1", + }, + { + img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6", + }, + { + img: "https://images.unsplash.com/photo-1527631746610-bca00a040d60", + }, + { + img: "https://images.unsplash.com/photo-1500835556837-99ac94a94552", + }, + { + img: "https://images.unsplash.com/photo-1503220317375-aaad61436b1b", + }, + { + img: "https://images.unsplash.com/photo-1501785888041-af3ef285b470", + }, + { + img: "https://images.unsplash.com/photo-1528543606781-2f6e6857f318", + }, + { + img: "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9", + }, + { + img: "https://images.unsplash.com/photo-1539635278303-d4002c07eae3", + }, + { + img: "https://images.unsplash.com/photo-1533105079780-92b9be482077", + }, + { + img: "https://images.unsplash.com/photo-1516483638261-f4dbaf036963", + }, + { + img: "https://images.unsplash.com/photo-1502791451862-7bd8c1df43a7", + }, + { + img: "https://plus.unsplash.com/premium_photo-1663047367140-91adf819d007", + }, + { + img: "https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd", + }, + { + img: "https://images.unsplash.com/photo-1517760444937-f6397edcbbcd", + }, + { + img: "https://images.unsplash.com/photo-1518684079-3c830dcef090", + }, + { + img: "https://images.unsplash.com/photo-1505832018823-50331d70d237", + }, + { + img: "https://images.unsplash.com/photo-1524850011238-e3d235c7d4c9", + }, + { + img: "https://plus.unsplash.com/premium_photo-1661277758451-b5053309eea1", + }, + { + img: "https://images.unsplash.com/photo-1541410965313-d53b3c16ef17", + }, + { + img: "https://images.unsplash.com/photo-1528702748617-c64d49f918af", + }, + { + img: "https://images.unsplash.com/photo-1502003148287-a82ef80a6abc", + }, + { + img: "https://plus.unsplash.com/premium_photo-1661281272544-5204ea3a481a", + }, + { + img: "https://images.unsplash.com/photo-1503457574462-bd27054394c1", + }, + { + img: "https://images.unsplash.com/photo-1499363536502-87642509e31b", + }, + { + img: "https://images.unsplash.com/photo-1551918120-9739cb430c6d", + }, + { + img: "https://plus.unsplash.com/premium_photo-1661382219642-43e54f7e81d7", + }, + { + img: "https://images.unsplash.com/photo-1497262693247-aa258f96c4f5", + }, + { + img: "https://images.unsplash.com/photo-1525254134158-4fd5fdd45793", + }, + { + img: "https://plus.unsplash.com/premium_photo-1661274025419-4c54107d5c48", + }, + { + img: "https://images.unsplash.com/photo-1553697388-94e804e2f0f6", + }, + { + img: "https://images.unsplash.com/photo-1574260031597-bcd9eb192b4f", + }, + { + img: "https://images.unsplash.com/photo-1536323760109-ca8c07450053", + }, + { + img: "https://images.unsplash.com/photo-1527824404775-dce343118ebc", + }, + { + img: "https://images.unsplash.com/photo-1612278675615-7b093b07772d", + }, + { + img: "https://images.unsplash.com/photo-1522010675502-c7b3888985f6", + }, + { + img: "https://images.unsplash.com/photo-1501555088652-021faa106b9b", + }, + { + img: "https://plus.unsplash.com/premium_photo-1669223469435-27e091439169", + }, + { + img: "https://images.unsplash.com/photo-1506012787146-f92b2d7d6d96", + }, + { + img: "https://images.unsplash.com/photo-1511739001486-6bfe10ce785f", + }, + { + img: "https://images.unsplash.com/photo-1553342385-111fd6bc6ab3", + }, + { + img: "https://images.unsplash.com/photo-1516546453174-5e1098a4b4af", + }, + { + img: "https://images.unsplash.com/photo-1527142879-95b61a0b8226", + }, + { + img: "https://images.unsplash.com/photo-1520466809213-7b9a56adcd45", + }, + { + img: "https://images.unsplash.com/photo-1516939884455-1445c8652f83", + }, + { + img: "https://images.unsplash.com/photo-1545389336-cf090694435e", + }, + { + img: "https://plus.unsplash.com/premium_photo-1669223469455-b7b734c838f4", + }, + { + img: "https://images.unsplash.com/photo-1454391304352-2bf4678b1a7a", + }, + { + img: "https://images.unsplash.com/photo-1433838552652-f9a46b332c40", + }, + { + img: "https://images.unsplash.com/photo-1506125840744-167167210587", + }, + { + img: "https://images.unsplash.com/photo-1522199873717-bc67b1a5e32b", + }, + { + img: "https://images.unsplash.com/photo-1495904786722-d2b5a19a8535", + }, + { + img: "https://images.unsplash.com/photo-1614094082869-cd4e4b2905c7", + }, + { + img: "https://images.unsplash.com/photo-1474755032398-4b0ed3b2ae5c", + }, + { + img: "https://images.unsplash.com/photo-1501554728187-ce583db33af7", + }, + { + img: "https://images.unsplash.com/photo-1515859005217-8a1f08870f59", + }, + { + img: "https://images.unsplash.com/photo-1531141445733-14c2eb7d4c1f", + }, + { + img: "https://images.unsplash.com/photo-1500259783852-0ca9ce8a64dc", + }, + { + img: "https://images.unsplash.com/photo-1510662145379-13537db782dc", + }, + { + img: "https://images.unsplash.com/photo-1573790387438-4da905039392", + }, + { + img: "https://images.unsplash.com/photo-1512757776214-26d36777b513", + }, + { + img: "https://images.unsplash.com/photo-1518855706573-84de4022b69b", + }, + { + img: "https://images.unsplash.com/photo-1500049242364-5f500807cdd7", + }, + { + img: "https://images.unsplash.com/photo-1528759335187-3b683174c86a", + }, +]; +export const THUMBNAIL_PARAMS = "w=240&h=240&fit=crop&auto=format"; + +// Console styles. +export const CONSOLE_BASE_STYLES = [ + "font-size: 12px", + "padding: 4px", + "border: 2px solid #5a5a5a", + "color: white", +].join(";"); +export const CONSOLE_PRIMARY = [ + CONSOLE_BASE_STYLES, + "background-color: #13315a", +].join(";"); +export const CONSOLE_SUCCESS = [ + CONSOLE_BASE_STYLES, + "background-color: #385a4e", +].join(";"); +export const CONSOLE_ERROR = [ + CONSOLE_BASE_STYLES, + "background-color: #5a1a24", +].join(";"); + +// Layouts. +export const LAYOUT_4_COLUMNS = { + name: "Layout 4 columns", + columns: 4, + itemWidth: 240, + itemHeight: 240, +}; +export const LAYOUT_8_COLUMNS = { + name: "Layout 8 columns", + columns: 8, + itemWidth: 240, + itemHeight: 240, +}; +export const LAYOUTS = [LAYOUT_4_COLUMNS, LAYOUT_8_COLUMNS]; + +export const createImageFile = async (src) => + new Promise((resolve, reject) => { + const img = new Image(); + img.src = src; + img.onload = () => resolve(img); + img.onerror = () => reject(new Error("Failed to construct image.")); + }); + +export const loadImage = async (url) => { + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(String(response.status)); + } + + return await response.blob(); + } catch (e) { + console.log(`%cFETCHED_FAILED: ${e}`, CONSOLE_ERROR); + } +}; + +export const weakRefCache = (fetchImg) => { + const imgCache = new Map(); + const registry = new FinalizationRegistry(({ imgName, size, type }) => { + const cachedImg = imgCache.get(imgName); + if (cachedImg && !cachedImg.deref()) { + imgCache.delete(imgName); + console.log( + `%cCLEANED_IMAGE: Url: ${imgName}, Size: ${size}, Type: ${type}`, + CONSOLE_ERROR, + ); + + const logEl = document.createElement("div"); + logEl.classList.add("logger-item", "logger--error"); + logEl.innerHTML = `CLEANED_IMAGE: Url: ${imgName}, Size: ${size}, Type: ${type}`; + loggerContainerEl.appendChild(logEl); + loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight; + } + }); + + return async (imgName) => { + const cachedImg = imgCache.get(imgName); + + if (cachedImg?.deref() !== undefined) { + console.log( + `%cCACHED_IMAGE: Url: ${imgName}, Size: ${cachedImg.size}, Type: ${cachedImg.type}`, + CONSOLE_SUCCESS, + ); + + const logEl = document.createElement("div"); + logEl.classList.add("logger-item", "logger--success"); + logEl.innerHTML = `CACHED_IMAGE: Url: ${imgName}, Size: ${cachedImg.size}, Type: ${cachedImg.type}`; + loggerContainerEl.appendChild(logEl); + loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight; + + return cachedImg?.deref(); + } + + const newImg = await fetchImg(imgName); + console.log( + `%cFETCHED_IMAGE: Url: ${imgName}, Size: ${newImg.size}, Type: ${newImg.type}`, + CONSOLE_PRIMARY, + ); + + const logEl = document.createElement("div"); + logEl.classList.add("logger-item", "logger--primary"); + logEl.innerHTML = `FETCHED_IMAGE: Url: ${imgName}, Size: ${newImg.size}, Type: ${newImg.type}`; + loggerContainerEl.appendChild(logEl); + loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight; + + imgCache.set(imgName, new WeakRef(newImg)); + registry.register(newImg, { + imgName, + size: newImg.size, + type: newImg.type, + }); + + return newImg; + }; +}; + +export const stateObj = { + loading: false, + drawing: true, + collageRendered: false, + currentLayout: LAYOUTS[0], + selectedImages: new Set(), +}; diff --git a/1-js/99-js-misc/index.md b/1-js/99-js-misc/index.md index 0d27b0c77c..b456d882d7 100644 --- a/1-js/99-js-misc/index.md +++ b/1-js/99-js-misc/index.md @@ -1,2 +1,6 @@ +<<<<<<< HEAD # その他 +======= +# Miscellaneous +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/1-js/plan3.txt b/1-js/plan3.txt deleted file mode 100644 index 4d553174f5..0000000000 --- a/1-js/plan3.txt +++ /dev/null @@ -1,5 +0,0 @@ -todo: - -intl? -proxy? -eval? diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index f558c83b8d..36a96c1050 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -1,5 +1,6 @@ # ブラウザ環境, スペック +<<<<<<< HEAD 当初、JavaScript言語は web ブラウザのために作られました。それ以降、言語は進化し、多くの用途やプラットフォームをもつ言語になりました。 プラットフォームは、ブラウザ、Webサーバ、あるいは別の *ホスト*、JavaScirpt が実行可能であれば "スマートな" コーヒーマシンかもしれません。これらはプラットフォーム固有の機能を提供します。JavaScript スペックではこれを *ホスト環境* と呼んでいます。 @@ -11,27 +12,54 @@ ![](windowObjects.svg) `window` と呼ばれる "ルート" オブジェクトがあります。これは2つの役割を持ちます。: +======= +The JavaScript language was initially created for web browsers. Since then, it has evolved into a language with many uses and platforms. + +A platform may be a browser, or a web-server or another *host*, or even a "smart" coffee machine if it can run JavaScript. Each of these provides platform-specific functionality. The JavaScript specification calls that a *host environment*. + +A host environment provides its own objects and functions in addition to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on. + +Here's a bird's-eye view of what we have when JavaScript runs in a web browser: + +![](windowObjects.svg) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 1. 1つ目は、これはJavaScriptコードのグローバルオブジェクトであり、 の章で説明するとおりです。 2. 2つ目は、これは "ブラウザウィンドウ" を表し、ウィンドウを制御するためのメソッドを提供します。 +<<<<<<< HEAD 例えば、ここではグローバルオブジェクトとして使います: +======= +1. First, it is a global object for JavaScript code, as described in the chapter . +2. Second, it represents the "browser window" and provides methods to control it. -```js run +For instance, we can use it as a global object: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d + +```js run global function sayHi() { alert("Hello"); } +<<<<<<< HEAD // グローバル関数は window のプロパティとしてアクセス可能 window.sayHi(); ``` また、ここではウィンドウの高さを見るためにブラウザウィンドウとして使います: +======= +// global functions are methods of the global object: +window.sayHi(); +``` + +And we can use it as a browser window, to show the window height: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js run alert(window.innerHeight); // 内部の window の高さ ``` +<<<<<<< HEAD window固有のメソッドやプロパティはたくさんあります。後ほどそれらを見ていきます。 ## DOM（ドキュメントオブジェクトモデル） @@ -39,9 +67,19 @@ window固有のメソッドやプロパティはたくさんあります。後 ドキュメントオブジェクトモデル、略して DOM は、ページ全体のコンテンツを変更可能なオブジェクトとして表現します。 `document` オブジェクトはページのメインの "エントリーポイント" です。これを使って、ページ上のものを変更したり作成することができます。 +======= +There are more window-specific methods and properties, which we'll cover later. + +## DOM (Document Object Model) + +The Document Object Model, or DOM for short, represents all page content as objects that can be modified. + +The `document` object is the main "entry point" to the page. We can change or create anything on the page using it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: ```js run +<<<<<<< HEAD // 背景色を赤に変える document.body.style.background = 'red'; @@ -66,15 +104,47 @@ CSSOM は document のスタイルルールを変更するとき、DOM と一緒 ## BOM (HTML仕様の一部) ブラウザオブジェクトモデル(BOM)は document 以外のすべてと連携するブラウザ(ホスト環境)により提供される追加オブジェクトです。 +======= +// change the background color to red +document.body.style.background = "red"; + +// change it back after 1 second +setTimeout(() => document.body.style.background = "", 1000); +``` + +Here, we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification: [DOM Living Standard](https://dom.spec.whatwg.org). + +```smart header="DOM is not only for browsers" +The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use DOM too. + +For instance, server-side scripts that download HTML pages and process them can also use the DOM. They may support only a part of the specification though. +``` + +```smart header="CSSOM for styling" +There's also a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) for CSS rules and stylesheets, that explains how they are represented as objects, and how to read and write them. + +The CSSOM is used together with the DOM when we modify style rules for the document. In practice though, the CSSOM is rarely required, because we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible. +``` + +## BOM (Browser Object Model) + +The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例えば: +<<<<<<< HEAD - [navigator](mdn:api/Window/navigator) オブジェクトはブラウザとオペレーティングシステムのバックグラウンドの情報を提供します。多くのプロパティを持っていますが、最も広く知られている2つのプロパティはこれです: `navigator.userAgent` -- 現在のブラウザについて, `navigator.platform` -- プラットフォームについて(Windows/Linux/Macなどを分ける) - [location](mdn:api/Window/location) オブジェクトは現在のURLを読み、ブラウザを新しいURLへリダイレクトできます。 +======= +- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differentiate between Windows/Linux/Mac etc). +- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d これは、`location` オブジェクトを使う方法です: ```js run +<<<<<<< HEAD alert(location.href); // 現在のURLを表示 if (confirm("Go to wikipedia?")) { location.href = 'https://wikipedia.org'; // 別のURLへリダイレクト @@ -87,6 +157,20 @@ if (confirm("Go to wikipedia?")) { BOM は一般的な [HTML スペック](https://html.spec.whatwg.org)の一部です。 のHTMLスペックは "HTML言語" (タグ、属性) についてだけでなく、多くのオブジェクトやメソッド、ブラウザ固有のDOM拡張をカバーします。それは "広義のHTML" です。また、いくつかのパートは にリストされている追加のスペックがあります。 +======= +alert(location.href); // shows current URL +if (confirm("Go to Wikipedia?")) { + location.href = "https://wikipedia.org"; // redirect the browser to another URL +} +``` + +The functions `alert/confirm/prompt` are also a part of the BOM: they are not directly related to the document, but represent pure browser methods for communicating with the user. + +```smart header="Specifications" +The BOM is a part of the general [HTML specification](https://html.spec.whatwg.org). + +Yes, you heard that right. The HTML spec at is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods, and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at . +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ## サマリ @@ -99,6 +183,7 @@ DOM スペック CSSOM スペック : スタイルシートとスタイルルール、それらの操作や document へのバインディングについて説明します。 を見てください。 +<<<<<<< HEAD HTML スペック : HTML言語(タグなど) や BOM(ブラウザオブジェクトモデル) を説明します -- 様々なブラウザ関数があります: `setTimeout`, `alert`, `location` など、 を見てください。それは DOM 仕様と多くの追加プロパティやメソッドを使ったその拡張です。 @@ -111,3 +196,23 @@ HTML スペック 何かを見つけるには、インターネット検索で "WHATWG [term]" あるいは "MDN [term]" を使用すると便利なことがよくあります。例: , 。 次に、ドキュメントが UI の中心的な役割を果たすので、DOM の学習を勧めていきます。 +======= +DOM specification +: Describes the document structure, manipulations, and events, see . + +CSSOM specification +: Describes stylesheets and style rules, manipulations with them, and their binding to documents, see . + +HTML specification +: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see . It takes the DOM specification and extends it with many additional properties and methods. + +Additionally, some classes are described separately at . + +Please note these links, as there's so much to learn that it's impossible to cover everything and remember it all. + +When you'd like to read about a property or a method, the Mozilla manual at is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete. + +To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g , . + +Now, we'll get down to learning the DOM, because the document plays the central role in the UI. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index c05b77060c..98f9a0227b 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -8,6 +8,7 @@ libs: HTMLドキュメントのバックボーンはタグです。 +<<<<<<< HEAD ドキュメントオブジェクトモデル(DOM)によれば、すべてのHTMLタグはオブジェクトです。入れ子のタグはそれを囲った "子" と呼ばれます。タグの内側のテキストも同様にオブジェクトです。 これらすべてのオブジェクトは JavaScript でアクセス可能であり、これらを使用してページが変更できます。 @@ -33,15 +34,42 @@ setTimeout(() => document.body.style.background = '', 3000); // 戻します ## DOM の例 例えば、このドキュメントに対する DOM を調べてみましょう: +======= +According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag is an object as well. + +All these objects are accessible using JavaScript, and we can use them to modify the page. + +For example, `document.body` is the object representing the `` tag. + +Running this code will make the `` red for 3 seconds: + +```js run +document.body.style.background = 'red'; // make the background red + +setTimeout(() => document.body.style.background = '', 3000); // return back +``` + +Here we used `style.background` to change the background color of `document.body`, but there are many other properties, such as: + +- `innerHTML` -- HTML contents of the node. +- `offsetWidth` -- the node width (in pixels) +- ...and so on. + +Soon we'll learn more ways to manipulate the DOM, but first we need to know about its structure. + +## An example of the DOM + +Let's start with the following simple document: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run no-beautify - About elks + About elk - The truth about elks. + The truth about elk. ``` @@ -51,7 +79,7 @@ DOM は HTMLをタグのツリー構造として表現します。それはこ
@@ -60,16 +88,27 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); 上の図では、要素をクリックすることで子要素を開閉できます。 ``` +<<<<<<< HEAD すべてのツリーノードはオブジェクトです。 +======= +Every tree node is an object. + +Tags are *element nodes* (or just elements) and form the tree structure: `` is at the root, then `` and `` are its children, etc. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d タグは *"要素ノード"* (もしくは単に要素) と呼ばれ、ツリー構造を形成します: `` がルートで、``, `` がその子、と言った構造です。 +<<<<<<< HEAD 要素内のテキストは *テキストノード* を形成し、 `#text` とラベル付けされます。テキストノードは文字列だけを含み、子を持たず、常にツリーの葉になります。 +======= +For instance, the `` tag has the text `"About elk"`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例えば、`<title>` タグはテキスト `"About elks"` を持っています。 テキストノード中の特別な文字に注意してください: +<<<<<<< HEAD - 改行: `↵` (JavaScript では `\n` として知られています) - スペース: `␣` @@ -78,6 +117,15 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); そこには2つだけ、トップレベルの除外があります: 1. `<head>` の前のスペースと改行は歴史的な理由から無視されます。 2. HTMLスペックではすべてのコンテンツが `<body>` の内側でなければならないため、`</body>` の後に何かをおいた場合、最後にそれらは自動的に `body` の中に移動されます。従って、`</body>` の後にスペースはないことがあります。 +======= +Spaces and newlines are totally valid characters, like letters and digits. They form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only). + +There are only two top-level exclusions: +1. Spaces and newlines before `<head>` are ignored for historical reasons. +2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there can't be any spaces after `</body>`. + +In other cases everything's straightforward -- if there are spaces (just like any character) in the document, then they become text nodes in the DOM, and if we remove them, then there won't be any. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d その他のケースはすべてが明快で、ドキュメント内にスペース（単に任意の文字のように）があれば、それらはDOMのテキストノードになります。もしそれらを削除すれば、何も存在しません。 @@ -85,17 +133,18 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); ```html no-beautify <!DOCTYPE HTML> -<html><head><title>About elksThe truth about elks. +About elkThe truth about elk. ```
+<<<<<<< HEAD ```smart header="端のスペースとその間にある空のテキストは、通常はツール内に隠されています" DOMを使って動作するブラウザツール（この後説明します）は、通常、テキストの最初/最後のスペースを表示せず、またタグ間に空のテキストノード（改行）も表示しません。 @@ -111,6 +160,23 @@ DOMを使って動作するブラウザツール（この後説明します） 例えば、トップのタグは常に `` です。ブラウザは `` を作成するので、たとえドキュメントの中になくても、DOMの中に存在することになります。`` についても同じです。 例として、もしHTMLファイルが `"Hello"` という言葉のみだった場合、ブラウザはそれを `` と `` でラップし、必須の `` を追加し、DOMは次のようになります: +======= +```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" +Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags. + +Developer tools save screen space this way. + +On further DOM pictures we'll sometimes omit them when they are irrelevant. Such spaces usually do not affect how the document is displayed. +``` + +## Autocorrection + +If the browser encounters malformed HTML, it automatically corrects it when making the DOM. + +For instance, the top tag is always ``. Even if it doesn't exist in the document, it will exist in the DOM, because the browser will create it. The same goes for ``. + +As an example, if the HTML file is the single word `"Hello"`, the browser will wrap it into `` and ``, and add the required ``, and the DOM will be: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d
@@ -121,9 +187,15 @@ let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node3, 'div.domtree', 690, 150); +<<<<<<< HEAD DOMを生成している間、ブラウザは自動的にドキュメント内のエラーを処理しタグを閉じます。 このような "無効な" ドキュメントの場合: +======= +While generating the DOM, browsers automatically process errors in the document, close tags and so on. + +A document with unclosed tags: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html no-beautify

Hello @@ -132,7 +204,11 @@ DOMを生成している間、ブラウザは自動的にドキュメント内

  • Dad ``` +<<<<<<< HEAD ...も、ブラウザはタグを読みかけた部分を復元し、通常のDOMになります。: +======= +...will become a normal DOM as the browser reads tags and restores the missing parts: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d
    @@ -142,8 +218,13 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); +<<<<<<< HEAD ````warn header="Tables は常に `` を持ちます" 興味深い "特別なケース はテーブルです。DOM仕様によると、テーブルは `` をもたなければなりませんが、HTMLテキストでは(公式に)それを省略することができます。そしてブラウザは DOM の中に自動的に `` を生成します。 +======= +````warn header="Tables always have ``" +An interesting "special case" is tables. By DOM specification they must have `` tag, but HTML text may omit it. Then the browser creates `` in the DOM automatically. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 次のHTML: @@ -160,20 +241,30 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); +<<<<<<< HEAD 分かりますか？ `` はどこにも出現していません。このような驚きを避けるため、テーブルを使用する際は心に留めておくべきです。 +======= +You see? The `` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```` ## 他の種類のノード 要素とテキストノード以外にも、他の種類のノードがあります。 +<<<<<<< HEAD 例えば、コメントです。 +======= +There are some other node types besides elements and text nodes. + +For example, comments: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html - The truth about elks. + The truth about elk.
    1. An elk is a smart
      2. *!* @@ -188,11 +279,12 @@ drawHtmlTree(node5, 'div.domtree', 600, 200);
      +<<<<<<< HEAD ここでは新しい種類のツリーノードが見えます -- `#comment` とラベル付された *comment node(コメントノード)* です。 こう思うかもしれません -- なぜコメントが DOM に追加されるのでしょう？ コメントは視覚的表現には影響しません。が、ルールがあります。HTMLに何かがある場合は、DOMツリーにもなければなりません。 @@ -200,11 +292,21 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); **HTML上のすべて、たとえコメントでも DOM の一部になります。** HTMLの冒頭にある `` ディレクティブでさえ DOM ノードです。``の直前のDOMツリーにあります。 そのノードに触れるつもりはないので図に描画していませんが、実際にはあります。 +======= +We can see here a new tree node type -- *comment node*, labeled as `#comment`, between two text nodes. + +We may think -- why is a comment added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree. + +**Everything in HTML, even comments, becomes a part of the DOM.** + +Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ドキュメント全体を表現する `document` オブジェクトは、正式には DOM ノードでもあります。 [12のノードタイプ](https://dom.spec.whatwg.org/#node)があります。実際には、通常それらのうち4つを使います: +<<<<<<< HEAD 1. `document` -- DOM に入る "エントリーポイント" 2. 要素ノード -- HTMLタグ, ツリーのビルディングブロック 3. テキストノード -- テキストを含む @@ -221,17 +323,42 @@ HTMLの冒頭にある `` ディレクティブでさえ DOM ノー このようになるはずです: ![](elks.png) +======= +1. `document` -- the "entry point" into DOM. +2. element nodes -- HTML-tags, the tree building blocks. +3. text nodes -- contain text. +4. comments -- sometimes we can put information there, it won't be shown, but JS can read it from the DOM. + +## See it for yourself + +To see the DOM structure in real-time, try [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant. + +Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing. + +To do so, open the web page [elk.html](elk.html), turn on the browser developer tools and switch to the Elements tab. + +It should look like this: + +![](elk.svg) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d DOMを見ることができます、要素をクリックしその詳細をみたりすることができます。 +<<<<<<< HEAD 開発者ツール上のDOM構造は簡略化されていることに注意してください。テキストノードは単にテキストとして表示されます。また、"空の" (スペースだけの) テキストノードはまったくありません。ほとんどの場合、要素のノードに興味があるのでそれは問題ありません。 左上隅の ボタンをクリックすると、マウス（または他のポインターデバイス）を使用してWebページからノードを選択できます。 それを "検査"します（Elements(要素) タブでスクロールします）。 巨大なHTMLページがあり、その中の特定の場所のDOMを見たいときに使用します。 +======= +Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of the time we are interested in element nodes. + +Clicking the button in the left-upper corner allows us to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d これを行う別の方法は、web ページ上で単に右クリックをして、コンテキストメニュー上で "Inspect(検査)" を選択することです。 -![](inspect.png) +![](inspect.svg) +<<<<<<< HEAD ツールの右側には、次のようなサブのタブがあります: - **Styles** - 組み込みルール（灰色）を含めて、ルール別に現在の要素ルールにCSSが適用されていることがわかります。 ほとんどすべては、下のボックスの大きさ/マージン/パディングを含めて編集できます。 - **Computed** - プロパティによって要素に適用されたCSSを表示する：各プロパティに対して、それを与える規則（CSSの継承などを含む）を見ることができます。 @@ -241,31 +368,61 @@ DOMを見ることができます、要素をクリックしその詳細をみ これらを学ぶベストな方法は、クリックして回ることです。ほとんどの値はその場で変更可能です。 ## コンソールでのインタラクション +======= +At the right part of the tools there are the following subtabs: +- **Styles** -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below. +- **Computed** -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such). +- **Event Listeners** -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial). +- ...and so on. + +The best way to study them is to click around. Most values are editable in-place. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d DOM を調べるにつれて、DOMをに対して JavaScript を適用したいことがあります。例えば、ノードを取得して修正するコードを実行し、その結果を確認る、です。 ここでは、Elementsタブとコンソールの間を移動する tips をいくつか紹介します。 +<<<<<<< HEAD まず最初に: 1. Elements タブで最初の `
    2. ` を選択します。 2. `key:Esc` を押します。Elements タブのすぐ下にコンソールが開きます。 +======= +As we work the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see the result. Here are few tips to travel between the Elements tab and the console. + +For the start: + +1. Select the first `
    3. ` in the Elements tab. +2. Press `key:Esc` -- it will open console right below the Elements tab. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d これで、最後に選択した要素は `$0` として利用可能で、以前に選択したものは `$1` です。 コンソールでコマンドが実行できます。例えば、`$0.style.background = 'red'` は選択されているリストアイテムを赤にします、このように: -![](domconsole0.png) +![](domconsole0.svg) + +That's how to get a node from Elements in Console. +<<<<<<< HEAD これがコンソールで、要素からノードを取得する方法です。 逆もあります。DOMノードを参照している変数がある場合、`inspect(node)` コマンドを実行すると、Elements ペインで表示させることができます。 もしくは単にそれをコンソールに出力し、"その場" で調べることができます。したの `document.body` のように: +======= +There's also a road back. If there's a variable referencing a DOM node, then we can use the command `inspect(node)` in Console to see it in the Elements pane. -![](domconsole1.png) +Or we can just output the DOM node in the console and explore "in-place", like `document.body` below: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d + +![](domconsole1.svg) これはもちろんデバッグ目的のためです。次の章からはJavaScriptを使ってDOMにアクセスしたり修正したりします。 +<<<<<<< HEAD ブラウザの開発者ツールは、開発で大いに役立ちます: DOMを調べたり、何かを試みたり何が間違っているかを見たり。 +======= +The browser developer tools are a great help in development: we can explore the DOM, try things and see what goes wrong. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## サマリ @@ -277,6 +434,12 @@ HTML/XML ドキュメントはブラウザ内では DOM ツリーとして表現 手動でDOMを検査したり修正するのに、開発者ツールが使えます。 +<<<<<<< HEAD ここでは、基本と、最もよく使われている重要なアクションについて説明しました。 Chrome開発者ツールに関する詳細なドキュメントは、 にあります。 ツールを学ぶ最も良い方法は、ここをクリックしてメニューを読むことです: ほとんどのオプションは明白です。 DOMノードには、ノード間の移動やノードの変更、ページの遷移と言ったことを可能とするるプロパティとメソッドがあります。 次の章でそれらを見ていきましょう。 +======= +Here we covered the basics, the most used and important actions to start with. There's an extensive documentation about Chrome Developer Tools at . The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest. + +DOM nodes have properties and methods that allow us to travel between them, modify them, move around the page, and more. We'll get down to them in the next chapters. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/1-document/02-dom-nodes/domconsole0.png b/2-ui/1-document/02-dom-nodes/domconsole0.png deleted file mode 100644 index 121c11d75a..0000000000 Binary files a/2-ui/1-document/02-dom-nodes/domconsole0.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/domconsole0.svg b/2-ui/1-document/02-dom-nodes/domconsole0.svg new file mode 100644 index 0000000000..eb99f193fe --- /dev/null +++ b/2-ui/1-document/02-dom-nodes/domconsole0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/domconsole0@2x.png b/2-ui/1-document/02-dom-nodes/domconsole0@2x.png deleted file mode 100644 index a8953395c5..0000000000 Binary files a/2-ui/1-document/02-dom-nodes/domconsole0@2x.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/domconsole1.png b/2-ui/1-document/02-dom-nodes/domconsole1.png deleted file mode 100644 index c04f015cf5..0000000000 Binary files a/2-ui/1-document/02-dom-nodes/domconsole1.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/domconsole1.svg b/2-ui/1-document/02-dom-nodes/domconsole1.svg new file mode 100644 index 0000000000..02ef5f0a65 --- /dev/null +++ b/2-ui/1-document/02-dom-nodes/domconsole1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/domconsole1@2x.png b/2-ui/1-document/02-dom-nodes/domconsole1@2x.png deleted file mode 100644 index ce0fa0fffa..0000000000 Binary files a/2-ui/1-document/02-dom-nodes/domconsole1@2x.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/elks.html b/2-ui/1-document/02-dom-nodes/elk.html similarity index 86% rename from 2-ui/1-document/02-dom-nodes/elks.html rename to 2-ui/1-document/02-dom-nodes/elk.html index 7d29f3d4e3..dc5d65f541 100644 --- a/2-ui/1-document/02-dom-nodes/elks.html +++ b/2-ui/1-document/02-dom-nodes/elk.html @@ -1,7 +1,7 @@ - The truth about elks. + The truth about elk.
      1. An elk is a smart
        2. diff --git a/2-ui/1-document/02-dom-nodes/elk.svg b/2-ui/1-document/02-dom-nodes/elk.svg new file mode 100644 index 0000000000..448eea9d13 --- /dev/null +++ b/2-ui/1-document/02-dom-nodes/elk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/elks.png b/2-ui/1-document/02-dom-nodes/elks.png deleted file mode 100644 index 03177c40e8..0000000000 Binary files a/2-ui/1-document/02-dom-nodes/elks.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/elks@2x.png b/2-ui/1-document/02-dom-nodes/elks@2x.png deleted file mode 100644 index e8a15bd5b9..0000000000 Binary files a/2-ui/1-document/02-dom-nodes/elks@2x.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/inspect.png b/2-ui/1-document/02-dom-nodes/inspect.png deleted file mode 100644 index 075cf93080..0000000000 Binary files a/2-ui/1-document/02-dom-nodes/inspect.png and /dev/null differ diff --git a/2-ui/1-document/02-dom-nodes/inspect.svg b/2-ui/1-document/02-dom-nodes/inspect.svg new file mode 100644 index 0000000000..60696ec0d5 --- /dev/null +++ b/2-ui/1-document/02-dom-nodes/inspect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/inspect@2x.png b/2-ui/1-document/02-dom-nodes/inspect@2x.png deleted file mode 100644 index 8743dd297d..0000000000 Binary files a/2-ui/1-document/02-dom-nodes/inspect@2x.png and /dev/null differ diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md index fbaf19be83..6ccbc2a9e4 100644 --- a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md +++ b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md @@ -4,7 +4,11 @@ importance: 5 # DOM の子 +<<<<<<< HEAD 次のページに対して: +======= +Look at this page: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html @@ -18,7 +22,14 @@ importance: 5 ``` +<<<<<<< HEAD 次へのアクセスの方法はどうなるでしょう？: - `
        ` DOM ノード? - `
          ` DOM ノード? - 2つ目の `
        • ` (Pete を持つ)? +======= +For each of the following, give at least one way of how to access them: +- The `
          ` DOM node? +- The `
            ` DOM node? +- The second `
          • ` (with Pete)? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md index 87d0d5de1b..ce7262b795 100644 --- a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md +++ b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md @@ -1,4 +1,13 @@ +<<<<<<< HEAD 1. はい、真実です。要素 `elem.lastChild` は常に最後の要素で、`nextSibling` を持っていません。なので、子要素がある場合は yes です。 2. いいえ、間違いです。なぜなら、`elem.children[0]` は要素の中の最初子だからです。しかし、その前に非要素ノードがある可能性があります。なので、`previousSibling` はテキストノードかもしれません。 両方のケースに対し、子がいない場合にはエラーになることに注意してください。例えば、`elem.lastChild` が `null` の場合、 `elem.lastChild.nextSibling` にアクセスすることはできません。 +======= +1. Yes, true. The element `elem.lastChild` is always the last one, it has no `nextSibling`. +2. No, wrong, because `elem.children[0]` is the first child *among elements*. But there may exist non-element nodes before it. So `previousSibling` may be a text node. + +Please note: for both cases if there are no children, then there will be an error. + +If there are no children, `elem.lastChild` is `null`, so we can't access `elem.lastChild.nextSibling`. And the collection `elem.children` is empty (like an empty array `[]`). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 0757e1a8e2..5355037871 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -7,6 +7,7 @@ libs: # DOM ナビゲーション +<<<<<<< HEAD DOM は要素やコンテンツに対して様々なことができますが、最初に対応する DOM オブジェクトに到達する必要があります。 DOM 上のすべての操作は `document` オブジェクトから始まります。そこから任意のノードにアクセスできます。 @@ -16,13 +17,26 @@ DOM 上のすべての操作は `document` オブジェクトから始まりま ![](dom-links.svg) これらについてより深く議論しましょう。 +======= +The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object. + +All operations on the DOM start with the `document` object. That's the main "entry point" to DOM. From it we can access any node. + +Here's a picture of links that allow for travel between DOM nodes: + +![](dom-links.svg) +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## トップ: documentElement と body 最上位のツリーノードは `document` プロパティとして直接利用可能です: `` = `document.documentElement` +<<<<<<< HEAD : 最上位のドキュメントノードは `document.documentElement` で、`` タグの DOM ノードです。 +======= +: The topmost document node is `document.documentElement`. That's the DOM node of the `` tag. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `` = `document.body` : もう１つの広く使われている DOM ノードは `` 要素です -- `document.body`. @@ -86,9 +100,15 @@ DOM では、`null` 値は "存在しない" もしくは "このようなノー ``` +<<<<<<< HEAD ...また、 `` のすべての子孫は、直接の子 `
            `, `
              ` だけでなく、`
            • ` (`
                ` の子) や `` (`
              • ` の子)のような、さらにネストされた要素を含む -- サブツリー全体です。 **`childNodes` のコレクションは、テキストノードを含むすべての子ノードを持ちます。** +======= +...And descendants of `` are not only direct children `
                `, `
                  ` but also more deeply nested elements, such as `
                • ` (a child of `
                    `) and `` (a child of `
                  • `) -- the entire subtree. + +**The `childNodes` collection lists all child nodes, including text nodes.** +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 以下は `document.body` の子を表示します: @@ -149,15 +169,25 @@ elem.childNodes[elem.childNodes.length - 1] === elem.lastChild 最初の1つ目は良いです。2つ目も、配列メソッドが必要な場合は、`Array.from` でコレクションから "本当の" 配列を作ることができるので許容できます。: ```js run +<<<<<<< HEAD alert( Array.from(document.body.childNodes).filter ); // これで使えます +======= + alert( Array.from(document.body.childNodes).filter ); // function +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ```warn header="DOM コレクションは読み取り専用です" DOM コレクションやさらに -- この章でリストされている *すべての* ナビゲーションプロパティは読み取り専用です。 +<<<<<<< HEAD 代入 `childNodes[i] = ...` などで子ノードを置き換えることはできません。 DOM の変更は他のメソッドを必要とします。それらについては次の章で見ていきましょう。 +======= +We can't replace a child by something else by assigning `childNodes[i] = ...`. + +Changing DOM needs other methods. We will see them in the next chapter. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ```warn header="DOM コレクションはライブです" @@ -174,18 +204,36 @@ DOM の変更は他のメソッドを必要とします。それらについて ```html run ```` ## 兄弟と親 +<<<<<<< HEAD *兄弟(Siblings)* は同じ親(parent)の子ノードです。 +======= +*Siblings* are nodes that are children of the same parent. + +For instance, here `` and `` are siblings: + +```html + + ...... + +``` +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例えば、`` と `` は兄弟です: +<<<<<<< HEAD ```html ...... @@ -210,11 +258,32 @@ DOM の変更は他のメソッドを必要とします。それらについて // の前は です。 alert( document.body.previousSibling ); // HTMLHeadElement +======= +The next sibling is in `nextSibling` property, and the previous one - in `previousSibling`. + +The parent is available as `parentNode`. + +For example: + +```js run +// parent of is +alert( document.body.parentNode === document.documentElement ); // true + +// after goes +alert( document.head.nextSibling ); // HTMLBodyElement + +// before goes +alert( document.body.previousSibling ); // HTMLHeadElement +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ## Element-only navigation +<<<<<<< HEAD 上でリストされているナビゲーションプロパティは *すべての* ノードを参照します。例えば、`childNodes` では、テキストノード、要素ノードの両方を、さらに存在する場合にはコメントノードも見ることができます。 +======= +Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if they exist. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d しかし、多くのタスクでは、テキストノードやコメントノードは必要ありません。タグを表し、ページの構造を形成する要素ノードを操作したいです。 @@ -224,10 +293,17 @@ DOM の変更は他のメソッドを必要とします。それらについて リンクは上で与えられたものと似ており、`Element` という言葉が内部にあります: +<<<<<<< HEAD - `children` -- 要素ノードの子のみです。 - `firstElementChild`, `lastElementChild` -- 最初/最後の要素の子です。 - `previousElementSibling`, `nextElementSibling` -- 隣の要素です。 - `parentElement` -- 親の要素です。 +======= +- `children` -- only those children that are element nodes. +- `firstElementChild`, `lastElementChild` -- first and last element children. +- `previousElementSibling`, `nextElementSibling` -- neighbor elements. +- `parentElement` -- parent element. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ````smart header="なぜ `parentElement`? 親は要素 ではない 場合はありますか？" `parentElement` プロパティは "要素" の親を返しますが、`parentNode` は "任意のノード" の親を返します。それらのプロパティは通常同じです: 両方とも親を取得します。 @@ -239,9 +315,15 @@ alert( document.documentElement.parentNode ); // document alert( document.documentElement.parentElement ); // null ``` +<<<<<<< HEAD 言い換えると、`documentElement` (``) はルートノードです。公式にはその親として `document` を持っています。しかし、`document` は要素ノードではないので、`parentNode` はそれを返し、`parentElement` は返しません。 これは、任意の要素 `elem` から `` に移動したいが、`document` には移動したくな場合に役立ちます: +======= +The reason is that the root node `document.documentElement` (``) has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not. + +This detail may be useful when we want to travel up from an arbitrary element `elem` to ``, but not to the `document`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js while(elem = elem.parentElement) { // go up till alert( elem ); @@ -249,7 +331,11 @@ while(elem = elem.parentElement) { // go up till ``` ```` +<<<<<<< HEAD 上の例の1つを修正してみましょう: `childNodes` を `children` に置き換えます。これで要素のみが表示されます。: +======= +Let's modify one of the examples above: replace `childNodes` with `children`. Now it shows only elements: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run @@ -280,20 +366,35 @@ while(elem = elem.parentElement) { // go up till 特定の種類の DOM 要素は、便宜上、その種類に固有の追加のプロパティを提供することがあります。 +<<<<<<< HEAD テーブルはその素晴らしい例であり重要なケースです。 **``** 要素は次のプロパティをサポートします(上で与えられたものに加えて): - `table.rows` -- テーブルの `` 要素のコレクションです。 - `table.caption/tHead/tFoot` -- 要素 ``, `` への参照です。 - `table.tBodies` -- `` 要素のコレクション(標準によると多数になれます) です。 +======= +Tables are a great example of that, and represent a particularly important case: + +**The `
                    `, `
                    `** element supports (in addition to the given above) these properties: +- `table.rows` -- the collection of `` elements of the table. +- `table.caption/tHead/tFoot` -- references to elements ``, ``. +- `table.tBodies` -- the collection of `` elements (can be many according to the standard, but there will always be at least one -- even if it is not in the source HTML, the browser will put it in the DOM). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d **``, ``, ``** 要素は `rows` プロパティを提供します: - `tbody.rows` -- 内側の `` のコレクション **``:** +<<<<<<< HEAD - `tr.cells` -- 与えられた `` の中の `/` の内部にある与えられた `` の番号です。 - `tr.rowIndex` -- テーブル内の `` の番号です。 +======= +- `tr.cells` -- the collection of ``. +- `tr.sectionRowIndex` -- the position (index) of the given `` inside the enclosing `//`. +- `tr.rowIndex` -- the number of the `` in the table as a whole (including all table rows). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d **`` で囲まれている内側でのセルの番号です。 @@ -311,19 +412,33 @@ while(elem = elem.parentElement) { // go up till
                    `, `
                    ` と `` セルの集合です。 - `tr.sectionRowIndex` -- 囲んでいる `
                    ` and `` cells inside the given `
                    ` と ``:** - `td.cellIndex` -- `
                    ``` 仕様: [tabular data](https://html.spec.whatwg.org/multipage/tables.html). +<<<<<<< HEAD HTMLフォームのための追加のナビゲーションプロパティもあります。 フォームを使って作業を開始するときにそれらを見ていきます。 # サマリ 与えられた DOM ノードで、ナビゲーションプロパティを使用することで直接隣接ノードに移動できます。 +======= +There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms. + +## Summary + +Given a DOM node, we can go to its immediate neighbors using navigation properties. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d それらの2つの主要なセットがあります: diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md index fd15d8184c..c900913429 100644 --- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md +++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md @@ -11,19 +11,29 @@ table.getElementsByTagName('label') // or document.querySelectorAll('#age-table label') +<<<<<<< HEAD // 3. そのテーブル内の最初の td (“Age” という言葉を持つ). +======= +// 3. The first td in that table (with the word "Age") +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d table.rows[0].cells[0] // or table.getElementsByTagName('td')[0] // or table.querySelector('td') +<<<<<<< HEAD // 4. 名前が search の form. // name="search" を持つ要素が1つと想定しています +======= +// 4. The form with the name "search" +// assuming there's only one element with name="search" in the document +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d let form = document.getElementsByName('search')[0] // or, form をつけ具体的に document.querySelector('form[name="search"]') +<<<<<<< HEAD // 5. フォーム内の最初の input form.getElementsByTagName('input') // or @@ -33,4 +43,14 @@ form.querySelector('input') // それ用の直接のクエリはありません let inputs = form.querySelectorAll('input') // 全検索 inputs[inputs.length-1] // 最後を取る +======= +// 5. The first input in that form. +form.getElementsByTagName('input')[0] +// or +form.querySelector('input') + +// 6. The last input in that form +let inputs = form.querySelectorAll('input') // find all inputs +inputs[inputs.length-1] // take the last one +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md index 786723f383..91b77f44ee 100644 --- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md +++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md @@ -6,6 +6,7 @@ importance: 4 ここに、テーブルとフォームを持つドキュメントがあります。 +<<<<<<< HEAD どうやって見つけますか? 1. `id="age-table"` を持つテーブル. @@ -14,5 +15,15 @@ importance: 4 4. 名前が `search` の `form` 5. そのフォーム内の最初の `input` 6. そのフォーム内の最後の `input` +======= +How to find?... + +1. The table with `id="age-table"`. +2. All `label` elements inside that table (there should be 3 of them). +3. The first `td` in that table (with the word "Age"). +4. The `form` with `name="search"`. +5. The first `input` in that form. +6. The last `input` in that form. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 別のウィンドウで[table.html](table.html)を開き、ブラウザツールを使ってください。 diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 023b5498b6..2bc75b674f 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -1,14 +1,28 @@ +<<<<<<< HEAD # 検索: getElement* と querySelector* +======= +# Searching: getElement*, querySelector* +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 要素が互いに近い場合には DOM ナビゲーションプロパティは役立ちます。そうではない場合、ページの任意の要素はどのように取得できるでしょうか？ +<<<<<<< HEAD そのための追加の検索メソッドがあります。 +======= +There are additional searching methods for that. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## document.getElementById もしくは 単に id +<<<<<<< HEAD 要素に `id` 属性があると、`document.getElementById(id)` メソッドを使用することで要素が取得できます。 例: +======= +If an element has the `id` attribute, we can get the element using the method `document.getElementById(id)`, no matter where it is. + +For instance: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run
                    @@ -16,17 +30,29 @@
                    ``` +<<<<<<< HEAD また、要素を参照する `id` で名前付けされたグローバル変数もあります: +======= +Also, there's a global variable named by `id` that references the element: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run
                    @@ -34,6 +60,7 @@
                    +``` + +...That's unless we declare a JavaScript variable with the same name, then it takes precedence: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run untrusted height=0
                    +``` + +```warn header="Please don't use id-named global variables to access elements" +This behavior is described [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object), but it is supported mainly for compatibility. + +The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from. + +Here in the tutorial we use `id` to directly reference an element for brevity, when it's obvious where the element comes from. + +In real life `document.getElementById` is the preferred method. +``` + +```smart header="The `id` must be unique" +The `id` must be unique. There can be only one element in the document with the given `id`. + +If there are multiple elements with the same `id`, then the behavior of methods that use it is unpredictable, e.g. `document.getElementById` may return any of such elements at random. So please stick to the rule and keep `id` unique. +``` + +```warn header="Only `document.getElementById`, not `anyElem.getElementById`" +The method `getElementById` can be called only on `document` object. It looks for the given `id` in the whole document. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ## querySelectorAll [#querySelectorAll] +<<<<<<< HEAD 最も用途の広いメソッド `elem.querySelectorAll(css)` は、指定された CSS セレクターに一致する `elem` 内のすべての要素を返します。 以下では、最後の子要素となるすべての `
                  • ` 要素を探します: +======= +By far, the most versatile method, `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector. + +Here we look for all `
                  • ` elements that are last children: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run
                      @@ -102,23 +173,38 @@ 任意の CSS セレクタが書けるのでこのメソッドは強力です。 +<<<<<<< HEAD ```smart header="疑似クラスも使えます" `:hover` や `:active` のような CSS セレクタの擬似クラスもサポートされています。例えば、`document.querySelectorAll(':hover')` はポインタがある要素のコレクションを返します（ネスト順は、最も外側の `` から最もネストされたものの順です）。 +======= +```smart header="Can use pseudo-classes as well" +Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ## querySelector [#querySelector] `elem.querySelector(css)` は、指定された CSS セレクタの最初の要素を返します。 +<<<<<<< HEAD つまり、`elem.querySelectorAll(css)[0]` と同じ結果になりますが、後者は *すべての* 要素を探し1つを返す、一方、`elem.querySelector` は1つだけを探します。なので、処理も速く、記述もより短くなります。 +======= +In other words, the result is the same as `elem.querySelectorAll(css)[0]`, but the latter is looking for *all* elements and picking one, while `elem.querySelector` just looks for one. So it's faster and also shorter to write. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## matches これまでのメソッドは DOM を検索していました。 +<<<<<<< HEAD [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) は何も探しません。これは単に `elem` が与えられた CSS セレクタに一致するかをチェックし、`true` または `false` を返します。 このメソッドは、要素(配列か何か)を反復処理し、興味のあるものをフィルタしようとするときに便利です。 +======= +The [elem.matches(css)](https://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`. + +The method comes in handy when we are iterating over elements (like in an array or something) and trying to filter out those that interest us. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例えば: @@ -140,9 +226,15 @@ ## closest +<<<<<<< HEAD 要素の *祖先* は、要素の親、親の親、さらにその親などです。祖先は、該当要素から最上部までの親のチェーンを形成します。 メソッド `elem.closest(css)` は CSS セレクタにマッチする最も近い祖先を見ます。`elem` 自身も検索対象に含まれています。 +======= +*Ancestors* of an element are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top. + +The method `elem.closest(css)` looks for the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d つまり、メソッド `closest` は要素(`elem`)から上に進み、親をチェックしていきます。セレクタにマッチしたら、検索を止めその祖先を返却します。 @@ -154,7 +246,7 @@
                      • Chapter 1
                        • -
                      • Chapter 1
                        • +
                      • Chapter 2
                      @@ -170,12 +262,107 @@ ## getElementsBy* +<<<<<<< HEAD 他にもタグやクラスなどでノードを探すメソッドがあります。 +======= +There are also other methods to look for nodes by a tag, class, etc. + +Today, they are mostly history, as `querySelector` is more powerful and shorter to write. + +So here we cover them mainly for completeness, while you can still find them in the old scripts. + +- `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags". +- `elem.getElementsByClassName(className)` returns elements that have the given CSS class. +- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. Very rarely used. + +For instance: +```js +// get all divs in the document +let divs = document.getElementsByTagName('div'); +``` + +Let's find all `input` tags inside the table: + +```html run height=50 + + + + + + +
                      Your age: + + + +
                      + + +``` + +```warn header="Don't forget the `\"s\"` letter!" +Novice developers sometimes forget the letter `"s"`. That is, they try to call `getElementByTagName` instead of getElementsByTagName. + +The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside. +``` + +````warn header="It returns a collection, not an element!" +Another widespread novice mistake is to write: + +```js +// doesn't work +document.getElementsByTagName('input').value = 5; +``` + +That won't work, because it takes a *collection* of inputs and assigns the value to it rather than to elements inside it. + +We should either iterate over the collection or get an element by its index, and then assign, like this: + +```js +// should work (if there's an input) +document.getElementsByTagName('input')[0].value = 5; +``` +```` + +Looking for `.article` elements: + +```html run height=50 +
                      +
                      Article
                      +
                      Long article
                      +
                      + + +``` + +## Live collections +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `querySelector` のほうがより強力で、短く書くこともできるため、今日、それらはほとんど歴史的な背景により存在するメソッドとなっています。 そのため、ここでは主に完全を期すためにそれらを説明します。古いスクリプトではそらを目にすることがあるかもしれません。 +<<<<<<< HEAD - `elem.getElementsByTagName(tag)` は指定されたタグの要素を探し、そのコレクションを返します。`tag` パラメータは "任意のタグ" としてアスタリスク `"*"` が指定可能です。 - `elem.getElementsByClassName(className)` は指定された CSS クラスを持つ要素を返します。 - `document.getElementsByName(name)` は指定された `name` 属性を持つ要素をドキュメント全体で返します。めったに使われません。 @@ -268,6 +455,10 @@ document.getElementsByTagName('input')[0].value = 5; 1. 最初のスクリプトは `
                      ` のコレクションへの参照を生成します。今のところ、その長さは `1` です。 2. 2つ目のスクリプトはブラウザが1つ以上の `
                      ` に会った後に実行するので、その長さは `2` です。 +======= +1. The first one creates a reference to the collection of `
                      `. As of now, its length is `1`. +2. The second scripts runs after the browser meets one more `
                      `, so its length is `2`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run
                      First div
                      @@ -310,9 +501,15 @@ document.getElementsByTagName('input')[0].value = 5; 今その違いを簡単に見ることができます。静的なコレクションは、ドキュメント上に新たな `div` の登場の後も増加しませんでした。 +<<<<<<< HEAD ## サマリ DOM でノードを検索するための6つの主なメソッドがあります: +======= +## Summary + +There are 6 main methods to search for nodes in DOM: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d @@ -325,6 +522,18 @@ DOM でノードを検索するための6つの主なメソッドがあります + + + + + + + + + + + + @@ -348,6 +557,7 @@ DOM でノードを検索するための6つの主なメソッドがあります +<<<<<<< HEAD @@ -364,11 +574,25 @@ DOM でノードを検索するための6つの主なメソッドがあります
                      querySelectorCSS-selector✔-
                      querySelectorAllCSS-selector✔-
                      getElementById id -✔ ✔
                      querySelector CSSセレクタ
                      最も使われるのは `querySelector` と `querySelectorAll` ですが、`getElement(s)By*` はたまに役立つか、古いスクリプトに含まれています。 +======= + + + +By far the most used are `querySelector` and `querySelectorAll`, but `getElement(s)By*` can be sporadically helpful or found in the old scripts. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d その他: +<<<<<<< HEAD - `elem` が指定された CSS セレクタに一致するかをチェックする `elem.matches(css)` があります。 - 指定された CSS セレクタに一致する最も近い祖先を探すための `elem.closest(css)` があります。`elem` 自身もチェックされます。 また、親子の関係を調べるもう一つの方法をここで言及しましょう: - `elemA.contains(elemB)` は `elemB` が `elemA` の中にある(`elemA` の子孫)または `elemA==elemB` の場合 true を返します。 +======= +- There is `elem.matches(css)` to check if `elem` matches the given CSS selector. +- There is `elem.closest(css)` to look for the nearest ancestor that matches the given CSS-selector. The `elem` itself is also checked. + +And let's mention one more method here to check for the child-parent relationship, as it's sometimes useful: +- `elemA.contains(elemB)` returns true if `elemB` is inside `elemA` (a descendant of `elemA`) or when `elemA==elemB`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md index 45c1ae8ba0..5a92c272f1 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md +++ b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md @@ -4,7 +4,11 @@ importance: 5 # nodeType には何がありますか？ +<<<<<<< HEAD スクリプトは何を表示するでしょう？ +======= +What does the script show? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md index 664d324029..45f6b20f61 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md +++ b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md @@ -1,11 +1,19 @@ +<<<<<<< HEAD `
                    • ` のループを作りましょう: ```js for (let li of document.querySelector('li')) { +======= +Let's make a loop over `
                    • `: + +```js +for (let li of document.querySelectorAll('li')) { +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ... } ``` +<<<<<<< HEAD このループでは、各 `li` の中のテキストを取得する必要があります。最初の子ノードから直接それを読むことができ、それはテキストノードです。 ```js @@ -17,3 +25,18 @@ for (let li of document.querySelector('li')) { ``` そして、子孫の数は `li.getElementsByTagName('li')` で取得できます。 +======= +In the loop we need to get the text inside every `li`. + +We can read the text from the first child node of `li`, that is the text node: + +```js +for (let li of document.querySelectorAll('li')) { + let title = li.firstChild.data; + + // title is the text in
                    • before any other nodes +} +``` + +Then we can get the number of descendants as `li.getElementsByTagName('li').length`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html index d712bb9da2..5947ec0977 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html +++ b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html @@ -40,7 +40,7 @@
                    ``` +<<<<<<< HEAD 要素だけを扱う場合、`tagName` と `nodeName` どちらも利用でき、そこに差はありません。 ```smart header="タグ名は XML モードを除いて常に大文字です" ブラウザはドキュメントを処理する2つのモードを持っています。: HTML と XML です。通常webページではHTMLモードが使われます。XMLモードは、ブラウザがヘッダでXMLドキュメントを受け取ったときに有効になります。: `Content-Type: application/xml+xhtml`。 +======= +If we only deal with elements, then we can use both `tagName` and `nodeName` - there's no difference. + +```smart header="The tag name is always uppercase except in XML mode" +The browser has two modes of processing documents: HTML and XML. Usually the HTML-mode is used for webpages. XML-mode is enabled when the browser receives an XML-document with the header: `Content-Type: application/xml+xhtml`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d HTMLモードでは、`tagName/nodeName` は常に大文字です: `` または `` は `BODY` です。 @@ -200,9 +315,15 @@ XMLモードでは、文字の大小は "そのまま" 維持されます。最 ## innerHTML: コンテンツ +<<<<<<< HEAD [innerHTML](https://w3c.github.io/DOM-Parsing/#widl-Element-innerHTML)プロパティは要素内の HTML を文字列として取得することができます。 それを変更することもできます。なので、ページを変更する最も強力な方法の1つです。 +======= +The [innerHTML](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) property allows to get the HTML inside the element as a string. + +We can also modify it. So it's one of the most powerful ways to change the page. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d この例は `document.body` のコンテンツを表示し、その後、コンテンツを完全に置き換えます: @@ -219,7 +340,11 @@ XMLモードでは、文字の大小は "そのまま" 維持されます。最 ``` +<<<<<<< HEAD 無効な HTML を挿入しようとすると、ブラウザはエラーを修正します。: +======= +We can try to insert invalid HTML, the browser will fix our errors: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run @@ -232,13 +357,22 @@ XMLモードでは、文字の大小は "そのまま" 維持されます。最 ``` +<<<<<<< HEAD ```smart header="スクリプトは実行しません" もし `innerHTML` が ` ``` +<<<<<<< HEAD **注意: `innerHTML` とは違い、`outerHTML` への書き込みは要素を変更しません。代わりに、DOM で置き換えられます。** +======= +**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it in the DOM.** +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ええ、奇妙に聞こえ、それは確かに奇妙です。それについて補足します。見てみましょう: @@ -301,15 +439,20 @@ elem.innerHTML = elem.innerHTML + "..." *!* // div.outerHTML を

                    ...

                    に置き換え */!* - div.outerHTML = '

                    A new element!

                    '; // (*) + div.outerHTML = '

                    A new element

                    '; // (*) *!* +<<<<<<< HEAD // なんと! div はまだ同じです! +======= + // Wow! 'div' is still the same! +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d */!* - alert(div.outerHTML); //
                    Hello, world!
                    + alert(div.outerHTML); //
                    Hello, world!
                    (**) ``` +<<<<<<< HEAD 奇妙に見えませんか？ 行 `(*)` では、`
                    ` を `

                    A new element

                    ` に置き換えます。外側のドキュメント(DOM)では、`
                    ` の代わりに新しいコンテンツが見るます。しかし、行 `(**)` では、古い `div` 変数は変更されていません。 @@ -324,14 +467,36 @@ elem.innerHTML = elem.innerHTML + "..." `div.outerHTML` を変更し、`div` が新しいコンテンツかのように扱い処理を続けると、すぐにエラーになるでしょう。このようなことは `innerHTML` なら問題ありませんが、`outerHTML` ではうまくいきません。 `elem.outerHTML` で書き込みはできますが、'elem' に書き込んでいるものは変わらないことについて留意しておく必要があります。代わりにその場所に新しいコンテンツを作成します。DOM に問い合わせることで新しい要素を参照することができます。 +======= +Looks really odd, right? + +In the line `(*)` we replaced `div` with `

                    A new element

                    `. In the outer document (the DOM) we can see the new content instead of the `
                    `. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed! + +The `outerHTML` assignment does not modify the DOM element (the object referenced by, in this case, the variable 'div'), but removes it from the DOM and inserts the new HTML in its place. + +So what happened in `div.outerHTML=...` is: +- `div` was removed from the document. +- Another piece of HTML `

                    A new element

                    ` was inserted in its place. +- `div` still has its old value. The new HTML wasn't saved to any variable. + +It's so easy to make an error here: modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it. But it doesn't. Such thing is correct for `innerHTML`, but not for `outerHTML`. + +We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to ('elem'). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## nodeValue/data: テキストノードのコンテンツ `innerHTML` プロパティは要素ノードに対してのみ有効です。 +<<<<<<< HEAD 他のノードタイプにはそれに対応するものがあります: `nodeValue` と `data` プロパティです。これら2つは実際の利用においてはほとんど同じで、仕様上少し違いがあるだけです。なので、より短い `data` を使います。 テキストノードのコンテンツとコメントを読む例です: +======= +Other node types, such as text nodes, have their counterpart: `nodeValue` and `data` properties. These two are almost the same for practical use, there are only minor specification differences. So we'll use `data`, because it's shorter. + +An example of reading the content of a text node and a comment: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run height="50" @@ -351,9 +516,15 @@ elem.innerHTML = elem.innerHTML + "..." ``` +<<<<<<< HEAD テキストノードに対しては、それらが読み込んだり修正できる理由が想像できます。しかしなぜコメントも？ 次のように開発者が HTML の中に情報やテンプレートの説明を埋め込むことがあります。: +======= +For text nodes we can imagine a reason to read or modify them, but why comments? + +Sometimes developers embed information or template instructions into HTML in them, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html @@ -361,7 +532,11 @@ elem.innerHTML = elem.innerHTML + "..." ``` +<<<<<<< HEAD ...そして、JavaScriptはそれを読み、埋め込まれた命令を処理することができます。 +======= +...Then JavaScript can read it from `data` property and process embedded instructions. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## textContent: 純粋なテキスト @@ -399,15 +574,20 @@ elem.innerHTML = elem.innerHTML + "..."
                    ``` +<<<<<<< HEAD 1. 最初の `
                    ` は "HTML として" 名前を取得します: すべてのタグはタグになるので、太字の名前になります。 2. 2つ目の `
                    ` は "テキストとして" 名前を取得するので、文字通り `Winnie-the-pooh!` と見えます。 +======= +1. The first `
                    ` gets the name "as HTML": all tags become tags, so we see the bold name. +2. The second `
                    ` gets the name "as text", so we literally see `Winnie-the-Pooh!`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ユーザーからのテキストはテキストとして扱われたいと考えています。 私たちは予期せぬHTMLを私たちのサイトでは望みません。 `textContent`への代入はそれを正確に行います。 @@ -415,7 +595,11 @@ elem.innerHTML = elem.innerHTML + "..." "hidden" 属性と DOM プロパティは要素が見えるかどうかを指定します。 +<<<<<<< HEAD 次のように HTML の中、もしくは JavaScript を使った代入で使用できます。: +======= +We can use it in HTML or assign it using JavaScript, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run height="80"
                    Both divs below are hidden
                    @@ -444,7 +628,11 @@ elem.innerHTML = elem.innerHTML + "..." ## その他のプロパティ +<<<<<<< HEAD DOM 要素には追加のプロパティ、特にクラスに依存するプロパティもあります: +======= +DOM elements also have additional properties, in particular those that depend on the class: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d - `value` -- ``, ` ``` +<<<<<<< HEAD ## マウスボタン クリック関連のイベントには常に `button` プロパティがあり、正確なマウスボタンが取得できます。 @@ -75,6 +117,39 @@ - `event.which == 1` – 左ボタン - `event.which == 2` – 中央ボタン - `event.which == 3` – 右ボタン +======= +## Mouse button + +Click-related events always have the `button` property, which allows to get the exact mouse button. + +We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click. + +On the other hand, `mousedown` and `mouseup` handlers may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". + +The possible values of `event.button` are: + +| Button state | `event.button` | +|--------------|----------------| +| Left button (primary) | 0 | +| Middle button (auxiliary) | 1 | +| Right button (secondary) | 2 | +| X1 button (back) | 3 | +| X2 button (forward) | 4 | + +Most mouse devices only have the left and right buttons, so possible values are `0` or `2`. Touch devices also generate similar events when one taps on them. + +Also there's `event.buttons` property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at [MDN](mdn:/api/MouseEvent/buttons) if you ever need it. + +```warn header="The outdated `event.which`" +Old code may use `event.which` property that's an old non-standard way of getting a button, with possible values: + +- `event.which == 1` – left button, +- `event.which == 2` – middle button, +- `event.which == 3` – right button. + +As of now, `event.which` is deprecated, we shouldn't use it. +``` +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 現時点では、`event.which` は推奨されていないので使用しないでください。 ``` @@ -85,12 +160,23 @@ イベントプロパティ: +<<<<<<< HEAD - `shiftKey`: `key:Shift` - `altKey`: `key:Alt` (or Mac は `key:Opt`) - `ctrlKey`: `key:Ctrl` - `metaKey`: Mac は `key:Cmd` イベント時に対応するキーが押されていた場合 `true` になります。 +======= +Event properties: + +- `shiftKey`: `key:Shift` +- `altKey`: `key:Alt` (or `key:Opt` for Mac) +- `ctrlKey`: `key:Ctrl` +- `metaKey`: `key:Cmd` for Mac + +They are `true` if the corresponding key was pressed during the event. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例えば、下のボタンは `key:Alt+Shift` + クリック でのみ動作します: @@ -108,6 +194,7 @@ ``` +<<<<<<< HEAD ```warn header="注意: Macでは通常は `Ctrl` ではなく `Cmd` です" Windows と Linux には、`key:Alt`, `key:Shift` と `key:Ctrl` の修飾子があります。Mac ではもう一つあります: `key:Cmd`、これはプロパティ `metaKey` に相当します。 @@ -118,27 +205,53 @@ Windows と Linux には、`key:Alt`, `key:Shift` と `key:Ctrl` の修飾子が したがって、`key:Ctrl` + クリック のような組み合わせをサポートしたいとき、Mac では `key:Cmd` + クリック とするのが理にかなっています。それがMacユーザにとってより快適です。 たとえ Mac ユーザに `key:Ctrl` + クリックを強制したいとしても、それは難しいです。問題は `key:Ctrl` で左クリックすると、Mac では *右クリック* と解釈され、Windows/Linux のように `click` ではなく　`contextmenu` イベントが生成されるからです。 +======= +```warn header="Attention: on Mac it's usually `Cmd` instead of `Ctrl`" +On Windows and Linux there are modifier keys `key:Alt`, `key:Shift` and `key:Ctrl`. On Mac there's one more: `key:Cmd`, corresponding to the property `metaKey`. + +In most applications, when Windows/Linux uses `key:Ctrl`, on Mac `key:Cmd` is used. + +That is: where a Windows user presses `key:Ctrl+Enter` or `key:Ctrl+A`, a Mac user would press `key:Cmd+Enter` or `key:Cmd+A`, and so on. + +So if we want to support combinations like `key:Ctrl`+click, then for Mac it makes sense to use `key:Cmd`+click. That's more comfortable for Mac users. + +Even if we'd like to force Mac users to `key:Ctrl`+click -- that's kind of difficult. The problem is: a left-click with `key:Ctrl` is interpreted as a *right-click* on MacOS, and it generates the `contextmenu` event, not `click` like Windows/Linux. + +So if we want users of all operating systems to feel comfortable, then together with `ctrlKey` we should check `metaKey`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d なので、すべての OS の人々に快適に感じてもらうためには、`ctrlKey` と一緒に `metaKey` を使うべきです。 JS-codeの場合、`if (event.ctrlKey || event.metaKey)` というチェックを意味します。 ``` +<<<<<<< HEAD ```warn header="モバイルデバイスもあります" キーボードの組み合わせは便利です。利用者がキーボードを使う場合は、それを使えるようにします。 ですが、モバイルデバイスのように、デバイスにキーボードがない場合は、修飾キーがなくても動作するようにする必要があります。 +======= +```warn header="There are also mobile devices" +Keyboard combinations are good as an addition to the workflow. So that if the visitor uses a keyboard -- they work. + +But if their device doesn't have it -- then there should be a way to live without modifier keys. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ## 座標: clientX/Y, pageX/Y すべてのマウスイベントは2種類の座標を持っています: +<<<<<<< HEAD 1. ウィンドウに相対: `clientX` と `clientY`. 2. ドキュメントに相対: `pageX` と `pageY`. +======= +All mouse events provide coordinates in two flavours: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d の章で、これらの違いについては既に説明しました。 +<<<<<<< HEAD 簡単に言うと、ドキュメント相対座標 `pageX/Y` はドキュメントの左上の端から数えた数値で、ページがスクールしても変わりません。一方、`clientX/Y` は現在のウィンドウの左上の端からになります。そのため、ページがスクロールされると値は変わります。 例えば、 500x500 サイズのウィンドウがあり、マウスが左上端にあるとき、`clientX` と `clientY` はページがスクロールされているかに関係なく `0` です。 @@ -147,27 +260,55 @@ JS-codeの場合、`if (event.ctrlKey || event.metaKey)` というチェック ````online 入力フィールドにマウスを移動し `clientX/clientY` を見てみてください (例は `iframe` の中にあるので、座標は `iframe` への相対です): +======= +We already covered the difference between them in the chapter . + +In short, document-relative coordinates `pageX/Y` are counted from the left-upper corner of the document, and do not change when the page is scrolled, while `clientX/Y` are counted from the current window left-upper corner. When the page is scrolled, they change. + +For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`, no matter how the page is scrolled. + +And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is. They are similar to `position:fixed` in that aspect. + +````online +Move the mouse over the input field to see `clientX/clientY` (the example is in the `iframe`, so coordinates are relative to that `iframe`): +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html autorun height=50 ``` ```` +<<<<<<< HEAD ## マウスダウンでの選択を防ぐ マウスのダブルクリックは、インターフェースによってはじゃまになる副作業があります。 例えば、下のテキストをダブルクリックすると、ハンドラに加えてそのテキストを選択します: +======= +## Preventing selection on mousedown + +Double mouse click has a side effect that may be disturbing in some interfaces: it selects text. + +For instance, double-clicking on the text below selects it in addition to our handler: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html autorun height=50 -Double-click me +Double-click me ``` +<<<<<<< HEAD 左のマウスボタンを押した後、離さずにマウスを動かすとそれも選択範囲になりますが、この動作はしばしば望まれないことがあります。 選択を防ぐ方法はいくつかあり、 の章を読んでください。 この特定のケースで、最も理にかなった方法はブラウザの `mousedown` のアクションを無効にすることです。これで、これらの選択を防ぐことができます: +======= +If one presses the left mouse button and, without releasing it, moves the mouse, that also makes the selection, often unwanted. + +There are multiple ways to prevent the selection, that you can read in the chapter . + +In this particular case the most reasonable way is to prevent the browser action on `mousedown`. It prevents both these selections: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html autorun height=50 Before... @@ -177,12 +318,21 @@ Before... ...After ``` +<<<<<<< HEAD これで太字部分の要素はダブルクリックで選択されません。また左ボタンを押しても選択は開始されません。 補足: 内側のテキストは依然として選択可能です。ですが、選択はそのテキスト自身ではなく、その前後から始める必要があります。通常ユーザにとってこれは問題になりません。 ````smart header="コピーを防止する" ページのコンテンツをコピーペーストから守るために選択を無効にしたい場合は、別のイベントが利用できます: `oncopy` +======= +Now the bold element is not selected on double clicks, and pressing the left button on it won't start the selection. + +Please note: the text inside it is still selectable. However, the selection should start not on the text itself, but before or after it. Usually that's fine for users. + +````smart header="Preventing copying" +If we want to disable selection to protect our page content from copy-pasting, then we can use another event: `oncopy`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html autorun height=80 no-beautify
                    @@ -193,11 +343,16 @@ Before... ``` `
                    ` のテキストの一部をコピーしようとしても動作しません。なぜならデフォルトアクション `oncopy` が防止されているためです。 +<<<<<<< HEAD 確かに、ユーザーがページのHTMLソースを開き、そこからコンテツを取ることを止めることはできません。が、誰もがHTMLソースを開く方法を知っているわけではありません。 +======= +Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone knows how to do it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```` ## サマリ +<<<<<<< HEAD マウスイベントには次のプロパティがあります: - ボタン: `button`. @@ -210,3 +365,17 @@ Before... `mousedown` のブラウザのデフォルトアクションはテキストの選択ですが、インターフェースにとってそれが良くない場合には選択を止めるべきです。 次の章では、ポインタの動きに関するイベントと、ポインタの下の要素の変化を追跡する方法についてより詳しく見ていきます。 +======= +Mouse events have the following properties: + +- Button: `button`. +- Modifier keys (`true` if pressed): `altKey`, `ctrlKey`, `shiftKey` and `metaKey` (Mac). + - If you want to handle `key:Ctrl`, then don't forget Mac users, they usually use `key:Cmd`, so it's better to check `if (e.metaKey || e.ctrlKey)`. + +- Window-relative coordinates: `clientX/clientY`. +- Document-relative coordinates: `pageX/pageY`. + +The default browser action of `mousedown` is text selection, if it's not good for the interface, then it should be prevented. + +In the next chapter we'll see more details about events that follow pointer movement and how to track element changes under it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/3-event-details/1-mouse-events-basics/head.html b/2-ui/3-event-details/1-mouse-events-basics/head.html index 815428a2c4..ba7669f250 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/head.html +++ b/2-ui/3-event-details/1-mouse-events-basics/head.html @@ -4,6 +4,7 @@ function showmesg(t, form) { +<<<<<<< HEAD if (timer == 0) { timer = new Date(); } @@ -21,6 +22,32 @@ timer = tm; } +======= + if (timer == 0) { + timer = new Date(); + } + + let tm = new Date(); + + if (tm - timer > 300) { + t = '------------------------------\n' + t; + } + + let area = document.forms[form + 'form'].getElementsByTagName('textarea')[0]; + + area.value += t + '\n'; + area.scrollTop = area.scrollHeight; + + timer = tm; + } + + function logMouse(e) { + let evt = e.type; + while (evt.length < 11) evt += ' '; + showmesg(evt + " button=" + e.button, 'test') + return false; + } +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d function logMouse(e) { let evt = e.type; diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html index c8e879f2ce..84d52b18c8 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html @@ -54,7 +54,7 @@

                    Once upon a time there was a mother pig who had three little pigs.

                    -

                    The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you." +

                    The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."

                    The three little pigs set off. "We will take care that the wolf does not catch us," they said.

                    @@ -78,12 +78,13 @@ } document.onmouseout = function() { - // it is possible that mouseout triggered, but we're still inside the element (cause of bubbling) + // it is possible that mouseout triggered, but we're still inside the element + // (its target was inside, and it bubbled) // but in this case we'll have an immediate mouseover, // so the tooltip will be destroyed and shown again // - // that's an overhead, but here it's not visible - // can be fixed with additional checks + // luckily, the "blinking" won't be visible, + // as both events happen almost at the same time if (tooltip) { tooltip.remove(); tooltip = false; diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html index 2dc4394e74..774e24a21e 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html @@ -54,7 +54,7 @@

                    Once upon a time there was a mother pig who had three little pigs.

                    -

                    The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you." +

                    The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."

                    The three little pigs set off. "We will take care that the wolf does not catch us," they said.

                    diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md index f58aeed228..6893a28d20 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md @@ -4,11 +4,21 @@ importance: 5 # 改善されたツールチップ動作 +<<<<<<< HEAD 属性 `data-tooltip` を持つ要素にツールチップを表示する JavaScript を書いてください。 +======= +Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d それは、タスク と似ていますが、ここでは注釈付き要素はネストできます。最も深くネストしたツールチップが表示されます。 +<<<<<<< HEAD 例えば: +======= +Only one tooltip may show up at the same time. + +For instance: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html
                    @@ -21,5 +31,8 @@ importance: 5 iframe での結果です: [iframe src="solution" height=300 border=1] +<<<<<<< HEAD -P.S. ヒント: 同時に1つのツールチップだけ表示します。 \ No newline at end of file +P.S. ヒント: 同時に1つのツールチップだけ表示します。 +======= +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md index b3f449ab4b..981eee61a1 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md @@ -1,4 +1,5 @@ +<<<<<<< HEAD アルゴリズムはシンプルです: 1. 要素上に `onmouseover/out` ハンドラを置きます。また、ここでは `onmouserenter/leave` を使うこともできますが、汎用性が下がり、移譲を導入すると上手く動作しません。 2. マウスカーソルが要素に入ったとき、`mousemove` で速度の計算を開始します。 @@ -8,11 +9,28 @@ 質問: "どうやって速度を測る？" 最初のアイデア: `100ms` 毎に関数を実行し、前後の座標間の距離を計算する方法です。もしそれが小さい場合、スピードは小さいです。 +======= +The algorithm looks simple: +1. Put `onmouseover/out` handlers on the element. Also can use `onmouseenter/leave` here, but they are less universal, won't work if we introduce delegation. +2. When a mouse cursor entered the element, start measuring the speed on `mousemove`. +3. If the speed is slow, then run `over`. +4. When we're going out of the element, and `over` was executed, run `out`. + +But how to measure the speed? + +The first idea can be: run a function every `100ms` and measure the distance between previous and new coordinates. If it's small, then the speed is small. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 残念ながら、JavaScript で "現在のマウス座標" を取得する方法はありません。`getCurrentMouseCoordinates()` のような関数はありません。 +<<<<<<< HEAD 座標を取得する唯一の方法は、`mousemove` のようにマウスイベントをリッスンすることです。 したがって、座標を追跡しそれを覚えるために `mousermove` のハンドラを設定できます。 +======= +The only way to get coordinates is to listen for mouse events, like `mousemove`, and take coordinates from the event object. + +So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d P.S. 注意: 解決策のテストでは、`dispatchEvent` を使用して、ツールチップが正しく動作するかを確認します。 diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js index a78c7c5554..7503ca9c2f 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js @@ -88,7 +88,7 @@ class HoverIntent { if (speed < this.sensitivity) { clearInterval(this.checkSpeedInterval); this.isHover = true; - this.over.call(this.elem, event); + this.over.call(this.elem); } else { // speed fast, remember new coordinates as the previous ones this.prevX = this.lastX; @@ -101,6 +101,6 @@ class HoverIntent { elem.removeEventListener('mousemove', this.onMouseMove); elem.removeEventListener('mouseover', this.onMouseOver); elem.removeEventListener('mouseout', this.onMouseOut); - }; + } } diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html index df0f136568..0982321741 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html @@ -20,20 +20,17 @@ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js index 7c7f6d23df..f5d4aaffb3 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js @@ -49,18 +49,18 @@ describe("hoverIntent", function() { } }) - it("mouseover -> immediately no tooltip", function() { + it("mouseover -> when the pointer just arrived, no tooltip", function() { mouse('mouseover', 10, 10); assert.isFalse(isOver); }); - it("mouseover -> pause shows tooltip", function() { + it("mouseover -> after a delay, the tooltip shows up", function() { mouse('mouseover', 10, 10); this.clock.tick(100); assert.isTrue(isOver); }); - it("mouseover -> fast mouseout no tooltip", function() { + it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() { mouse('mouseover', 10, 10); setTimeout( () => mouse('mouseout', 300, 300, { relatedTarget: document.body}), diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js index 29198d8eac..a38b42bc24 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js @@ -45,6 +45,7 @@ class HoverIntent { destroy() { /* your code to "disable" the functionality, remove all handlers */ - }; + /* it's needed for the tests to work */ + } } diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html index 702b79f968..0982321741 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html @@ -1,12 +1,11 @@ - + - Document - + @@ -21,18 +20,17 @@ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/style.css index 980e9457e7..fa2f09eba8 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/style.css +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/style.css @@ -2,6 +2,10 @@ color: red; } +body { + margin: 0; +} + .minutes { color: green; } @@ -20,9 +24,15 @@ top: 0; } -.tooltip { +#tooltip { position: absolute; - background: #eee; - border: 1px brown solid; - padding: 3px; + padding: 10px 20px; + border: 1px solid #b3c9ce; + border-radius: 4px; + text-align: center; + font: italic 14px/1.3 sans-serif; + color: #333; + background: #fff; + z-index: 100000; + box-shadow: 3px 3px 3px rgba(0, 0, 0, .3); } diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js index 44369d8c3f..f5d4aaffb3 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js @@ -3,7 +3,7 @@ describe("hoverIntent", function() { function mouse(eventType, x, y, options) { - let eventOptions = Object.assign({ + let eventOptions = Object.assign({ bubbles: true, clientX: x, clientY: y, @@ -11,15 +11,15 @@ describe("hoverIntent", function() { pageY: y, target: elem }, options || {}); - + elem.dispatchEvent(new MouseEvent(eventType, eventOptions)); } let isOver; let hoverIntent; - - + + before(function() { this.clock = sinon.useFakeTimers(); }); @@ -27,11 +27,11 @@ describe("hoverIntent", function() { after(function() { this.clock.restore(); }); - - + + beforeEach(function() { isOver = false; - + hoverIntent = new HoverIntent({ elem: elem, over: function() { @@ -49,18 +49,18 @@ describe("hoverIntent", function() { } }) - it("mouseover -> immediately no tooltip", function() { + it("mouseover -> when the pointer just arrived, no tooltip", function() { mouse('mouseover', 10, 10); assert.isFalse(isOver); }); - - it("mouseover -> pause shows tooltip", function() { + + it("mouseover -> after a delay, the tooltip shows up", function() { mouse('mouseover', 10, 10); this.clock.tick(100); assert.isTrue(isOver); }); - it("mouseover -> fast mouseout no tooltip", function() { + it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() { mouse('mouseover', 10, 10); setTimeout( () => mouse('mouseout', 300, 300, { relatedTarget: document.body}), @@ -94,5 +94,5 @@ describe("hoverIntent", function() { this.clock.tick(200); assert.isFalse(isOver); }); - + }); diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md index 28cf4e45ec..7fbcb091df 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md @@ -4,17 +4,32 @@ importance: 5 # "賢い" ツールチップ +<<<<<<< HEAD 訪問者がマウスを *そこを通る* のではなく *その上* に移動させた場合、その上にツールチップを表示する関数を書いてください。 言い換えると、もし訪問者が要素上にマウス動かして止めた場合 -- ツールチップを表示します。そして、もし単にマウスをすばやく移動させた場合にはそれは必要ありません。誰が余分な点滅を必要とするでしょうか？ +======= +Write a function that shows a tooltip over an element only if the visitor moves the mouse *to it*, but not *through it*. + +In other words, if the visitor moves the mouse to the element and stops there -- show the tooltip. And if they just moved the mouse through, then no need, who wants extra blinking? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 技術的には、要素上のマウス速度を測る事ができます。そしてもし速度が遅い場合、"要素上" にくると想定してツールチップを表示し、速度が早い場合には -- 無視します。 +<<<<<<< HEAD そのための汎用的なオブジェクト `new HoverIntent(options)` を作ります。`options` は次の通りです: - `elem` -- 追跡する要素です - `over` -- マウスが要素をゆっくり移動している場合に呼び出す関数です - `out` -- マウスが要素を離れるときに呼び出す関数です(もし `over` が呼ばれたら) +======= +Make a universal object `new HoverIntent(options)` for it. + +Its `options`: +- `elem` -- element to track. +- `over` -- a function to call if the mouse came to the element: that is, it moves slowly or stopped over it. +- `out` -- a function to call when the mouse leaves the element (if `over` was called). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ツールチップに対してこのようなオブジェクトを使用する例です: diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index 00035afe63..050d18cdad 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -1,24 +1,38 @@ +<<<<<<< HEAD # 移動: mouseover/out, mouseenter/leave マウスが要素間を移動するときに起こるイベントについての詳細を見ていきましょう。 +======= +# Moving the mouse: mouseover/out, mouseenter/leave -[cut] +Let's dive into more details about events that happen when the mouse moves between elements. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d -## Mouseover/mouseout, relatedTarget +## Events mouseover/mouseout, relatedTarget `mouseoever` イベントはマウスポインタが要素の上に来るときに発生し、`mouseout` は -- そこを離れるときです。 ![](mouseover-mouseout.svg) +<<<<<<< HEAD これらのイベントは `relatedTarget` を持っているという点で特別です。 +======= +These events are special, because they have property `relatedTarget`. This property complements `target`. When a mouse leaves one element for another, one of them becomes `target`, and the other one - `relatedTarget`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `mouseover` の場合: +<<<<<<< HEAD - `event.target` -- はマウスが来た要素です。 - `event.relatedTarget` -- は、マウスが来た元の要素です(どこから来たか)。 +======= +- `event.target` -- is the element where the mouse came over. +- `event.relatedTarget` -- is the element from which the mouse came (`relatedTarget` -> `target`). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `mouseout` の場合はその逆です: +<<<<<<< HEAD - `event.target` -- はマウスが離れた要素です。 - `event.relatedTarget` -- は新たなポインタの下の要素です(マウスが向かった要素) @@ -26,6 +40,15 @@ 下の例では、それぞれの顔が要素です。マウスを移動させると、テキストエリアでイベントが見えます。 各イベントは要素が来た場所や、どこから来たかについての情報を持っています。 +======= +- `event.target` -- is the element that the mouse left. +- `event.relatedTarget` -- is the new under-the-pointer element, that mouse left for (`target` -> `relatedTarget`). + +```online +In the example below each face and its features are separate elements. When you move the mouse, you can see mouse events in the text area. + +Each event has the information about both `target` and `relatedTarget`: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d [codetabs src="mouseoverout" height=280] ``` @@ -38,12 +61,17 @@ 我々のコードで `event.relatedTarget` を使うときは，その可能性を心に留めておく必要があります。もし `event.relatedTarget.tagName` へアクセスすると、エラーになるでしょう。 ``` +<<<<<<< HEAD ## イベントの頻度 +======= +## Skipping elements +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d `mousemove` イベントはマウスの移動時にトリガされます。しかし、すべてのピクセル単位の移動でイベントが発生する訳ではありません。 ブラウザは時々マウスの位置をチェックします。そして、もし変更に気づいた場合、イベントをトリガします。 +<<<<<<< HEAD つまり、訪問者がマウスをとても速く動かしている場合、DOM 要素はスキップされる可能性があることを意味します。: ![](mouseover-mouseout-over-elems.svg) @@ -57,21 +85,41 @@ 特に、ウィンドウの外からページ中央にカーソルが移動することもあり得ます。そして、それは "どこからも" 来ていないので、`relatedTarget=null` です。: ![](mouseover-mouseout-from-outside.svg) +======= +That means that if the visitor is moving the mouse very fast then some DOM-elements may be skipped: -
                    -In case of a fast move, intermediate elements may trigger no events. But if the mouse enters the element (`mouseover`), when we're guaranteed to have `mouseout` when it leaves it. -
                    +![](mouseover-mouseout-over-elems.svg) + +If the mouse moves very fast from `#FROM` to `#TO` elements as painted above, then intermediate `
                    ` elements (or some of them) may be skipped. The `mouseout` event may trigger on `#FROM` and then immediately `mouseover` on `#TO`. + +That's good for performance, because there may be many intermediate elements. We don't really want to process in and out of each one. + +On the other hand, we should keep in mind that the mouse pointer doesn't "visit" all elements along the way. It can "jump". + +In particular, it's possible that the pointer jumps right inside the middle of the page from out of the window. In that case `relatedTarget` is `null`, because it came from "nowhere": +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d + +![](mouseover-mouseout-from-outside.svg) ```online +<<<<<<< HEAD 下のテストスタンドで、実際に確認してみてください。 HTMLは2つのネストされた `
                    ` 要素です。もしマウスをすばやく移動させると、イベントはまったく起きないかもしれません。もしくは赤の div だけ、緑の div だけがイベントをトリガするかもしれません。 また、赤の `div` にポインタを移動させ、すばやく緑の `div` を通って下に移動してみてください。移動が十分速い場合、親要素は無視されます。 +======= +You can check it out "live" on a teststand below. + +Its HTML has two nested elements: the `
                    ` is inside the `
                    `. If you move the mouse fast over them, then maybe only the child div triggers events, or maybe the parent one, or maybe there will be no events at all. + +Also move the pointer into the child `div`, and then move it out quickly down through the parent one. If the movement is fast enough, then the parent element is ignored. The mouse will cross the parent element without noticing it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d [codetabs height=360 src="mouseoverout-fast"] ``` +<<<<<<< HEAD ## 子へ向けて移動するときの "余分な" mouseout 想像してください -- マウスポインタが要素に入りました。`mouseover` がトリガされました。その後、カーソルが子要素へ行きます。興味深いことは `mouseout` がその場合にトリガすることです。カーソルは依然として要素の中にありますが、`mouseout` が起きます! @@ -89,9 +137,49 @@ HTMLは2つのネストされた `
                    ` 要素です。もしマウスをすば 赤の `
                    ` は青の `
                    ` にネストされています。青の `
                    ` は以下のテキストにすべてのイベントを記録する `mouseover/out` ハンドラを持っています。 青要素に入って、次に赤要素にマウスを移動させてみてください -- そしてイベントを見てください。: +======= +```smart header="If `mouseover` triggered, there must be `mouseout`" +In case of fast mouse movements, intermediate elements may be ignored, but one thing we know for sure: if the pointer "officially" entered an element (`mouseover` event generated), then upon leaving it we always get `mouseout`. +``` + +## Mouseout when leaving for a child + +An important feature of `mouseout` -- it triggers, when the pointer moves from an element to its descendant, e.g. from `#parent` to `#child` in this HTML: + +```html +
                    +
                    ...
                    +
                    +``` + +If we're on `#parent` and then move the pointer deeper into `#child`, we get `mouseout` on `#parent`! + +![](mouseover-to-child.svg) + +That may seem strange, but can be easily explained. + +**According to the browser logic, the mouse cursor may be only over a *single* element at any time -- the most nested one and top by z-index.** + +So if it goes to another element (even a descendant), then it leaves the previous one. + +Please note another important detail of event processing. + +The `mouseover` event on a descendant bubbles up. So, if `#parent` has `mouseover` handler, it triggers: + +![](mouseover-bubble-nested.svg) + +```online +You can see that very well in the example below: `
                    ` is inside the `
                    `. There are `mouseover/out` handlers on `#parent` element that output event details. + +If you move the mouse from `#parent` to `#child`, you see two events on `#parent`: +1. `mouseout [target: parent]` (left the parent), then +2. `mouseover [target: child]` (came to the child, bubbled). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d [codetabs height=360 src="mouseoverout-child"] +``` +<<<<<<< HEAD 1. 青要素に入ると -- `mouseover [target: blue]` を得ます。 2. 次に、青から赤要素へ移動した後、 -- `mouseout [target: blue]` を得ます(親を離れます)。 3. ...そしてすぐに `mouseover [target: red]` です。 @@ -101,9 +189,32 @@ HTMLは2つのネストされた `
                    ` 要素です。もしマウスをすば 要素の出入りの際にいくつかのアクションを実行する場合、多くの余分な "偽の" 実行が発生します。シンプルな物事に対して気づかない可能性があります。複雑な物事に対しては、望ましくない副作用を引き起こす可能性があります。 私たちは、代わりに `mouseenter/mouseleave` イベントを使用して修正できます。 +======= +As shown, when the pointer moves from `#parent` element to `#child`, two handlers trigger on the parent element: `mouseout` and `mouseover`: + +```js +parent.onmouseout = function(event) { + /* event.target: parent element */ +}; +parent.onmouseover = function(event) { + /* event.target: child element (bubbled) */ +}; +``` + +**If we don't examine `event.target` inside the handlers, then it may seem that the mouse pointer left `#parent` element, and then immediately came back over it.** + +But that's not the case! The pointer is still over the parent, it just moved deeper into the child element. + +If there are some actions upon leaving the parent element, e.g. an animation runs in `parent.onmouseout`, we usually don't want it when the pointer just goes deeper into `#parent`. + +To avoid it, we can check `relatedTarget` in the handler and, if the mouse is still inside the element, then ignore such event. + +Alternatively we can use other events: `mouseenter` and `mouseleave`, that we'll be covering now, as they don't have such problems. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## イベント mouseenter と mouseleave +<<<<<<< HEAD イベント `mouseenter/mouseleave` は `mouseover/mouseout` のようなものです。それらもマウスポインタが要素を出入りするときにトリガされます。 違いが2つあります。: @@ -116,8 +227,28 @@ HTMLは2つのネストされた `
                    ` 要素です。もしマウスをすば ポインタが要素に入るとき -- `mouseenter` をトリガし、次に要素内でどこに行こうと関係はありません。`mouseleave` イベントはカーソルがそこを離れるときにだけトリガします。 同じ例を作りますが、青の `
                    ` に `mouseenter/mouseleave` を置き、同じことをすると -- 青の `
                    ` を入ったり出たりするときのみイベントをトリガするのが分かります。赤の `
                    ` に行くときや戻るときに余分なイベントはありません。子は無視されます。 +======= +Events `mouseenter/mouseleave` are like `mouseover/mouseout`. They trigger when the mouse pointer enters/leaves the element. + +But there are two important differences: + +1. Transitions inside the element, to/from descendants, are not counted. +2. Events `mouseenter/mouseleave` do not bubble. + +These events are extremely simple. + +When the pointer enters an element -- `mouseenter` triggers. The exact location of the pointer inside the element or its descendants doesn't matter. + +When the pointer leaves an element -- `mouseleave` triggers. + +```online +This example is similar to the one above, but now the top element has `mouseenter/mouseleave` instead of `mouseover/mouseout`. + +As you can see, the only generated events are the ones related to moving the pointer in and out of the top element. Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignored +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d [codetabs height=340 src="mouseleave"] +``` ## イベント移譲 [$Event delegation] @@ -125,6 +256,7 @@ HTMLは2つのネストされた `
                    ` 要素です。もしマウスをすば テーブルセルに対してマウスの出入りを処理したいと想像してください。そして、何百ものセルがあります。 +<<<<<<< HEAD 自然な解決策は -- `` にハンドラを設定し、そこでイベントを処理することです。しかし `mouseenter/leave` はバブルしません。したがって、`
                    ` でこのようなイベントが起きる場合、その `` のハンドラだけがそのイベントをキャッチできます。 `` 上の `mouseenter/leave` に対するハンドラは、テーブル全体の出入りでのみトリガします。その内側の遷移に関する情報を取得することはできません。 @@ -135,6 +267,18 @@ HTMLは2つのネストされた `
                    ` 要素です。もしマウスをすば ```js // マウスの下にあるセルをハイライトしましょう +======= +The natural solution would be -- to set the handler on `
                    ` and process events there. But `mouseenter/leave` don't bubble. So if such event happens on ` to another if (!currentElem) return; - // we're leaving the element -- where to? Maybe to a child element? + // we're leaving the element – where to? Maybe to a descendant? let relatedTarget = event.relatedTarget; - if (relatedTarget) { // possible: relatedTarget = null - while (relatedTarget) { - // go up the parent chain and check -- if we're still inside currentElem - // then that's an internal transition -- ignore it - if (relatedTarget == currentElem) return; - relatedTarget = relatedTarget.parentNode; - } + + while (relatedTarget) { + // go up the parent chain and check – if we're still inside currentElem + // then that's an internal transition – ignore it + if (relatedTarget == currentElem) return; + + relatedTarget = relatedTarget.parentNode; } - // we left the element. really. - currentElem.style.background = ''; + // we left the
                    `, then only a handler on that `` is able to catch it. + +Handlers for `mouseenter/leave` on `` only trigger when the pointer enters/leaves the table as a whole. It's impossible to get any information about transitions inside it. + +So, let's use `mouseover/mouseout`. + +Let's start with simple handlers that highlight the element under mouse: + +```js +// let's highlight an element under the pointer +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d table.onmouseover = function(event) { let target = event.target; target.style.background = 'pink'; @@ -147,9 +291,12 @@ table.onmouseout = function(event) { ``` ```online +Here they are in action. As the mouse travels across the elements of this table, the current one is highlighted: + [codetabs height=480 src="mouseenter-mouseleave-delegation"] ``` +<<<<<<< HEAD これらのハンドラは、任意の要素からテーブルの内側で行くときに動作します。 しかし、全体として `
                    ` に出入りする遷移のみを処理したいと考えています。 そしてセル全体を強調表示します。 私たちは `` の子の間で起こる遷移を処理したくありません。 @@ -161,27 +308,58 @@ table.onmouseout = function(event) { - `mouseout` では -- 現在の `` を離れなかった場合には無視します。 それは、`` の子の間を移動するときの "余分な" イベントをフィルタします。 +======= +In our case we'd like to handle transitions between table cells ``: entering a cell and leaving it. Other transitions, such as inside the cell or outside of any cells, don't interest us. Let's filter them out. -```offline -The details are in the [full example](sandbox:mouseenter-mouseleave-delegation-2). -``` +Here's what we can do: + +- Remember the currently highlighted `` in a variable, let's call it `currentElem`. +- On `mouseover` -- ignore the event if we're still inside the current ``. +- On `mouseout` -- ignore if we didn't leave the current ``. + +Here's an example of code that accounts for all possible situations: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d + +[js src="mouseenter-mouseleave-delegation-2/script.js"] + +Once again, the important features are: +1. It uses event delegation to handle entering/leaving of any `` inside the table. So it relies on `mouseover/out` instead of `mouseenter/leave` that don't bubble and hence allow no delegation. +2. Extra events, such as moving between descendants of `` are filtered out, so that `onEnter/Leave` runs only if the pointer leaves or enters `` as a whole. ```online すべての詳細を含む完全な例を次に示します。: -[codetabs height=380 src="mouseenter-mouseleave-delegation-2"] +[codetabs height=460 src="mouseenter-mouseleave-delegation-2"] +<<<<<<< HEAD カーソルを、テーブルセルやその内側の内外に移動させてみてください。以前の例とは異なり、全体として `` だけが強調表示されています。 ``` ## サマリ +======= +Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't matter. Only `` as a whole is highlighted, unlike the example before. +``` + +## Summary +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 私たちはイベント `mouseover`, `mouseout`, `mousemove`, `mouseenter` と `mouseleave` を説明しました。 +<<<<<<< HEAD 注目すべきことは: - 速いマウス移動は `mouseover, mousemove, mouseout` に対し、中間要素をスキップすることができます。 - イベント `mouseover/out` と `mouserenter/leave` は `relatedTarget` という追加のターゲットを持っています。それは私たちが 来た/行く 要素であり、`target` と相補的な要素です。 - イベント `mouseover/out` は親要素から子要素に移動してもトリガされます。 マウスは、一度に1つの要素、つまり最も深い要素を想定します。 - イベント `mouserenter/leave` はバブルしないので、マウスが子要素に行くときにはトリガしません。それらは、マウスが要素全体の内側と外側のどちらに来るのかを追跡します。 +======= +These things are good to note: + +- A fast mouse move may skip intermediate elements. +- Events `mouseover/out` and `mouseenter/leave` have an additional property: `relatedTarget`. That's the element that we are coming from/to, complementary to `target`. + +Events `mouseover/out` trigger even when we go from the parent element to a child element. The browser assumes that the mouse can be only over one element at one time -- the deepest one. + +Events `mouseenter/leave` are different in that aspect: they only trigger when the mouse comes in and out the element as a whole. Also they do not bubble. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html index e129ee6a28..eedd387163 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html @@ -67,6 +67,10 @@
                    + + + + diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js index 9f6bf1b5bb..6a3202467e 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js @@ -2,37 +2,61 @@ let currentElem = null; table.onmouseover = function(event) { - if (currentElem) { - // before entering a new element, the mouse always leaves the previous one - // if we didn't leave                     		yet, then we're still inside it, so can ignore the event - return; - } + // before entering a new element, the mouse always leaves the previous one + // if currentElem is set, we didn't leave the previous , + // that's a mouseover inside it, ignore the event + if (currentElem) return; let target = event.target.closest('td'); - if (!target || !table.contains(target)) return; - // yeah we're inside now + // we moved not into a - ignore + if (!target) return; + + // moved into , but outside of our table (possible in case of nested tables) + // ignore + if (!table.contains(target)) return; + + // hooray! we entered a new currentElem = target; - target.style.background = 'pink'; + onEnter(currentElem); }; table.onmouseout = function(event) { // if we're outside of any now, then ignore the event + // that's probably a move inside the table, but out of , + // e.g. from
                    . really. + onLeave(currentElem); currentElem = null; }; + +// any functions to handle entering/leaving an element +function onEnter(elem) { + elem.style.background = 'pink'; + + // show that in textarea + text.value += `over -> ${currentElem.tagName}.${currentElem.className}\n`; + text.scrollTop = 1e6; +} + +function onLeave(elem) { + elem.style.background = ''; + + // show that in textarea + text.value += `out <- ${elem.tagName}.${elem.className}\n`; + text.scrollTop = 1e6; +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/style.css index 61e19e3630..a5b1fd889c 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/style.css +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/style.css @@ -16,6 +16,7 @@ vertical-align: bottom; padding-top: 5px; padding-bottom: 12px; + cursor: pointer; } #table .nw { @@ -62,4 +63,4 @@ #table .highlight { background: red; -} \ No newline at end of file +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js index 4700d686e2..ae633ad67d 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js @@ -1,13 +1,15 @@ table.onmouseover = function(event) { let target = event.target; target.style.background = 'pink'; - text.value += "mouseover " + target.tagName + "\n"; + + text.value += `over -> ${target.tagName}\n`; text.scrollTop = text.scrollHeight; }; table.onmouseout = function(event) { let target = event.target; target.style.background = ''; - text.value += "mouseout " + target.tagName + "\n"; + + text.value += `out <- ${target.tagName}\n`; text.scrollTop = text.scrollHeight; -}; \ No newline at end of file +}; diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/style.css index 61e19e3630..a5b1fd889c 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/style.css +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/style.css @@ -16,6 +16,7 @@ vertical-align: bottom; padding-top: 5px; padding-bottom: 12px; + cursor: pointer; } #table .nw { @@ -62,4 +63,4 @@ #table .highlight { background: red; -} \ No newline at end of file +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/style.css index 61e19e3630..a5b1fd889c 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/style.css +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/style.css @@ -16,6 +16,7 @@ vertical-align: bottom; padding-top: 5px; padding-bottom: 12px; + cursor: pointer; } #table .nw { @@ -62,4 +63,4 @@ #table .highlight { background: red; -} \ No newline at end of file +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html index 87fc5c6352..f26fdbdaeb 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html @@ -1,15 +1,15 @@ - + - + -
                    -
                    +
                    parent +
                    child
                    diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/script.js index 7b0b70b197..bf64f2de75 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/script.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/script.js @@ -1,4 +1,5 @@ -function log(event) { - text.value += event.type + ' [target: ' + event.target.id + ']\n'; +function mouselog(event) { + let d = new Date(); + text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; -} \ No newline at end of file +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css index d4a759838b..c4024f32ea 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css @@ -1,21 +1,22 @@ -#blue { - background: blue; +#parent { + background: #99C0C3; width: 160px; - height: 160px; + height: 120px; position: relative; } -#red { - background: red; - width: 70px; - height: 70px; +#child { + background: #FFDE99; + width: 50%; + height: 50%; position: absolute; - left: 45px; - top: 45px; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); } -#text { +textarea { + height: 140px; + width: 300px; display: block; - height: 100px; - width: 400px; -} \ No newline at end of file +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-bubble-nested.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-bubble-nested.svg new file mode 100644 index 0000000000..6044eff17d --- /dev/null +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-bubble-nested.svg @@ -0,0 +1 @@ +mouseoutmouseover#parent#child \ No newline at end of file diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html index 20c96c0a7e..b110a199d7 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/index.html @@ -8,8 +8,8 @@ -
                    -
                    +
                    parent +
                    child
                    diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/script.js index 98a098150d..bf64f2de75 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/script.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/script.js @@ -1,4 +1,5 @@ function mouselog(event) { - text.value += event.type + ' [target: ' + event.target.className + ']\n' - text.scrollTop = text.scrollHeight -} \ No newline at end of file + let d = new Date(); + text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); + text.scrollTop = text.scrollHeight; +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/style.css index 49e3f9d6d9..c4024f32ea 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/style.css +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/style.css @@ -1,21 +1,22 @@ -.blue { - background: blue; +#parent { + background: #99C0C3; width: 160px; - height: 160px; + height: 120px; position: relative; } -.red { - background: red; - width: 100px; - height: 100px; +#child { + background: #FFDE99; + width: 50%; + height: 50%; position: absolute; - left: 30px; - top: 30px; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); } textarea { - height: 100px; - width: 400px; + height: 140px; + width: 300px; display: block; -} \ No newline at end of file +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html index 1e38d693c0..9a2691a2f8 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html @@ -1,5 +1,5 @@ - + @@ -8,13 +8,11 @@ -
                    -
                    Test
                    +
                    parent +
                    child
                    - - - + diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js index 63ec8cdcb1..5752e83ae9 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/script.js @@ -1,47 +1,48 @@ - green.onmouseover = green.onmouseout = green.onmousemove = handler; +let parent = document.getElementById('parent'); +parent.onmouseover = parent.onmouseout = parent.onmousemove = handler; - function handler(event) { - let type = event.type; - while (type < 11) type += ' '; +function handler(event) { + let type = event.type; + while (type.length < 11) type += ' '; - log(type + " target=" + event.target.id) - return false; - } + log(type + " target=" + event.target.id) + return false; +} - function clearText() { - text.value = ""; - lastMessage = ""; - } +function clearText() { + text.value = ""; + lastMessage = ""; +} - let lastMessageTime = 0; - let lastMessage = ""; - let repeatCounter = 1; +let lastMessageTime = 0; +let lastMessage = ""; +let repeatCounter = 1; - function log(message) { - if (lastMessageTime == 0) lastMessageTime = new Date(); +function log(message) { + if (lastMessageTime == 0) lastMessageTime = new Date(); - let time = new Date(); + let time = new Date(); - if (time - lastMessageTime > 500) { - message = '------------------------------\n' + message; - } + if (time - lastMessageTime > 500) { + message = '------------------------------\n' + message; + } - if (message === lastMessage) { - repeatCounter++; - if (repeatCounter == 2) { - text.value = text.value.trim() + ' x 2\n'; - } else { - text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n"; - } + if (message === lastMessage) { + repeatCounter++; + if (repeatCounter == 2) { + text.value = text.value.trim() + ' x 2\n'; + } else { + text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n"; + } - } else { - repeatCounter = 1; - text.value += message + "\n"; - } + } else { + repeatCounter = 1; + text.value += message + "\n"; + } - text.scrollTop = text.scrollHeight; + text.scrollTop = text.scrollHeight; - lastMessageTime = time; - lastMessage = message; - } \ No newline at end of file + lastMessageTime = time; + lastMessage = message; +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/style.css b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/style.css index e6ae1a2b0b..c4024f32ea 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/style.css +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/style.css @@ -1,23 +1,22 @@ -#green { - height: 50px; +#parent { + background: #99C0C3; width: 160px; - background: green; + height: 120px; + position: relative; } -#red { - height: 20px; - width: 110px; - background: red; - color: white; - font-weight: bold; - padding: 5px; - text-align: center; - margin: 20px; +#child { + background: #FFDE99; + width: 50%; + height: 50%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); } -#text { - font-size: 12px; - height: 200px; - width: 360px; +textarea { + height: 140px; + width: 300px; display: block; -} \ No newline at end of file +} diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js index 8fa60cc2d9..073ee7792e 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout.view/script.js @@ -7,9 +7,9 @@ function handler(event) { return el.className || el.tagName; } - log.value += event.type + ': ' + + log.value += event.type + ': ' + 'target=' + str(event.target) + - ', relatedTarget=' + str(event.relatedTarget) + "\n"; + ', relatedTarget=' + str(event.relatedTarget) + "\n"; log.scrollTop = log.scrollHeight; if (event.type == 'mouseover') { diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md index 78204c7f69..45de5f4d0c 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md @@ -1,4 +1,11 @@ +As we can see from HTML/CSS, the slider is a `
                    ` with a colored background, that contains a runner -- another `
                    ` with `position:relative`. +<<<<<<< HEAD ここでは、水平なドラッグ&ドロップです。 要素を配置するために、ハンドルに対して、`position:relative` とスライダーに相対的な座標を使います。ここでは　`position:absolute`　を使うよりもより便利です。 +======= +To position the runner we use `position:relative`, to provide the coordinates relative to its parent, here it's more convenient here than `position:absolute`. + +Then we implement horizontal-only Drag'n'Drop with limitation by width. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md index eaa2dad59f..0281ca3ff2 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md @@ -1,5 +1,11 @@ +<<<<<<< HEAD 要素をドラッグするために、 `position:fixed` を使います。これにより座標が管理しやすくなります。最後には、それを `position:absolute` に戻す必要があります。 +======= +To drag the element we can use `position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to `position:absolute` to lay the element into the document. + +When coordinates are at window top/bottom, we use `window.scrollTo` to scroll it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d その後、座標がウィンドウの上下端にある場合、`window.scrollTo` を使ってスクロールします。 diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js index 6c3daa5b23..10ae2eeed0 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js @@ -1,3 +1,5 @@ +let isDragging = false; + document.addEventListener('mousedown', function(event) { let dragElement = event.target.closest('.draggable'); @@ -5,13 +7,16 @@ document.addEventListener('mousedown', function(event) { if (!dragElement) return; event.preventDefault(); - let coords, shiftX, shiftY; - startDrag(event.clientX, event.clientY); + dragElement.ondragstart = function() { + return false; + }; + + let coords, shiftX, shiftY; - document.addEventListener('mousemove', onMouseMove); + startDrag(dragElement, event.clientX, event.clientY); - dragElement.onmouseup = function() { + function onMouseUp(event) { finishDrag(); }; @@ -22,25 +27,37 @@ document.addEventListener('mousedown', function(event) { // on drag start: // remember the initial shift // move the element position:fixed and a direct child of body - function startDrag(clientX, clientY) { + function startDrag(element, clientX, clientY) { + if(isDragging) { + return; + } + + isDragging = true; - shiftX = clientX - dragElement.getBoundingClientRect().left; - shiftY = clientY - dragElement.getBoundingClientRect().top; + document.addEventListener('mousemove', onMouseMove); + element.addEventListener('mouseup', onMouseUp); - dragElement.style.position = 'fixed'; + shiftX = clientX - element.getBoundingClientRect().left; + shiftY = clientY - element.getBoundingClientRect().top; - document.body.append(dragElement); + element.style.position = 'fixed'; moveAt(clientX, clientY); }; // switch to absolute coordinates at the end, to fix the element in the document function finishDrag() { - dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px'; + if(!isDragging) { + return; + } + + isDragging = false; + + dragElement.style.top = parseInt(dragElement.style.top) + window.pageYOffset + 'px'; dragElement.style.position = 'absolute'; document.removeEventListener('mousemove', onMouseMove); - dragElement.onmouseup = null; + dragElement.removeEventListener('mouseup', onMouseUp); } function moveAt(clientX, clientY) { diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md index 24c096eb50..83d68eafde 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md @@ -10,10 +10,17 @@ importance: 5 要件: +<<<<<<< HEAD - ドラッグ開始を追跡するのに、イベント移譲を使ってください: `document` で `mousedown` に対する単一のイベントハンドラを使います。 - 要素がウィンドウの上下の端にドラッグされた場合、-- つづけてドラッグができるようページをスクロールします。 - 水平スクロールはありません。 - ドラッグ可能な要素は、マウスをすばやく移動した後でもウィンドウからは離れません。 +======= +- Use event delegation to track drag start: a single event handler on `document` for `mousedown`. +- If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging. +- There is no horizontal scroll (this makes the task a bit simpler, adding it is easy). +- Draggable elements or their parts should never leave the window, even after swift mouse moves. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d デモは大きすぎてここには収まらないため、リンクにします。 diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md index 886028db19..63d8a44927 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md @@ -1,5 +1,6 @@ # マウスイベントでのドラッグ&ドロップ +<<<<<<< HEAD ドラッグ&ドロップは素晴らしいインタフェースソリューションです。何かを掴み、ドラッグとドロップをすることは、コピーや移動(ファイルマネージャを参照)から注文(カートにドロップする)まで、多くのことをするための明白かつ簡単な方法です。 現在の HTML 標準では [ドラッグイベントに関するセクション](https://html.spec.whatwg.org/multipage/interaction.html#dnd) があります。 @@ -9,11 +10,23 @@ しかし、ネイティブのドラッグイベントにも制限があります。例えば、特定の領域でドラッグを制限することができます。また、ドラッグを "水平" または "垂直" のみにすることはできません。そのAPIでは実装できない他のドラッグ&ドロップのタスクがあります。 そのため、ここではマウスイベントを使用したドラッグ&ドロップの実装方法を見ていきます。それほど難しくはありません。 +======= +Drag'n'Drop is a great interface solution. Taking something and dragging and dropping it is a clear and simple way to do many things, from copying and moving documents (as in file managers) to ordering (dropping items into a cart). + +In the modern HTML standard there's a [section about Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) with special events such as `dragstart`, `dragend`, and so on. + +These events allow us to support special kinds of drag'n'drop, such as handling dragging a file from OS file-manager and dropping it into the browser window. Then JavaScript can access the contents of such files. + +But native Drag Events also have limitations. For instance, we can't prevent dragging from a certain area. Also we can't make the dragging "horizontal" or "vertical" only. And there are many other drag'n'drop tasks that can't be done using them. Also, mobile device support for such events is very weak. + +So here we'll see how to implement Drag'n'Drop using mouse events. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## ドラッグ&ドロップ アルゴリズム 基本のドラッグ&ドロップのアルゴリズムはこのようになります: +<<<<<<< HEAD 1. ドラッグ可能な要素で `mousedown` をキャッチします。 2. 移動する要素を準備します (そのコピーを作成したりなど) 3. その後、`mousemove` で `left/top` と `position:absolute` を変更することで、それを移動させます。 @@ -34,6 +47,25 @@ ball.onmousedown = function(event) { // (1) 処理を開始 // ...そしてその絶対配置されたボールをカーソルの下に置く moveAt(event.pageX, event.pageY); +======= +1. On `mousedown` - prepare the element for moving, if needed (maybe create a clone of it, add a class to it or whatever). +2. Then on `mousemove` move it by changing `left/top` with `position:absolute`. +3. On `mouseup` - perform all actions related to finishing the drag'n'drop. + +These are the basics. Later we'll see how to add other features, such as highlighting current underlying elements while we drag over them. + +Here's the implementation of dragging a ball: + +```js +ball.onmousedown = function(event) { + // (1) prepare to moving: make absolute and on top by z-index + ball.style.position = 'absolute'; + ball.style.zIndex = 1000; + + // move it out of any current parents directly into body + // to make it positioned relative to the body + document.body.append(ball); +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d // ボールを（pageX、pageY）座標の中心に置く function moveAt(pageX, pageY) { @@ -41,14 +73,24 @@ ball.onmousedown = function(event) { // (1) 処理を開始 ball.style.top = pageY - ball.offsetHeight / 2 + 'px'; } + // move our absolutely positioned ball under the pointer + moveAt(event.pageX, event.pageY); + function onMouseMove(event) { moveAt(event.pageX, event.pageY); } +<<<<<<< HEAD // (3) mousemove でボールを移動する document.addEventListener('mousemove', onMouseMove); // (4) ボールをドロップする。不要なハンドラを削除する +======= + // (2) move the ball on mousemove + document.addEventListener('mousemove', onMouseMove); + + // (3) drop the ball, remove unneeded handlers +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ball.onmouseup = function() { document.removeEventListener('mousemove', onMouseMove); ball.onmouseup = null; @@ -57,18 +99,29 @@ ball.onmousedown = function(event) { // (1) 処理を開始 }; ``` +<<<<<<< HEAD コードを実行すると、何かおかしいことに気づきます。ドラッグ&ドロップの開始時に、ボールは "分岐" します: 我々はその "クローン" をドラッグし始めます。 +======= +If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start dragging its "clone". +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```online これは、アクションの例です: [iframe src="ball" height=230] +<<<<<<< HEAD マウスをドラッグ&ドロップし、奇妙な振る舞いをみてみてください。 ``` ブラウザは、画像や自動的に実行する他の要素のための独自のドラッグ&ドロップを持っており、それが私たちのコードと競合するためです。 +======= +Try to drag'n'drop with the mouse and you'll see such behavior. +``` + +That's because the browser has its own drag'n'drop support for images and some other elements. It runs automatically and conflicts with ours. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d それを無効にするためには: @@ -88,28 +141,50 @@ ball.ondragstart = function() { もう１つの重要な側面 -- 私たちは `ball` ではなく、`document` の `mousemove` を追跡しています。一見すると、マウスは常にボールの上にあり、その上に `mousemove` を置くことができるように見えるかもしれません。 +<<<<<<< HEAD しかし、覚えているように、`mousemove` は頻繁にトリガしますがピクセル毎ではありません。そのため、すばやく移動した後、カーソルはボールからドキュメント(またはウィンドウの外側)上のどこかにジャンプする可能性があります。 +======= +But as we remember, `mousemove` triggers often, but not for every pixel. So after swift move the pointer can jump from the ball somewhere in the middle of document (or even outside of the window). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d したがって、それをキャッチするために `document` でリッスンする必要があります。 ## 正しいポジショニング +<<<<<<< HEAD 上の例では、ボールは常にポインタの下で中央配置されています。: +======= +In the examples above the ball is always moved so that its center is under the pointer: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js ball.style.left = pageX - ball.offsetWidth / 2 + 'px'; ball.style.top = pageY - ball.offsetHeight / 2 + 'px'; ``` +<<<<<<< HEAD 悪くはありませんが副作用があります。ドラッグ&ドロップを開始するために、私たちはボール上どこでも `mousedown` できます。もしボールの端でそれをした場合、ボールは突然中央になるために "ジャンプ" します。 +======= +Not bad, but there's a side effect. To initiate the drag'n'drop, we can `mousedown` anywhere on the ball. But if "take" it from its edge, then the ball suddenly "jumps" to become centered under the mouse pointer. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ポインタに対する要素の初期のずれを維持するようが良いでしょう。 +<<<<<<< HEAD 例えば、ボールの端でドラッグを開始する場合、ドラッグ中のカーソルは端のままであるべきです。 ![](ball_shift.svg) 1. 訪問者がボタン (`mousedown`) を押したとき -- 変数 `shiftX/shiftY` に、カーソルからボールの左上端の距離を覚えることができます。私たちはドラッグの間その距離を維持する必要があります。 +======= +For instance, if we start dragging by the edge of the ball, then the pointer should remain over the edge while dragging. + +![](ball_shift.svg) + +Let's update our algorithm: + +1. When a visitor presses the button (`mousedown`) - remember the distance from the pointer to the left-upper corner of the ball in variables `shiftX/shiftY`. We'll keep that distance while dragging. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d それらのシフト(ずれ)を取得するには、座標の減算をします: @@ -119,13 +194,17 @@ ball.style.top = pageY - ball.offsetHeight / 2 + 'px'; let shiftY = event.clientY - ball.getBoundingClientRect().top; ``` +<<<<<<< HEAD JavaScript では、document に相対的な座標を取得するメソッドがないことに注意してください。そのため、ここではウィンドウに相対的な座標を使っています。 2. 次に、ドラッグの間はこのようにして、ポインタに相対的な同じシフトにボールを置きます。: +======= +2. Then while dragging we position the ball on the same shift relative to the pointer, like this: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // onmousemove - // ball has position:absoute + // ball has position:absolute ball.style.left = event.pageX - *!*shiftX*/!* + 'px'; ball.style.top = event.pageY - *!*shiftY*/!* + 'px'; ``` @@ -146,7 +225,12 @@ ball.onmousedown = function(event) { moveAt(event.pageX, event.pageY); +<<<<<<< HEAD // ボールを（pageX、pageY）座標の中心に置く +======= + // moves the ball at (pageX, pageY) coordinates + // taking initial shifts into account +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d function moveAt(pageX, pageY) { ball.style.left = pageX - *!*shiftX*/!* + 'px'; ball.style.top = pageY - *!*shiftY*/!* + 'px'; @@ -156,10 +240,17 @@ ball.onmousedown = function(event) { moveAt(event.pageX, event.pageY); } +<<<<<<< HEAD // (3) mousemove でボールを移動する document.addEventListener('mousemove', onMouseMove); // (4) ボールをドロップする。不要なハンドラを削除する +======= + // move the ball on mousemove + document.addEventListener('mousemove', onMouseMove); + + // drop the ball, remove unneeded handlers +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ball.onmouseup = function() { document.removeEventListener('mousemove', onMouseMove); ball.onmouseup = null; @@ -178,6 +269,7 @@ ball.ondragstart = function() { [iframe src="ball3" height=230] ``` +<<<<<<< HEAD ボールの右下端でドラッグをする場合に、違いは特に顕著になります。以前の例ではボールはポイントの下に "ジャンプ" します。今は現在の位置からのなめらかにカーソルを追うことができます。 ## ドロップ可能を検出する @@ -187,16 +279,37 @@ ball.ondragstart = function() { 抽象的には、私たちは "ドラッグ可能な" 要素を取り、"ドロップ可能な" 要素上にドロップします。 ドラッグ&ドロップの最後には、ドロップ可能なターゲットを知る必要があります -- 対応するアクションを行ったり、できれば、ドラッグ処理中にそれを強調表示したりします。 +======= +The difference is especially noticeable if we drag the ball by its right-bottom corner. In the previous example the ball "jumps" under the pointer. Now it fluently follows the pointer from the current position. + +## Potential drop targets (droppables) + +In previous examples the ball could be dropped just "anywhere" to stay. In real-life we usually take one element and drop it onto another. For instance, a "file" into a "folder" or something else. + +Speaking abstract, we take a "draggable" element and drop it onto "droppable" element. + +We need to know: +- where the element was dropped at the end of Drag'n'Drop -- to do the corresponding action, +- and, preferably, know the droppable we're dragging over, to highlight it. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d そのソリューションは興味深くもあり難解でもあるため、ここで説明しましょう。 +<<<<<<< HEAD 最初のアイデアは何でしょう？恐らく潜在的なドロップ可能要素に `onmouseover/mouseup` ハンドラを設定し、マウスポインタがその上に現れたときに検出するやり方です。そうすると、その要素上でドラッグ/ドロップしていることが分かります。 +======= +What may be the first idea? Probably to set `mouseover/mouseup` handlers on potential droppables? +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d しかし、これは動作しません。 問題は、私たちがドラッグしている間、ドラッグ可能な要素は常に他の要素の上にあることです。また、マウスイベントは最上位の要素でのみ発生し、下位の要素では発生しません。 +<<<<<<< HEAD 例えば、以下は2つの `
                    ` 要素があり、青の上に赤があります。この場合、赤は最上位であるため、青要素のイベントをキャッチする手段はありません。: +======= +For instance, below are two `
                    ` elements, red one on top of the blue one (fully covers). There's no way to catch an event on the blue one, because the red is on top: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run autorun height=60 + +

                    Drag the ball.

                    + + + + + + + diff --git a/2-ui/3-event-details/6-pointer-events/ball.view/index.html b/2-ui/3-event-details/6-pointer-events/ball.view/index.html new file mode 100644 index 0000000000..8bbef8f631 --- /dev/null +++ b/2-ui/3-event-details/6-pointer-events/ball.view/index.html @@ -0,0 +1,30 @@ + + +

                    Drag the ball.

                    + + + + + + + diff --git a/2-ui/3-event-details/6-pointer-events/multitouch.view/index.html b/2-ui/3-event-details/6-pointer-events/multitouch.view/index.html new file mode 100644 index 0000000000..d46e1bc16f --- /dev/null +++ b/2-ui/3-event-details/6-pointer-events/multitouch.view/index.html @@ -0,0 +1,28 @@ + + + + +
                    + Multi-touch here +
                    + + + diff --git a/2-ui/3-event-details/6-pointer-events/slider-html.view/index.html b/2-ui/3-event-details/6-pointer-events/slider-html.view/index.html new file mode 100644 index 0000000000..781016f52a --- /dev/null +++ b/2-ui/3-event-details/6-pointer-events/slider-html.view/index.html @@ -0,0 +1,6 @@ + + + +
                    +
                    +
                    diff --git a/2-ui/3-event-details/6-pointer-events/slider-html.view/style.css b/2-ui/3-event-details/6-pointer-events/slider-html.view/style.css new file mode 100644 index 0000000000..9b3d3b82d4 --- /dev/null +++ b/2-ui/3-event-details/6-pointer-events/slider-html.view/style.css @@ -0,0 +1,19 @@ +.slider { + border-radius: 5px; + background: #E0E0E0; + background: linear-gradient(left top, #E0E0E0, #EEEEEE); + width: 310px; + height: 15px; + margin: 5px; +} + +.thumb { + width: 10px; + height: 25px; + border-radius: 3px; + position: relative; + left: 10px; + top: -5px; + background: blue; + cursor: pointer; +} diff --git a/2-ui/3-event-details/6-pointer-events/slider.view/index.html b/2-ui/3-event-details/6-pointer-events/slider.view/index.html new file mode 100644 index 0000000000..b29e646a16 --- /dev/null +++ b/2-ui/3-event-details/6-pointer-events/slider.view/index.html @@ -0,0 +1,50 @@ + + + +
                    +
                    +
                    + +

                    Mouse over here to see the date

                    + + diff --git a/2-ui/3-event-details/6-pointer-events/slider.view/style.css b/2-ui/3-event-details/6-pointer-events/slider.view/style.css new file mode 100644 index 0000000000..a84cd5e7e8 --- /dev/null +++ b/2-ui/3-event-details/6-pointer-events/slider.view/style.css @@ -0,0 +1,20 @@ +.slider { + border-radius: 5px; + background: #E0E0E0; + background: linear-gradient(left top, #E0E0E0, #EEEEEE); + width: 310px; + height: 15px; + margin: 5px; +} + +.thumb { + touch-action: none; + width: 10px; + height: 25px; + border-radius: 3px; + position: relative; + left: 10px; + top: -5px; + background: blue; + cursor: pointer; +} diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md index 76614d0c60..453f8c9466 100644 --- a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md +++ b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md @@ -1,7 +1,6 @@ -私たちは2つのハンドラを使う必要があります: `document.onkeydown` と `document.onkeyup` です。 +We should use two handlers: `document.onkeydown` and `document.onkeyup`. +Let's create a set `pressed = new Set()` to keep currently pressed keys. -Set `pressed` は現在押されているキーを保持する必要があります。 - -最初のハンドラでそこに追加し、一方で2つ目のハンドラではそこから削除します。すべての `keydown` で必要なキーを押しているかをチェックし、その場合に関数を実行します。 +The first handler adds to it, while the second one removes from it. Every time on `keydown` we check if we have enough keys pressed, and run the function if it is so. diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html index 3ceb089c70..6e86d2455f 100644 --- a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html +++ b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html @@ -23,7 +23,7 @@ // JavaScript does not get the "keyup" event // and pressed set will keep assuming that the key is pressed // so, to evade "sticky" keys, we reset the status - // if the user wants to run the hotkey again - let him press all keys again + // if the user wants to run the hotkey again - let them press all keys again pressed.clear(); func(); diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/task.md b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/task.md index 641d507592..51c2fa2bdc 100644 --- a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/task.md +++ b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# 拡張ホットキー +# Extended hotkeys -コード `code1`, `code2`, ..., `code_n` のキーを同時に押したときに `func` を実行する関数 `runOnKeys(func, code1, code2, ... code_n)` を作成してください。 +Create a function `runOnKeys(func, code1, code2, ... code_n)` that runs `func` on simultaneous pressing of keys with codes `code1`, `code2`, ..., `code_n`. -例えば、下のコードは、 `"Q"` と `"W"` が同時に押されたときに `alert` を表示します(任意の言語で、CapsLockの有無にかかわらず)。 +For instance, the code below shows `alert` when `"Q"` and `"W"` are pressed together (in any language, with or without CapsLock) ```js no-beautify runOnKeys( diff --git a/2-ui/3-event-details/7-keyboard-events/article.md b/2-ui/3-event-details/7-keyboard-events/article.md index 66057f341d..12fe632016 100644 --- a/2-ui/3-event-details/7-keyboard-events/article.md +++ b/2-ui/3-event-details/7-keyboard-events/article.md @@ -1,85 +1,83 @@ -# キーボード: keydown と keyup +# Keyboard: keydown and keyup -キーボードを学ぶ前に、現代のデバイスでは "何かを入力する" ために他の方法があることに留意してください。例えば、人々は音声認識(特にモバイルデバイスで)や、マウスによるコピーペーストを使います。 - -したがって、`` フィールドへの任意の入力を追跡したい場合、キーボードイベントだけでは十分ではありません。`` フィールドのどのような方法での変更も処理するために `input` と言う名前の別のイベントがあります。そしてこのようなタスクに対する良い選択である場合があります。それらに関しては、チャプター で後ほど説明します。 +Before we get to keyboard, please note that on modern devices there are other ways to "input something". For instance, people use speech recognition (especially on mobile devices) or copy/paste with the mouse. -キーボードイベントは、キーボードアクション(仮想キーボードも含む)を処理したいときに使われるべきです。例えば、矢印キー `key:Up` や `key:Down`、またはホットキー (キーの組み合わせを含む)に反応するために使います。 +So if we want to track any input into an `` field, then keyboard events are not enough. There's another event named `input` to track changes of an `` field, by any means. And it may be a better choice for such task. We'll cover it later in the chapter . +Keyboard events should be used when we want to handle keyboard actions (virtual keyboard also counts). For instance, to react on arrow keys `key:Up` and `key:Down` or hotkeys (including combinations of keys). -## テストスタンド [#keyboard-test-stand] + +## Teststand [#keyboard-test-stand] ```offline -キーボードイベントをより良く理解するために、[テストスタンド](sandbox:keyboard-dump)が使えます。 +To better understand keyboard events, you can use the [teststand](sandbox:keyboard-dump). ``` ```online -キーボードイベントをよりよく理解するために、下のテストスタンドがあります。 +To better understand keyboard events, you can use the teststand below. -テキストフィールドの中で、様々なキーの組み合わせを試してみてください。 +Try different key combinations in the text field. [codetabs src="keyboard-dump" height=480] ``` -## Keydown と keyup - -`keydown` イベントはキーが押された時に、そして `keyup` はそれが離されたときに発生します。 +## Keydown and keyup -### event.code と event.key +The `keydown` events happens when a key is pressed down, and then `keyup` -- when it's released. -イベントオブジェクトの `key` プロパティは、イベントオブジェクトの `code` プロパティが "物理的なキーコード" を取得できる一方、文字を取得することができます。 +### event.code and event.key -例えば、同じキー `key:Z` が `Shift` あり / なし で押される場合があります。それは２つの異なる文字を返します: 小文字の `z` と大文字の `Z` です。 +The `key` property of the event object allows to get the character, while the `code` property of the event object allows to get the "physical key code". -`event.key` はまさに文字であり、それは異なるでしょう。しかし、`event.code` は同じです: +For instance, the same key `key:Z` can be pressed with or without `key:Shift`. That gives us two different characters: lowercase `z` and uppercase `Z`. +The `event.key` is exactly the character, and it will be different. But `event.code` is the same: -| キー | `event.key` | `event.code` | +| Key | `event.key` | `event.code` | |--------------|-------------|--------------| -| `key:Z` |`z` (小文字) |`KeyZ` | -| `key:Shift+Z`|`Z` (大文字) |`KeyZ` | +| `key:Z` |`z` (lowercase) |`KeyZ` | +| `key:Shift+Z`|`Z` (uppercase) |`KeyZ` | -ユーザが異なる言語で作業する場合、別の言語に切り替えると、`"Z"` の代わりに全く違う文字になります。これは `event.key` の文字になりますが、その一方で `event.code` は常に同じ `"KeyZ"` です。 +If a user works with different languages, then switching to another language would make a totally different character instead of `"Z"`. That will become the value of `event.key`, while `event.code` is always the same: `"KeyZ"`. -```smart header="\"KeyZ\" とその他のキーコード" -すべてのキーは、キーボード上の位置に応じたコードを持っています。キーコードは[UI イベントコード仕様](https://www.w3.org/TR/uievents-code/)で記載されています。 +```smart header="\"KeyZ\" and other key codes" +Every key has the code that depends on its location on the keyboard. Key codes described in the [UI Events code specification](https://www.w3.org/TR/uievents-code/). -例えば: -- 文字キーはコード `"Key"` です: `"KeyA"`, `"KeyB"` など。 -- 数字キーはコード `"Digit"` です:` "Digit0"`, `"Digit1"` など。 -- 特別なキーは名前でコード化されています: `"Enter"`, `"Backspace"`, `"Tab"` など。 +For instance: +- Letter keys have codes `"Key"`: `"KeyA"`, `"KeyB"` etc. +- Digit keys have codes: `"Digit"`: `"Digit0"`, `"Digit1"` etc. +- Special keys are coded by their names: `"Enter"`, `"Backspace"`, `"Tab"` etc. -いくつかの広く知られているキーボードレイアウトがあり、仕様はそれぞれに対してキーコードを提供します。 +There are several widespread keyboard layouts, and the specification gives key codes for each of them. -より多くのコードについては [alphanumeric section of the spec](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section) を見てください、もしくは上の [テストスタンド](#keyboard-test-stand) を試してみてください。 +Read the [alphanumeric section of the spec](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section) for more codes, or just press a key in the [teststand](#keyboard-test-stand) above. ``` -```warn header="大文字小文字の問題: `\"KeyZ\"` です, `\"keyZ\"` ではありません" -明らかですが、それでも間違えることがあります。 +```warn header="Case matters: `\"KeyZ\"`, not `\"keyZ\"`" +Seems obvious, but people still make mistakes. -ミスタイプを避けてください: `keyZ` ではなく `KeyZ` です。`event.code=="keyZ"` のようなチェックは機能しません: `"Key"` の最初の文字は大文字でなければなりません。 +Please evade mistypes: it's `KeyZ`, not `keyZ`. The check like `event.code=="keyZ"` won't work: the first letter of `"Key"` must be uppercase. ``` -もし仮に、キーが文字を持たないとどうなるでしょう？例えば、`key:Shift` or `key:F1` などです。これらのキーの場合、`event.key` は `event.code` とほぼ同じです。: +What if a key does not give any character? For instance, `key:Shift` or `key:F1` or others. For those keys, `event.key` is approximately the same as `event.code`: - -| キー | `event.key` | `event.code` | +| Key | `event.key` | `event.code` | |--------------|-------------|--------------| | `key:F1` |`F1` |`F1` | | `key:Backspace` |`Backspace` |`Backspace` | | `key:Shift`|`Shift` |`ShiftRight` or `ShiftLeft` | -`event.code` は正確にどのキーが押されたかを特定することに注意してください。例えば、ほとんどのキーボードは2つの `key:Shift` キーを持っています: 左側と右側です。`event.code` は厳密にどちらが押されたのかを示し、`event.key` はキーの "意味" に対して責任を持っています: それは何か("Shift")です。 +Please note that `event.code` specifies exactly which key is pressed. For instance, most keyboards have two `key:Shift` keys: on the left and on the right side. The `event.code` tells us exactly which one was pressed, and `event.key` is responsible for the "meaning" of the key: what it is (a "Shift"). -ここで、ホットキーを処理したいとしましょう: `key:Ctrl+Z` (Mac だと`key:Cmd+Z`)。多くのテキストエディタは "元に戻す" アクションをフックします。`keydown` にリスナーを設定して、どのキーが押されたか確認することができます -- ホットキーを検出するために。 +Let's say, we want to handle a hotkey: `key:Ctrl+Z` (or `key:Cmd+Z` for Mac). Most text editors hook the "Undo" action on it. We can set a listener on `keydown` and check which key is pressed. -ここにはジレンマがあります。:このようなリスナーにおいては、`event.key` または `event.code` どちらの値をチェックするべきでしょうか？ +There's a dilemma here: in such a listener, should we check the value of `event.key` or `event.code`? -`event.key` の場合、値は文字であり、言語によって異なります。訪問者が OS で複数の言語をもち、切り替えた場合、同じキーで異なる文字になります。したがって、常に同じである `event.code` をチェックするのが理にかなっています。 +On one hand, the value of `event.key` is a character, it changes depending on the language. If the visitor has several languages in OS and switches between them, the same key gives different characters. So it makes sense to check `event.code`, it's always the same. -次のようになります: +Like this: ```js run document.addEventListener('keydown', function(event) { @@ -89,105 +87,114 @@ document.addEventListener('keydown', function(event) { }); ``` -その一方で、`event.code` を利用した場合の問題もあります。異なるキーボードレイアウトの場合、同じキーが異なる文字を持つ場合があります。 +On the other hand, there's a problem with `event.code`. For different keyboard layouts, the same key may have different characters. -例えば、ここに US レイアウト ("QWERTY") とその下のドイツ語のレイアウト("QWERTZ")です(Wikipedia より) +For example, here are US layout ("QWERTY") and German layout ("QWERTZ") under it (from Wikipedia): ![](us-layout.svg) ![](german-layout.svg) -同じキーに対して、US レイアウトは "Z" である一方、ドイツ語レイアウトは "Y" (文字が入れ替わっています) +For the same key, US layout has "Z", while German layout has "Y" (letters are swapped). -文字通り、`key:Y` を押すと、ドイツ語のレイアウトを持つ人々の `event.code` は `KeyZ` と等しくなります。 +Literally, `event.code` will equal `KeyZ` for people with German layout when they press `key:Y`. -もしコードで `event.code == 'KeyZ'` というチェックをしている場合、ドイツ語レイアウトの人々は、`key:Y` を押すことでこの評価が通ります。 +If we check `event.code == 'KeyZ'` in our code, then for people with German layout such test will pass when they press `key:Y`. -これはとても奇妙に思えますが、そのように動作します。[仕様](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system) でこのような振る舞いについて明示的に言及されています。 +That sounds really odd, but so it is. The [specification](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system) explicitly mentions such behavior. -したがって、`event.code` は予期しないレイアウトの場合、間違った文字と一致する可能性があります。異なるレイアウトにおいて、同じ文字が異なる物理キーに割りあてられ、異なるコードに繋がる場合があります。幸いなことに、これはいくつかのコードでのみ起こりえます, 例: `keyA`, `keyQ`, `keyZ` (これまで見てきたように)。また、`Shift` のような特別なキーでは発生しません。[仕様](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system)で一覧を見ることができます。 +So, `event.code` may match a wrong character for unexpected layout. Same letters in different layouts may map to different physical keys, leading to different codes. Luckily, that happens only with several codes, e.g. `keyA`, `keyQ`, `keyZ` (as we've seen), and doesn't happen with special keys such as `Shift`. You can find the list in the [specification](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system). -レイアウトに依存する文字を確実に追跡するには、`event.key` のほうが適している場合があります。 +To reliably track layout-dependent characters, `event.key` may be a better way. -一方、`event.code` は訪問者が言語を変えたとしても、物理キーにバインドされて、常に同じままであるという利点があります。したがって、これに依存するホットキーは、言語が切り替わった場合でもうまく機能します。 +On the other hand, `event.code` has the benefit of staying always the same, bound to the physical key location. So hotkeys that rely on it work well even in case of a language switch. -レイアウトに依存するキーを扱いたいたいですか？ その場合は `event.key` がよいです。 +Do we want to handle layout-dependant keys? Then `event.key` is the way to go. -あるいは、言語を切り替えた後でもホットキーを機能させたいですか？それなら `event.code` のほうがよいかもしれません。 +Or we want a hotkey to work even after a language switch? Then `event.code` may be better. -## 自動繰り返し +## Auto-repeat -もしキーが長時間押されていると、繰り返しを始めます: `keydown` は何度もトリガされ、その後キーが離されたとき、最終的に `keyup` を得ます。そのため、多くの `keydown` と単一の `keyup` をもつのは普通なことです。 +If a key is being pressed for a long enough time, it starts to "auto-repeat": the `keydown` triggers again and again, and then when it's released we finally get `keyup`. So it's kind of normal to have many `keydown` and a single `keyup`. -すべての繰り返しキーに対して、イベントオブジェクトは `event.repeat` プロパティが `true` に設定されています。 +For events triggered by auto-repeat, the event object has `event.repeat` property set to `true`. -## デフォルトアクション +## Default actions -キーボードによって開始され得ることはたくさんあるので、デフォルトアクションさまざまです。 +Default actions vary, as there are many possible things that may be initiated by the keyboard. -例えば: +For instance: -- 画面に文字が現れる(もっとも明白な結果) -- 文字が削除される(`key:Delete` キー) -- ページがスクロールされる(`key:PageDown` キー) -- ブラウザが "保存" ダイアログを開く (`key:Ctrl+S`) -- などなど +- A character appears on the screen (the most obvious outcome). +- A character is deleted (`key:Delete` key). +- The page is scrolled (`key:PageDown` key). +- The browser opens the "Save Page" dialog (`key:Ctrl+S`) +- ...and so on. -`keydown` のデフォルトアクションを防ぐことは、OSベースの特別なキーを除き、それらのほとんどを取り消すことが可能です。例えば、Windows の `key:Alt+F4` は現在のブラウザウィンドウを閉じます。そして、JavaScript でデフォルトアクションを防ぐことでそれを止める方法はありません。 +Preventing the default action on `keydown` can cancel most of them, with the exception of OS-based special keys. For instance, on Windows `key:Alt+F4` closes the current browser window. And there's no way to stop it by preventing the default action in JavaScript. -別の例で、下記の `` は電話番号を期待しているので、数値, `+`, `()` または `-` 以外は許可しません。: +For instance, the `` below expects a phone number, so it does not accept keys except digits, `+`, `()` or `-`: ```html autorun height=60 run ``` -`key:Backspace`, `key:Left`, `key:Right`, `key:Ctrl+V` のような特別なキーはインプットでは動作しないことに注意してください。これは厳密なフィルタ `checkPhoneKey` の副作用です。 +The `onkeydown` handler here uses `checkPhoneKey` to check for the key pressed. If it's valid (from `0..9` or one of `+-()`), then it returns `true`, otherwise `false`. + +As we know, the `false` value returned from the event handler, assigned using a DOM property or an attribute, such as above, prevents the default action, so nothing appears in the `` for keys that don't pass the test. (The `true` value returned doesn't affect anything, only returning `false` matters) -少しだけ緩めましょう。: +Please note that special keys, such as `key:Backspace`, `key:Left`, `key:Right`, do not work in the input. That's a side effect of the strict filter `checkPhoneKey`. These keys make it return `false`. +Let's relax the filter a little bit by allowing arrow keys `key:Left`, `key:Right` and `key:Delete`, `key:Backspace`: ```html autorun height=60 run ``` -今は矢印や削除も動作します。 +Now arrows and deletion works well. + +Even though we have the key filter, one still can enter anything using a mouse and right-click + Paste. Mobile devices provide other means to enter values. So the filter is not 100% reliable. + +The alternative approach would be to track the `oninput` event -- it triggers *after* any modification. There we can check the new `input.value` and modify it/highlight the `` when it's invalid. Or we can use both event handlers together. + +## Legacy -...しかし、まだマウスや右クリック+貼り付けを使用してどのような値も入力することができます。なので、フィルタは 100% 信頼はできません。ただ、殆どの場合では動作するのでこのようにすることはできます。もしくは、代わりのアプローチは `input` イベントを追跡することです -- これはすべての変更のあとにトリガされます。そこでは新しい値をチェックし、それが無効であるときには強調/変更することができます。 +In the past, there was a `keypress` event, and also `keyCode`, `charCode`, `which` properties of the event object. -## レガシー +There were so many browser incompatibilities while working with them, that developers of the specification had no way, other than deprecating all of them and creating new, modern events (described above in this chapter). The old code still works, as browsers keep supporting them, but there's totally no need to use those any more. -過去、`keypress` イベントや、`keyCode`, `charCode`, `which` と言ったイベントオブジェクトのプロパティがありました。 +## Mobile Keyboards -そこにはブラウザの非互換性が非常に多く、仕様の開発者はそれらのすべてを非推奨にすることに決めました。ブラウザがそれらをサポートし続けるので、古いコードはまだ動作しますが、それらをもう使用する必要は全くありません。 +When using virtual/mobile keyboards, formally known as IME (Input-Method Editor), the W3C standard states that a KeyboardEvent's [`e.keyCode` should be `229`](https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode) and [`e.key` should be `"Unidentified"`](https://www.w3.org/TR/uievents-key/#key-attr-values). -このチャプターに、それらの詳しい説明があった時期もありました。しかし、今のところ、私たちはそれらを忘れても問題ありません。 +While some of these keyboards might still use the right values for `e.key`, `e.code`, `e.keyCode`... when pressing certain keys such as arrows or backspace, there's no guarantee, so your keyboard logic might not always work on mobile devices. -## サマリ +## Summary -キーを押すと、キーに応じたキーボードイベントが常に生成されます。唯一の例外は、ノートパソコンのキーボードに表示される `key:Fn` キーです。 それはOSよりも低いレベルで実装されることが多いため、キーボードイベントはありません。 +Pressing a key always generates a keyboard event, be it symbol keys or special keys like `key:Shift` or `key:Ctrl` and so on. The only exception is `key:Fn` key that sometimes presents on a laptop keyboard. There's no keyboard event for it, because it's often implemented on lower level than OS. -キーボードイベント: +Keyboard events: -- `keydown` -- キーを押したとき（長押しの場合は自動的に繰り返されます） -- `keyup` -- キーを離したとき +- `keydown` -- on pressing the key (auto-repeats if the key is pressed for long), +- `keyup` -- on releasing the key. -主なキーボードイベントのプロパティ: +Main keyboard event properties: -- `code` -- "キーコード" (`"KeyA"`, `"ArrowLeft"` など)。キーボード上のキーの物理的な位置に固有です。 -- `key` -- 文字 (`"A"`, `"a"` など)。非文字のキーの場合は通常 `code` と同じ値を持っています。 +- `code` -- the "key code" (`"KeyA"`, `"ArrowLeft"` and so on), specific to the physical location of the key on keyboard. +- `key` -- the character (`"A"`, `"a"` and so on), for non-character keys, such as `key:Esc`, usually has the same value as `code`. -過去、キーボードイベントはフォームフィールドで、ユーザ入力を追跡するために使われていました。しかし、入力は様々な方法で行われる可能性があるため、それは信頼できません。任意の入力を処理するために `input` と `change` イベントがあります (これらについてはチャプター で後ほど説明します)。これらは任意の入力後にトリガされ、マウスや音声認識なども含みます。 +In the past, keyboard events were sometimes used to track user input in form fields. That's not reliable, because the input can come from various sources. We have `input` and `change` events to handle any input (covered later in the chapter ). They trigger after any kind of input, including copy-pasting or speech recognition. -本当にキーボードが必要なときにキーボードイベントを使うべきです。例えば、ホットキーや特別なキーに反応するため、などです。 +We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys. diff --git a/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html b/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html index 4010628301..a0d5a4f40e 100644 --- a/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html +++ b/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html @@ -28,7 +28,7 @@ - + diff --git a/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/script.js b/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/script.js index 5eba24c7ad..d97f7a7b50 100644 --- a/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/script.js +++ b/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/script.js @@ -5,6 +5,8 @@ let lastTime = Date.now(); function handle(e) { if (form.elements[e.type + 'Ignore'].checked) return; + area.scrollTop = 1e6; + let text = e.type + ' key=' + e.key + ' code=' + e.code + diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md index 562c2b61a5..cf6338c2e1 100644 --- a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md +++ b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md @@ -8,6 +8,7 @@ ドキュメントは `` タグ、つまり `document.documentElement` の中に表現されます。 +<<<<<<< HEAD `document.documentElement.getBoundingClientRect()` でドキュメント全体のウィンドウ相対座標を得ることができます。そして、`bottom` プロパティはドキュメントの終わりのウィンドウ相対座標です。 例えば、HTML ドキュメント全体の高さが 2000px の場合は: @@ -15,6 +16,15 @@ ```js // ページのトップにいるとき // ウィンドウ相対のトップは 0 です +======= +We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom. + +For instance, if the height of the whole HTML document is `2000px`, then: + +```js +// when we're on the top of the page +// window-relative top = 0 +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d document.documentElement.getBoundingClientRect().top = 0 // ウィンドウ相対の底 = 2000 @@ -35,6 +45,7 @@ document.documentElement.getBoundingClientRect().bottom = 1500 ```js +<<<<<<< HEAD document.documentElement.getBoundingClientRect().top = -1400 document.documentElement.getBoundingClientRect().bottom = 600 ``` @@ -44,6 +55,19 @@ bottom は 0 にはなれないことに注意してください。なぜなら また、ウィンドウの高さは `document.documentElement.clientHeight` です。 私たちは、ドキュメントの底部がそれからd `100px` 以上は離れていてほしくないです。 +======= +// document top is above the window 1400px +document.documentElement.getBoundingClientRect().top = -1400 +// document bottom is below the window 600px +document.documentElement.getBoundingClientRect().bottom = 600 +``` + +Please note that the `bottom` can't be `0`, because it never reaches the window top. The lowest limit of the `bottom` coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up. + +We can obtain the window height as `document.documentElement.clientHeight`. + +For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`). +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d したがって、関数は次のようになります: @@ -53,11 +77,18 @@ function populate() { // document bottom let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; +<<<<<<< HEAD // もしウィンドウの高さ + 100px よりも大きい場合、ページの終わりではありません // (上の例の通り、大きい bottom はもっとスクロールが必要であることを意味します if (windowRelativeBottom > document.documentElement.clientHeight + 100) break; // それ以外はデータを追加する +======= + // if the user hasn't scrolled far enough (>100px to the end) + if (windowRelativeBottom > document.documentElement.clientHeight + 100) break; + + // let's add more data +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d document.body.insertAdjacentHTML("beforeend", `

                    Date: ${new Date()}

                    `); } } diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md index 6926667f0e..f6682a2c0b 100644 --- a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md +++ b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md @@ -11,6 +11,10 @@ importance: 5 - ページがウィンドウの高さよりもスクロールされたとき、-- 左上端に "上向き" の矢印が表示されます。ページがスクロールで上に戻されると消えます。 - 矢印をクリックすると、ページはトップへスクロールします。 +<<<<<<< HEAD このようになります: +======= +Like this (top-left corner, scroll to see): +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d [iframe border="1" height="200" link src="solution"] diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md index 56ce26e792..168bf6628b 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md @@ -1,6 +1,14 @@ `onscroll` ハンドラでどの画像が見えているのかを確認し、それらを表示する必要があります。 +<<<<<<< HEAD また、スクロールをする前にすぐに見える画像を検知してそれらを読み込むために、ページが読み込まれた時にもそれを実行したいです。 +======= +We also want to run it when the page loads, to detect immediately visible images and load them. + +The code should execute when the document is loaded, so that it has access to its content. + +Or put it at the `` bottom: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js // ...the page content is above... @@ -11,12 +19,30 @@ function isVisible(elem) { let windowHeight = document.documentElement.clientHeight; - // top elem edge is visible OR bottom elem edge is visible + // top elem edge is visible? let topVisible = coords.top > 0 && coords.top < windowHeight; + + // bottom elem edge is visible? let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0; return topVisible || bottomVisible; } +``` + +The `showVisible()` function uses the visibility check, implemented by `isVisible()`, to load visible images: + +```js +function showVisible() { + for (let img of document.querySelectorAll('img')) { + let realSrc = img.dataset.src; + if (!realSrc) continue; + + if (isVisible(img)) { + img.src = realSrc; + img.dataset.src = ''; + } + } +} *!* showVisible(); @@ -24,6 +50,10 @@ window.onscroll = showVisible; */!* ``` +<<<<<<< HEAD 見えている画像に対して、`img.dataset.src` を取り、`img.src` に割り当てます(まだしていない場合)。 P.S. この解決策は１ページ上下にある画像を "プリロード" する `isVisibe` のバリアントも持っています(ページの高さは `document.documentElement.clientHeight` です)。 +======= +P.S. The solution also has a variant of `isVisible` that "preloads" images that are within 1 page above/below the current document scroll. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/index.html b/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/index.html index 5c6027a6f8..9953ace660 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/index.html +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/index.html @@ -169,38 +169,8 @@

                    Neptune

                    * It's enough that the top or bottom edge of the element are visible */ function isVisible(elem) { - - let coords = elem.getBoundingClientRect(); - - let windowHeight = document.documentElement.clientHeight; - - // top elem edge is visible OR bottom elem edge is visible - let topVisible = coords.top > 0 && coords.top < windowHeight; - let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0; - - return topVisible || bottomVisible; - } - - /** - A variant of the test that considers the element visible if it's no more than - one page after/behind the current screen. - - function isVisible(elem) { - - let coords = elem.getBoundingClientRect(); - - let windowHeight = document.documentElement.clientHeight; - - let extendedTop = -windowHeight; - let extendedBottom = 2 * windowHeight; - - // top visible || bottom visible - let topVisible = coords.top > extendedTop && coords.top < extendedBottom; - let bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop; - - return topVisible || bottomVisible; + // todo: your code } - */ function showVisible() { for (let img of document.querySelectorAll('img')) { diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md index 2c66d6f91c..aa7e5b0da3 100644 --- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md +++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md @@ -4,7 +4,11 @@ importance: 4 # 目に見える画像を読み込む +<<<<<<< HEAD 低速のクライアントがおり、モバイルのトラフィックを節約したいとしましょう。 +======= +Let's say we have a slow-speed client and want to save their mobile traffic. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d この目的に対し、画像をすぐには表示せず、それらをプレースホルダに置き換えることに決めました。次のようになります: diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md index 8de895a40b..f700ffb9dc 100644 --- a/2-ui/3-event-details/8-onscroll/article.md +++ b/2-ui/3-event-details/8-onscroll/article.md @@ -1,18 +1,26 @@ # スクロール +<<<<<<< HEAD スクロールイベントは、ページや要素のスクローリングに反応することができます。私たちがここでできることはたくさんあります。 +======= +The `scroll` event allows reacting to a page or element scrolling. There are quite a few good things we can do here. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例えば: - ユーザーがドキュメント内のどこにあるかに応じて、追加のコントロールや情報を表示/非表示する。 - ユーザがページの下までスクロールしたときに追加のデータを読み込む。 +<<<<<<< HEAD [cut] ここに現在のスクロールを表示する小さい関数があります: +======= +Here's a small function to show the current scroll: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```js autorun window.addEventListener('scroll', function() { - document.getElementById('showScroll').innerHTML = pageYOffset + 'px'; + document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px'; }); ``` @@ -25,6 +33,7 @@ window.addEventListener('scroll', function() { `scroll` イベントは `window` とスクロール可能な要素両方で動作します。 +<<<<<<< HEAD ## スクロールを防止する どうやってスクロールをできなくするのでしょう？ `onscroll` リスナの中で、`event.preventDefault()` によってスクロールを防止することはできません。なぜなら、それはスクロールがすでに行われた *後* にトリガされるからです。 @@ -38,3 +47,16 @@ window.addEventListener('scroll', function() { これは役立つ場合があります。しかし、他にもスクロールする方法があり、それらすべてを処理するのは非常に難しいです。そのため、何かをスクロールできないようにするには、 `overflow` プロパティのように CSS を使うのが、より信頼できる方法です。 ここでは、 `onscroll` 時のアプリケーションを解いたり、目を通すことができるタスクはほとんどありません。 +======= +How do we make something unscrollable? + +We can't prevent scrolling by using `event.preventDefault()` in `onscroll` listener, because it triggers *after* the scroll has already happened. + +But we can prevent scrolling by `event.preventDefault()` on an event that causes the scroll, for instance `keydown` event for `key:pageUp` and `key:pageDown`. + +If we add an event handler to these events and `event.preventDefault()` in it, then the scroll won't start. + +There are many ways to initiate a scroll, so it's more reliable to use CSS, `overflow` property. + +Here are few tasks that you can solve or look through to see applications of `onscroll`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/3-event-details/index.md b/2-ui/3-event-details/index.md index 1bc9933937..3bccbf6f35 100644 --- a/2-ui/3-event-details/index.md +++ b/2-ui/3-event-details/index.md @@ -1,3 +1,9 @@ +<<<<<<< HEAD # イベントの詳細 -ここでは、最も重要なイベントとその動作の詳細について説明します。 \ No newline at end of file +ここでは、最も重要なイベントとその動作の詳細について説明します。 +======= +# UI Events + +Here we cover most important user interface events and how to work with them. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md index 2a2b490141..4e54eff248 100644 --- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md +++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md @@ -12,7 +12,11 @@ alert( selectedOption.value ); // 2) +<<<<<<< HEAD let newOption = new Option("classic", "Classic"); +======= + let newOption = new Option("Classic", "classic"); +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d genres.append(newOption); // 3) diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md index 9f2bf09b76..4406abbddd 100644 --- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md +++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md @@ -15,6 +15,14 @@ importance: 5 次をするために JavaScript を使います: +<<<<<<< HEAD 1. 選択された option の値とテキストを表示します。 2. option `` を追加します。 3. 選択状態にします. +======= +1. Show the value and the text of the selected option. +2. Add an option: ``. +3. Make it selected. + +Note, if you've done everything right, your alert should show `blues`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index fe9e3f23c8..faf97278dd 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -2,19 +2,31 @@ フォームや `` のようなコントロール要素は多くの特別なプロパティやイベントを持っています。 +<<<<<<< HEAD それらを知っていると、フォームを使った作業がはるかに便利になります。 [cut] +======= +Working with forms will be much more convenient when we learn them. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ## ナビゲーション: フォームと要素 ドキュメントフォームは特別な集合 `document.forms` のメンバです。 +<<<<<<< HEAD それは *名付けされた* 集合で、名前と数字の両方を使ってフォームを取得することができます。 ```js no-beautify document.forms.my - name="my" のフォーム document.forms[0] - ドキュメント中の最初のフォーム +======= +That's a so-called *"named collection"*: it's both named and ordered. We can use both the name or the number in the document to get the form. + +```js no-beautify +document.forms.my; // the form with name="my" +document.forms[0]; // the first form in the document +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` フォームをもつと、名前付けされた集合 `forms.elements` で、任意の要素が利用可能です。 @@ -38,9 +50,15 @@ document.forms[0] - ドキュメント中の最初のフォーム ``` +<<<<<<< HEAD 同じ名前で複数の要素がある可能性があり、それはラジオボタンの場合がよくあります。 この場合、`form.elements[name]` は集合です、例えば: +======= +There may be multiple elements with the same name. This is typical with radio buttons and checkboxes. + +In that case, `form.elements[name]` is a *collection*. For instance: +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```html run height=40
                    @@ -53,6 +71,7 @@ let form = document.forms[0]; let ageElems = form.elements.age; +<<<<<<< HEAD alert(ageElems[0].value); // 10, 1つ目の input の値 ``` @@ -62,6 +81,19 @@ alert(ageElems[0].value); // 10, 1つ目の input の値 ````smart header="\"サブフォーム\"としてのフィールドセット" フォームは１つ以上の `
                    ` 要素をその中にもっている場合があります。それらも `elements` プロパティでサポートされています。 +======= +*!* +alert(ageElems[0]); // [object HTMLInputElement] +*/!* + +``` + +These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in `form.elements`. + + +````smart header="Fieldsets as \"subforms\"" +A form may have one or many `
                    ` elements inside it. They also have `elements` property that lists form controls inside them. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d 例: @@ -81,7 +113,11 @@ alert(ageElems[0].value); // 10, 1つ目の input の値 let fieldset = form.elements.userFields; alert(fieldset); // HTMLFieldSetElement +<<<<<<< HEAD // フォームとフィールドセット両方から input を取得することができます +======= + // we can get the input by name both from the form and from the fieldset +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert(fieldset.elements.login == form.elements.login); // true */!* @@ -92,7 +128,11 @@ alert(ageElems[0].value); // 10, 1つ目の input の値 ````warn header="より短い記法: `form.name`" より短い記法があります: `form[index/name]` で要素にアクセスすることができます。 +<<<<<<< HEAD `form.elements.login` の代わりに、`form.login` と書けます。 +======= +In other words, instead of `form.elements.login` we can write `form.login`. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d これも動作しますが、小さな問題があります: もし要素にアクセスし、その後でその `name` を変えた場合、依然として古い名前で利用可能です(新しい名前と同様に)。 @@ -113,19 +153,31 @@ alert(ageElems[0].value); // 10, 1つ目の input の値 alert(form.elements.username); // input *!* +<<<<<<< HEAD // 直アクセスは両方の名前が使用可能 +======= + // form allows both names: the new one and the old one +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d alert(form.username == form.login); // true */!* ``` +<<<<<<< HEAD これは通常は問題ではありません。なぜならフォーム要素の名前を変えることは殆どないからです。 +======= +That's usually not a problem, however, because we rarely change names of form elements. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ```` ## 後方参照: element.form +<<<<<<< HEAD 任意の要素に対して、フォームは `element.form` として利用可能です。そのため、フォームはすべての要素を参照し、要素はフォームを参照します。 +======= +For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d これはその図です: @@ -151,11 +203,19 @@ alert(ageElems[0].value); // 10, 1つ目の input の値 ## フォーム要素 +<<<<<<< HEAD それぞれの機能に注意を払いながら、フォームコントロールについて話しましょう。 +======= +Let's talk about form controls. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ### input と textarea +<<<<<<< HEAD 通常、チェックボックスに対しては `input.value` または `input.checked` で値にアクセスできます。 +======= +We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes and radio buttons. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d このように: @@ -166,14 +226,22 @@ textarea.value = "New text"; input.checked = true; // チェックボックスやラジオボタンの場合 ``` +<<<<<<< HEAD ```warn header="`textarea.innerHTML` ではなく `textarea.value` を使います" 決して `textarea.innerHTML` は使わないよう注意してください。それは現在の値ではなく、ページの初期時点の HTML のみを保持しています。 +======= +```warn header="Use `textarea.value`, not `textarea.innerHTML`" +Please note that even though `` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it. + +It stores only the HTML that was initially on the page, not the current value. +>>>>>>> b258d7d5b635c88228f7556e14fbe5e5ca7f736d ``` ### select と option ``: + +1. Find the corresponding `