در اين بخش مي‌توانيد در مورد تمامي مسائل و موضوعات مرتبط با طراحي صفحات اينترنتي به بحث بپردازيد
Rookie Poster

Rookie Poster



no avatar
پست ها

27

تشکر کرده: 0 مرتبه
تشکر شده: 0 مرتبه
تاريخ عضويت

سه شنبه 14 فروردین 1386 16:46

آرشيو سپاس: 1 مرتبه در 1 پست

JavaScript چيست؟

توسط Shahsevand » يکشنبه 27 آبان 1386 02:23

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 را دارند، کار ميکنند.
ميتوانيد بااستفاده از تگ <APPLET> در سند HTML فرامين Java را بکار بگيريد و سپس هنگامي که browser تگ <APPLET> را مشاهده کرد، 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 هر دو داراي مقدار 6 خواهد بود.

معادله ها

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 در صورتيکه Y از X بزرگتر باشد مفهوم، true را بر ميگرداند.
X<=Y در صورتيکه Y از X بزرگتر يا برابر باشد مفهوم، true را بر ميگرداند.
X&&Y در صورتيکه هم X و هم Y صحيح باشد مفهوم، true را بر ميگرداند.
X\\Y در صورتيکه يا X يا Y صحيح باشند مفهوم، true را بر ميگرداند.
X! در صورتيکه مقدار X غير صحيح باشد مفهوم، true را بر ميگرداند.

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

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



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

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

3 - محل قرار گرفتن اسکريپتها
اسکريپتها را ميتوان در دوجا درون صفحه قرار داد : يا داخل تگهاي <head> و <head/> و يا داخل تگهاي <body> و <body/> .



براي نوشتن اولين اسکريپت عبارت
<"script language="JavaScript" type="text/JavaScript>

را تايپ کنيد. بدين طريق تگ ابتدايي دستور <script> وجود اين برنامه را به browser معين ميکند.

ويژگي "script language="JavaScript نوع زبان اسکريپت نويسي را تعيين کرده و بوسيله ويژگي type="text/javascript"s اسکريپت را بعنوان plain text تحت JavaScript معرفي ميکند.
  
سپس عبارت ("document.write("test1 را تايپ کنيد, بدين طريق يک پنجره جديد باز شده و در آن عبارت test1 تايپ ميشود.
  
تگ پاياني <script/> را تايپ کنيد.

بعد از اين browser بقيه سند HTML را اجرا ميکند زيرا متوجه پايان اسکريپت شده است.

نکات مورد توجه
ميتوان در يک صفحه به هر تعداد از تگ اسکريپت <script> استفاده نمود.

<html>
<head>
</head>

<body>
<h1>
<script language="javascript" type="text/javascript">

document.write("MyComputer.iR")

</script>
</h1>

</body>
</html>
4 - قرار دادن توضيحات در اسکريپتها
قرار دادن توضيحات در اسکريپتها را ميتوان از نکات مهم در هنگام نوشتن اسکريپتها دانست, زيرا که بدين طريق ميتوان علل نوشتن چنين اسکريپتها را متوجه شد. همچنين يکي ديگر از دلايل نوشتن توضيحات اسکريپت, کمک به استفاده مجدد آن توسط ديگر افراد ميباشد.

براي نوشتن توضيح در اسکريپتها

ابتدا متن مورد نظر را تايپ کنيد.

1. توجه داشته باشيد با علامت --!> , JavaScript ديگر به تمامي محتويات داخل آن توجهي از لحاظ دستوري نميکند.

2 . سپس براي پايان توضيحات علامت <-- را تائپ کنيد.

3 . سپس دستورات اصلي که در اينجا document.write("test")s است را تائپ کنيد.


<html>
<head>
</head>

<body>
<h1>

<!-- hide script from old browsers -->
<!--this is on example of a long JavaScript comment-->

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

document.write("MyComputer.iR")

//end hiding script from old browsers -->
</script>
</h1>

</body>
</html>
5 - اخطار به کاربر      
بدعالی نگارش یافته توسط مدیر سایت    
يکي از مزاياي برنامه JavaScript قابليت ارائه پيش زمينه ذهني به کاربران صفحه طراحي شده ميباشد, بدين معنا که پنجره اي براي اعلام نياز به برنامه JavaScript در صفحه وب مورد درخواست کاربر نمايش در مي آورد. در طراحي نوين, اين روش منسوخ شده است.



براي اخطار به کاربر

عبارت arert("welcome to IranJavaScript webSite")s را تایپ کنيد, همانطور که مشاهده ميکنيد مجموعه اسکريپتهاي مورد نياز براي اخطار دادن به کاربر بايد در بين تگ و قرار گيرد.


<html>
<head>
<script language="javascript" type="text/javascript">

alert("Welcome to MyComputer.iR webSite")

</script>

</head>

<body>
<h1>

<!-- hide script from old browsers -->
<!--this is on example of a long JavaScript comment-->

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

document.write("MyComputer.iR")

//end hiding script from old browsers -->
</script>
</h1>

</body>
</html>

6 - اعلان پيغام به کاربر
در بعضي موارد بجاي دريافت اعلام بله/خير (yes/no) از طرف کاربر نياز به جواب بيشتري ميباشيم. در اين حالت همانطور که اسکريپت فوق مشاهده ميکنيد, امکان پرسش سئوالي (البته باجواب از قبل تعيين شده) از کاربر فراهم شده تا جوابي بصورت يک جمله از پيش تعيين شده دريافت کنيد.


براي اعلان پيغام به کاربر

ans=prompet("Are you sure you want to do that ?)

در پرانتز اين دستور همانطور که مشاهده ميکنيد, سئوال مطرح شده براي کاربر و جواب از پيش تعيين شده, که در هر صورت يا جواب کاربر برگردانده شده و يا هيچ. حالت دوم در يکي از سه حالت زير پيش مي آيد:
يا برروي "cancel" کليد کند و يا جواب پيش فرض وجود نداشته و کاربر برروي "ok" کليک نمايد و يا کاربر جواب از پيش تعيين شده را پاک کرده و سپس بر روي "ok" کليک نمايد.


تذکر

در بعضي از browser ها ميتوان پارامتر قسمت دوم را بدون ايجاد خلل حذف کرد. اما در بقيه, پيغام پيش فرض بنام "undefined" ظاهر ميشود.


<html>
<head>

<script language="javascript" type="text/javascript">
ans=prompt("Are you sure you want to do that?","")
if (ans) {
alert("You said "+ans)
}
else {
alert("You refused to answer")
}

</script>

</head>

<body>
<h1>

<!-- hide script from old browsers -->
<!--this is on example of a long JavaScript comment-->

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

document.write("MyComputer.iR")

//end hiding script from old browsers -->
</script>
</h1>

</body>
</html>


7 - دستور العمل redirecting
نه تنها ميتوان وجود برنامه JavaScript را درسيتم کاربر چک کرد, بلکه ميتوان علاوه بر آن نسخه JavaScript را نيز معين نمود. همانطور که در اسکريپت زير مشاهده ميکنيد نحوه عمل redirect کردن و يا فرستادن کاربر به صفحه اي ديگر بر اساس نسخه JavaScript موجود در browser ذکر شده است.

به منظور انتقال کاربر به صفحه جديد

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

توسط ويژگي Language در تگ script ميتوان حداقل نسخه اي که browser بتواند زبان اسکريپت نوشته شده را اجرا کند, مشخص نمود. در اين حالت browser نيازمند برنامه JavaScript 1.3 و به بعد ميباشد, بطوريکه اگر browser قابليت اجراي اسکريپت را نداشته باشد, پيغام خطا را مشاهده خواهد کرد.

Window.location="www.microsoft.com"s

در اين خط مشخصه مکاني پنجره فعلي مجددا تنظيم ميشود. بعبارت ديگر browser صفحه فعلي را به صفحه اي خاص تغيير ميدهد.

</script>

تگ پاياني اسکريپت


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

نيازي به اضافه کردن ويژگي هاي type يا language به تگ پاياني <script/> نميباشد.


توجه داشته باشيد که ميتوان در يک صفحه, از چند نسخه (version) يک زبان اسکريپت استفاده کرد, مثلا در يک جا JavaScript 1.2 و در جاي ديگر JavaScript 1.5 را بکار برد.


نميتوان اسکريپت را محدود به نسخه خاصي نمود, از هر نسخه اي که تعيين شود نسخه هاي بعدي آن نيز به اجرا در مي آيد.


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



<html>
<head>

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

window.location="http://www.Tablighha.ir"

</script>

</head>

<body>
<h1>

<!-- hide script from old browsers -->
<!--this is on example of a long JavaScript comment-->

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

document.write("MyComputer.iR")

//end hiding script from old browsers -->
</script>
</h1>

</body>
</html>
8 - دستور عمل redirecting با استفاده از پيوند
هنگاميکه کاربر اسکريپت موجود در بحث قبل را اجرا کرد, مستقيما از يک صفحه به صفحه ديگر بطور اتوماتيک فرستاده ميشود, بدين وسيله کاربر ميتواند قبل از رفتن به دومين صفحه, بطور مختصر صفحه اول را مشاهده کند و چون اينگونه بنظر ميرسد که در هر صورت مشاهده کامل صفحه ضروري ميباشد, در نتيجه بهتر است عمل انتقال کاربر (redirecting) توسط يک پيوند در صفحه اول انجام شود.



براي انتقال کاربر با استفاده از پيوند

<a href="http://microsoft.com" onclick="windows.locating="aghta.com" ; return false">test</a>s

بدين صورت, برنامه JavaScript را در تگ پيوند درون سند HTML قرار داده و در صورتيکه کاربر برنامه مزبور را نداشته باشد, پيغامي مبتني بر نياز وجود JavaScript مشاهده خواهد کرد.


ولي در صورتي که کاربر برنامه قابل اجرا براي JavaScript را داشته و بر روي پيوند کليک کند, کنترل کننده onClick صفحه جديد اجرا ميکند. اما در قسمت return false فرايند مربوطه به درخواست, کاربر متوقف ميسازد و ديگر آدرس مربوطه اجرا نخواهد شد.




<html>
<head>
</head>

<body>
<h1>

<a href="http://microsoft.com" onclick="windows.location="http://Tablighha.ir" ; return false"> test </a>

</h1>

</body>
</html>

Rookie Poster

Rookie Poster



no avatar
پست ها

27

تشکر کرده: 0 مرتبه
تشکر شده: 0 مرتبه
تاريخ عضويت

سه شنبه 14 فروردین 1386 16:46

آرشيو سپاس: 1 مرتبه در 1 پست

توسط Shahsevand » يکشنبه 27 آبان 1386 23:31

مطلب ديگه اي براي آموزش اين نرافزار ميدونيد ما رو هم بهره مند کنيد
با تشکر M_SH


 


  • موضوعات مشابه
    پاسخ ها
    بازديدها
    آخرين پست
  • پرتال چيست؟
    توسط Mahdi1944 » پنج شنبه 11 اسفند 1384 04:14
    2 پاسخ ها
    901 بازديدها
    آخرين پست توسط Mahdi1944 نمایش آخرین ارسال
    پنج شنبه 22 تیر 1385 00:34
  • پورتال چيست؟
    توسط Farhad3614 » سه شنبه 5 اردیبهشت 1385 14:56
    0 پاسخ ها
    824 بازديدها
    آخرين پست توسط Farhad3614 نمایش آخرین ارسال
    سه شنبه 5 اردیبهشت 1385 14:56
  • Ajax چيست؟
    توسط Farhad3614 » جمعه 4 فروردین 1385 04:11
    10 پاسخ ها
    4754 بازديدها
    آخرين پست توسط Mahdi1944 نمایش آخرین ارسال
    دوشنبه 17 شهریور 1393 22:03

چه کسي حاضر است ؟

کاربران حاضر در اين انجمن: بدون كاربران آنلاين و 0 مهمان