up
This commit is contained in:
Ilya Kantor
parent
157b521f5f
commit
923db1d4ad
19 changed files with 140 additions and 166 deletions
|
|
@ -80,8 +80,7 @@ There are ways to interact with camera/microphone and other devices, but they re
|
|||
|
||||
There are ways to workaround this, of course. But if two pages come from different sites (different domain, protocol or port), they require a special code on *both of them* allowing to interact.
|
||||
|
||||
|
||||
The limitation is again for user safety. A page from evilsite.com which a user has opened occasionaly will be unable to access other browser tabs and steal information from there.
|
||||
The limitation is again for user safety. A page from `http://evilsite.com` which a user has opened occasionaly will be unable to access other browser tabs and steal information from there.
|
||||
</li>
|
||||
<li>JavaScript can easily communicate over the net to the server where the current page came from. But it's ability to receive data from other sites/domains is crippled. Though possible, it requires the explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's safety limitations.
|
||||
</li>
|
||||
|
|
@ -149,7 +148,7 @@ Modern browsers improve their engines to raise JavaScript execution script, fix
|
|||
The trend: JavaScript is becoming faster, gets new syntax and language features.
|
||||
[/summary]
|
||||
|
||||
## Languages over JavaScript
|
||||
## Languages "over" JavaScript
|
||||
|
||||
The syntax of JavaScript does not suit everyone's needs: some people think that it's too flexible, the others consider it too limited, the third ones want to add new features absent in the standard...
|
||||
|
||||
|
|
@ -169,7 +168,10 @@ Examples of such languages:
|
|||
|
||||
## Summary
|
||||
|
||||
As of now, JavaScript is unique due it's full integration with HTML/CSS and wide browser adoption.
|
||||
<ul>
|
||||
<li>JavaScript was initially created as a browser-only language, but now used in many other environments as well.</li>
|
||||
<li>At this moment, JavaScript as a unique position as a most widely adopted browser language with full integration with HTML/CSS.</li>
|
||||
<li>There are over 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.</li>
|
||||
</ul>
|
||||
|
||||
Other languages like TypeScript can help to write less bug-proof code. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
|
||||
# Modern JavaScript now
|
||||
# Using the latest features now
|
||||
|
||||
The [latest standard](http://www.ecma-international.org/publications/standards/Ecma-262.htm) was approved in June 2015.
|
||||
|
||||
As it includes a lot of new features, most browsers implement them partially. You can find the current state of the support at [](https://kangax.github.io/compat-table/es6/).
|
||||
|
||||
Sometimes the project is targeted to a single JavaScript engine, like Node.JS (V8). Then we can use only the features supported by V8 (quite a lot).
|
||||
If a project is developed for a single JavaScript engine, like V8 (Node.JS, Chrome), then we can use V8-supported features. That's a lot.
|
||||
|
||||
But what if we're writing a cross-browser application?
|
||||
But what if we're writing a cross-browser application? Different browsers support different subsets of ES-2015.
|
||||
|
||||
Here comes Babel.JS.
|
||||
|
||||
## Babel.JS
|
||||
|
||||
|
|
@ -16,57 +18,63 @@ But what if we're writing a cross-browser application?
|
|||
Actually, there are two parts in Babel:
|
||||
|
||||
<ol>
|
||||
<li>The transpiler itself, which rewrites the code.</li>
|
||||
<li>An additional JavaScript library which adds the support for modern JavaScript functions to the browser.</li>
|
||||
<li>The transpiler program, which rewrites the code.
|
||||
|
||||
The transpiler runs on a developer's computer. It rewrites the code, which is then bundled by a project build system (like [webpack](http://webpack.github.io/) or [brunch](http://brunch.io/)). Most build systems can support Babel easily. One just needs to setup the build system itself.</li>
|
||||
<li>JavaScript library.
|
||||
|
||||
An additional JavaScript library with modern JavaScript functions for the browsers that do not have them built-in (yet). The library must be attached to each webpage which relies on these functions.</li>
|
||||
</ol>
|
||||
|
||||
The transpiler runs on a developer's computer. It rewrites the code, which is then bundled by a project build system (like [webpack](http://webpack.github.io/) or [brunch](http://brunch.io/)). Most build systems can support Babel easily. One just needs to setup the build system itself.
|
||||
There is a special "play" mode of Babel.JS which merges both parts in a single in-browser script.
|
||||
|
||||
Most syntax-level language features
|
||||
The JavaScript library if required if
|
||||
|
||||
|
||||
Настройка такой конвертации тривиальна, единственно -- нужно поднять саму систему сборки, а добавить к ней Babel легко, плагины есть к любой из них.
|
||||
|
||||
Если же хочется "поиграться", то можно использовать и браузерный вариант Babel.
|
||||
|
||||
Это выглядит так:
|
||||
The usage looks like this:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
*!*
|
||||
<!-- browser.js лежит на моём сервере, не надо брать с него -->
|
||||
<script src="https://js.cx/babel-core/browser.min.js"></script>
|
||||
<!-- browser.js is on my server please don't hotlink -->
|
||||
<script src="https://en.js.cx/babel-core/browser.min.js"></script>
|
||||
*/!*
|
||||
|
||||
<script type="text/babel">
|
||||
let arr = ["hello", 2]; // let
|
||||
let arr = ["hello", 2];
|
||||
|
||||
let [str, times] = arr; // деструктуризация
|
||||
let [str, times] = arr;
|
||||
|
||||
alert( str.repeat(times) ); // hellohello, метод repeat
|
||||
alert( str.repeat(times) ); // hellohello
|
||||
</script>
|
||||
```
|
||||
|
||||
Сверху подключается браузерный скрипт `browser.min.js` из пакета Babel. Он включает в себя полифилл и транспайлер. Далее он автоматически транслирует и выполняет скрипты с `type="text/babel"`.
|
||||
Script `browser.min.js` is attached to the top of the page. It automatically transpiles and runs the scripts with `type="text/babel"`.
|
||||
|
||||
Размер `browser.min.js` превышает 1 мегабайт, поэтому такое использование в production строго не рекомендуется.
|
||||
The size of `browser.min.js` is above 1 megabyte, because it includes the transpiler. Hence such usage is only for "playing" and not recommended for production.
|
||||
|
||||
# Примеры на этом сайте
|
||||
Also:
|
||||
<ul>
|
||||
<li>There is a "try it" page on [](https://babeljs.io/repl/) which allows to run snippets of code.</li>
|
||||
<li>[JSBin](http://jsbin.com) allows to use "ES6/Babel" mode for JS, see [this snippet](http://jsbin.com/daxihelolo/edit?js,output) as an example.</li>
|
||||
</ul>
|
||||
|
||||
[warn header="Только при поддержке браузера"]
|
||||
Запускаемые примеры с ES-2015 будут работать только если ваш браузер поддерживает соответствующую возможность стандарта.
|
||||
# Examples on this site
|
||||
|
||||
[warn header="Browser support is required"]
|
||||
Examples that use ES-2015 will work only if your browser supports it.
|
||||
[/warn]
|
||||
|
||||
Это означает, что при запуске примеров в браузере, который их не поддерживает, будет ошибка. Это не означает, что пример неправильный! Просто пока нет поддержки...
|
||||
Sometimes it means that when running an example in a non-supporting browser, an error is shown.
|
||||
|
||||
Рекомендуется [Chrome Canary](https://www.google.com/chrome/browser/canary.html) большинство примеров в нём работает. [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/channel/#developer) тоже неплох в поддержке современного стандарта, но на момент написания этого текста переменные [let](/let-const) работают только при указании `version=1.7` в типе скрипта: `<script type="application/javascript;version=1.7">`. Надеюсь, скоро это требование (`version=1.7`) отменят.
|
||||
That doesn't mean that the example is wrong! It's just the browser lacking the support for certain features yet.
|
||||
|
||||
Впрочем, если пример в браузере не работает (обычно проявляется как ошибка синтаксиса) -- почти все примеры вы можете запустить его при помощи Babel, на странице [Babel: try it out](https://babeljs.io/repl/). Там же увидите и преобразованный код.
|
||||
[Chrome Canary](https://www.google.com/chrome/browser/canary.html) is recommended, most examples work in it.
|
||||
|
||||
На практике для кросс-браузерности всё равно используют Babel.
|
||||
[Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/channel/#developer) is fine too, but it has certain glitches. Like: [let](/let-const) variables working only with when the script type contains `version=1.7` or `1.8`: `<script type="application/javascript;version=1.7">`. Most other browsers do not understand such script type. This site uses a special trick to workaround.
|
||||
|
||||
Ещё раз заметим, что самая актуальная ситуация по поддержке современного стандарта браузерами и транспайлерами отражена на странице [](https://kangax.github.io/compat-table/es6/).
|
||||
And in any case you can go [Babel: try it out](https://babeljs.io/repl/) page and run the example there!
|
||||
|
||||
Итак, поехали!
|
||||
On production everyone's using Babel anyway.
|
||||
|
||||
Once again, let's note that the most up-to-date situation with support is reflected on [](https://kangax.github.io/compat-table/es6/).
|
||||
|
||||
Now we can go coding, but we need a good code editor for that, right? That is discussed in the next session.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,69 +1,73 @@
|
|||
# Редакторы для кода
|
||||
# Code editors
|
||||
|
||||
Для разработки обязательно нужен хороший редактор.
|
||||
For the comfortable development we need a good code editor.
|
||||
|
||||
Выбранный вами редактор должен иметь в своем арсенале:
|
||||
It must support at least:
|
||||
|
||||
<ol>
|
||||
<li>Подсветку синтаксиса.</li>
|
||||
<li>Автодополнение.</li>
|
||||
<li>"Фолдинг" (от англ. folding) -- возможность скрыть-раскрыть блок кода.</li>
|
||||
<li>Syntax highlight.</li>
|
||||
<li>Autocompletion.</li>
|
||||
<li>Folding -- hiding/opening blocks of code.</li>
|
||||
</ol>
|
||||
|
||||
[cut]
|
||||
|
||||
## IDE
|
||||
|
||||
Термин IDE (Integrated Development Environment) -- "интегрированная среда разработки", означает редактор, который расширен большим количеством "наворотов", умеет работать со вспомогательными системами, такими как багтрекер, контроль версий, и много чего ещё.
|
||||
The term "IDE" (Integrated Development Environment) -- denotes an editor which is extended by a number of plugins, can work with additional systems, such as bugtrackering, version control and much more.
|
||||
|
||||
Как правило, IDE загружает весь проект целиком, поэтому может предоставлять автодополнение по функциям всего проекта, удобную навигацию по его файлам и т.п.
|
||||
Usually IDE loads the "project" and then can navigate between files, provide autocompletion based on the whole project, do other "project-level" stuff.
|
||||
|
||||
Если вы ещё не задумывались над выбором IDE, присмотритесь к следующим вариантам.
|
||||
If you haven't considered selecting an IDE, pleae look at the following variants:
|
||||
|
||||
<ul>
|
||||
<li>Продукты IntelliJ: [WebStorm](http://www.jetbrains.com/webstorm/), а также в зависимости от дополнительного языка программирования [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) и другие.</li>
|
||||
<li>Visual Studio, в сочетании с разработкой под .NET (Win)</li>
|
||||
<li>Продукты на основе Eclipse, в частности [Aptana](http://www.aptana.com/) и Zend Studio</li>
|
||||
<li>[Komodo IDE](http://www.activestate.com/komodo-ide) и его облегчённая версия [Komodo Edit](http://www.activestate.com/komodo-edit).</li>
|
||||
<li>IntelliJ editors: [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development and [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) and other if you need additional languages.</li>
|
||||
<li>Visual Studio is fine if you're a .NET developer.</li>
|
||||
<li>Eclipse-based products, like [Aptana](http://www.aptana.com/) and Zend Studio.</li>
|
||||
<li>[Komodo IDE](http://www.activestate.com/komodo-ide) and it's lightweight free version [Komodo Edit](http://www.activestate.com/komodo-edit).</li>
|
||||
<li>[Netbeans](http://netbeans.org/)</li>
|
||||
</ul>
|
||||
|
||||
Почти все они, за исключением Visual Studio, кросс-платформенные.
|
||||
All of them with the exception of Visual Studio are cross-platform.
|
||||
|
||||
Сортировка в этом списке ничего не означает. Выбор осуществляется по вкусу и по другим технологиям, которые нужно использовать вместе с JavaScript.
|
||||
Most IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose what's most convenient.
|
||||
|
||||
Большинство IDE -- платные, с возможностью скачать и бесплатно использовать некоторое время. Но их стоимость, по сравнению с зарплатой веб-разработчика, невелика, поэтому ориентироваться можно на удобство.
|
||||
## Lightweight editors
|
||||
|
||||
## Лёгкие редакторы
|
||||
Lightweight editors are not as powerful as IDE, but they're fast and simple.
|
||||
|
||||
Лёгкие редакторы -- не такие мощные, как IDE, но они быстрые и простые, мгновенно стартуют.
|
||||
They are mainly used to instantly open and edit a file.
|
||||
|
||||
Основная сфера применения лёгкого редактора -- мгновенно открыть нужный файл, чтобы что-то в нём поправить.
|
||||
The main differenct between a "lightweight editor" and an "IDE" is that the latter works on a project-level, meaning it has to load a lot of data to start, and the former one opens just the files. That's much faster.
|
||||
|
||||
На практике "лёгкие" редакторы могут обладать большим количеством плагинов, так что граница между IDE и "лёгким" редактором размыта, спорить что именно редактор, а что IDE -- не имеет смысла.
|
||||
In practice, "lightweight" editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict frontier between a "lightweight editor" and an IDE. There's no point in argueing what is what.
|
||||
|
||||
Достойны внимания:
|
||||
The following options deserve your attention:
|
||||
|
||||
<ul>
|
||||
<li><a href="http://www.sublimetext.com">Sublime Text</a> (кросс-платформенный, shareware).</li>
|
||||
<li><a href="http://www.scintilla.org/">SciTe</a> простой, легкий и очень быстрый (Windows, бесплатный).</li>
|
||||
<li><a href="http://sourceforge.net/projects/notepad-plus/">Notepad++</a> (Windows, бесплатный).</li>
|
||||
<li>Vim, Emacs. Если умеете их готовить.</li>
|
||||
<li><a href="http://www.sublimetext.com">Sublime Text</a> (cross-platform, shareware).</li>
|
||||
<li><a href="http://www.scintilla.org/">SciTe</a> (Windows, free).</li>
|
||||
<li><a href="http://sourceforge.net/projects/notepad-plus/">Notepad++</a> (Windows, free).</li>
|
||||
<li>Vim, Emacs are cool. If you know how to use them.</li>
|
||||
</ul>
|
||||
|
||||
## Мои редакторы
|
||||
## My editors
|
||||
|
||||
Лично мои любимые редакторы:
|
||||
I believe one should have both an IDE for projects and a lightweight editor for quick-n-fast file editing.
|
||||
|
||||
I'm using:
|
||||
<ul>
|
||||
<li>Как IDE -- редакторы от Jetbrains: для чистого JavaScript [WebStorm](http://www.jetbrains.com/webstorm/), если ещё какой-то язык, то в зависимости от языка: [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/). У них есть и другие редакторы под разные языки, но я ими не пользовался.</li>
|
||||
<li>Как быстрый редактор -- <a href="http://www.sublimetext.com">Sublime Text</a>.</li>
|
||||
<li>Иногда Visual Studio, если разработка идёт под платформу .NET (Win).</li>
|
||||
<li>Jetbrains editors as IDE: [WebStorm](http://www.jetbrains.com/webstorm/) for JS and if I have other language in the project, then [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/). These guys provide editors for other languages too, but I didn't use them.</li>
|
||||
<li>As a lightweight editor -- <a href="http://www.sublimetext.com">Sublime Text</a>.</li>
|
||||
<li>Visual Studio, sometimes very rarely if that's a .NET project (Win).</li>
|
||||
</ul>
|
||||
|
||||
Если не знаете, что выбрать -- можно посмотреть на них ;)
|
||||
If you don't know what to choose -- you can consider those.
|
||||
|
||||
## Не будем ссориться
|
||||
## Let's not argue
|
||||
|
||||
В списках выше перечислены редакторы, которые использую я или мои знакомые -- хорошие разработчики. Конечно, существуют и другие отличные редакторы, если вам что-то нравится -- пользуйтесь.
|
||||
The editors listed above are those that me or my friends -- good developers use for a long time and happy with them.
|
||||
|
||||
Выбор редактора, как и любого инструмента, во многом индивидуален и зависит от ваших проектов, привычек, личных предпочтений.
|
||||
There are of course other great editors, please choose the one you like the most.
|
||||
|
||||
The choice of an editor, like any other tool, is individual and depends on your projects, habbits, personal preferences.
|
||||
|
|
|
|||
|
|
@ -1,114 +1,72 @@
|
|||
# Консоль разработчика
|
||||
# Developer console
|
||||
|
||||
При разработке скриптов всегда возможны ошибки... Впрочем, что я говорю? У вас абсолютно точно будут ошибки, если конечно вы -- человек, а не <a href="http://ru.wikipedia.org/wiki/%D0%91%D0%B5%D0%BD%D0%B4%D0%B5%D1%80_(%D0%A4%D1%83%D1%82%D1%83%D1%80%D0%B0%D0%BC%D0%B0)">робот</a>.
|
||||
As the last step before we start developing, let's learn the basics of developer console.
|
||||
|
||||
Чтобы читать их в удобном виде, а также получать массу полезной информации о выполнении скриптов, в браузерах есть *инструменты разработки*.
|
||||
A code is error-prone. You are quite likely to have errors... Oh what I'm talking? You are *absolutely* going to make errors, if you're a human, not a [robot]("https://en.wikipedia.org/wiki/Bender_(Futurama)").
|
||||
|
||||
**Для разработки рекомендуется использовать Chrome или Firefox.**
|
||||
In browser, visitors don't see the errors by default. So, if something goes wrong, we won't see what's broken and can't fix it.
|
||||
|
||||
Другие браузеры, как правило, находятся в положении "догоняющих" по возможностям встроенных инструментов разработки. Если ошибка, к примеру, именно в Internet Explorer, тогда уже смотрим конкретно в нём, но обычно -- Chrome/Firefox.
|
||||
To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools".
|
||||
|
||||
В инструментах разработчика предусмотрена масса возможностей, но на текущем этапе мы просто посмотрим, как их открывать, смотреть в консоли ошибки и запускать команды JavaScript.
|
||||
**It is recommended to use Chrome or Firefox for the development.**
|
||||
|
||||
Other browsers also provide developer tools, but are usually in a "catching-up" position, compared to Chrome/Firefox which are the best.
|
||||
|
||||
If there is an error in Internet Explorer only, then we can use it's developer tools, but usually -- Chrome/Firefox.
|
||||
|
||||
Developer tools are really powerful, there are many features, but on this stage let's just look how to open them, look at errors and run JavaScript commands.
|
||||
|
||||
[cut]
|
||||
|
||||
## Google Chrome
|
||||
|
||||
Откройте страницу [bug.html](bug.html).
|
||||
Open the page [bug.html](bug.html).
|
||||
|
||||
В её JavaScript-коде есть ошибка. Конечно, обычному посетителю она не видна, нужно открыть инструменты разработчика.
|
||||
There's an error in the JavaScript code on it. An ordinary visitor won't see it, we need t open developer tools for that.
|
||||
|
||||
Для этого используйте сочетание клавиш [key Ctrl+Shift+J], а если у вас Mac, то [key Cmd+Shift+J].
|
||||
Press the keys [key Ctrl+Shift+J] or, if you're on Mac, then [key Cmd+Shift+J].
|
||||
|
||||
При этом откроются инструменты разработчика и вкладка Console, в которой будет ошибка.
|
||||
The developer tools will open on the Console tab by default.
|
||||
|
||||
Выглядеть будет примерно так:
|
||||
It looks somewhat like this:
|
||||
|
||||
<img src="chrome.png">
|
||||
|
||||
The exact look depends on your Chrome version. It changes from time to time, but should be similar.
|
||||
|
||||
<ul>
|
||||
<li>При клике на `bug.html` вы перейдёте во вкладку с кодом к месту ошибки, там будет и краткое описание ошибки.
|
||||
В данном случае ошибка вызвана строкой `lalala`, которая интерпретатору непонятна. </li>
|
||||
<li>В этом же окошке вы можете набирать команды на JavaScript. Например, наберите `alert("Hello")` -- команду вывода сообщения и запустите её нажатием [key Enter]. Мы познакомимся с этой и другими командами далее.</li>
|
||||
<li>Для перевода курсора на следующую строку (если команда состоит из нескольких строк) -- используется сочетание [key Shift+Enter].</li>
|
||||
<li>Here we can see the red-colored error message. In this case the script contains a "lalala" command, which was put there just because it is unknown.</li>
|
||||
<li>On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occured.</li>
|
||||
</ul>
|
||||
|
||||
Далее в учебнике мы подробнее рассмотрим отладку в Chrome в главе [](/debugging-chrome).
|
||||
In that very Console tab next to the blue `>` symbol, we can also type JavaScript commands and press enter to run them ([key Shift+Enter] to input multiline commands).
|
||||
|
||||
## Firefox
|
||||
Now we can see errors and that's enough for the start. We'll be back to developer tools later and cover debugging more in-depth in the chapter [](/debugging-chrome).
|
||||
|
||||
Для разработки в Firefox используется расширение Firebug.
|
||||
## Safari
|
||||
|
||||
<ol>
|
||||
<li>Первым делом его надо установить.
|
||||
For Safari, we need to enable the "Develop menu" first.
|
||||
|
||||
Это можно сделать со страницы <a href="https://addons.mozilla.org/ru/firefox/addon/firebug/">https://addons.mozilla.org/ru/firefox/addon/firebug/</a>.
|
||||
|
||||
Перезапустите браузер. Firebug появится в правом-нижнем углу окна:
|
||||
|
||||
<img src="firebug-gray.png">
|
||||
|
||||
Если иконки не видно -- возможно, у вас выключена панель расширений. Нажмите [key Ctrl+\] для её отображения.
|
||||
|
||||
Ну а если её нет и там, то нажмите [key F12] -- это горячая клавиша для запуска Firebug, расширение появится, если установлено.
|
||||
</li>
|
||||
<li>Далее, для того чтобы консоль заработала, её надо включить.
|
||||
|
||||
Если консоль уже была включена ранее, то этот шаг не нужен, но если она серая -- выберите в меню `Консоль` и включите её:
|
||||
|
||||
<img src="firefox_console_enable.png">
|
||||
|
||||
</li>
|
||||
<li>Для того, чтобы Firebug работал без глюков, желательно сначала открыть Firebug, а уже потом -- зайти на страницу.
|
||||
|
||||
С открытым Firebug зайдите на страницу с ошибкой: [bug.html](/devtools/bug.html).
|
||||
|
||||
Консоль покажет ошибку:
|
||||
|
||||
<img src="firefox.png">
|
||||
|
||||
Кликните на строчке с ошибкой и браузер покажет исходный код. При необходимости включайте дополнительные панели.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
Как и в Chrome, можно набирать и запускать команды. Область для команд на рисунке находится справа, запуск команд осуществляется нажатием [key Ctrl+Enter] (для Mac -- [key Cmd+Enter]).
|
||||
|
||||
Можно перенести её вниз, нажав на кнопочку <img src="firefox_console_down.png"> (на рисунке её не видно, но она присутствует в правом нижнем углу панели разработки).
|
||||
|
||||
Об основных возможностях можно прочитать на сайте <a href="http://firebug.ru">firebug.ru</a>.
|
||||
|
||||
## Internet Explorer
|
||||
|
||||
Панель разработчика запускается нажатием [key F12].
|
||||
|
||||
Откройте её и зайдите на страницу с ошибкой: [bug.html](/devtools/bug.html). Если вы разобрались с Chrome/Firefox, то дальнейшее будет вам более-менее понятно, так как инструменты IE построены позже и по аналогии с Chrome/Firefox.
|
||||
|
||||
## Safari
|
||||
|
||||
Горячие клавиши: [key Ctrl+Shift+I], [key Ctrl+Alt+C] для Mac -- [key Cmd] вместо [key Ctrl].
|
||||
|
||||
Для доступа к функционалу разработки через меню:
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
В Safari первым делом нужно активировать меню разработки.
|
||||
|
||||
Откройте меню, нажав на колесико справа-сверху и выберите `Настройки`.
|
||||
|
||||
Затем вкладка `Дополнительно`:
|
||||
It is done on the "Advanced" pane of the preferences:
|
||||
|
||||
<img src="safari.png">
|
||||
|
||||
Отметьте `Показывать меню "Разработка" в строке меню`. Закройте настройки.
|
||||
Now [key Cmd+Alt+C] can toggle on the console. Also the new top menu item has appeared with many useful options.
|
||||
|
||||
## Other browsers
|
||||
|
||||
Most other browsers use [key F12] to open developer tools.
|
||||
|
||||
The look & feel of them is quite similar, once we know how to use one of them (can start with Chrome), can easily switch to another.
|
||||
|
||||
## Summary
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Developer tools allow us to see errors (crucial now), run commands, examine variables and much more.</li>
|
||||
<li>
|
||||
They can be opened with [key F12] for most browsers, with the exception of Chrome ([key Ctrl+Shift+J] / [key Cmd+Shift+J]) and Safari (need to enable, then [key Cmd+Alt+C]).
|
||||
</li>
|
||||
<li>Нажмите на колесико и выберите `Показать строку меню`.
|
||||
</ul>
|
||||
|
||||
Инструменты будут доступны в появившейся строке меню, в пункте `Разработка`.</li>
|
||||
</ol>
|
||||
|
||||
## Итого
|
||||
|
||||
Мы разобрали, как открывать инструменты разработчика и смотреть ошибки, а также запускать простые команды, не отходя от браузера.
|
||||
|
||||
Далее мы приступим к изучению JavaScript.
|
||||
Now we have the environment ready. In the next section we get down to JavaScript.
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
На этой странице есть скрипт с ошибкой.
|
||||
There is an error in the script on this page.
|
||||
<script>
|
||||
lalala
|
||||
</script>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 242 B |
Binary file not shown.
|
Before Width: | Height: | Size: 544 B |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 105 KiB |
BIN
1-js/1-getting-started/4-devtools/safari@2x.png
Normal file
BIN
1-js/1-getting-started/4-devtools/safari@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
|
|
@ -1,13 +1,14 @@
|
|||
# Привет, мир!
|
||||
# Hello, world!
|
||||
|
||||
In this chapter we'll create a simple script and see it working.
|
||||
|
||||
В этой статье мы создадим простой скрипт и посмотрим, как он работает.
|
||||
[cut]
|
||||
## Тег SCRIPT
|
||||
## The "script" tag
|
||||
|
||||
[smart header="А побыстрее?"]
|
||||
В том (и только в том!) случае, если читатель нетерпелив и уже разрабатывал на JavaScript или имеет достаточно опыта в другом языке программировании, он может не читать каждую статью этого раздела, а перепрыгнуть сразу к главе [](/javascript-specials). Там будет кратко самое основное.
|
||||
[smart header="What if I want to move faster?"]
|
||||
In the case if the impatient reader developed with JavaScript already or has a lot of experience in another language, he can skip detailed explanatins and jump to [](/javascript-specials). There he can find a condensed essense of important features.
|
||||
|
||||
Если же у вас есть достаточно времени и желание начать с азов, то читайте дальше :)
|
||||
If you have enough time and want to learn things in details then read on :)
|
||||
[/smart]
|
||||
|
||||
Программы на языке JavaScript можно вставить в любое место HTML при помощи тега `SCRIPT`. Например:
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
# Основы JavaScript
|
||||
# JavaScript Fundamentals
|
||||
|
||||
Основные кирпичики из которых состоят скрипты.
|
||||
Let's learn the main building blocks of the scripts.
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
# Язык JavaScript
|
||||
# The JavaScript language
|
||||
|
||||
Эта часть позволит вам изучить JavaScript с нуля или упорядочить и дополнить существующие знания.
|
||||
Here we learn JavaScript, starting from the scratch and to advanced concepts like OOP.
|
||||
|
||||
We'll be using browser as an environment, but the main attention goes to JavaScript itself.
|
||||
|
||||
Мы будем использовать браузер в качестве окружения, но основное внимание будет уделяться именно самому языку JavaScript.
|
||||
Loading…
Add table
Add a link
Reference in a new issue