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.

Как установить или изменить значение атрибута с помощью jQuery

Воскан Восканян — Thu, 10 Aug 2017 14:10:00 +0000

Библиотека jQuery предоставляет возможность установить или изменить значение атрибутов двумя способами. Для установки и изменение значение атрибутов используется метод .attr(). Мы уже об этом методе говорили — кроме установки или изменение, с помощью этого метода мы можем получить значение атрибута.

Синтаксис метода .attr() для установки/изменение значение

attr(name, value)
- Устанавливает указанному атрибуту переданное значение для всех элементов в объекте jQuery.
Параметры
- name — (Строка) Имя атрибута, который должен быть установлен.
- value — (Строка | Число | Логический тип | Функция) Указывает значение атрибута, который может быть любое выражение JavaScript. Любое значение, кроме функции, преобразуется в строку. Функция вызывается для каждого элемента в наборе, передает индекс элемента и текущее значение атрибута с данным именем в элементе. Возвращаемое функцией значение становится значением атрибута.
Возвращает
- Коллекцию jQuery.

Пример использование:

$('#my_image').attr('title', "My Image");

Первый вариант использование метода на первый взгляд кажется простым, но это не так! Как уже поняли, вторым параметром (value) метод .attr() принимает значение, которое будет установлено. Значение value может быть любым выражением JavaScript, который в конечном итоге вернет строку.

Станет куда интереснее, когда параметр value будет встроенной функцией или ссылкой на функцию. В таких случаях функция вызывается для каждого извлеченного элемента с возвращаемым значением функции, используемым в качестве значения атрибута. Когда вызывается функция, ей передается два параметра. Один из них содержит отсчитываемый от нуля индекс элемента в наборе, а другой — текущее значение атрибута с именем элемента. Кроме того, элемент устанавливается в качестве контекста функции (this) для ее вызова. Это позволяет функции настроить свою обработку для каждого конкретного элемента — главное преимущество использования ее таким образом.

Пример использование в качестве значение метода .attr() функцию:

$('[title]').attr('title', function(index, previousValue) {
  return previousValue + 'Я элемент ' + index + ' и меня зовут ' + (this.id || 'unset');
});

С помощью этого метода мы находимся на странице все HTML элементы, которые имеют атрибут title, и меняем атрибут каждого элемента. Изменение происходит путем добавления к имеющемуся значению строки, составленной с использованием индекса элемента в DOM и идентификатора атрибута каждого конкретного элемента, если таковой имеется, или в противном случае — строки ‘unset’ (позволяет сбросить все настройки).

Второй вариант применения метода .attr() — это установки / изменение значение нескольких атрибутов за раз.

Синтаксис метода, который может изменить значений нескольких атрибутов сразу

attr(attributes)
- Использует свойства и значения, указанные передаваемым объектом, для установки соответствующих атрибутов на всех элементах соответствующего набора.
Параметры
- name — (Строка) Имя атрибута, который должен быть установлен.
- attributes — Объект, свойства которого копируются как атрибуты ко всем элементам в наборе.
Возвращает
- Коллекцию jQuery.

С помощью данного варианта использование метода attr() можно очень быстро изменить или установить значение нескольких атрибутов по всем элементам набора. Метод принимает один параметр и это должен быть объектом. Свойства объекта — это имена тех атрибутов, с которыми хотим работать.

Пример использование:

$('input').attr({
  value: '',
  placeholder: 'Поиск по сайту',
  title: 'Пожалуйста, введите значение'
});

Давайте разберем пример выше. Мы находимся на странице все элементы input и изменяем атрибуты value, placeholder и title всех найденных элементов, если они есть, а если нет, то добавляем.

ПРЕДУПРЕЖДЕНИЕ

Изменение атрибута type элемента input или button, которые созданы через метод document.createElement(), приводит к исключению в браузере Internet Explorer 6 — 8.

The post Как установить или изменить значение атрибута с помощью jQuery appeared first on HackerX.

Как получить значение атрибута с помощью jQuery. Метод .attr()

Воскан Восканян — Thu, 10 Aug 2017 11:12:40 +0000

Библиотека jQuery представляет метод .attr(), который позволяет установить или получить значение атрибута элементов. Как мы видим один и тот же метод позволяет выполнить несколько действий — чтение и запись значение. Это типичное особенность jQuery. Другими словами метод .attr() работает в качестве геттера (метод чтения) и сеттера (метод записи).

Синтаксис метода .attr()

.attr(name)
- Получает значение, присвоенное указанному атрибуту для первого элемента в соответствующем наборе.
Параметры
- name — (Строка) Имя атрибута, значение которого должно быть взято.
Возвращает
- Значение атрибута для первого соответствующего элемента. Значение undefined возвращается, если соответствующий набор пуст или в первом элементе нет данного атрибута.

Примеры использование метода .attr()




  
  
  
  .attr()

Получение значение id элемента:

$('#my_image').attr('id');

Получение значение атрибута alt:

$('#my_image').attr('alt');

Также мы можем получить значение пользовательских атрибутов. Собственные атрибуты можно добавлять, если вы используете HTML5. Кроме всего прочего мы можем получить значение атрибута, которые добавление через JavaScript.

$('#my_image').attr('data-custom');

Имена атрибутов регистронезависимы в HTML. Независимо от того, как атрибут, например, title объявлен в разметке, можно получить атрибуты с помощью любого варианта из заданных: Title, TITLE, TiTlE и любых других комбинаций, они все эквивалентны. Хотя в XHTML для имен атрибутов в разметке должен использоваться нижний регистр, вы можете получить их, применяя любой вариант.

The post Как получить значение атрибута с помощью jQuery. Метод .attr() appeared first on HackerX.

Как удалить атрибут HTML элемента с помощью метода .removeAttr()

Воскан Восканян — Thu, 10 Aug 2017 08:44:59 +0000

Библиотека jQuery имеет метод, который позволяет удалить атрибуты из элементов DOM. С помощью метода .removeAttr() мы можем удалить любой атрибут HTML элементов, например, id, class, title и другие.

Синтаксис метода .removeAttr()

removeAttr(name) — Метод удаляет указанный атрибут или атрибуты из всех соответствующих элементов.

Параметры метода .removeAttr()

name — (Строка) Имя атрибута или разделенный пробелами список имен атрибутов, которые должны быть удалены.

Что возвращает метод .removeAttr()

Коллекция — После выполнения .removeAttr() он возвращает коллекцию jQuery.

Использование метода .removeAttr()

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

Первый пример — у нас в HTML коде есть несколько изображение, которые имеют атрибуты title и alt.




  
  
  
  .removeAttr()


   Первый пример

Цель состоит в том, чтобы удалить атрибуты title и alt из всех изображений на странице. Для выполнения задачи можно написать следующую инструкцию:

$('img').removeAttr('title alt');

Метод removeAttr() использует функцию JavaScript removeAttribute(). Но у него есть преимущество: он вызывается напрямую на каждом элементе в объекте jQuery и позволяет применить цепочку.

У нас может быть задача удалить атрибут HTML элемента по классу. То ест, удалить какой-то атрибут элементов, которые имеют одинаковые классы:

$(".super_class").removeAttr("title");

Также можем удалить атрибуты всех элементов div, которые имеют одинаковые классы:

$("div.super_class").removeAttr("title");

Удаление атрибута не затрагивает соответствующее свойство из DOM-элемента JavaScript, хотя это может привести к изменению его значения. Например, удаление атрибута readonly из элемента поменяет свойство элемента readonly с true на false, но само свойство останется в элементе.

The post Как удалить атрибут HTML элемента с помощью метода .removeAttr() 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.

Что такое 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.

Sails.js: первые шаги. Установка и создание первого проекта на Sails.js

Воскан Восканян — Mon, 21 Mar 2016 19:15:33 +0000

Sails.js — это MVC фреймворк, который позволяет легко и быстро создавать Node.js приложения. Sails.js лучше всего подходит для создания реалтаймовых приложений, но вы можете его использовать для разработки обычных веб-сайтов.

Начиная с этого урока мы будем изучать этот фреймворк. Попробуем в уроках создать полноценный проект с нуля. В этом уроке мы установим фреймворк и создадим наш первый проект.

Установка фреймворка Sails.js

Sails.js — это фреймворк, который создан для платформы Node.js. Следовательно для работы с фреймворком нам нужно в первую очередь установить Node.js и NPM. После установки Node.js мы можем установить фреймворк Sails.js. Sails.js нам нужно установить глобально с помощью NPM. Запускаем командную строку и вводим команду:

npm -g install sails

Если команда успешно выполнена, то мы установили framework Sails.js, и сейчас можем перейти к созданию первого проекта на этом фреймворке.

Первый проект на Sails.js

После установки давайте попробуем создать и запустить первый проект на Sails.js. В Sails.js есть встроенные генераторы, которые позволяют быстро создать (сгенерировать) проект, создавать контроллеры и модели. Это позволяет сэкономить драгоценную время так как,нам не нужно придумать структуру и делать рутинную работу. И так, для создание нового проекта открываем командную строку, переходим в нужную директорию и выполнить следующую команду:

sails new testProject

После выполнение этой команды мы получим полноцельный рабочий проект, который можно сразу же запустить и посмотреть. Для запуска проекта на Node.js фреймворке Sails.js переходим в директорию testProject (это наш проект), и выполняем команду sails lift для запуска проекта.

cd testProject
sails lift

Наш первый проект запущен и мы можем обратиться к ней из браузера по следующему адресу http://localhost:1337/.

Мы только что создали простейшее приложение на фреймворке Sails.js. В следующем уроке мы поговорим о структуре проекта и немного расширим функционал проекта.

The post Sails.js: первые шаги. Установка и создание первого проекта на Sails.js appeared first on HackerX.