TAHA
10-29-2009, 10:37 AM
روش هاي ديگري براي استفاده از JS در صفحات HTML
در درس قبل با يك روش براي استفاده از JS در صفحات HTML آشنا شديم . در اين درس به ذكر 2 روش ديگر مي پردازم . توجه داشته باشيد كه ممكن است اين روش ها به طور كامل براي شما قابل درك نباشند ، ولي به هيچ وجه نگران نباشيد چون اين مطالب فعلا براي اين است كه شما بدانيد زبان Java Script با چه روش هايي مورد استفاده قرار مي گيرد و در مباحثي كه برنامه خواهيم نوشت بررسي بيشتري صورت خواهيم داد .
روش دوم باز هم مربوط به بحث شئ گرايي است . در اين حالت از استفاده JS در صفحات وب ، شما به راحتي و با استفاده از دستورات خاصي از JS تمام وقايعي كه بر روي اشياء صفحه روي مي دهد را كنترل مي كنيد و در مقابل آن عكس العمل دلخواه را نشان مي دهيد . اين دستورات كه وظيفه كنترل وقايع صفحه وب را دارند ، در كنار خود اشياء قرار مي گيرند و يكي از خصوصيات اشياء را تشكيل مي دهند .
فرض كنيد ما عكسي در صفحه وب داريم كه مي خواهيم به محض اينكه نمايشگر ماوس روي آن قرار گرفت پيغامي كه شامل توضيحاتي از عكس است براي كاربر صادر بشود .
وظيفه ما اين است كه كنترل كننده اي را مورد استفاده قرار دهيم كه تشخيص دهد « آيا ماوس روي شئ مورد نظر قرار گرفته يا خير ؟ » . و پس از تشخيص پيغام براي كاربر صادر بشود .
در پايين شما مي توانيد اين برنامه و توضيحات مفيدي در مورد آن را براي شما ارائه ميكنم .
1 <HTML>
2 <head>
3 </head>
4
5 <body>
6 <img>
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 خود را مسير دهي نماييد .
شكل كلي استفاده از اين تگ به صورت زير است .
<link>
دليل اينكه اين روش در پروژه هاي بزرگ استفاده مي شود را در مثال زير بررسي مي كنيم .
فرض كنيد شما بايد سايتي طراحي كنيد كه شامل 150 صفحه است و وظيفه داريد يك برنامه JS كه 10 كيلو بايت حجم دارد را در هر يك از اين 150 صفحه بكار ببريد . با يك حساب سر انگشتي مي فهميد كه با افزودن اين برنامه 10 كيلو بايت به صفحات ، 1500 كيلو بايت يعني يك و نيم مگابايت به حجم سايت شما افزوده مي شود و اين يك فاجعه است !!!!!!
در عوض شما مي توانيد به جاي استفاده كل برنامه در هر يك از صفحات ، با استفاده از تگ يك خطي Link ، در تمام اين 150 صفحه فقط فايل JS كه تنها 10 كيلو بايت حجم دارد را مسير دهي كنيد ؛ و اين يعني يك بهره وري خوب در حجم .
هميشه به ياد داشته باشيد بهره وري حجمي در صفحات وب و طراحي سايت وب بسيار بسيار مهم است .
در درس بعد كنترل كننده هاي وقايع در JS و عملگرهاي JS را براي شما تشريح مي كنم ...
در درس قبل با يك روش براي استفاده از JS در صفحات HTML آشنا شديم . در اين درس به ذكر 2 روش ديگر مي پردازم . توجه داشته باشيد كه ممكن است اين روش ها به طور كامل براي شما قابل درك نباشند ، ولي به هيچ وجه نگران نباشيد چون اين مطالب فعلا براي اين است كه شما بدانيد زبان Java Script با چه روش هايي مورد استفاده قرار مي گيرد و در مباحثي كه برنامه خواهيم نوشت بررسي بيشتري صورت خواهيم داد .
روش دوم باز هم مربوط به بحث شئ گرايي است . در اين حالت از استفاده JS در صفحات وب ، شما به راحتي و با استفاده از دستورات خاصي از JS تمام وقايعي كه بر روي اشياء صفحه روي مي دهد را كنترل مي كنيد و در مقابل آن عكس العمل دلخواه را نشان مي دهيد . اين دستورات كه وظيفه كنترل وقايع صفحه وب را دارند ، در كنار خود اشياء قرار مي گيرند و يكي از خصوصيات اشياء را تشكيل مي دهند .
فرض كنيد ما عكسي در صفحه وب داريم كه مي خواهيم به محض اينكه نمايشگر ماوس روي آن قرار گرفت پيغامي كه شامل توضيحاتي از عكس است براي كاربر صادر بشود .
وظيفه ما اين است كه كنترل كننده اي را مورد استفاده قرار دهيم كه تشخيص دهد « آيا ماوس روي شئ مورد نظر قرار گرفته يا خير ؟ » . و پس از تشخيص پيغام براي كاربر صادر بشود .
در پايين شما مي توانيد اين برنامه و توضيحات مفيدي در مورد آن را براي شما ارائه ميكنم .
1 <HTML>
2 <head>
3 </head>
4
5 <body>
6 <img>
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 خود را مسير دهي نماييد .
شكل كلي استفاده از اين تگ به صورت زير است .
<link>
دليل اينكه اين روش در پروژه هاي بزرگ استفاده مي شود را در مثال زير بررسي مي كنيم .
فرض كنيد شما بايد سايتي طراحي كنيد كه شامل 150 صفحه است و وظيفه داريد يك برنامه JS كه 10 كيلو بايت حجم دارد را در هر يك از اين 150 صفحه بكار ببريد . با يك حساب سر انگشتي مي فهميد كه با افزودن اين برنامه 10 كيلو بايت به صفحات ، 1500 كيلو بايت يعني يك و نيم مگابايت به حجم سايت شما افزوده مي شود و اين يك فاجعه است !!!!!!
در عوض شما مي توانيد به جاي استفاده كل برنامه در هر يك از صفحات ، با استفاده از تگ يك خطي Link ، در تمام اين 150 صفحه فقط فايل JS كه تنها 10 كيلو بايت حجم دارد را مسير دهي كنيد ؛ و اين يعني يك بهره وري خوب در حجم .
هميشه به ياد داشته باشيد بهره وري حجمي در صفحات وب و طراحي سايت وب بسيار بسيار مهم است .
در درس بعد كنترل كننده هاي وقايع در JS و عملگرهاي JS را براي شما تشريح مي كنم ...