Js: различия между версиями

Материал из wiki.nntc.nnov.ru
Перейти к навигации Перейти к поиску
 
(не показано 6 промежуточных версий этого же участника)
Строка 1: Строка 1:
[https://nntc-cloud.nntc.nnov.ru/index.php/s/6U3laEqflqXUJjs Актуальная версия исходников по курсу JS]
+
=Что это?=
 +
Это страница результата работы по курсу дополнительного образования ГБОПУ "НРТК" по разработке web-приложения в формате игры "крестики-нолики", используя современную программную платформу nodejs.
 +
 
 +
Краткая суть курса:
 +
 
 +
На курс приходят обучающиеся с нулевыми знаниями в области web-разработки.
 +
 
 +
Сначала их знакомят с основами HTML разметки, CSS стилей и встраивания в страницу сценариев на языке JavaScript.
 +
 
 +
Следующим шагом обучающихся знакомят с основами алгоритмизации и программирования "в общем" и основными алгоритмическими конструкциями "в частности", выполняя примеры на языке JavaScript прямо в отладочной консоли браузера
 +
 
 +
Следующим шагом является связывание понятий интерфейса, оформленного посредством HTML/CSS, и событийной модели браузера. На чистом JavaScript обучающиеся учатся отлавливать события на странице и реагировать на них посредством выполнения функций обратного вызова JavaScript
 +
 
 +
По результатом совокупности полученных знаний обучающиеся под контролем преподавателя разрабатывают простую игру "крестики-нолики" (на чистом JavaScript/HTML/CSS)
 +
 
 +
Далее преподавателем даётся краткая инструкция по созданию серверной части приложения для запуска клиентского криложения на базе фреймворка express для платформы nodejs. В результате страница становится доступной в формате самостоятельного web-приложения. На этом заканчивается первый этап разработки
 +
 
 +
На втором этапе разработки преподаватель знакомит обучающихся с библиотеками jquery и bootstrap и начинается процесс рефакторинга кода игры и интерфейса с их использованием.
 +
 
 +
По завершению процесса рефакторинга даются необходимые знания о работе с локальным хранилищем браузера и реализуется функция сохранения результатов и игры на уровне браузера с возможностью очистки.
 +
 
 +
=Ссылки=
 +
 
 +
Проекты за все 10 занятий курса в хронологическом порядке: [https://nntc-cloud.nntc.nnov.ru/index.php/s/Rehia0citPOuYDh загрузить]
 +
 
 +
Итоговый проект: [[Файл:nodejs_game.zip]]
 +
 
 +
=Как запустить итоговую работу=
 +
==Установка платформы nodejs и пакетного менеджера npm==
 +
===В ОС Windows===
 +
 
 +
Шаг 1: С сайта https://nodejs.org загрузить и установить файл инсталлятора с расширением '''msi'''
 +
Шаг 2: В режиме администратора выполнить установку загруженного файла, следуя инструкциям мастера установки
 +
Шаг 3: Загрузить архив с итоговой версией отсюда: [[Файл:nodejs_game.zip]]
 +
Шаг 4: Распаковать загруженный архив и перейти в каталог с файлом '''app.js'''
 +
Шаг 5: В каталоге с файлом '''app.js''' выполнить команду '''npm install''' (из cmd)
 +
Шаг 6: После завершения работы команды '''npm install''' запустить приложение командой '''node app.js''' (не закрывать командную строку)
 +
Шаг 7: Открыть в браузере адрес: http://localhost:3000
 +
 
 +
===В ОС На базе GNU/Linux===
 +
 
 +
Шаг 1: Установить из репозитория пакет '''npm'''
 +
Шаг 2: В режиме суперпользователя выполнить команду '''npm install n -g''' (поставится менеджер версий nodejs по имени '''n''')
 +
Шаг 3: В режиме суперпользователя выполнить команду '''n lts''' (поставится актуальная версия nodejs с длительной поддержкой)
 +
Шаг 3: Загрузить архив с итоговой версией отсюда: [[Файл:nodejs_game.zip]]
 +
Шаг 4: Распаковать загруженный архив и перейти в каталог с файлом '''app.js'''
 +
Шаг 5: В каталоге с файлом '''app.js''' выполнить команду '''npm install''' (из терминала)
 +
Шаг 6: После завершения работы команды '''npm install''' запустить приложение командой '''node app.js''' (не закрывать командную строку)
 +
Шаг 7: Открыть в браузере адрес: http://localhost:3000
 +
 
 +
=Что можно улучшить в системе?=
 +
 
 +
Первое: В разделе истории игр нужно не показывать таблицу и кнопку очистки, если записей нет.
 +
Вместо этого нужно показать уведомление пользователю
 +
 
 +
Второе: Переделать все alert-ы на красивые уведомления в стиле bootstrap
 +
 
 +
Третье: Переделать форму ввода игроков и дать возможность выбора символа (крестик или нолик), например, случаынйм образом, или вручную
 +
 
 +
Четвёртое: В мобильном режиме адаптировать размер таблицы под квадратную область, ограниченную шириной браузера мобильного устройства
 +
 
 +
Пятое: Реализовать смену стилевого оформления (тёмная и светлая темы)
 +
 
 +
Шестое: Заменить сохранение истории с хранилища браузера на хранилище на стороне сервера
 +
 
 +
Пятое: придумать по вкусу

Текущая версия на 13:22, 28 декабря 2018

Что это?

Это страница результата работы по курсу дополнительного образования ГБОПУ "НРТК" по разработке web-приложения в формате игры "крестики-нолики", используя современную программную платформу nodejs.

Краткая суть курса:

На курс приходят обучающиеся с нулевыми знаниями в области web-разработки.

Сначала их знакомят с основами HTML разметки, CSS стилей и встраивания в страницу сценариев на языке JavaScript.

Следующим шагом обучающихся знакомят с основами алгоритмизации и программирования "в общем" и основными алгоритмическими конструкциями "в частности", выполняя примеры на языке JavaScript прямо в отладочной консоли браузера

Следующим шагом является связывание понятий интерфейса, оформленного посредством HTML/CSS, и событийной модели браузера. На чистом JavaScript обучающиеся учатся отлавливать события на странице и реагировать на них посредством выполнения функций обратного вызова JavaScript

По результатом совокупности полученных знаний обучающиеся под контролем преподавателя разрабатывают простую игру "крестики-нолики" (на чистом JavaScript/HTML/CSS)

Далее преподавателем даётся краткая инструкция по созданию серверной части приложения для запуска клиентского криложения на базе фреймворка express для платформы nodejs. В результате страница становится доступной в формате самостоятельного web-приложения. На этом заканчивается первый этап разработки

На втором этапе разработки преподаватель знакомит обучающихся с библиотеками jquery и bootstrap и начинается процесс рефакторинга кода игры и интерфейса с их использованием.

По завершению процесса рефакторинга даются необходимые знания о работе с локальным хранилищем браузера и реализуется функция сохранения результатов и игры на уровне браузера с возможностью очистки.

Ссылки

Проекты за все 10 занятий курса в хронологическом порядке: загрузить

Итоговый проект: Файл:Nodejs game.zip

Как запустить итоговую работу

Установка платформы nodejs и пакетного менеджера npm

В ОС Windows

Шаг 1: С сайта https://nodejs.org загрузить и установить файл инсталлятора с расширением msi
Шаг 2: В режиме администратора выполнить установку загруженного файла, следуя инструкциям мастера установки
Шаг 3: Загрузить архив с итоговой версией отсюда: Файл:Nodejs game.zip
Шаг 4: Распаковать загруженный архив и перейти в каталог с файлом app.js
Шаг 5: В каталоге с файлом app.js выполнить команду npm install (из cmd)
Шаг 6: После завершения работы команды npm install запустить приложение командой node app.js (не закрывать командную строку)
Шаг 7: Открыть в браузере адрес: http://localhost:3000

В ОС На базе GNU/Linux

Шаг 1: Установить из репозитория пакет npm
Шаг 2: В режиме суперпользователя выполнить команду npm install n -g (поставится менеджер версий nodejs по имени n)
Шаг 3: В режиме суперпользователя выполнить команду n lts (поставится актуальная версия nodejs с длительной поддержкой)
Шаг 3: Загрузить архив с итоговой версией отсюда: Файл:Nodejs game.zip
Шаг 4: Распаковать загруженный архив и перейти в каталог с файлом app.js
Шаг 5: В каталоге с файлом app.js выполнить команду npm install (из терминала)
Шаг 6: После завершения работы команды npm install запустить приложение командой node app.js (не закрывать командную строку)
Шаг 7: Открыть в браузере адрес: http://localhost:3000

Что можно улучшить в системе?

Первое: В разделе истории игр нужно не показывать таблицу и кнопку очистки, если записей нет.
Вместо этого нужно показать уведомление пользователю
Второе: Переделать все alert-ы на красивые уведомления в стиле bootstrap
Третье: Переделать форму ввода игроков и дать возможность выбора символа (крестик или нолик), например, случаынйм образом, или вручную
Четвёртое: В мобильном режиме адаптировать размер таблицы под квадратную область, ограниченную шириной браузера мобильного устройства
Пятое: Реализовать смену стилевого оформления (тёмная и светлая темы)
Шестое: Заменить сохранение истории с хранилища браузера на хранилище на стороне сервера
Пятое: придумать по вкусу