آموزش طراحی سایت-آموزش javascript
جمعه, ۱۳ دی ۱۳۹۸، ۱۱:۳۰ ق.ظ
سلام با آموزش طراحی سایت در خدمت شما هستیم .در قسمت قبل در مورد جاوا اسکرپیت صحبت کردیم , حال ادامه آموزش طراحی سایت در خدمت شما هستیم.
جاوا اسکریپت JavaScript زندگی خود را با نام Live Script آغاز نمود، اما شرکت Netscape نام آن را، احتمالا به دلیل هیجانی که می توانست از سوی زبان Java به خود بگیرد، به JavaScript تغییر داد.
جاوا اسکریپت برای اولین بار در مرورگر Netscape 2.0 با عنوان Live Script به کار گرفته شد. جاوا اسکریپت یک زبان سبک و مفسر، همراه با قابلیت های شی گرایی (Object Oriented) است که به شما این امکان را داده تا به صفحات ایستاتیک و ساده HTML ، حالت واکنش گرا و تعاملی بدهید. به طور کلی می توان جاوا اسکریپت را در موارد زیر خلاصه کرد.
جاوا اسکریپت یک زبان سبک و مفسر می باشد (معنای مفسر این است که برنامه دستورات را به صورت خط به خط خوانده و در پایان هر خط آن را اجرا می کند. بر خلاف کامپایلر که ابتدا کل دستورات را خوانده و اشکال یابی کرده، سپس آنها را یکباره اجرا می کند). این زبان برای ساخت نرم افزارهای میانی شبکه ( واسط ) استفاده می شود. جاوا اسکریپت یک زبان مکمل برای HTML می باشد. این زبان یک پلتفرم باز می باشد. جاوا اسکریپت یک زبان طرف کاربر (Client Side) است .
زبان جاوا اسکریپت یک زبان طرف مشتری (Client Side) می باشد، به این معنی که دستورات آن در کامپیوتر کاربر و در مرورگر وی اجرا می شود. دستورات جاوا اسکریپت را مستقیما می توان درون اسناد HTML وارد کرده و یا آنها را در یک فایل مجزا قرار داد و سپس آن فایل را به صفحه HTML پیوند زد. وجود زبان جاوا اسکریپت باعث می شود تا صفحات HTML از حالت Static و ساده درآمده و بتوانند با کاربر ارتباط برقرار کرده، مرورگر را کنترل نموده و به صورت پویا محتویات HTML تولید و به صفحه اضافه کنند. کدهای سمت کلاینت جاوا اسکریپت، قابلیت انجام بسیاری از کارهایی که توسط کد های سمت سرور انجام می شوند را دارا هستند.
برای مثال، می توانید کد جاوا اسکریپتی نوشته تا مقدار ورودی کاربر در یک کادر متن را کنترل نموده و در صورتی که وی یک آدرس ایمیل با فرمت صحیح را وارد کرده باشد، اجازه ارسال فرم و اطلاعات درون آن را بدهد. کد های جاوا اسکریپت در صورتی که کاربر تمامی مقادیر مورد نیاز را به درستی در فرم وارد نموده باشد، پس از Submit فرم در صفحه، اجرا می شوند. جاوا اسکریپت می تواند اعمال کاربر، مثل فشردن یک دکمه فرمان، کلیک بر روی یک لینک و... را تشخیص داده و دستورات مورد نظر را پس از انجام این رخدادها، اجرا کند.
مزایای استفاده از جاوا اسکریپت
استفاده از زبان جاوا اسکریپت، مزایای خاصی دارد که از آن جمله می توان به موارد زیر اشاره کرد.
کاهش عملکرد و درگیر نمودن سرور :
با کنترل مقادیر وارد شده توسط کاربر در فیلدهای فرم دریافت اطلاعات، می توانید از ارسال اطلاعات نا صحیح به سرور و پردازش آنها جلوگیری کنید. این کار بار ترافیکی بر روی سرور و همچنین میزان اطلاعات ارسال و دریافت شده را کاهش می دهد.
پاسخ سریع و لحظه ای به کاربر :
به دلیل اجرای سریع کدهای جاوا اسکریپت که در مرورگر کاربر اجرا می شوند، کاربر دیگر مجبور نخواهد بود تا پایان زمان ارسال اطلاعات به سرور و پردازش و سپس لود صفحه جهت دربافت نتیجه خود صبر کند.
بالا رفتن قدرت تعامل با کاربر :
به وسیله جاوا اسکریپت می توانید کدهایی طراحی نموده تا به سرعت به انجام اعمالی مثل کلیک کاربر، عبور موس از روی یک منطقه و یا زدن دکمه های کیبورد، واکنش نشان دهید.
رابط کاربری قوی تر :
به وسیله جاوا اسکریپت می توانید اجزایی مثل منو های بازشو، اسلایدشوها و... را طراحی نموده و به سایت خود، رابط کاربری قوی تری بدهید.
محدودیت در کار با جاوا اسکریپت
شما نمی توانید از جاوا اسکریپت، به عنوان یک زبان کامل که تمامی نیازهای برنامه نویسی تان را برآورده می کند، استفاده کنید. این زبان، فاقد امکانات مهم زیر می باشد. زبان کلاینت ساید جاوا اسکریپت، امکان خواندن و نوشتن بر روی فایل ها را به دلیل مسایل امنیتی نمی دهد. جاوا اسکریپت نمی تواند برای ساخت نرم افزارهای جامع و پیشرفته شبکه، به دلیل عدم پشتیبانی مناسب، به کار رود. جاوا اسکریپت فاقد قابلیت اجرای چندین پروسه یا کار به صورت همزمان است.
ساختار دستوری جاوا اسکریپت
یک قطعه کد جاوا اسکریپت، شامل دستوراتی است که درون یک تگ باز و بسته ... ، در صفحات وب HTML تعریف می شوند. می توانید کدهای جاوا اسکریپت خود را که در تگ تعریف نموده اید، در هر جای صفحه وب مورد نظرتان قرار دهید، اما بهترین روش این است که آنها را در تگ ابتدای صفحه (تگ <head>) بگنجانی تگ به مرورگر اعلام می کند که کلیه دستورات درون این تگ را به صورت مفسر خوانده و اجرا کند. بنابراین ساده ترین کد جاوا اسکریپت می تواند به صورت زیر در صفحه تعریف شود.
<script...>
دستورات جاوا اسکریپت JavaScript code //
تگ JavaScript دو خاصیت مهم زیر را می تواند داشته باشد.
Language :
این خاصیت تعیین می کند که شما از چه زبان اسکریپتی برای نوشتن کدهای خود استفاده نموده اید که قاعدتا بایستی javascript باشد. به همین دلیل مرورگرهای جدید، از این خاصیت صرف نظر می کنند.
Type :
این خاصیت نیز نوع دستورات تعیین شده در اسکریپت را تعیین می کرده که رایج ترین مقدار برای آن “ text/javascript “ می باشد. به معنای اینکه به زبان جاوا اسکریپت و به صورت متنی هستند. بنابراین تگ JavaScript شما در حالت کاملتر بایستی به صورت زیر باشد.
<script language="javascript" type="text/javascript">
JavaScript code
نوشتن اولین قطعه کد جاوا اسکریپت
بیایید برای یادگیری و درک بهتر زبان جاوا اسکریپت، اولین قطعه کد خود را برای چاپ عبارت “ Hello World “ در خروجی بنویسیم. به شرح زیر
<html>
<body>
<script language="javascript" type="text/javascript">
</body>
</html>
در قطعه کد فوق، ما یک کد دلخواه به نام توضیح (comment) را اضافه کرده ایم که سایر دستورات را درون خود جای داده است. این کار برای جلوگیری از اجرای ناصحیح دستورات جاوا اسکریپت توسط ورژن های قدیمی مرورگرهایی است که از این زبان پشتیبانی نمی کنند. در مرحله بعد، تابع document.wite ( ) را فراخوانی کرده که می تواند متن یا کد HTML درون پرانتز مقابلش را بر روی صفحه چاپ می کند. بنابراین خروجی کد فوق به صورت زیر است.
Hello World!
وجود فاصله ( جای خالی ) بین کاراکترها و رفتن به خط بعدی را در دستورات جاوا اسکریپت
جاوا اسکریپت به طور کلی، فواصل خالی بین کاراکترها، Tab ها و رفتن به خط بعدی را در دستورات نادیده گرفته و تاثیری بر روی خروجی کد ندارند. به همین دلیل می توانید با مرتب کردن و دادن فواصل لازم به خطوط کدهای خود، آنها را بسیار خوانا و قابل فهم نمایید.
به کار بردن کاراکتر ; اختیاری است
معمولا هر خط کد یا دستور در جاوا اسکریپت، همانند آنچه در C++ یا Java دیده اید، با یک کاراکتر ; به پایان می رسد. اما در جاوا اسکریپت، چنانچه هر کد دستوری شما در یک خط جدا Line باشد، می توانید از به کار بردن کاراکتر; خودداری کنید. برای مثال در قطعه کد زیر، می توانید از به کار بردن ; در پایان هر دستور اجتناب نمایید.
<script language="javascript" type="text/javascript">
اما در قطعه کد زیر، هر دستور در هنگام پایان حتما بایستی با یک کاراکتر ; بسته شود.
<script language="javascript" type="text/javascript">
نکته:
بهتر است عادت کرده از ; در کدهای خود استفاده نمایید.
جاوا اسکریپت یک زبان حساس به بزرگ یا کوچک بودن حروف می باشد. این بدان معناست که که کلمات کلیدی زبان، نام متغیرها یا توابع و هر واژه دیگری بایستی با رعایت بزرگ یا کوچک بودن حروف نوشته شوند. بنابراین کلمات Time، TIME و یا TiMe در این زبان با هم متفاوت می باشند.
قرار دادن توضیحات کدنویسی (comment) در جاوا اسکریپت
از توضیحات یا کامنت ها، برای تشریح کدهای خود و یا غیر فعال کرد موقت آنها استفاده می کنیم. این دستورها و متون توسط موتور جاوا اسکریپت اجرا نشده و خروجی بر روی صفحه ندارند. زبان جاوا اسکریپت از روشی همانند زبان C++ برای قرار دادن توضیحات در کدهای خود استفاده کرده و قانون های کلی زیر را داراست. هر متنی که بین یک // و پایان یک خط دستور قرار بگیرد، یک توضیح حساب می شود. هر متنی که بین یک /* و */ قرار بگیرد، توضیح حساب شده و می تواند حتی شامل چندین خط دستور باشد. جاوا اسکریپت، از کاراکتر ویژه زبان HTML جهت توضیحات پشتیبانی می کند.
فعال سازی جاوا اسکریپت در مرورگرها
تمامی مرورگرهای مطرح و به روز دنیا، دارای موتور پردازشگر جاوا اسکریپت به صورت پیش فرض بوده و این قابلیت در آنها فعال است. اما گاهی اوقات لازم می شود تا قابلیت جاوا اسکریپت را در مرورگرتان فعال و یا غیر فعال نمایید. در این درس قصد داریم تا نحوه فعال سازی و یا غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگرهایIE ، FireFox وOpera را به شما آموزش دهیم.
جاوا اسکریپت و اینترنت اکسپلورر
مراحل زیر، نحوه روشن یا خاموش کردن قابلیت جاوا اسکریپت را در مرورگر IE نشان می دهد.
-
از منوی اصلی مرورگر، گزینه Tools > Internet Option را کلیک نمایید.
-
از کادر باز شده، لبه Security را انتخاب کنید.
-
دکمه Custom Level را کلیک نمایید.
-
منوی فوق را تا رسیدن به گزینه “ Security Option “ به سمت پایین اسکرول کنید.
-
دکمه رادیویی Enable را در زیر بخش Active Scripting ، برای فعال شدن قابلیت جاوا اسکریپت کلیک نمایید.
-
در نهایت دکمه Ok را زده و از پنجره خارج شوید.
نکته:
برای غیر فعال نمودن قابلیت جاوا اسکریپت، بایستی دکمه رادیویی Disable را در همان بخش Active Scripting انتخاب کنید.
جاوا اسکریپت در مرورگر Firefox :
مراحل زیر نحوه روشن یا خاموش نمودن فابلیت جاوا اسکریپت در مرورگرFirefox را نشان می دهد.
-
از منوی برنامه، مراحل زیر را دنبال کنید : Tools > Options
-
گزینه Content را از پنجره باز شده انتخاب کنید.
-
گزینه Enable JavaScript را انتخاب کنید.
-
در نهایت دکمه ok را زده و پنجره را ببندید.
برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر Firefox ، بایستی تیک گزینه Enable JavaScript را بردارید.
Opera جاوا اسکریپت در مرورگر
مراحل زیر، نحوه روشن یا خاموش کردن قابلیت جاوا اسکریپت در مرورگر Opera را نشان می دهد.
-
از منوی اصلی مرورگر، مسیر زیر را طی کنید : Tools > Prefrences
-
گزینه Advanced را از پنجره باز شده انتخاب کنید.
-
از لیست آیتم های موجود، گزینه Content را انتخاب نموده و کادر انتخابی Enable JavaScript را علامت بزنید.
-
در نهایت دکمه Ok را زده و پنجره را ببندید.
برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر اپرا، کافی است تیک گزینه Enable JavaScript را در منوی اشاره شده بردارید.
نحوه هشدار دادن به مرورگرهایی که از جاوا اسکریپت پشتیبانی نمی کنند
گاهی اوقات ممکن است به دلیل قدیمی بودن مرورگر مورد استفاده کاربر و یا غیر فعال بودن قابلیت جاوا اسکریپت، مرورگر کدهای جاوا اسکریپت را به درستی اجرا نکرده و باعث تولید خروجی نا مطلوب در صفحه شود. برای این منظور، می توان با استفاده از تگ <noscript> <span =""> یک اقدام احتیاطی انجام داد تا در صورت عدم اجرای دستورات <span=""><>، دستور آن تگ اجرا نشود. این تگ بایستی بلافاصله پس از تگ <span=""><> در صفحه تعیین شده و حاوی پیامی به کاربر با مفهوم عدم اجرای اسکریپت ها باشد. مثال زیر نحوه استفاده از این تگ را نشان می دهد.
< html >
< body >
< script language="javascript" type="text/javascript" >
< /script >
< noscript >
متاسفانه دستورات جاوا اسکریپت، در این مرورگر اجرا نمی شوند.
< /noscript >
< /body >
< /html >
آموزش محل قرارگیری دستورات جاوااسکریپت-javascript
محل قرارگیری دستورات جاوا اسکریپت
دستورات JavaScript را می توان در بخش های < body > و همچنین < head > یک سند HTML جای گذاری کرد.
تگ< script >
در HTML، کدهای جاوا اسکریپت را باید بین تگ های < script > و < /script > درج کرد (وارد کرد).
مثال:
< script >
document.getElementById("demo") = "My First JavaScript";
< /script >
نکته:
در مثال های پیشین خصیصه ی typeبرای تگ< script >بکار برده شده مانند این نمونه
< script type="text/javascript" >
در 5 ،HTMLکلیه ی مرورگر های موجود زبان پیش فرض اسکریپت نویسی JavaScript می باشد و از این رو نیازی به خصیصه ی (attribute) type نیست.
توابع و رخدادهای JavaScript
یک تابع / function در جاوا اسکریپت در واقع یک ساختمان یا مجموعه (block) ای از کدها است، که درست زمانی که لازم است اجرا می شوند. برای مثال، یک تابع ممکن است زمانی اجرا شود که رخدادی / event معین روی دهد درست مثل زمانی که کاربر موس را کلیک می کند.
قرار دادن کدهای جاوا اسکریپت در بخش< head >یا< body >
می توان هر تعداد اسکریپت که لازم است در سند HTML قرار داد. اسکریپت ها را می توان در بدنه ی HTML یا قسمت < body >قرار داد و یا آن ها را در بخش< head >صفحه HTML گنجاند.
نکته:
توصیه می کنیم تمامی کدهای خود را در یک مکان واحد نگه دارید.
قراردهی کد جاوا اسکریپ در بخش< head >
در این مثال، یک تابع جاوا اسکریپت در بخش (بین تگ باز و بسته ی)< head > صفحه ی HTML قرار داده می شود. زمانی که روی دکمه کلیک می کنید تابع فراخوانده (invoke) می شود.
مثال:
< !DOCTYPE html >
< html >
< head >
< script >
function myFunction() {
document.getElementById("demo") = "Paragraph changed.";
}
< /script >
< /head >
< body >
< h1 >My Web Page< /h1 >
< p id="demo" >A Paragraph< /p >
< button type="button" ="myFunction()" >Try it< /button >
< /body >
< /html >
جای گذاری کدهای جاوا اسکریپت در بدنه ی HTML / قسمت < body >
در این مثال، یک تابع جاوا اسکریپت بین تگ های باز و بسته ی < body > صفحه ی HTML قرار داده می شود. تابع مربوطه با کلیک روی تنها یک دکمه فراخوانده می شود.
مثال:
< !DOCTYPE html >
< html >
< body >
< h1 >My Web Page< /h1 >
< p id="demo" >A Paragraph< /p >
< button type="button" ="myFunction()" >Try it< /button >
< script >
function myFunction() {
document.getElementById("demo") = "Paragraph changed.";
}
< /script >
< /body >
< /html >
نکته:
توصیه می شود اسکریپت ها (Script) را در پایین (انتهای) المان < body > قرار دهید. این کار در حقیقت به بارگذاری هر چه بهتر صفحه کمک می کند، زیرا که نمایش HTML با بارگذاری اسکریپت ها مسدود نمی گردد.
قراردادن اسکریپت ها در فایل های خارجی
همچنین می توان اسکریپت ها را در فایل های خارجی جای گذاری کرد. اسکریپت های خارجی (external scripts) زمانی بیشترین کارایی را دارند که یک کد یکسان در بسیاری از صفحات وب بکار گرفته شده است. فایل های جاوا اسکریپت همگی دارای پسوند .jsهستند. جهت استفاده از یک اسکریپت که در فایل خارجی قرار داده شده باشد، کافی است اسم فایل اسکریپت را داخل خصیصه ی src (source) در تگ< script > قرار دهید.
مثال:
< !DOCTYPE html >
< html >
< body >
< script src="myScript.js" >< /script >
< /body >
< /html >
می توانید ارجاع (reference) به اسکریپت خارجی را مطابق میل خود در تگ های < head >یا < body > قرار دهید. اسکریپت مربوطه درست همانگونه عمل خواهد کرد که گویی دقیقاً همان جایی که تگ< script > قرار گرفته، جای گذاری شده.
توجه:
اسکریپت های خارجی نمی توانند دربردارنده ی تگ های < script > باشند.
مزایای استفاده از خاصیت قراردهی کدهای جاوا اسکریپت در فایل های خارجی
.جای گذاری دستورات جاوا اسکریپت در فایل های خارجی مزایایی دارد که به ترتیب زیر می باشد کد و HTML را از هم جدا می سازد مدیریت و خواندن کدهای HTML و JavaScript را به مراتب آسان تر می سازد. فایل های جاوا اسکریپت که در حافظه ی پنهان ذخیره شده باشند.(به طور موقت ذخیره شده باشند) می توانند در افزایش سرعت بارگذاری صفحه کمک شایانی بکنند.
این آموزش ادامه دارد
