r

За ингээд to do list application-ийхаа HTML хөгжүүлэлтийн сүүлийн хэсэг болох board division-ийг хамтдаа загварчлья.

Хэрэв та visual studio code editor ашиглаж байгаа бол хичээл 1 дээр тайлбарласан live server extension-оор html file аа браусерт ачааллаж, кодоо өөрчлөх тутамдаа үр дүнгээ алдалгүй ажиглаад явж болно.

1-дүгээр хичээл дээр бид уг division-ийг бүхэлд нь board хэмээн нэрлэснийг санаж байгаа гэж найдаж байна.

Хамгийн дээрх зургаас board хэсэг маань дотроо уг зураг шиг хийх ажлын жагсаалт бүхий цагаан дэвсгэртэй хэсэг(lists) мөн жагсаалтын гүйцэтгэлийг харуулсан цэнхэр дэвсгэр бүхий өөр нэг хэсэгт(graph) хуваагдаж байгааг харж болно.

Lists хэсэг

Улаан шугамаар зурсан зурагт үзүүлснээр уг хэсэг маань үндсэн 2 хэсэгт хуваагдаж байгааг харж болно. Эхний “Таны төлөвлөгөө” гэсэн бичвэр болон сар өдрийг агуулсан хэсгийг “header” гэж нэрлээд дотор нь “Таны төлөвлөгөө” бичвэрийг h3, хөндлөн зураасыг hr(өмнөх хичээл дээр тайлбарласан), сар өдрийг p таг-аар загварчилъя.

  • p tag: paragraph бичихэд ашиглагддаг tag бөгөөд ерөнхийдөө текстэн мэдээллийг жижгэвтэр үсгийн фонтоор харуулдаг гэж ойлгож болно.

Дараагийн хийх ажлын жагсаалтууд болон шинээр жагсаалт оруулах хэсгийг агуулсан том хэсгийг “todoPanel” гэж нэрлье. Түүний дотор байгаа жагсаалт бүр дээр адилхан HTML бүтэц ашиглах тул нэгийг нь л загварчилсан байхад хангалттай бөгөөд цаашдаа dynamic хэл ашиглан тэдгээрийг амархан хувилах аргыг сурна. Жагсаалт бүрийг “todo” гэж нэрлэсэн бөгөөд нэмж жагсаалт оруулах хэсгийг “add”, дэлгэрэнгүй үзэх гэсэн жижигхэн хэсгийг “more” гэж нэрлье.

Жагсаалт буюу “todo” хэсэг маань дотроо 5 бүрдэл хэсэгтэй байгааг улаанаар зурсан зургаас харж болно. Цагийг агуулсан хэсгийг time босоо шугамыг vl(vertical line), тайлбар агуулсан хэсгийг note арын checkbox-ийг input tag-аар мөн хогийн савны зургийг i tag-аар илэрхийлье. Дараагийн хичээл дээр бэлэн icon-уудын сан ашиглахыг тайлбарлах учир энэ удаад icon хараахан нүдэнд харагдахгүй.

  • vl: зураасыг илэрхийлэхэд яагаад уг division-ийг ашиглаж байгааг гайхаж байж магадгүй юм. Тэгвэл CSS загварчлал ашиглан эдгээр division-уудийг хүссэн хэлбэр дүрсэндээ оруулж, өнгө будаг хольж болдог учраас босоо шугамыг div tag ашиглан хийх нь асуудалгүй гэсэн үг.
  • input tag: уг таг нь html хэлэнд form гэсэн ойлголттой салшгүй уялдаатай байдаг бөгөөд форм нь хэрэгчлэгчээс мэдээлэл авахад хэрэглэгддэг html element-үүдийн багц ойлголт болно. Манай жишээн дээр type= “checkbox” гэсэн attribute-ийн тусламжтай хэрэглэгчээс чагталж бөглөх боломжтой checkbox үүсгэж байгаа юм. Энд дарж формын талаарх гүнзгий ойлголтыг аваарай.

add хэсэг маань үндсэн 3 хэсгээс бүрдэж буйг улаанаар зурсан зурагнаас харж болох бөгөөд эдгээр нь бүхэлдээ хэрэглэгчээс мэдээлэл авах буюу html хэлний form-той холбоотой болно . Эхний цаг гэсэн сонголттой хэсгийг хэрэглэгч ашиглан эхлэх цаг, дуусах цаг хоёрыг оруулж өгөх хэрэгтэй. Тиймээс select form-ийг ашигласан. Харин дараагийн төлөвлөгөө гэсэн placeholder тексттэй хэсэг хэрэглэгчээс оруулах жагсаалтынх нь тайлбарыг авах хэсэг болж өгнө. Мэдээж нэмэх гэсэн хэсэг дээр дарснаар шинээр жагсаалт үүсгэнэ.

  • select tag: Уг tag бол хэрэглэгчийн сонголтыг хадгалж авах зориулалттай tag бөгөөд түүний доторх option tag-ууд нь сонгох боломжтой сонголтуудыг илэрхийлдэг гэсэн үг. Цаашид html file-аа ачааллаж үзэхэд илүү сайн ойлгогдох байх. Option tag доторх selected attribute-ийг бичсэнээр тухайн сонголт хэрэглэгчээс хамааралгүй автоматаар бөглөгддөг. Харин disabled attribute тухайн сонголтыг сонгох боломжгүй болгодог бол hidden attribute нь бүр сонголтын цэснээс алга болгодог гэсэн үг. Уг гурван attribute-ийг цугт нь ашигласнаар хэрэглэгчид юуны талаар бөглөхийг нь сануулах зорилготой зурагт харагдаж буй шиг сонгогдох боломжгүй текстийг бий болгож байна.
  • input type=text: уг форм бол хэрэглэгчээс текстэн мэдээлэл авах боломжтой талбарыг үүсгэнэ. input буюу оролтын tag-ийн type attribute бол ямар төрлийн оролтыг хэрэглэгчээс авахыг зааж өгдөг. Харин placeholder attribute нь оролтын мэдээлэл юуны тухай байх талаар түлхүүр үгийг хэрэглэгчид сануулах маягаар харагддаг текст гэж хэлж болно.
  • input type=submit: харин энэ форм бол дээр нь дарахад хэрэглэгчээс оруулсан мэдээллийг хадгалж авах зориулалтаар ашиглагдаж байгаа бөгөөд value attribute нь уг товч дотор ямар текстэн мэдээлэл агуулагдахыг зааж өгч буй attribute болно.

Нийтдээ бидний board хэсгийн lists division маань ингэж илэрхийлэгдэж болж байна.

Харин үр дүнгээ харах юм бол өмнөх calendar хэсгийн араас залгуулан

ийм үр дүнг өгч байна. Одоо хийж байгаа зүйлс утгагүй залхуутай мэт санагдаж байсан ч урт хугацаандаа та жинхэнэ чадварыг олж авах учраас тэвчээртэйгээр цааш нь үргэлжлүүлээрэй. Дараагийн хичээлээр үлдсэн board хэсэг доторх graph division-ийг загварчилна.

Delgersaikhan

Written by

Junior Developer in jmtech.mn — — — — — — — — — — — — — —National University of Mongolia — Software Engineering

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade