Web designerlar uchun, JavaScript darslari !!! Noldan boshlab

Darslar kim uchun ?
*- Siz web sayt yaratishni bilasiz.
*- HTML tilidan xabaringiz bor.
*- Saytingizni yanada chiroyli va dinamik qilmoqchisiz.
Agar yuqoridagi shartlarga “HA” deb javob bersangiz, demak bu mavzu siz uchun suv va havodek zarur!!! Bu aynan siz izlagan darslar bo´ladi. Baribir JavaScriptga duch kelasiz !
Agar yuqoridagi savollarning biriga yo´q deb javob bersangiz, u holda bu mavzu sizga qiyinlik qiladi.

JavaScript nima?
Bu web saytlarni dasturlash tilidir

JavaScript nima uchun ishlatiladi ?
# Saytingizga animatsion yozuvlar, rasmlarga effektlar,
# Soat yoki sanani kursatuvchi narsalar va boshqa bezaklar uchun ishlatiladi
# Saytingizni user bilan muloqot qiladigan (dinamik sayt) qilmoqchi bo´lsangiz javascript juda muhim.
# Sayt menulariga sichqonchani olib borsangiz qo´shimcha podmenu ko´rinadi…Bu ham JavaScript tilida qilinadi…
# WebSayt uchun mini o´yinlar yaratish,
# Matematik formulalarni hisoblash
# Saytga kirgan userga biror ogohlantirish matnini ko´rsatish
# Saytingizdagi rasm va yozuvlarni ketma ket chiqib keladigan qilish, ular harakatini boshqarish
# Userdan so´rovlar qabul qilish…
# Sayt yuklanganda yoki kerakli tugma bosilganda yangi oyna ochish (pop-up)
#va hokazo…(Bundan boshqa juda ko´p vazifalarni ham bajaradi. Ular haqida keyin to´xtalamiz)
# Qisqasi, saytingizni jonlantiradigan til bu JavaScript

JavaScriptning afzalligi nimada ?
Faqat shaxshiy fikrlarimni aytaman:
1) O´rganish juda oson va qulay
2) JavaScriptni deyarli barcha browser(Opera, Firefox, IE) tushunadi…
3) O´rganish uchun komputerga ortiqcha hech narsa o´rnatish shart emas,
4) Boshqa dasturlash tillariga o´xshab kompilatsiya qilinmaydi…

****
Darslarni faqat praktikada ko´rsatib tushuntiraman, O´quvchilarni teoriyalar o´rmoniga adashtirib qo´yishdan ko´ra, oddiy misollar bilan tushuntirish ming marta afzal, isn´t it ?!

1-DARS, Salom Dunyo

Kerakli instrumentlar:
1. Web sayt tayyorlaydigan dastur, masalan: Dreamweaver, yoki FrontPage, yoki boshqasi… Agar yuqoridagi dasturning birortasi bo´lmasa, sizga oddiy Notepad (Bloknot) ham yetadi.
2. Browser, masalan Opera, Internet Explorer, yoki MozillaFirefox, va hkz
**** *** ***
JavaScript kodlari ushbu satrlar orasida yoziladi:

Bu yerda java script kodlari yoziladi

Yoki

Bu yerda java script kodlari yoziladi

Yoki

Bu yerda java script kodlari yoziladi

*** *** ***
Bloknot (yoki boshqa dastur) ni ochamiz va mana bu kodni yozamiz:

Sarlavha

alert(“Salom dunyo urra urra urra!!!”)

Keyin save as (Saqlash) ni bosib fayl.html deb nomlaymiz.
Saqlangan faylni ochamiz, nima yuz berdi ? Quyidagi rasmdagidek oyna ochiladi…

Bu qanday ro´y berdi ?

Etibor bering ushbu kodda
onload degani- sahifa yuklanish zahoti qandaydir hodisa yuz bersin, Qaysi hodisa ?!, albatta alert degan hodisa, alert bu ogohlnatirish oynasi hisoblanadi. Agar istasangiz alert o´rniga confirm yoki prompt yozish ham mumkin, Agar qiziqsangiz o´rniga qo´yib tekshirib ko´ring
confirm(“Salom dunyo urra urra urra!!!”)
yoki
prompt(“Salom dunyo urra urra urra!!!”)
masalan

Sarlavha

prompt(“Salom dunyo urra urra urra!!!”)

*** *** ***
Ogohlantirish oynasini boshqa usullardayam chiqarish mumkin, Yuqoridagi usulimizda sahifa yuklanish zahotiyoq Oyna ochilgan edi. Endi esa qandaydir yozuvni bosgandan so´ng ogohlantirish oynasi ochiladigan qilamiz. Demak boshladik

Har doimgidek bloknot (Notepad, yoki WordPad), yoki boshqa tekst redaktorini olamiz… va unga ushbu kodni qo´yamiz:

Sarlavha

function ogohlantir() {
alert(“Salom hammaga”)
}

Bu yerga sichqoncha bilan bosing

Yuqoridagi kodni qisqaroq usulda ham yozish mumkin:

Sarlavha

Bu yerga sichqoncha bilan bosing

Yuqoridagi kodda onclick komandasi manosi shu-ki: biror obektga (matn, rasm va boshqaga) sichqoncha bilan bosilsa qandaydir hodisa yuz berishi kerakligini anglatadi.

DIQQAT !!! Qo´shtirnoqlarga etibor bering “alert( ‘Salom dunyo’ )” bulardan biri ikkitalik qo´shtirnoq ” “, o´rtadagisi esa bittalik qo´shtirnoq ‘ ‘

onclick o´rniga boshqa buyruqni ham qo´yish mumkin, masalan onmouseover

Sarlavha

Bu yerga sichqonchani olib keling

Bunda siz sichqoncha strelkasini yozuv ustiga olib kelgan zahotiyoq ogohlantirish oynasi ochiladi.

*** *** ***
Biz siz bilan yozuvga bosilganda hodisa yuz berishini o´rgandik, Ammo yozuvdan tashqarida sichqonchani bosganda hech narsa bo´lmaydi. Keing shunday kod yozamiz-ki, web sahifani har-qanday joyiga sichqoncha bilan bosganda ogohlantirish oynasi ochilsin.
Buning uchun mana bu kodni yozamiz:

Sarlavha

document.onclick=”alert(‘Salom butun dunyoga’)”

*** *** ***
Web saytimizda birorta rasm bo´lsa, anashu rasmga bosilganda biror ogohlantirish yozivi ochiladigan qilsak: Birorta rasm olamiz uni nomini tasvir.jpg deb ataylik
Keyin mana bu kodni yozamiz, Qarabsizgi rasm ustiga bosilganda ogohlantrish oynasi ochiladi… Marhamat

Sarlavha

rasmga bosing

Xuddiu shu yuqoridagi kodning boshqacha varianti ham bor, O´zingizga qulay bo´lganini tanlayverasiz…

Sarlavha

function ogohlantir() {
alert(“Salom rasm bu mening rasmim “)
}

rasmga bosing

*** *** ***

Faraz qiling Sizning saytingizdagi birorta sahifa hali tayyor emas, ammo o´sha sahifaga kiruvchi menu mavjud… Saytga kirgan odam menuga bosganda hali tayyor bulmagan sahifani ko´rishi juda noqulay. Bazida xatolik 404 degan narsa chiqishi userni asabini buzadi. Ana shu muammoni quyidagi usulda hal etish mumkin. Usha tayyor bulmagan sahifaga olib boruvchi linkga java script bilan ogohlantirish oynasi ochiladigan qilasiz. Masalan mana bunday:

Sarlavha

Bu linkga bosing marhamat

Unutmang!!! Ogohlantirish oynasi 3 xi bo´ladi
alert , confirm , prompt
Yuqoridagi kodlarda men alert yozgan joylarga istasangiz confirm yoki prompt ham yozishingiz mumkin, nima yuz berishini o´zingiz bilib olasiz…

Shunday qilib 1-darsga yakun yasaymiz. Hurmatli o´quvchi ushbu darsdagi har bir aytilgan gaplarni amalda bajarib ko´rmasdan keyingi darsga o´tmang… 100 ta narsani shoshilib chala o´rganishdan ko´ra 1 ta malumotni chuqur bilib amal qilgan foydalidir…
Ushbu mavzu bo´yicha savolar bo´lsa leonard073@rambler.ru yoki leonardo1024@mail.ru ga murojaat qilishingiz mumkin., WebSite: www.my.ijod.org www.ijod.org www.muslim.ijod.org

Argument haqida ikki og’iz gap
Esingizda bo’lsa yuqoridagi darslardan birida mana bu kodni o’rgandik, bunda ogohlantirish oynasi chhiqib 12345678 sonlari kurinadi

function ogohlantir() {
alert(“12345678”)
}

Bu yerga sichqoncha bilan bosing

Buni mana bu usulda ham chiqarish mumkin, ya’ni biz argument olib chiqardik.

function ogohlantir(a) {
alert(a);
}

Bu yerga bosing

Yoki yozuv chiqarmoqchi bulsak mana bunday buladi (Qo’shtirnoqlarga ahamiyat bering)

function ogohlantir(m) {
alert(m);
}

Bu yerga bosing

Ya´ni qavs ichidagi narsa argument

Bu yerga bosing

function ogohlantir(a) {}… bndagi a harfi ixtiyoriy harf bulishi mumkin. Biz ogohlantir funksiyasining arumentini oldik, aniqrog’i qavs ichidagi narsani alert qilib chiqardik

2-DARS,
WebSayt bilan muloqot
Bloknot (yoki boshqa text redaktori)ni ochib mana buni yozamiz

Sarlavha

Keyin esa Save as =>ni bosib Faylga faylnomi.html deb nomlaymiz va saqlaymiz.
Saqlangan faylni ochib ko´ramiz… Ko´rib turganingizdek tugma rasmi, Endi tugmachani bosamiz… Nima yuz berdi ? Opera bilan ochsangiz mana bunday oyna ochilishi kerak

*** *** *** *** *** *** ***

Keling bitta ajoyib kod yozib saytimiz bilan subat qilamiz.. Marhamat. Mana bu kodni Bloknotni ochib yozing
Sarlavha

var ism=prompt(“Salom birodar ismingiz nima”, “yozing”);
alert(“Xush kelibsiz Hurmatli ” +ism);

Saqlagan faylni ochamiz… Ochilgan zahoti bizga quyidagi oyna ochiladi.

Yozing –degan joyga ismingizni yozib OK ni bosing… Masalan men ismimni Leonardo deb yozdim. va OK ni bosdim. Mana bunaqa oyna chiqdi:

*** *** ***

Endi esa web saytimizda bitta tugma qo´yib. Ana shu tugma bosilganda savol beradigan qilsak.
Bu juda oson . Har doimgidek Bloknot (yoki boshqa text redaktori)ni ochib mana bu kodni yozamiz, marhamat

Sarlavha

function savol() {
var ism=prompt(“Salom birodar ismingiz nima”, “yozing”);
alert(“Xush kelibsiz Hurmatli ” + ism);
}

Faylni saqlaymiz. Har doimgidek faylnomi.html . Keyin saqlangan faylni ochamiz
Sahifamizda bitta tugma turibdi. Ana shunga sichqoncha bilan bosamiz.
Mana bunday oyna ochiladi

Yozing –degan joyga ismingizni yozib OK ni bosing… Masalan men ismimni Leonardo deb yozdim. va OK ni bosdim. Mana bunaqa oyna chiqdi:

Yuqoridagi muloqotni yanada ajoyibroq qilamiz.
Har doimgidek Bloknot (yoki boshqa text redaktori)ni ochamiz. Quyidagi kodni yozamiz.

Sarlavha

function savol() {
var ism=prompt(“Salom birodar ismingiz nima”, “yozing”);
var shahar=prompt(“Qaysi shaharda yashaysiz”, “yozing”);
alert( shahar+ ” degan shaharda ” +ism+ ” ismli odam yashar ekan” );
}

Sahifani saqlaymiz. Qayta yana ochamiz
Sahifadagi tugmani bosganimizda Bizga savol beriladi, Unga javob berib OK ni bosgandan keyin yana savol beriladi. Yana OK ni bosamiz… Xo´sh keyin nima bo´ldi , tekshirib ko´ringchi…
@@@@@@
WebSahifa bilan savol javob qilishni ham o´rgandik. Etibor bergan bo´lsangiz Bizga qaytarilayotgan javob faqat ogohlantirish oynasida ochilmoqda. Shuni WebSahifani o´zida yozadigan qilsak-chi. Masalan, websahifa ochilganda savol beriladi. . Biz savolga javob beramiz va OKni bosamiz. Yozgan javobimiz, Web saytimizni o´zida paydo bo´lsin. Buning uchun mana bu kod ishlatiladi: document.write()

Mana sizga tayyor kod. Bloknotni ochib kodni yozing

Sarlavha

var ism=prompt(“Salom birodar ismingiz nima”, “yozing”);
document.write(“Xush kelibsiz Muhtaram janob ” +ism);

va Save as qilib faylnomi.html deb nomlab sqlang. Qayta yana ochamiz…
Ochilgan zahoti bizga savol beriladi,

Ismingizni yozib OKni bosing, Masalan men Muslim deb yozdim. Keyin mana bu yozuv ko´rindi…

Hozircha siz WebSayt bilan savol javob qilishni o´rganib oldingiz…

Bitta oddiy o´yin tuzamiz. O´yin quyidagicha bo´ladi. WebSayt bizga bir qancha savollar beradi. Biz esa ularni har biriga javob beramiz. Keyib WebSaytimiz bizga kirtgan javoblarimiz asosida hikoya tuzib beradi…
Marhamat tayyor kodlarni oling: Bloknotni ochib kodni yozing va faylnomi.html deb saqlang

Siz haqingizdagi hikoya

body {
font-size: 14pt;
font-family: Arial, Ties new roman, Verdana;
}

alert(“Salom, Hozir siz bilan ajoyib hikoya tuzamiz, Sizga 12 ta savol beramiz. Sizdan iltimosim, barcha savollarga javob bering (Har bir savolga javob yozgandan so’ng OK yoki ‘Enter’ ni bosing). Tayyormisiz?”);

ism=prompt(“ismingiz nima ?”, “bu yerga yozing”);
familiya=prompt(“Familiyangiz nima ?”, ” “);
yosh=prompt(“Yoshingiz nechada ?”, ” “);
yashash=prompt(“Qaysi shaharda yashaysiz ?”, ” “);
birodar=prompt(“Sizning eng yaqin birodaringiz kim (ismini yozing)?”, ” “);
tanishuv=prompt(“O’sha do’stingiz bilan qayerda tanishgansiz ?”, ” “);
shahar=prompt(“Oxirgi marta qaysi shaharga bordingiz ?”, ” “);
transport=prompt(“O’sha shaharga qaysi transportda bordingiz ?”, ” “);
rang=prompt(“O’sha transportning rangi taxminan qanday edi ?”, ” “);
qaroqchi=prompt(“Yo’lda kimni uchratgan edingiz, uning ismi nima edi ?”, ” “);
dedi=prompt(“Siz o’sha uchratgan odamingizga nima dedingiz ?”, ” “);
hayvon=prompt(“Yo’lda qaysi hayvonga duch kelgan edingiz ?”, ” “);

document.write(“Bir bor ekan bir yo’q ekan, Hozirgi ” + yashash + ” degan shaharda ” + ism + ” degan odam bor ekan. Uning familiyasi ” + familiya+
” ekan. Aytishlaricha hozir uning yoshi ” + yosh + ” da ekan. Kunlardan bir kuni ” + ism + ” ” + tanishuv + ” degan joyda ”
+ birodar + ” bilan tanishibdi. ” + ism + ” va ” + birodar + ” do’st bo’lishibdi. Bir kuni ” + ism + ” bilan ” + birodar +
” birgalikda ” + shahar + “ga borishga qaror qilishibdi. Ular ” + rang + ” ” + transport + “ga minib yo’lga chiqibdi. Uzoq yo’l bosibdi. Yo’lda ”
+ transport + ” buzilibdi. Shu payt ” + ism + ” va ” + birodar + ” oldiga baland bo’yli ” + qaroqchi + ” paydo bo’lib Ularning yo’lini to’sibdi. Aslida ” + qaroqchi +
” qaroqchilik qilar ekan. Shunda ” + ism + ” ” + qaroqchi + “ga qarab ” + dedi + ” – debdi. Buni eshitgan qaroqchi -” + qaroqchi +
“ning g’azabi kelib ” + ism + “ga qilich ko’taribdi. Shu payt ” + ism + “ning baxtiga uzoqdan bahaybat yirtqich ”
+ hayvon + ” paydo bo’ldi va u yugurib ” + qaroqchi + ” oldiga keldi. Keyin esa ” + qaroqchi + “ni g’ajib tashlab o’ljaga aylantiribdi. Buni ko’rgan ”
+ ism + ” va ” + birodar + ” xursand bo’dilar. Chunki ” + hayvon + ” ularni ” + qaroqchi + “dan xalos etgandi. Shunday qilib har ikki do’st: ”
+familiya+ ” ” + ism + ” va ” + birodar + ” murodu maqsadiga yetgan ekan…”);

Endi saqlangan faylni ochib ko´ramiz:
Sizga 12 ta savol beriladi, har biriga javob berib OK ni bosing… Natijada siz o´zingiz haqingizda ajoyi hikoyani o´qiysiz
Bu o´yin mana bu yerda ham joylangan marhamat www.ijod.org/game.html

Funksiya haqida ikki og’iz gap
JavaScript tilida har bir bajariladigan vazifa bu funksiya deyiladi, va u function deb yoziladi.
Masalan, Web-saytimizda ushbu matnni
Salom! Bu java script yozuvlari
Etiboringiz uchun tashakkur
Javascript yordamida 6 marta takrorlab yozmoqchimiz. Buning uchun bitta funksiya yaratib unga ixtiyoriy nom beramiz, masalan yozishfunc deb nomlasak. O’sha funksiyada nima yuz berishini ko’rsatamiz. Keyin o’sha funksiya nomini qayerga qo’ysak xuddi o’sha yozuv ko’rinadi.
Masalan bunday
Kod:

Sarlavha

function yozishfunc() {
document.write(“Salom! Bu java script yozuvlari
Etiboringiz uchun tashakkur

“);
}

yozishfunc();
yozishfunc();
yozishfunc();
yozishfunc();
yozishfunc();
yozishfunc();

Funksiyaning vazifalari juda ko’p, Bu haqda keying darslarda bilib olasiz

*** *** *** *** ***

3-DARS
Sizga qaysi ovqat yoqadi…

Web saytimizga yozadigan forma yaratib userdan savol so´raymiz… keyin esa unga javob qaytaramiz…
Mana tayyor kod.
Bloknot (yoki boshqa text redaktori, masalan WordPad)ni ochib yozing va Save as qilib faylnomi.html deb nomlang.

Sarlavha

function javob() {
alert(“Men uchun eng mazali taom bu ” +ovqat.value )
}

Sizga qaysi ovqat yoqadi:

Mana bunday sahifa bo´ladi

Yuqoridagi kodga yana bitta qo´shimcha kiritamiz… Userdan unga qaysi ovqat yoqishini so´raymiz, va uning sababini ham so´raymiz.
Mana bu sizga tayyor kod:

Sarlavha

function javob() {
alert(“Men uchun eng mazali taom bu ” +ovqat.value);
alert(“Chunki bu taom ” +sabab.value)
}

Sizga qaysi ovqat yoqadi:

Nima uchun: Chunki

Yuqoridagi kodni mening browserdagi ko´rinishi

Biz kiritgan malumotga javob alert() ya´ni ogohlantirish oynasida javob qaytarldi. Endi esa javobni shu saytni o´zida yozadigan qilamiz…
Buning uchun document.write() buyruqidan foydalanamiz, bu buyruq kerekli malumotni websaytga yozadi
Masalan document.write(“Salom dunyo “) Bunda Websaytimizda “Salom dunyo” degan gap yoziladi.

Marhamat tayyor kod

Sarlavha

function javob() {
document.write(“Men uchun eng mazali taom bu ” +ovqat.value+ ” Chunki bu taom ” +sabab.value);
}

Sizga qaysi ovqat yoqadi:

Nima uchun: Chunki

4-DARS
Matematik hisob kitoblarni dasturlash

Keling, ixtiyoriy to´rtburchak yuzasini hisoblovchi formulani dasturlaymiz… Bu judayam oson
Sizga faqat tayyor kodlarni beraman, Uni o´zingiz tushunib olishingiz mumkin…

To´rtburchak yuzasini topishda eni va bo´yi kupaytiriladi.
Enini – a
Bo´yi – b
Yuzani – c deb olamiz
Malumki yuza: c = a*b

Shunday webSahifa tayyorlaymiz-ki, bunda biz to´rtburchak eni va bo´yini uzunligini kiritamiz. To´rtburchak yuzasini esa computer o´zi hisoblab bersin…
Marhamat sizga tayyor kod:

Sarlavha

function yuza() {
var a=tomon1.value;
var b=tomon2.value;
alert(a*b)
}

To’g’ri to’rtburchak yzasini topish

Eni:

Bo’yi:

Kod sizga tushunarli bo´lgandir ?! Koddagi var iborasi hech qanday vazifa bajarmaydi. U shunchaki biror qiymatni bildirib qo´yish uchungina ishlatiladi. Yaxshilab fikrlasangiz hammasini anglab olasiz…

Yuqoridagi dasturimizda kvadrat yuzasining javobi ogohlantirish oynasi ya´ni alert da ko´rsatiladi. Keling bizga beriladigan javob alert emas balki, kerakli joyda ko´rsatilsin…

Marhamat bu sizga tayyor kod

Sarlavha

function yuza() {
var a=tomon1.value;
var b=tomon2.value;
var c=a*b;
javob.value=c;
}

To’g’ri to’rtburchak yuzasini topish

Eni:

Bo’yi:

To’rtburchak yuzasi:

Agar siz HTML tilini bilsangiz, bir narsaga etibor berishingiz kerak: Yuqoridagi kodlarda biz

teglarini yozmadik. Chunki o´quvchini boshini og´ritmay deb kodni qisqartirishga harakat qildim.

Keling endi qoidaga bo´ysunib

tegini ham qo´shamiz. Va yuqoridagi dasturimizga yana bita tugmacha qo´shamiz..…
Marhamat, sizga tayyor kod:

Sarlavha

function yuza() {
var a=document.dastur.tomon1.value;
var b=document.dastur.tomon2.value;
var c=a*b;
document.dastur.javob.value=c;
}

To’g’ri to’rtburchak yuzasini topish

Eni:

Bo’yi:

To’rtburchak yuzasi:

Mana kodning browserdagi ko´rinishi:

JavaScript tilida matematik amallar Math buyrqi bilan amalgaoshiriladi.
Masalan ildiz osti belgisi Math.sqrt() bo’ladi.
Masalan 9 ning ildizini topmoqchi bo’lsak mana bukodni yozamiz

Untitled Document

alert(Math.sqrt(9));

Bunda ogohlantirish oynasida 3 soni chiqadi, chunki 3*3=9
Asosiy matematik belgilar quyidagilar
+ qo’shish
– Ayrish
* Ko’paytirish
/ Bo’lish
++ bittaga oshirish
– – bittaga kamaytirish
% Bo’linganda qoldiqni toppish
Masalan 12 ni 5 ga bo’lsak 2 qoldiq qoladi
Buni javascript bilan quyidagicha topamiz, va 2 soni yozilganini ko’rish mumkin

Sarlavha

document.write(12%5);

Uchburchak yuzasini topuvchi dastur
Yodingizda bo´lsa maktab davringizda geometriya fani o´tilgan. Geometriya fanidan siz uchburchak yuzini topish formulasini o´qigan bo´lishingiz kerak. Masalan men bu formulani hozirgacha eslayman. Chunki bizning geometriya o´qituvchimiz qattiqqo´l edi.
Agar uchburchakning uchta tomoni uzunligi bizga malum bo´lsa uning yuzini “Geron” formulasidan topamiz…
Eslaysizmi ushbu formulani:

Bunda

a, b, c –uchburchak tomonlaridir.

Kod:

Sarlavha

function hisob() {
var a=1*document.myform.tomon1.value;
var b=1*document.myform.tomon2.value;
var c=1*document.myform.tomon3.value;
var p=(a+b+c)/2;
var s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
document.myform.javob.value=s;
}

Uchburchak tomonlarini kiriting

a tomon:

b tomon:

c tomon:

Uchburchak yuzasi

Yuqorida biz har bir qiymatni 1 ga ko’paytirdik: var a=1*document.myform.tomon1.value; Sababi shu-ki input formasiga kiritilgan sonni JavaScript harf deb tushunadi. 1 ga ko’paytirilganda uni don deb qabul qilinadi
Sqrt() –bu kvadrat ildiz hisoblanadi

Dasturimizga agarda biz xato (uchburchaklar teoremasiga mos bo’lmagan) son kiritsak, u holda javobda NaN degan yozuv ko’rsatiladi.

Yuqordagi kodni ozgina farqli kod bilan ham yozish mumkin…
Kod:

Untitled Document

function hisob(uchburchak) {
var a=1*uchburchak.tomon1.value;
var b=1*uchburchak.tomon2.value;
var c=1*uchburchak.tomon3.value;
var p=(a+b+c)/2;
var s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
uchburchak.javob.value=s;
}

Uchburchak tomonlarini kiriting

a tomon:

b tomon:

c tomon:

Uchburchak yuzasi

Browserdagi Ko’rinishi

Yuqoridagi Dasturimizda Uchburchak yuzasini javobi butun va o’nli sonlarda beriladi… utun sondan keyin 16 ta raqam mavjud bo’ladi. Masalan tomonlari 2, 4, 3 bo’lgan uchburchak yuzasini 2,9047375096555625 ekanligini ko’rish mumkin.

Keling shu sonnlarni verguldan keyin faqatgina 2 ta son ko’rsatadigan qilsak
Unga faqatgina mana bu kodni qo’shamiz:
x=x.toFixed(n)
kod

Untitled Document

function hisob(uchburchak) {
var a=1*uchburchak.tomon1.value;
var b=1*uchburchak.tomon2.value;
var c=1*uchburchak.tomon3.value;
var p=(a+b+c)/2;
var s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
s=s.toFixed(2);
uchburchak.javob.value=s;
}

Uchburchak tomonlarini kiriting

a tomon:

b tomon:

c tomon:

Uchburchak yuzasi

5-DARS
if- Agar…
faraz qiling Siz saytingizda shunday funksiyani qo’ymoqchisiz-ki, bunda user agar biror narsani bossa (yoki kiritsa) qandaydir hodisa yuz bersin, aks holda boshqa hodisa yuz bersin,
Masalan, user kerakli joy (masalan fomra)ga biror son kiritishi lozim bo´lsin, Agar o’sha user son o’rniga harf kiritsa uni ogohlantirish kerak bo’lsin.
Bunday ishlar if operatori bilan bajariladi.
Masalan, tushunarli bo’lishi uchun bunday desak bo’ladi:

if (eshik ochiq) {
ichkariga kiramiz
}
else { orqaga qytamiz }

buni uzbek tiliga aylantirsak:
“Agar eshik ochiq bo’lsa ichkariga kiramiz, Aks holda orqaga qaytamiz” bu shunchaki misol…

Keling, yaxshi, bitta kichkina misol ko’rsataman. Saytimizga kirgan odam (user),dan uning yoshini so’raymiz, Agar u 20 yoshdan kichik bo’lsa unga mana bu yozuvni ko’rsatamiz:
“Ukam siz hali yosh ekansiz”
aks holda (20 dan katta bo’lsa) mana bu yozuv chiqsin:
“Siz katta odam ekansiz”

Marhamat, sizga tayyor kod

sarlavha

function tekshir() {
var a=son.value;
if (a<20) { alert("Ukam siz hali yosh ekansiz") }
else { alert("Siz katta odam ekansiz") }
}

Siz hozir necha yoshda:

browserdagi ko´rinishi

Yuqoridagi kodni mana bunday ko´rinishda qilsak ham bo’ladi, biz bu yerda faqatgina var a=son.value ni if dagi a o’rniga qo’ydik

sarlavha

function tekshir() {
if (son.value<20) { alert("Ukam siz hali yosh ekansiz") }
else { alert("Siz katta odam ekansiz")}
}

Siz hozir necha yoshda:

Boshqa yana qiziqarli misol keltiraman Yuqorida biz siz bilan confirm oynasini ochish haqida gapirgan edik. Bunda quyidagi oyna ochilardi.

Biz endi if else funksiyasini qollab shunday programma tuzaylikki. Agar OK bosilsa websaytda OK ni bosganimiz haqida yozuv chiqsin. Aksincha Cancelni bosganda esa Cansel bosganimiz haqida yozuv chiqsin.
Sizgaa har doimgidek tayyor kodni taqdim etamiz.

Sarlavha

function savol() {
a=confirm(“Salom qaleysiz”)
if (a==true) {
document.write(“Siz OK ni bosdingiz”)}
else{document.write(“siz Canselni bosdingiz”)}
}

Agar OK bosilsa mana bunday kurinadi

Yangi oyna ochish
Websaytdagi biror tugmani bosganda yangi oyna ochish mumkin, Buni oddiy link bilan bajarish mukin. Ammo ochiladigan oynaning qanday bo’lidhini biz belgilamaymiz. JavaScript yordamida esa ana shu yangi oyna ochishni boshqarish mumkin . Keling misol keltiramiz

Mana bu kodni tekshirib ko’ring. Bunda biz yana bir web sahifa ochib uni nomini sahifa.html qo’yamiz. Quyidagi kod yozilgan sahifadagi tugma bosilsa ikkinchi sahifa ya’ni sahifa.html ochiladi

Sarlavha

function oyna(){
open(“sahifa.html”)
}

Bu yangi sahifa

Endi yuqoridagi kodni yanada ajoyib qilamiz, Yangi oyna ochilganda uning hajmi va ko’rinishini belgilaymiz… birorta fayl yaratib uni nomini sahifa.html deymiz
Mana tayyor kod:

Srlavha

function oyna() {
open(“sahifa.html”, “newWindow”, “width=300, height=200, toolbar=no, menubar=no”);
}

Bunda
width yangi oynaning eni pixelda
height oynaning balandligi
toolbar oynaning tepasidagi panel (yes/ no)
menubar oynadagi menu paneli (yes/ no)

Oynani yopish
Sahifadan chiqish uchun o’zimiz maxsus tugma yasaymiz, va shuni bosganda websaytdan chiqib ketadi
Mana tayyor kod:

Sarlavha

function chiqing(){
window.close()
}

Vaqtni ko’rsatish. Yil, oy, kun, soat…
Javascript yordamida Web Sahifada vaqtni ko’rsatish mumkin
Mana bu kodni yozing:

Sarlavha

document.write( Date() )

Bunda: hafta kuni (ingliz tilida), oy, sana, soat, minut, sekund, yil ko’rsatiladi. Masalan manda bunday ko’rindi:
Sat Dec 19 14:31:40 2009

Bu kodni mana bunday ham yozish mumkin

Sarlavha

bugun= new Date()
document.write(bugun)

Ushbu Date() obektini quyidagi metodlri bor:
getYear() -Yilni ko’rsatish
getFullYear() -Yilni ko’rsatish
getDate() -Sanani ko’rsatish
getDay() – Hafta Kunini ko’rsatish
getHours() -Soatni ko’rsatish
getMinutes() – Minutni ko’rsatish
getSeconds() – Sekundni ko’rsatish

Keling yaxshisi oddiy misol keltiramiz. Masalan getYear() kodini tekshiramiz.

Sarlavha

vaqt= new Date()
document.write( vaqt.getYear() )

Bunda faqat yil ko’rinadi. Agar masalan getDate() ni qo’ysak faqat sana ko’rinadi.
ESLATMA: Ko’rsatilayotgan vaqt sizning komputeringizdagi vaqt bo’yicha ko’rsatadi.

Endi esa websaytimizda soat, vaqt, sekundni ko’rsatamiz
Mana tayyor kod

Sarlavha

vaqt= new Date()
soat= vaqt.getHours()
daqiqa= vaqt.getMinutes()
soniya= vaqt.getSeconds()
document.write(“Hozir vaqt ” +soat+ “: ” +daqiqa+ “: ” +soniya )

Kodni sal boshqacha usulda ham yozish mumin masalan: Bunda yilni ham ko’rsatadi.

Sarlavha

vaqt= new Date()
document.write(“Hozir vaqtimiz ” +vaqt.getHours()+ ” soat ” +vaqt.getMinutes()+ ” daqiqa ” +vaqt.getSeconds()+ “soniya. ” +vaqt.getYear()+ ” yil” )

Endi shunday kod yozishni o’rganamiz-ki. Bunda vaqt web Sahifadagi formasida chiqsin…
Mana eng oddiy koddan boshlaymiz.

Sarlavha

function bajar() {
var vaqt=new Date()
var soat=vaqt.getHours()
var minut=vaqt.getMinutes()
var sekund=vaqt.getSeconds()
var natija=soat+ “:” +minut+ “:” +sekund
bugun.value=natija
}

Bu browserda taxminan mana bunaqa ko’rinishi kerak

Endi yanada ajoyibroq kod yozsak. Masalan biror tugma bosilganda vaqt ko’rsatilsin.
Buning kodi mana bunga o’xshash bo’ladi.

Sarlavha

function bajar() {
var vaqt=new Date()
var soat=vaqt.getHours()
var minut=vaqt.getMinutes()
var sekund=vaqt.getSeconds()
var natija=soat+ “:” +minut+ “:” +sekund
bugun.value=natija
}

Bu kodni boshqacha varianti ham mavjud
Marhamat mana bunday

Sarlavha

function bajar(nomi) {
var vaqt=new Date();
var soat=vaqt.getHours();
var minut=vaqt.getMinutes();
var sekund=vaqt.getSeconds();
var natija=soat+ “:” +minut+ “:” +sekund
nomi.bugun.value=natija;
}

Yuqoridagi kodda bundagi (yozish) –forma nomini bildiradi.
function bajar(nomi) bundagi (nomi) iborasi argument deyilib buttondagi yozish degan argumentni bildiradi. Xullas ushbu: nomi.bugun.value=natija; kodidagi nomi – iborasi yozish iborasiga almashadi

Etibor bergan bo’lsangiz yuqoridagi kodlarimizda Vaqtni ko’rsatishda sekundni ko’rsatuvchi sonlar 10 gacha bo’lganda bitta xonali bo’ladi.
Masalan bunday

Bu aslida mana bunday ko’rsatilishi kerak. Ya’ni bir xonali raqamning oldida nol bo’lidhi kerak
Mana buni to’g’irlashimiz uchun tayyor namuna kod:

Sarlavha

function bajar(obj) {
var vaqt=new Date();
var soat=vaqt.getHours();
var minut=vaqt.getMinutes();
var sekund=vaqt.getSeconds();
if (sekund<10) { natija=soat+ ":" +minut+ ":0" +sekund }
else { natija=soat+ ":" +minut+ ":" +sekund }
obj.bugun.value=natija;
}

Mana buning ko’rinishi
Bunda sekund 3 ning oldida nol 0 mavjud.

Kodni sal boshqacha usulda yozib ko’rsatilayotgan vaqtdagi sekund va minut sonlari 10 dan kichik bo’lsa oldiga nol qo’yamiz.. mana kod sizga

Sarlavha

function soat() {
hozir= new Date();
hour=hozir.getHours();
minut=hozir.getMinutes();
sekund=hozir.getSeconds();
vaqtimiz= +hour;
if (minut<10) { vaqtimiz+= ":0"+minut } else { vaqtimiz+= ":" +minut}
if (sekund<10) { vaqtimiz+= ":0"+sekund } else { vaqtimiz+= ":" +sekund}
document.forma1.vaqt.value=vaqtimiz;
}

Buning browserdagi ko’rinishi mana bunday bo’ladi.

Biz yozayotgan kodlarda soat vaqtlari Websaytda harakat qilmaydi. Balki har gal browserni reset qilsangiz yoki qayta ochsangiz o’sha paytdagi vaqtni ko’rsatadi xolos.
Keling shunaqa kod yozaylikki bunda soat bizning ko’z o’ngimizda o’zgarib tursin
Buning uchun mana bu setTimeout(1000) buyruqni yozish kerak. Bunda 1000 millisekund = 1 sekund bo’ladi. Demak har 1 sekundda yangi vaqt ko’rsatilib turiladi.

Bu buyruq Mana bunday ishlatiladi

Sarlavha

function soat() {
hozir= new Date();
//vaqt
hour=hozir.getHours();
minut=hozir.getMinutes();
sekund=hozir.getSeconds();
vaqtimiz=hour;
if (minut<10) { vaqtimiz+= ":0"+minut } else { vaqtimiz+= ":" +minut}
if (sekund<10) { vaqtimiz+= ":0"+sekund } else { vaqtimiz+= ":" +sekund}
document.forma1.vaqt.value=vaqtimiz;
setTimeout("soat()", 1000)
}

Yana bir ajoyib kodni aytmoqchiman
Sizga yuqorida setTimeout buyruqi haqida aytgan edik. Bu buyruq bilan biror hodisani qaysidir muddatda yuz beradigan qilish ham mumkin
Masalan 4 soniyadan keyin ogohlantirish oynasi chiqadigan qilmoqchi bo’lsak
Mana sizga tayyor kod

Sarlavha

function boshla() {
setTimeout( “alert(‘Mana men chiqdim’)”, 2000 );
}

Array, –
Massiv (tartib, qator) haqida

JavaScript tilidagi massiv bu obekt hisoblanadi. Bu xuddi guruhlar yoki tartibli qatorlarga o’xshaydi.
Buning yordamida JavaScriptga bir qancha malumotlarni kiritib keyin ularni boshqarish mumkin.

Massiv quyidagicha yoziladi:
massiv_nomi = new Array()

Keling, oddiy misol ko’rsatsak
Web sahifamizga 6 ta odam nomini kiritamiz. Keyin Array yordamida shulardan birini sahifaga chiqaramiz

Mana kod:

Sarlavha

odam= new Array(“Ahmad”, “Akbar”, “Muslim”, “Baxtiyor”, “Karim”, “Islom”)
document.write( odam[2] )

Buni tekshirib ko’rsangiz WebSahifada Muslim yozuvi ko’rinadi. Nimaga ? Chunki
document.write( odam[2] ) – Ushbu [2] soni bo’lgani uchun. JavaScript tili 0 dan boshlab sanaydi.
[0], [1], [2] – demak – [2] degani 3-yozuvni bildiradi. Ya’ni
0-Ahmad
1-Akbar
2-Muslim …
Qarabsizki, uchinchida “Muslim”yozuvi turgani uchun ham sahifada shu yozuv ko’rindi.

Bunday kod bilan Web sahifamizda ajoyib kalendar qo’yishimiz mumkin. Kalendardagi hafta kunlari har kuni o’zgaradi.

Bni bajarishdan avval yuqoridai Vaqtni ko’rsatish haqidagi darsni eslashimiz krak
Hafta kuni getDay buyruqi bilan olinadi.

Masalan

Sarlavha

vaqt=new Date()
hafta=vaqt.getDay()
document.write(hafta)

Bu kodni sal boshqacha yozish ham mumkin. Qaysi biri qulay bo’lsa shunisini tanlang

Sarlavha

hafta=new Date().getDay()
document.write(hafta)

Bunda Web sahifamizda hafta kunining raqami ko’rinadi. 0 dan 6 gacha bo’lgan birorta son ko’rinadi
Bu son komputerdagi hafta kuniga bog’liq
Yakshanba bo’lsa – 0 ko’rinadi
Dushanba – 1
Seshanba – 2
Chorshanba – 3
Payshanba – 4
Juma – 5
Shanba – 6

Xullas har kuni har xil son ko’rinib hafta kunini ko’rsatadi.

Endi shunday kod yozaylikki, Web sahifamizda hafta kunining nomini ko’rsatsin.
Mana tayyor kod

Sarlavha

vaqt=new Date()
raqam=vaqt.getDay()
kunlar=new Array(“Yakshanba”, “Dushanba”, “Seshanba”, “Chorshanba”, “Payshanba”, “Juma”, “Shanba”)
document.write(kunlar[raqam])

Kodimizga izoh bersak: Ushbu raqam=vaqt.getDay() yordamida hafta kuni raqamini aniqlaymiz Bunda Yakshanba 0 dan hizoblanib, Dushanba -1 , Seshanba -2 va hkz

Keyin bu raqam bilan
kunlar=new Array(“Yakshanba”, “Dushanba”, “Seshanba”, “Chorshanba”, “Payshanba”, “Juma”, “Shanba”)
kunlar guruhi (Array)dan shu tartib raqamga mos kunni olamiz va uni mana bu kod bilan ko’rsatamiz
document.write(kunlar[raqam])

Bundagi [raqam] aslida son bo’lib. Array ichidagi shu songa mos kunni webSahifaga olib chiqib ko’rsatadi.

Random – tasodif

JavaScript tilidagi random buyruqi bizga tasodifan biror qiymatni olish imkonini beradi.
Bu nima uchun kerak ?
Aytaylik, har gal saytga kirganda har xil matn ko’rinsin. Yoki saytni har gal yuklaganda har xil rasm ko’rinsin. Aytaylik biror test savollari o’yini tuzsak har xil savollar aralash berilsin… Xullas har qaysi dasturlash tilida random buyruqi juda muhim.

JavaScriptda matematik amallar Math obekti bilan bajariladi…

Masalan Math.random() kodini amalda ko’rsak: Bunda 0 va 1 oralig’idagi tasodifan birorta son chiqadi. Har gal sahifa yuklanganda turli raqamlarni ko’rish mumkin
Kod:

Sarlavha

document.write(Math.random())

Agar biz 10 gacha ixtiyoriy tasodifiy sonni chiqarmoqchi bo’lsak u holda 10 ga ko’paytirish kerak
Masalan kod bunday:

Sarlavha

document.write(Math.random()*10)

Bunda 10 gacha bo’ladigan tasodifiy sonlar istalgandek butunsiz (nol butun….) yoki natural son ham bo’lishi mumkin… Masalan 9.564 ham bo’lishi mumkin

Endi savol tug’iladi: Ana shu 10 gacha bo’ladigan sonlarni faqat yaxlit sonlar chiqadigan qilish iloji bormi ?. Ha albatta bor
Math obektining bazi bir bizga kerakli quyidagi metodlari bor

Math.random() – tasodifan 0 dan 1 gacha bo’lgan qiymatni tanlaydi
Math.round() – eng yaqin qiymatni tanlaydi , masalan, 5,3 ga yaqin son bu 5. Yoki 5,8 ga eng yaqin son esa 6 bo’ladi
Math.floor() – eng yaqin kichik butun sonni oladi, masalan 5,3 ga eng yaqin kichik son bu 5
Math.ceil() – eng yaqin katta butun sonni oladi, masalan 5,3 ga eng yaqin katta son bu 6 buladi
va boshqalar.

Yuqoridagilarni mana bu kod bilan tekshirish mumkin

Sarlavha

son = 5.8
alert(Math.ceil(son))
alert(Math.floor(son))
alert(Math.round(son))

Sahifaga kirgan zahoti Ketma ket quyidagi sonlar chiqadi. 6, 5, 6
Chunki 5.8 ga yaqin butun katta son Math.ceil bu 6
5.8 ga yaqin butun kichik son Math.floor bu 5
5.8 ga yaqin butun son Math.round bu 6

Endi shu uslub bilan 1 dan 10 gacha oraliqdagi birorta butun sonni tasodifan chiqadigan qilamiz.
Bu juda oddiy:
Malumki document.write(Math.random()*10) kodida natija 10 gacha bo’lgan har qanaqa butun bo’lmagan son ham chiqariladi. Endi shu sonni Math.ceil yoki Math.floor yoki Math.round orqali
Natijaga yaqin butun songa aylantiramiz

Kod:

Sarlavha

document.write(Math.round(Math.random()*10))

Bunda round o’rniga ceil yoki floor ham qo’yish mumkin.
Ammo floor qo’yilganda hech qachon 10 chiqmaydi balki 0 dan 9 gacha son chiqadi.
Nima uchun ?, Chunki Math.floor eng yaqin kichik sonni ko’rsatadi. Masalan Math.random()*10 natijasi 9.8 bo’lsa ham eng yaqin kichik (butun) son bu 9.
Agar Math.random()*10 natijasi 0.7 bo’lsa, bunga yaqin kichik qiymat 0 hisoblanadi.

Tasodifiy matnlar Array yordamida
WebSaytimizga shunday ajoyib funksiya qo’yamiz: Sayt har gal qayta yuklanganda unda turli matn ko’rinsin. Har safar kirganda har xil so’z chiqsin
Buning uchun yuqoridagi Math.random va Math.floor yoki Math.round yoki Math.ceil yordamida bajarish mumkin.

Sarlavha

odam= new Array(“Muslim”, “Umar”, “Akbar”, “Ahmad”, “Baxrom”)
tasodif=Math.floor(Math.random()*5)
document.write(odam[tasodif])

Biz yuqorida Math.floor ni qo’lladik. Nimaga ? Chunki Array qatoridagi
Muslim – [0]
Umar – [1]
Akbar – [2]
Ahmad – [3]
Baxrom – [4]
Qiymatlarga ega. tasodif=Math.floor(Math.random()*5) kodi bizga tasodifiy 0 dan 4 gacha bo’lgan sonni tanlaydi. Chunki ismlar ham [0] dan [4] gacha qiymatga ega.

Agarda tasodif=Math.round(Math.random()*5) ni qo’llasak [0] dan [5] gacha son chiqadi
Ismlar qatorida esa [5] qiymati mavjud emas.

Agarda tasodif=Math.ceil(Math.random()*5) bo’lsa [1] dan [5] gacha bo’lgan son chiqadi.
Bu holatda [0] qiymatdagi ism tashlab ketiladi. [5] qiymatdagi ism esa yo’q.
*******
Shunga qaramay Math.round() ni ham qo’llab yuqoridagi kodni yozish mumkin

Masalan Math.ceil() bilan kodni yozamiz. Buning uchun tasodif=Math.round(Math.random()*4)
Biz 4 sonini qo’ydik. Chunki [0] dan [4] gacha qiymat ko’rinadi.
Muslim – [0]
Umar – [1]
Akbar – [2]
Ahmad – [3]
Baxrom – [4]
Kod

Sarlavha

odam= new Array(“Muslim”, “Umar”, “Akbar”, “Ahmad”, “Baxrom”)
tasodif=Math.round(Math.random()*4)
document.write(odam[tasodif])

Tasodifiy maqollar- Random quotes
Yuqoridagi usulni qo’llab saytimizga ajoyib funksiya qo’shamiz. Sayt har gal yuklanganda har xil maqol ko’rinsin.
Mana tayyor kod
Kod:

Sarlavha

maqol = new Array(6);
maqol[0] = “inson ko’nglini ranjitma”;
maqol[1] = “Mehnatning tagi rohat”;
maqol[2] = “Sabr tagi oltindir”;
maqol[3] = “Hechdan ko’ra kech yaxshi”;
maqol[4] = “Yetti o’lchab bir kes”;
maqol[5] = “Olim bo’lish oson Odam bo’lish qiyin”;

tasodif = Math.floor(Math.random()*6);
document.write(“” + maqol[tasodif] + ““);

V.Muslim ning shu nomli maqolasidan, Saboq.uz