Курс по front-end разработке в it-univer18

Обсуждаем разработку программного обеспечения

Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 15:15

Начал читать бесплатный курс "front-end разработка" в русле программы http://www.it-univer18.ru/

Что такое разработчик front-end
Разработчик front-end – это программист, который умеет быстро делать сложный GUI на javascript.
Это не человек, который умеет только верстать! Это – программист, который умеет программировать!
Это может быть не тот программист, который умеет программировать сложные алгоритмы, обработку большого объёма данных etc – но программировать уметь нужно!

Как правило, front-end разработчик пользуется:
  1. Jquery ( https://jquery.com/ ) и UI для него (https://jqueryui.com/ )
  2. Requirejs (http://requirejs.org/ )
  3. Underscore (http://underscorejs.org/ )
Часто front-end разработчик пользуется одной из систем:
Минимум, который необходимо знать на начало курса
  1. html с использованием div-ов
  2. css
  3. уметь программировать на любом c-подобном языке программирования
  4. английский язык в объёме, необходимом для чтения технической документации
Чему обучающиеся должны научиться за время курса
  1. верстать «сложные» страницы, так, чтобы их было потом удобно изменять
  2. пользоваться библиотекой jquery
  3. Понимать концепцию Model/Controller/View
  4. готовить html-шаблоны страниц (в стиле underscore)
  5. пользоваться file/module loader ом (requirejs, almond)
  6. создавать динамически изменяемые страницы
  7. обращаться к внешним сервисам через AJAX
  8. пользоваться системой контроля версий GIT
  9. писать тесты на свои js интерфейс
Что обучающиеся получат в конце курса
  1. Представление о предмете
  2. Возможность подавать заявление на соискание должности front-end разработчик
  3. Возможность указать в резюме ссылку на «учебный проект»
Чего хочет образовательная структура в конце курса
  1. Чтобы обучающиеся поняли надо им это или это не про них
  2. Чтобы не было стыдно за строчку «прошёл обучение frontend-разработке в нашей структуре»
  3. Лучших хочется сразу забрать на работу
  4. Успешно дошедшие до конца получат красивую бумажку о прохождении курса
Как будет строиться курс
  1. Теория будет даваться в самом минимальном объёме, необходимом для понимания терминов «на пальцах»
  2. Основной объём знаний обучающиеся должны получать самостоятельно, читая документацию
  3. Для освоения знаний каждому будет дано отдельное небольшое задание, которое необходимо будет выполнить к завершению курса
  4. Основное время преподаватель потратит на ответы на конкретные вопросы, помощь обучающимся и возможно показу того, как это нужно делать.
Предлагаемые темы учебных проектов
  1. Ввод данных о банковских счетах предприятия
  2. Универсальный импорт из таблицы
  3. Ввод требований кредитора
  4. Ввод адреса
  5. Ввод счёта-фактуры
  6. Заявление о банкротстве физика - http://bankrot.me/bankrotform/index
Вложения
frontend.zip
(1.53 MiB) Скачиваний: 585
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 16:02

На первом занятии я просто попросил сверстать то, что дал в качестве примеров

сегодня первое задание
2 этап

Научиться выделять шаблоны html
  1. Завести второй html у которого в body не будет ничего кроме
    Код: выделить все
    <div class="my-control">Тут должен быть мой элемент</div>
  2. От первого html оставить только то что внутри body + css стили если есть
  3. Во второй html добавить подключение jquery
  4. Методами jquery из второго шаблона загрузить первый и вставить его содержимое в div.my-control
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 16:13

3 этап:

Использовать первый шаблон как underscore шаблон
1. Подключить underscore.js
2. Сформировать из первого html шаблон
3. Методами jquery результат применения второго шаблона с аргументом вставить в содержимое в div.my-control
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 16:25

у кого то проблемы уже на этапе подключения js скрипта

вот так он подключается:

Код: выделить все
<script type="text/javascript" src="jquery.js"></script>
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 16:41

читаем доку по функциям:
  1. https://api.jquery.com/ready/
  2. https://api.jquery.com/jquery.get/
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 17:28

4 этап:

Js код который размещает реьд внутри div вынести в отдельный файл, подключить и выполнить его при помощи requirejs
  1. Написать отдельный js файл с вызовом define
  2. Подключить require.js
  3. Вызвать require
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 17:36

excel хочется экспортировать такого вида как во вложении
но можно представить что они откуда то взялись..
и в js коде уже есть как

Код: выделить все
[
  ["","Иванов","Иван","Иванович","М","Кладовщик","322223","20.01.1958","1.3.2.1.;1.3.8.1.;4.1.","","8","кладовая","старший кладовщик","д.Шушмабаш","д.Шушмабаш", "1", "94 03", "026288", "20.12.2002", "УВД г. Воткинска Удмуртской Республики", "1852710822000262", "Филиал ОАО Медицинское страхование г. Перми", "Больница №3", "ничо так"]
,["063-679-677-13","Петров ","Сергей","Набиевич","М","Протравитель семян","","08.05.1963","1.3.2.1.;1.3.8.1.,4.1.,2.7.","","","","","с.Сердебаш","с.Сердебаш","","9567", "123 456"]
,["","Сидоров ","Илья","Илтузарович","М","Кладовщик","","02.04.1971","1.3.2.1,1.3.8.1.,4.1.","","","","","с.Нуса","с.Нуса","","95-67", "123-456"]
,[]
,["","1","1","1","ж","Инженер 1кат ОКК и ПВР","","01.01.1970","3.2.2.4"]
,["","2","2","2","ж","Инженер 1кат ОКК и ПВР (квота для ивалида)","","01.01.1970","3.2.2.4"]
,["","3","3","3","ж","Инженер ОТД и ЛК","","01.01.1990","3.2.2.4, 3.5, 3.12, 4.1","10"]
,["","4","4","4","м","Водитель а/м ОМТО и ТО","","01.01.1990","4.1","27.3"]
,["","5","5","5","м","Водитель а/м ОМТО и ТО","","01.01.1990","4.1","27.3"]
,["","5","5","5","м","Водитель а/м ОМТО и ТО","","01.01.1990","4.1;ds","27.3;vf"]
]
Вложения
Contingent1.xlsx
(17.9 KiB) Скачиваний: 622
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 17:55

таблетка для тех у кого шаблон закэшировался:

https://stackoverflow.com/questions/884 ... y-get-call
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 18:36

5 Этап

Подключать первую html не вручную методом get, а при помощи плугина tpl библиотеки require/ аналогично подключить данные, которые подставляются в шаблон
  1. Скопировать плугин tpl с сайта https://github.com/JulienCabanes/requirejs-tpl
  2. Перед вызовом require написать require.config в котором указать plugin
  3. В define сделать ссылку на первый html чтобы он приходил в виде аргумента
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Re: Курс по front-end разработке в it-univer18

Сообщение vva » 26 сен 2017, 19:27

все кто присутствуют на занятии очно второй этап миновали, поэтому публикую пример "правильного ответа"

пример "первого html" - h1.html:
Код: выделить все
<style>
<!-- Мои стили -->
</style>
<div>
   Это мой элемент управления
</div>


пример "второго html" с шаблоном - h2.html:
Код: выделить все
<html>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" >
/*<![CDATA[*/
      $(function () {
         $.get( "h1.html", function( data ) {
              $('div.my-control').html(data);
         });
      });
/*]]>*/
   </script>
   <body>
      <div class="my-control">Тут должен быть мой элемент управления!</div>
   </body>
</html>
Вложения
m2.zip
(36.2 KiB) Скачиваний: 582
Аватар пользователя
vva
Администратор
 
Сообщений: 2914
Зарегистрирован: 06 фев 2007, 13:33

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1