জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-০৩] :: জাভাস্ক্রিপ্ট কোডিং শুরু করা

Awesome! টিউনস

সকল Awesome! টিউনস

এ মাসের টেকটিউনস সংবাদঃ ডিসেম্বর-২০০৯

রনি পারভেজ

এক সাথে যত খুশি ততো ই-মেইল চেক করুন ডেস্কটপ থেকে! প্রয়োজনীয় না হলে মূল্য ফেরত

হাসান যোবায়ের

হয়ে উঠুন পেনড্রাইভ ভাইরাস/ম্যালওয়্যার কিলার

এস বি মেহদি

ওয়েবসাইট তৈরী এবং হোস্টিং এর কয়েকটি ফ্রি অনলাইন টুল

দুঃসাহসী টিনটিন

2,917 দেখা 11 টিউমেন্টস জোসস

টিউন বিভাগ জাভাস্ক্রিট

প্রকাশিত

Level 0

জিহাদুর রহমান

51 টিউনস 194 টিউমেন্টস 0 ফলোয়ার

টিউমেন্ট ফলো জোসস

আসসালামু-আলাইকুম, আশা করি সকলেই ভাল আছেন? আমি আলহামদুলিল্লাহ্‌ ভাও আছি । আমি আজ জাভাস্ক্রিপ্টের তৃতীয় পর্ব নিয়ে আলোচনা করবো । জাভাস্ক্রিপ্টের তৃতীয় পর্বে কিভাবে কোড লিখবেন তা নিয়ে বিস্তারিত আলোচনা করা হবে । কথা না বাড়িয়ে এখন আমরা শুরু করতে পারি ।
জাভাস্ক্রিপ্ট কোড এইচটিএমএল এর <script>…</script> ট্যাগ এর মধ্যে লিখতে হয় । যদি জাভাস্ক্রিপ্ট কোড <script> এর মাঝে না রাখা হয় তাহলে জাভাস্ক্রিপ্টটি যথাযথভাবে কাজ করবেনা । অর্থাৎ, জাভাস্ক্রিপ্ট কোড লেখার সাধারণ নিয়ম হচ্ছেঃ

<script type="text/javascript">
এখানে জাভাস্ক্রিপ্ট কোড
</script>

বিষয়টি আরও ভালোভাবে বুঝতে নিচের কোডটি প্রথমে নোটপ্যাড এ লিখে index.html নামে সেভ করুনঃ


<!DOCTYPE html>
<html>
<head>
<title>
Welcome to Javascript
</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World! ");
</script>
</body>
</html>

এবার index.html ফাইলটি ব্রাউজারে ওপেন করুন । তাহলে Hello World লেখাটি দেখতে পারবেন ।

ব্যাখ্যাঃ
যারা এইচটিএমএল জানেন তাদের এইচটিএমএল ট্যাগ সম্পর্কে নতুন কিছু বলতে হবেনা । কেননা, আমি প্রথমেই বলেছি যে জাভাস্ক্রিপ্ট শেখার আগে এইচটিএমএল & সিএসএস ভাল করে শিখতে হবে । আর যদি আপনি এইচটিএমএল শেখা না থাকে তাহলে আমি বলবো আপনি প্রথমে এইচটিএমএল শিখে নিন তারপর সিএসএস শিখে জাভাস্ক্রিপ্ট টিউটোরিয়াল দেখবেন । অন্যথায়, আপনি এই টিউটোরিয়ালটি বুঝতে পারবেন না ।

জাভাস্ক্রিপ্ট কোড এইচটিএমএল এর <script>…</script> ট্যাগ এর মধ্যে লিখতে হয় । এখানে <script>…</script> ট্যাগ এ স্ক্রিপ্ট এর ল্যাংগুয়েজ নির্ধারণ করতে অ্যাট্রিবিউট ব্যবহার করা হয়েছে, তাই script type="text/javascript" লেখা হয়েছে । যাইহোক, যারা এইচটিএমএল & সিএসএস শিখেছেন তারা আশা করি ব্যাপারটি ভাল করে বুঝতে পেরেছেন ।

এখানে document.write হচ্ছে একটি স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট কমান্ড । এই কমান্ডটি জাভাস্ক্রিপ্ট এর আউটপুট প্রদর্শনের জন্য লেখা হয় ।

*আপনি যদি জাভাস্ক্রিপ্ট কোড script>…</script> ট্যাগ এর মাঝে না লিখেন তাহলে জাভাস্ক্রিপ্ট কোডটি কাজ করবেনা । যেমন; আপনি যদি উপরের কোডটি <script> এর ভিতরে না রেখে index.html ফাইলটি প্রদর্শন করান তাহলে document.write("Hello World! "); লেখাটি প্রদর্শন করবে ।

আপনি চাইলে এক্সটারনাল জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন । যারা সিএসএস শিখেছেন তারা এক্সটারনাল ফাইল সম্পর্কে ভাল বুঝবেন । কেননা, আপনারা সিএসএস এ এক্সটারনাল স্টাইল সীট ব্যবহার করতে শিখেছেন । এক্সটারনাল জাভাস্ক্রিপ্ট ব্যবহার করার জন্য আপনাদের দুইটি কাজ করতে হবে । প্রথমে একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করতে হবে । এজন্য নিচের কোডটুকু লিখে hello.js নামে সেভ করুন ।

function popup() {
alert("Hello World!");
}

তারপর একটি এইচটিএমএল ফাইল তৈরি করতে হবে । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;


<!DOCTYPE html>
<html>
    <head>
        <title>
            Welcome to Javascript
        </title>
        <script type="text/javascript" src="hello.js"></script>
    </head>
    <body>
        <input type="button" onclick="popup()" value="Click Here">
    </body>
</html>

এবার ব্রাউজারে index.html ফাইলটি ওপেন করুন । এবার Click Here বাটন এ ক্লিক করুন । তাহলেই Hello World! লেখাটি দেখতে পারবেন ।

জাভাস্ক্রিপ্ট কোড কোথায় রাখবেন?

জাভাস্ক্রিপ্ট সাধারণত তিনটি অবস্থান এ রাখা যায়;

<head>…</head> ট্যাগ এর ভিতরে ।
<body>…</body> ট্যাগ এর ভিতরে এবং
এক্সটারনাল (External) ফাইল এ ।

আপনি যদি চান যে, যখন সাইটের ব্যবহারকারী যখন চাইবে তখন জাভাস্ক্রিপ্ট রান করাবেন তখন আপনি জাভাস্ক্রিপ্ট <head>…</head> ট্যাগ এর মাঝে রাখবেন ।

আর যদি আপনি চান যে পেইজ লোড হওয়ার সাথে সাথে জাভাস্ক্রিপ্ট রান করাবেন তাহলে <body>…</body> ট্যাগ এর মাঝে রাখবেন ।

আপনি যদি একাধিক পেইজ এ একই জাভাস্ক্রিপ্ট ব্যবহার করতে চান তাহলে প্রতিটি পেইজ এ আলাদা করে জাভাস্ক্রিপ্ট না লিখে এক্সটারনাল (External) ফাইল এ ব্যবহার করতে পারেন ।

একটা কথা খেয়াল রাখবেন, জাভাস্ক্রিপ্ট হচ্ছে কেস সেনসিটিভ । তাই, জাভাস্ক্রিপ্ট স্টেটমেন্ট লেখার সময় বড় ও ছোট হাতের অক্ষরের প্রতি বিশেষ নজর রাখবেন । এখানে document.write("Hello World! "); হচ্ছে একটি জাভাস্ক্রিপ্ট স্টেটমেন্ট । প্রতিটি স্টেটমেন্ট লেখার পর একটি সেমিকোলন ব্যবহার করবেন । এছাড়া, পরবর্তীতে এ বিষয় নিয়ে আরও আলোচনা করা হবে ।

জাভাস্ক্রিপ্ট কমেন্ট

কোড প্রকাশ করার জন্য কমেন্ট অত্যন্ত গুরুত্বপূর্ণ । আমরা কমেন্ট ব্যবহার করে সহজেই বুঝতে পারি যে কোন কোড কি কারনে ব্যবহার করা হয়েছে । এতে, পরিবর্তিতে কোড পরিবর্তন করতে সুবিধা হয় । কমেন্ট ব্রাউজারে প্রদর্শন হয় না । এছাড়াও আপনারা কমেন্ট সম্পর্কে এইচটিএমএল টিউটোরিয়াল এ জেনেছেন ।

জাভাস্ক্রিপ্ট তে সাধারণত দুই ধরনের কমেন্ট ব্যবহার করা হয় । এগুলো হচ্ছে সিঙ্গেল লাইন কমেন্ট এবং মাল্টিপল লাইন কমেন্ট ।

যদি কমেন্ট এক লাইন এ লেখা হয় তাহলে সিঙ্গেল কমেন্ট ব্যবহার করা হয় । সিঙ্গেল কমেন্ট লেখার জন্য // ব্যবহার করা হয় । যেমন;

<!DOCTYPE html>
<html>
<head>
<title>
Welcome to Javascript
</title>
</head>
<body>
<script type="text/javascript">
// This is JavaScript Code
document.write("Hello World! ");
</script>
</body>
</html>

আবার যদি কমেন্ট একাধিক লাইন এ লেখা হয় তাহলে মাল্টিপল কমেন্ট ব্যবহার করা হয় । মাল্টিপল কমেন্ট লেখার জন্য /* */ ব্যবহার করা হয় । যেমন;

<!DOCTYPE html>
<html>
<head>
<title>
Welcome to Javascript
</title>
</head>
<body>
<script type="text/javascript">
/* This is JavaScript Code and
JavaScript is a Scripting Language. */
document.write("Hello World! ");
</script>
</body>
</html>

এছাড়া, আপনি কমেন্ট ব্যবহার করে কোন কোডের কার্যক্রম স্থগিত রাখতে পারেন । অর্থাৎ, আপনি যদি চান যে জাভাস্ক্রিপ্ট কোন স্টেটমেন্টকে স্থগিত রাখতে পারেন ।

বিস্তারিত জানার জন্য নিচের কোডটুকু দেখুনঃ

<!DOCTYPE html>
<html>
<head>
<title>
Welcome to Javascript
</title>
</head>
<body>
<script type="text/javascript">
// document.write("Hello World! ");
</script>
</body>
</html>

এবার কোডটুকু ব্রাউজারে প্রদর্শন করালে ব্যাপারটি বুঝতে পারবেন । দেখবেন, প্রথম স্টেটমেন্টটি প্রদর্শন করছে না কিন্তু দ্বিতীয় স্টেটমেন্টটি প্রদর্শন করবে । কেননা, আমরা প্রথম স্টেটমেন্টকে স্থগিত রেখেছি ।

আপনি আপনাদের সুবিধার্থে কোডটুকু লিখে দিয়েছি । আপনারা এখান থেকে কোড সরাসরি কপি না করে, কোডটুকু দেখে নিজে নিজে লিখবেন তাহলে ভালোভাবে শিখতে পারবেন । আর আপনার কোডিং এর দক্ষতা বাড়াতে নিজে নিজে লেখার কোন বিকল্প নেই বলে আমি মনে করি ।

আমাকে ফেইসবুক এ পেতে এখানে ক্লিক করুন ।

আপনার যদি কোন প্রশ্ন থাকে তাহলে নির্দ্বিধায় করতে পারেন । যদি টিউটোরিয়ালটি পড়ে আপনাদের ভাল লাগে তাহলে কমেন্ট করতে ভুলবেন না । যদি কোন ভুল থাকে আমাকে জানাবেন আমি সংশোধন করে নিব । ধন্যবাদ সবাইকে আমার আজকের টিউটোরিয়ালটি মনোযোগ দিয়ে পড়ার জন্য । সকলেই ভাল থাকুন । আল্লাহ্‌ হাফেজ ।

টিউমেন্ট ফলো জোসস

Level 0

জিহাদুর রহমান

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।