X

X

X

HTML JavaScript (জাভাস্ক্রিপ্ট) - ওয়েবপেজে প্রোগ্রামিং


JavaScript কোনো ওয়েবপেজকে ডায়নামিক, দৃষ্টিনন্দন করার জন্য ব্যবহৃত হয়। ওয়েব পেজে প্রোগ্রামিং করার জন্য মূলত জাভাস্ক্রিপ্ট ব্যবহৃত হয়। এর মাধ্যমে প্রোগ্রামিং এর মোটামুটি যাবতীয় কাজ করা যায়।

ডায়নামিক ওয়েব পেজ কি?

আগের চ্যাপ্টারগুলোতে আমরা যা কিছু শিখেছি তার সবগুলোই মূলত স্ট্যাটিক ওয়েব পেজ। স্ট্যাটিক ওয়েব বলতো বোঝায়, যেসব ওয়েব পেজ ব্রাউজারে লোড হওয়ার পর, তার কন্টেন্ট কখনই পরিবর্তিত হয় না তাদেরকে। আর ডায়নামিক ওয়েব পেজ বলতে বোঝায়, যেসব ওয়েব পেজের কন্টেন্ট লোড হওয়ার পর তার যেকোনো কন্টেন্ট পরিবর্তন করা যায় তাদেরকে। যেমন, উপরের উদাহরণে Click me to show date বাটনে ক্লিক করলে আজকের তারিখ দেখায়। এখানে আগে থেকে কিন্তু তারিখ ইলামেন্ট লোড করা ছিলো না। প্রতিবার যখনই উক্ত বাটনে ক্লিক করা হয়, এটি তারিখ ও সময় দেখায়। এটি মূলত একটি ডায়নামিক ওয়েভ পেজ। এই কাজটি করা হয় জাভাস্কিপ্ট দিয়ে।

Example

My First JavaScript


HTML <script> ট্যাগ

<script> এর মাধ্যমে ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট কোড লিখা হয়। জাভাস্ক্রিপ্ট কোড ব্রাউজার এবং সার্ভার দুই অংশের জন্য লিখা যায়। ব্রাউজারে যে অংশটুকু execute হয় সেটিকে ক্লায়েন্ট সাইড কোড বলে।

<script> এর ভিতরে হয় কোড লিখা হয়। নাহলে এটি src attribute এর মাধ্যমে বাইরের কোনো কোড লোড করে। জাভাস্ক্রিপ্ট সাধারণত ইমেজ প্রসেসিং, ফরম ভ্যালিডেশন এবং ডায়নামিক্যালি কন্টেন্ট পরিবর্তন করার জন্য ব্যবহৃত হয়ে থাকে।

document.getElementById(id) method ব্যবহার করে কোনো HTML element কে সিলেক্ট করা হয়। এছাড়াও ইলামেন্ট সিলেক্ট করার জন্য আরও বেশকিছু মেথড রয়েছে। ক্লাস, নেম ইত্যাদি বিভিন্ন attribute access করে ইলামেন্ট সিলেক্ট করা যায়।

নিচের উদাহরণটিতে id=”demo” বিশিষ্ট একটি ইলামেন্টে জাভাস্ক্রিপ্টের মাধ্যমে “Hello JavaScript!” লিখা হয়।

Code Example

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


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

নিচে কিছু উদাহরণ দেওয়া হলো। এগুলো মাধ্যমে আপনি বুঝতে পারবেন জাভাস্ক্রিপ্ট দিয়ে কি কি করা যায়।

Code Example

<script>
function myFunction() { 
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Code Example

<script>
function myFunction() {
    document.getElementById("demo").style.fontSize = "25px"; 
    document.getElementById("demo").style.color = "red";
    document.getElementById("demo").style.backgroundColor = "yellow";        
}
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Code Example

<script>
function light(sw) {
    var pic;
    if (sw == 0) {
        pic = "http://www.seicoder.com/resources/tutorials/html/html-javascript/pic_bulboff.gif"
    } else {
        pic = "http://www.seicoder.com/resources/tutorials/html/html-javascript/pic_bulbon.gif"
    }
    document.getElementById('myImage').src = pic;
}
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


যদি কোনো ব্রাউজার জাভাস্ক্রিপ্ট সাপোর্ট না করে!!!!

হ্যা যদি এমনটি হয় তাহলে কি হবে? তখন <noscript> ট্যাগ ব্যবহার করা হয়। এর মাধ্যমে জাভাস্ক্রিপ্ট কোডের বিকল্প কন্টেন্ট লিখা হয়। অর্থাৎ, যদি কোনো কারনে জাভাস্ক্রিপ্ট কোড রান না হয় তখন বিকল্প কন্টেন্ট প্রদর্শিত হবে।

Code Example

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Script ট্যাগসমূহ

ট্যাগ বর্ণনা
<script> ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট লিখা হয়।
<noscript> এর মাধ্যমে জাভাস্ক্রিপ্ট এর বিকল্প কোড লিখা হয়।