ورود

***ADMIN*** · 05-09-1396، 11:23 ب.ظ

جاوااسکریپت زبان برنامه‌نویسی صفحات وب هست که باعث میشه این صفحات، از یک ساختار مُرده به یک موجود زنده تبدیل بشن و با کاربر تعامل داشته باشن و به رفتارهایی که کاربر در صفحه انجام میده واکنش نشون بدن و حتی در پشت صحنه با سرور تعامل داشته باشن.

توی این تاپیک قصد داریم قدم به قدم، JavaScript رو بعنوان زبان برنامه‌نویسی قدرتمندی که این روزها حتی در سمت سرور هم باکمک ابزارهایی نظیر NodeJS و... قابل اجراست و با وجود ابزارهایی مثل React Native، برای برنامه‌نویسی موبایل هم ازش استفاده میشه، بهتون یاد بدیم.

این آموزش، ترکیبی از محتوای آموزشی سایت W3Schools هست که تجربیات شخصی خودم رو هم بهش اضافه کردم. همچنین محتوای همین آموزش متنی، بصورت پکیج آموزش تصویری همراه با کدهای توضیح داده شده و چندین eBook مفید، ازطریق نشانی http://shop.ncis.ir/javascript قابل تهیه است.

پس با ما همراه باشین.

فهرست مطالب (درحال تکمیل)

***ADMIN*** · 05-09-1396، 11:27 ب.ظ

چرا باید جاوااسکریپت رو یاد بگیریم؟

JavaScript یکی‌از 3 زبانی هست که هر توسعه‌دهنده‌ی وب باید یاد داشته باشه:

HTML برای تعریف محتوای صفحات وب
CSS برای مشخص‌کردن چیدمان ظاهری صفحات وب
JavaScript برای برنامه‌نویسی رفتار صفحات وب

توی این آموزش یاد خواهید گرفت که چطور از جاوااسکریپت درکنار HTML و CSS استفاده کنید.

***ADMIN*** · 05-09-1396، 11:42 ب.ظ

تاریخچه‌ی JavaScript

آیا میدونستین که جاوااسکریپت و جاوا دو زبان کاملاً متفاوت هستن؟ هم ازنظر مفهوم و هم ازنظر طراحی. جاوااسکریپت توسط Brendan Eich در سال 1995 ساخته‌شد و در سال 1997 تبدیل به یک استاندارد ECMA (مخفف European Computer Manufacturers Association) شد. کد ECMA-262 اسم رسمی این استاندارده. ECMAScript هم اسم رسمی زبان جاوااسکریپت محسوب میشه. نسخه‌های مختلف جاوااسکریپت بصورت زیر هست:

سال 1997 نسخه‌ی ECMAScript 1 اولین نسخه‌ی این زبان منتشر شد.
سال 1998 نسخه‌ی ECMAScript 2 شامل یکسری تغییرات ویراستاری بود.
سال 1999 نسخه‌ی ECMAScript 3 منتشر شد که پشتیبانی‌از عبارات باقاعده و try/catch اضافه شد.
سال 2009 نسخه‌ی ECMAScript 5 منتشر شد (نسخه‌ی 4 هیچ‌وقت منتشر نشد). درواقع این پرش از نسخه‌ی 4 نشان‌دهنده‌ی تغییرات زیادی بود که در ساختار داخلی رخ داده بود. در این نسخه، حالت Strict Mode و همچنین پشتیبانی از JSON اضافه شد.
سال 2011 نسخه‌ی ECMAScript 5.1 منتشر شد که باز شامل هم یکسری تغییرات ویراستاری و ساختاری در کدنویسی داخلی بود و قابلیت جدیدی اضافه نشد.
سال 2015 نسخه‌ی ECMAScript 6 منتشر شد که پشتیبانی از کلاس‌ها و ماژول‌ها رو در بر می‌گرفت.
سال 2016 نسخه‌ی ECMAScript 7 منتشر شد که عملگر نمایی (**) و Array.prototype.includes اضافه شد.

نسخه‌های 6 و 7 به‌ترتیب نسخه‌های 2015 و 2016 هم نامیده میشن.

نسخه‌ی 3 توی تمام مرورگرها پشتیبانی میشه.

نسخه‌ی 5 توی تمام مرورگرهای مدرن امروزی پشتیبانی میشه. البته Internet Explorer 9 از قابلیت use string نسخه‌ی 5 پشتیبانی نمیکنه.

بخش‌هایی از قابلیت‌های نسخه‌ی 6 (نه تمام قابلیت‌هاش) توی مرورگرهای مدرن امروزی پشتیبانی میشه.

نسخه‌ی 7 به‌زحمت توی مرورگرها پشتیبانی میشه.

***ADMIN*** · 06-09-1396، 12:00 ق.ظ

آشنایی اولیه با جاوااسکریپت
درطول این آموزش، حتماً روی لینک‌هایی که عنوان امتحان کنید دارن، کلیک کنین تا کارکرد مثال‌ها رو در عمل ببینین.

جاوااسکریپت میتونه محتوای HTML رو تغییر بده
یکی‌از متدهای متعددی که توی جاوااسکریپت وجود داره، getElementById() هست. این مثال، از این متد برای پیداکردن یک عنصر HTML با id="demo" استفاده میکنه و محتوای اون رو (innerHTML) به متن Hello JavaScript تغییر میده.

document.getElementById("demo").innerHTML = "Hello JavaScript";

امتحان کنید

نقل قول:نکته: جاوااسکریپت هم از کوتیشن تک ' و هم از کوتیشن جفت " پشتیبانی میکنه.

جاوااسکریپت میتونه خصوصیات عناصر HTML رو تغییر بده
این مثال، یک تصویر HTML رو با تغییر خاصیت src یک تگ img عوض میکنه.

کد:

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attributes.</p>

<p>In this case JavaScript changes the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>

</html>

امتحان کنید

جاوااسکریپت میتونه استایل CSS عناصر HTML رو تغییر بده
تغییر استایل CSS عناصر، شکل دیگری از ویرایش خصوصیات عناصر HTML هست:

document.getElementById("demo").style.fontSize = "35px";
// or
document.getElementById('demo').style.fontSize = '35px';

امتحان کنید

جاوااسکریپت میتونه عناصر HTML رو مخفی کنه
مخفی‌کردن عناصر HTML با تغییر استایل display انجام میشه:

document.getElementById("demo").style.display = "none";
// or
document.getElementById('demo').style.display = 'none';

امتحان کنید

جاوااسکریپت میتونه عناصر HTML رو ظاهر کنه
نمایش‌دادن عناصر HTML هم میتونه با تغییر استایل display انجام بشه:

document.getElementById("demo").style.display = "block";
or
document.getElementById('demo').style.display = 'block';

امتحان کنید

***ADMIN*** · 13-09-1396، 07:43 ب.ظ

کدهای جاوااسکریپت رو کجا بنویسیم؟

تگ <script>
توی HTML باید کدهای JavaScript رو داخل تگ‌های <script> و </script> بنویسیم. مثال:

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

امتحان کنید

نقل قول:مثال‌های قدیمی جاوااسکریپت ممکنه از خصوصیت type هم استفاده کنن:
<script type="text/javascript">
خصوصیت type ضروری نیست. JavaScript زبان اسکریپت‌نویسی پیشفرض HTML هست.

توابع و رویدادهای JavaScript
یک تابع جاوااسکریپت، یه بلوک از کدهای JavaScript هست که میتونه در زمانی که «فراخوانی» میشه، اجرا بشه. برای مثال یه تابع میتونه وقتی که یه رویداد اتفاق بیفته، مثل وقتی که کاربر روی یک دکمه کلیک میکنه، صدا زده بشه.

نقل قول:درمورد توابع در بخشهای آینده چیزهای خیلی بیشتری یاد میگیرین.

جاوااسکریپت در داخل تگ <head> یا <body>
شما میتونین هر تعداد اسکریپت که دوست داشته باشین، توی یه سند HTML قرار بدین. اسکریپت‌ها میتونن توی تگ <body> یا قسمت <head> یه صفحه‌ی HTML یا در هر دو بخش قرار بگیرن.

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

کد:

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction() {

    document.getElementById("demo").innerHTML = "Paragraph changed.";

}

</script>

</head>

<body>

<h1>A Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>

</html>

امتحان کنید

جاوااسکریپت داخل تگ <body>
توی این مثال، یک تابع جاوااسکریپت در قسمت <body> صفحه‌ی HTML قرار گرفته. این تابع وقتی که یک دکمه فشار داده میشه، صدا زده میشه:

کد:

<!DOCTYPE html>

<html>

<body> 

<h1>A Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>

function myFunction() {

   document.getElementById("demo").innerHTML = "Paragraph changed.";

}

</script>

</body>

</html>

امتحان کنید

جاوااسکریپت خارجی
اسکریپت‌ها رو میشه توی فایل‌های جداگانه هم قرار داد. به چنین فایل‌هایی اسکریپت خارجی میگن:

function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}

اسکریپت‌های خارجی زمانی که یک کد مشابه توی چند صفحه‌ی وب بکار بره، مفید و کاربردی هستن. فایل‌های JavaScript با پسوند .js ذخیره میشن. برای استفاده از یه اسکریپت خارجی، اسم فایل اسکریپت رو توی خصوصیت src (مخفف source) از تگ <script> قرار بدین:

<!DOCTYPE html>
<html>
<body>

<script src="myScript.js"></script>

</body>
</html>

امتحان کنید

میتونین ارجاع به یه فایل اسکریپت خارجی رو توی تگ <head> یا <body> برحسب تمایلتون قرار بدین. اسکریپت درست مثل زمانی که مستقیماً داخل تگ <script> نوشته شده باشه، کار میکنه.

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

مزایای جاوااسکریپت خارجی
قراردادن اسکریپت‌ها توی فایل‌های جداگانه، مزایای زیر رو در بر داره:

محتوای HTML و کد رو از هم جدا میکنه
باعث میشه خوندن و نگه‌داری HTML و JavaScript راحت‌تر بشه
فایل‌های جاوااسکریپت Cachشده میتونن سرعت بارگذاری صفحات رو بیشتر کنن

برای اضافه‌کردن چند اسکریپت به یک فایل، باید از چند تگ <script> استفاده کنین:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

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

<script src="https://www.w3schools.com/js/myScript1.js"></script>

امتحان کنید

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

<script src="/js/myScript1.js"></script>

امتحان کنید

نقل قول:شما میتونین اطلاعات بیشتری رو درمورد مسیرها توی این لینک مطالعه کنید: مسیر فایل‌های HTML

ورود
نام‌کاربری
رمزعبور:	فراموشی رمزعبور
	مرا به‌خاطر بسپار.