Skip to content

Commit a3e75a2

Browse files
committed
merging all conflicts
2 parents 44bb200 + 540d753 commit a3e75a2

File tree

793 files changed

+41032
-806
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

793 files changed

+41032
-806
lines changed

.gitattributes

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
* text=auto eol=lf
2+
*.svg binary

.github/FUNDING.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
github: iliakan

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@ sftp-config.json
2121
Thumbs.db
2222

2323

24+
/svgs

1-js/01-getting-started/1-intro/article.md

Lines changed: 108 additions & 0 deletions
Large diffs are not rendered by default.

1-js/01-getting-started/2-manuals-specifications/article.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11

2+
<<<<<<< HEAD
23
# マニュアルと仕様
34

45
この本は *チュートリアル* であり、あなたが徐々に言語を学ぶのを助けることを目的としています。そのため、基本が理解できたら別の情報源が必要になってきます。
@@ -39,3 +40,41 @@ JavaScript は開発中の言語であり、定期的に新機能が追加され
3940
これらのリソースは、言語の詳細やサポートなどに関する貴重な情報が含まれているため、実際の開発に役立ちます。
4041

4142
特定の機能に関する詳細な情報が必要な場合は、それら(またはこのページ)を覚えておいてください。
43+
=======
44+
# Manuals and specifications
45+
46+
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.
47+
48+
## Specification
49+
50+
[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.
51+
52+
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.
53+
54+
A new specification version is released every year. Between these releases, the latest specification draft is at <https://tc39.es/ecma262/>.
55+
56+
To read about new bleeding-edge features, including those that are "almost standard" (so-called "stage 3"), see proposals at <https://github.com/tc39/proposals>.
57+
58+
Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial.
59+
60+
## Manuals
61+
62+
- **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.
63+
64+
You can find it at <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference>.
65+
66+
Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. <https://google.com/search?q=MDN+parseInt> to search for the `parseInt` function.
67+
68+
## Compatibility tables
69+
70+
JavaScript is a developing language, new features get added regularly.
71+
72+
To see their support among browser-based and other engines, see:
73+
74+
- <https://caniuse.com> - per-feature tables of support, e.g. to see which engines support modern cryptography functions: <https://caniuse.com/#feat=cryptography>.
75+
- <https://kangax.github.io/compat-table> - a table with language features and engines that support those or don't support.
76+
77+
All these resources are useful in real-life development, as they contain valuable information about language details, their support, etc.
78+
79+
Please remember them (or this page) for the cases when you need in-depth information about a particular feature.
80+
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b

1-js/01-getting-started/3-code-editors/article.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<<<<<<< HEAD
12
# コードエディタ
23

34
コードエディタはプログラマが最も時間を費やす場所です。
@@ -44,3 +45,54 @@ Windows には、"Visual Studio"もあります。"Visual Studio Code" と混同
4445
この広い世界には他にも素晴らしいエディタがあります。ぜひあなたが最も好きなものを選んでください。
4546

4647
エディタの選択は、他のツールのようにプロジェクト、習慣や個人の趣向によります。
48+
=======
49+
# Code editors
50+
51+
A code editor is the place where programmers spend most of their time.
52+
53+
There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type.
54+
55+
## IDE
56+
57+
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."
58+
59+
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.
60+
61+
If you haven't selected an IDE yet, consider the following options:
62+
63+
- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
64+
- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, paid).
65+
66+
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/).
67+
68+
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.
69+
70+
## Lightweight editors
71+
72+
"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple.
73+
74+
They are mainly used to open and edit a file instantly.
75+
76+
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.
77+
78+
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.
79+
80+
There are many options, for instance:
81+
82+
- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware).
83+
- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
84+
- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
85+
86+
## Let's not argue
87+
88+
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.
89+
90+
There are other great editors in our big world. Please choose the one you like the most.
91+
92+
The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.
93+
94+
The author's personal opinion:
95+
96+
- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend.
97+
- 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).
98+
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b

1-js/01-getting-started/4-devtools/article.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<<<<<<< HEAD
12
# 開発者コンソール
23

34
コードにエラーはつきものです。少なくともあなたが [ロボット](https://en.wikipedia.org/wiki/Bender_(Futurama)) ではなく人間であるなら、*絶対に* 間違いをする、ということです。
@@ -61,3 +62,68 @@ Preferencesを開き、"Advanced" ペインに行きます。一番下にチェ
6162
- Windows下では、ほとんどのブラウザは `key:F12` で開くことができます。Mac用のChromeは `key:Cmd+Opt+J` が必要で、Safariは`key:Cmd+Opt+C`です(最初に有効化が必要)。
6263

6364
これで環境が整いました。次のセクションでは、JavaScriptの説明に入ります。
65+
=======
66+
# Developer console
67+
68+
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)).
69+
70+
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.
71+
72+
To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers.
73+
74+
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.
75+
76+
Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
77+
78+
## Google Chrome
79+
80+
Open the page [bug.html](bug.html).
81+
82+
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.
83+
84+
Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
85+
86+
The developer tools will open on the Console tab by default.
87+
88+
It looks somewhat like this:
89+
90+
![chrome](chrome.webp)
91+
92+
The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar.
93+
94+
- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command.
95+
- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred.
96+
97+
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.
98+
99+
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 <info:debugging-chrome>.
100+
101+
```smart header="Multi-line input"
102+
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
103+
104+
To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
105+
```
106+
107+
## Firefox, Edge, and others
108+
109+
Most other browsers use `key:F12` to open developer tools.
110+
111+
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.
112+
113+
## Safari
114+
115+
Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
116+
117+
Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
118+
119+
![safari](safari.png)
120+
121+
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.
122+
123+
## Summary
124+
125+
- Developer tools allow us to see errors, run commands, examine variables, and much more.
126+
- 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).
127+
128+
Now we have the environment ready. In the next section, we'll get down to JavaScript.
129+
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
22.2 KB
Binary file not shown.
Binary file not shown.
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
[html src="index.html"]

0 commit comments

Comments
 (0)