Javascriptda boshlang'ich ko'nikmalar - Funksiyalar

Web dasturlash

Bu maqolada men imkoni boricha sizlarga funksiya haqida tushuntirib berishga harakat qilaman. Misollar yordamida ularni yaxshiroq tushunib olasiz degan umiddaman. Va ularni o'zingiz ham sinab ko'rishni maslahat beraman, chunki biron muammo yoki xatolik chiqsa siz uni hal qilish uchun urinasiz va aynan shu orqali asl manoni tushunib olasiz. Shu joyda yana bir narsa aytib o'tmoqchiman, siz ishlatadigan browserning consoleini yoqib qo'ying. Masalan hozirgi Chrome da o'zida o'rnatilgan, F12 tugmasini chrome da ochilgan sahifada bosilsa console ochiladi. Firefox da maxsus plugin bor firebug degan, agar siz Firefox ishlatsangiz shu pluginni o'rnatib oling.

Funksiya

Funksiya bu malum bir alohida vazifanini bajarish uchun ishlatiladigan amallar to'plami. Funksiya chaqirilgan holatdagina u ishga tushadi. Misol:

function myFunction(p1, p2) {
    return p1 * p2;              //bu funksiya p1 va p2 larning ko'paytmasi natijasini qaytaradi
}
function showAlert(){
    alert("salom");
}
showAlert();

function show_alert(msg){
    alert(msg);
}
show_alert("o'zgaruvchan xanarli alert");
var str = "boror bir string";
show_alert(str);

Yuqorida misolda ko'rib turganimizdek funksiya function kalit so'zi bilan elon qilinadi, undan keyin esa uning nomi elon qilinadi, oxirida esa () va {}. Funksiyaga nom berganda harflardan, raqamlar, underscore(_) va $ dan foydalanish mumkin. () ichida funksiya paramertlarini elon qiladi. Parametrlar o'zaro "," bilan ajaratiladi, paramertlar soni istalgancha bo'lishi yoki umuman bo'lmasligi mumkin. Parametrlar funksiya ichida xuddi local o'zgaruvchidek ishlaydi. {} ichida funksiya tanasi yani u bajaradigan vazifa yoziladi.

<html>
	<head>
	</head>
	<body>
		<div>
			<h2>Click hodisa</h2>
			<img src="pic_bulboff.gif" onclick="changeImage(event)"/>
		</div>
		<div>
			<h2>Hover hodisa</h2>
			<img src="pic_bulboff.gif" id="second_light" />
		</div>
		<script type="text/javascript">
		// rasm nomi, ushbu misolda rasmlar html file bilan bir joyda turibdi.
		var imgOn = "pic_bulbon.gif";
		var imgOff = "pic_bulboff.gif";
		
		/* imagening click hodisasi ishlagan payti chaqirilhan funksiya
		   event haqida batafsil keyinroq so'z yuritamiz
		   bu yerda event image html elementining click hodisasi
		*/
		function changeImage(event) {
		var image = event.currentTarget;
		/* event.currentTarget bu click bo'lgan elementni o'zini qaytaradi */
		
		/* if da shu biz click qilgan imagening src attributi 
		   'bulbon' so'zi bor yoki yo'qligiga tekshiryapti, oddiy aytganda:
		   1 satr ichidan 2-satrni  qidirishga misolda.
		   Nega aynan 'bulbon' ? - chunli etibor bergan bo'lsangiz
		   yonib turgan (var imgOn) suratning nomida aynan shu so'z bor, imgOff da esa yo'q
		*/
			if (image.src.match("bulbon")) {
				image.src = imgOff; // surat ochib turgan chiroq surati bilan almashtirilyapti
			} else { 
				image.src = imgOn;  // surat yonib turgan chiroq surati bilan almashtirilyapti
			}
		}
		
		var secondLight = document.getElementById('second_light');
		
		secondLight.onmouseover = mouseOver;  // suratning mouseover hodisasiga funksiya bog'lab qo'yildi
		secondLight.onmouseout = mouseOut;    // suratning mouseout hodisasiga funksiya bog'lab qo'yildi
		
		function mouseOver(){
		/* console.log("malumot"); yoki console.log('malumot'); - bu dasturchiga yordamchi funksiya
		   u yordamida siz consolda loglarni chiqarib funksiyalar 
		   qanday ishlayotgani haqida malumotga ega bo'lishingiz mumkin
		*/
			//console.log('biron bir xabar');
			console.log('mouse over');
			secondLight.src = imgOn;  // surat yonib turgan chiroq surati bilan almashtirilyapti
		}
		function mouseOut(){
			console.log('mouse leave');
			secondLight.src = imgOff;  // surat ochib turgan chiroq surati bilan almashtirilyapti
		}
		
		</script>
		<style type="text/css">
			div {
				width: 49%;
				display:inline-block;
				text-align: center;			
			}
		</style>
	</body>
</html>

Anonim funksiya

var func = function(){
    // qandaydir kod
}

Anonim funksiya bu oddiy qilib aytganda nomsiz funksiya. Yuqpridagi misol ham anonim funksiyaga misol bo'ladi. Bu misolda oddiy ozgaruvchi yaratilyapti, tenglikning ong tarafida anonim funksiya yaratilib u shu o'zgaruvchiga o'zlashtirilyapti.

function return_function(p1, p2){
    var res = p1*p2;
    return function(type){
        if(type == 1){
            return res/100;
        } else {
            return res+"%";
        }
    }
}
var func = return_function(11, 12);
/*
shu yerda func ning qiymati quyidagicha:
   func = function(type){
        if(type == 1){
            return res/100;
        } else {
            return res+"%";
        }
    }

demak endi func ham funksiya, endi uni func() qilib chaqirganimizdagina ishlaydi
*/
func(1);  // natija: 1.32 ga teng
func();   // natija: 132% ga teng
func(21); // natija: 132% ga teng

Yuqoridagi misolga etibor bergan bo'lsangiz return_function funksiyaning return qiymati ham funksiya. Javascriptda hech qaysi tillarda uchramagan holar funksiyani ham return qilish yani huddi o'zgaruvchi sifatida qaytarish yoki ishlatish mumkin. Hozirda javascriptning shu xususiyati scala da o'zlashtirilgan.
Yuqoridagi funksiyada yana bir ahamiyat berilishi kerak bo'lgan narsa bor, bu funksiya o'zgaruvchisini ichki funksiya ichida ishlatilishi. Chunki res return_function uchun local bo'lgan o'zgaruvchi bo'lgani bilan ichki fucksiya uchun u global o'zgaruvchi.
Bu joydan siz source lani olishingiz mumkin.

javascript