diff --git a/1-js/1-getting-started/1-intro/article.md b/1-js/1-getting-started/1-intro/article.md index ab899908..8d6396cd 100644 --- a/1-js/1-getting-started/1-intro/article.md +++ b/1-js/1-getting-started/1-intro/article.md @@ -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.
  • 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.
    • @@ -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. + -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. diff --git a/1-js/1-getting-started/2-es-modern-now/article.md b/1-js/1-getting-started/2-es-modern-now/article.md index 53e713c6..c582b2de 100644 --- a/1-js/1-getting-started/2-es-modern-now/article.md +++ b/1-js/1-getting-started/2-es-modern-now/article.md @@ -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:
      -
    1. The transpiler itself, which rewrites the code.
      2. -
    2. An additional JavaScript library which adds the support for modern JavaScript functions to the browser.
      3. +
    3. 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.
      4. +
    4. 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.
    -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 *!* - - + + */!* ``` -Сверху подключается браузерный скрипт `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: + -[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` в типе скрипта: ` diff --git a/1-js/1-getting-started/4-devtools/chrome.png b/1-js/1-getting-started/4-devtools/chrome.png index b084d584..fd029b74 100644 Binary files a/1-js/1-getting-started/4-devtools/chrome.png and b/1-js/1-getting-started/4-devtools/chrome.png differ diff --git a/1-js/1-getting-started/4-devtools/chrome@2x.png b/1-js/1-getting-started/4-devtools/chrome@2x.png index 35fbb424..b87404a8 100755 Binary files a/1-js/1-getting-started/4-devtools/chrome@2x.png and b/1-js/1-getting-started/4-devtools/chrome@2x.png differ diff --git a/1-js/1-getting-started/4-devtools/firebug-gray.png b/1-js/1-getting-started/4-devtools/firebug-gray.png deleted file mode 100755 index dd234fe0..00000000 Binary files a/1-js/1-getting-started/4-devtools/firebug-gray.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox.png b/1-js/1-getting-started/4-devtools/firefox.png deleted file mode 100644 index 9ce9691c..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox@2x.png b/1-js/1-getting-started/4-devtools/firefox@2x.png deleted file mode 100755 index ff3633b7..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox@2x.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox_console_down.png b/1-js/1-getting-started/4-devtools/firefox_console_down.png deleted file mode 100644 index 54cf92cd..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox_console_down.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox_console_down@2x.png b/1-js/1-getting-started/4-devtools/firefox_console_down@2x.png deleted file mode 100755 index e19b9f3e..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox_console_down@2x.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox_console_enable.png b/1-js/1-getting-started/4-devtools/firefox_console_enable.png deleted file mode 100644 index 848f2b82..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox_console_enable.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/firefox_console_enable@2x.png b/1-js/1-getting-started/4-devtools/firefox_console_enable@2x.png deleted file mode 100755 index 2bf6ea18..00000000 Binary files a/1-js/1-getting-started/4-devtools/firefox_console_enable@2x.png and /dev/null differ diff --git a/1-js/1-getting-started/4-devtools/safari.png b/1-js/1-getting-started/4-devtools/safari.png index 9a9cac5b..37598a26 100755 Binary files a/1-js/1-getting-started/4-devtools/safari.png and b/1-js/1-getting-started/4-devtools/safari.png differ diff --git a/1-js/1-getting-started/4-devtools/safari@2x.png b/1-js/1-getting-started/4-devtools/safari@2x.png new file mode 100644 index 00000000..c59cebef Binary files /dev/null and b/1-js/1-getting-started/4-devtools/safari@2x.png differ diff --git a/1-js/2-first-steps/1-hello-world/article.md b/1-js/2-first-steps/1-hello-world/article.md index 739b103b..6bb73d6f 100644 --- a/1-js/2-first-steps/1-hello-world/article.md +++ b/1-js/2-first-steps/1-hello-world/article.md @@ -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`. Например: diff --git a/1-js/2-first-steps/index.md b/1-js/2-first-steps/index.md index eee61f1c..607de54b 100644 --- a/1-js/2-first-steps/index.md +++ b/1-js/2-first-steps/index.md @@ -1,3 +1,3 @@ -# Основы JavaScript +# JavaScript Fundamentals -Основные кирпичики из которых состоят скрипты. \ No newline at end of file +Let's learn the main building blocks of the scripts. \ No newline at end of file diff --git a/1-js/index.md b/1-js/index.md index f3fadc3a..2973f97f 100644 --- a/1-js/index.md +++ b/1-js/index.md @@ -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. \ No newline at end of file