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

Смысл жизни данного бложика - быть записной книжкой для своего хозяина. Помогать ему в освоении безбрежных просторов Web по принципу “прочитал-усвоил-пересказал”. Ибо такой принцип мне кажется наиболее эффективным в деле изучения чего-то нового, особенно - если этого нового очень много.

Кроме того, мне работа с библиотекой jQuery нравиться! Она для меня - легкая и увлекательная игра; тот редкий случай, когда изучение программирования для меня дается одновременно очень легко и увлекательно. Чаще - что-то одно из двух.

Хватит лирики - переходим к практике.

Функция on()

Функция

1
.on()
является универсальным способом обработки событий на странице с помощью библиотеки jQuery. Почему универсальным? Давайте взглянем на синтаксис функции
1
.on()
:

.on(event, eventHandler);

… здесь

1
event
- это стандартное событие языка JavaScript:
1
blur
,
1
focus
,
1
focusin
,
1
focusout
,
1
load
,
1
resize
,
1
scroll
,
1
unload
,
1
click
,
1
dblclick
,
1
mousedown
,
1
mouseup
,
1
mousemove
,
1
mouseover
,
1
mouseout
,
1
mouseenter
,
1
mouseleave
,
1
change
,
1
select
,
1
submit
,
1
keydown
,
1
keypress
,
1
keyup
,
1
error
.

1
eventHandler
- это функция, обработчик события. Она создается для указанного события.

Хватит слов - краткий пример все “расскажет” лучше всяких слов.

$('#foo').on('click', function(){
  alert('Вы нажали на элемент "foo"');
});

… или так -

function myFunction(){
  alert('Вы нажали на элемент "foo"');
});

$('#foo').on('click', myFunction);

То есть, при клике мыши (событие

1
click
) на элементе с идентификатором
1
#foo
запускается обработчик этого события - функция, которая в данном случае является всего лишь командой
1
alert
. Но эта функция может быть и более сложной, конечно.

Другими словами, вызывая функцию

1
.on()
, мы передаем ей два аргумента - событие (которое нужно отслеживать) и обработчик этого события. Поэтому функция
1
.on()
и называется универсальной функцией.

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

$('#foo').click(function(){
  alert('Вы нажали на элемент "foo"');
})
$('#foo').on('click', function(){
  alert('Вы нажали на элемент "foo"');
});

Важное замечание: функция

1
.on()
была введена в jQuery взамен трех функций
1
.live()
,
1
.bind()
,
1
.delegate()
, которые считаются устаревшими и не поддерживаются современными версиями jQuery, начиная с версии 1.8.0.

В принципе, на этом можно остановиться, говоря о функции

1
.on()
. Для начала - этого достаточно.


В JavaScript имеется обычный оператор условия

1
if-else
, с которым я был знаком уже давно. Но вот недавно познакомился с его разновидностью - тернарным оператором
1
?
. Да, именно так - оператор вопросительный знак.

На первый взгляд, такой тернарный оператор выглядит запутанно и совершенно непонятно. Но стоит вникнуть в суть, как все становится просто.

Сначала - что значит тернарный оператор? В JavaScript существуют унарные операторы, бинарные операторы и вот теперь, оказывается, есть тернарный оператор. Опять-таки, все просто. Унарный оператор оперирует с одним операндом, бинарный оператор - с двумя операндами, тернарный оператор - с тремя операндами.

Синтаксис тернарного оператора

1
?
таков:

var result = (условие) ? alpha : beta

Читается такой оператор условия следующим образом: если выполняется условие

1
(условие)
, то переменной
1
result
присвоить значение
1
alpha
; если условие
1
(условие)
не выполняется, то переменной
1
result
присвоить значение
1
beta
.

Тернарный оператор условия очень похож на обычный оператор условия

1
if-else
. Можно сказать, что это сокращенная версия обычного оператора условия
1
if-else
.

Давайте сравним оба условия:

  • оператор условия
    1
    
    if-else
    
    :
var result;
if ( a > 0){
  result = true;
} else {
  result = false;
}
  • тернарный оператор условия
    1
    
    ?
    
    :
var result = ( a > 0 ) ? true : false;

Очень похоже, не правда ли? Здесь есть один важный момент - в данном случае у обоих операторов есть одна общая черта. И в первом, и во-втором случае переменной

1
result
присваивается значение в зависимости от выполнения условия.

А вот такой вариант уже будет непохож на предыдущий:

var summOne;
var summTwo;
if ( a > 0 ){
  summOne = a + b;
} else {
  summTwo = a * b;
}

Обратите внимание, что в этом условии результат присваивается разным переменным. В данном случае тенарный оператор условия

1
?
уже не подойдет; он не применим в данном случае.

Отсюда вывод: тернарный оператор применим для случая, когда одной переменной присваивается разный результат в зависимости от условия.

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

login = prompt('Enter your login','');
var pass = (login == 'black') ? 'Welcome!' :
  (login = 'white') ? 'Good bay!' :
  (login = 'green') ? 'See you next week!' :
  'I don\'t know you!';

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

  • Переменной
    1
    
    login
    
    присвоить значение, полученное от пользователя.
  • Если значение переменной
    1
    
    login
    
    равно
    1
    
    black
    
    , то переменной
    1
    
    pass
    
    присвоить значение
    1
    
    Welcome!
    
    .
  • Иначе, если значение переменной
    1
    
    login
    
    равно
    1
    
    white
    
    , то переменной
    1
    
    pass
    
    присвоить значение
    1
    
    Good bay!
    
    .
  • Иначе, если значение переменной
    1
    
    login
    
    равно
    1
    
    green
    
    , то переменной
    1
    
    pass
    
    присвоить значение
    1
    
    See you next week!
    
    .
  • Иначе переменной
    1
    
    pass
    
    присвоить значение
    1
    
    I don\'t know you!
    
    .

Приведу еще один пример нескольких операторов

1
?
, нагло скопированный с ресурса learn.javascript.ru вместе с описанием его работы (все в угоду доходчивости изложения материала):


var age = prompt('возраст?', 18);

var message = (age < 3) ? 'Здравствуй, малыш!' :
  (age < 18) ? 'Привет!' :
  (age < 100) ? 'Здравствуйте!' :
  'Какой необычный возраст!';

alert( message );

Поначалу может быть сложно понять, что происходит. Однако, внимательно приглядевшись, мы замечаем, что это обычная последовательная проверка!

Вопросительный знак проверяет сначала

1
age < 3
, если верно — возвращает ‘Здравствуй, малыш!’, если нет — идет за двоеточие и проверяет
1
age < 18
. Если это верно — возвращает ‘Привет!’, иначе проверка
1
age < 100
и ‘Здравствуйте!’… И наконец, если ничего из этого не верно, то ‘Какой необычный возраст!’.

То же самое через

1
if-else
:

if (age < 3) {
  message = 'Здравствуй, малыш!';
} else if (a < 18) {
  message = 'Привет!';
} else if (age < 100) {
  message = 'Здравствуйте!';
} else {
  message = 'Какой необычный возраст!';
}

Вот так работает тернарный оператор

1
?
в JavaScript. Ресурс learn.javascript.ru советует использовать тернарный оператор
1
?
по назначению и не заменять им обычный оператор условия
1
if-else
.

Данный материал основан на ресурсе learn.javascript.ru и не претендует на оригинальность.


В Javascript имеются три встроенных элемента для взаимодействия с пользователем страницы:

1
alert
,
1
prompt
,
1
confirm
. Начнем с самого простого и двинемся по нарастающей.

Модальное окно alert

Строка кода:

  alert("Message");

… вводит на странице модальное окно. Модальными окнами называются окна, которые блокируют работу всей страницы в целом (и скриптов - в частности) до тех пор, пока пользователь не выполнит требуемое окном действие. Пока модальное окно запущено, пользователь не сможет прокручивать страницу, нажимать на ней какие-либо кнопки или переходить по ссылкам.

Конкретное место, где выводится модальное окно с вопросом — обычно это центр viewport браузера и внешний вид окна выбирает браузер. Разработчик не может на это влиять. С одной стороны — это недостаток, так как нельзя вывести окно в своем, особо красивом, дизайне.

В случае с alert требуемое от пользователя действие одно - нажать кнопку “ОК”.

Задача alert - донести до сведения пользователя страницы какую-либо информацию, будь то справочная информация, информация об ошибке и так далее. Функция alert - единственная, которая ничего не возвращает!

Модальное окно prompt

Функция prompt также, как и alert, создает модальное окно. Но, в отличие от модального окна alert, окно prompt немного сложнее. Синтаксис функции prompt выглядит таким образом:

  var result = prompt (title, default);

То есть, функция prompt принимает два аргумента. Первый аргумент

1
title
- это заголовок модального окна. Второй аргумент
1
default
- это строка по умолчанию как образец ввода в поле.

Создаваемое функцией prompt окно имеет поле для ввода и две кнопки OK и Cancel. Вызов prompt возвращает то, что ввел посетитель — строку или специальное значение

1
null
, если ввод отменен.

  var ageUser = prompt ('How old are you?', 30);
  alert('Your are ' + ageUser + ' old!');

Рекомендуется всегда указывать второй аргумент:

  var test = prompt('Тест', '');

Окно prompt предназначено для получения у пользователя какой-либо информации в виде данных любого типа.

Модальное окно confirm

Это модальное окно служит для получения от пользователя подтверждения на заданный вопрос - ДА или НЕТ. Функция confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL. Результатом будет

1
true
при нажатии OK и
1
false
– при CANCEL(ESC):

  var sex = confirm('Are you male?');
  console.log(sex);

Заключение

Рассмотренные три способа взаимодействия с пользователем являются самыми простыми. Это простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда важна простота, а всякие «красивости» особой роли не играют.

Итог

  • 1
    
    alert
    
    выводит сообщение;
  • 1
    
    prompt
    
    выводит сообщение и ждет, пока пользователь введет текст, а затем возвращает введенное значение или
    1
    
    null
    
    , если ввод отменен (CANCEL/ESC);
  • 1
    
    confirm
    
    выводит сообщение и ждет, пока пользователь нажмет «OK» или «CANCEL» и возвращает
    1
    
    true/false
    
    ;

Данная статья является пересказом соответствующего материала с ресурса learn.javascript.ru и не претендует на оригинальность.

В этом разделе мы познакомимся с операторами сравнения и с логическими значениями, которые такие операторы возвращают.

Операторы сравнения:

  • больше
    1
    
    >
    
  • меньше
    1
    
    <
    
  • больше или равно
    1
    
    >=
    
  • меньше или равно
    1
    
    <=
    
  • равно
    1
    
    ==
    
  • неравно
    1
    
    !=
    

Операторы сравнения возвращают логическое значение. Таких значений может быть только два:

  • 1
    
    true
    
    - да, верно, истина
  • 1
    
    false
    
    - нет, неверно, ложь

Логические значения можно присваивать переменным явно:

  var a = true; // true

Можно присвоить переменной логическое значение как результат операции (сравнения):

  var m = 6 >= 8 // false

Сравнение строк

Строки сравниваются побуквенно, слева-направо. Берутся две строки и начинается сравнение. Берется первый символ первой строки и сравнивается с первым символом второй строки. Если они равны, то берутся второй символ первой строки и сравнивается со вторым символом второй строки.

И так последовательно производится сравнение строк до того момента, пока не случится так, что определенный символ первой строки неравен соответствующему символу второй строки.

На этом дальнейшее сравнение строк прекращается и делается вывод, какая строка больше или меньше другой на основании того, больше или меньше соответствующие символы этой строки.

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

Вывод, какой символ больше или меньше, производится на основании численных значений этих символов. Буквы нижнего регистра имеют большее численное значение, нежели буквы верхнего регистра. Буква

1
А
имеет меньшее численное значение, нежели буква
1
Б
. Отсутствие символа всегда считается меньше, чем присутствие символа.

Ниже приведены примеры (как же без них?), иллюстрирующие сравнение строк.

Первый символ первой строки больше первого символа второй строки, дальнейшее сравнение прекращается и делается вывод, что первая строка больше второй строки:

  console.log("Банан" > "Аят"); // true

В этом примере сравнение идет последовательно (символ в символ) вплоть до третьего по порядку символа, на котором сравнение прерывается, так как символ “c” по числовому значению больше символа “н”. На основании этого делается вывод, что первая строка “Вася” больше второй строки “Ваня”:

  console.log( "Вася" > "Ваня" ); // true

Любая буква (символ) больше отсутствия буквы. Например, первая строка больше второй, так как буква “е” в первой строке больше отсутствия таковой во второй строке:

  console.log( "Привет" > "Прив" ); // true

Интересный пример сравнения связан обработкой введенных пользователем данных. Все данные, вводимые пользователем на странице, являются строковым типом. Поэтому сравнивать их, не выполнив предварительное преобразование типов, нельзя. Например:

  console.log( "4" > "15" ); // true

… с точки зрения JavaScript будет верным

1
true
, так как строка “4” больше строки “15” (первый символ “4” больше первого символа “1”). Однако, в данном случае пользователем введены два числа 4 и 15, а не строки. Поэтому их необходимо привести к числовому типу и уже тогда сравнивать:

  console.log( +"4" > +"15" ); // false

Сравнение разных типов

Если производится сравнение данных различного типа, то JavaScript производит автоматическое (правильно такое преобразование называется неявным преобразованием) преобразование всех данных к числовому типу. И тогда производится сравнение чисел.

Строковый тип “34” приводится к числовому типу (числу) 34 и производится сравнение между числом 34 и числом 33:

  console.log( "34" > 33 ); // true

Булев тип

1
false
приводится к числовому типу 0 (
1
true == 1
,
1
false == 0
) и производится сравнение двух (одинаковых в данном случае) чисел 0:

  console.log( false == 0 ); // true
  console.log( true == 0 ); // false

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

Для этой цели используется оператор строгого равенства (

1
===
) и строгого неравенства (
1
!==
). То есть, к обычным операторам равенства (
1
==
) и неравентсва (
1
!=
) добавляется еще один символ (
1
=
).

Если тип разный, то операция сравнения всегда возвращает значение

1
false
:

  console.log( "example" === 34 ); // false

Строгое сравнение предпочтительно, если мы хотим быть уверены, что «сюрпризов» не будет.

Вывод: любые сравнения с

1
undefined/null
, кроме точного
1
===
, следует делать с осторожностью. Желательно не использовать сравнения
1
>=
1
>
1
<
1
<=
с ними, во избежание ошибок в коде.

Итог

  • В JavaScript есть логические значения
    1
    
    true
    
    (истина) и
    1
    
    false
    
    (ложь). Операторы сравнения возвращают их.
  • Строки сравниваются побуквенно.
  • Значения разных типов приводятся к числу при сравнении, за исключением строгого равенства
    1
    
    ===
    
    (
    1
    
    !==
    
    ).
  • Значения
    1
    
    null
    
    и
    1
    
    undefined
    
    равны
    1
    
    ==
    
    друг другу и не равны ничему другому. В других сравнениях (с участием
    1
    
    >
    
    1
    
    <
    
    ) их лучше не использовать, так как они ведут себя не как 0.

Данная статья является пересказом соответствующего материала с ресурса learn.javascript.ru и не претендует на оригинальность.

Вот захотелось написать о ZSH и “Oh My ZSH” - в частности.

Что такое ZSH? Это командная оболочка для Unix-подобных систем, к которым относятся как Linux, так и Mac OS X. Стандартной командной оболочкой в Linux и Mac OS X является BASH, которая полностью удовлетворяет все потребности пользователя.

Но если хочется нечто особенное, не такое как у всех и BASH приелась, то можно попробовать ZSH. Эта оболочка может полностью заменить собой BASH и привнести с собой еще пару-тройку дополнительных возможностей. К слову сказать, под Linux имеются гораздо больше командных оболочек, нежели две BASH и ZSH. Но две последние самые популярные и используемые.

К оболочке ZSH имеется дополнительная надстройка Oh My ZSH, которая делает ее еще более красивой и функциональной. Каждый опытный пользователь Linux находит в ZSH что-то свое. Я нашел в ZSH (“Oh My ZSH”) красоту оформления с помощью большого выбора тем “Oh My ZSH Themes” и плагины “Oh My ZSH Plugins”, которые делают работу в командной строке еще более удобной.

Установка ZSH

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

Первый случай подойдет для системы Mac OS X (в ней

1
curl
встроен по умолчанию):

$ curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

Второй случай подойдет для системы Linux (в ней

1
wget
встроен по умолчанию):

$ sudo wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O - | sh

После выполнения команды в системе Mac OS X достаточно закрыть и снова открыть терминал (рекомендуется к использованию “iTerm2”), чтобы ZSH вступил в действие и заменил собой BASH в качестве командной оболочки по умолчанию.

В системе Linux придется выполнить пару дополнительных действий. Первым шагом проверяем, что ZSH установилась нормально и работоспособная. Для этого запускаем ZSH вместо BASH:

$ zsh

Приглашение командной строки изменится со стандартного BASH на более причудливое и красивое приглашение ZSH. Отлично - все работает.

Производим смену командной оболочки по умолчанию с BASH на ZSH:

$ sudo chsh -s /bin/zsh

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

Настройка ZSH

Настройка ZSH сводится к редактированию файла

1
~/.zshrc
, в котором размещены все настройки этой оболочки. Строчек там достаточно много, но две самые интересные и важные из них опишу ниже.

Строка

1
ZSH_THEME="robbyrussell"
отвечает за тему оформления оболочки ZSH. По умолчанию используется тема под названием
1
robbyrussell
. Но ее можно заменить на любую другую из списка тем “Oh My ZSH Themes”, в котором представлены скриншоты, по которым легко выбрать любую тему. Все темы автоматически уже установлены в системе, поэтому достаточно указать нужную по ее имени.

Например, мне понравилась тема

1
pygmalion
:

ZSH_THEME="pygmalion"

Вторая важная строка

1
plugins=
конфигурационного файла
1
~/.zshrc
отвечает за подключение плагинов. Строка первоначально имеет вид:

plugins=(git)

Это означает, что при запуске оболочки ZSH будет автоматически подгружен плагин

1
git
. Плагины, как и темы, автоматическм устанавливаются в систему, поэтому достаточно указать только имя нужного плагина.

Важное замечание - перед использованием каждого конкретного плагина необходимо прочитать его README, чтобы знать, как его использовать. К примеру, плагин

1
sublime
служит для создания и использования псевдонимов (alias) при запуске редактора Sublime Text из командной строки. Плагин
1
bundler
служит для создания и использования псевдонимов (alias) при запуске утилиты
1
bundle
.

Пример строки с плагинами может быть таким (в моем случае):

plugins=(git sublime bundler)

Именно так - разделителями служат символы пробела между именами плагинов.

Ниже представлены два видео об установке и настройке “Oh My Zsh” под операционной системой Mac OS X. Видео на английском языке, но все понятно и так. Видео не мое - автор его Scott Tolinski, ведущий моего любимого канала Level Up Tuts.

Установка “Oh My Zsh”:

Настройка “Oh My Zsh”:

Заключение

В принципе, рассказанного выше минимума уже достаточно для комфортной работы в ZSH. В заключение можно лишь привести снимок терминала, чтобы иметь представление о красоте ZSH (с прикрученным “Oh My Zsh”):

Oh My ZSH

На этом все.