জাভাস্ক্রিপ্ট প্রদর্শন বিকল্প
জাভাস্ক্রিপ্ট বিভিন্ন উপায়ে ডেটা "ভিজ্যুয়ালাইজ" করতে পারে:
- innerHTML বা innerText ব্যবহার করে একটি HTML উপাদানে লেখা
- document.write() HTML
- window.alert()
- console.log()
innerHTML ব্যবহার করে
একটি HTML উপাদান অ্যাক্সেস করতে, আপনি document.getElementById(id) পদ্ধতি ব্যবহার করতে পারেন।
একটি HTML উপাদান সনাক্ত করতে id বৈশিষ্ট্য ব্যবহার করুন.
তারপর HTML উপাদানের HTML বিষয়বস্তু পরিবর্তন করতে innerHTML বৈশিষ্ট্য ব্যবহার করুন:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";
</script>
</body>
</html>লাইভ ডেমো: innerHTML
দ্রষ্টব্য:
একটি এইচটিএমএল উপাদানের অভ্যন্তরীণ এইচটিএমএল বৈশিষ্ট্য পরিবর্তন করা এইচটিএমএলে ডেটা প্রদর্শনের সবচেয়ে সাধারণ উপায়।
অভ্যন্তরীণ পাঠ্য ব্যবহার করে
একটি HTML উপাদান অ্যাক্সেস করতে, document.getElementById(id) পদ্ধতি ব্যবহার করুন।
তারপর HTML উপাদানের অভ্যন্তরীণ পাঠ্য পরিবর্তন করতে innerText বৈশিষ্ট্য ব্যবহার করুন:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerText = "Hello World";
</script>
</body>
</html>লাইভ ডেমো: innerText
দ্রষ্টব্য:
যখন আপনাকে একটি HTML উপাদান পরিবর্তন করতে হবে তখন innerHTML ব্যবহার করুন।
যখন আপনাকে প্লেইন টেক্সট প্রতিস্থাপন করতে হবে তখন innerText ব্যবহার করুন।
document.write() ব্যবহার করে
পরীক্ষার উদ্দেশ্যে, document.write() ব্যবহার করা সুবিধাজনক :
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>HTML ডকুমেন্ট লোড হওয়ার পরে document.write() ব্যবহার করা সমস্ত বিদ্যমান HTML মুছে ফেলবে:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>সতর্কতা ডেমো: document.write()
মনোযোগ: আপনি এই বোতামটি ক্লিক করলে, এই পৃষ্ঠার সমস্ত সামগ্রী মুছে ফেলা হবে এবং শুধুমাত্র "11" প্রদর্শিত হবে!
সতর্কতা:
document.write() . HTML .
window.alert() ব্যবহার করে
আপনি সতর্কতা বাক্স ব্যবহার করে ডেটা কল্পনা করতে পারেন:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>আপনি উইন্ডো শব্দটি বাদ দিতে পারেন।
জাভাস্ক্রিপ্টে, উইন্ডো অবজেক্ট একটি গ্লোবাল স্কোপ অবজেক্ট। এর মানে হল যে পরিবর্তনশীল, বৈশিষ্ট্য এবং পদ্ধতিগুলি ডিফল্টরূপে উইন্ডো অবজেক্টের অন্তর্গত। এর মানে হল যে উইন্ডো কীওয়ার্ড নির্দিষ্ট করা ঐচ্ছিক:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>লাইভ ডেমো: সতর্কতা()
console.log() ব্যবহার করে
ডিবাগিংয়ের উদ্দেশ্যে, ব্রাউজারে ডেটা প্রদর্শনের জন্য console.log() পদ্ধতিটি কল করা যেতে পারে।
আপনি পরবর্তী অধ্যায়ে ডিবাগিং সম্পর্কে আরও শিখবেন।
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>লাইভ ডেমো: console.log()
এই বোতামটি ক্লিক করুন এবং আপনার ব্রাউজারের কনসোল খুলুন (F12 টিপুন)।
জাভাস্ক্রিপ্ট মুদ্রণ
জাভাস্ক্রিপ্টের কোনো মুদ্রণ বস্তু বা মুদ্রণ পদ্ধতি নেই।
আপনি জাভাস্ক্রিপ্ট থেকে আউটপুট ডিভাইস অ্যাক্সেস করতে পারবেন না।
একমাত্র ব্যতিক্রম হল বর্তমান উইন্ডোর বিষয়বস্তু প্রিন্ট করার জন্য ব্রাউজার window.print() পদ্ধতিতে কল করতে পারে।
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>লাইভ ডেমো: প্রিন্টিং
জাভাস্ক্রিপ্ট টিউটোরিয়াল
এই টিউটোরিয়ালের অনেক অধ্যায় ব্যায়ামের সাথে শেষ হয় যা আপনার জ্ঞানের স্তর পরীক্ষা করতে পারে।