اضافه کردن کتابخانه Prototype به صفحه وب

Wiki

برای استفاده از یک کتابخانه JavaScript، باید آنرا به صفحه وبتان اضافه نمایید.

برای اضافه کردن کتابخانه، باید از تگ <script> استفاده کنید و خصوصیت src آنرا با URL کتابخانه تنظیم نمایید.

اضافه کردن Prototype

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js>
  </script>
</head>
<body>
</body>
</html>

توصیف Prototype

Wiki

کتابخانه Prototype توابعی را برای برنامه نویسی آسان تر، فراهم می کند.

مانند jQuery، کتابخانه Prototype نیز تابع ()$ را دارد.

تابع ()$، معادل متد ()document.getElementById در JavaScript عمل می کند. اگر با توجه به مدل DOM در HTML، شناسه یک عنصر به آن ارسال شود، در Prototype به کلیه خصوصیت ها و متدهای آن دسترسی خواهید داشت.

برخلاف jQuery، کتابخانه Prototype متد ()ready را ندارد. بجای آن در Prototype ملحقاتی به مرورگر و مدل DOM اضافه شده است.

اختصاص یک تابع به رویداد onload:

در JavaScript، می توان یک تابع را به یک رویداد مثل onload اختصاص داد:

روش JavaScript:

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello Prototype";
}
onload=myFunction;

معادل کد بالا در Prototype با کمی تفاوت:

روش Prototype:

function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);

سه پارامتر ورودی شیء ()Event.observe:

  • پارامتر اول (window): شیء DOMی است که می خواهید روی آن کار کنید.
  • پارامتر دوم (load): رویدادی است که می خواهید به ازای آن کاری انجام شود.
  • پارامتر سوم (myFunction): تابعی است که می خواهید صدا زده شود.

کار کردن با Prototype

Wiki

مثال زیر را امتحان کنید:

مثال (کتابخانه prototype)

<!DOCTYPE html>
<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)

<!DOCTYPE html>
<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!");

READ MORE