Это серия статей на простом английском языке без профессионального жаргона, написанная для того, чтобы вдохновить людей, которые рассматривают возможность обучения программированию.
Это также поможет людям, не занимающимся кодированием, но работающим с кодировщиками, понять, что представляет собой процесс создания функции, ее запуска в рабочую среду, развертывания и выпуска в веб-приложении или мобильном приложении.
Ваше собственное портфолио или шаблон веб-сайта с HTML, CSS и JavaScript
В этой статье у вас есть доступ к ручке портфолио, созданному мной бесплатному шаблону, который вы можете использовать и настраивать. Он разработан с использованием HTML, CSS и ванильного JavaScript.
Небольшой совет: потратьте свое время на изучение JavaScript. Если этот проект вас заинтересовал, прочтите документацию и попробуйте другие упражнения от W3 Schools и Mozilla, на обоих сайтах есть отличная документация и бесплатные учебные пособия. Google новые термины, читайте и исследуйте как можно больше.
Если вам нужно вернуться назад, прежде чем начать этот раздел, вот ссылки:
В Часть 1. Итак, вы хотите научиться программировать мы рассмотрим, что мотивирует вас и как научиться программировать.
В Часть 2. Что такое «настоящий язык программирования?» мы исследуем, что такое код, а что нет, и что такое настоящие языки программирования.
В разделе Часть 3 Учитесь кодировать HTML, CSS и JavaScript с помощью трех «ручек» мы учимся, создавая и адаптируя три мини-проекта в HTML, CSS и JavaScript на CodePen. Вам нужно будет выполнить это, чтобы чувствовать себя комфортно в этом разделе, или иметь предварительные знания HTML и CSS.
Первоначально JavaScript был написан и разработан за 10 дней Бренденом Эйхом в 1990-х годах. В нем столько же исключений, сколько и правил. Ему не удавалось завоевать популярность до начала 2000-х годов, и сейчас это самый быстрорастущий язык по популярности и распространению.
Европейская ассоциация производителей компьютеров, ECMA, выступает в качестве органа стандартизации для JavaScript и обновляет шаблоны проектирования JavaScript. ECMA-6, или ES6, было первым крупным обновлением JavaScript. Каждый год с момента добавления новых обновлений часть работы разработчиков состоит в том, чтобы быть в курсе этих изменений, список ревизий до 2020 года находится по этой ссылке.
Как и CSS, основы ванильного JavaScript или JS легко выучить, но трудно освоить. Нет коротких путей, кроме как практиковаться, практиковаться, практиковаться и учиться, учиться, учиться.
Google новые термины и исследовать все, что вы читаете, чтобы наслоить и улучшить свои знания. Везде, где это возможно, я добавил ссылки, чтобы облегчить вам этот процесс.
Сначала начните свой проект с HTML и CSS
Вернитесь в Портфолио ручки. Скопируйте и вставьте HTML и CSS в свое собственное рабочее пространство, сначала создав перо.
Персонализируйте HTML и CSS в соответствии с вашими потребностями. Не бойтесь, это просто текст, измените текст и посмотрите, как он выглядит. Затем измените стиль.
Запустите шеврон анализа HTML, чтобы убедиться в отсутствии синтаксических ошибок. Обратите внимание, что на плату котла были добавлены две внешние библиотеки. Я прокомментировал файл с примечаниями. Если вы хотите писать свои собственные заметки, синтаксис для комментариев следующий:
- HTML ‹! — Оставляйте HTML-комментарии здесь — ›
- CSS /*Напишите здесь комментарии CSS*/
- JavaScript// Напишите здесь комментарии JS
В CSS я пометил разделы CSS-Grid и CSS-FlexBox, они помогают создавать гибкие макеты с помощью комментариев. CSS Tricks — еще один отличный ресурс, если вам нужна документация.
Только когда вы довольны тем, как выглядит страница, вы переходите к разделу JavaScript.
Как JavaScript использует DOM-дерево для изменения поведения тегов и селекторов HTML и CSS
JavaScript может ориентироваться на каждый тег HTML и селектор CSS. Он может ориентироваться на эти теги и селекторы, потому что браузеры читают HTML и CSS и преобразовывают эти файлы в объектную модель документа (DOM).
DOM похож на дерево, представляющее каждую ветвь документа HTML и его стиль CSS. Это DOM-дерево хранится в памяти или кэше компьютера.
На этой иллюстрации из FreeCodeCamp показано, как дерево каскадируется от головы (и метаданных в шаблоне) к телу и всем элементам внутри тегов тела.
JavaScript обращается к этим элементам и использует функции — или блоки кода, набор правил или инструкций — для изменения поведения этих элементов.
Перейдите к Светофорному перу, чтобы эта функция была написана на строке 15.
Функция illuminateGreen(){} возвращает две инструкции. Чтобы отключить свет и перейти к DOM-дереву HTML, найдите элемент с идентификатором «goLight», получите доступ к атрибуту стиля, в частности, чтобы получить доступ к цвету фона и изменить его на зеленый.
Написанная здесь функция или набор инструкций называется объявлением функции. Или описание набора инструкций, которые вы ожидаете от функции.
Чтобы заставить функцию работать, ее нужно вызвать или вызвать для выполнения — или сделать то, что она объявила.
Перейдите к строке 3, здесь мы выбираем из DOM-дерева элемент кнопки HTML по его идентификатору. Когда пользователь нажимает кнопку, функция выполняется, запускается или вызывается.
document.getElementById("goButton").onclick = засветитьзеленый;
Теперь просмотрите все написанные или объявленные функции и посмотрите, где они вызываются. Поймите DOM-дерево и элементы, которые выбираются JavaScript.
Посмотрите, сможете ли вы понять набор инструкций функции clearLights(){}. Посмотрите, где он выполняется, вызывается или запускается.
Вы будете правы, если скажете, что функция вызывается внутри других функций для освещения светофора!
Как JavaScript хранит разные типы данных
JavaScript хранит и изменяет данные с помощью простой силы функций.
Примитивные данные или скалярные значения:
- Строки (слова и буквы), которые распознаются парсерами браузера при использовании одинарных или двойных кавычек «это строка слов», «это тоже строка слов». Используйте любой из них, но оставайтесь последовательными в своей кодовой базе.
- Количественные числа (особенность JavaScript заключается в том, что числа, которые записываются как строки, также распознаются как числа). Порядковые числа (1-й/2-й/3-й) обрабатываются как строки, как и римские цифры (I, II, III).
- Булевы значения — (верные/ложные операторы)
Сложные типы данных:
Массивы, распознаваемые синтаксическими анализаторами с помощью квадратных скобок [], представляют собой набор элементов с нулевым индексом, разделенных запятыми.
Нулевой индекс означает, что первый элемент равен 0, а не 1.
Мы будем использовать массивы для хранения наших изображений в слайдере карусели. Так что ищите их. Они могут хранить строки, числа и логические значения. Изображения хранятся в виде строк. Удивительно, но факт.
- Объекты, распознаваемые синтаксическими анализаторами с помощью фигурных скобок{}.
Они представляют собой неупорядоченный список пар ключ-значение.
{name:'Джо', возраст: 5, взрослый: False, favouriteFood: ['горох', 'фасоль', 'яйца'], {родитель: 'Mr Blog', телефон: 123456}}
Каждый ключ отделяется от его значения двоеточием. Значением может быть любой тип данных — строки, логические значения, числа и даже массивы. В то время как объект может содержать массив, массив не может содержать объект. Объект может даже содержать другой объект, что делает его очень гибким типом данных.
Каждая пара ключ-значение отделяется запятыми. После последней пары ключ-значение — в данном случае другого объекта — запятая не ставится.
JavaScript в действии с простым слайд-шоу изображений
Теперь вернитесь к ручке портфолио и посмотрите на JavaScript.
Для этого раздела я использовал учебник YouTube от Brad Traversy.
Если вы хотите следовать и кодировать вместе с Брэдом, я бы посоветовал вам попробовать. Код был написан в обновлениях ES6 — обратите внимание, как теперь функция назначается переменной для хранения const changeImg = () =› {}.
Ключевое слово «функция» было опущено, а стрелка используется для возврата аргументов функции, которые должны проверять количество элементов (в данном случае изображений) в массиве.
Условный оператор запускает код. Условный оператор — это шаблон проектирования JavaScript, который запускает код в следующем порядке:
если (выполнено какое-то условие){сделать это
} иначе{
сделать это
}
В нашем коде сказано: проверьте длину массива, подсчитав количество элементов по их порядковому номеру.Еслив массиве есть элементы (счетчик элементов останавливается на -1 , указывающее конец количества элементов в массиве) делаем так — добавляем следующий элемент в индекс элементов, обозначенных двойным плюсом++(в этом случае добавьте еще 1 изображение). Иначе вернуться к 0, индексу первого изображения.
Индекс в массиве обозначается квадратными скобками или [index], как в коде в Портфолио-ручке. Он часто обозначается только буквой i, например, [i], как вы увидите в документации школ W3 или Mozilla.
Изображения меняются каждые 2000 миллисекунд или две секунды, вы можете ускорить изменение или замедлить его и посмотреть, как вы хотите, чтобы слайд-шоу функционировало.
Если вы довольны своим сайтом-портфолио и хотите разместить его по URL-адресу (уникальному локатору ресурсов), Часть 5 книги Изучение кода завершает эту серию инструкций о том, как развернуть ваш проект с помощью Netifly — > "следующий"
‹- Предыдущий
Часть 1 — Итак, вы хотите научиться программировать
Часть 2 Что такое «настоящий язык программирования?»
Часть 3 Получайте удовольствие от обучения кодированию HTML, CSS и JavaScript тремя «ручками»
