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

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

به طور معمول جاوا اسکریپت هم برای خودش مثل سایر زبان های برنامه نویسی ساختار کلی و 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 > استفاده نماییم. به عنوان مثال وقتی صفحه زیر بارگزاری می شود.تکه کد اسکریپ ما هم اجرا شده و خروجی مد نظر را به نمایش می گذارد.

< html >


  < head >


    < title > Title of Page سایت کدایت < /title >


  < /head >


  < body >


    < script type="text/javascript" >

      document.write ( "سلام به همراهان سایت کدایت " )


    < /script >


  < /body >

</html>

درون تگ < head >

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

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

< html >


  < head >


    < title > سایت کدایت < /title >


    < script type="text/javascript" >

     function hello ( )

      {

       document.write ( "Hello User . This script is placed in the head section ." )

      }


    < /script >


  < /head >


  < body >

    محتویات صفحه   


  < /body >

</html>

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

< html >


  < head >


    < title > سایت کدایت < /title >


    < script type="text/javascript" >

     function seyhello ( )

      {

       document.write ( "Hello User,script in head section." )

      }


    < /script >


  < /head >


  < body >

    مابقی تگ ها Html


    <input value ="to view script Click me" id="Button1" type="button" onclick="hello( )"/>


  < /body >

</html>

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

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

< html >


  < head >


    < title >  سایت کدایت < /title >


    < script type="text/javascript" src ="../myscript.js" >* لینک بین صفحه و فایل اسکریپت *


    < /script >


  < /head >


  < body >

 مابقی تگ ها 


    < input value="view script Click me" id="btnhello2" type="button" onclick="hello2( )" / >


  < /body >

</html>

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

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

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

<!DOCTYPE html>
<html>
<body>

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

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

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

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

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

< html >
  < head >
    < title >  سایت کدایت < /title >
  < /head >
  < body >
    < script type="text/javascript" >
      document.write ( "This is an Script !" )
    < /script >
  < /body >
</html>

< html >
  < head >
    < title >  سایت کد ایت < /title >
  < /head >
  < body >
    < script type="text/javascript" >
      alert ( "This is an Script !" )
    < /script >
  < /body >
</html>

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