«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Когда-то я изучил основы языка 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.

При неправильной настройке файла .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>

Это не очень хороший способ. Смотрите здесь. Используется редко/в исключительных случаях.

Далее о переменных и способах их объявления.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 1
Начало работы - Редактор Visual Studio Code - Плагин JShint
131
Способы объявления переменных - Ключевые слова let, const и var
133
Стандарт ES6 - Директива use strict - Строгий режим и стиль кода
78
Простые типы данных – Числа и строки – null и undefined
108
Объекты и массивы - Комплексные типы данных
103
Взаимодействие с пользователем – Методы alert, confirm и prompt
102
Интерполяция и конкатенация – Способы построения строк
167
Основные операторы - Унарный плюс – Сравнение и равенство
78
Инкремент и Декремент - Префиксная и Постфиксная формы записи
53
Работа с системой контроля версий GIT и сервисом GITHub
117
Работа с GitHub на разных компьютерах – Команды git clone и git pull
50
Практика часть 1 – Способы добавления свойств в объект
27
Условия if else - Конструкция switch case - Тернарный оператор
25
Циклы while и for - Операторы break и continue
36
Практика часть 2 – Циклы и Условия
11
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки