Categories: تجارت الکترونیکطراحی وب

آموزش جاوااسکریپت – ساختار زبان

سلام دوستان. در جلسه قبل (جلسه اول – آشنایی با جاوااسکریپت و قابلیت های این زبان) از آموزش جاوااسکریپت آشنایی مختصری با قابلیت ها و با یک تعریف ساده تر وظایف جاوااسکریپت در یک صفحه وب آشنا شدید. حال زمان آن رسیده که اندکی دست به کیبورد شوید و همراه با ما کدهای مثال را بنویسید و تست کنید تا با ساختار این زبان اسکریپتی محبوب ، شیرین و قوی آشنا شوید.

ساختار زبان جاوااسکریپت

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

تگ script و نحوه نوشتن اسکریپت

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

نکته : پیش از این لازم بود که در تگ <script> ویژگی type با مقدار text/javascript قید شود :

<script type="text/javascript"></script>

که با معرفی HTML5 دیگر نیازی به قید این ویژگی نیست و تگ <script> به تنهایی نوشته می شود:

<script>

            //your script…

</script>

قرار دادن سمی کالن (Semicolon) در پایان هر خط از کدهای جاوااسکریپت اختیاری است ولی بهتر است عادت کنید حتماً آنرا به کار ببرید. این عادت به شما کمک خواهد کرد که اسکریپت های خود را فشرده کنید و در یک خط قرار دهید تا حجم فایل js شما کاهش پیدا کند.

برای نوشتن توضیحات (کامنت) در میان کدهای جاوااسکریپت کافیست قبل از آن از کاراکتر بک اسلش (/) دو بار پشت سر هم استفاده کنید.

<script>

//put here your comment…

</script>

و برای نوشتن توضیحات در چند خط و یا غیر فعال کردن قسمتی از کدهایی که نوشته اید می توانید بصورت زیر عمل کنید:

<script>

/*put here your comment…

put here your comment…

put here your comment… */
</script>

این روش زمانی که می خواهید قسمتی از اسکریپت خود را جهت یافتن خطا غیر فعال کنید بسیار کاربردی خواهد بود.

استفاده از فایل پیوست با فرمت js

غالباً توابع بزرگ و اسکریپت های طولانی را مستقیماً درون سند HTML نمی نویسند بلکه در یک فایل با فرمت js قرار خواهند گرفت سپس به سند HTML پیوست می شوند.

نکته : درون فایل js نیازی به نوشتن تگ <script> نیست.

فایل حاوی کدهای جاوااسکریپت شما بدین گونه به سند HTML شما الحاق می شوند :

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

این خط کد فایل شما را از آدرس مورد نظر در سند HTML فراخوانی می کند. این خط را در هر کجایی از سند خود می توانید بنویسید ولی باز هم به شما اطمینان خواهیم داد که بهترین محل را برای پیوست فایل های خارجی جاوااسکریپت با توضیح کامل برای شما بیان خواهیم نمود.

حروف بزرگ و کوچک (Case Sensitive)

زبان جاوااسکریپت به بزرگی و کوچکی حروف حساس است و آنها را متمایز از همدیگر می داند. به این گونه زبان ها Case Sensitive می گویند.

از این ویژگی در قسمت انتخاب نام متغیرها می توانید بهره ببرید.

فاصله های خالی (White Space)

جاوااسکریپت اهمیتی به فاصله های خالی نمی دهد و تاثیری در اجرای دستورات آن ندارد. از این ویژگی برای نوشتن منظم اسکریپت ها استفاده می شود. نظم در کد نویسی و خوانایی باعث می شود که خود و یا دیگران در میان خطوط نوشته شده سردرگم نشوید و براحتی خطایابی و ویرایش را انجام دهید.

متغیرها (Variable)

متغیرها در جاوااسکریپت مانند هر زبان دیگر به گونه ای در برگیرنده و یا حافظه ای برای ذخیره اطلاعات هستند. این اطلاعات می تواند گونه های مختلفی داشته باشد مثلاً یک رشته متنی ، یک عدد و یا یک شیء (در مورد اشیاء بعداً مفصل خواهید آموخت) باشد.

هر متغیر یک نام اختصاصی برای خود دارد که شما انتخاب می کنید. نامی که انتخاب می کنید باید شرایطی را دارا باشد.

نام متغییر حتماً باید با یک حرف آغاز شود نه عدد. (البته دو کاراکتر $ و _ نیز می توانند در آغاز نام متغییر بیایند)
همانطور که قبلاً هم اشاراتی کردیم جاوااسکریپت به بزرگی و کوچکی حروف حساس است پس در نام گذاری هم به این نکته توجه داشته باشید. (مثلاً متغییر p با متغییر P متفاوت است.)

برای ایجاد یک متغییر (declaring) به صورت زیر عمل می کنیم:

var number1;

در دستور بالا ما یک متغییر ایجاد کردیم که هنوز هیچ مقداری برای آن وجود ندارد.برای مقدار دادن کافیست بصورت زیر عمل کنیم :

var number1;

var string_one;

Number1 = 255;

String_one = "Hello world.";

توجه کنید که رشته های متنی را حتماً باید درون کوتیشن (‘ Hello world ’) یا دابل کوتیشن (” Hello world “) قرار دهید.

دستورات بالا بصورت خلاصه تر نیز می توان اینگونه نوشت :

var string_one = 'Hello world.';

var number1 = 255;

و یا خلاصه تر بدین گونه : (بهینه ترین روش)

var string_one = 'Hello world.' , number1 = 255;

نکته : بهتر است عادت کنید تمام متغییر های مورد نیاز را اول و در یک محل (معمولاً خطوط ابتدایی اسکریپت) ایجاد کنید و بعداً ار هر کدام در محل مورد نیاز استفاده ببرید.

نکته : توجه داشته باشید که خروجی یک تابع یا یک عمل محاسباتی را مستقیماً درون یک متغییر ذخیره کنید. به یک مثال ساده توجه کنید :

a = 4;

x = 1+a;

مقادیر متغییر ها (value)

با متغییر ها و نحوه ی ایجاد آنها آشنا شدید. حال باید با انواع داده هایی که می توانند در این متغییرها قرار بگیرند آشنا شوید.

عددی (Number): با این نوع داده که کاملاً آشنا هستید. داده های عددی را می توانید با اعشار یا بدون اعشار در یک متغییر ذخیره کنید. داده های عددی بسیار بزرگ را هم به کمک تابع نمایی (exponential) ذخیره کرد.

var a = 12.50 ;  //  = 12.5

var b = 12;  //  = 12

var c = 12e6;  //  = 12000000

var d = 12e-6;  //  = 0.000012

رشته ای (String) : داده های رشته ای شامل مجموعه ای از کاراکترها می باشد. همانطور که پیش تر نیز اشاره کردیم برای ذخیره داده های رشته ای درون یک متغییر باید آن را درون کوتیشن یا دابل کوتیشن قرار دهید.

بولین (Boolean) : داده های بولین فقط دو مقدار true و false را شامل می شود. از این نوع داده در بررسی های شرطی استفاده خواهیم کرد. مثلاً می خواهیم در صورتی که نتیجه اعتبار سنجی فرم ثبت نام صحیح بود (true) تابع ارسال داده با تکنیک ایجکس را اجرا کنیم.

آرایه (Array) : آرایه ها گونه ای از چینش داده ها در کنار هم و در یک بسته بندی هستند. به عنوان مثال شما می توانید کل اطلاعات یک کاربر (مثلاً نام کاربری ، ایمیل ، پسورد) را بصورت یک آرایه در متغییر ذخیره کنید.

آرایه ها را به چند صورت می توانید ایجاد کنید.

var userData = new Array();

userData[0] = "Hamed";

userData[1] = "Hamed@itport.ir" ;

userData[2] = "123456" ;

و یا فشرده تر بصورت زیر :

var userData = new Array("Hamed" , "Hamed@itport.ir" , "123456");

و یا بصورت زیر :

var userData = ["Hamed" , "Hamed@itport.ir" , "123456"];

نکته : شمارش آرایه ها از ۰ شروع می شود.

شیء (Object) : شیء در جاوااسکریپت کاربرد بسیاز زیادی دارد. یک شیء در جاوااسکریپت شامل جفت های کلید و مقدار (key/value) می باشد که با کاما ( , ) از هم جدا شده اند و همگی درون یک {} محصور شده اند. اینکه اشیاء چه کاربردی دارند و مفهوم شیء چیست را در یک قسمت بصورت کامل بیان خواهیم نمود. الان فقط لازم است که با ساختار نوشتن و ایجاد آن آشنایی داشته باشید .

var userData = {username : "Hamed" , email : "Hamed@itport.ir" , password : "123456"} ;

برای فراخوانی هر کدام از ویژگی های یک شی می توانید بصورت زیر عمل کنید :

adminUserName = userData.username ;

در مثال بالا مقدار ویژگی username از شیء userData در متغییر adminUserData قرار می گیرد.

خالی و بدون مقدار (Undefined , Null) : زمانی که شما هیچ مقداری را در یک متغییر ذخیره نکرده باشید در صورتی که آن را فراخوانی کنید مقدار Undefined برگردانده می شود.

برای خالی کردن مقدار یک متغییر می توانید مقدار null را در آن قرار دهید:

User = null ;

این بخش از آموزش هم به پایان رسید. تمام تلاش من این است که سطح آموزش را تا حد امکان پایین آورم تا برای طیف بیشتری از مخاطبین قابل درک باشد ، به همین خاطر از دوستانی که تسلط بهتری دارند به خاطر روندی که شاید به نظر آنان کند باشد پوزش می طلبم.

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

مبحث جلسه آینده : در جلسه آینده مقداری به مبحث شیء گرایی و توابع در جاوااسکریپت می پردازیم.

حامد موثق پور

توسعه دهنده وب - مدیرفنی و نویسنده آی تی پورت

Next دانلود فیلم آموزش زبان برنامه نویسی سی شارپ #C »

Previous « تلفن هایی که می توانند قفل درب ها را باز کنند!

View Comments

رضایان says:

2014/01/16 at 21:00

ممنون عالی بود

منتظر آموزش بعدی هستم :)
فرزین سیف الهی says:

2014/01/20 at 15:39

سلام.

خسته نباشید. بسیار عالی. منتظر آموزش‌های بعدی هستم.

اگر در اول هر پست اعلام کنید که این آموزش چندم هست بسیار عالی است.

تشکر
- حامد موثق پور says:
  
  2014/01/21 at 06:58
  
  سلام فرزین خان.
  نظر خود من این بود که زیاد حالت سریالی به این مجموعه آموزشی ندم و بصورت مبحثی پیش بریم ولی چون همیشه حق با مخاطب است حتماً از این به بعد شماره جلسه رو در ابتدای پست قید می کنم.
  - فرزین سیف الهی says:
    
    2014/01/21 at 07:04
    
    متشکرم.
سامانه پیام کوتاه says:

2014/02/07 at 22:21

واقعا عالی و ساده توضیح داید. اگه ادامه پیدا کنه و کمی هم باسرعت تر خیلی خوب میشه. منتظریم !
محسن says:

2014/03/01 at 13:21

سلام.

دستتون درد نکنه... خیلی خوب و واضح توضیح دادید.

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

موفق باشید.
- حامد موثق پور says:
  
  2014/03/12 at 00:23
  
  خواهش میکنم. امیدوارم هر چه سریع تر بتونیم ادامه آموزش ها رو در اختیار دوستان قرار بدیم.
اریا says:

2015/06/28 at 14:26

سلام ببخشید میخواستم بدونم شما ل جاوااسکریپتو الان یاد دادید؟!!!