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

1
display
(замечание: по внимательном перечтении оказалось не все так просто - в этой “магии” задействованы не только CSS-свойство
1
display
, но также
1
width
,
1
height
,
1
opacity
; и даже
1
margin
и
1
padding
!).

После скрытия элемента значение его CSS-свойство становится равным

1
dispaly: none
. Перед появлением элемента его CSS-свойство
1
display
изменяет свое значение на противоположное от
1
none
.

1
duration
— продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением ‘fast’ или ‘slow’ (200 и 600 миллисекунд). Если этот параметр не задан, анимация будет происходить мгновенно, элемент просто появится/исчезнет.

1
callback
— функция, заданная в качестве обработчика завершения анимации (появления или скрытия).

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

  • мгновенно скроет элемент с идентификатором
    1
    
    #leftFit
    .
$("#leftFit").hide();
  • мгновенно покажет элемент с идентификатором
    1
    
    #leftFit
    :
$("#leftFit").show();
  • в течении 1/3 секунды скроет элемент с идентификатором
    1
    
    #leftFit
    :
$("#leftFit").hide(300);
  • в течении 600 миллисекунд вернет видимость элементу с идентификатором
    1
    
    #leftFit
    :
$("#leftFit").show("slow")

Можно скрывать и показывать элементы с помощью сворачивания/разворачивания (за счет изменения высоты). Это делают функции

1
slideUp()
,
1
slideDown()
.

Медленно скрывает и раскрывает все видимые параграфы, длительность анимационных эффектов — 600 миллисекунд:

$('button').click(function () {
  $('p').hide('slow');
});

$('button').click(function() {
  $('p').show('slow');
});

Использование callback-функции:

$('#clickme').click(function() {
  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});

$('#clickme').click(function() {
  $('#book').show('slow', function() {
    alert('Animation complete.');
  });
});

Материал данной статьи основан на ресурсах:

… и не претендует на оригинальность.


Маленькое вступление. Этой статьей я начинаю серию, посвященную работе с библиотекой 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 и не претендует на оригинальность.