Страница 1 из 2

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

СообщениеДобавлено: 26 сен 2017, 15:15
vva
Начал читать бесплатный курс "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

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

СообщениеДобавлено: 26 сен 2017, 16:02
vva
На первом занятии я просто попросил сверстать то, что дал в качестве примеров

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

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

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

СообщениеДобавлено: 26 сен 2017, 16:13
vva
3 этап:

Использовать первый шаблон как underscore шаблон
1. Подключить underscore.js
2. Сформировать из первого html шаблон
3. Методами jquery результат применения второго шаблона с аргументом вставить в содержимое в div.my-control

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

СообщениеДобавлено: 26 сен 2017, 16:25
vva
у кого то проблемы уже на этапе подключения js скрипта

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

Код: выделить все
<script type="text/javascript" src="jquery.js"></script>

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

СообщениеДобавлено: 26 сен 2017, 16:41
vva
читаем доку по функциям:
  1. https://api.jquery.com/ready/
  2. https://api.jquery.com/jquery.get/

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

СообщениеДобавлено: 26 сен 2017, 17:28
vva
4 этап:

Js код который размещает реьд внутри div вынести в отдельный файл, подключить и выполнить его при помощи requirejs
  1. Написать отдельный js файл с вызовом define
  2. Подключить require.js
  3. Вызвать require

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

СообщениеДобавлено: 26 сен 2017, 17:36
vva
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"]
]

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

СообщениеДобавлено: 26 сен 2017, 17:55
vva
таблетка для тех у кого шаблон закэшировался:

https://stackoverflow.com/questions/884 ... y-get-call

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

СообщениеДобавлено: 26 сен 2017, 18:36
vva
5 Этап

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

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

СообщениеДобавлено: 26 сен 2017, 19:27
vva
все кто присутствуют на занятии очно второй этап миновали, поэтому публикую пример "правильного ответа"

пример "первого 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>