JS بخش چهارم
روش هاي ديگري براي استفاده از JS در صفحات HTML
در درس قبل با يك روش براي استفاده از JS در صفحات HTML آشنا شديم . در اين درس به ذكر 2 روش ديگر مي پردازم . توجه داشته باشيد كه ممكن است اين روش ها به طور كامل براي شما قابل درك نباشند ، ولي به هيچ وجه نگران نباشيد چون اين مطالب فعلا براي اين است كه شما بدانيد زبان Java Script با چه روش هايي مورد استفاده قرار مي گيرد و در مباحثي كه برنامه خواهيم نوشت بررسي بيشتري صورت خواهيم داد .
روش دوم باز هم مربوط به بحث شئ گرايي است . در اين حالت از استفاده JS در صفحات وب ، شما به راحتي و با استفاده از دستورات خاصي از JS تمام وقايعي كه بر روي اشياء صفحه روي مي دهد را كنترل مي كنيد و در مقابل آن عكس العمل دلخواه را نشان مي دهيد . اين دستورات كه وظيفه كنترل وقايع صفحه وب را دارند ، در كنار خود اشياء قرار مي گيرند و يكي از خصوصيات اشياء را تشكيل مي دهند .
فرض كنيد ما عكسي در صفحه وب داريم كه مي خواهيم به محض اينكه نمايشگر ماوس روي آن قرار گرفت پيغامي كه شامل توضيحاتي از عكس است براي كاربر صادر بشود .
وظيفه ما اين است كه كنترل كننده اي را مورد استفاده قرار دهيم كه تشخيص دهد « آيا ماوس روي شئ مورد نظر قرار گرفته يا خير ؟ » . و پس از تشخيص پيغام براي كاربر صادر بشود .
در پايين شما مي توانيد اين برنامه و توضيحات مفيدي در مورد آن را براي شما ارائه ميكنم .
1 < HTML >
2 < head >
3 < /head >
4
5 < body >
6 < img src="pic1.gif" onmouseover="alert('this pic is about
computers !!')" >
7 < /body >
8 < /HTML >
_ در درس قبل شما با تگهاي موجود در سطرهاي 1 ، 2 ، 3 ، 5 ، 7 و 8 آشنا شديد .
_ در سطر 6 از يك تگ HTML به نام IMG استفاده شده كه وظيفه اين تگ نمايش تصاوير و عكس ها در صفحات وب است .
_ در سطر 6 ، src يكي از خصوصيات مهم و معروف تگ Img است كه آدرس فايل عكس را مشخص مي كند .
_ و اما ONMOUSEOVER . اين همان خصوصيتي است كه شما آن را در سطر 6 و در داخل تگ IMG مي بينيد . اين عبارت همان كنترل كننده ماست كه وظيفه كنترل كردن ماوس در هنگام قرار گيري برروي شئ مورد نظر را دارد .
عبارت Onmouseover در لاتين به اين معناست ، «زماني كه ماوس روي آن قرار گرفت » .
_ بعد از علامت = و در داخل "" عكس العمل يا همان دستوريست كه ما مي خواهيم در صورت قرار گرفتن ماوس انجام گيرد . در اينجا از دستور Alert استفاده شده كه صفحه اي براي كاربر باز كرده و متن داخل پرانتز را نشان مي دهد .
_ در صورت قرار گرفتن ماوس روي عكس ، كاربر صفحه زير را مشاهده خواهد كرد .
_ حال عبارت onmouseover ، يكي از خصوصيات (Properties ) اين شي محسوب مي شود .
توجه داشته باشيد كه تحليل كد ها در اين زبان برنامه نويسي بسيار مهم است . مطمئن باشيد كه اگر بتوانيد كد ها را به خوبي براي خودتان تحليل كنيد در برنامه نويسي موفق خواهيد بود .
روش سوم براي استفاده JS در صفحات وب ، بيشتر مورد توجه حرفه اي ها و مورد استفاده در پروژه هاي بزرگ است . در اين روش شما برنامه هاي JS خود را در صفحه وب نمي نويسيد بلكه آن را در يك فايل جداگانه و با پسوند js. مي نويسيد . تنها كاري كه شما بايد براي استفاده اين فايل JS بكنيد اين است كه آن را در صفحه وب مسير دهي كنيد .
تگ Link راه حل شماست !!! اين تگ به شما كمك مي كند كه فايل JS خود را مسير دهي نماييد .
شكل كلي استفاده از اين تگ به صورت زير است .
دليل اينكه اين روش در پروژه هاي بزرگ استفاده مي شود را در مثال زير بررسي مي كنيم .
فرض كنيد شما بايد سايتي طراحي كنيد كه شامل 150 صفحه است و وظيفه داريد يك برنامه JS كه 10 كيلو بايت حجم دارد را در هر يك از اين 150 صفحه بكار ببريد . با يك حساب سر انگشتي مي فهميد كه با افزودن اين برنامه 10 كيلو بايت به صفحات ، 1500 كيلو بايت يعني يك و نيم مگابايت به حجم سايت شما افزوده مي شود و اين يك فاجعه است !!!!!!
در عوض شما مي توانيد به جاي استفاده كل برنامه در هر يك از صفحات ، با استفاده از تگ يك خطي Link ، در تمام اين 150 صفحه فقط فايل JS كه تنها 10 كيلو بايت حجم دارد را مسير دهي كنيد ؛ و اين يعني يك بهره وري خوب در حجم.هميشه به ياد داشته باشيد بهره وري حجمي در صفحات وب و طراحي سايت وب بسيار بسيار مهم است .
در بخش بعد كنترل كننده هاي وقايع در JS و عملگرهاي JS را براي شما تشريح مي كنیم ...
|
نوشته شده در 28/4/1387ساعت12:37 توسط سياوش| لینک ثابت ||
- نظر(0) -
JS بخش سوم
نحوه قرار گيري برنامه هاي JS در صفحات وب
در بخش هاي قبل مباني و مفاهيم اصلي JS را آموختيد . حال بهتر است ابتدا نحوه كاربرد اين زبان در وب را بياموزيد و سپس شروع به آموزش كاربردهاي JS نمايم .
بنا به آموخته هاي ابتدايي شما در مورد زبان HTML , بايد بياد آورده باشيد كه هر سند HTML از دو بخش اصلي تشكيل شده . قسمت سر سند يا Header و قسمت بدنه سند يا Body . در اصطلاح به متوني كه كدهاي يك صفحه HTML را تشكيل ميدهند « سند HTML » مي گويند .
قسمت سر سند حاوي اطلاعاتي است كه مشخصات كلي صفحه از قبيل عنوان صفحه ، نسخه به كار رفته از زبان HTML را مشخص مي كند . قسمت دوم بدنه صفحه مي باشد كه اجزاي اصلي صفحه از قبيل متن ها ، عكس ها و فرم ها در آن قرار مي گيرند . قسمتهاي بدنه و سر سند به وسيله «تگ» هاي خاصي از هم جدا مي شوند . در زير تقسيم بندي ايندو را مي بينيد .
HTML آغاز سند
< head > آغاز سر سند
< /head > پايان سر سند
< body > آغاز بدنه سند
< /body > پايان بدنه سند
< /html> HTMLپايان سند
برنامه هاي نوشته شده توسط JS به تناسب كاربرد مي توانند هم در قسمت سر سند و هم در قسمت بدنه سند قرار گيرند . ولي JS اكثرا در قسمت بدنه سند مورد استفاده قرار مي گيرد .
برنامه هاي JS براي مشخص شدن از كدهاي HTML داخل تگ قرار مي گيرند . توجه داشته باشيد كه تگ < SCRIPT > براي مشخص كردن آغاز برنامه JS و تگ < /SCRIPT > براي مشخص كردن پايان برنامه JS استفاده ميشوند و نوشتن هر دوي آنها در يك برنامه JS الزاميست.
دانستن اينكه براي هر برنامه JS بايد از تگ < SCRIPT > و < /SCRIPT > استفاده كرد بسيار مهم است .
همچنين مي توان در هر سند به تعداد نامحدود از تگ < SCRIPT > و < /SCRIPT > استواده كرد ولي استفاده از يك تگ < SCRIPT > و < /SCRIPT > در داخل ديگري به هيچ وجه در JS مجاز نيست .
در زير يك برنامه ساده كه توسط JS نوشته شده و يك پيغام خوشامد گويي به كاربر مي دهد آمده است . اين برنامه فقط براي آشنايي بيشتر شما با مفاهيم بالاست و نكات اساسي كه شما بايد در مورد آن بدانيد در زير آمده است . همچنين شماره هاي ابتداي هر سطر فقط براي نشان دادن شماره خطوط است و آنها جزء سند نيستند .
1 < html >
2 < head >
3 < /head >
4 < body >
5 < script language=”javascript1.2 ” >
6 document.writeln( "< font size=6 color=789867 >welcome to
this page< /font>" )
7 < /SCRIPT >
8 < /body >
9 < /html >
مطالب زير شما را در درك مفاهيم مورد نياز ما از كد هاي بالا ياري مي كنند .
_ رعايت تو رفتگي هاي سند در هنگام ايجاد آن الزامي نيست و فقط به خوانايي سند كمك مي كند.
_ ملاحظه مي كنيد كه در اين سند ، برنامه JS در قسمت بدنه سند آمده است .
_ در سطر 6 و در ميان تگ هاي < SCRIPT > و < /SCRIPT > برنامه ساده اي از JS آمده است كه فعلا دانستن جزئيات آن براي شما الزامي نيست .
_ در سطر 5 در داخل تگ < SCRIPT > عبارت language=”javascript1.2” نسخه JS مورد استفاده در اين اسكريپت ( برنامه نوشته شده توسط زبان JS ) را مشخص مي كند .
_ ذكر عبارت language=”javascript1.2” در برنامه الزامي نيست و فقط باعث مي شود مرورگرهايي كه نسخه هاي پايين تري از JS را پشتيباني مي كنند ، قادر به اجراي برنامه هاي JS نباشند .
_ با مشخص كردن نسخه اي از JS نسخه هاي بالاتر از آن نيز قابليت اجراي آن برنامه را خواهند داشت .
_هر نسخه از JS مربوط به دستوراتي است كه آن نسخه پشتيباني مي كند ؛ مثلا دستورات 1,1 JS در1,2 JS قابل اجرا هستند ولي در 0,1 JS خير .
_ در بررسي دستورات JS به توانايي پشتيباني آنها در نسخه هاي مختلف JS اشاره خواهم كرد ...
در بخش بعد پس از بررسي روشهاي ديگري از زبان JS ، آموزش مقدمات برنامه نويسي در JS را شرح خواهیم داد. |
نوشته شده در 26/4/1387ساعت05:58 توسط سياوش| لینک ثابت ||
- نظر(0) -
JS بخش دوم
شي گرايي و ديناميكي درمورد زبان JS
در درس قبل آموختيم زبان js با صفحات وب چه ارتباطي دارد و دانستيم كه برنامه هاي زبان js در ميان TAG هاي زبان HTML قرار ميگيرد . اما حال بهتر است چگونگي ارتباط js با صفحات وب را بررسي كنيم .
هر چيزي كه شما در صفحه وب مي بينيد (و گاهي بعضي چيزهايي كه نمي بينيد ) و در تعريف كلي هر چيزي كه صفحه وب را تشكيل مي دهد , مثل دكمه ها ( button ) , فرم ها , عكس ها و هزاران چيز ديگر در صفحه وب , شي نام دارند . اين اشياء راه ارتباط JS با صفحات وب هستند و در واقع وظيفه اصلي JS كنترل اين اشياست . خاصيت شي گرايي (object-oriented) در JS باعث شده كه بتواند با بيشتر اشياء در صفحات وب ارتباط برقرار كند .
يك مثال ساده اين مفهوم را آشكارتر مي كند . اگر ما دنياي واقعي خود را در نظر بگيريم مي توانيم ميز ها , كتاب ها , سگ ها , گربه ها , انسان ها و همه و همه را شي بناميم . در صفحات وب نيز شي به همين معناست البته با اين تفاوت كه در صفحات وب بعضي از اشياء قابل مشاهده نيستند . در صفحات وب هر شي داراي خصوصيات و مشخصه هاي خاص خودش است كه در زمان بررسي هر شي به ان اشاره خواهم كرد .
همانطور كه گفتم اين اشياء بسيار زيادند . براي راحتي استفاده از آنها , گروه ها و زير دسته هايي در نظر مي گيريم و اين اشياء را در اين گروه ها طبقه بندي مي كنيم .
زبان HTML به تنهايي نمي تواند با اعمالي كه كاربر در درون صفحه وب انجام مي دهد ارتباط برقرار كند . و علاوه بر آن توانايي ايجاد جلوه هاي ويژه كه باعث جذابيت صفحه وب مي شود را ندارد . و چون كاربر نمي تواند به وقايع (Event ) و اشياء صفحه پاسخ دهد , حالتي كسل كننده براي او ايجاد مي شود . زبان JS به خوبي اين كمبود در صفحات وب را رفع مي كند و به صفحات حالت فعال مي دهد . در واقع JS اين ويژگي را به وسيله خصلت شي گرايي اش كسب كرده است .
مثلا وقتي شما اطلاعات نادرست به يك فرم در صفحه وب مي دهيد , JS با پيغامي مي تواند به شما اطلاع دهد . به صورت ساده تر مي توان گفت JS نوعي امكان انتخاب به كاربر و امكان پاسخ مناسب از طرف خود را مي دهد .
با يك مثال ساده تر , مفهوم آشكار تري را در اختيار شما قرار مي دهم . شما دوربين عكاسي را در نظر بگيريد كه بدون توجه به نور اطراف خود عكس برداري مي كند . اين دوربين را مي توان مانند حالت غير فعالي HTML در نظر گرفت . در سوي ديگر دوربيني را در نظر بگيريد كه بنا به نور اطراف خود , شفافيت عكس را تنظيم ميكند . اين دوربين را ميتوان مانند JS در نظر گرفت كه با محيط اطراف خود ارتباط برقرار مي كند وتصميمات لازم را مي گيرد و اعمال لازم را انجام مي دهد ( البته بر اساس خواست برنامه نويس ) .
حال با مثالي در خود JS بحث را تكميل مي كنم . فرض كنيد شما وارد صفحه وبي شده ايد . بنا به برنامه اي كه برنامه نويس نوشته است ابتدا پيغامي مبني بر اينكه (( آيا شما از رنگ صفحه خوشتان مي آيد ؟ )) توسط JS صادر مي شود . در صورت انتخاب جواب مثبت , رنگ صفحه تغيير نمي كند ولي در صورت منفي بودن پاسخ بنا به انتخاب خود شما يا برنامه نويس رنگ صفحه تغيير مي كند .
متاسفانه توسط برنامه نويسان مختلف تعاريف اشتباهي درباره مفهوم ديناميك بودن در زبان هاي برنامه نويسي ارائه مي شود . بسياري به اشتباه , به هر زباني كه شي گرا باشد ديناميك مي گويند.
من ابتدا نحوه اجراي JS را مورد بررسي قرار ميدهم تا به نتيجه نهايي برسيم .
دو مفهوم Client side languages و Server side languages به ما كمك فراواني مي كنند .
در اصطلاح به كامپيوتر كاربر يا بيننده صفحه , مشتري ( Client ) و به كامپيوتري كه به كامپيوتر هاي ديگر جهت مشاهده صفحات وب سرويس مي دهد , سرويس دهنده يا ميزبان (Server ) مي گوييم. برنامه ها و فايل هاي موجود در كامپيوتر ميزبان , به 2 صورت مي توانند براي كامپيوتر هاي مشتري مورد استفاده قرار گيرند . در حالت اول , فايل ها دقيقا به كامپيوتر مشتري انتقال يافته و آنجا ترجمه و اجرا مي شوند . در اين حالت درخواستي به ميزبان فرستاده شده و ميزبان اين درخواست را پردازش مي كند . سپس فايل درخواستي را بدون انجام هيچگونه عملياتي به مشتري مي فرستد . پس از انتقال فايل , مشتري فايل را دريافت ميكند . فايل توسط مرورگر ترجمه و اجرا مي شود . زبان هايي چون JS و HTML و CSS به اين صورت عمل مي كنند . زبان هايي كه به اين صورت اجرا مي شوند را Client side languages ( زبان هاي طرف مشتري ) مي گويند .اين زبان ها غير ديناميكي هستند زيرا سرويس دهنده هيچ نقشي در اجراي آنها ندارد .
در حالت دوم ابتدا فايل توسط مترجمي كه در كامپيوتر ميزبان تعبيه شده , در خود ميزبان ترجمه مي شود و سپس نتايج اين پردازش به مشتري ارائه مي شود . مرورگرهايي كه در كامپيوتر مشتري قرار دارند , نمي توانند برنامه هاي نوشته شده توسط اينگونه زبان ها را خودشان ترجمه و ا جرا كنند , بلكه نياز به نقش اساسي ميزبان در ترجمه آن دارند . اينگونه زبان ها را Server side languages يا زبان هاي طرف ميزبان مي نامند . اين زبان ها به دليل نقش داشتن ميزبان در فرايند ترجمه و در نتيجه امكان تغيير يا استفاده فعال از منابع ميزبان , حالت ديناميكي دارند . مهمترين اين زبان ها ASP , CGI و PHP هستند .
با استفاده از مفاهيم بالا به راحتي ميتوان نتيجه گرفت JS زباني ديناميكي نيست و فرايند هاي مربوط به آن روي كامپيوتر مشتري صورت مي گيرد .
در بخش بعدی چگونگي برنامه نويسي با JS و چند برنامه ساده را شرح خواهیم داد. |
نوشته شده در 25/4/1387ساعت08:58 توسط سياوش| لینک ثابت ||
- نظر(0) -
JS بخش اول
با اطمينان كامل مي توان گفت « بيش از نيمي از كساني كه با دنياي اينترنت در ارتباط هستند حداقل يك بار اسم Java Script را شنيده اند » ولي با ديدن يك برنامه ساده كه توسط زبان Java Script نوشته شده , ديگر حتي حاضر نشده اند حتي يك بار ديگر اسم آن را بشنوند !!! Java Script در ابتدا بسيار سخت و حتي عذاب آور! به نظر ميرسد , ولي اصلاً اينطور نيست . فقط كمي تلاش و كوشش مي تواند شما را در آموختن اين زبان بسيار زيبا كمك كند .
در ابتدا مي خواهم مقدمه اي درباره Java Script بنويسم كه بسياري از مسائل مربوط به آن را آشكارتر كند , و مسائلي در مورد آن را بررسي كنيم تا ذهنيت هاي اشتباه در مورد Java Script را از بين ببرد .
در اين مقدمه يكسري موارد پايه در مورد زبان برنامه نويسي Java Script مورد بحث قرار مي دهيم كه دانستن انها براي درك بقيه مفاهيم آن الزاميست . مشكلات و موارد مبهم را در قسمت نظر وبلاگ مطرح كنيد تا اين مشكلات را رفع كنيم .
در اين سري آموزش ها سعي خواهم كرد كه دروس ومطالب را به صورت طبقه بندي شده و همراه با سادگي بيان و ذكر تمام جزئيات و مفاهيم ارائه كنم تا براي خوانندگان - با هر سطح معلومات - قابل استفاده باشد .
براي آموختن Java Script حتما بايد يكسري اطلاعات اوليه و در واقع پيش نياز در زمينه زبان HTML داشته باشيد در ميان هر درس , در صورت نياز مواردي از HTML را ذكر خواهم كرد كه در آموختن Java Script مفيد خواهند بود
بسياري زبان برنامه نويسي Java Script را با زبان JAVA اشتباه مي گيرند و ايندو را يكي مي دانند ولي اصلا اينطور نيست ! JAVA زباني است كه در واقع نسخه پيشرفته تري از زبان C تحت ويندوز است در حالي كه Java Script يك زبان مستقل از هر زبان ديگري است , JAVA هم به صورت فايل اجرايي (Execute ) وهم در صفحات وب قابل استفاده و بكارگيري است در صورتي كه Java Script صرفا به منظور استفاده در وب و صفحات اينترنتي است . در درس هاي بعدي موارد ديگري از تفاوت ها يا شباهت هاي اين دو زبان را ذكر خواهم كرد ...
دو زبان Java Script و VB script متداول ترين زبان هاي برنامه نويسي اسكريپتي در وب مي باشند كه از ايندو , Java Script به دليل پشتيباني شدن توسط بيشتر مرورگرهاي وب مانند Microsoft Internet Explorer و Netscape Navigator نظر تعداد بيشتري از برنامه نويسان را به خود جلب كرده است .
زبان Java Script محصولي مشترك از دو شركت Sun Microsystem و Netscape Communications مي باشد كه مترجم هاي ان مرورگرهاي وبي هستند كه از آن پشتيباني مي كنند . (مترجم برنامه ايست كه كدهاي نوشته شده توسط برنامه نويس را بر اساس قواع همان زبان برنامه نويسي ترجمه كرده ونتايج اين پردازش را به كاربر نمايش مي دهد ) يعني وقتي كدهاي نوشته شده توسط JS (Java Script) توسط مرورگر IE (Internet Explorer ) خوانده مي شود , اين كدها توسط مترجم JS ي كه در ان تعبيه شده ترجمه ميگردد وحاصل اين ترجمه به بيننده ارائه مي شود .
گفتيم كه JS يك زبان اسكريپتي است . يعني برنامه هايي كه توسط آن مي نويسيم متن ساده هستند (text only documents ) و توسط هر ويرايشگري كه بتواند متن ساده ايجاد كند قابل ويرايش و مشاهده هستند . متداول ترين و ساده ترين آنها ويرايشگر Note Pad است كه در تمامي نسخه هاي ويندوز وجود دارد . دستورات زبان JS در بين تگ هاي خاصي از زبان HTML قرار مي گيرند (تک علامتي در زبان html است كه براي مشخص كردن دستورات اين زبان از متون ساده استفاده شده و شكل كلي آن به اين صورت است <دستور زبان HTML>) . در اين حالت script ها همراه با دستورات html و معمولا درون فايلي با پسوند htm يا html قرار ميگيرند . اين ساده ترين راه است . راه ديگر نوشتن برنامه ها به زبان JS , ايجاد فايلي با پسوند JS و نوشتن برنامه ها در ان است ، پس از اين كار فايل JS ي كه ايجاد كرده ايم را در داخل يك صفحه وب مسيردهي كرده و استفاده مي كنيم . مزايا ، معايب ، و چگونگي انجام آن را در دروس بعدي شرح داده می شود....
دربخش بعد مفهوم « شئ گرايي» در JS و حالت ديناميكي اين زبان شرح داده خواهد شد.
نوشته شده در 25/4/1387ساعت08:35 توسط سياوش| لینک ثابت ||
- نظر(0) -
بوي باران
باز باران...با ترانهای غمگین،سرد و سنگین،میخورد بر بام خانه...
یادم آید...آه آری،یادم آید بام خانه سوراخ بود...بارش باران،همراه با آه و آخ بود...
باز باران...وای،باز هم باران...میچکد از بام خانه...گوش میدهم،به ترنم تلخ قطرههای باران،بر کف سرد خانه...
یادم آید...آری خوب یادم آید...روزی دیگر که باز باران آمد...اما،خانه دیگر سقفی بر آن نبود...دیگر،قطرههای باران نمیساختند سرود...
سقف فرو ریخت و آوار شد بر فضای خانه...قطرات باران،میچکیدند بر این ویرانه،چه بیرحمانه...
باز هم باران آمد...اما خانه ویران،سقفی نداشت تا قطرههای باران،باز بر روی آن،بیامان،ترانه ساز کنند...
اما باران،باز و باز و باز هم،بیامان میبارد...
تنها شعر زندگیم را تقدیم میکنم به کودکیهای دهسالگیم...
نوشته شده در 15/4/1387ساعت01:48 توسط سياوش| لینک ثابت ||
- نظر(0) -
