Освоение основ
вступление
Как дела, команда! Поздравляем с первыми шагами в изучении нового навыка, который потенциально может изменить ваш мир к лучшему. Изучение JS и языков программирования в целом дает вам возможность подходить к проблемам более систематически, а значит, более эффективно. Изучение языка меняет вашу парадигму мышления к лучшему и, возможно, может дать вам возможность полностью изменить траекторию карьеры. Кроме того, наличие этого уникального набора навыков позволяет вам быстро создавать программы с нуля, которые могут быть полезны вам или вашим друзьям, вместо того, чтобы ждать и надеяться, что кто-то сделает это за вас. Давайте начнем!
01 Типы языков
Что такое Javascript?
часто сокращенно JS, представляет собой язык программирования, соответствующий спецификации ECMAScript. JavaScript является высокоуровневым, часто компилируемым точно в срок и мультипарадигмальным. Он имеет синтаксис с фигурными скобками, динамическую типизацию, объектную ориентацию на основе прототипов и первоклассные функции [1].
Пример использования проекта
Цель этого раздела — напомнить вам, что каждый проект уникален по проблемам, которые он приносит. Таким образом, каждый проект должен быть сопряжен с наиболее подходящим языком для решения задач, связанных с самим проектом. Есть несколько языков, о которых можно спорить о пятерке самых известных:
- Python (мой первый язык)
- Javascript
- Ява
- Быстрый
- Программирование на С
Каждый из этих 5 лучших языков имеет свои собственные уникальные фреймворки (мы расскажем об этом позже) и лучше или хуже решают различные проблемы. Понимание того, что существуют различные языки и фреймворки для каждого языка, даст вам ноу-хау для создания вашего приложения с помощью соответствующих инструментов.
Дополнительно
Во время вашего путешествия по JS вам следует подумать о том, чтобы часто посещать этот сайт ниже, чтобы получить представление о фреймворках, пакетах и модулях, которые можно использовать для облегчения создания вашего проекта. Не нужно изобретать велосипед, и быстрый поиск в Google тоже поможет.
https://www.javascripting.com/
02 Настройка вашей среды
Установка VSCode
Это будет ваше введение в IDE. Это причудливая аббревиатура, которая в основном позволяет вам визуально видеть ваш код и структуру папок проекта. Это позволяет легко создавать, и большинство IDE предлагают плагины, которые делают весь процесс намного более плавным. Перейдите на сайт ниже и загрузите файл в соответствии с вашей ОС.
Как только вы запустите его, мы создадим новый проект, который направит нас в новую пустую папку проекта.
Предупреждение: существует множество IDE, но я использую именно эту, поэтому, чтобы сделать процесс обучения программированию менее сложным, я бы рекомендовал использовать ту же платформу.
Вот некоторые из плагинов, которые я хотел бы, чтобы вы рассмотрели для загрузки:
- Красивый код
- Цвета скобок
- JS-сниппеты
- Фрагменты Jquery
- HTML-шаблон
- Живой сервер
Варианты среды кодирования
Я хотел быстро подчеркнуть этот раздел, сообщив вам, что если вы будете смотреть учебники в будущем, относящиеся к JS или другим языкам, помните, что каждая среда отличается. Блин, есть 4 распространенных способа настройки базовой среды HTML/CSS/JS. Люди могут использовать командную строку, необработанные файлы и папки, загрузки GIT или любую их комбинацию. Так что НЕ сбивайтесь с толку из-за разных сред, особенно если вы пролистываете другие руководства по JS в дополнение к этому. Не нужно паниковать.
Наше окружение
Мы собираемся настроить среду для нашей первой программы. Это будет предельно просто.
Во-первых, нам нужно создать новый файл. Файл может называться как угодно, НО мы должны заканчивать его .HTML. Наилучшие методы предполагают, что вы называете первый файл индексом. Итак, например, мы создаем файл index.html в корневой папке проекта.
Теперь щелкните правой кнопкой мыши и запустите на живом сервере. Он ДОЛЖЕН открыть новую вкладку в вашем веб-браузере, и все, что вы увидите, это пустой экран.
Первое приложение
Теперь, когда мы настроили нашу среду, мы будем использовать этот «магический код» из плагина, который мы скачали ранее.
в вашем новом файле index.html введите HTML. Он должен предлагать шаблон HTML, когда вы нажимаете Enter. Это автоматически заполнит код. Это должно выглядеть примерно так:
и после того, как вы нажмете Enter, должно выглядеть так:
Теперь мы будем использовать теги ‹h1›‹/h1› для создания заголовка.
<h1> Hello </h1>
Не беспокойтесь о шаблонном коде для HTML. Цель этого курса — понять JS, а не HTML. Мы рассмотрим больше концепций HTML во втором разделе «Умеренный», но если вам интересно, обязательно ознакомьтесь с дополнительными ресурсами ниже для получения дополнительной информации о языке HTML; что это такое и как это работает. Это действительно простой язык.
Инструменты разработчика
У каждого браузера (за исключением проводника, я думаю) есть свои инструменты разработки. Я использую Chrome, и это так же просто, как щелкнуть правой кнопкой мыши и нажать «Проверить». Увидеть ниже:
Теперь в инструментах разработчика у вас есть вкладка «Элементы», которая отображает элементы DOM (обычно на основе HTML), и если вы щелкнете тег консоли, то вся магия js станет видимой. Мы часто будем в журнале консоли.
Упражнение
Теперь, когда у нас есть что-то, отображаемое на нашем, мы собираемся создать наше первое веб-приложение.
в нашем файле index.html мы будем использовать так называемые теги сценария. Еще раз это концепция HTML. Не сбивайтесь с толку. Основное внимание уделяется js, а не HTML, но все, что вам нужно знать на данный момент, это то, что теги сценария позволяют пользователю размещать код js в файле, который будет использоваться на сайте.
JS — отличный инструмент для манипулирования DOM (элементами HTML), например добавления текста, отображения/скрытия контента, изменения цвета при кликах и т. д. Благодаря этому вы можете визуально увидеть js в действии, но часто JS работает за кулисами. Давайте посмотрим, что я имею в виду.
Добавьте этот код в теги body:
[Код ВС]
Как только вы нажмете «Сохранить» и перейдете на вкладку «Сайт», вы заметите, что ничего не изменилось. Мы по-прежнему видим «привет», но больше ничего. Однако, если мы откроем наш журнал консоли с помощью инструментов разработчика, мы увидим, что «Hello World» был зарегистрирован на консоли!!!!
Метод console.log() позволяет нам незаметно записывать в консоль слова, числа, данные и любой другой объект, о котором вы только можете подумать (об этом вы узнаете далее). Это чрезвычайно полезно, когда вы работаете с ошибками и данными в своем приложении. В этом разделе мы рассмотрим обе концепции.
ПОЗДРАВЛЯЕМ. Я знаю… это кажется антиклиматическим, но вы подали свою первую заявку.
Как упоминалось ранее, каждое приложение имеет разные среды. Теперь JS в основном известен как веб-язык, поэтому чаще всего вы создаете проект JS, который будет выглядеть примерно так. Некоторые файлы HTML, некоторые файлы CSS и, конечно же, некоторые файлы JS. В следующих частях мы создадим несколько базовых приложений, чтобы помочь вам лучше понять и визуализировать эти основные концепции JS. А пока удачного кодирования и до встречи в следующей статье!
Дополнительные ресурсы:
использованная литература
[1] JavaScript, Википедия, 27 апреля 2020 г. [Онлайн]. Доступно: https://en.wikipedia.org/wiki/JavaScript. [Доступ: 27 апреля 2020 г.].
Спасибо за чтение! Если вам понравилась эта статья, не забудьте поаплодировать нам внизу! Это много значит для меня, и это помогает другим людям увидеть историю.
Свяжитесь со мной:
Инстаграм| Твиттер| Ютуб| "Групповой чат"
Сценарист: Ангел Мондрагон.
