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

1

display

1

display

1

width

1

height

1

opacity

1

margin

1

padding

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

1

dispaly: none

1

display

1

none

1

duration

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.');
  });
});

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

• http://jquery.page2page.ru
• http://jquery-docs.ru
• http://api.jquery.com

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

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

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

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

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

Функция on()

Функция

1

.on()

1

.on()

.on(event, eventHandler);

… здесь

1

event

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()

1

.live()

1

.bind()

1

.delegate()

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

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

?

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

?

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

1

false

  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

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

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

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

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

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

Булев тип

1

false

1

true == 1

1

false == 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 и не претендует на оригинальность.