Привет, это ваш дружелюбный сосед, начинающий веб-разработчик. Я начал это путешествие, изучая Javascript, и поэтому я рассказываю миру о том, что я нашел, и вы можете присоединиться ко мне в моем путешествии.
Сегодня мы говорим о JavaScript. Я выучил Javascript, и все пошло… хорошо. Я чувствовал, что немного шатаюсь, но знал более или менее достаточно. Затем мне порекомендовали книгу Кайла Симпсона «Вы еще не знаете Javascript». Я читаю это. Я читаю это снова. Наверно перечитаю еще 2 раза.
Я понял одну вещь: если вы только начинаете, нетерпеливы, слишком нетерпеливы и хотите знать, как узнать, когда вы освоили основы, я бы порекомендовал вам, по крайней мере, знать это. могу без стыда сказать, что умею работать с Javascript. Я опишу их здесь, а затем сделаю небольшую серию статей о каждом из них, чтобы отдать им должное.
Переменные
Это контейнеры, в которых хранятся данные. Например:
var имя = 'Боб';
Здесь кошка — это переменная, которой присвоены данные «Боб». переменные могут быть объявлены с помощью var, let и const. Мы подробно расскажем об этом в другой статье.
Функции
Функция — это блок кода, предназначенный для выполнения чего-либо (W3Schools). Значение — если вы хотите что-то сделать с именем переменной «Боб», вы пишете для этого функцию. Что бы вы хотели сделать с именем? Для целей всей этой статьи мы собираемся рассказать историю кота Боба.
Итак, теперь у нас есть кот по имени Боб, мы хотим убедиться, что когда мы ищем catName, мы получим Боба, поэтому мы напишем функцию. Для функций требуется имя (catName), вход (в это время он будет пустым) и выход (последние два должны быть связаны, но не обязательно должны быть там).
function catName() {
возвращаемое имя
}
catName()
Вуаля! У нас есть функция catName. Теперь с переменной имени, которую мы ранее присвоили «Бобу», при запуске функции catName() будет возвращен Боб. Конечно, гораздо больше, чем это, входит в функции.
Условные операторы
Если вы хотите что-то сделать или сделать что-то еще, вы используете условный оператор в Javascript. Мы снова возьмем определение условных операторов W3Schools как используемое для выполнения разных действий на основе разных условий. Итак, в нашей кошачьей истории, если мы хотим устроить вечеринку и гость, который нам нужен, это кот Боб, мы напишем что-то вроде этого:
Если (имя == 'Боб') {
вернуть «Вы приглашены на вечеринку»;
}
Если (имя != 'Боб') {
вернуть «Вы НЕ приглашены на вечеринку»;
}
Это говорит о том, что если вашего кота зовут Боб, вы приглашены на вечеринку, если нет, вы не приглашены. Это самая верхушка айсберга условных операторов, но в основном они проверяют, является ли утверждение истинным или ложным. Я также расскажу о причине двойных знаков равенства - это не опечатка.
Объекты
Итак, у нас есть контейнер (переменная) с именем кота. Теперь нам нужен контейнер с дополнительными данными о Бобе. Мы делаем это, создавая объект. Объекты — это контейнеры данных с одним или несколькими значениями. У них есть ключ, например, имя, и значение, например, «Боб». Вот наш объект кошки
const cat = {
имя: «Боб»,
цвет меха: «черный»,
возраст: 3,
цвет глаз: «синий»
};
Разве он не красавец? С этим объектом мы можем ссылаться на значения в объекте, но это уже другая история.
Массивы
Скажем, мы хотим, чтобы у нас была часть, в которой есть нечто большее, чем просто Боб. Бобу нужно повеселиться со своими друзьями. У нас может быть хороший список гостей, и массивы — лучший способ сделать это. Массивы также являются объектами, которые имеют другую структуру и определяются как набор данных, хранящихся в одной переменной:
const partyGuests = ['Боб', 'Спиди', 'миссис Баттерворт', 'Патч];
Массивы особенно полезны, когда вам нужно создать списки или упорядоченные элементы, на которые вы можете ссылаться по их положению в коллекции.
Прослушиватели событий DOM
DOM означает объектная модель документа. Честно говоря, когда я впервые услышал это, я подумал: «Что?». Затем я прочитал его три раза и решил думать об этом так:
Есть сайт этой кошачьей вечеринки. По-прежнему - ничего не происходит. Там есть еда, вокруг слоняются кошки, но кто из них Боб? Я нажимаю на кошку, и появляется предупреждение «Эй, я Патчи, кот!». Я нажимаю на другого кота, и появляется предупреждение: «Эй, я кот Боб!». Замечательно, что я нашел Боба.
Как это было сделано?
HTML будет иметь элемент catName, и если я добавлю прослушиватель событий в Javascript, он прослушивает событие и выполняет функцию, связанную с этим событием:
document.getElementById("catName").addEventListener("click" function(){ alert("Эй, я кот Боб!"); });
Если вы хотите, чтобы что-то двигалось по странице, меняло цвет, издавало шум, кошка танцевала, да что угодно, вы манипулируете объектом документа HMTL с помощью javascript. Как следует из названия, прослушиватели событий прослушивают событие, а затем что-то делают.
Я надеюсь, что это дало вам простую картину того, на что похож Javascript. Я надеюсь, что это не слишком чуждо, и я надеюсь, что вы присоединитесь ко мне в этом путешествии, чтобы понять основы.
