نرگس چنگیزی
مطالب مرتبط با طراحی صفحات وب
تگ اسکريپت اکنون اين فايل را با پسوند htm ذخيره کنيد و سپس آنرا در مرورگر اينترنت اکسپلورر اجرا کنيد که جمله Hello my friends را بايد در صفحه ببينيد. حالا خصوصيت type را حذف کنيد و دوباره فايل را ذخيره و مشاهده کنيد، هيچ متني در صفحه ديده نميشود که با تغيير نسخه 1.5 به 1.3 آن متن دوباره نمايان خواهد شد. نوشتن نسخه جاوااسکريپت اجباري نيست يعني مي توانيد آنرا ننويسيد. در حال حاضر شما ميدانيد که براي اجرا شدن کدهاي جاوااسکريپت بايد آنها را در ميان تگهاي اچ تي ام ال بکار بريد. شايد اين سؤال برايتان پيش بيايد که در کجا بايد آنها را بنويسيد، آيا جاي خاصي دارند يا در هر کجا مي توانيد اينکار را انجام دهيد. کدهاي جاوااسکريپت مي توانند در هر کجاي سورس کد باشند اما بايد ابتدا تشخيص دهيد که بکاربردن هر قسمت از اسکريپت در کجا مناسب تر مي باشد. بطور کل کدهاي جاوااسکريپت به سه دسته تقسيم ميشوند، دسته اول از آنها در قسمت سر يعني head جاي مي گيرند. دسته دوم در قسمت بدنه کدهاي اچ تي ام ال نوشته می شوند. دسته سوم هم در يک فايل جداگانه و خارج از کدهاي html با پسوند js قرار مي گيرند. متغير چيست؟ قسمت بعدي يعني strTest نامي است که شما براي آن متغير انتخاب مي کنيد و سپس علامت مساوي است که متغير را برابر با يک مقدار قرار مي دهد و در آخر هم مقدار تعيين شده براي متغير که در اينجا يک رشته متني است يا يک text string ميباشد که به همين دليل بايد آنرا بين دو علامت " " قرار دهيم تا عيناً محتويات آن در مرورگر نوشته شود. بطور مثال چون مقدار متغيردر اينجا يک رشته يعني string بود من سه حرف str را به ابتداي نام متغير اضافه کردم. • نام يک متغير مي تواند از مجموع حروف، اعداد و علامت underline يا زيرين خط يعني _ تشکيل شود، که آغاز کننده نام نبايد يک عدد باشد و همچنين هيچگونه فاصله اي هم در آن نبايد باشد. • در جاوااسکريپت حروف کوچک با بزرگ متفاوت مي باشند يعني strTest با strtest کاملاً تفاوت دارد که اصطلاحاً مي گويند جاوااسکريپت case sensitive است. متغيرهاي کلي و سراسري که به آنها global گفته مي شود. اين متغيرها در سراسر يک فايل اچ تي ام ال کاربرد دارند يعني يکبار آنرا در ابتداي اسکريپت تعريف و مقدار دهي مي کنيد ولي در هر کجا از کد که مورد نياز باشد از آنها بهره مي گيريد. نوع ديگر آن متغيرهاي محلي يا local هستند که فقط در يک قسمت از اسکريپت کارآيي دارند که ممکن است در قسمت ديگري همان متغير با يک مقدار ديگري تعريف شود. معمولاً متغير هاي محلي در توابع يا function ها کاربرد دارند که يک متغير در هر تابع مي تواند مقادير متفاوت داشته باشد بدون اينکه پيغام خطايي توليد کند که در قسمت مورد نظر function ها را ياد خواهيد گرفت. Date Object يکي از ويژگي هايي که جاوااسکريپت دارد جمع آوري اطلاعات از سيستم کاربر و نمايش آنها در صفحات وب است. همانطور که ميدانيد زبان اچ تي ام ال به تنهايي قادر به انجام چنين کاري نيست اما با کمک زبانهاي ديگر تحت وب مانند Javascript ، مي تواند تا حدودي اين مشکل را برطرف کند. شئ هايي در جاوااسکريپت وجود دارند که توسط متدهاي مختلف، اطلاعات مورد نياز را از سيستم گرفته و در اختيار کاربران قرار مي دهند. يکي از اين object ها و شئ ها ، Date مي باشد که به کمک آن مي توانيم تاريخ و زمان سيستم را هنگام اجراي کد دريافت کنيم، سپس آنرا نمايش دهيم و يا اينکه در يک متغير ذخيره کنيم تا در صورت لزوم از آن بهره گيريم. اين object بصورت زير تعريف مي شود: اين شئ يک رشته متني شامل روز، ماه، سال، ساعت، دقيقه، ثانيه و اختلاف زماني با UTC را برميگرداند. UTC مخفف Coordinated Universal Time مي باشد که به آن Zulu time هم مي گويند و مطابق با استاندارد جهاني زمان است. بعد از ساختن شئ جديد Date ، مي توانيد توسط متدهاي مربوط به آن جزئيات ديگري از اين شئ دريافت کنيد. اين شئ داراي هفت متد اصلي ميباشد که بيشترين کاربرد را دارند. اين متدها عبارتند از: بطور مثال: ازعلامت : هم بين ساعت، دقيقه و ثانيه استفاده شده و چون مي خواستيم که اين علامت عيناً در صفحه نوشته شود آنرا بين علامت نقل قول يعني "" گذاشتيم. در ضمن مي توانيد از کدهاي اچ تي ام ال هم استفاده کنيد تا زمان به شکل دلخواه شما در صفحه چاپ شود. بطور مثال اگر بخواهيد که صورت Bold در صفحه نوشته شود، به شکل زير عمل مي کنيد: شئ Date به غير از متدهاي ذکر شده در بالا، داراي متدهاي ديگري است که توسط آنها مي توانيد زمان و تاريخي را بصورت دلخواه تنظيم کنيد. در اينگونه متدها بجاي کلمه get بايد از set استفاده کنيد و مقدار معيني را در پرانتز وارد کنيد. بطور مثال مي خواهيم همين موقع را در سال 2008 داخل صفحه چاپ کنيم.
جاوااسکريپت هم مانند زبان HTML از يکسري دستور و گرامر خاص خود پيروي مي کند. البته اين زبان به سادگي اچ تي ام ال نيست و بسيار هم حساس است، مثلاً در اچ تي ام ال فاصله بين تگها اهميتي ندارد و مرورگر آنرا ناديده مي گيرد اما در جاوااسکريپت فاصله بايد متناسب باشد که اگر رعايت نشود با پيغام خطا روبرو خواهيد شد. در قسمت بعد با چگونگي پيغامهاي خطا در جاوااسکريپت آشنا مي شويد. همانگونه که اطلاع داريد کدهاي جاوااسکريپت را بايد در ميان تگهاي HTML قرار دهيد. به همين دليل يک تگ براي آن در نظر گرفته شده است:
<script> ... </script>
که کليه دستورات جاوااسکريپت بايد مابين آنها قرار گيرد. اين تگهاي اچ تي ام ال به مرورگر مي فهمانند که در کجا اين زبان آغاز شده تا مفسر جاوااسکريپت مرورگر فعال شود و در کجا پايان مي پذيرد که برنامه مفسر هم کار خود را خاتمه دهد.
language
اما تگ script مانند بقيه تگها داراي خصوصياتي مي باشد، يکي از آنها language است که مقدار آنرا بايد برابر با javascript قرار دهيد،
k<script language="javascript">
</script>n
براي مقدار javascript مي توانيد نسخه آن را هم بنويسيد. اين زبان هم مانند اچ تي ام ال داراي نسخه هاي مختلفي است که هر کدام آنها با قابليتهاي جديدي در وب توسعه يافتند. نسخه هاي اين زبان عبارتند از 1.0 ، 1.1 ، 1.2 ، 1.3 ، 1.4 و آخرين نسخه حال حاضر هم 1.5 مي باشد که هم اکنون اين نسخه با مرورگر مايکروسافت يعني اينترنت اکسپلورر سازگاري ندارد. فعلاً مرورگر اينترنت اکسپلورر از نسخه 1.3 اين زبان پشتيباني مي کند.
type
تگ اسکريپت خصوصيت type هم دارد که براي اين زبان بايد آنرا برابر با text/javascript قرار دهيد. نکته قابل توجه اينست که اگر اين خصوصيت را به اين تگ اضافه کنيد، مرورگر اينترنت اکسپلورر نسخه 1.5 اين زبان را ناديده مي گيرد و کد را اجرا مي کند. شما مي توانيد با اجراي کد زير هم اولين اسکريپت خود را تجربه کنيد و هم خصوصيت type را در IE امتحان کنيد.
خب مانند زبان اچ تي ام ال مي توانيد از يک ويرايشگر متن مانند برنامه Notepad استفاده کرده و کد زير را در آن وارد کنيد:
n<html>
<head>
<title> My JavaScript </title>
</head>
<body>
<script language="javascript1.5" type="text/javascript">
document.write(" Hello my friends ")
</script>
</body>
</html>n
0 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: تگ,اسکريپت,HTML,script,language,javascript,آغاز,اسکريپت,نويسی,
نوشتن اسکريپت در قسمت head
کليه کدهاي جاوااسکريپت به محض باز شدن يک صفحه وب در مرورگر اجرا مي شوند اما گاهي اوقات ما نياز داريم تا يک اسکريپت زودتر از کدهاي ديگر اجرا شده و يا آماده باشد تا در صورت لزوم فراخواني شود. که اينگونه کدها را بايد در قسمت سر و ما بين تگ head بنويسيم. بطور مثال شما نياز به اين داريد که به محض ورود کاربر به صفحه در همان ابتدا پيغامي ظاهر شود و تا کاربر آنرا تأييد نکرده است صفحه تکميل نشود. اسکريپتهاي قسمت سر هميشه آماده اجرا و يا آماده پاسخ به اتفاقي در صفحه وب هستند، که در اين مورد شما مطمئن هستيد اسکريپت مورد نظر قبل از هر چيزي در صفحه، اجرا خواهد شد. براي نوشتن کدهاي جاوااسکريپت بصورت زير عمل مي کنيد:
<html>
<head>
<title> ... </title>
<script language="javascript" type="text/javascript">
...... javascript codes ......
<script/>
<head/>
نوشتن اسکريپت در قسمت بدنه
هنگاميکه نياز داشته باشيد تا کدهاي جاوااسکريپت در بدنه فايل html اجرا شود آنها را در قسمت body صفحه وارد مي کنيد،
<html>
<head>
<head/>
<body>
<script language="javascript" type="text/javascript">
....... javascript codes ......
<script/>
<body/>
<html/>
شما حتي مي توانيد توسط کدهاي جاوااسکريپت قسمتي از يک صفحه را بسازيد يعني با ترکيب جاوااسکريپت و تگهاي اچ تي ام ال در body يک عنصر در صفحه وارد کنيد. کدهاي زير را بنويسيد و اجرا کنيد:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("<h1 align='center'> Hello my friends! </h1>");n
</script>
</body>
</html>
اجراي کد
لازم بذکر است که شما مي توانيد براي نظم دادن و جلوگيري از شلوغي قسمت بدنه يک اسکريپت بصورت function در قسمت head تعريف کنيد و در قسمت بدنه آنرا فراخواني کنيد .
فايل خارجي جاوااسکريپت
شما مي توانيد براي حفظ نظم تگهاي اچ تي ام ال در يک صفحه وب و يا براي جلوگيري از تکرار يک اسکريپت در صفحات يک وب سايت، کدهاي جاوااسکريپت را در يک فايل جداگانه نوشته و با پسوند js آنها را ذخيره کنيد سپس در هر قسمت و هر صفحه اي که لازم بود، وارد کنيد. خط زير را در برنامه Notepad نوشته و آنرا به اسم test.js ذخيره کنيد:
document.write(" JavaScript external file ")n
حالا يک فايل اچ تي ام ال بسازيد و تگهاي زير را در آن وارد کنيد سپس با يک اسم دلخواه آنرا در همان پوشه که فايل جاوااسکريپت را ذخيره کرده ايد قرار دهيد:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript" src="test.js">
<script/>
<body/>
<html/>
اگر مراحل را بدرستي انجام داده باشيد، جمله زير را در مرورگرتان مشاهده خواهيد کرد.
JavaScript external file
دقت کنيد که اگر فايل جاوااسکريپت را در پوشه اي جدا از فايل html قرار مي دهيد حتماً در خصوصيت src آدرس دقيق آنرا بنويسيد.
1 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: کد,جاوااسکريپت ,head,بدنه,javascript,codes,document,write, JavaScript, external, file,
متغيرها يکي از مباحث مهم در جاوااسکريپت هستند چون کاربرد زيادي در اين زبان دارند. متغيرها يا Variables مانند يک ظرف و مخزن براي ذخيره سازي اطلاعات هستند که اين اطلاعات مي تواند يک کلمه يا جمله ، عدد و يا حتي يک شئ باشد. متغيرها، کد نويسي را راحت تر کرده و نظم خاصي به اسکريپت ما مي بخشند. بطور مثال ما يک متن را مي خواهيم در چند نقطه از کد وارد کنيم که بجاي آن مي توانيم از يک کلمه کوتاه که اين متن در آن ذخيره شده استفاده کنيم تا از تکرار جلوگيري کرده و اسکريپت هم شلوغ نشود. به مثال زير توجه کنيد تا وظيفه يک متغير را ببينيد:
<script language="javascript" type="text/javascript">
var strTest = "This is an example for variable."
document.write(txtTest)
<script/>
حالا مي پردازيم به جزئيات تعريف يک متغير در اين اسکريپت:
var strTest = "This is an example for variable."
اصطلاح var از کلمه variable مي آيد که نوشتن آن اختياري مي باشد، يعني مي توانيد يک متغير را بدون نوشتن آن هم تعريف کنيد ولي اگر مي خواهيد کد شما خوانا تر باشد بهتر است که از var استفاده کنيد.
انتخاب نام متغير
بهتر است نام يک متغير را طوري انتخاب کنيد که در عين سادگي، گويا بوده و يادآور نکاتي براي شما باشد چون هميشه کدهاي شما به چند خط ختم نمي شود، گاهي اوقات ممکن است مجبور شويد بيش از صد خط کد در يک صفحه قرار دهيد.
اما براي انتخاب نام متغير بايد نکات زير را رعايت کنيد:
انواع متغيرها
دو نوع متغير وجود دارد که تفاوت اين دو مدل در محل استفاده از آنها مي باشد.
به قسمتي از اسکريپت که يک متغير در آن کاربرد دارد، حوضه يا scope آن متغير گفته مي شود.
0 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: متغير چيست,script ,language,javascript,variable,انتخاب,متغير,scope,
()new Date
به طرز نوشتن آن دقت کنيد که غير از اين باشد با پيغام خطا روبرو خواهيد شد چون جاوااسکريپت زبان حساسي است پس هر جا که حروف بزرگ است بايد بزرگ و هر جا کوچک است بايد کوچک نوشته شود. در آخر هم پرانتز مي گذاريد که در قسمتهاي بعدي همين صفحه کارآيي آنها را درک خواهيد کرد.
کد زير را در يک سند اچ تي ام ال وارد کنيد و پس از ذخيره، آنرا اجرا کنيد:
<script language="javascript" type="text/javascript"k>
document.write ( new Date() )n
<script/>
متدهاي شئ Date
getDate(), getDay(), getMonth(), getYear(), getHours(), getMinutes(), getSeconds()n
براي تعريف و استفاده از اين متدها بايد ابتدا شئ را نوشته، سپس يک نقطه بگذاريم و بعد از نقطه متد مورد نظر را بنويسيم.
براي درک بهتر مطالب گفته شده يک تمرين را با هم انجام مي دهيم. در يک صفحه وب، مي خواهيم زمان ورود يک کاربر به همان صفحه را اعلام کنيم.
شما دقيقاً درساعت 14:23:23 وارد اين صفحه شديد.
که اسکريپت آن براي برگرداندن زمان مورد نظر به صورت زير مي باشد:
<script language="javascript" type="text/javascript"n>
var vorood = new Date()n
document.write( vorood.getHours() + ":" + vorood.getMinutes() + ":" + vorood.getSeconds() )n
<script/>
ابتدا شئ Date را تعريف کرده و در يک متغير به نام vorood ذخيره مي کنيم تا بکار بردن آن در قسمتهاي بعدي راحت تر باشد، سپس از شئ document و متد write براي چاپ نتيجه در صفحه وب استفاده کرده و متدهاي لازم براي برگرداندن اطلاعات مورد نياز را مي نويسيم. دقت کنيد که براي ترکيب متدها از علامت + استفاده کرديم، اين علامت باعث ترکيب و پيوند بين اجزاي يک اسکريپت مي شود که خاصيت آنرا در بخش بعدي operator ها يعني عملگرها توضيح خواهم داد.
document.write("<b>"+ vorood.getHours()+ ":"+ ...... + "</b>")n
نکته: هنگاميکه از متد getMonth() براي برگرداندن عدد ماه استفاده مي کنيد بايد هميشه آنرا بعلاوه عدد يک کنيد چون جاوااسکريپت اولين ماه ميلادي را برابر با عدد صفر قرار مي دهد.
document.write( new Date().getMonth()+1 )n
در مورد متد getYear() هم اگر مي خواهيد نتيجه کامل برگردد يعني سال بصورت چهاررقمي نوشته شود بايد از متد getFullYear() استفاده کنيد.
اگر هم بخواهيد تمام مقادير بر اساس UTC برگردانده شوند، بايد اين کلمه را در وسط متد مورد نظر وارد کنيد. بدين صورت:
getUTCFullyear(), getUTCDate(), getUTCHours(), getUTCMinutes()n
تنظيم تاريخ و زمان
<script language="javascript" type="text/javascript"n>
var zaman = new Date()n
zaman.setFullYear(2008)n
document.write ( zaman )n
<script/>
نتيجه اي که اين اسکريپت برميگرداند بصورت زير است، به روز هفته در اول خط و سال در آخر خط توجه کنيد که براي سال 2008 تنظيم شده است.
Sun Jun 29 14:23:23 UTC+0430 2008
0 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: تاريخ,زمان,جاوااسکريپت,document,write ,javascript,متد,شئ,Date,
