Далее на странице...
Когда-то я изучил основы языка JavaScript и не знал, что делать дальше. Как его применить на практике? Об этом я писал здесь.
Я написал код для игры морской бой и прежде чем двигаться дальше решил переделать этот сайт: сделал его адаптивным, изменил дизайн, в чем-то навигацию. На это ушло немало времени.
Недавно я решил вернуться к языку JavaScript и приступил к обзору англоязычного курса. Небольшая часть его отражена в разделах НЕ Рунет - Часть 1 и НЕ Рунет - Часть 2. Но со временем понял, что прохождение курса на иностранном языке займет слишком много времени.
Кроме этого рекомендации статьи (которым я следовал), как изучать JavaScript: делюсь своим опытом, не во всем справедливы. В частности, в ней говорится о том, что на просторах РУнета нет курсов и преподавателей достойных внимания. Думаю, что на сегодняшний день это не верная информация. Хотя возможно когда-то так и было.
Есть хороший сайт learn.javascript.ru и на мой взгляд замечательный курс Полный курс по JavaScript + React - с нуля до результата на сайте udemy.com. Автор Иван Петриченко.
Мне нравится то как Иван ведет курс и как преподносит материал. А сравнить мне есть с чем. Поэтому сейчас я решил остановится на нем. К англоязычному курсу я буду возвращаться, но позже. Думаю, что он еще пригодится и будет полезен.
Что понадобится для работы?
Первое, что нам потребуется – это редактор Visual Studio Code и программная платформа Node.js. Установить это программное обеспечение легко и трудностей здесь быть не должно.
Что касается настройки редактора Visual Studio Code, то здесь есть ссылка на статью о подробной настройке и установке плагинов для начинающих.
Установка плагинов для VCcode
Список необходимых плагинов:
- All Autocomplete
- Auto Close Tag
- Auto Complete Tag
- Auto Rename Tag
- Beautify
- Code Runner
- Import Cost
- JavaScript (ES6) code snippets
- JShint
- Live Server
- Multiple clipboards for VSCode
- Reactjs code snippets
- Sass
- Theme - Oceanic Next
- vscode-icons
- ESLint
Плагин JShint - Терминал Windows PowerShell
Для чего нужен плагин jshint?
Он помогает избежать ошибок в коде при работе в редакторе Visual Studio Code. Ошибки совершают все. Не только начинающие разработчики.
Итак, после установки плагина JShint его необходимо настроить, чтобы он правильно работал.
Для этого:
1. Должна быть установлена среда Node.js.
2. Устанавливаем npm (англ. Node Package Manager) — менеджер пакетов, входящий в состав Node.js.
Для этого:
-
открываем терминал. Для пользователей ОС Window необходимо вызвать командную строку комбинацией клавиш WIN + R и в ней набрать команду PowerShell. Так мы попадаем в окно терминала Windows PowerShell. Терминал есть и в редакторе Visual Studio Code. Для работы подойдет любой вариант.
-
В терминале вводим команду npm install -g jshint. Возможно, для выполнения этой команды потребуется ввести пароль, который установлен в системе. Если пароль не показывается, то его придется ввести вслепую и нажать Enter.
После выполнения этих действий плагин JShint должен нормально работать. Теперь если мы забудем поставить точку с запятой или совершим какую-либо другую ошибку в коде, то проблемные места будут выделяться волнистой линией, а во вкладке PROBLEMS редактора VScode будут отображаться такие сообщения об ошибках:
- "Missing semicolon. (W033) jshint(W033)[12,17]" - jshint сообщает, что в строке 12, позиция 17 пропущена точка с запятой;
- "'result' is not defined. (W117) jshint(W117)[15,13]" - переменная result не определена.
Подробнее о плагине JShint - Файл .jshintrc
После того, как плагин JShint установлен и работает желательно его до настроить, так как по умолчанию он работает по старым стандартам.
Итак, для оптимизации работы плагина JShint необходимо создать файл .jshintrc (обратите внимание файл начинается с точки) со следующим содержимым:
{
"camelcase" : true,
"indent": 2,
"undef": true,
"quotmark": false,
"maxlen": 120,
"trailing": true,
"curly": true,
"strict": false,
"browser": true,
"devel": true,
"jquery": true,
"esversion": 9,
"node": true
}
Это оптимальные настройки файла .jshintrc. Подробнее о структуре этого файла будет сказано в дальнейшем. А пока вот ссылка на документацию файла .jshintrc.
Стоит сказать, что плагин JShint и его файл настроек .jshintrc не только выявляют ошибки в коде, но и влияют на формирование стиля проекта.
Например, параметр "maxlen": 120 говорит о том, что максимальная длина строки составляет 120 символов.
Теперь о том, где располагать файл настроек .jshintrc?
Либо файл .jshintrc следует поместить в корневую папку конкретного проекта. Это локальная настройка. В этом случае к данному проекту будут применяться настройки именно этого файла .jshintrc.
Неверная настройка или отсутствие фала .jshintrc.
При неправильной настройке файла .jshintrc, его отсутствии или неверном расположении, во вкладке PROBLEMS редактора Visual Studio Code будут отображаться подобные сообщения:
- 'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104) - 'let' доступна в версии ES6;
- 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104) - 'const' доступна в версии ES6.
Если быть внимательным, то настройка плагина JShint проходит успешно.
Как подключить JavaScript к странице
Теперь немного о том, как подключить JavaScript к странице?
1. Внешний js-файл - основной способ
<script src="js/script.js"></script>
Подробнее об этом читайте здесь.
2. Внутренние скрипты
<script>
alert(1);
</script>
Используются для небольших скриптов, но не в реальных проектах. Об этом способе работы со скриптами JavaScript читайте здесь.
3. Подключение скрипта/вызов функции через атрибут onclick.
<p onclick = "">Hellow world</p>
Это не очень хороший способ. Смотрите здесь. Используется редко/в исключительных случаях.
Далее о переменных и способах их объявления.
