ICSI301 Төсөл 3: ЖаваСкрипт ба DOM

Тохиргоо

Хэдийгээр энэ төслийг өөрийн вэб хөтөч дээрээ ажиллуулж болох ч гэсэн таны үйлдлийн системд Node.js суусан байх хэрэгтэй. Энэ програмыг ашиглан кодын чанарыг шалгах юм. Хэрэв суулгаагүй бол Node.js болон npm модуль менежер програмыг зааврын дагуу одоо суулгаарай.

Node.js суулгасны дараа project3 нэртэй хавтас үүсгээд энэ zip файлыг дотор нь задлаарай.

Та кодын чанарыг шалгадаг багаж ("linter" гэж нэрлэдэг), ESLint багажийг татаж аваад project3 хавтас дотроос дараах командаар ажиллуулна: 

npm install

Энэ нь ESLint багажийг node_modules дэд хавтас дотор татаж авна. Таны project3 хавтас дотор байгаа бүх ЖаваСкрипт файлууд дээр үүнийг ажиллуулах боломжтой болох юм. Дараах командаар кодынхоо чанарыг шалгаарай: 

npm run lint

Таны илгээх бүх ЖаваСкрипт файлын код чинь 'use strict'; мөрөөр эхлэх ёстой. Мөн ESLint програмаар шалгахад ямар нэг алдаа эсвэл санамж (warning) байх ёсгүй юм шүү. Ямар нэг алдаа эсвэл санамжтай бол загварын онооноос хасагдах болно.

Даалгавар 1: ЖаваСкрипт oгноо сонгуур (25 оноо)

Энэ даалгаврын хувьд та HTML, CSS, ЖаваСкрипт гурвыг хослуулан хоёр DatePicker цонхыг хэрэгжүүлэх юм.

project3 хавтас дотор DatePicker нэртэй JavaScript классыг хэрэгжүүлэх DatePicker.js файлыг үүсгэнэ үү. Тухайн классыг хэрхэн ашиглаж болохыг дараах жишээн дээрээс харна уу: 

var datePicker = new DatePicker("div1", function (id, fixedDate) {
   console.log("DatePicker with id", id,
       "selected date:", fixedDate.month + "/" + fixedDate.day + "/" + fixedDate.year);
});
datePicker.render(new Date("July 4, 1776"));

Уг классын байгуулагч функц нь өмнө үүссэн div элементийн id атрибут болон огноо сонгодог callback функцийг аргументээрээ авна. Хэрэглэгч огноог сонгох үед callback функц нь id болон fixedDate объектийг хувьсагчаараа авч дуудагдах ёстой. fixedDate объект нь дотроо month, day, year гэх шинжүүдтэй бөгөөд харгалзах он сарыг тоогоор илэрхийлсэн байна. (жишээ нь: {month: 1, day: 30, year: 2016} объект нь 2016 оны 1 сарын 30-ны өдрийг илэрхийлнэ.)

Энэ классаас үүсэх объект нь тодорхой сарыг заах Date объектыг аргументээрээ авдаг render функцтэй байх ёстой (Date объект нь тухайн сарын доторх дурын өдрийг илэрхийлж болно). render функцийг ажиллуулах үед энэ нь огноо сонгогчийн div элементийн доторх агуулгыг аялал жуулчлалын захиалгын вэбсайт зэрэгт түгээмэл ашигладаг нэг сарын хуанлийн HTML баримтаар солино.

  • Хуанли нь сарын өдрүүдийг долоо хоног бүрээр нэг мөр, гараг бүрээр нэг багана болгон хүснэгт хэлбэрт харуулна.
  • Гарагийн багана ням гарагаас эхэлж бямба гарагт дуусдаг байна. Хуанли нь толгой хэсэгтээ харгалзах гарагийн товчилсон нэрийг харуулдаг мөртөй байх хэрэгтэй. Жишээлвэл "Ня", "Да", "Мя" гэх мэт.
  • Тухайн сарын өдөр бүрийг тоогоор илэрхийлнэ.
  • Зарим долоо хоногийн мөрөнд тухайн сард багтаагүй өдөр орох тохиолдол гарна. Эдгээр өдрүүдийг өөр сарын өдөр гэдгийг нь илтгэн өнгийг нь бууруулж ялгаж өгнө.
  • Долоо хоногийн мөрүүд нь сонгогдсон сарын ядаж нэг өдрийг агуулдаг байна. Ихэнхи саруудад долоо хоногийн мөр 5 ширхэг байх болов ч, зарим саруудын өдрөөс хамаарч 4 эсвэл 6 мөртэй байх тохиолдол гарна. Таны хийсэн хуанлийн мөрүүдийн тоо нь хувьсдаг байх ёстой.
  • Хуанли нь дээд хэсэгтээ сонгогдсон жил болон сарыг харуулдаг байна. Мөн дээрээс нь, өмнөх эсвэл дараах сар руу шилжих боломжтой "<" болон ">" товчнуудтай байна.
  • Тухайн сарын өдөр дээр дарах үед дээр дурьдсан callback функцийг тохирох аргументээр дуудаж ажиллуулдаг байна. Сонгогдсон сард хамаарахгүй буюу өмнөх болон дараах сарын өдөр дээр дарах үед callback функц дуудагдах ёсгүй.

Бидний өгсөн datepicker.html файл нь дотроо хоёр хоосон div элементтэй, мөн уг элементүүдэд хуанлиг харуулдаг DatePicker классыг хэрэгжүүлэх багахан ЖаваСкрипт кодыг агуулна. Нэг хуанли нь одооны он сарыг харуулдаг бол нөгөөх нь 2009 оны 1 сарыг харуулдаг байна. Хоёр хуанлийн сарыг сонгох товчлуурууд нь хоорондоо хамааралгүйгээр, тусдаа ажилладаг байх хэрэгтэй.

Өгөгдсөн HTML файл нь ямар нэгэн загваргүй байгаа учир datepicker.css нэртэй stylesheet үүсгэн, хуанлинуудыг хэрэглэхэд эвтэйхэн болгон загварчилна уу. Stylesheet болон HTML файл хоёрыг холбох link тагийг аль хэдийн өгөгдсөн файлд бичиж өгсөн байгаа.

Даалгавар 2: Хүснэгтийн загвар боловсруулах (15 оноо)

TableTemplate.js файлыг үүсгэж, TableTemplate нэртэй, дотроо fillIn гэсэн статик методыг агуулдаг ЖаваСкрипт классыг хэрэгжүүлнэ үү.

fillIn методод тавигдах шаардлагууд:

  • Энэхүү метод нь <table> элементийн id атрибут, dictionary объект, мөн columnName нэртэй тэмдэгт мөрөөс бүрдсэн гурван аргумент авдаг байна.
  • Энэ метод нь юун түрүүнд эхний мөрөн дэхь {{property}} ийм хэлбэрт байгаа бичвэрийг dictionary объектын харгалзах property (шинж чанараар) сольж бичих юм. Үүний дараа columnName аргументтэй таарж буй баганы доторх {{property}} элементүүдийг өөрчилж бичнэ.
  • Уг метод нь хүснэгтийн эхний мөрөнд баганы нэрнүүд байгаа гэж үзэн ажилладаг байна. Оролтоор орж ирсэн хүснэгтийн баганы нэрнүүд хэзээ ч давхцахгүй гэж тооцно уу.
  • Хэрэв columnName аргументыг тодорхойлж өгөөгүй бол уг метод нь хүснэгтийг бүхэлд нь боловсруулдаг байна.
  • Хэрэв дамжуулж өгсөн columnName нь таараагүй тохиолдолд уг метод нь тухайн багана доторх бичвэрүүдийг өөрчлөх ёсгүй. Гэхдээ columnName нь таараагүй байсан ч эхний мөр дэхь загвар тэмдэгтүүдийн утгыг өөрчлөх хэрэгтэй гэдгийг санаарай.

Жишээлбэл: columnName аргументтэй таарж буй баганад байрлах td элементийн утга нь "Өнөөдөр бол {{year}} оны {{month}}-р сарын {{day}}-ны өдөр." гэж байгаад, dictionary объект аргументын утга нь {year: "2016", month: "1", day: "30"} хэмээн өгөгдөхөд td элементийн утга нь "Өнөөдөр бол 2016 оны 1-р сарын 30-ны өдөр" болж өөрчлөгдөнө.

Зүүн талын хүснэгтийн id атрибут нь "table" бөгөөд, dict нь тэмдэгтэн мөрөөс бүрдсэн dictionary объект байх үед TableTemplate.fillIn("table", dict, 'Part Number') уг методыг харгалзах аргументээр дуудсаны дараа баруун талын хүснэгт үүсэх ёстой:

Problem 2 Example

Хэрэв хүснэгтийн загвар дотор dictionary объектод тодорхойлогдоогүй property байвал түүний оронд хоосон тэмдэгт оруулж өгнө. Таны хэрэгжүүлсэн метод нь зөвхөн зөв хэлбэрт оруулсан загваруудтай ажилладаг байхад хангалттай. Хэд хэдэн загварууд давхардах (ж.нь: {{foo {{bar}}}} эсвэл {{ хаалт орхигдох г.м) алдаатай загвар өгөгдөхөд боловсруулах шаардлаггүй. Давхардсан хүснэгтүүд болон олон хэсгээс бүрдэх төвөгтэй хүснэгтийн нүд зэрэгтэй мөн ажиллах шаардлаггүй.

Төсөл 2-н хүрээнд бичсэн ICSI301-template-processor.js кодоо дахин ашиглан fillIn методыг хэрэгжүүлээрэй. project3 хавтас доторх HTML файлыг нээж үзэж, script тагийг хэрхэн ашиглан ICSI301-template-processor.js кодыг оруулж ирж буйг ажиглана уу.

Хэрэв хүснэгтэнд тань <tbody> элемент байхгүй бол вэб хөтчүүд автоматаар <tr> элементүүдийн гадуур нь <tbody> нэмж өгдөгийг анхаараарай.

Таны хэрэгжүүлсэн метод хүснэгтийг бүхэлд нь боловсруулж дууссаны дараа хүснэгтийн загварын visibility шинж чанарыг шалгаад хэрэв утга нь hidden байвал visible болгон өөрчилнө үү.

Дээрх ЖаваСкрипт классыг үүсгэсний дараа ICSI301-test-table.html файлыг вэб хөтөч дээрээ нээнэ үү. Уг HTML файл нь дотроо жишиг хүснэгтүүд зэргийг агуулдаг бөгөөд таны бичсэн кодыг ажиллуулж, үр дүнг харуулдаг юм. Энэхүү файлыг өөрчилж болохгүй.

Нэмэлт шаардлага, зөвлөмж ба бусад

  • Уг даалгаврын хүрээнд тодорхойлох ЖаваСкрипт классуудыг ECMAScript 2015 класс бичиглэлийг ашиглан, эсвэл Төсөл 2-т хэрэглэсэн класс тодорхойлох аргуудаар бичиж болно.
  • Кодоо бичихдээ jQuery болон бусад бүх ЖаваСкрипт бэлэн сангуудыг ашиглаж болохгүй. Жинхэнэ ажил дээр вэб хөгжүүлэх үедээ мэдээж сангууд ашиглаж болох ч, энэ даалгавраар танд ЖаваСкрипт/ДОМ хэрхэн ажилладаг талаар суурь мэдлэгийг олгох нь гол зорилго юм.
  • Харин ЖаваСкрипт доторх төрөлх функцүүдийг ашиглаж болно. Жишээлвэл дараах функцүүд хэрэг болно:
    • Date классын методууд
    • parseInt, parseFloat, isNaN.
  • Дараах ДОМ элементийн шинж чанарууд хэрэг болж болох юм:
    • cells
    • firstChild
    • nextSibling
    • rows
    • tagName
    • textContent
    • innerHTML
  • Бас нэгэн debug хийх үед ихээхэн хэрэгтэй ЖаваСкрипт функц бол console.log юм. Уг функц нь тэмдэгтэн мөрийг аргументээр авч, ЖаваСкрипт log хэсэгт хэвлэн харуулдаг. Энэхүү log буюу бүртгэлийг Chrome хөтчийн control menu дотроос "More Tools → Developer Tools → JavaScript console" харж болно. Бичсэн ЖаваСкрипт код тань ойлгомжгүй байвал console.log тусламжтай кодын аль хэсэг дуудагдаж байгааг төвөггүй мэдэх боломжтой.
  • Мөн debug хийж байх үедээ debugger түлхүүр үгийг ашиглаж болох юм. Хэрэв кодонд "debugger;" мөр дуудагдвал програмыг ЖаваСкрипт debugger-рүү шилжүүлдэг. Энэ нь кодын замаар хэрэгжүүлж болох breakpoint гэсэн үг юм.
  • Хэрэв өөрчлөлт ажиглагдахгүй байвал ЖаваСкрипт кодонд тань алдаа байгаа бөгөөд түүнээс болоод код тань дуудагдахгүй байж болох юм. Тийм эсэхийг шалгахын тулд ЖаваСкрипт console цонхыг нээж error мэдэгдэл байгаа эсэхийг шалгана уу.
  • ЖаваСкрипт console болон Chrome DevTools хэрэглүүрүүд нь дараа дараагийн даалгавруудад таны хамгийн дотны найзууд байх болно. Энэ даалгаврын хүрээнд тодорхой цаг зарцуулан эдгээр багажуудыг хэрэглэж дадхыг санал болгож байна.
  • ESLint програмыг ажиллуулах үед .eslintrc.json (далд файл) байгаа эсэхийг шалгаарай. Эс бөгөөс ESLint алдаа заах болно.
  • Хэрэв ESLint ажиллаад, олон алдаа илрүүлвэл npm run lint -- --fix командаар дийлэнхийг нь засах боломжтой.

Загварын оноо (10 оноо)

ЖаваСкрипт код тань цэвэрхэн (классуудыг зохистой хэрэглэсэн, байгуулагч функцаас бусад глобал хувьсагч байхгүй, г.м), хялбар уншигдахуйц, мөн ESLint алдаагүй байх хэрэгтэй.

Илгээх

project3 хавтсыг бүхэлд нь илгээнэ.