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

Материал из wiki.nntc.nnov.ru
Перейти к навигации Перейти к поиску
(Что это?)
Строка 4: Строка 4:
 
Краткая суть курса:
 
Краткая суть курса:
  
На курс приходят обучающиеся с нулевыми знаниями в области web-разработки.
+
На курс приходят обучающиеся с нулевыми знаниями в области web-разработки.
  
 +
Сначала их знакомят с основами HTML разметки, CSS стилей и встраивания в страницу сценариев на языке JavaScript.
  
Сначала их знакомят с основами HTML разметки, CSS стилей и встраивания в страницу сценариев на языке JavaScript.
+
Следующим шагом обучающихся знакомят с основами алгоритмизации и программирования "в общем" и основными алгоритмическими конструкциями "в частности", выполняя примеры на языке JavaScript прямо в отладочной консоли браузера
  
+
Следующим шагом является связывание понятий интерфейса, оформленного посредством HTML/CSS, и событийной модели браузера. На чистом JavaScript обучающиеся учатся отлавливать события на странице и реагировать на них посредством выполнения функций обратного вызова JavaScript
Следующим шагом обучающихся знакомят с основами алгоритмизации и программирования "в общем" и основными алгоритмическими конструкциями "в частности", выполняя примеры на языке JavaScript прямо в отладочной консоли браузера
 
 
 
 
 
Следующим шагом является связывание понятий интерфейса, оформленного посредством HTML/CSS, и событийной модели браузера. На чистом JavaScript обучающиеся учатся отлавливать события на странице и реагировать на них посредством выполнения функций обратного вызова JavaScript
 
 
 
 
 
По результатом совокупности полученных знаний обучающиеся под контролем преподавателя разрабатывают простую игру "крестики-нолики" (на чистом JavaScript/HTML/CSS)
 
 
 
 
 
Далее преподавателем даётся краткая инструкция по созданию серверной части приложения для запуска клиентского криложения на базе фреймворка express для платформы nodejs. В результате страница становится доступной в формате самостоятельного web-приложения. На этом заканчивается первый этап разработки
 
  
 +
По результатом совокупности полученных знаний обучающиеся под контролем преподавателя разрабатывают простую игру "крестики-нолики" (на чистом JavaScript/HTML/CSS)
  
 +
Далее преподавателем даётся краткая инструкция по созданию серверной части приложения для запуска клиентского криложения на базе фреймворка express для платформы nodejs. В результате страница становится доступной в формате самостоятельного web-приложения. На этом заканчивается первый этап разработки
  
 +
На втором этапе разработки преподаватель знакомит обучающихся с библиотеками jquery и bootstrap и начинается процесс рефакторинга кода игры и интерфейса с их использованием.
  
 +
По завершению процесса рефакторинга даются необходимые знания о работе с локальным хранилищем браузера и реализуется функция сохранения результатов и игры на уровне браузера с возможностью очистки.
  
 
=Ссылки=
 
=Ссылки=

Версия 13:14, 28 декабря 2018

Что это?

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

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

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

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

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

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

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

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

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

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

Ссылки

Актуальная версия исходников по курсу JS

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

Установка платформы 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