NetBeans for JavaScript Development

NetBeans for JavaScript Development – NetBeans भी काफी अच्छा Web Development IDE है, क्योंकि जैसे ही हम हमारे Web Page से jQuery Library को Attach करते हैं, बिना किसी तरह का Configuration किए हुए हमें jQuery Framework के सभी Functions, Code Completion व IntelliSense की सुविधा के रूप में Available हो जाते हैं। जब हम NetBeans को Install करके Run करते हैं, तब ये हमें कुछ निम्नानुसार दिखाई देता है:

चूंकि कोई भी Web Project किसी न किसी Server Side Technology जैसे कि PHP, JSP या ASP.NET से जरूर सम्बंधित होता है, इसलिए जब हम NetBeans का प्रयोग करके Web Project Create करना चाहते हैं, तब हमें Default रूप से PHP या JSP Based Web Project Create करना होता है और हम ये मान रहे हैं कि हमारा Web Project, PHP Based Web Project है।

इसलिए नया Web Project Create करने के लिए जब हम NetBeans के File Menu के New Project Option पर Click करते हैं, तब हमें निम्न चित्रानुसार एक Dialog Box दिखाई देता है:

चूंकि NetBeans एक ऐसा IDE है, जिसमें हम कई प्रकार के Applications Create कर सकते हैं। इसलिए यहां हमने “Categories:” List Box में PHP Option को Select किया है क्योंकि हम एक PHP Based Web Application Create करना चाहते हैं।

जैसे ही हम Left Side के List Box में PHP Option को Select करते हैं, हमें Right Side में तीन Options दिखाई देने लगते हैं। पहला Option हम तब Choose करते हैं, जब हम नया Web Application Create करना चाहते हैं जबकि दूसरा Option हम तब Select करते हैं, जब हमें पहले से बने हुए किसी Project को NetBeans IDE में NetBeans Project के रूप में Setup करना होता है।

चूंकि हम नया Web Project Create करना चाहते हैं, इसलिए हमें पहले Option यानी “PHP Application” को Select करके “Next >” Button पर Click करना होता है और ऐसा करते ही हमारे सामने निम्नानुसार एक नया Dialog Box Display हो जाता है:

इस चित्र में दिखाए अनुसार हमें हमारे Web Project का नाम व हमारे Source Codes को Store करने की Location यानी “Source Folder” को Specify करना होता है। जबकि यदि हम जिस Folder में नया Project Create कर रहे हैं, वह Folder Empty न हो] तो हमें उपरोक्त चित्र में दिखाए अनुसार “Project Sources directory is not empty.” का Message भी दिखाई देता है। जैसे ही Project का नाम व Source Folder Specify करके हम “Next >” Button पर Click करते हैं, हमारे सामने निम्नानुसार एक और Dialog Box Display होता है:

इस Web Page में हमें ये बताना होता है कि हम हमारे Web Project को किस तरह से Run करना चाहते हैं, जो कि Default रूप से “Local Web Site” होता है और इसे ही रहने देना चाहि, जबकि Project URL में हमें हमारे Local Host के उस Folder का Path बताना होता है, जहां हमने हमारे Web Site को Save किया है।

सामान्‍यत: ये Local Web Server के htdocs Folder में Stored किसी Folder का Path होता है और हमारा Current Path “http://localhost/jQuery/” है क्योंकि हमने हमारे jQuery Web Site के सभी Pages को अपने Local Web Server के htdocs Folder में jQuery नाम के एक Folder में Store किया है। अब हमें फिर से “Next >” Button पर Click करना होता है जहां हमें निम्नानुसार एक और Dialog Box प्राप्त होता है:

यदि हम हमारे Web Application को किसी Framework के आधार पर Create करना चाहते हैं, तो हमें हमारे Use किए जाने वाले Framework को इस Dialog Box में Select करना होता है।

चूंकि हम Client Side Development के लिए Web Pages Create कर रहे हैं, इसलिए हमें किसी Framework को Select करने की जरूरत नहीं है। इसलिए यहां हमें “Finish” Button पर Click करना होता है। हमारा नया Project Create होने के बाद हमें निम्नानुसार दिखाई देता है, जो कि पूरी तरह से Blank होता है:

अब हमें हमारे Web Project में एक नई HTM File Create करने के लिए हमें File Menu के “New File” Option को Click करना होता है। जैसे ही हम इस “New File” Option पर Click करते हैं, हमारे सामने निम्नानुसार एक नया Dialog Box Display हो जाता है:

चूंकि हम एक HTML File Create करना चाहते हैं, इसलिए Left Side के “Categories:” List Box में हमें “Other” Option को Select करना होता है। जैसे ही हम इस “Other” Option को Select करते हैं, Right Side के List Box में बहुत सारे “File Types:” दिखाई देने लगते हैं, जहां हमें “HTML File” Option को Select करके “Next >” Button को Click करना होता है। इसे Click करते ही हमारे सामने निम्नानुसार एक नया Dialog Box Display होता है:

यहां हमें हमारी HTML File का नाम myjQuery.html Specify किया है। ध्‍यान रखें कि जो File Create की जा रही है, उसका Extension Specify करना जरूरी है। जैसे ही हम यहां पर “Finish” Button पर Click करते हैं, ये File हमारे NetBeans IDE में निम्नानुसार Add व Open हो जाती है:

चूंकि, यहां भी हम NetBeans KDE का प्रयोग jQuery Development के लिए कर रहे हैं, इसलिए jQuery Supported बनाने के लिए हमें इस IDE में हमारे jQuery Library File को Add करना होगा।

चूंकि, Web Development में Web Site या Application को आसानी से Manage करने के लिए हम विभिन्न प्रकार के Resources को उनकी Categories में ही Store करते हैं, इसलिए jQuery को भी हम हमारे Project में एक JavaScript Folder के अन्दर ही Store करते हैं, ताकि सभी JavaScript Files को Manage करना आसान रहे।

इस जरूरत को पूरा करने के लिए हम निम्न चित्रानुसार “Source Files” Option पर Mouse से Right Click करके Display होने वाले Popup Menu के माध्‍यम से हम एक नया Folder Create कर सकते हैं:

जैसे ही हम इस “Folder…” Option को Click करते हैं, हमारे सामने निम्नानुसार एक नया Dialog Box Display होता है:

चूंकि jQuery एक JavaScript File है और हम हमारी सभी JavaScript Files को एक अलग Folder में Store करना चाहते हैं, इसलिए हम हमारे न, Create होने वाले Folder का नाम उपरोक्त चित्र में दिखाए अनुसार js रख रहे हैं। जैसे ही हम Folder का नाम Specify करके Finish Button पर Click करते हैं, हमारे IDE में निम्न चित्रानुसार एक नया Folder Create हो जाता है:

और जैसाकि उपरोक्त चित्र में दिखाई दे रहा है, जैसे ही हम इस Newly Created Folder में अपनी jQuery Library File को Save करते हैं, ये File हमें हमारे NetBeans IDE में दिखाई देने लगती है। अब हम इसे अपने HTML Page में <script> Element का प्रयोग करते हुए निम्नानुसार Embed कर सकते हैं:

अब जैसे ही हम कोई भी jQuery Code लिखते हैं, विभिन्न jQuery Methods से सम्बंधित Code Completion व Help निम्न चित्रानुसार Automatically दिखाई देने लगती है:

जैसाकि हम समझ सकते हैं कि NetBeans ठीक Visual Studio की तरह ही उपयोगी है। हालांकि Visual Studio, JavaScript व jQuery के मामले में किसी भी अन्‍य IDE से ज्यादा बेहतर है, क्योंकि कभी-कभी हमें jQuery के लिए NetBeans को Configure करने की जरूरत पडती है, जबकि Visual Studio में jQuery Configuration Inbuilt है, इसलिए बिना किसी परेशानी के हम jQuery को Visual Studio में Directly Use कर सकते हैं फिर भी आपको जो IDE पसन्द आए, आप उसे Use कर सकते हैं। ये पूरी तरह से आपकी इच्छा पर निर्भर है।