هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.27 MyBB منتشر شد


امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش مبانی «جاوااسکریپت» - فهرست مطالب در پست اول
#1
سلام به همه دوستای خوبم

من بعد از مشورت با مدیر سایت تصمیم گرفتم مبانی زبان جاوااسکریپت رو به زبان فارسی توی mybbIran قرار بدم، فقط به نکات زیر توجه کنید:

1. این آموزش از چند سایت خارجی جمع آوری و ترجمه شده و در اون از تجربیات خودم هم استفاده کردم تا یه آموزش نسبتا کامل بشه.
2. دوستان عزیز لطف کنید بین ارسالها به هیچ وجه ارسالی انجام ندید تا نظم تاپیک بهم نخوره.
3. در بعضی از درسها فایلهای تمرینی هم در نظر گرفتم که برای دانلود اونا باید به سایت منبع برید.
4. ترتیب ارائه دروس رو بر حسب ترتیبی که در سایت w3schools اتخاذ شده در نظر گرفتم.
5. همه منابع آموزشی حتما دارای عیب و نقص هستند، چنانچه در خلال دروس متوجه اشکال مهمی شدید لطفا فقط از طریق پیغام خصوصی به بنده اطلاع بدید تا به اون رسیدگی بشه.
6. در صورتی که این تاپیک با استقبال شما روبرو بشه آموزشهای بعدی گروهمون رو که شامل «آموزش html، آموزش php، آموزش jquery» و چند زبان دیگه هستند رو هم براتون قرار میدم.
7. چنانچه در ارسال دروس ناخیری بوجود اومد علتش مشغله کاری بنده است، ولی سعی میکنم درسها رو پشت سر هم قرار بدم براتون.


فهرست مطالب:


درس اول - مقدمه ای بر جاوا اسکریپت

جاوا اسکریپت بیشترین استفاده را دربین زبانهای اسکریپتی دارد و با اکثر مرورگرهای متداول نیز سازگاری داشته و اجرا میشود.

پیش نیاز:
قبل از اینکه شروع به خواندن این تاپیک کنید باید درک ابتدایی از زبان html یا xhtml داشته باشید. برای این کار به این لینک بروید.

جاوا اسکریپت چیست؟
  • جاوا اسکریپت به منظور افزایش انعطاف پذیری به صفحات وب طراحی شده است
  • جاوا اسکریپت یک زبان اسکریپتی است
  • جاوا اسکریپت یک زبان راحت برای یادگیری می باشد
  • جاوا اسکریپت را میتوان مستقیما در صفحات html و لابلای کدهای آن نوشت
  • جاوااسکریپت توسط مرورگرها ترجمه و اجرا میشود و نیازی به کامپایلر خاصی نیست
  • جاوااسکریپت همانند php یک زبان رایگان است و برای گسترش و استفاده از آن نیازی به خرید لایسنس خاصی نیست

آبا جاوااسکریپت همان جاوا است؟
خیر، اینها دو زبان کاملا متفاوت هستند چه از لحاظ مفاهیم و چه از لحاظ نوشتار.
جاوا یک زبان قدرتمند و پیچیده است که در گروه زبانهایی مانند C و ++C قرار میگیرد.

جاوااسکریپت چه میکند؟
  • جاوااسکریپت یک وسیله طراحی برای طراحان html فراهم میکند،
  • جاوااسکریپت میتواند متون پویا را در صفحات ایستای html قرار دهد،
  • جاوااسکریپت توانایی ایجاد عکس العمل نسبت به حرکات مختلف در صفحات وب را داراست،
  • جاوااسکریپت میتواند اجزای html را خوانده و بنویسد،
  • جاوااسکریپت میتواند اطلاعات موجود در فرم ها را قبل از ارسال به سرور کنترل کند،
  • جاوااسکریپت توانایی تسخیص نوع مرورگر کاربر را دارد،
  • جاوااسکریپت به منظور ساخت کوکی‌ها نیز کاربرد دارد.

نام اصلی جاوااسکریپت!
نام اصلی جاوااسکریپت ECMAScript است و جاوااسکریپت نام رسمی ECMAScript میباشد.
ECMAScript توسط ECMA organization بوجود آمده و گسترش یافته است.

پایان درس اول
فایل تمرین: ندارد
----------------------
منابع:
انجمن‌های تخصصی طراحی وب نوین‌ طرح
www.novintarh.com/forum
پاسخ
 سپاس شده توسطPars (۱۳۸۹/۶/۱۵، ۰۰:۰۷:۲۸ صبح) ، amir.01 (۱۳۸۹/۶/۱۵، ۰۰:۲۹:۱۳ صبح) ، Mohammad-Za (۱۳۸۹/۶/۱۵، ۱۰:۵۴:۴۱ صبح) ، Mt edition (۱۳۸۹/۶/۱۵، ۱۳:۱۲:۳۱ عصر) ، Ahmad (۱۳۸۹/۶/۱۷، ۲۱:۵۴:۲۶ عصر) ، AR@KST@R (۱۳۸۹/۶/۱۸، ۱۴:۲۸:۴۸ عصر) ، ojen (۱۳۸۹/۶/۲۴، ۱۶:۴۶:۲۹ عصر) ، FunSeT (۱۳۹۰/۲/۲۱، ۰۱:۴۹:۴۰ صبح) ، rizesh (۱۳۹۰/۵/۱۱، ۲۰:۰۹:۳۹ عصر)
#2
درس دوم: روش استفاده از کدهای جاوااسکریپت

از تگ <script> برای قراردادن کدهای جاوا اسکریپت در داخل صفحات html استفاده می‌شود.

قراردادن کدهای جاوا اسکریپت در داخل صفحات html
مثال زیر روش استفاده از جاوا اسکریپت برای نمایش متن در صفحه را نشان می‌دهد:

کد:
<html>
<body>
<script language="javascript">
document.write("Hello Students");
</script>
</body>
</html>

و مثال زیر چگونگی اضافه کردن کدهای html در داخل کدهای جاوا اسکریپت را نشان می‌دهد:

کد:
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>

توضیح مثالها:
همانطور که گفتیم از تگ <script> برای قراردادن کدهای جاوا اسکریپت در داخل صفحات html استفاده می‌شود. در داخل این تگ از یک ویژگی (attribute) برای تعیین نوع زبان استفاده میکنیم.

بنایراین تگ‌های <"script type="text/javascript> و <script/> نشان‌دهنده آغاز و پایان جاوا اسکریپت میباشد.

کد:
<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>

عبارت document.write یک دستور استاندارد جاوا اسکریپت برای نمایش داددن در صفحه html میباشد.
با قرار دادن دستور document.write بین دو تگ <script> و <script/> مرورگر میفهمد که این این عبارت یک دستور جاوا اسکریپت بوده و باید اجرا شود. در این مثال مرورگر جمله Hello World را در خورجی نمایش میدهد:

کد:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

نکته: در صورتی که این دستور و دستورات مشابه را در داخل تگهای <script> و <script/> قرار ندهید، مرورگر عین دستور را در خروجی نمایش میدهد. یعنی: document.write("Hello World!")

در مورد مرورگرهایی که از جاوا اسکریپت پشتیبانی نمیکنند:
در حال حاضر 95% مرورگرها از زبان جاوا اسکریپت پشتیبانی کرده و دستورات آن را اجرا میکنند، اما به عنوان قسمتی از جاوا اسکریپت استاندارد ما باید اقدام لازم برای آن دسته از مرورگرهایی که از این زبان پشتیبانی نمیکنند را انجام دهیم.
این مرورگرها دستورات جاوا اسکریپت را به صورت محتوای عادی صفحات وب نماش میدهند که برای یک طراح وب مورد خوبی نیست. برای جلوگیری از این واقعا میتوان از تگ کامنت زبان html استفاده کرد بدین صورت که ---!> را در ایتدای دستور و <---// را در انتهای آن قرار میدهیم. به مثال زیر توجه کنید:

کد:
<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>

نکته: دو ممیز (//) بکار رفته در <---// جزو نشانه های جاوا اسکریپت بوده و برای جلوگیری از ترجمه <-- بکار میرود.

پایان درس دوم
فایل تمرین: ندارد
------------------------------
منابع این درس:
انجمن‌های تخصصی طراحی وب نوین‌ طرح
www.novintarh.com/forum
پاسخ
 سپاس شده توسطMt edition (۱۳۸۹/۶/۱۵، ۱۳:۱۲:۳۳ عصر) ، Pars (۱۳۸۹/۶/۱۵، ۱۶:۴۶:۵۸ عصر) ، amir.01 (۱۳۸۹/۶/۱۵، ۱۷:۲۶:۱۹ عصر) ، Ahmad (۱۳۸۹/۶/۱۷، ۲۱:۵۶:۱۲ عصر) ، ojen (۱۳۸۹/۶/۲۴، ۱۶:۴۶:۳۴ عصر) ، FunSeT (۱۳۹۰/۲/۲۱، ۰۱:۵۰:۱۰ صبح)
#3
درس سوم: محل قرار دادن کدهای جاوااسکریپت

کدهای جاوااسکریپت را میتوان در مکان های زیر قرار داد:
1. در داخل head
2. در داخل body
3. در داخل هر دو تگ <head> و <body> بطور توامان
4. در خارج از صفحه (external)

و اما توضیح هر کدام از موارد فوق:

1. در داخل تگ <head>:
در صورتی که کدها را در داخل تگ head قرار دهیم، با توجه به نحوه کاربرد آنها ممکن است در هنگام لود شدن صفحه، فراخوانی نام function مورد نظر و یا انجام عملی خاص مانند کلیک روی یک دکمه اجرا شوند.

در مثال زیر من اسکریپت رو در داخل تگ head قرار دادم، در این حالت تمام اسکریپت در یک محل نوشته میشه و چیزی به محتوای صفحه که در داخل تگ body هستند اضافه نمیشه.

کد:
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
</body>
</html>

مثال فوق رو خودتون تکرار کنید و نتیجه رو ببینید. در این مثال اسکریپت در هنگام لود شدن صفحه اجرا میشود.
نکته: در مورد محتوای این مثال در درس‌های بعد مفصل توضیح میدم.

2. قرار دادن اسکریپت در داخل تگ body:
در این روش کل اسکریپت در داخل تگ‌های body نوشته میشه و از لحاظ نحوه اجرا تفاوت چندانی با حالت قبل ندارد. در این حالت اسکریپت‌ها در لابلای محتوای صفحه پخش میشوند و در صفحه های شلوغ گاها پیدا کردن آنها سخت میشود.
به مثال زیر توجه کنید:
کد:
<html>
<head>
</head>

<body>
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>

</html>

3. قراردادن اسکریپت در هر دو قسمت head و body:
در بیشتر مواقع مجبوریم اسکریپت‌ها رو در هر دو قسمت head و body بنویسیم.
کد:
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>

</html>

4. قراردادن اسکریپت در خارج از صفحه:
در صورتی که بخواهیم از یک اسکریپت در صفحات زیادی استفاده کنیم به جای آنکه کدها را در هر صفحه بنویسیم میتوانیم آنها را در یک صفحه مجزا با پسوند js. نوشته وذخیره کنیم و با یک تکه کد کوچک هر جا که نیاز بود آن را صدا بزنیم.

در این فایل جاوااسکریپت نیازی به استفاده از تگهای <script> و <script/> نیست.

برای فراخوانی این صفحه همانند قبل تگ <script> را مینویسیم و نام فایل js را به عنوان مقداری برای ویژگی src به این تگ اضافه میکنیم. این عملیات معمولا در داخل تگ head نوشته میشود.

کد:
<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>

-----------------------------------
منابع این درس:
novintarh
mft educations
w3schools
tizag
orginal link

فایل تمرین: ندارد


پیشاپیش عید سعید فطر رو به همتون تبریک میگم، امیدوارم نماز و روزه هاتون هم مقبول درگاه حق قرار گرفته باشه [تصویر:  rose.gif]
انجمن‌های تخصصی طراحی وب نوین‌ طرح
www.novintarh.com/forum
پاسخ
 سپاس شده توسطPars (۱۳۸۹/۶/۱۸، ۱۴:۲۴:۳۶ عصر) ، Mohammad-Za (۱۳۸۹/۶/۱۸، ۲۰:۰۷:۴۵ عصر) ، ojen (۱۳۸۹/۶/۲۴، ۱۶:۴۶:۴۰ عصر) ، FunSeT (۱۳۹۰/۲/۲۱، ۰۱:۴۹:۵۴ صبح)
#4
درس چهارم: چند نکته مهم

1. دستورات جاوااسکریپت نسبت به بزرگی و کوچکی حروف حساس هستند. یعنی alert همان aLert نیست.

2. توسط دستور زیر به مرورگر میگوییم تا در صفحه وب عبارت «سلام» را بنویسد:

کد:
document.write("سلام");

3. قرار دادن ; در پایان هر خط از دستور اختیاری است ولی استفاده از آن باعث ریبایی کار میشود. همچنین با استفاده از ; میتوان چنرین دستور را در یک خط نوشت.

4. به اعمال اختیاری که باعث زیبایی و خوانایی و تفکیک منظم دستورات هر زبان میشود good programming میگویند.

5. میتوان در بین دو تگ <script> و <script/> از چندین دستور استفاده کرد:

کد:
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

بطور کلی به فضای بین براکت باز "}" و براکت بسته "{" یک بلاک میگویند و هدف هر بلاگ اجرای توام دستورات داخل آن است.

6. همانطور که در مثال بالا میبینید، تمامی دستورات html را مانند نوشته های معمولی داخل " " میدهیم.

منابع این درس:
novintarh
orginal link

فایل تمرین: ندارد
انجمن‌های تخصصی طراحی وب نوین‌ طرح
www.novintarh.com/forum
پاسخ
 سپاس شده توسطPars (۱۳۸۹/۶/۲۷، ۲۰:۰۳:۴۳ عصر) ، FunSeT (۱۳۹۰/۲/۲۱، ۰۱:۵۰:۰۰ صبح) ، شماره مجازی (۱۴۰۱/۸/۲۶، ۰۱:۴۸:۳۸ صبح) ، گراف مسنجر (۱۴۰۱/۱۰/۳، ۰۴:۱۰:۵۹ صبح) ، چارتر ۴۲۴ (۱۴۰۲/۹/۱۲، ۱۵:۱۰:۳۰ عصر)


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان