Веб-программирование от незрячего, урок 3: Javascript

Здравствуйте. Как уже рассказывал в предыдущих постах, javascript - это основной язык, используемый на сайтах для создания динамики. Также он позволяет укрошать страницы, реализовывать функционал и т.п.

JS - это краткая форма написания сего языка программирования.

Основы JS:

1. Переменные обозначаются словами var, lat и connst перед ними. Например, var name = 1;
2. const - константа. Её значение ниже изменить будет нельзя;
3. var - переменная с глобальной областью видимости: вы можете написать до функции var name = 1;, а потом, в функции, так:
   name = 35-f;, где f - переменная внутри функции. В результате мы получим значение 35-f, а не 1;
4. lat - изменяемая переменная, но сделать так, как я показал выше, с данным типом не выйдет.
5. document - основа многих полезнейших методов, например, document.write (Выводит информацию на экран), document.GetElementById (Привязывает данные к id элемента или выводит содержимое, например, в переменную);
6. console.log('data') - Выводит информацию (В нашем случае "data") в консоль. Нужно для проверки корректности выполнения кода;
7. На странице javascript код заключается между тегами <script></script>;
8. Для подключения .js файла не надо между тегами, которые написал выше, ничего вставлять: надо добавить в открывающий тег src="" и прописать между кавычками путь к файлу;
9. Многие элементы требуют выполнения javascript по клику, например, или по наведению. Для этого используются соответствующие атрибуты, к примеру, для активации скрипта по клику используется атрибут onclick. Внутри же прописывается функция, например, так: onclick="function_name();".
   Если, например, надо вывести сообщение в случае изменения поля, можно написать так: onchange="window.alert('Поле изменено');".
   Другие атрибуты сможете найти в интернете;
10. Есть специализированные библиотеки, типа jquery, которые позволяют облегчить написание кода. Допустим, для вывода value поля с id filde1 не надо будет вводить document.getElementById('filde1').value: достаточно ``$("#filde1").value();`'
    Обращаю ваше внимание на то, что этот код не будет работать, пока вы не подключите библиотеку jquery в начале страницы (Как это сделать, смотрите в поисковых системах или в конце поста);
11. JS уникален тем, что позволяет сделать загрузку данных без перезагрузки страницы - это Ajax.
    На чистом Javascript писать непросто. Jquery же облегчает это дело.

1. document:

Как уже сказал, с этим словом используется множество методов:

• document.getElementById('name') - id с именем name, document.getElementById('name').innerHTML - выводит html содержимое тега с id "name".
• document.getElementsByClassName('cl1') - работа с элементами, содержащими класс;
• document.write - вывод на экран. Остальная информация скрывается, поэтому в основном его не используют;
• document.getElementsByTagName('p') - Работа с тегами, имеющими определённое имя.

2. Window

• window.alert - выводит сообщение с кнопкой "ок";
• window.setInterval - запускает что-то с определённым интервалом, например, функцию clock, которая выводит время: window.setInterval('clock()', 1000);
• window.confirm - отображает диалоговое окно с вопросом и двумя кнопками: "ок" и "отмена". Если нажимаете ok, возвращается true, отмена - false.
  Пример: var otvet=window.confirm("Вы хотите покрасить текст в красный цвет?"); - запишет в переменную otvet true или false в зависимости от того, что ввёл пользователь. А далее можно создать условие, проверяющее значение переменной;
• window.prompt - Выводит диалоговое окно с текстовым полем, информация из которого возвращается. В примере ниже, в переменную:
  var ответ=window.prompt("Введите ваше имя", "");
  А далее можно добавить переменную в window.alert: window.alert(ответ). В принципе, можно вывести и в document.write, и в id какого-то элемента;
• window.setTimeout - выводит что-то через определённое время (в миллисекундах, т.е. умножить количество секунд на 1000). Пример:
  window.setTimeout("document.write('Сее сообщение выводится через 5 секунд')",5000);

3. Условия:

Тут всё просто:

• if - если;
• else - иначе.

Думаю вы знаете эти слова.

Представьте, что вам надо сказать:
если 5+3 = 8, то всё ок, иначе - всё плохо.
Теперь замените 5+3 на переменные a и b, а затем им присвойте значения тех чисел. Получим:
a = 5 и b = 3;
Если a + b = 8, то всё ок. Иначе - всё плохо.

Теперь давайте приблизимся к формату написания javascript кода:
если(a + b === 8) {
$("#result").HTML('Всё ок');
} иначе {
$("#result").HTML('Всё плохо');
}

Как вы видете, здесь вместо то я вставил фигурные скобки. Перед иначе я закрывающую поставил, как-бы заканчивая описывать, то что делать.
Внутри я написал, что вывести в элемент с id "result" сообщение.

Теперь переведём "если" и "иначе" на Английский, и получим правильный JS код:

if (a + b === 8) {
$("#result").HTML('Всё ок');
} else {
$("#result").HTML('Всё плохо');
}

Вот так.

Иначе сее условие можно записать так (Это более простой вариант):

switch (a+b) {
  case 8:
    alert('Всё ок');
    break;
  default:
    alert('Всё плохо');
}

Функции:

Функции возвращают какое-то значение. Создаются словом function и именем со скобками после него. В скобках могут быть переменные, которые используются внутри функции. Пример:

function summ(a, b) {
var s = a+b;
return s;
}
document.write(summ(3, 4));

То есть в функцию передаётся 2 числа: 3 и 4. Она выполняет вычисления и возвращает 7, т.е. return s.

Вместо 3 и 4 вы можете вставить другие переменные, например, в которых содержатся данные из полей.

Сложение переменных:

Если переменные будут содержать строки, т.е.:
var a = 'я';
var b = 'моя семья'
А затем сложить:
var c = a+b;
Получим строку: "ямоясемья". Чтобы был пробел, можно его вставить после "я" в первой переменной, а можно прописать в сумме:
var c = a+' '+b;
Получится: "я моя семья". Можно так сделать:
var c = a+' и '+b;
Получится "я и моя семья".

Если же сложить числа, будет сумма.
Но бывают случаи, когда по идее должны быть числа, а получаются строки, т.е. вместо 12 получается 39. В этом случае необходимо использовать функцию parseInt(). Пример. Это, конечно, относится к node.js, но он наиболее явный:
Скрипт получает через get запрос 2 числа. По идее должно быть сложение чисел, но происходит сумма строк. Делаем не так:
var res = data1+data2;
А так:
var res = parseInt(data1) + parseInt(data2);
Очень полезная фишка.
Но если вы пишете числа вручную, советую, не обромлены ли они кавычками? Кавычки способствуют отображению значения в виде строк.

P. S. Если складывать строку и число или наоборот, суммирование будет, как надо:

var one = 7;
var two = 'человек';
var final = one+two;

Получим "7человек". Ну а как добавить пробелы, вы уже знаете.

И да: HTML теги добавляются также, как пробелы.

Практика:

Задание:

Создайте форму с полями на базе предыдущего урока. input type="button" укажите с onclick="send();", а в функции send соберите из полей с id данные и вставьте в переменные filde1 и filde2.
В полях должны вводиться числа.
Далее прописываете условие, где складываете две переменные и выводите в div с id="result" сообщение об успехе или неудаче.

Мой пример:

Если же по урокам было непонятно, как это сделать, напишу код ниже:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
</head>
<body>
<form>
<input type="text" id="filde1" value="" placeholder="Введите первое число">
<input type="text" id="filde2" value="" placeholder="Введите второе число">
<input type="button" value="Получить результат" onclick="send();">
</form>
<script>
var filde1 = document.getElementById('filde1').value;
var filde2 = $("#filde2").value();
if (filde1 + filde 2 === 10) {
document.getElementById('result').innerHTML = 'Верно: сумма равна 10';
} else {
document.getElementById('result').innerHTML = 'Неверно.';
}
</script>
<div id="result"></div>
</body></html>

Выше, как вы заметили, в head я подключил jquery. Если вы хотите использовать конструкции типа $().name(), необходимо будет это сделать и вам. Только ищите последнюю версию.

P. s. Также выше я одной переменной присвоил из значения поля на чистом JS, а другой - на jquery - сравните тот вариант, которые вам больше нравится.

Заключение:

Я дал лишь основы. Для более углублённого изучения советую воспользоваться следующими ссылками:

1. Учебник javascript: http://www.wisdomweb.ru/JS/javascript-first.php
2. Jquery учебник: http://www.wisdomweb.ru/JQ/jquery-first.php

В следующем посте расскажу чуть-чуть о node.js.