کتابخانه prototype
اضافه کردن کتابخانه Prototype به صفحه وب
برای استفاده از یک کتابخانه JavaScript، باید آنرا به صفحه وبتان اضافه نمایید.
برای اضافه کردن کتابخانه، باید از تگ <script> استفاده کنید و خصوصیت src آنرا با URL کتابخانه تنظیم نمایید.
اضافه کردن Prototype
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js>
</script>
</head>
<body>
</body>
</html>
توصیف Prototype
کتابخانه Prototype توابعی را برای برنامه نویسی آسان تر، فراهم می کند.
مانند jQuery، کتابخانه Prototype نیز تابع ()$ را دارد.
تابع ()$، معادل متد ()document.getElementById در JavaScript عمل می کند. اگر با توجه به مدل DOM در HTML، شناسه یک عنصر به آن ارسال شود، در Prototype به کلیه خصوصیت ها و متدهای آن دسترسی خواهید داشت.
برخلاف jQuery، کتابخانه Prototype متد ()ready را ندارد. بجای آن در Prototype ملحقاتی به مرورگر و مدل DOM اضافه شده است.
اختصاص یک تابع به رویداد onload:
در JavaScript، می توان یک تابع را به یک رویداد مثل onload اختصاص داد:
روش JavaScript:
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello Prototype";
}
onload=myFunction;
معادل کد بالا در Prototype با کمی تفاوت:
روش Prototype:
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
سه پارامتر ورودی شیء ()Event.observe:
- پارامتر اول (window): شیء DOMی است که می خواهید روی آن کار کنید.
- پارامتر دوم (load): رویدادی است که می خواهید به ازای آن کاری انجام شود.
- پارامتر سوم (myFunction): تابعی است که می خواهید صدا زده شود.
کار کردن با Prototype
مثال زیر را امتحان کنید:
مثال (کتابخانه prototype)
<html>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
</script>
<script>
function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
مثال زیر را نیز امتحان کنید:
مثال (کتابخانه prototype)
<html>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
</script>
<script>
function myFunction()
{
$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
همان طور که در مثال بالا می بینید، مانند jQuery در Prototype نیز می توانید چندین کار را بطور همزمان روی یک شیء انجام دهید. (زنجیره ای کردن یا Chaining)
$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 18527