Mavzu: html, css va JavaScript yordamida birinchi kirish sahifani yaratish

JavaScript

	const loginForm = document.getElementById("login-form");
	const loginButton = document.getElementById("login-form-submit");
	const loginErrorMsg = document.getElementById("login-error-msg");
	loginButton.addEventListener("click", (e) => {
	e.preventDefault();
	const username = loginForm.username.value;
	const password = loginForm.password.value;
	if (username === "user" && password === "web_dev") {
	alert("You have successfully logged in.");
	location.reload();
	} else {
	loginErrorMsg.style.opacity = 1;
	}
	})

• Yangi boshlanuvchilar uchun biz JavaScript-dan foydalanib ishlashimiz kerak bo'lgan barcha elementlarni olamiz: kirish formasi, kirish tugmasi va tizimga kirishda xato xabari. Biz buni usulini chaqirib, document.getElementByIdbiz izlayotgan elementning identifikatorini o'tkazamiz. Bundan tashqari, ushbu uchta o'zgaruvchining qiymatlari o'zgarmasligi uchun, ya'ni o'zgaruvchilar doimo bir xil elementlarga tegishli bo'ladi, keyin biz uchtasini ham deb e'lon qilamiz const.
• Shundan so'ng biz tizimga kirish tugmasi uchun hodisa tinglovchisini yaratamiz click. Boshqacha qilib aytadigan bo'lsak, har safar login tugmasi bosilganda, keyin belgilangan funktsiya "click",bajariladi. Funktsiya biz chaqiradigan parametrni oladi e, bu tugmani bosishni ifodalovchi sichqoncha hodisasi (uni nomlash eshunchaki konventsiya, uni xohlaganingizcha chaqiring).

• Funktsiya ichida biz kirish tugmasini bosishning standart xatti-harakatlarini oldini olishdan boshlaymiz (bu shakl ma'lumotlarini yuborish). Ushbu namoyishda biz ma'lumotlarni taqdim qilmoqchi emasmiz, biz uni faqat JavaScript yordamida tasdiqlashni xohlaymiz, shuning uchun e.preventDefault()topshirishning oldini olish uchun.
• Keyin, mos ravishda usernameva passwordshakl maydonlarida foydalanuvchi tomonidan kiritilgan qiymatlarni olamiz . loginFormShakl maydonini tanlash uchun JavaScript sintaksisidan foydalanishimiz mumkin formElement.nameOfField, bu formElementsizning HTML qayerda 
  va siz izlayotgan element atributiga nameOfFieldberilgan qiymatdir . Tanlangan maydonning qiymatini olish uchun shunchaki qo'shing . Misol uchun, agar foydalanuvchi maydonga “user01” yozgan bo'lsa, biz bu qiymatni bilan olamiz . Juda toza, to'g'rimi?name.valueusernameloginForm.username.value
• Endi yakuniy teglar. Foydalanuvchi tizimga kirish tugmachasini bosganida, biz forma maydonlariga kiritilgan barcha qiymatlarni olamiz. Ammo biz bu ma'lumotlar bilan nimadir qilishimiz kerak. Keyin, agar login hisob ma'lumotlari to'g'ri bo'lsa, kodning bir qismini yoki ular noto'g'ri bo'lsa, boshqa qismini bajarish uchun if/else blokini yozamiz. Bizga ham shart kerak, to'g'rimi? Keling, ushbu shartni hisobga olish ma'lumotlarini haqiqiy tekshirishga aylantiraylik. Oddiylik uchun ushbu tekshirish kiritilgan foydalanuvchi nomi "foydalanuvchi" va parol "web_dev" ekanligini tekshiradi.

• AND operatori qayerda foydalanuvchi nomi “foydalanuvchi” ga, parol esa “web_dev” ga teng bo‘lishi kerakligini belgilaydi.
• Agar hisob ma'lumotlari haqiqatan ham haqiqiy bo'lsa, biz foydalanuvchi tizimga muvaffaqiyatli kirganligi va keyin sahifani qayta yuklash (yana oddiylik uchun) haqidagi xabar bilan ogohlantirish dialogini ko'rsatamiz. Ammo agar foydalanuvchi nomi yoki parol noto'g'ri bo'lsa, biz opacitykirish xato xabarining ( loginErrorMsg) xususiyatini uni ko'rinadigan qilish uchun o'zgartiramiz va foydalanuvchiga hisob ma'lumotlari yaroqsizligini bildiramiz. Biz odillik JavaScript ichida CSS o'zgarish qilish mumkin stylesning loginErrorMsg( loginErroMsg.styles) va keyin opacitymulk ( loginErrorMsg.styles.opacity) Biz xohlagan qiymatiga sozlash uchun. Uni 1 ga o'rnatish xato xabari to'liq shaffof bo'lishini anglatadi.
• Va... tamom. Biz ushbu tushuntirishning oxiriga yetdik va endi sizda HTML, CSS va JavaScript bilan yaratilgan toʻliq ishlaydigan kirish sahifasi mavjud. Menimcha, bu front-end veb-ishlab chiqishni o'rganishning dastlabki bosqichlari uchun ajoyib g'oya, chunki uni animatsiyalarni qo'shish, sahifa dizaynini o'zgartirish yoki server tomonini server tomonida tekshirish orqali osongina yaxshilash mumkin. Node.js, Java, PHP va boshqalar kabi.
•