JavaScript — HackerX

Webpack и Node.js: Руководство по использованию

Воскан Восканян — Fri, 06 Jul 2018 11:06:19 +0000

Введение: Что такое Webpack

Разрабатывая приложения для платформы Node.js, старайтесь не использовать систем модулей, отличных от той, что предлагается по умолчанию. В идеале нужно продолжать писать модули как обычно, используя require() и module.exports, а затем применять инструмент для преобразования кода в пакет, который будет нормально работать в браузере. К счастью, эта задача имеет множество решений, самым попуярным из которых является Webpack (https://webpack.github.io).

Webpack позволяет создавать модули с использованием соглашений о модулях Node.js, с последующей компиляцией в пакет (единственный JavaScript-файл), содержащий все необходимое для работы в браузере (в том числе абстрактные функции require()). Такой пакет затем можно включить в веб-страницу, как обычно, и выполнить в браузере. Webpack рекурсивно сканирует исходный код, отыскивает ссылки на функцию require(), разрешает их и добавляет нужные модули в пакет.

Установка и знакомство с Webpack

Для быстрой демонстрации волшебства Webpack рассмотрим, как будет выглядит обычный Node.js модуль при использовании этого инструмента. Во-первых, необходимо установить сам Webpack, что можно сделать с помощью следующей простой команды:

npm install webpack -g

Параметр -g указывает npm, что необходимо установить Webpack глобально, чтобы его можно было использовать из консоли, как будет показано ниже.

Далее, создадим новый проект и попробуем написать модуль. Вот так будет выглядеть его реализация для платформы Node.js (файл sayHello.js):

var mustache = require('mustache');
var template = 'Hello {{name}}';
mustache.parse(template);
module.exports.sayHello = function(toWhom) {
  return mustache.render(template, {name: toWhom});
};

Теперь создадим файл main.js, то есть точку входа в код для браузера:

window.addEventListener('load', function(){
  var sayHello = require('./sayHello').sayHello;
  var hello = sayHello('Browser!');
  var body = document.getElementsByTagName("body")[0];
  body.innerHTML = hello;
});

В приведенном выше коде загрузка модуля sayHello выполняется точно так же, как в Node.js, нет никаких дополнительных сложностей при управлении зависимостями и настройке путей, поскольку всю работу выполняет обычная функция require().

Добавим зависимость mustache в проект:

npm install mustache

А теперь волшебное действие. Запустим следующую команду в терминале:

webpack main.js bundle.js

Она скомпилирует модуль main и соберет все необходимые зависимости в один файл bundle.js, готовый к использованию в браузере!

Чтобы быстро проверить работоспособность получившегося пакета, создадим HTML-страницу magic.html со следующим кодом:


  
    Webpack magic

Этого достаточно для выполнения кода в браузере. Попробуйте открыть страницу и взгляните сами. Ура!

Преимущества использования Webpack

Волшебство Webpack этим не ограничивается. Вот (неполный) перечень функцио нальных возможностей, которые упрощают совместное использование кода с браузером:

Webpack автоматически предоставляет версии многих модулей ядра Node.js, совместимые с браузером. Это означает, что в браузере можно использовать такие модули, как http, assert, events, и многие другие!
Если имеется модуль, несовместимый с браузером, его можно исключить из сборки, заменить пустым объектом или другим модулем с альтернативной реализацией, которая совместима с браузером. Это играет решающую роль, и данная возможность будет использоваться в примере ниже;
Webpack может генерировать пакеты для различных модулей;
Webpack позволяет выполнять дополнительную обработку исходных файлов с помощью сторонних загрузчиков и плагинов. Имеются загрузчики и плагины практически для всего, что может понадобиться, от компиляции CoffeeScript, TypeScript и ES2015 до поддержки загрузки AMD, пакетов Bower (http://bower.io) и Component (http://component.github.io), использующих require(), от минификации до компиляции и упаковки других ресурсов, таких как шаблоны и таблицы стилей;
Webpack с легкостью можно вызывать из диспетчеров заданий, таких как Gulp (https://npmjs.com/package/gulp-webpack) и Grunt (https://npmjs.org/package/grunt-webpack);
Webpack позволяет управлять и выполнять предварительную обработку ресурсов проекта, причем не только JavaScript-файлов, но и таблиц стилей, изображений, шрифтов и шаблонов;
кроме того, Webpack можно настроить для разделения дерева зависимостей на несколько частей, которые будут загружаться по требованию, когда они понадобятся браузеру.

Потенциал и гибкость Webpack настолько привлекательны, что многие разработчики начали использовать его даже для управления кода, предназначенного только для выполнения на стороне клиента. Это стало возможным потому, что многие клиентские библиотеки начали по умолчанию поддерживать CommonJS и npm, что открывает новые и очень интересные перспективы. Например, можно установить библиотеку jQuery:

npm install jquery

а затем загрузить ее с помощью простой строки кода:

const $ = require('jquery');

Вы будете удивлены, как много клиентских библиотек уже поддерживают CommonJS и Webpack.

The post Webpack и Node.js: Руководство по использованию appeared first on HackerX.

HTML5 Geolocation API — Использование Google и Яндекс карт

Воскан Восканян — Mon, 31 Jul 2017 06:06:09 +0000

Продолжаем знакомится с HTML5 Geolocation API. В первом уроке мы познакомились с HTML5 Geolocation API и узнали как можно определить местоположение пользователя — узнать широту, долготу и точность определения в метрах.

В этом уроке мы посмотрим на то, как можно определить местоположение пользователя сайта или мобильных приложении и показать на картах Google и Yandex. Мы будем использовать Yandex API Карт и Google Maps API. Так же посмотрим примеры построение маршрутов на картах Google и Yandex.

Для начало давайте создадим три файла — index.html, style.css и scripts.js.

У меня в HTML файле пока вот такой код:



  
    
    HTML5 Geolocation API

Создали структуру HTML документа и подключили CSS и JavaScript файлы. Так же у меня в HTML коде есть элемент DIV с id map. Тут будет вывод карты Google или Yandex.

В CSS файле у меня такие стили для блока DIV:

#map{
   width: 600px;
   height: 400px;
   border: 1px solid #999;
}

А в JavaScript файле (script.js) практически весь код я взял из первого урока, кроме первой строки кода и вывода результата.

var block = document.getElementById('map');

function success(position) {
  var latitude = position.coords.latitude; // широта
  var longitude = position.coords.longitude; // долгота
  var accuracy = position.coords.accuracy; // точность
}

function error(errorCode) {
  var msg = "";
  switch (errorCode) {
    case 1: msg = "Нет разрешения";
      break;
    case 2: msg = "Техническая ошибка";
      break;
    case 3: msg = "Превышено время ожидания";
      break;
    default: msg = "Что то случилось не так";
  }

  block.innerHTML = msg;
}

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(success, error);
}

В предыдущем уроке полученные данные мы выводили в алерте, а тут нам не нужно сделать вывод, по этому я убрал вывод, также мы в HTML коде создали div с id map, этот див я взял в переменную block, в дальнейшем тут мы будем выводить карту. А теперь давайте начнем работу с картами Google и Yandex.

Пример работы с Google Maps API и HTML5 Geolocation API

Давайте начнем с Google Maps API. Сначала нам нужно подключить JavaScript файл Google Maps API в нашем HTML документе перед подключением нашего скрипта.

После этого нам нужно добавить опции для карты Google в нашем JavaScript файле.

var options = {
   zoom: 13,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

zoom — сколько нужно увеличить масштаб карты
mapTypeId — тип используемой карты Google (У Google есть 4 типа карт — ROADMAP, SATELLITE, HYBRID, TERRAIN)

Уже практически у нас все готово, осталось запустить карту, передать тот блок, где нужно вывести карту, опции и местоположение пользователя.

В нашем JavaScript файле, после создание опции, добавляем следующий код:

var map = new google.maps.Map(block, options);

В этом коде мы запустили карту и передали переменную block (место где нужно вывести карту) и опции. Осталось передать местоположение — широта и долгота.

У нас есть функция под названием success где мы получаем широту, долготу и точность. Давайте в эту функцию добавим еще несколько строк кода.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);
}

В LatLng мы передаем широту и долготу и в переменную loc получаем специальный гугловский объект, которая нужно передать методу setCenter() объекта map. Он и занимается выводом карты.

Если мы сейчас посмотрим на результат, то увидим карту без маркера / галочки.

Для добавление маркера давайте в нашу функцию добавим еще несколько строк кода.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);

   var infowindow = new google.maps.InfoWindow();
   infowindow.setContent("Вы здесь!");
   infowindow.setPosition(loc);
   infowindow.open(map);
}

Здесь мы создаем новую информационную панель, потом передаем тот текст, который нужно отображать в инфо. панели, в методе setPosition() передаем координаты и на карте отображается маркер.

Ниже представлен весь код файлов index.html и scripts.js.

index.html:



  
     
     HTML5 Geolocation API

scripts.js:

var block = document.getElementById('map');

var options = {
   zoom: 13,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(block, options);

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);

   var infowindow = new google.maps.InfoWindow();
   infowindow.setContent("Вы здесь!");
   infowindow.setPosition(loc);
   infowindow.open(map);
}

function error(errorCode) {
   var msg = "";
   switch (errorCode) {
     case 1: msg = "Нет разрешения";
       break;
     case 2: msg = "Техническая ошибка";
       break;
     case 3: msg = "Превышено время ожидания";
       break;
     default: msg = "Что то случилось не так";
   }

    block.innerHTML = msg;
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error);
}

А теперь давайте посмотрим например использование Yandex API карт.

Пример работы с Yandex Maps API и HTML5 Geolocation API

Тут примерно тоже самое. Нам нужно подключить скрипт API Яндекс карт вместо Google.

После подключение скрипта Yandex API у нас в коде будет доступно глобальный объект ymaps. Объект ymaps имеет ready() метод, в которую нужно передать функцию, которая проверяет поддерживает ли браузер пользователя Geolocation API. Если поддерживает, то вызываем функцию getLocation().

В функции getLocation() определяем местоположение пользователя, передаем координаты (широта, долгота) в ymaps.Map() и он возвращает карту. В ymaps.Map() можно передать другие опции — например zoom (масштаб карты).

После этого мы можем добавить различны кнопки на карту. Это делается с помощью метода add().

zoomControl — кнопки увеличения и уменьшение карты
typeSelector — элемент управления «Типы карты»
mapTools — тулбар со стандартными кнопками

После этого мы выживаем ymaps.Placemark(), он принимает координаты местоположения пользователя и опции. Он занимается выводом маркера и эти опции нужны для этого. С помощью опции можно изменить тип маркера, цвет и так далее.

После этого в карту добавляем новый объект — маркер. Ниже представлен результат и код.

Код из файла index.html:



  
     
     HTML5 Geolocation API

Код из файла scripts.js:

ymaps.ready(init);

function init() {
   if(navigator.geolocation) {
     getLocation();
   }else{
     document.getElementById("map").innerHTML = "Geolocation API не поддерживается в вашем браузере";
   }
}

function getLocation() {
   navigator.geolocation.getCurrentPosition(function (position) {
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;
     var map = new ymaps.Map("map", {
       center: [latitude, longitude],
       zoom: 13
     });

     map.controls
       .add('zoomControl')
       .add('typeSelector')
       .add('mapTools');

     var place = new ymaps.Placemark(
       [latitude, longitude],
       {iconContent: "Вы здесь!"},
       {preset: "twirl#redStretchyIcon"}
     );

     map.geoObjects.add(place);
   });
}

The post HTML5 Geolocation API — Использование Google и Яндекс карт appeared first on HackerX.

HTML5 Geolocation API

Воскан Восканян — Mon, 31 Jul 2017 05:50:45 +0000

С помощью HTML5 и JavaScript мы можем определить местоположение пользователя сайта или мобильного приложений, если он написан на языке программирования JavaScript. Это можно сделать с помощью HTML5 Geolocation API (HTML5 Геолокация).

В последних версиях современных браузеров доступен объект geolocation. Объект geolocation является свойством объекта navigator.
Мы можем проверить поддерживает браузер пользователя объект geolocation или нет.

if(navigator.geolocation) {
    alert("Объект Geolocation поддерживается.");
} else {
    alert("Объект Geolocation не поддерживается.");
}

Если у объекта navigator есть свойства geolocation, то при проверке условий он вернет true, в противном случае — false.

У объекта geolocation есть 3 метода:

getCurrentPosition()
watchPosition()
clearWatch()

Но нас интересует метод getCurrentPosition(), и мы его будем использовать в данном уроке. С помощью метода getCurrentPosition() определяется местоположение пользователя.

Нужно учесть, что метод getCurrentPosition() выполняется асинхронно. Это означает, что в нашем коде после вызова метода getCurrentPosition() интерпретатор пойдет выполнить код дальше, не ожидая определение местоположение пользователя. Но нам как то нужно знать когда будет выполнена определение местоположение. И для этого мы можем передать в метод getCurrentPosition() callback функцию (функция обратного вызова).

Функция обратного вызова принимает один аргумент — position. В данном аргументе придет результат выполнения метода getCurrentPosition().

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function (position) {
        alert("OK");
    });
}else{
    alert("Объект Geolocation не поддерживается.");
}

При просмотре примера вверху окна браузера появится сообщение, что сайт хочет получить данные о вашем местоположение. Нужно разрешить сообщить местоположение.

После выполнение метода getCurrentPosition() в объект position придет два свойства — это timestamp и coords. свойства Свойства timestamp — это время определение местоположения пользователя в миллисекундах.

А в свойстве coords содержится в свою очередь свойства:

accuracy — точность (в метрах)
latitude — широта
longitude — долгота

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function (position) {
    var latitude = position.coords.latitude; // широта
    var longitude = position.coords.longitude; // долгота
    var accuracy = position.coords.accuracy; // точность

    var result = "широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
    alert(result);
  });
}else{
  alert("Объект Geolocation не поддерживается.");
}

После выполнение данного кода мы увидим окно с координатами и точность определение местоположения в метрах.

Давайте немного улучшаем наш код.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность
   var result = "широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
   alert(result);
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success);
}

Мы вынесли переменные и вывод результата в отдельную функцию (success), которая принимает один параметр / аргумент — position, и данную функцию (ссылка на функцию) мы отдаем в метод getCurrentPosition(). Но это еще не все, мы не обработали ошибки.

В втором параметре метода getCurrentPosition() будет приходить код ошибки, если будет ошибка. Давайте создадим еще одну функцию, которая будет принимать один параметр — код ошибки и выводит пользователю сообщение об ошибке.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var result = " широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
   alert(result);
}

// Обработка ошибок
function error(errorCode) {
   var msg = "";
   switch (errorCode) {
     case 1: msg = "Нет разрешения"; // Пользователь не дал разрешения на определение местоположения
       break;
     case 2: msg = "Техническая ошибка";
       break;
     case 3: msg = "Превышено время ожидания";
       break;
     default: msg = "Что то случилось не так";
  }

   alert(msg);
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error);
}

Если есть коды ошибок и значение по умолчанию, то мы можем сконфигурировать эти значение. Для этого мы можем передать третий аргумент в метод getCurrentPosition() — это некие настроечные параметры в виде объекта.

Параметры и значение по умолчанию:

enableHighAccuracy — по умолчанию false
timeout — по умолчанию 0 (ноль)
maximumAge — по умолчанию 0 (ноль)

enableHighAccuracy — Высокоточное определение местоположение пользователя (Обычно используется GPS, если есть). В основном это касается мобильных устройств.

timeout — Время запроса и ожидание на ответа. По умолчанию ноль, то есть он будет до бесконечности запрашивать, пока не получит ответ. Значение нужно передать в миллисекундах.

maximumAge — кэширование данных о местоположение пользвателя. Значение нужно передать в миллисекундах.

Любой из этих параметров мы можем передать в третий аргумента метода getCurrentPosition() как объект.

// тут наши функции ...

var params = {
   timeout: 10000,
   maximumAge: 60000
};

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error, params);
}

В втором уроке мы посмотрим как можно использовать Google Map API и Yandex Map API. Посмотрим как можно вывести местоположение пользователя на карту и как можно нарисовать маршруты.

The post HTML5 Geolocation API appeared first on HackerX.

Ключевые и зарезервированные слова языка JavaScript

Воскан Восканян — Thu, 20 Jul 2017 14:04:52 +0000

JavaScript (Стандарт ЕСМА-262) определяет набор ключевых слов (keywords), служащих для решения специализированных задач, таких как указание начала или конца управляющей инструкции или выполнение специфической операции. Ключевые слова нельзя использовать как идентификаторы и имена свойств. Вот их полный список (ключевое слово со звездочкой было добавлено в пятой редакции).

break
case
catch
continue
debugger*
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

Кроме того, JavaScript (ЕСМА-262) содержит набор зарезервированных слов (reserved words), которые также нельзя использовать как идентификаторы и имена свойств. Хотя эти слова не имеют специфического применения в языке, они зарезервированы на будущее как потенциальные ключевые слова. Вот полный список зарезервированных слов JavaScript (третьей редакции ЕСМА-262):

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

В пятой редакции список зарезервированных слов в строгом режиме сокращается до следующего:

class
const
enum
export
extends
import
super

В строгом режиме в пятой редакции в этот список добавляются следующие слова:

implements
interface
let
package
private
protected
public
static
yield

Обратите внимание, что слова let и yield были зарезервированы в пятой редакции, а все остальные — в третьей. Ради совместимости рекомендуется брать за ориентир список из третьей редакции, добавляя в него слова let и yield.

Попытка использовать ключевое слово как имя идентификатора в реализациях ECMAScript 3 приводит к ошибке «Identifier Expected» (ожидается идентификатор). Применение зарезервированного слова с этой же целью в одних реализациях допускается, а в других приводит к ошибке.

В пятой редакции немного изменены правила употребления ключевых и зарезервированных слов. Они по-прежнему не могут быть идентификаторами, но теперь их разрешено использовать как имена свойств в объектах. В общем, для обеспечения совместимости с прошлыми и будущими редакциями ECMAScript лучше не использовать ключевые и зарезервированные слова как идентификаторы и имена свойств.

Кроме ключевых и зарезервированных слов в пятой редакции ЕСМА-262 налагаются ограничения на имена eval и arguments. В строгом режиме они не могут быть идентификаторами и именами свойств, иначе возникнет ошибка.

Полный список уроков JavaScript представлен на этом странице.

The post Ключевые и зарезервированные слова языка JavaScript appeared first on HackerX.

Тип Array — массивы в JavaScript

Воскан Восканян — Sat, 15 Jul 2017 15:45:35 +0000

Тип Array (массив) — это один из часто используемых типов в JavaScript. Массивы в JavaScript (ECMAScript — стандарт языка) отличаются отличаются от массивов в большинстве других языков программирования. Массивы в JavaScript — это упорядоченные списки данных. В большинстве языков, массивы содержат однотипные данные, но в JavaScript (ECMAScript) список данных могут быть разных типов. Это означает, что можно создать массив со строкой в первой позиции, числом во второй, объектом в третьей и т.д.

Синтаксис
Создание массивов
Доступ к элементам массива
Свойства массивов
Методы массивов
Экземпляры массива

Синтаксис

[element_0, element_1, ..., element_N]
new Array(element_0, element_1[, ...[, element_N]])
new Array(arrayLength)

Создание (объявление) массивов

Массивы в JavaScript можно создать двумя способами.

Первый способ — использовать конструктор Array.
Второй способ — использовать нотацию литерала массива (array literal)

Первый способ: Создание (объявление) массива с помощью конструктора Array:

var colors = new Array();

Если известно количество элементов массива, можно передать его в конструктор, и тогда автоматически будет создано свойство length (длина массива) с этим значением. Например, следующий код создает массив со значением length, равным 25:

var colors = new Array(25);

Если в конструктор Array мы передаем одно значений (числового типа), то это значение будет считаться длинной (length) создаваемого массива, а если передать несколько элементов в конструктор, то будет создан массив с этими элементами. Например, здесь создается массив с тремя строками:

var arr0 = new Array("red", "green", "blue");
var arr1 = new Array(З); // массив с тремя элементами
var arr2 = new Array("green"); // массив с одним элементом, строкой "green"

Конструктор Array можно вызвать без оператора new без изменение результата.

var arr1 = Array(З); // массив с тремя элементами
var arr2 = Array("green"); // массив с одним элементом, строкой "green"

Второй способ создание массива: Массивы можно создать используя нотацию литерала массива (array literal), который представляет собой список разделенных запятыми элементов в квадратных скобках, например:

var colors = ["red ", "green"]; // массив с тремя строками
var names = [ ]; // пустой массив

// НЕ ДЕЛАЙТЕ ТАК! Создается массив с двумя или тремя элементами
var values = [1, 2, ];
// НЕ ДЕЛАЙТЕ ТАК! Создается массив с пятью или шестью элементами
var options = [ , , , , , ];

В первой строке кода создается массив с двумя элементами строчного типа.
В второй строке кода с помощью пустых квадратных скобок создается пустой массив.
Следующая инструкция демонстрирует проблему, которая возникает, если ввести лишнюю запятую вслед за последним значением в литерале массива. В этом случае в браузере Internet Explorer 8 и более ранних версий будет создан массив с тремя элементами со значениями 1, 2 и undefined а в остальных браузерах будет создан массив с двумя элементами — 1 и 2.
В последней строке кода в браузерах Internet Explorer 9+, Firefox, Opera, Safari и Chrome будет создан массив с пятью элементами, а в Internet Explorer 8 и более ранних версий — с шестью.

Если между запятыми отсутствуют значение, то каждый элемент получить значение undefined. Это тоже самое, что и вызвать конструктор Array и передать в него один параметр числового типа (будет создан массив, длина которого будет равна передаваемые число, а все значение будут undefined).

Доступ к элементам массива

Для получения и задания значений массива используется индекс с отсчетом от нуля в квадратных скобках:

var colors = ["red ", "green", "blue"]; // определение массива
alert( colors[0] ); // вывод первого элемента
colors[2] = "yellow"; // изменение третьего элемента
colors[З] = "black"; // добавление четвертого элемента

В квадратных скобках указывается индекс элемента, к которому нужно обратиться. Например, colors[0] нам вернет первый элемент массива. Точно так же мы можем задать или изменить значение. Например, colors[3] = «black» — так как у нас массив состоит из трех элементов, а индексы этих элементов- 0, 1 и 2, то у нас в массиве будет создан новый элемент под индексом 3 с значением black. А если хотим изменить значение массива, что указываем индекс элемента, который хотим изменить. Например, colors[2] = «yellow».

Свойства массивов JavaScript

Array.length
Array.prototype

Методы массивов JavaScript

Array.from()
Array.isArray()
Array.observe()
Array.of()

Экземпляры массива

В языке программирование JavaScript (стандарт ECMAScript) все экземпляры наследуются от Array.prototype. Если изменить объект прототипа конструктора, то изменение затронет все экземпляры Array.

Свойства:

Array.prototype.constructor
Array.prototype.length

Методы изменения:

Array.prototype.copyWithin()
Array.prototype.fill()
Array.prototype.pop()
Array.prototype.push()
Array.prototype.reverse()
Array.prototype.shift()
Array.prototype.sort()
Array.prototype.splice()
Array.prototype.unshift()

Методы доступа:

Array.prototype.concat()
Array.prototype.includes()
Array.prototype.join()
Array.prototype.slice()
Array.prototype.toSource()
Array.prototype.toString()
Array.prototype.toLocaleString()
Array.prototype.indexOf()
Array.prototype.lastIndexOf()

Методы обхода:

Array.prototype.forEach()
Array.prototype.entries()
Array.prototype.every()
Array.prototype.some()
Array.prototype.filter()
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.keys()
Array.prototype.map()
Array.prototype.reduce()
Array.prototype.reduceRight()
Array.prototype.values()
Array.prototype[@@iterator]()

Свойство length — длина массива

В свойстве length хранится количество элементов массива и он всегда возвращает отрицательное число.

var colors = ["red ", "green", "blue"]; // массив с тремя строками
var names = [ ]; // пустой массив
alert( colors.length ); //3
alert( names.length ); //0

Свойство length доступно не только для чтение, но и для записи. С помощью length можно добавлять или удалять конечные элементы с массива.

var colors = ["red ", "green", "blue"]; // массив с тремя элементами
colors.length = 2; // изменяем длину массива
alert(colors[2]); // undefined

Мы создали массив colors с тремя элементами. После этого мы свойство length присвоили значение 2, то есть изменили длину массива, в этом случае последний элемент (под индексом 2) будет удален. Если присвоить свойству length значение, превышающее количество элементов в массиве, новые элементы получат значения undefined:

var colors = ["red ", "green", "blue"]; // массив с тремя элементами
colors.length = 4; // изменяем длину массива
alert(colors[3]); // undefined

В этом случае массив содержит 3 элемента, но мы свойству length присвоили значение 4. После присвоение длина массива будет 4, но так как последний, не имеет значение, его значением будет undefined.

Также с помощью свойства length мы можем добавить элемент в конец массива:

var colors = ["red ", "green", "blue"]; // массив с тремя элементами
colors[colors.length] = "yellow"; // добавление нового элемента под индексом 3
colors[colors.length] = "black"; // добавление нового элемента под индексом 4

Последний элемент массива всегда находится в позиции length — 1, так что индекс следующей ячейки равен length. Каждый раз при добавлении элемента за последним элементом массива свойство length автоматически обновляется. Это означает, что инструкция colors[colors.length] задает значение в позиции 3 во второй строке примера и в позиции 4 в последней строке. При добавлении элемента в позиции за пределами массива автоматически вычисляется его новая длина, для чего к позиции прибавляется 1, например:

var colors = ["red ", "green", "blue"]; // массив с тремя элементами
colors[99] = "yellow";
alert(colors.length); // 100

В этом коде мы добавляем строковое значение в позиции 99, при этом длина становится равна 100 (99 + 1). Элементы с индексами от 3 до 98 не существуют, и при доступе к ним возвращается значение undefined.

Если у нас есть массив, длина которого мы не знаем и хотим получить последний элемент массива, то можно опять использовать свойство length.

var colors = ["red ", "green", "blue"]; // массив с тремя элементами
alert(colors.length - 1); // получение последнего элемента массива

Полный список уроков JavaScript можете найти на этом странице.

The post Тип Array — массивы в JavaScript appeared first on HackerX.

Что такое JavaScript — Основы языка программирования JS

Воскан Восканян — Wed, 12 Jul 2017 14:48:00 +0000

JavaScript — это мультипарадигменный язык программирования, который поддерживает объектно-ориентированный, императивный и функциональный стили программирования. Является реализацией языка ECMAScript (стандарт ECMA-262).

Когда в 1 995 году появился JavaScript, его основным назначением была проверка вводимых пользователем данных, что прежде выполняли такие серверные языки, как Perl. Раньше, чтобы определить, не пропущено ли обязательное поле и допустимы ли введенные в форму значения, требовалось обращение к серверу. В Netscape Navigator с помощью JavaScript была предпринята попытка изменить ситуацию. Во времена коммутируемого доступа к Интернету возможность выполнять простую проверку на стороне клиента была воспринята с неподдельным энтузиазмом. Из-за низкой скорости подключения каждое обращение к серверу становилось настоящим испытанием терпения пользователей.

За прошедшее время JavaScript стал важным компонентом каждого популярного веб-браузера. Задачи JavaScript больше не ограничиваются простой проверкой данных: теперь он отвечает за взаимодействие почти всех составляющих окна браузера и его контента. JavaScript стал полноценным языком программирования, поддерживающим сложные вычисления и конструкции, включая замыкания, анонимные (лямбда) функции и даже метапрограммирование. JavaScript превратился в такую важную часть Сети, что его поддерживают даже альтернативные браузеры, в том числе браузеры для мобильных устройств и пользователей с ограниченными возможностями. Даже Microsoft использует собственную реализацию JavaScript в браузере Internet Explorer (с самых ранних версий), несмотря на наличие собственного клиентского языка сценариев VBScript.

Предугадать пpeвpaщeниe JavaScript из простого инструмента для проверки вводимых данных в мощный язык программирования было невозможно. Он одновременно и прост, и сложен. Изучить его синтаксис можно за считанные минуты, но чтобы научиться применять его мастерски, требуются многие годы. Чтобы раскрыть полный потенциал JavaScript, важно понимать его природу, историю и ограничения.

Полный список уроков JavaScript можете найти на этом странице.

The post Что такое JavaScript — Основы языка программирования JS appeared first on HackerX.

Что такое ECMAScript — Новые возможности ES6

Воскан Восканян — Fri, 24 Mar 2017 10:24:09 +0000

ECMAScript — это язык сценариев, который стандартизирован организацией Ecma International в спецификациях ECMA-262 и ISO/IEC 16262.

ECMAScript 6 — это шестая версия и седьмая редакция ECMAScript. Короткое название нового стандарта — ES6.

Особенности ES6 не новые в мире программирование, они унаследованы от других популярных абстрагированных языков, таких как CoffeeScript.

Новые возможности ECMAScript 6

Переменные в ES6
- Ключевое слово let — Объявление переменных с область видимости в пределах функции и блока.
- Повторное объявление переменных.
- Ключевое слово const — область видимости констант и ссылки на объекты.
Оператор расширения
- Расширение нескольких массивов.
Деструктивное присваивание массивов и объектов.
Стрелочные функции.
Расширенные литералы объектов
- Определение свойств и методов.
- Вычисляемые имена свойств.
Работа с числами в ES6.
Работа с строками в ES6.
Новый функционал для работы с массивами.
Коллекции ES6.
Использование итераторов.
Асинхронное программирование.
Reflect API.
Прокси-объекты.
Классы в ES6.
Модули и модульный подход.

The post Что такое ECMAScript — Новые возможности ES6 appeared first on HackerX.

Что такое Node.js

Воскан Восканян — Thu, 15 Oct 2015 12:48:41 +0000

Node.js — это серверная технология, использующая язык программирования JavaScript (ECMAScript), основанная на движке V8 от компании Google. Платформа Node.js была создана в 2009 году Райаном Далом.

Многие серверные платформы / технологии поддерживает программные потоки или отдельные процессы. Но Node.js работает не так — он поддерживает неблокирующий асинхронный ввод-вывод, который управляется событиями.

Если у вас обычный веб-сервер, например Apache, то при каждом запросе веб-сервер создает отдельный поток или вызывает новый процесс для обслуживание запроса. При таком подходе задействуются множество ресурсов, несмотря на то, что Apache реагирует на запросы достаточно быстро.

Node.js не создает для каждого запроса новый поток или новый процесс, он прослушивает конкретные события и когда события происходит, он реагирует на них соответствующим образом. Node.js не блокирует запросы.

Node.js приложения создаются с помощью языка JavaScript. Но тут нет функции и объекты для работы с DOM и BOM, только ECMAScript. Кстати недавно Node.js IO.js объединились и сейчас Node.js поддерживает последнюю версию ECMAScript-а — ECMASCript 6.

Мы в уроках будем использовать в основном новую версию ECMAScript-а (ES6), а версия Node.js — v5.3.0 (последняя версия на момент написание статьи).

В следующем уроке мы установим Node.js и сделаем первые шаги в мир Node.

Простой веб-сервер на Node.js:

const http = require("http");
const app = http.createServer(function(request, response){
    response.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
    response.write("Привет всем");
    response․end();
});
app.listen("8080");

The post Что такое Node.js appeared first on HackerX.