Довольно часто новички изо всех сил пытаются понять концепции и методы не только в JavaScript, но и в начале программирования в целом. Хотя можно выучить язык и использовать его, просто изучая синтаксис, просматривая учебные пособия и т. д., понимание и упрощение того, как все это работает за кулисами, — вот что заставляет начинающих и даже более опытных программистов быть уверенными в своих навыках и способностях. прогрессировать дальше.
Изучение языка программирования может быть сложным и поначалу может показаться пугающим. Этот пост предназначен для абсолютных новичков в понимании основных принципов JavaScript и делает их менее пугающими, чтобы сразу же начать и действительно понять код, который они пишут.
Мы рассмотрим JavaScript с точки зрения клиентской части (внешней части), но JS может быть внешней и внутренней частью.
Сосредоточьтесь на создании реальных вещей и переходе на следующий уровень по мере прохождения. Думайте об этом как о кубиках LEGO — собирайте их, разбирайте, играйте с ними. Персонализируйте его, оставьте беспокойство за дверью и создайте что-нибудь классное.
Идентификаторы и классы
Будучи уже знакомым с HTML и CSS, вы сталкивались с идентификаторами и классами. Вместо того, чтобы использовать их только для стилизации определенных элементов и компонентов, JavaScript позволяет нам нацеливаться на эти идентификаторы или классы, добавлять интерактивность и управлять их поведением, прослушивая клики, добавляя элементы и удаляя элементы… почти все, о чем вы могли подумать, мы может сделать с JavaScript.
Синтаксис
Теперь у каждого языка программирования есть свои особые правила «орфографии и грамматики», которые мы называем синтаксисом. Хотя увидев это в первый раз, у людей начинается паническая атака, они закрывают его и никогда больше не возвращаются. Это кажется слишком сложным, а для некоторых может быть ошеломляющим.
Дело в том, что это пока не должно иметь смысла. Особенно, если у вас нет большого опыта программирования. Что вам нужно сделать, так это ввести его, поиграть с ним, сломать, удалить и повторить все заново. Вот как вы начинаете замечать закономерности, и это все, что нужно для программирования на раннем этапе — распознавание закономерностей. Со временем вы начнете узнавать больше таких паттернов, находить новые «строительные блоки» и начнете создавать более сложные вещи. То, чего вы хотите избежать на раннем этапе, — это зацикленность на том, как называются вещи, попытки запомнить все, что вы видите ... терминология сейчас не имеет значения. Лучше создавать что-то новое, чем три часа листать MDN.
При этом давайте посмотрим на JavaScript.
Переменные
Мы можем сказать нашей программе, чтобы она запоминала значения для дальнейшего использования, и мы можем сделать это с помощью переменных.
let age = 20
пусть возраст-декларация
возраст = 20- задание
Думайте об этом как о информационных корзинах. Мы создаем ведро, даем ему имя (объявление) и помещаем в него что-то (назначение).
Это все, что делают переменные. Создавайте блоки данных, и в какой-то момент в будущем мы сможем вернуться и использовать их.
let — одно из специальных (резервных) слов, которые JavaScript ищет и понимает. Когда он видит let, в JS срабатывает сигнал тревоги, сообщающий, что кто-то пытается создать корзину данных. Он создает пространство в памяти, и мы, по сути, создали новое пространство в памяти, называемое возрастом, и сохранили значение 20 в этом пространстве.
Теперь предположим, что мы хотим сохранить местоположение — создайте для него корзину.
В этом случае шагом объявления будет let location (создание нового пространства в памяти с именем location
Шагом назначения будет location = «London», и мы также можем записать его вместе как let location = “London"
Теперь мы действительно можем начать использовать эти вещи, которые мы сохранили в памяти. Я могу сказать «Дейв в возрасте, Дэйв в локации». Мы пытаемся использовать эти переменные, и он говорит "Дэйву 25, Дэйв в Лондоне".
По мере продвижения — по мере того, как Дейв становится старше и перемещается, мы можем изменять эти значения, не меняя фактического использования. Мы можем использовать эти переменные в любой точке нашей программы, изменять их, вычитать или добавлять к ним и практически все, что вы хотите с ними делать.
Переменные и типы данных
До сих пор мы видели два типа данных:
Числа — 20
Строка (просто причудливый способ сказать текст) — Лондон
Строка всегда заключена в кавычки — одинарные или двойные — или в галочки (`), но сейчас мы сосредоточимся на кавычках.
Какие бы кавычки вы ни использовали снаружи, вы не можете использовать их внутри (без некоторых трюков).
Например, пытаясь использовать двойные кавычки снаружи и внутри строки, мы столкнемся с некоторыми проблемами.
Получаем две отдельные строки. То, что попытается сделать JavaScript, — это найти переменную с именем «перемещено», и мы получим ошибку, потому что в памяти нет ничего с именем «перемещено» — мы не объявили это.
Теперь мы можем указать JS игнорировать эти кавычки, используя обратную косую черту перед каждой из них, и мы можем сделать то же самое с одинарными кавычками.
Числа и арифметика
Числа представляют числовые данные, они могут быть целыми числами и числами с плавающей запятой, положительными или отрицательными по значению.
интервал: +6
поплавок: -5.12385
Арифметические операторы — это те, которые обрабатывают нашу математику. На самом деле вам не нужна математика, чтобы быть полноценным разработчиком, но нам нужна базовая арифметика.
Условные
Логические операторы, используемые для принятия решений и сравнений
Имея в виду, что один знак равенства используется только для присваивания, а два или более используются при сравнении значений и типов.
Условный синтаксис
if (condition is true) { // do this thing } else if (condition is true) { // do this other thing } else { // default thing }
У вас может быть столько других «если», сколько вы хотите, и как только вы наткнетесь на что-то, что является правдой, оно запустится и остановится. Дальше не проверяет.
Оператор Else является «по умолчанию», запасным вариантом, если ни одно из условий не выполняется.
const food = "pizza" if (food === "cheeseburger") { console.log("Not bad") } else if (food === "pizza") { console.log("Dominos!") } else { console.log("Are you even trying?") }
В данном случае мы использовали const
вместо let. Использование const
означает, что мы не сможем его переназначить. Это означает, что в этом случае едой всегда будет пицца и ничего больше.
Несколько условий
Мы также можем использовать аналогичный синтаксис для одновременной проверки нескольких условий.
if (name === "Tony" && state === "captured") { //Build a mechanised suit of armour }
- если его зовут Тони И он схвачен для создания оружия массового уничтожения, он строит бронированный костюм.
if (day === "Saturday" || day === "Sunday") { //It is the weekend }
- если это суббота ИЛИ воскресенье, это означает, что это выходные
В следующий раз мы пройдемся по некоторым реальным программам и увидим их в действии, но вы можете увидеть несколько примеров на моем GitHub, если хотите поиграть с ними!