Здравствуйте. Как уже рассказывал в предыдущих постах, javascript - это основной язык, используемый на сайтах для создания динамики. Также он позволяет укрошать страницы, реализовывать функционал и т.п.
JS - это краткая форма написания сего языка программирования.
Основы JS:
- Переменные обозначаются словами var, lat и connst перед ними. Например,
var name = 1; - const - константа. Её значение ниже изменить будет нельзя;
- var - переменная с глобальной областью видимости: вы можете написать до функции
var name = 1;, а потом, в функции, так:
name = 35-f;, где f - переменная внутри функции. В результате мы получим значение 35-f, а не 1; - lat - изменяемая переменная, но сделать так, как я показал выше, с данным типом не выйдет.
- document - основа многих полезнейших методов, например, document.write (Выводит информацию на экран), document.GetElementById (Привязывает данные к id элемента или выводит содержимое, например, в переменную);
- console.log('data') - Выводит информацию (В нашем случае "data") в консоль. Нужно для проверки корректности выполнения кода;
- На странице javascript код заключается между тегами
<script></script>; - Для подключения .js файла не надо между тегами, которые написал выше, ничего вставлять: надо добавить в открывающий тег src="" и прописать между кавычками путь к файлу;
- Многие элементы требуют выполнения javascript по клику, например, или по наведению. Для этого используются соответствующие атрибуты, к примеру, для активации скрипта по клику используется атрибут onclick. Внутри же прописывается функция, например, так:
onclick="function_name();".
Если, например, надо вывести сообщение в случае изменения поля, можно написать так:onchange="window.alert('Поле изменено');".
Другие атрибуты сможете найти в интернете; - Есть специализированные библиотеки, типа jquery, которые позволяют облегчить написание кода. Допустим, для вывода value поля с id filde1 не надо будет вводить
document.getElementById('filde1').value: достаточно ``$("#filde1").value();`'
Обращаю ваше внимание на то, что этот код не будет работать, пока вы не подключите библиотеку jquery в начале страницы (Как это сделать, смотрите в поисковых системах или в конце поста); - 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 - сравните тот вариант, которые вам больше нравится.
Заключение:
Я дал лишь основы. Для более углублённого изучения советую воспользоваться следующими ссылками:
- Учебник javascript: http://www.wisdomweb.ru/JS/javascript-first.php
- Jquery учебник: http://www.wisdomweb.ru/JQ/jquery-first.php
В следующем посте расскажу чуть-чуть о node.js.