diff options
Diffstat (limited to 'ru-ru')
| -rw-r--r-- | ru-ru/javascript-ru.html.markdown | 543 |
1 files changed, 543 insertions, 0 deletions
diff --git a/ru-ru/javascript-ru.html.markdown b/ru-ru/javascript-ru.html.markdown new file mode 100644 index 00000000..ad66b501 --- /dev/null +++ b/ru-ru/javascript-ru.html.markdown @@ -0,0 +1,543 @@ +--- +language: javascript +contributors: + - ["Adam Brenecki", "http://adam.brenecki.id.au"] + - ["Ariel Krakowski", "http://www.learneroo.com"] +translators: + - ["Maxim Koretskiy", "http://github.com/maximkoretskiy"] +filename: javascript-ru.js +lang: ru-ru +--- + +Javascript был разработан Бренданом Айком из Netcape в 1995. Изначально +предполагалось, что он станет простым вариантом скриптового языка для сайтов, +дополняющий к Java, который бы в свою очередь использовался для более сложных +web-приложений. Но тонкая интегрированность javascript с web-страницей и +встроенная поддержка в браузерах привели к тому, чтобы он стал более +распространен в frontend-разработке, чем Java. + +Использование JavaScript не ограничивается браузерами. Проект Node.js, +предоставляющий независимую среду выполнения на движке Google Chrome V8 +JavaScript, становится все более популярным. + +Обратная связь важна и нужна! Вы можете написаться мне +на [@adambrenecki](https://twitter.com/adambrenecki) или +[adam@brenecki.id.au](mailto:adam@brenecki.id.au). + +```js +// Комментарии оформляются как в C. +// Однострочнные коментарии начинаются с двух слешей, +/* а многострочные с слеша и звездочки + и заканчиваются звездочеий и слешом */ + +// Выражения разделяются с помощью ; +doStuff(); + +// ... но этого можно и не делать, разделители подставляются автоматически +// после перехода на новую строку за исключением особых случаев +doStuff() + +// Это может приводить к непредсказуемому результату и поэтому мы будем +// использовать разделители в этом туре. +// Because those cases can cause unexpected results, we'll keep on using +// semicolons in this guide. + +/////////////////////////////////// +// 1. Числа, Строки и Операторы +// 1. Numbers, Strings and Operators + +// В Javasript всего 1 числовой тип - 64-битное число с плавающей точкой +// стандарта IEEE 754) +// Числа имеют 52-битную мантиссу, чего достаточно для хранения хранения целых +// чисел до 9✕10¹⁵ приблизительно. +3; // = 3 +1.5; // = 1.5 + +// В основном базовая арифметика работает предсказуемо +1 + 1; // = 2 +.1 + .2; // = 0.30000000000000004 +8 - 1; // = 7 +10 * 2; // = 20 +35 / 5; // = 7 + +// Включая нецелочисленное деление +5 / 2; // = 2.5 + +// Двоичные операции тоже есть. Если применить двоичную операцию к float-числу, +// оно будет приведено к 32-битному целому со знаком. +1 << 2; // = 4 + +// (todo:перевести) +// Приоритет выполнения операций можно менять с помощью скобок. +(1 + 3) * 2; // = 8 + +// Есть три особых не реальных числовых значения: +Infinity; // допустим, результат операции 1/0 +-Infinity; // допустим, результат операции -1/0 +NaN; // допустим, результат операции 0/0 + +// Так же есть тип булевых данных. +true; +false; + +// Строки создаются с помощью ' или ". +'abc'; +"Hello, world"; + +// Оператор ! означает отрицание +!true; // = false +!false; // = true + +// Равество это === +1 === 1; // = true +2 === 1; // = false + +// Неравенство это !== +1 !== 1; // = false +2 !== 1; // = true + +// Еще сравнения +1 < 10; // = true +1 > 10; // = false +2 <= 2; // = true +2 >= 2; // = true + +// Строки складываются с помощью + +"Hello " + "world!"; // = "Hello world!" + +// и сравниваются с помощью < и > +"a" < "b"; // = true + +// Приведение типов выполняется при сравнении с ==... +"5" == 5; // = true +null == undefined; // = true + +// ...в отличие от === +"5" === 5; // = false +null === undefined; // = false + +// Для доступа к конкретному символу строки используйте charAt +"This is a string".charAt(0); // = 'T' + +// ... или используйте substring для получения подстроки +"Hello world".substring(0, 5); // = "Hello" + +// length(длина) - свойство, не используйте () +"Hello".length; // = 5 + +// Есть null и undefined +null; // используется что бы указать явно, что значения нет +undefined; // испрользуется чтобы показать, что значения не было установлено + // собственно, undefined так и переводится + +// false, null, undefined, NaN, 0 и "" являются falsy-значениями(при приведении +// в булеву типу становятся false) +// Обратите внимание что 0 приводится к false, а "0" к true, +// не смотря на то, что "0"==0 + +/////////////////////////////////// +// 2. Переменные, массивы и объекты + +// Переменные объявляются ключевым словом var. Javascript динамически +// типизируемый, так что указывать тип не нужно. +// Присвоение значения описывается с помощью оператора = +var someVar = 5; + +// если не указать ключевого слова var, ошибки не будет... +someOtherVar = 10; + +// ...но переменная будет создана в глобальном контексте, в не области +// видимости, в которой она была объявлена. + +// Переменные объявленные без присвоения значения, содержать undefined +var someThirdVar; // = undefined + +// Для математических операций над переменными есть короткая запись: +someVar += 5; // тоже что someVar = someVar + 5; someVar равно 10 теперь +someVar *= 10; // а теперь -- 100 + +// еще более короткая запись для добавления и вычитания 1 +someVar++; // теперь someVar равно 101 +someVar--; // обратно к 100 + +// Массивы -- упорядоченные списки значений любых типов. +var myArray = ["Hello", 45, true]; + +// Для доступу к элементам массивов используйте квадратные скобки. +// Индексы массивов начинаются с 0 +myArray[1]; // = 45 + +// Массивы мутабельны(изменяемы) и имеют переменную длину. +myArray.push("World"); // добавить элемент +myArray.length; // = 4 + +// Добавить или изменить значение по конкретному индексу +myArray[3] = "Hello"; + +// Объекты javascript похожи на dictionary или map из других языков +// программирования. Это неупорядочнные коллекции пар ключ-значение. +var myObj = {key1: "Hello", key2: "World"}; + +// Ключи -- это строки, но кавычки не требуются если названия явлюятся +// корректными javascript идентификаторами. Значения могут быть любого типа. +var myObj = {myKey: "myValue", "my other key": 4}; + +// Доступ к атрибту объекта можно получить с помощью квадратных скобок +myObj["my other key"]; // = 4 + +// ... или используя точечную нотацию, при условии что ключ является +// корректным идентификатором. +myObj.myKey; // = "myValue" + +// Объекты мутабельны. В существуюещем объекте можно изменить значние +// или добавить новый атрибут. +myObj.myThirdKey = true; + +// При попытке доступа к атрибуту, который до этого не был создан, будет +// возвращен undefined +myObj.myFourthKey; // = undefined + +/////////////////////////////////// +// 3. Логика и Управляющие структуры + +// Синтаксис управляющих структур очень похож на его реализацию в Java. + +// if работает так как вы ожидаете. +var count = 1; +if (count == 3){ + // выполнится, если значение count равно 3 +} else if (count == 4){ + // выполнится, если значение count равно 4 +} else { + // выполнится, если значение count не будет равно ни 3 ни 4 +} + +// Поведение while тоже вполне предсказуемо +while (true){ + // Бесконечный цикл +} + +// Циклы do-while похожи на while, но они всегда выполняются хотябы 1 раз. +// Do-while loops are like while loops, except they always run at least once. +var input +do { + input = getInput(); +} while (!isValid(input)) + +// Цикл for такой же как в C и Java: +// инициализация; условие продолжения; итерация +for (var i = 0; i < 5; i++){ + // выполнится 5 раз +} + +// && - логическое и, || - логическое или +if (house.size == "big" && house.color == "blue"){ + house.contains = "bear"; +} +if (color == "red" || color == "blue"){ + // если цвет или красный или синий +} + +// && и || удобны для установки значений по умолчанию. +// && and || "short circuit", which is useful for setting default values. +var name = otherName || "default"; + +// выражение switch проверяет равество с помощью === +// используйте 'break' после каждого case, +// иначе помимо правильного case выполнятся и все последующие. +grade = '4'; // оценка +switch (grade) { + case '5': + console.log("Великолепно"); + break; + case '4': + console.log("Неплохо"); + break; + case '3': + console.log("Можно и лучше"); + break; + default: + console.log("Да уж."); + break; +} + + +/////////////////////////////////// +// 4. Функции, Область видимости и Замыкания + +// Функции в JavaScript объявляются с помощью ключевого слова function. +function myFunction(thing){ + return thing.toUpperCase(); // приведение к верхнему регистру +} +myFunction("foo"); // = "FOO" + +// Помните, что значение, которое должно быть возкращено должно начинаться +// на той же строке, где расположено ключевое слово 'return'. В противном случае +// будет возвращено undefined. Такое поведения объясняется автоматической +// вставкой разделителей ';'. Помните этот факт, если используете +// BSD стиль оформления кода. +// Note that the value to be returned must start on the same line as the +// 'return' keyword, otherwise you'll always return 'undefined' due to +// automatic semicolon insertion. Watch out for this when using Allman style. +function myFunction() +{ + return // <- разделитель автоматически будет вставлен здесь + { + thisIsAn: 'object literal' + } +} +myFunction(); // = undefined + +// Функции в JavaScript являются объектами, поэтому их можно назначить в +// переменные с разными названиями и передавать в другие функции, как аргументы, +// на пример, при указании обработчика события. +function myFunction(){ + // этот фрагмент кода будет вызван через 5 секунд +} +setTimeout(myFunction, 5000); +// Обратите внимание, что setTimeout не является частью языка, однако он +// доступен в API браузеров и Node.js. + +// Объект функции на самом деле не обязательно объявлять с именем - можно +// создать анонимную функцию прямо в аргументах другой функции. +setTimeout(function(){ + // этот фрагмент кода будет вызван через 5 секунд +}, 5000); + +// В JavaScript есть области видимости. У функций есть собственные области +// видимости, у других блоков их нет. +if (true){ + var i = 5; +} +i; // = 5, а не undefined, как это было бы в языке, создающем + // области видисти для блоков кода + +// Это привело к появлению паттерна общего назначения "immediately-executing +// anonymous functions" (сразу выполняющиеся анонимные функции), который +// позволяет предотвратить запись временных переменных в общую облать видимости. +(function(){ + var temporary = 5; + // Для доступа к глобальной области видимости можно использовать запись в + // некоторый 'глобальный объект', для браузеров это 'window'. Глобальный + // объект может называться по-разному в небраузерных средах, таких Node.js. + window.permanent = 10; +})(); +temporary; // вызывает исключение ReferenceError +permanent; // = 10 + +// Одной из сильных сторон JavaScript являются замыкания. Если функция +// объявлена в внутри другой функции, внутренняя функция имеет доступ ко всем +// переменным внешней функции, даже после того, как внешняя функции завершила +// свое выполнение. +function sayHelloInFiveSeconds(name){ + var prompt = "Привет, " + name + "!"; + // Внутренние функции помещаются в локальную область видимости, как-будто + // они объявлены с ключевым словом 'var'. + function inner(){ + alert(prompt); + } + setTimeout(inner, 5000); + // setTimeout является асинхроннной, и поэтому функция sayHelloInFiveSeconds + // завершит свое выполнение сразу и setTimeout вызовет inner позже. + // Однако, так как inner "закрыта внутри" или "замкнута в" + // sayHelloInFiveSeconds, inner все еще будет иметь доступ к переменной + // prompt, когда будет вызвана. +} +sayHelloInFiveSeconds("Вася"); // откроет модальное окно с сообщением + // "Привет, Вася" по истечении 5 секунд. + + +/////////////////////////////////// +// 5. Немного еще об Объектах. Конструкторы и Прототипы + +// Объекты могут содержать функции +var myObj = { + myFunc: function(){ + return "Hello world!"; + } +}; +myObj.myFunc(); // = "Hello world!" + +// Когда функции прикрепленные к объекту вызываются, они могут получить доступ +// к данным объекта, ипользуя ключевое слово this. +myObj = { + myString: "Hello world!", + myFunc: function(){ + return this.myString; + } +}; +myObj.myFunc(); // = "Hello world!" + +// Содержание this определяется исходя из того, как была вызвана функция, а +// не места её определения. По этой причине наша функция не будет работать вне +// контекста объекта. +var myFunc = myObj.myFunc; +myFunc(); // = undefined + +// И напротив, функция может быть присвоена объекту и получить доступ к нему +// через this, даже если она не была прикреплена к объекту в момент её создания. +var myOtherFunc = function(){ + return this.myString.toUpperCase(); +} +myObj.myOtherFunc = myOtherFunc; +myObj.myOtherFunc(); // = "HELLO WORLD!" + +// Также можно указать контекс выполнения фунции с помощью 'call' или 'apply'. +var anotherFunc = function(s){ + return this.myString + s; +} +anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!" + +// Функция 'apply' очень похожа, но принимает массив со списком аргументов. + +anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!" + +// Это может быть удобно, когда работаешь с фунцией принимающей на вход +// последовательность аргументов и нужно передать их в виде массива. + +Math.min(42, 6, 27); // = 6 +Math.min([42, 6, 27]); // = NaN (uh-oh!) +Math.min.apply(Math, [42, 6, 27]); // = 6 + +// Однако, 'call' и 'apply' не имеют постоянного эффекта. Если вы хотите +// зафиксировать контекст для функции, используйте bind. + +var boundFunc = anotherFunc.bind(myObj); +boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!" + +// bind также можно использовать чтобы частично передать аргументы в +// функцию (каррировать). + +var product = function(a, b){ return a * b; } +var doubler = product.bind(this, 2); +doubler(8); // = 16 + +// Когда функция вызывается с ключевым словом new, создается новый объект. +// Данный объект становится доступным функции через ключевое слово this. +// Функции спроектированные вызываться таким способом называются конструкторами. + +var MyConstructor = function(){ + this.myNumber = 5; +} +myNewObj = new MyConstructor(); // = {myNumber: 5} +myNewObj.myNumber; // = 5 + +// Любой объект в JavaScript имеет 'прототип'. Когда вы пытаетесь получить +// доступ к свойству не объявленному в данном объекте, интерпретатор будет +// искать его в прототипе. + +// Некоторые реализации JS позволяют получить доступ к прототипу с помощью +// "волшебного" свойства __proto__. До момента пока оно не являются стандартным, +// __proto__ полезно лишь для изучения прототипов в JavaScript. Мы разберемся +// со стандартными способами работы с прототипом несколько позже. +var myObj = { + myString: "Hello world!" +}; +var myPrototype = { + meaningOfLife: 42, + myFunc: function(){ + return this.myString.toLowerCase() + } +}; + +myObj.__proto__ = myPrototype; +myObj.meaningOfLife; // = 42 +myObj.myFunc(); // = "hello world!" + +// Естественно, если в свойства нет в прототипе, поиск будет продолжен в +// прототипе прототипа и так далее. +myPrototype.__proto__ = { + myBoolean: true +}; +myObj.myBoolean; // = true + +// Ничего не копируется, каждый объект хранит ссылку на свой прототип. Если +// изменить прототип, все изменения отразятся во всех его потомках. +myPrototype.meaningOfLife = 43; +myObj.meaningOfLife; // = 43 + +// Как было сказано выше, __proto__ не является стандартом, и нет стандартного +// способа изменить прототип у созданного объекта. Однако, есть два способа +// создать объект с заданным прототипом. + +// Первый способ - Object.create, был добавлен в JS относительно недавно, и +// потому не доступен в более ранних реализациях языка. +var myObj = Object.create(myPrototype); +myObj.meaningOfLife; // = 43 + +// Второй вариан доступен везде и связан с конструкторами. Конструкторы имеют +// свойство prototype. Это вовсе не прототип функции конструктора, напротив, +// это прототип, который присваевается новым объектам, созданным с этим +// конструктором с помощью ключевого слова new. +MyConstructor.prototype = { + myNumber: 5, + getMyNumber: function(){ + return this.myNumber; + } +}; +var myNewObj2 = new MyConstructor(); +myNewObj2.getMyNumber(); // = 5 +myNewObj2.myNumber = 6 +myNewObj2.getMyNumber(); // = 6 + +// У встроенных типов таких, как строки и числа, тоже есть конструкторы, +// создающие эквивалентные объекты-обертки. +var myNumber = 12; +var myNumberObj = new Number(12); +myNumber == myNumberObj; // = true + +// Правда, они не совсем эквивалентны. +typeof myNumber; // = 'number' +typeof myNumberObj; // = 'object' +myNumber === myNumberObj; // = false +if (0){ + // Этот фрагмент кода не будет выпонен, так как 0 приводится к false +} +if (Number(0)){ + // Этот фрагмент кода *будет* выпонен, так как Number(0) приводится к true. +} + +// Однако, оберточные объекты и обычные встроенные типы имеют общие прототипы, +// следовательно вы можете расширить функциональность строки, например. +String.prototype.firstCharacter = function(){ + return this.charAt(0); +} +"abc".firstCharacter(); // = "a" + +// Этот факт часто используется для создания полифилов(polyfill) - реализации +// новых возможностей JS в его более старых версиях для того чтобы их можно было +// использовать в устаревших браузерах. + +// Например, мы упомянули, что Object.create не доступен во всех версиях +// JavaScript, но мы можем создать полифилл. +if (Object.create === undefined){ // не переопределяем, если есть + Object.create = function(proto){ + // создаем временный конструктор с заданным прототипом + var Constructor = function(){}; + Constructor.prototype = proto; + // создаём новый объект с правильным прототипом + return new Constructor(); + } +} +``` + +## Что еще почитать + +[Современный учебник JavaScript](http://learn.javascript.ru/) от Ильи Кантора +является довольно качественным и глубоким учебным материалом, освещающим все +особенности современного языка. Помимо учебника на том же домене можно найти +[перевод спецификации ECMAScript 5.1](http://es5.javascript.ru/) и справочник по +возможностям языка. + +[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/ru/) позволяет +довольно быстро изучить основные тонкие места в работе с JS, но фокусируется +только на таких моментах + +[Справочник](https://developer.mozilla.org/ru/docs/JavaScript) от MDN +(Mozilla Development Network) содержит информацию о возможностях языка на +английском. + +Название проекта ["Принципы написания консистентного, идиоматического кода на +JavaScript"](https://github.com/rwaldron/idiomatic.js/tree/master/translations/ru_RU) +говорит само за себя. + |