برنامه Hello World به مثال زير توجه كنيد؟ در اين مثال كلمه Hello World به عنوان خروجي در صـــــــــفحه نمايش داده مي شود. حال به كد برنامه توجه بفرماييد! همان طور كه مي بينيد كد ما با سند HTML (آبي) آغاز شده است و به دنبال تگ BODY (سبز) تگ Script (قرمز) قرار گرفته است. در درسهاي قبل ديديم كه تگ اسكريپت هم مي تواند در تگ Head و هم در تگ Body قرار گيرد. كه در اينجا در قسمت Body قرار داده شده است . با تگ Script مرورگر به جاي HTML انتظار يك كد جاوااسكريپت را خواهد داشت، و بعد از آن تگ توضيحات HTML قرار دارد (بنفش) ، كه با قرار دادن اين توضيحات كد اسكريپت از مرورگرهاي قديمي پنهان مي شود. توجه داشته باشيد كه تگ توضيحات Html با تگ توضيحات JavaScript فرق دارد. حال خط بعدي آغاز مي شود، اين خط تنها كد جاوااسكريپت مثال ماست (سياه) ، براي خواناتر شدن برنامه بهتر است كه به اندازه 2 كاراكتر از ابتداي خط فاصله داشته باشد. برنامه ما ("Document.Write ("Hello, World مي باشد كه در بخش بعد خواهيد ديد كه اين چه معنايي مي دهد. <HTML> <HEAD> <TITLE>Hello World</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1> <SCRIPT LANGUAGE=JAVASCRIPT> <!--Hide Script from Old Browsers document.write("Hello, World!") //End Hiding script from old browsers--> </SCRIPT> </H1> </BODY> </HTML> سه مفهوم Object-Oriented جاوااسكريپت : بر اساس مفاهيم شي’ گرا (Object-Oriented) پايه گذاري شده است، طبيعتاً مهمترين مفهوم در اين زمان شي’ (Object) مي باشد. خصوصيات (Property) : داراي يك سري متغير است. به عنوان مثال ، شي’ اتومبيل داراي متغيرهاي رنگ، اندازه و مدل ... مي باشد، به اين متغيرها در مفهوم (Object-Oriented) خصوصيت يا Property شي’ گفته مي شود. متــــــد (Method) : همچنين شي’ اتومبيل مي تواند يكسري اعمال (Function) مانند سرعت گرفتن، ترمز كردن و ... را انجام دهد. به اين توابع (Function) در مــــــفهوم (Object-Oriented) متد (Method) يك شي’ گفته مي شود. در مثال اتومبيل با استفاده از كــــــــدهاي زير مي توان از Property هاي شي’ اتومبيل استفاده كرد. Car . Color Car . Size Car . Style و همچنين متدهاي شي’ اتومبيل بصورت زير استفاده مي شود! Car . Accelerate ( ) Car . Brak ( ) براي استفاده از خصوصيات و متدهاي يك شي’ دستورات زير را بكار مي يريم! ObjectName.Peroperty ObjectName.Method(Param) براي درك بيشتر مفهوم Object به مثال قبل برگرديم كه در پايين هم دوباره اين مثال ذكر شده است. در اين مثال Document يك Object است كه به سند HTML اشاره دارد يكي از مــــتدهاي آن، متد Write ، و پارامتر اين متد يك متن كه در سند HTML نوشته مي شود. <HTML> <HEAD> <TITLE>Hello World</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1> <SCRIPT LANGUAGE=JAVASCRIPT> <!--Hide Script from Old Browsers document.write("Hello, World!") //End Hiding script from old browsers--> </SCRIPT> </H1> </BODY> </HTML> برنامه Alert Box اگر شما قبل از هر كاري دستورات مثال زير را اجرا كنيد يك كادر هشدار يا Alert Box را مي بينيد كه در آن يك پيغام همراه با دكمه OK وجود دارد. با كليك كردن بر روي دكمه OK اين Alert Box بسته مي شود. حال برويد و نگاهي به كد برنامه بيندازيد، اكنون شما كد اسكريپت را مي بينيد كه داخل سند Html بين تگ Head قرار دارد ، در اين كد از متد Alert براي نمايش يك پيغام استفاده شده است . <HTML> <HEAD> <TITLE>Alert Box</TITLE> <SCRIPT LANGUAGE=JAVASCRIPT> <!--Enact the Inviso-ray alert("Warning! JavaScript ahead!!") //End Inviso-ray--> </SCRIPT> </HEAD> <BODY BGCOLOR=WHITE> <H4>Welcome to Artin</H4> </BODY> </HTML> مـــــتـد ( ) Alert : متد Alert متن را همراه با دكمه OK نمايش مي دهد و يكي از متدهاي شي’ Window مي باشد. Window.Alert("Message") شما با كمي تغيير مي توانيد پارامتر مورد نظر خودتان را نمايش بدهيد، به مثال زير توجه كنيد. در اين مثال پيغام ما به Welcome to ArtinJavaScript تغيير كرده است. <SCRIPT LANGUAGE=JAVASCRIPT> <!--Enact the Inviso-ray alert("Welcome to ArtinJavaScript") //End Inviso-ray--> </SCRIPT> برنامه Confirm Box يكي ديگر از روشهاي نمايش پيغام است كه شما مي توانيد كدهاي اين برنامه را در پايين ببينيد. همان طور كه مي بينيد در اين قسمت از متد Confirm استفاده شده است. مـــــــتد ( ) Confirm : متد Confirm متن را همراه با دكمه هاي Cancel و OK نمايش مي دهد، اگر كاربر دكمه OK را كليك كند اين متد مقدار بولين True و اگر Cancel را كليك كند مقدار بولين False را بر مي گرداند. Window.Confirm('Question') <HTML> <HEAD> <TITLE>Confirm Box</TITLE> <SCRIPT LANGUAGE=JAVASCRIPT> <!--Hide Script from deprived Browsers confirm("Are you ready to liven up your Web pages?") //End Hiding script from deprived browsers--> </SCRIPT> </HEAD> <BODY BGCOLOR=WHITE> <H4>Hello Visitor</H4> </BODY> </HTML> مــــــــتد Prompt روش ايجاد پيغام همراه با دكمه OK و Cancel همراه با يك فيلد ورودي براي ورود اطلاعات نمايش مي دهد. اين متد پيغامي را كه كاربر تايپ مي كند بر مي گرداند. Window.Prompt('Message','Default') <HTML> <HEAD> <TITLE>Confirm Box</TITLE> <SCRIPT LANGUAGE=JAVASCRIPT> <!--Hide Script from deprived Browsers window.prompt('please type name','defoult') //End Hiding script from deprived browsers--> </SCRIPT> </HEAD> <BODY BGCOLOR=WHITE> <H4>This is Method Prompt</H4> </BODY> </HTML> برنامه POP-UP Window قبل از هر كاري برنامه زير را اجرا كرده ، در پنجره اجرا شده بر روي لينك Artin كليك كنيد، با اين كار عكسي در پنجره جداگانه باز مي شود، اين پنجره كه مطابق با اندازه عكس مي باشد فاقد Toolbar و Scrollbar است. حال به كد برنامه نگاهي بيندازيد، در اولين خط تابع ( ) New window را مشاهده مي كنيد، در داخل اين تابع بين آكلادهاي باز و بسته {} ، متغيري به نام MapWindow وجو دارد كه با آبجكت Openwindow مقدار دهي شده است. Open يكي از متدهاي آبجكت Window است ، كه داراي پارامترهاي ArtinJava_Bunner.jpg (محل ذخيره شدن فايلهاي تصويري) MapWin نام پنجره باز شونده و پارامترهاي اختياري With و Height است، كه هر پارامتر بين دو علامت كد (' ') مي گيرد و تابع با آكلاد بسته پايان مي يابد. براي اجراي تابع NewWindow بايد آنرا از جايي فراخواي كرد، براي اجر كردن اين تابع بايد اعمالي نظير كليك كردن دكمه يا لينك ، حركت ماوس يا لود شدن صفحه انجام بشود. به آخر سند HTML مثال زير توجه اي بيندازيد، در آنجا تابع NewWindow را مي بينيد كه در تگ لينك HTML كار گذاشته شده است، و آدرس مقصد لينك متن به مرورگر مي فهماند كه بايد جاوااسكريپت را براي تابع NewWindow فراخواني كند. <HTML> <HEAD> <TITLE>Opening a new window</TITLE> <SCRIPT LANGUAGE=JAVASCRIPT> <!--Hide Script from Old Browsers function newWindow() { mapWindow = window.open('ArtinJava_Bunner.jpg','mapWin','width =730,height=92') } //End Hiding script from old browsers--> </SCRIPT> <APPLET WIDTH=1 HEIGHT=1> </head> <body topmargin="0" leftmargin="0"> </applet> </HEAD> <BODY BGCOLOR=WHITE> <H4> <A HREF= "javascript:newWindow()">ArtinJavaScript</A> </H4> </BODY> </HTML> متــــــــــد ( ) Open براي اضافه كردن پارامترهاي ديگر به متد Open كافي است كه به پارامترهاي زير مقدار Yes را نسبت دهيم. Toolbar , Location , Status , Scrollbar , Menu bar , Resizable در مــــــثال زير نحوه اضافه كردن Toolbar و Scrollbar را به متد Open را آمزش مي دهيم. function newWindow() { mapWindow = window.open('ArtinJava_Bunner.jpg','mapWin',' Toolbar=yes , Scrollbar=yes ,width=730,height=92') } نمايش در Status Bar وقتي كه دستورات مثال زير را اجرا كنيد مي بينيد كه در پنجره باز شده يك لينك وجود دارد. هنگامي كه نشانه گر ماوس را بر روي لينك عبور دهيد، پيغامي در نوار وضعيت (Status Bar) به نمايش در مي آيد كه حالت Mouse Over مي باشد. حال به كد برنامه توجه كنيد، نكته قابل توجه در اين مال اين است كه براي استفاده از دستور جاوااسكريپت از تگ اسكريپت استفاده نشده است. اين اسكريپت بسيار ساده مي باشد، و كافي است كه دستور جاوااسكريپت به لينك HTML اضافه بشود.( تگ A HREF براي بكار بردن لينك در سند Html بكار مي رود ). <head> <TITLE>Status Bar Message</TITLE> </head> <div align="left"> <table border="0" cellspacing="0" style="border-collapse: collapse; font-family: Tahoma" bordercolor="#111111" width="86" cellpadding="0" dir="ltr"> <tr> <td width="85"><HTML> <BODY BGCOLOR=WHITE> <spanstyle="font-size:8pt"> <AHREF="http://www.parsigold.com (http://www.rayegan.ir/index.php?option=com_content&task=view&id=188&Itemid=45)" onMouseOver="window.status='WelcometoArtinJavaScript' return true;">Click here</A> </BODY> </HTML></span></td> </tr> </table> </div>
