در این قسمت شما را با جاوا اسکریپ و مزایای جاوا اسکریپت آشنا می کنیم.جاوا اسکریپت نوعی زبان برنامه نویسی می باشد که داخل کدهای html ، قرار می گیرد . جاوا اسکریپت با تغییر المانهای موجود در صفحه امکان پویا سازی یا داینامیک شدن صفحات را ایجاد می کند به عبارتی این زبان باعث افزایش کیفیت طراحی سایت و ساخت و استفاده cookie ها کنترل صفحات،کنترل browser بازدید کننده می شود .
این کدهای زبان بسیار شبیه به زبان C است همچنین زبان جاوا اسکریپت یک زبان شی گرا می باشد .از آنجا که JavaScript یک متن ساده میباشد ، در نتیجه میتوان از هر ویرایشگر متن کمک گرفت ، در سیستم ویندوز اغلب کاربران از برنامه notepad استفاده میکنند . در این قسمت از آموزش جاوا اسکریپت شما را با فواید و توانایی ها،تقاوت java و java script و سایر دستورات جاوا اسکریپت را آموزش می دهیم .
Java Script چیست
در این قسمت از آموزش جاوا اسکریپت می خواهیم توضیح دهیم که Java Script چیست . جاوا اسکریپت از زبان های برنامه نویسی می باشد و کدهای آن درون کدهای html قرار می گیرد بنابراین برای یادگیری این زبان باید با زبان html آشنایی پیدا کنید .کدهای این زبان شبیه به زبان C می باشد قابلیت های این زبان شامل : افزایش کیفیت طراحی سایت , کنترل صفحات ، کنترل browser بازدید کننده ، ساخت و استفاده cookie ها و بسیاری چیزهای دیگر است .
جاوااسکریپت حاوی اطلاعاتی است که به برنامه ی مرورگر می گوید که به دنبال کدام ورودی بگردد و با آن چه کند. این زبان برای ردیابی هر نوع ورودی ای، ماننده داده هایی که به وسیله ی حرکت نشانگر ماوس حاصل می شود، طراحی شد. پس از دریافت ورودی می تواند آن را پردازش کند و براساس محاسبات خود محتویاتی جدید به وجود بیاورد، یا جلوه های ویژه ای را به راه بیاندازد.
به عبارت دیگر جاوا اسکریپت، محبوب ترین زبان برنامه نویسی در طراحی سایت درجهان است. در زیر نمونه هایی از قابلیت های جاوا اسکریپت در طراحی سایت را برای شما کاربران عزیز شرح میدهیم.
• جاوا اسکریپت قادر به تغییر محتوای html است. یکی از متدهای متعدد در html عبارت است از ()getElementById. مثال زیر از این متد برای یافتن عنصر HTML با "id="demo و تغییر محتوای عنصر به "Hello JavaScript" استفاده کرده است.
document.getElementById("demo").innerHTML = "Hello JavaScript";
• جاوا اسکریپت می تواند ویژگی های HTML را تغییر دهد. برای مثال شما می توانید یک تصویر HTMLرا با تغییر خصوصیت src تگ <img>تغییر دهید.
• جاوا اسکریپت می تواند سبک های HTML را تغییر دهد (CSS). تغییر سبک یک عنصر HTML، نوعی از تغییر یک صفت HTML است. به مثال زیر دقت کنید.
document.getElementById("demo").style.fontSize = "25px";
• علاوه بر این ها جاوا اسکریپت قادر به اعتبار سنجی داده ها است. در واقع جاوا اسکریپت اغلب برای سنجش اعتبار ورودی مورد استفاده قرار می گیرد.
نکته !!!!!!
این موضوع را به خاطر داشته باشید که جاوا اسکریپت و جاوا در مفهوم و طراحی دو زبان کاملا متفاوت هستند. جاوا اسکریپت که در طراحی سایت مورد استفاده قرار می گیرد، در سال 1995 توسط براندان ایچ () اختراع شد و در سال 1997 به یک استاندارد ECMA تبدیل شد. ECMA-262 یک نام رسمی است. ECMAScript 6 (که در ژوئن سال 2015 منتشر شد) آخرین نسخه رسمی جاوا اسکریپت است.
خصوصيات مهم Java Script
در این قسمت از بخش های مختلف آموزش اصولی طراحی سایت ، خصوصیات مهم Java Script را برای شما بیان می کنیم . همانطور که گفته شد زبان جاوا اسکریپت جز زبان های برنامه نویسی سبک می باشد و این زبان در هنگام اجرا فازی به نام کامپایلر را طی نکرده و دستورات آن به صورت خط به خط اجرا می شود .
کامپایل برنامه های نوشته شده به زبان های برنامه نویسی مثل VB , C یا #C در هنگام اجرا ابتدا توسط کامپایلر به طور کامل خوانده شده و اشکال زدایی می شوند و در صورت عدم وجود اشکال ، اجرا خواهند شد . اما برنامه های نوشته شده به زبان های اسکریپتی ، به صورت خط به خط توسط مرورگر خوانده شده و اجرا می شوند .
جاوا اسکریپت به عنوان یک زبان برنامه نویسی ساده و کارا به برنامه نویسان در طراحی سایت می تواند کمک بزرگی باشد همچنین جاوا اسکریپت به رویدادهای مختلف در صفحه واکنش نشان می دهد به عبارتی می توان یک تابع جاوا اسکریپت را تعریف کرده و با یک کلیک اجرا آن دستور اجرا می شود .
امکانات Java Script
در این قسمت از آموزش جاوا اسکریپت ، امکانات Java Script را برای شما بیان می کنیم . همانطور که در مقاله خصوصیات مهم Java Script گفته شد زبان جاوا اسکریپت به برنامه نویسان در طراحی سایت یک ابزار برنامه نویسی ساده و کارا محسوب می شود همچنین جاوا اسکریپت به رویدادهای مختلف در صفحه واکنش نشان می دهد به عبارتی می توان یک تابع جاوا اسکریپت را تعریف کرده و با یک کلیک اجرا آن دستور اجرا می شود .
استفاده از جاوا اسکریپت در طراحی سایت ، می تواند اطلاعات و دستورات وارده را کنترل کند و در صورت صحیح بودن آن ها را به سرور منتقل کند انجام این کار امکان ارسال اطلاعات غلط به سرور را کم می کند و باعث کاهش ترافیک می شود همچنین این زبان می تواند انواع کادرهای اخطار،تایید و دریافت ورودی را به کاربر نشان دهد .
جاوا اسکریپت می تواند نوع و نسخه مرورگر مورد استفاده کاربر را بخواند و براساس مرورگرخاص تنظیمات و صفحات ویژه ای را بارگذاری کند .جاوا اسکریپت توانایی خواندن و نوشتن اطلاعات مورد نیاز مرورگر را بر روی کامپیوتر بازدید کننده صفحه را داراست ، که در اصطلاح به این کار ایجاد و خواندن Cookie می گویند .
تفاوت Java و Java Script
در این قسمت از مقالات طراحی سایت ، تفاوت Java و Java Script را برای شما بیان می کنیم . این دو زبان ساختار دستوری مشابه دارند ولی دو زبان کاملا مجزا هستند .
جاوا یک زبان شی گرا قدرتمند برای برنامه نویسی بر روی پلتفرم های مختلف است و توسط شرکت sun microsystem تهیه شده ، در حالی که Java Script یک زبان ساده اسکریپت نویسی در مرورگر های وب و برای طراحی سایت است و توسط شرکت netscape طراحی شده است . جاوا اسکریپت قابلیت برنامه نویسی را به صفحات html می دهد و صفحات html را پویا می کند همچنین جاوا اسکریپ بر خلاف vbscript در همه browser ها قابل استفاده و خوانده شدن است.
نحوه تعريف دستورات Java Script در صفحه
در این قسمت از آموزش جاوا اسکریپت ، نحوه تعریف دستورات Java Script در صفحه را توضیح می دهیم . همانطور که قبلا گفته شد برای یادگیری زبان جاوا اسکریپت باید با زبان html و همچنین تگ script آشنایی پیدا کرده باشید زیرا همه ی دستورات اسکریپت درون تگ باز و بسته script تعریف می شود و به عبارتی محدوده کدهای اسکریپت را تعیین می کند . به غیر از جاوا اسکریپت زبان های VB Script و EcmaScript نیز در هر تگ اسکریپت باید به وسیله خاصیت Type نوع و زبان اسکریپتی مورد استفاده در آن اسکریپت را تعیین کند . در مثال زیر از دستور document.write برای نمایش یک متن خروجی که در پرانتز جلوی آن تعیین می شود استفاده شده و در ادامه با شی document و خواص و متدهای آن آشنا خواهید شد .
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< /head >
< body >
< script type="text/javascript" >
document.write ( "This is an Script !" )
< /script >
< /body >
</html>
خروجی : This is an Script !
در کل در صفحات وب دو حالت اسکریپتی قابل پیاده سازی است : 1)اسکریپت هایی که سریع پس از اعمال تغییر لود شده و اجرا شود،در این حالت باید اسکریپت ها را در قسمت body صفحه قرار دارد. 2)اسکریپت هایی که در هنگام بروز یک رویداد در صفحه مانند کلیک بر روی دکمه خاص اجرا شوند به عبارتی می خواهیم اجرای آن ها کنترل شده باشد . در این حالت دستورات اسکریپت را در قسمت head صفحه و یا در یک فایل خارجی تعریف کرد .بهتر است هنگام اضافه کردن دستورات جاوا از کدهای تکراری کم کرده تا سرعت افزایش طراحی وب سایت و اعمال تغییرات سریع و آسان صورت انجام گیرد برای این کار می توان دستورات را در یک فایل تعریف کرده و به طور مشترک در تمام صفحات استفاده کرد .برای قرار دادن اسکریپت در صفحات وب می توانید از سه روش استفاده کنید .
درون محدوه اصلی صفحات html ، در قسمت تگ <body>
در این روش به محض بارگذاری و نمایش صفحه اجرا شده و خروجی خود را تولید می کنند.همانطور که از اسم این روش پیداس اسکریپت ها را می توان در هر جای محدوده تگ body صفحات تعریف کرد.در اين نوع اسکريپت ها ، هيچ کنترلی از سوی کاربر برای اجرای آنها وجود ندارد ، مگر اينکه دستورات آن در قالب يک تابع ( function ) تعريف شده باشند ، که تا زمان فراخوانی آن تابع اجرا نخواهند شد . برای دريافت اطلاعات بيشتر در مورد توابع جاوا اسکريپت در طراحی سایت ، به قسمت تعريف توابع در جاوا اسکريپت برويد . به مثال زیر توجه کنید :
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< /head >
< body >
< script type="text/javascript" >
document.write ( "This script is placed in the body section . " )
< /script >
< /body >
</html>
خروجی : This script is placed in the body section .
در قسمت تگ <head>
همانطورکه در بالا گفته شد در اسکریپت هایی که بخواهیم به هنگام بروز یک رویداد در صفحه مثل کلیک بر روی یک دکمه اجرا شوند را در قسمت head معرفی می کنند . دستورات اسکريپت های اين قسمت بايستی در قالب توابع تعريف شده باشند و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشده باشند ، اجرا نخواهند شد . مزيت اين روش در اين است ، که اين اسکريپت ها قبل از اجرا توسط مرورگر لود شده اند . فراخوانی بايد توسط يک اسکريپت ديگر در قسمت تگ < body > صورت بگيرد . در مثال زیر يک اسکريپت ساده در 2 حالت در قسمت تگ < head > صفحه تعريف شده است . در حالت اول به دليل عدم فراخوانی تابع اسکريپت ، آن اسکريپت هيچ گاه اجرا نخواهد شد . اما در حالت دوم تابع ()hello توسط رويداد onclick ( کليک ) دکمه فرمان فراخوانی شده و خروجی خود را نمايش می دهد . برای اجرای اسکريپت بر روی دکمه فرمان مثال کليک نماييد :
حالت اول :
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" >
function hello ( )
{
document.write ( "Hello User . This script is placed in the head section ." )
}
< /script >
< /head >
< body >
محتويات صفحه
< /body >
</html>
حالت دوم:
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" >
function hello ( )
{
document.write ( "Hello User . This script is placed in the head section . " )
}
< /script >
< /head >
< body >
محتويات صفحه
< input value ="to view script Click me" id="Button1" type="button" onclick="hello( )" / >
< /body >
</html>
در يک فايل خارجی JS
در اين حالت تمام اسکريپت های مورد نظر را در يک فايل خارجی متنی با پسوند JS ، تعريف کرده و سپس به وسيله تگ < script > در قسمت < head > صفحه ، بين آن فايل و صفحه لينک ايجاد می کنيم .از اين جالت معمولا در مواردی که بخواهيم کدهای اسکريپت را از محتويات صفحات HTML جدا کرده و يا از يک سری دستورات و توابع اسکريپتی مشترک در چند صفحه استفاده کنيم ، کاربرد دارد .
اسکريپت های اين حالت در طراحی سایت بايد در قالب توابع مختلف تعريف شده و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشوند ، اجرا نخواهند شد . در مثال زير ابتدا يک اسکريپت در يک فايل خارجی به نام myscript.js تعريف کرده و سپس بين صفحه و آن فايل ارتباط ايجاد کرده ايم . تابع ( ) hello2 توسط رويداد کليک دکمه فرمان فراخوانی و اجرا می شود . برای اجرای آن بر روی دکمه فرمان کليک کنيد :
< script type="text/javascript" >
function hello2 ( )
{
document.write ( "This script is placed in an external Java Script file . " )
}
< /script >
Example
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" src ="../myscript.js" > * ايجاد لينک بين صفحه و فايل اسکريپت *
< /script >
< /head >
< body >
محتويات صفحه
< input value="to view script Click me" id="btnhello2" type="button" onclick="hello2( )" / >
< /body >
</html>
انواع دستورات اسکريپتی
در این قسمت از آموزش جاوا اسکریپت به تعریف انواع دستورات اسکریپتی می پردازیم .به طور کلی 2 حالت اسکريپت ( برنامه اجرايي ) در صفحات وب قابل پياده سازی است :
√ اسکريپت های که می خواهيم به محض لود شدن صفحه ، اجرا شده و اثر خود را نمايش دهند . در اين حالت بايد اسکريپت ها را در قسمت < body > در طراحی سایت قرار داد .
√ اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه ، مثل کليک بر روی يک دکمه خاص و ... اجرا شوند . به عبارت ديگر می خواهيم اجرای آنها کنترل شده باشد . در اين حالت دستورات اسکريپت را در قسمت < head > صفحه و یا در يک فايل خارجی در طراحی سایت تعريف کرد .
نکته : گاهی اوقات می خواهيم از دستورات اسکريپتی يکسان و مشترک در تمام يا گروهی از صفحات يک وب سايت استفاده کنيم . در اين حالت برای جلوگيری از تکرار دستورات در تمام صفحه های مذکور ، کاهش حجم کد نويسی ، افزايش سرعت طراحی سایت و اعمال تغييرات سريع و آسان به دستورات ، بهتر است همه آن اسکريپت ها را يکبار در يک فايل خارجی تعريف کرده و از آن به طور مشترک در تمام صفحات استفاده کرد . برای دريافت اطلاعات بيشتر به روش سوم قرار دهی اسکريپت در صفحات وب در پايين صفحه برويد .
محل قرار دادن اسکريپت ها در صفحات وب
در این قسمت از مقالات طراحی سایت ، به معرفی محل قرار دادن اسکریپت ها در صفحات وب می پردازیم . به طور کلی 3 روش برای قرار دادن اسکريپت ها در صفحات وب وجود دارد :
درون محدوده اصلی صفحات HTML ، در قسمت تگ < body > :
اسکريپت های تعريف شده در اين قسمت در طراحی سایت ، به محض بارگداری و نمايش صفحه اجرا شده و خروجی خود را توليد می کنند . اين نوع اسکريپت ها می توان در هر جای محدوه تگ < body > صفحات تعريف کرد . در اين نوع اسکريپت ها ، هيچ کنترلی از سوی کاربر برای اجرای آنها وجود ندارد ، مگر اينکه دستورات آن در قالب يک تابع ( function ) تعريف شده باشند ، که تا زمان فراخوانی آن تابع اجرا نخواهند شد . برای دريافت اطلاعات بيشتر در مورد توابع جاوا اسکريپت ، به قسمت تعريف توابع در جاوا اسکريپت برويد .
مثال : در مثال زير يک اسکريپت ساده در قسمت تگ < body > صفحه ايجاد شده است . اين اسکريپت به محض لود شدن صفحه اجرا شده و خروجی خود را توليد می کند .
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< /head >
< body >
< script type="text/javascript" >
document.write ( "This script is placed in the body section . " )
< /script >
< /body >
</html>
خروجی : This script is placed in the body section .
در قسمت تگ < head > :
اسکريپت هايي که می خواهيم در هنگام بروز يک رويداد در صفحه مثل کليک بر روی يک دکمه و ... اجرا شوند ، را می توان در قسمت < head > در طراحی سایت تعريف کرد . دستورات اسکريپت های اين قسمت بايستی در قالب توابع تعريف شده باشند و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشده باشند ، اجرا نخواهند شد . مزيت اين روش در اين است ، که اين اسکريپت ها قبل از اجرا توسط مرورگر لود شده اند . فراخوانی بايد توسط يک اسکريپت ديگر در قسمت تگ < body > صورت بگيرد .
مثال : در مثال زير يک اسکريپت ساده در 2 حالت در قسمت تگ < head > صفحه تعريف شده است . در حالت اول به دليل عدم فراخوانی تابع اسکريپت ، آن اسکريپت هيچ گاه اجرا نخواهد شد . اما در حالت دوم تابع ()hello توسط رويداد onclick ( کليک ) دکمه فرمان فراخوانی شده و خروجی خود را نمايش می دهد . برای اجرای اسکريپت بر روی دکمه فرمان مثال کليک نماييد :
حالت 1 . در اين حالت به دليل عدم فراخوانی اسکريپت هيچ خروجی نداريم .
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" >
function hello ( )
{
document.write ( "Hello User . This script is placed in the head section ." )
}
< /script >
< /head >
< body >
محتويات صفحه
< /body >
</html>
حالت 2 . در اين حالت با فراخوانی اسکريپت توسط رويداد کليک دکمه فرمان ، دستور آن اجرا می شود .
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" >
function hello ( )
{
document.write ( "Hello User . This script is placed in the head section . " )
}
< /script >
< /head >
< body >
محتويات صفحه
< input value ="to view script Click me" id="Button1" type="button" onclick="hello( )" / >
< /body >
</html>
در يک فايل خارجی JS :
در اين حالت تمام اسکريپت های مورد نظر را در يک فايل خارجی متنی با پسوند JS ، تعريف کرده و سپس به وسيله تگ < script > در قسمت < head > صفحه ، بين آن فايل و صفحه لينک ايجاد می کنيم .
اين حالت معمولا در مواردی که بخواهيم کدهای اسکريپت را از محتويات صفحات HTML (در طراحی سایت ) جدا کرده و يا از يک سری دستورات و توابع اسکريپتی مشترک در چند صفحه استفاده کنيم ، کاربرد دارد .
اسکريپت های اين حالت بايد در قالب توابع مختلف تعريف شده و تا زمانی که از سوی برنامه يا کاربر فراخوانی نشوند ، اجرا نخواهند شد .
مثال : در مثال زير ابتدا يک اسکريپت در يک فايل خارجی به نام myscript.js تعريف کرده و سپس بين صفحه و آن فايل ارتباط ايجاد کرده ايم . تابع ( ) hello2 توسط رويداد کليک دکمه فرمان فراخوانی و اجرا می شود . برای اجرای آن بر روی دکمه فرمان کليک کنيد :
متن فايل myscript.js
< script type="text/javascript" >
function hello2 ( )
{
document.write ( "This script is placed in an external Java Script file . " )
}
< /script >
< html >
< head >
< title > Title of Page عنوان صفحه < /title >
< script type="text/javascript" src ="../myscript.js" > * ايجاد لينک بين صفحه و فايل اسکريپت *
< /script >
< /head >
< body >
محتويات صفحه
< input value="to view script Click me" id="btnhello2" type="button" onclick="hello2( )" / >
< /body >
</html>
نکات مهم در کد نويسی جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت ، می خواهیم نکات مهم در کدنویسی جاوا اسکریپت را در چهار مورد بیان کنیم .
جاوا اسکریپت به بزرگ یا کوچک بودن حروف حساس است.
در طراحی سایت ،برخلاف html ، جاوا اسکریپت به بزرگ یا کوچک بودن حروف حساس است و در مواقع نام گذاری توابع و تعاریف باید به این موضوع توجه کرد عدم رعایت این نکته موجب بروز خطا در صفحه خواهد شد و هر یک از دستورات و کلمات کلیدی در جاوا اسکریپت فقط به یک صورت که استاندارد باشد نوشته شوند . در مثال زير 2 متغير با نام های يکسان ، ولی متفاوت در بزرگ يا کوچک بودن حروف به نام های "Matn" و "matn" ايجاد و مقدار دهی شده اند . خروجی کد نشان می دهد که اين دو متغير کاملا با هم متفاوت هستند و هر يک مقدار مخصوص به خود را دارند :
<script type="text/javascript">
var matn = "This is a Variable ." ;
var Matn = "This is another Variable ." ;
document.write ( matn ) ;
document.write ( Matn ) ;
</script> کد
خروجی : This is a Variable .This is another Variable .
در طراحی سایت شکل صحيح نوشتن متد چاپ خروجی در جاوا اسکريپت به صورت documnet.write است . در مثال زير ابتدا دستور را به شکل نادرست و با حروف بزرگ به صورت Documnet.Write نوسته ايم ، که باعث ايجاد خطا در صفحه شده و خروجی نداريم . اما در حالت دوم آنرا به شکل صحيح نوشته ايم ، که خروجی درست را نيز مشاهده می کنيم :
<script type="text/javascript">
var Str = "An Investigation for Development" ;
Document.Write ( Str ) ;
</script>
خروجی :
<script type="text/javascript">
var Str = "An Investigation for Development" ;
document.write ( Str ) ;
</script>
خروجی : An Investigation for Development
جاوا اسکریپت فواصل خالی اضافی در کدنویسی را نادیده می گیرد
استفاده از فواصل خالی اضافه توسط کدهای جاوا اسکریپت از سوی مرورگر نادیده گرفته می شود و تاثیری ندارد.بين دستورات و کلمات کليدی بايد حداقل يک فاصله وجود داشته باشد ، در اينجا منظور از فاصله اضافی ، بيش از يک کاراکتر فاصله است .
نوشتن عبارت های متنی در بیش از یک خط
در هنگام طراحی سایت ، تعریف و استفاده از عبارت های متنی در دستوراتی نظير document.write و ... ، می توان ادامه متن را به کمک يک کاراکتر \ به سطر بعدی انتقال داد . اين مسئله در زمانی که عبارت های متنی طولانی استفاده می شود ، کاربرد دارد .
<script type="text/javascript">
document.write ( "Java Script is a client side language . \
It`s codes executes in the computer of visitor " ) ;
</script>
خروجی : Java Script is a client side language . It`s codes executes in the computer of visitor
درج توضيحات ( comments ) مورد نظر در بخش کد نويسی
در اسکريپت های نوشته شده به زبان جاوا اسکريپت ، می توان توضيحات مورد نظر را به صورت ويژه ای در درون کدها وارد کرد . اين توضيحات به طور کامل از سوی مرورگر ناديده گرفته شده و در خروجی نمايش داده نمی شوند . از توضيحات معمولا برای نشانه گذاری يا ارائه توضيحاتی راجع به کدهای برنامه استفاده می شود .
دو نوع توضيح در جاوا اسکريپت می توان ايجاد کرد :
1 . توضيحات يک خطی : اين توضيات به کمک دو بک اسلش // به صورت زير وارد می شود . توضيحات ارائه شده به اين صورت حداکثر می تواند در يک خط باشد . به مثال زير دقت کنيد . در اين مثال خط اول يک comment خط دوم يک دستور چاپ خروجی است . همانظور که در خروجی کد مشخص است ، دستور چاپ در طراحی سایت توسط مرورگر اجرا شده ولی comment نمايش داده نمی شود :
<script type="text/javascript">
// this is a one line comment . navigator won`t show it .
document.write ( "How to write a comment" ) ;
</script>
خروجی : How to write a comment
2 . توضيحات چند خطی : با استفاده از يک نماد */ در ابتدای اولين خط توضيحات و يک نماد /* در آخرين خط توضيحات ، می توان توضيحات چند خطی در اسکريپت ها وارد کرد . از اين حالت برای ارائه توضيحات طولانی استفاده می شود . به مثال زير دقت کنيد . در اين مثال هم يک دستور و يک comment چند خطی قرار داده شده است . دستور توسط مرورگر اجرا شده ، ولی comment نمايش داده نمی شود :
<script type="text/javascript">
/* this is a multi line comment . navigator won`t show it .
We use it for long comments .
It can be several lines */
document.write ( "How to write a multi line comment" ) ;
</script> کد
خروجی : How to write a multi line comment
عملگرهای جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت ، عملگرهای جاوا اسکریپت را توضیح می دهیم .
عملگرهای ریاضی :
√ جمع + دو عملوند خود را با هم جمع می کند .
√ تفريق - دو عملوند خود از هم کم می کند .
√ ضرب * دو عملوند خود را در هم ضرب می کند .
√ تقسيم / عملوند اول خود را بر عملوند دوم تقسيم می کند .
√ باقی مانده % باقی مانده حاصل از تقسيم عملوند اول بر عملوند دوم را محاسبه می کند .
√ افزاينده ++ عملوند خود را يک واحد افزايش می دهد .
√ کاهنده - - عملوند خود را يک واحد کاهش می دهد .
عملگرهای انتسابی
از عملگرهای انتسابی ، برای نسبت دادن مقدار به يک متغير استفاده می شود .
√ انتساب =
√ جمع +=
√ تفريق - =
√ ضرب *=
√ تقسيم /=
√ باقی مانده %=
عملگرهای مقایسه ای
در طراحی سایت از اين عملگرها برای مقايسه يک متغير با يک مقدار و يا مقايسه 2 متغير با هم استفاده می شود .
√ تساوی = = امتحان برابری با يک مقدار يا يک متغير ديگر
√ تساوی = = = امتحان برابری با يک مقدار يا يک متغير ديگر هم از لحاظ مقدار و هم از √ لحاظ نوع داده ای
√ عدم تساوی ! = امتحان عدم برابری با يک مقدار يا يک متغير ديگر
√ بزرگتر بودن > امتحان بزرگتر بودن
√ کوچکتر بودن < امتحان کوچکتر بودن
√ مساوی يا بزرگتر بودن >= امتحان مساوی يا بزرگتر بودن
√ مساوی يا کوچکتر بودن <= امتحان مساوی يا کوچکتر بودن
عملگرهای منطقی
از عملگرهای منطقی در طراحی سایت برای ترکيب دو يا چند عبارت مقايسه ای يا شرطی با هم و ايجاد يک عبارت واحد استفاده می شود . در جدول زير انواع عملگرهای منطقی و شرايط درست بودن آنها توضيح داده شده است .
√ && عملگر " و " اين عبارت برای ترکيب دو يا چند عبارت با هم استفاده می شود . نتيجه ترکيب اين عملگر فقط زمانی صحيح است ، که تمام عبارات ترکيب شده با هم درست باشند .
√ || عملگر " يا " اين عبارت برای ترکيب دو يا چند عبارت با هم استفاده می شود . نتيجه ترکيب اين عملگر در صورت درست بودن حداقل يکی از عبارات ترکيب شده ، درست خواهد بود.
√ ! عملگر not اين عملگر برای بر عکس کردن درستی يا عدم درستی يک عبارت استفاده می شود . استفاده اين عملگر قبل از يک عبارت صحيح باعث نادرست شدن جواب و برعکس خوهد شد .
عملگر رشته ای
متغيرهای رشته ای متغير هایي هستند ، که از متن تشکيل شده اند . اين متغيرها را همانطور که قبلا اشاره شد ، بايد بين دو علامت " " تعريف کرد . در استفاده از جاوا اسکريپت در طراحی سایت ، می توان دو متغير رشته ای را با عملگر + به هم اضافه کرد . همچنين برای ايجاد فاصله بين متغيرهای می توان از يک " " به شکلی که در مثال زير آمده است ، استفاده کرد .
< script type="text/javascript" >
var matn1 = "Welcome to" ;
var matn2 = "sitedesign-co.com" ;
var welcome = matn1 + " " + matn2 ;
document.write (welcome) ;
< /script > کد
خروجی : Welcome to sitedesign-co.com
نمايش کاراکترهای خاص در جاوا اسکريپت
در این قسمت از آموزش جاوا اسکریپت به توضیح نمایش کاراکترهای خاص در جاوا اسکریپت می پردازیم . در کدنویسی دستورات جاوا اسکريپت ، از برخی از کاراکترها به منظور ويژه های استفاده می کنيم . برای مثال از کاراکتر " برای شروع يک عبارت متنی در دستوراتی نظير document.write و ... استفاده می شود . به کار بردن مستقيم چنين کاراکترهای در عبارت های متنی باعث تداخل با کدهای برنامه و بروز خطا و خروجی نامناسب می شود .
در طراحی سایت برای نمايش چنين کاراکترهايي در عبارت های متنی ، بايد از يک کاراکتر \ قبل از کاراکتر مورد نظر استفاده کرد . برای مثال می خواهيم در اسکريپت زير يک پيام به کاربر اعلام کنيم . می خواهيم در متن پيام ، عبارت Developer Studio در بين دو کاراکتر " " قرار بگيرد .در حالت اما به دليل تداخل اين کاراکتر ها با شکل دستوری آنها در دستور document.write ، می بينيم که دارای خروجی نادست بوده و پیام فقط خروجی بر روی صفحه چاپ نمی شود . در حالت دوم از يک \ قبل از " استفاده شده و می بينیم که دراری خروجی مورد نظر هستيم و پيام به شکل صحيح نمايش داده شده است :
حالت اول ، شکل نادرست
<script type="text/javascript">
var matn = "Hello Welcome to "sitedesign-co.com " a website for designers" ;
document.write ( matn ) ;
</script> کد
حالت دوم ، شکل صحيح
<script type="text/javascript">
var matn = "Hello Welcome to \"sitedesign-co.com\" a website for designers" ;
document.write ( matn ) ;
</script> کد
خروجی : Hello Welcome to "sitedesign-co.com" a website for designers
در ایجاد یک خط جدید در نوشته می توان در متن نوشته ی کادر های Pop-Up در جاوا اسکريپت ، نوشته را به سطر پايين انتقال داد . برای اين منظور از يک کاراکتر n\ استفاده می شود . هر بار استفاده از اين کاراکتر باعث انتقال نوشته به يک سطر پايين تر می شود . در مثال زیر پیام اخطار را در طراحی سایت مشاهده خواهید کرد .
<script type="text/javascript">
function New_Line ( )
{
alert ( "Hello \nDear User \n\n Welcome to sitedesign-co.com" ) ;
}
</script>
<input type="button" id="Button1" value="Click Me !" onclick="New_Line( )" />
ساير کاراکترهايي که برای نمايش آنها بايد از روش فوق استفاده کرد ، به همراه توضيح آنها در زير آمده است :
√ علامت نقل قول تکی ' ' \'
√ علامت نقل قول جفتی " " \"
√ علامت و در انگليسی & & \&
√ علامت اسلش در متن \ \ \\
√ رفتن به خط جديد در متن \n
معرفی برخی از اصطلاحات مخصوص جاوا اسکریپت
دانستن اصطلاحات تخصصی جاوا اسکریپت نه تنها باعث افزایش دایره لغات شما می شود بلکه به بهبود درک شما از جاوا اسکریپت نیز کمک می کند. این اصطلاحات معمولا در مستندات و مقالات تخصصی یافت می شوند. در این مقاله از طراحی سایت به معرفی برخی از اصطلاحات مخصوص جاوا اسکریپت می پردازیم.
• Arity
Arity اصطلاحی است که به تعداد عملیات ها در یک ساختار یا عملکرد اشاره دارد. شما با این اصطلاح در سراسر جاوا اسکریپت زیاد مواجه خواهید شد. ساختار زیر داری Arity 3 است.
function getName(first, middle, last){
return first+' '+ middle +' '+last;
}
• Anonymous
Anonymous یک صفت است. هنگامی که چیزی یا کسی دارای صفت Anonymous است به این معنی است که نام آن فرد یا چیز نامشخص است. بنابراین در جاوا اسکریپت یک ساختار Anonymous یک ساختار بدون نام مشخص است.
(function (){
//body
})();
• Closure
در فرهنگ لغت آکسفورد برای کلمه Closure تعریفی ارائه شد است: "چیزی که بسته شده است و یا بستن چیزی مانند کلاه یا کراوات ".
در جاوا اسکریپت، closure یک تابع درونی است، که در خارج از حوزه عملکرد بیرونی آن، با اتصال به متغیرهای تابع بیرونی دست نخورده در دسترس است.
closure ها در جاوا اسکریپت مشابه پیشخدمت ها در رستوران هستند. در رستوران ما اجازه رفتن به آشپزخانه را نداریم بنابراین برای سفارش غذا پیشخدمت را صدا کرده و به آنها سفارش می دهیم. آنها سفارش ما را به آشپزخانه برده و غذای ما را می آورند. و ما بدون شکستن قوانین، غذای خود را دریافت می کنیم. در جاوا اسکریپت نیز closure ها پارامترهای مورد نظر ما را دریافت می کنند و تغییرات را در داخل تابعی که اعمال تغییرات توسط شخص ما مجاز نیست ایجاد می کنند.
function order() {
var food;
function waiter(order) {
chef(order);
return food;
}
function chef(order) {
if (order === 'pasta') {
food = ['pasta', 'gravy', 'seasoning'];
cook();
}
}
function cook() { food.push('cooked'); }
return waiter;
}
var myOrder = order();
console.log(myOrder('pasta'));
// Array [ "pasta", "gravy", "seasoning", "cooked" ]
• Hoisting
Hoisting به معنای بالا بردن چیزی است. Hoisting در جاوا اسکریپت نیز به همین معنی است و هرچیزی که بالا می رود declaration نامیده می شود. Declaration جایی است که متغیر ها و توابع با کلمات کلیدی متنوع و ساختار ساخته می شوند. مهم نیست که شما کجا کد اعلام تابع یا متغیر را یادداشت می کنید، در طول ارزیابی تمام Declaration ها به داخل محدوده ای که در آن ساکن هستند منتقل می شوند. از این رو، نوشتن یک کد کار به همراه کد فراخوانی تابع قبل از تابع Declaration امکان پذیر است.
var name = 'Velma';
console.log(sayCatchPhrase(name)); //"Jinkies!"
function sayCatchPhrase(name) {
phrases = {
'Fred Flintstone': 'Yabba dabba doo!',
'Velma': 'Jinkies!',
'Razor': 'Bingo!',
'He-Man': 'I Have the Power'
};
return phrases[name];
}
• Mutation
Mutation به معنی تغییر و یا اصلاح است. اگر تا کنون در جاوا اسکریپت با اصطلاح Mutation مواجه شده اید، احتمالا به تغییراتی در عناصر DOM اشاره دارد.
• Pragma
Pragma مخفف کلمه pragmatic information به معنی اطلاعات عملی است. به زبان انگلیسی ساده، pragmatic یک صفت است که به معنای معقول و عملی است. در برنامه نویسی، pragma به کدی که شامل اطلاعات مفید در مورد چگونگی پردازش برنامه توسط یک مولف یا مفسر یا همگذار است اشاره دارد.
این هیچ ارتباطی به زبان برنامه نویسی ندارد وترکیب آن می تواند متفاوت باشد. آنها فقط در رفتار مولف تاثیر می گذارد. جاوا اسکریپت دارای چندین pragma است، یکی از آنها strict است.
"use strict";
توسط pragma بالا، کد جاوا اسکریپت در حالت strict اجرا می شود. در حالت strict، ترکیب نا مناسب مجاز نیست، hoisting اجرا نمی شود، خطاهای بی صدا نشان داده می شوند، و غیره. که در نوشتن یک کد جاوا اسکریپت امن تر و بهینه سازی شده کمک می کند.
• Sentinel
Sentinel به معنی سربازی است که نگهبانی می دهد. در برنامه نویسی، Sentinel به این دلیل که در پایان حلقه یا فرآیند استفاده می شوند، دارای ارزش هستند. آنها همچنین "flags" نیز نامیده می شوند. شما می توانید از هر مقدار معقولی به عنوان Sentinel استفاده کنید.
function getPos(ary, val) {
var i=0, len=ary.length;
for(;i<len;i++){
if(ary[i]===val) return i+1;
}
return -1;
}
console.log(getPos(['r','y','w'],'y')); //2
console.log(getPos(['r','y','w'],'g')); //-1
• Vanilla
Vanilla در جاوااسکریپت به معیار جاوا اسکریپت اشاره دارد نه به چهارچوب. Vanilla در حقیقت نه تنها برای توصیف نسخه استاندارد جاوا اسکریپت استفاده می شود بلکه در سایر زبان های برنامه نویسی مانن css نیز کاربرد دارد.
استفاده بیش از حد از جاوا اسکریپت در طراحی سایت
استفاده از جاوا اسکریپت در طراحی سایت در چند سال اخیر توسعه پیدا کرده است. اما با ین وجود استفاده بیش از حد از جاوا اسکریپت در طراحی سایت موجب بروز مشکلات و محدودیت هایی برای طراحی سایت می شود.
جاوا اسکریپت کاربرد بسیاری دارد زیرا می توان از آن در بخش هایی که زبان های دیگر کاربردی ندارند، استفاده کرد. در طراحی سایت می توانید از جاوا اسکریپت برای ایجاد صفحه نمایش بزرگ، اسلایدر و افزودن قابلیت ها در طراحی سایت می توانید استفاده کنید. با این وجود دلایل زیادی وجود دارد که نشان می دهد استفاده بیش از حد از جاوا اسکریپت برای طراحی سایت مضر است و به سایت ضرر می رساند.
معایب استفاده بیش از حد از جاوا اسکریپت در طراحی سایت
• دفعات بارگذاری: این به دلیل پلاگین ها و اسلایدرها است که تعداد زیادی فایل css و جاوا اسکریپت ایجاد می کنند. بهتر در طراحی سایت مطمئن شوید که همه این ها از یک فایل بارگذاری می شوند.
• به دلیل سرعت لود صفحه، تاثیر منفی بر روی بارگذاری بر روی مرورگر تلفن همراه دارد.
• به راحتی بر روی قابلیت ها و بخش های ناقص(break) ناشی از باگ سایت اثر می گذارد.
• امنیت: جاوا اسکریپت مانند بسیاری از زبان های برنامه نویسی وب و اسکریپت ها، اگر به درستی اجرا نشود، قابل استخراج است. تزریق کد های مخرب نیز می تواند به منظور سرقت اطلاعات انجام شود.
• سئو : جاوا اسکریپت در دسترس موتورهای جستجو نیست و بنابراین اگر در طراحی سایت ، بیش از حد از جاوا اسکریپت استفاده شود، ممکن است رتبه برخی از کلمات کلیدی را از دست بدهید.