JavaScript может помочь сделать ваши страницы более динамичными и живыми. Тем не менее, вы должны стараться использовать сценарии полегче, поскольку вы не хотите засорять браузеры читателей. Если вы еще не читали Руководство по форматированию (по крайней мере, часть, посвященную CSS), я бы рекомендовал сделать это, поскольку данное руководство расширит некоторые темы, затронутые в нем.
Примечание: Если вам просто нужны блоки кода, которые вы можете вставить в свою статью, прокрутите вниз до раздела "Примеры".
Начало работы
Хотя JavaScript может показаться трудным или сложным, на самом деле это довольно простой язык, который можно освоить и начать писать на нем базовые сценарии.
Что такое JavaScript?
JavaScript - это язык сценариев, который часто используется наряду с HTML и CSS для создания динамичных и интерактивных веб-страниц.
Использование JS в Викидоте
Чтобы добавить код JavaScript на страницу Викидота, он должен быть заключен в HTML-элемент, как показано ниже:
[[html]]
Your text goes here!
<script>
JavaScript goes between these script tags.
</script>
[[/html]]
Which will create:
Поскольку текст находится в собственном HTML-фрейме, он не наследует CSS-стилистику Викидота, поэтому по умолчанию текст имеет Times New Roman. Форматирование может быть применено позже, чтобы сделать его более похожим на обычный текст.
Очень важно отметить, что если вы хотите, чтобы ваш код взаимодействовал с содержимым статьи, это содержимое должно находиться в том же модуле HTML, что и ваш JavaScript. В противном случае код не сможет получить к нему доступ.
Основы
Если вы знаете другой язык программирования, то JavaScript не должен представлять для вас сложности. Многие из этих понятий являются общими для всех языков.
Переменные
Переменная - это то, что хранит значение. Существует множество типов данных, которые может хранить переменная, но в основном вы будете работать с числом, строкой текста, булевой функцией (истина или ложь) или объектом (набор из нескольких свойств со своими значениями).
Вот как создать переменную:
var myVar = 5;
"var" означает, что мы собираемся определить переменную, "myVar" - это имя переменной, "=" означает, что мы собираемся присвоить ей значение, а "5" - это ее значение.
Переменные можно переназначать после их создания, например, так:
var myVar = 2;
myVar = 4;
Переменные также могут быть созданы без значения и получить его позже:
var myVar;
myVar = 10;
Давайте попробуем использовать другие типы данных:
- Strings
var myVar = "Здравствуй мир";
- Booleans
var myVar = true;
var myVar = false;
- Objects
var myObject = {propertyOne: "Здравствуй ", propertyTwo: "Мир"};
Объекты немного сложнее, и мы рассмотрим их более подробно позже.
Математика
В JavaScript можно выполнять множество математических операций - например:
var sum = 2 + 2;
// sum will have a value of 4
Вы также можете выполнять операции с использованием переменных.
var firstOp = 10;
var secondOp = 5;
var product = firstOp * secondOp;// продукт будет иметь значение 50
Вы можете использовать это для увеличения переменных:
var number = 5;
number = number * 5;// новое значение числа будет равно 25
Это также можно использовать в строках:
var firstString = "Здравствуй ";
var secondString = "Мир";
var combinedString = firstString + secondString;// combinedString будет иметь значение "Здравствуй мир"
camelCase
При именовании переменных рекомендуется использовать регистр символов. Короче говоря, первое слово имени переменной начинается со строчной буквы, а каждое последующее слово начинается с заглавной буквы. Например:
var thisIsCamelCase;
var Notcamelcase;
var DEFINITELYNOTCAMELCASE;
Функции
Функции полезны, когда вы собираетесь использовать блок кода много раз, но не хотите каждый раз вводить его в текст. С функциями вы просто определяете их один раз, а затем можете вызывать их сколько угодно раз.
Вот как определить функцию:
function myFunction() {
return "Здравствуй мир!";
}
При вызове эта функция выведет значение "Здравствуй мир!".
Функции также могут иметь набор параметров. Чтобы продемонстрировать это, давайте создадим простую функцию, которая будет умножать два вводимых числа.
function multiply(number1, number2) {
return number1 * number2;
}// This function can then be called with any set of numbers. For example:
multiply(2, 2);
// This will return 4.multiply(20, 5);
// This will return 100.
Параметры задаются внутри круглых скобок функции и разделяются запятыми. Количество параметров практически не ограничено, но старайтесь, чтобы оно было минимальным.
Массивы
Массив - это набор данных, например, список покупок. Список покупок будет выглядеть примерно так:
- Яйца
- Молоко
- Крупа
- Масло
А в JavaScript он будет выглядеть следующим образом:
var shoppingList = ["Eggs", "Milk", "Cereal", "Butter"];
Создав массив, мы можем получить доступ к хранящимся в нем значениям, используя строчную нотацию. Допустим, мы хотим найти третий элемент в списке.
var shoppingList = ["Eggs", "Milk", "Cereal", "Butter"];
var thirdItem = shoppingList[2];
// thirdItem is now equal to "Cereal".
Обратите внимание, что массивы JavaScript начинаются с 0, а не с 1, поэтому третий элемент будет иметь индекс 2.
Вы можете добавить элементы в массив с помощью методов push() и unshift(). push() добавит один или несколько элементов в конец массива, а unshift() добавит их в начало. Например:
var exampleArray = ["Three", "Four"];
exampleArray.push("Five", "Six");
// exampleArray is now ["Three", "Four", "Five", "Six"]exampleArray.unshift("One", "Two");
// exampleArray is now ["One", "Two", "Three", "Four", "Five", "Six"]
Объекты
Мы уже вкратце рассказывали об объектах, но сейчас рассмотрим их более подробно. Объекты хранят данные в виде пар ключ-значение, подобно словарю. Например:
var carOne = {
color: "blue",
horsepower: 400,
brand: "Audi"
}
Если вы хотите получить доступ к свойствам объекта, вы можете использовать либо точечную нотацию, либо скобочную нотацию.
var colorA = carOne.color;
// This is dot notation. colorA will equal "blue".var colorB = carOne['color'];
// This is bracket notation. colorB will also equal "blue".
Свойства объекта можно изменить так же легко.
carOne.color = "green";
Конструкторы
Теперь, допустим, вы хотите создать несколько объектов 'car', которые будут следовать одному шаблону и иметь одинаковые свойства. Вы можете использовать так называемый конструктор объектов.
function Car(color, horsepower, brand) {
this.color = color;
this.horsepower = horsepower;
this.brand = brand;
}
Этот конструктор принимает три параметра и создает объект, используя эти параметры. Теперь мы можем использовать конструктор следующим образом:
var carTwo = new Car("yellow", 510, "Ferrari");
var carThree = new Car("white", 395, "Ford");
Условные обозначения
Часто при написании кода возникает необходимость проверить, является ли что-то истинным, и если да, то выполнить определенное действие. С помощью операторов "if" вы можете сделать именно это.
if (5 > 4) {
return "Yes";
}
Это простой оператор "if", который всегда будет возвращать "Да", так как 5 больше 4. Если мы изменим код таким образом, он больше не будет выполняться:
if (5 > 6) {
return "Yes";
}
Если вам нужно проверить наличие вторичного условия, вы можете использовать оператор "else if":
if (5 > 6) {
return "Yes";
} else if (5 > 4) {
return "Maybe";
}
Здесь будет выведено "Maybe". Обратите внимание, что вы можете иметь несколько условий 'else if', но если несколько из них истинны, будет выполнено только первое истинное условие. Например:
if (5 > 6) {
return "Yes";
} else if (5 > 4) {
return "Maybe";
} else if (5 == 5) {
return "Maaaybe";
}
Здесь оба условия 'else if' истинны, но будет выполнено только первое.
Наконец, если все условия ложны, вы можете выбрать выполнение другого действия, используя 'else'.
if (5 > 6) {
return "Yes";
} else if (5 == 6) {
return "Maybe";
} else {
return "No";
}
Здесь выходом будет "Нет", потому что ни одно из вышеперечисленных условий не является истинным.
Объект документа
Теперь, когда у нас есть базовые знания JavaScript, нам нужно связать его с HTML. Здесь нам поможет объект document. Чтобы получить доступ к элементу, вам понадобится его ID. Получив его, вы можете использовать:
document.getElementById('elementID');
Существует множество способов манипулирования элементами HTML. Мы рассмотрим лишь некоторые из них. Если вы хотите изменить содержимое элемента, вы можете использовать:
document.getElementById('elementID').innerHTML = 'new content';
Обратите внимание, что при этом все содержимое элемента будет заменено новым содержимым. Если вы хотите просто добавить содержимое, вы можете использовать оператор "+=".
document.getElementById('elementID').innerHTML += 'content to add';
Теперь содержимое будет просто добавлено в конец элемента.
Вы также можете изменить стиль элемента, например, так:
document.getElementById('elementID').style.attribute;
Поэтому, если вы хотите изменить границу элемента, введите:
document.getElementById('elementID').style.border = '3px dashed white';
Допустим, вы хотите полностью удалить элемент. Вот метод, который я предпочитаю использовать:
document.getElementById('elementID').parentNode.removeChild(document.getElementById('elementID'));
Разное
Это небольшой список некоторых других полезных функций и т.д., которые, как мне кажется, вы должны знать.
- setTimeout(function, delay) - Эта функция выполнит функцию после некоторой задержки. Задержка исчисляется в миллисекундах, поэтому 1000 = 1 секунда.
setTimeout(function(){document.write("Здравствуй мир!");}, 5000);
Это выведет "Здравствуй мир!" через 5 секунд.
Примеры
Не стесняйтесь использовать эти примеры в своих статьях, если это необходимо.
Всплывающий элемент
[[html]]
<head>
<style>
@keyframes popin {
from {opacity: 0; transform: scale(0.5);}
to {opacity: 1; transform: scale(1);}
}.popin-box {
animation: popin 0.3s ease-out;
background-color: #060606;
width: fit-content;
margin-left: auto;
margin-right: auto;
padding: 1% 3% 1% 3%;
border: 1px solid #eee;
border-radius: 3px;
}
</style>
</head><body style="color: #eee; text-align: center;">
<button id="add-button" onclick="addPopinBox();">Create Box</button><script>
function addPopinBox() {
var boxElement = document.createElement('div');
boxElement.className = 'popin-box';
boxElement.innerHTML = 'example';
document.getElementById('add-button').parentNode.replaceChild(boxElement, document.getElementById('add-button'));
}
</script>
</body>
[[/html]]
Этот код создает новый элемент с эффектом всплывающего окна при нажатии кнопки.
Интеллектуальный ввод текста
[[html]]
<body style="color: #eee; text-align: center;">
<form id="name-form" onsubmit="getName();">
<input type="text" id="name-input" name="name" ><input type="submit" value="Submit">
</form><script>
var userName;function getName() {
userName = document.getElementById('name-input').value;
var welcomeBlock = document.createElement('span');
welcomeBlock.innerHTML = '<em>Welcome, ' + userName + '.</em>';
document.getElementById('name-form').parentNode.replaceChild(welcomeBlock, document.getElementById('name-form'));
}
</script>
</body>
[[/html]]
Этот код принимает пользовательский ввод и отображает его на странице. Вы можете увидеть его в действии ниже: