PDA

View Full Version : نوشتن یه jquery ساده واسه کارای ساده


olampiad
چهارشنبه 15 آبان 1392, 20:20 عصر
سلام
من به خاطر اینکه به کتابخونه jquery عادت کرده بودم تو خیلی جاها گیر کردم.
چون از پشت پرده jquery خبر نداشتم.
حالا اومدم javascript رو از ابتدا شروع کنم و یاد بگیرم و با کمک اساتید بعضی توابع ساده jquery رو باز نویسی کنم.
ابتدا می شه یکی دو تا منبع واسه یادگیری javascript نام ببربد.
من سوالاتم رو تماما تو این تاپیک می پرسم.
سوال اول :
به این کد یه نگا بندازید



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
<div class="hamid" style="width:100px; height:100px; background:#FC3; margin:auto;border:1px solid;"></div>
<div class="hamid" style="width:1000px; height:400px; margin:auto; background:#036;"></div>
<script type="text/javascript">
function $(id)
{
return document.querySelector(id);
}
$('.hamid').style.background='red';
</script>
</body>
</html>



تو این کد من می خوام یه چیزی شبیه سلکتور $ جی کوئری بنویسم
اولین کلاس hamid رو انتخاب می کنه و بعد اون کلاس های دیگرو انتخاب نمی کنه.
مشکل از کجاست؟
بی نهایت ممنون
2undercover
چهارشنبه 15 آبان 1392, 20:41 عصر
به این خاطر که توی jQuery شما می تونی روی یک مجموعه از اشیا کار کنی ولی توی Js نه الان شما وقتی از اون تابعی که خودتون نوشتید استفاده می کنید اون تابع یک آرایه از اشیا رو برمی گردونه و وقتی یک عمل روی اون آرایه انجام بدید روی تمام اون اشیا اجرا نمیشه!
olampiad
چهارشنبه 15 آبان 1392, 21:25 عصر
سلام
حالا من چیکار کنم که روی همه ی اون اشیا اجرا بشه.
راه حلش چیه؟
ممنون
2undercover
پنج شنبه 16 آبان 1392, 07:00 صبح
یک راهش اینه که تابع Selector ی که خودتون نوشتید رو مثل jQuery پیاده سازی بکنید.

و راه ساده تر (البته اگر بخواید برای هر انتخاب این کار رو بکنید کد هاتون خیلی حجیم میشه) پیمایش آرایه توی حلقه ی for و اجرای اون عمل روی تک تک اون هاست:


var objects = document.getElementsByClassName('class');
for(var i = 0, object = objects[i]; i < length; i++) {
// Your actions on object
}
olampiad
پنج شنبه 16 آبان 1392, 08:44 صبح
چه طور می تونم تابع Selector ی که خودم نوشتم رو مثل jQuery پیاده سازی کنم.
یه راهنمایی ساده می کنید.
بی نهایت ممنون
2undercover
جمعه 17 آبان 1392, 05:55 صبح
به این مثال توجه کنید یک نمونه کوچک از jQuery:

http://jsfiddle.net/vm9JD/ (http://jsfiddle.net/vm9JD/)
olampiad
جمعه 17 آبان 1392, 16:30 عصر
سلام
ببخشین به این کد یه نگا بندازید.
var HTMLObjects = function( DOMObjects ) {
this._ = DOMObjects;
return this;
};
تو اینجا چرا this به همراه ._ اومده.
منظور از ._ تو این کد چیه؟
2undercover
جمعه 17 آبان 1392, 16:49 عصر
اون نام فیلدی هست که عناصر انتخاب شده رو در بر می گیره. یعنی اینجوری:


{_: objects}
olampiad
جمعه 17 آبان 1392, 17:20 عصر
بی نهایت ممنون
منظور از prototype چیه؟
2undercover
یک شنبه 19 آبان 1392, 12:49 عصر
اینو بخونید:

http://stackoverflow.com/questions/572897/how-does-javascript-prototype-work/572996#572996
nida_1987
سه شنبه 21 آبان 1392, 00:25 صبح
منظور از prototype چیه؟

تو جاوا اسکریپت آبجکتی به نام prototype وجود داره که میتونیم باهاش زبان جاوا اسکریپت رو بسط بدیم، مثلا میتونیم باهاش کلاس ها و متدهای جاوا اسکریپت رو تغییر و بسط بدیم روشهای مختلفی برای استفاده از این آبجکت وجود داره
مثلا class x. prototype {};
البته این کلاس، کلاس های اچ تی ام ال نیستن، در واقع با prototype امکانات هسته ی زبان را بالا میبریم
nida_1987
سه شنبه 21 آبان 1392, 01:35 صبح
شما میخوای تابعی شبیه تابع $ جی کوئری رو بنویسی که حداقل یه کار انجام بده اما حتی روشهای ساخت آبجکت در جاوا اسکریپت رو نمی دونی
برای ساخت آبجکت 4 راه وجود داره

// getElementsByTagName خروجی آرایه ای از آبجکتها

// getElementsByClassName خروجی آرایه ای از آبجکتها

// getElementById خروجی صرفا آبجکت

//this برای ایونتهایی که به شکل اتریبیوت مینویسیم دیس به همون المان اشاره میکنه
olampiad
سه شنبه 21 آبان 1392, 12:42 عصر
سلام
بهتره من برم ابتدا زبان جاوا اسکریپت رو به طور حرفه ای و کامل یاد بگیرم بعد بیام دنبال ابن مسائل.
میشه چند تا منبع فارسی خوب برای یادگیری جاوا اسکریپت نام ببرید.
بی نهایت ممنون
2undercover
چهارشنبه 22 آبان 1392, 19:01 عصر
راستش فارسی که سراغ ندارم ولی انگلیسی اینا دو تا منبع خوب هست:

Javascript | MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript)
Sitepoint | JS (http://www.sitepoint.com/javascript/)