صفحه شخصی تکتم وظیفه دوست احمدی

گزارش هفته پنجم

آشنایی با جاوا اسکریپت

مقدمه :

جاوا اسکریپت مانند تمام زبان های اسکریپتی حاوی دستورات و امکاناتیست که تعاملاتی را در سایت فراهم می آورد و در جهت داینامیک کردن صفحات وب استفاده می شود و مانند سایر زبان های اسکریپتی در واقع کوچک شده ی زبان برنامه نویسی مادر است و تعدادی از دستورات و امکانات برنامه نویسی در زبان مادر از اینگونه زبان ها حذف شده است، چرا که در حقیقت زبان های اسکریپتی برای استفاده در شبکه نوشته می شوند و باید کمترین زمان اجرا و پیچیدگی را داشته باشند.

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

JavaScriptچیست؟

در اولین روزهای تاسیس مجمع جهانی وب (World Wide Web) دستورات HTMLبسیار ساده و آسان بود، بطوریکه فراگیری فرامین مورد نیاز بیشتر از چند روز طول نمیکشید ولی هنگامی که Web، شروع به پیشرفت نمود، طراحان خواستار کنترل بیشتری شده و در نتیجه مجموعه دستورات مورد نیاز تهیه گردید.

سپس از آنجاییکه صفحات وب، بهتر است به صورت دینامیک و متحرک باشند، طراحان نیز خواستار ارتباط بین بینندگان سایت و صاحبان آن شدند، در نتیجه استفاده از دستورات HTMLبه تنهایی نیاز آنها را برطرف نکرد و سپس شرکت Netscapeبرای ایجاد و کنترل ارتباط بین صاحبان سایت و بینندگان آن در صفحات Webاز JavaScriptکمک گرفت.

مفهوم JavaScript

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

قابلیت JavaScript

به وسیله جاوا اسکریپت میتوان قابلیتهای بیشماری از قبیل ایجاد ارتباط بین کاربر و سایت به صفحه Webاضافه نمود. مثلا سایتهایی را مشاهده نمودید که با قرار گرفتن نشانگر موس بر روی دکمه مورد نظر بصورتی متفاوت (برجسته، تغییر محتویات درون دکمه) نمایش داده میشود، این عمل توسط JavaScriptانجام شده و به این تکنیک rolloverگفته میشود.

به وسیله rolloverمیتوان حالتی ایجاد نمود تا اطلاعات وارد شده توسط کاربر درون فرمها بطور صحیح باشند و در نتیجه در زمان و هزینه مربوط بتوان صرفه جویی نمود. میتوان محاسبات لازم و مورد نیاز عددی را بدین وسیله در دستگاه کاربر و بدون نیاز به هیچ گونه فرایندی در serverها انجام داد تفاوت بین برنامهای server-sideو client-sideبدین گونه است که در برنامه server-sideبرنامه توسط CGIدر خود serverها اجرا میشود مانند: برنامه ASPولی در برنامه های client-sideبرنامه در دستگاه کاربر اجرا خواهد شد.

از دیگر فرمت ها و قابلیتهای JavaScriptمیتوان، صفحات HTMLرا بر اساس عمل کاریر نمایش داد. فرض کنید که یک سایت آژانس مسافرتی را باز کرده و مقصد خود را هاوایی انتخاب کنید، بوسیله اسکریپت میتوان آخرین اطلاعات مسافرتی مورد نیاز برای هاوایی را در صفحه ای جدید مشاهده نمایید.

به وسیله این برنامه میتوان بر browserکنترل انجام داد و پنجره های جدیدی را باز نمود، جعبه های پیغام را به کاربر اعلام نمود و بر روی قسمت status barپنجره browserپیغام مخصوصی را نمایش داد.

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

JavaScriptیک برنامه Javaنیست؟

برخلاف شباهت اسمی موجود برنامه Javaو JavaScript، هیچگونه شباهتی بین این دو برنامه وجود ندارد Javaیک زبان برنامه نویسی بسیار کامل پیشرفته ای است که توسط شرکت sun microsystemتهیه شده و با استفاده از آن که نسل بعدی برنامه های cو ++cمیباشد، میتوان تمامی برنامه مورد نیاز را نوشته و در ضمن قطعات الکترونیکی استفاده کننده را نیز کنترل نمود. از خاصیتهای دیگر Javaاجرای برنامه نوشته شده توسط آن در تمامی مکانها با هرگونه سیستم عامل از قبیل Windows، Unix، Mac osمیباشد.

اساس Javaدر برنامه های client-sideبرای ایجاد appletها میباشد، این برنامه های کوچک توسط شبکه اینترنت دریافت شده و درون خود browserها اجرا میشوند بطوریکه بعلت وجود قابلیت همه گیر Java، این برنامه در تمامی browserهایی که قابلیت اجرای Javaرا دارند، کار میکنند.

میتوانید بااستفاده از تگدر سند HTMLفرامین Javaرا بکار بگیرید و سپس هنگامی که browserتگرا مشاهده کرد، appletمورد نظر از serverوارد دستگاه شده و در جای تعبیه شده درون سند HTMLاجرا میشود

اندکی در مورد تاریخچه JavaScript

در صورتیکه JavaScriptبا نام Javaتناسبی ندارد، پس چرا در نام خود شباهت دارند؟ پاسخ به این سئوال را در استفاده از معروفیت نام موجود در بازار خواهید یافت. بعد از اضافه نمودن قابلیتهای اسکریپت نویسی Netscapeکه اساسا زبان برنامه نویسی Livescriptنامیده شده در همین موقع زبان gavaمعروفیت خاصی پیدا کرد و شرکت Netscapeبعنوان اولین شرکت از آن در browserهای خود استفاده کرد و نام آنرا به JavaScriptتغییر این زبان برنامه نویسی گسترش چشمگیری بدنبال داشت.

 زبان ترکیبی:

زبان JavaScriptیک زبان برنامه نویسی “شی گرا” میباشد. در این قسمت مفهوم شی گرایی یک برنامه را با توجه به مفاهیم objectمشخصات و اعمال، آنها را توضیح میدهیم.

Object

در دنیای حقیقی اشیاء مانند کامپیوتر، دوچرخه و …میباشند، در زبان JavaScriptاشیاء درون browserها بوده و عبارتند از پنجره ها و فرم ها.

Properties

اشیاء (object) خود دارای مشخصه هایی میباشد مثلا گربه دارای پوست میباشد، کامپیوتر، کیبورد داشته و دوچرخه دارای چرخ است! در دنیای JavaScriptپنجره دارای تیتر و فرمها دارای check boxمیباشند.

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

فرض کنید که دارای مشخصه ای بنام emptyهستید، پس بنابرآنچه گفته شد این مشخصه (خالی بودن) را میتوانید هم برای شکم گربه و هم برای کاسه گربه بکار ببرید!

Methods

 

کاری که اشیاء میتوانند انجام دهند، Methodsنامیده میشود، که مثلا خرخر گربه، خرابی کامپیوتر، و چرخش دوچرخه را میتوان عنوان نمود. اشیاء زبان JavaScriptنیز دارای methodsهایی میباشد مثلا عمل کلیک برای دکمه ه، بازکردن پنجره و انتخاب متن مورد نظر را بدنبال دارد. همانطور که توجه میکنید پرانتزها نمایانگر وجود methodمیباشند.

کنترل وقایع (handling events)

eventsعملیاتی بوده که کاربر در هنگام مشاهده صحنه طراحی شده انجام میدهد.

پذیرش (Submitting) یک فرم و تغییر مکان نشانگر ماوس برروی یک تصویر، دو نمونه از حالات و وقایع اتفاق افتاده میباشند.

توسط دستورات بنام event handlers، این برنامه وقایع مورد نظر را کنترل میکند. متداولترین کنترل کننده های وقایع در جدول فوق آورده شده اند و در آینده بیشتر در مورد آنها صحبت خواهیم کرد.

 Event

onAbort

 کاربر با اشیاء کاری ندارد.

onBlur

 کابر شی را تغییر میدهد.

OnError

 اسکریپت با اشتباه مواجه میشود.

oncHange

 کاربر برروی شی کلیک میکند.

onFocuse

 کاربر یک شی را فعال میکند.

onLoad

 بارگزاری شی اتمام میشود.

onMouseover

 نشانگر ماوس بر روی شی میرود.

onMouseout

 نشانگر ماوس از روی شی کنار میرود.

onSubmit

 کاربر یک فرم را پذیرش میکند.

onUnload

 کاربر به پنجره کاری ندارد.

onSelect

 کاربر محتویات شی را انتخاب میکند

نکات مورد توجه

•زبان JavaScriptبه حروف بزرگ و کوچک حساس میباشد.

•نام متغیرها با اعداد شروع نمیشود. و در آنها فضای خالی یا نقطه گذاری وجود ندارد. همچنین نباید اسمی مشابه با کلمات از قبل رزرو شده و مخصوص JavaScriptاستفاده کرد.

عملگردها

عملگرده، علاماتی بوده که برای کار با متغییرها استفاده میشوند. مطمئنا با عملگرهای ساده ریاضی مثل جمع، تفریق آشنا هستید. برای اطلاع بیشتر به دیگر عملگرها به جدول فوق توجه کنید

X+Y(عددی)

 دو عدد Xو Yرا با یکدیگر جمع میکند.

X+Y(حرفی)

 عبارت داخلی Yو Xرا در کنار هم قرار میدهد.

X-Y

 Yرا از Xکم میکند.

X*Y

 Yو Xرا هم ضرب میکند.

X/Y

 Xرا بر Yتقسیم میکند.

X%Y

 خارج قسمت Xبر Yرا نشان میدهد.

X++ ، ++X

 به Xیک عدد اضافه میکند. (X=X+1)

X– ، –X

 از Xیک عدد کم میکند. (X=X-1)

X-

 علامت Xرا عوض میکند

نکات مورد توجه۲

هر چند دو عملگر X++ ، ++Xبه مقدار Xیک واحد اضافه میکنند، اما در اصل دو عملگر متفاوت از یکدیگر میباشند. به عنوان مثال اگر X=5باشد و ++Y=Xباشد در نتیجه Y=5و X=6میشود ولی در عبارت Y=++Xمجهولهای Xو Yهر دو دارای مقدار ۶ خواهد بود.

 معادله ها

X=Y

 مقدار Xبرابر Yقرار داده میشود.

X+=Y

 مانند معادله X=X+Yاست.

X-=Y

 مانند معادله X=X-Yاست.

X*=Y

 مانند معادله X=X*Yاست.

X/=Y

 مانند معادله X=X/Yاست.

X%=Y

 مانند معادله X=X%Yاست

 

نامعادله ها

 

X==Y

 در صورتیکه X،Yمساوی باشند مفهوم، trueرا بر میگرداند.

X!=Y

 در صورتیکه X،Yنامساوی باشند مفهوم، trueرا بر میگرداند.

X>Y

 در صورتیکه Xاز Yبزرگتر باشد مفهوم، trueرا بر میگرداند.

X>=Y

 در صورتیکه Xاز Yبزرگتر یا برابر باشد مفهوم، trueرا بر میگرداند.

X

 در صورتیکه Yاز Xبزرگتر باشد مفهوم، trueرا بر میگرداند.

X<=Y

 در صورتیکه Yاز Xبزرگتر یا برابر باشد مفهوم، trueرا بر میگرداند.

X&&Y

 در صورتیکه هم Xو هم Yصحیح باشد مفهوم، trueرا بر میگرداند.

XY

 در صورتیکه یا Xیا Yصحیح باشند مفهوم، trueرا بر میگرداند.

X!

 در صورتیکه مقدار Xغیر صحیح باشد مفهوم، trueرا بر میگرداند

 

نکات مورد توجه۳

 

در صورتیکه متغییرهای (حرفی) رشته ای را با یکدیگر مقایسه کنید، توجه داشته باشید که “a” از “A” بزرگتر و “be” از “abracadabra” کوچکتر میباشد.

 

 ابزارهای مورد نیاز

 

از آنجا که JavaScriptیک متن ساده میباشد، در نتیجه میتوان از هر ویرایشگر متن کمک گرفت، همچنین میتوان از یک پردازشکر متن مثل wordکه فایل را نهایت بصورت text onlyذخیره شود، استفاده کرد ولی کلا بهتر است از برنامه ای که حالت plain textکه بصورت فرمت استاندارد آن است استفاده نمایید. در سیستم ویندوز اغلب کاربران از برنامه notepadاستفاده میکنند.

 

جاوا اسکریپت چه کاربردهایی دارد:

 

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

•امکان انجام محاسبات ریاضی با توجه به ورودی های عددی کاربر

•امکان بررسی محتویات فرم های قرار گرفته روی سایت

•امکان نمایش پیغام های مختلف با ظاهر های متفاوت روی سایت پس از بازدید کاربر و یا در حین بازدید

•تشخیص نوع مرورگر استفاده شده کاربر و نمایش محتویات صفحه بر اساس نوع مرورگر

•توانایی تشخیص IP، نوع سیستم عامل، نوع مرورگر بازدید کننده

•ایجاد انیمیشن، متحرک سازی و پویا نمایی

•ایجاد منوهای متحرک و دارای انیمیشن های مختلف

•و قابلیت های بسیار دیگر

 

چگونه کد جاوا اسکریپت بنویسیم:

برای وارد کردن اسکریپت در خطوط کد HTMLاز تگ

▪نکته ای در مورد سمیکالون(;) :

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

 

جاوااسکریپت یک زبان شی گراست و بر اساس موجودیت ها(objects) و خصوصیت های آنها کار می کند. منظور از موجودیت ها در جاوا اسکریپت، آیتم های موجود در مرورگرها هستند مانند پنجره ها، دکمه ها، فرم ها و...

Java Scriptمی تواند روی مشخصه های مختلف موجودیت ها تغییرات متفاوتی را اعمال نماید و بر اساس توابع مورد استفاده نتایج مورد نظر طراح را نمایش دهد. برای استفاده از کد های جاوا اسکریپت در میان صفحه سه روش وجود دارد:

•استفاده از کد در بخشhead

•استفاده از کد در بخشbody

•استفاده از فایل خارجی

 

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

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

دستورات جاوا اسکرپتی که قصد استفاده از آنها را دارید در این قسمت وارد می شوند

</script>

در صورتی که کدی داشته باشیم که بخواهیم مطمئن شویم در زمان نیاز اسکریپت لازم حتما لود شده است، آن را در بخش headمی نویسیم که در هنگام لود شدن صفحه قبل از هر چیزی کد مورد نظر لود شده باشد. همچنین در صورت استفاده از کد در بخش bodyلود شدن آنها تا هنگامی که آن بخش از صفحه لود شود به عقب می افتد و اگر صفحه به صورت کامل باز نشود ممکن است اسکرپت ما کار نکند.

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

راه حل جایگزین برای این مسئله استفاده از فایل JSبه صورت خارجی است. کدها و توابع در یک فایل جداگانه با فرمت js. ذخیره شده و در صفحات مختلف صدا زده می شود. برای استفاده از این کدها هم در محل مورد نیاز از تگ اسکریپت استفاده می شود، با این تفاوت که مسیر فایل خارجی اسکریپت نیز در این تگ وارد می شود.به عنوان مثال:

<script type="text/JavaScript" src="external.js">

</script>

[ 0 نظر ]
صفحه اصلی
پست الکترونیک
can't open file