ساختار و چارچوب جاوا اسکریپت

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

 به طور معمول جاوا اسکریپت هم برای خودش مثل سایر زبان های برنامه نویسی ساختار کلی و Syntax خودش رو داره،بریم ببینیم ساختار جاوا اسکریپت یا به عبارتی چارچوب آن به چه شکل هست.

ساختار جاوا اسکریپت

 Statements : هر خط از کد ما که قابلیت اجرا رو داشته باشه.
Expressions:عبارات شرطی که شرط های مارو چک می کنند.
Assignments:جهت انتساب مقادیر ازش استفاده می کنیم.
Code blocks: برا مشخص کردن محدوده ای از کد که با {} نمایش می دهیم که ابتدا و انتهای هر بخش رو مشخص می کند.
Comments:توضیحات و یا نوشته هایی که در اصل اجرا نمی شوند و بیشتر برای خوانایی کد ها استفاده می شوند.برای کامنت های تک خطی از // و برای کامنت های چند خطی از /*…….*/ استفاده می کنیم.
Values: مقادیری که قابلیت تعریف دارند،که هر کدام از ان ها نوع خاصی دارند.
 Operators: عملگرهایی برای محاسبات ریاضی، مقایسه و…
Keywords: کلماتی که از قبل رزو شده اند که اسامی انها در جدول زیر آورده شده است.

abstract arguments await* boolean
break byte case catch
char class* const continue
debugger default delete do
double else enum* eval
export* extends* false final
finally float for function
goto if implements import*
in instanceof int interface
let* long native new
null package private protected
public return short static
super* switch synchronized this
throw throws transient true
try typeof var void
volatile while with

کلمات علامت گذاری شده با * در ECMAScript 5 و 6 جدید هستند.

Syntax:مهم ترین بخش هر زبان Syntax آن زبان می باشد حالا Syntx به چی میگن?خب ما به نحوه نگارش کدها Syntax میگیم.یعنی آرایش و چیدمان عبارات باید  در جای خود باشند،که در یک مقاله دیگر به طور مفصل درباره آن توضیح خواهیم داد.

نحوه قرار گیری اسکریپت ها در صفحه وب

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

عمدتا سه روش برای قرار گیری اسکریپت  ها درون فایل Html و جود دارد.

درون بدنه اصلی صفحات Html یا همان تگ < body >

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

درون تگ < head >

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

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

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

و حالت سوم اینکه اسکریپت های خو را در یک فایل خارجی تعریف کنیم و ان را به صفحه مورد نظر لینک کنیم.

در این حالت کلیه اسکریپت های خود را درون یک فایل JS تعریف می کنیم . و در صفحه Html  بخش قسمت هدر دوتا فایل را به هم لینک می کنیم.

اجرای جاوا اسکریپت در مرورگر و نمایش خروجی

بعد اینکه ساختار جاوا اسکریپت رو دیدیم از چه قراره ،می خواهیم  بدونیم چطور میتونیم جاوا اسکریپت رو تو مرورگر اجرا کنیم و خروجی اون رو مشاهده کنیم.

یکی از راه های مشاهده خروجی کد های جاوا اسکریپت ، استفاده ازdocument.getElementById(“id”) هستش که با مثال زیر نحوه کارشو توضیح میدیم.

 تو این تکه کداتفاقی که میافته این هست که وقتی ما میایم دکمه رو کلیک می کنیم با توجه به event یا رویدادی که تعریف کردیم ، میاد متن “Hello JavaScript!” دورن پاراگراف ما میریزه و برای ما نمایش میده به همین سادگی.

از دیگر روش ها میتونیم به() document.write() , alert() ، console.log اشاره کرد.

مثال برای ()document.write() , alert

توجه داشته باشید، وقتی از console.log استفاده می کنید مستقیما در مرورگر برای ما چیزی نمایش نمی دهد و برای مشاهده خروجی آن باید به  قسمت کنسول در بخش dev tools مراجعه نماییم که در شکل زیر نمایش داده شده است.

console.log

محل اجرای کد های درون ()console.log

اگر بعد از رندر شدن کامل صفحه از ()document.write استفاده کنیم کل محتویات صفحه حذف و مقدار خروجی این تابع در صفحه نمایش داده می شود.

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

نحوه نصب ویژوال استودیو کد و توضیحات مربوط به محیط کاربری.

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]
اشتراک‌گذاری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *