Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Thursday, August 11, 2022

জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল কিভাবে লিখে? জাভাস্ক্রিপ্টে এইচটিএমএল কোড লিখার উপায়

জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল কিভাবে লিখে? জাভাস্ক্রিপ্টে এইচটিএমএল কোড লিখার উপায়

ইতিমধ্যে আর্টিকেলের মাধ্যমে জাভাস্ক্রিপ্টের ২ টি আর্টিকেল শেষ করেছি। যার মধ্যে একটি ছিলো জাভাস্ক্রিপ্ট কী? এবং অন্যটি ছিলো এইচটিএমএল কোডের মধ্যে জাভাস্ক্রিপ্ট কিভাবে লিখে? ২টা আর্টিকেলেই মোটামুটি ভালো রেস্পন্স পেয়েছি যারা কারনে আমি আমার ফ্রী টাইমে একটি করে সিরিয়াল ভাবে জাভাস্ক্রিপ্ট এর উপর আর্টিকেল লিখবো। আমাদের আজকের এই আর্টিকেলে শেখানো হবে জাভাস্ক্রিপ্ট কোডের মধ্যে কিভাবে এইচটিএমএল কোড লিখা যায়? 

জ্বী হ্যা এর আগের একটি আর্টিকেলে শিখেছিলাম এইচটিএমএল পেইজের মধ্যে কিভাবে জাভাস্ক্রিপ্ট লিখতে হয়, আর আজকের এই আর্টিকেলে শিখবো কিভাবে জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল লিখতে হয়।
জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল কোড লিখা এটা একদম ইজি, তবে হ্যা অনেক সময় অনেকেই বিষয়টা গুলিয়ে ফেলেন এবং গুগল করে নেন। যারা গুগল করেন ইনশাল্লাহ আমার আর্টিকেলটি তাদের নজরে পরেছে এবং আমি এত টুকু সিউরিটি দিতে পারি আপনি নিশ্চয় আমার আর্টিকেলটি গুগলের সার্স করেই পেয়েছেন। তাহলে আর কথা নয় চলুন মূল টপিকে আশা যাক।

জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল কিভাবে লিখে?

জাভাস্ক্রিপ্ট কোডের মধ্যে এইচটিএমএল লিখার জন্য প্রধানত একটি মেথড ব্যাবহার করা হয় যা নিম্নে উল্যেখ করা হলো।

<script>
   document.write("এখানে আপনি এইচটিএমএল কোড লিখতে পারেন।"); 
</script>

উপরের কোড যদি লখ্য করেন এখানে <script> ট্যাগের মধ্যে document.write() নামে একটি ম্যাথড ব্যাবহার করা হয়েছে, যার মধ্যে (বন্ধনি) এর মধ্যে দুইটি ডাবল কোটেশন "" ব্যাবহার করা হয়েছে। কোটেশনের মধ্যে আপনি এইচটিএমএল এর যে কোনো কোড লিখলে সেটি রান হয়ে যাবে। 

যেমন নিচে আমি একটি এক্সামপল দিচ্ছি। 

<!DOCTYPE html>
<html>
<body>

<h1>জাভাস্ক্রিপ্টে এইচটিএমএল কোড</h1>
<h2>এই write() ম্যাথড</h2>

<p>documnet এর পরে (.) ডট দিয়ে write() লিখে প্রথম বন্ধনিতে ডাবল কোটেশন " " দিয়ে এইচটিএমএল কোড যা লিখবেন সেটাই আউটপুট হিসেবে পাবেন।</p>

<script>
document.write("<h2>Hello Mr AnTor Ali Vistors!</h2><p>How are you?</p>");
</script>


</body>
</html>

উপরের কোডটি আপনি কপি করে প্র্যাক্টিস করতে পারেন।


Wednesday, August 10, 2022

এইচটিএমএল পেইজে জাভাস্ক্রিপ্ট কিভাবে লিখে?

এইচটিএমএল পেইজে জাভাস্ক্রিপ্ট কিভাবে লিখে?

আজকের এই আর্টিকেলে জানানো হবে আপনি এইচটিএমএল পেইজের মধ্যে জাভাস্ক্রিপ্ট কিভাবে লিখবেন অথবা জাভাস্ক্রিপ্ট কিভাবে ইমপ্লিমেন্ট করবেন? জাভাস্ক্রিপ্ট যারা একদম নতুন শিখছেন তাদের জন্য আজকের এই আর্টিকেলটি খবই গুরুত্বপুর্ন! সুতরাং সবাই মোনোযোগ সহকারে পরবেন।
এইচটিএমএল পেইজের মধ্যে জাভাস্ক্রিপ্ট লিখার ২টি পদ্বতি আছে। এই দুটি হলো-
  1. Inpage JavaScript 
  2. External JavaScript

Inpage JavaScript 

ইনপেইজ জাভাস্ক্রিপ্ট এটার মানে হলো জেই পেইজে আপনি এইচটিএমএল কোড লিখেছেন সেই পেইজের মধ্যেই জাভাস্ক্রিপ্ট কোড লিখা। নিচের ছবিটি যদি লখ্য করেন তাহলে জানতে পারবেন কিভাবে আপনি এইচটিএমএল কোডের মধ্যে জাভাস্ক্রিপ্ট লিখবেন।
উপরের ছবিটি যদি একটু লক্ষ্য করেন এখানে কিন্তু <Script> নামক একটি ট্যাগ লিখা হয়েছে, মূলত এর মধ্যেই জাভাস্ক্রিপ্ট কোড লিখতে হয়। আরেকটি বিষয় হয়ত আপনারা লক্ষ্য করতে পেরেছে সেটা হচ্ছে এখানে স্ক্রিপ্ট ট্যাগ ২ বার স্টার্ট ও ক্লোজ করা হয়েছে। আসলে জাভাস্ক্রিপ্ট আপনি চাইলে <head> ট্যাগের যে কোন অংশে লিখতে পারেন অন্যথায় আপনি এটা <body> ট্যাগের একদম শেষে বা </body> যেখানে এই ক্লোজিং ট্যাগ আছে তার ঠিক উপরেই <script> ট্যাগ শুরু ও শেষ করতে পারেন। 

Body ট্যাগ ক্লোজের পুর্বে <script> লেখার একটা বড় কারণ হচ্ছে, জাভাস্ক্রিপ্টে যখন ডম এলিমেন্ট নিয়ে কাজ করবেন তখন দেখবেন আপনা জাভাস্ক্রিপ্ট আগে লোড হয়ে যাচ্ছে যদি জাভাস্ক্রিপ্ট ট্যাগটি বডি ট্যাগের শুরুতে দেন। আর যার কারণে জাভাস্ক্রিপ্টে অনেক ইরর শো করে, এর জন্যই মূলত এটা সবাই শেষে দিয়ে থাকে। 

External JavaScript

এক্সটার্নাল জাভাস্ক্রিপ্ট এটা মূলত কাজ হচ্ছে লিংক করা। যেমন সিএসএস  লিখার সময় সিএসএস এর জন্য একটি আলাদা ফাইল করে পরবর্তীতে সেই ফাইল এইচটিএমএল পেইজের সাথে কানেক্ট করে নিলে সিএসএস এ যাই লিখি এটা এইচটিএমএল এর পেইজে চলে আসে। একই ভাবে জাভাস্ক্রিপ্টের রয়েছে এরকমই একটি সিস্টেম। যেমন জাভাস্ক্রিপ্টের জন্য আপনি একটি ফাইল তৈরি করলেন, javascript.js নামে, (.js এটা জাভাস্ক্রিপ্টের ফাইল এক্সটেনশন)। এবার এই ফাইলটা এইচটিএমএল এর সাথে কানেক্ট করতে হবে। কিভাবে কানেক্ট করবেন নিচের ছবি গুলো মনোযোগ সহকারে লখ্য করুন।
উপরের ছবিটি লখ্য করলে দেখবেন এখানে লাল মার্ক করে একটি লাইন লিখা হয়েছে। যেটা দ্বারা অন্য কোনো একটি জাভাস্ক্রিপ্ট ফাইলকে কানেক্ট করা হয়েছে। <script src="javascript.js"></script>

উপরের ছবিতে দেখা যাচ্ছে আমার কম্পিউটারে একটি ফোল্ডার ওপেন করেছি এবং ফোল্ডারে ২টা ফাইল আছে। ২টি ফাইল কিন্তু একই ফোল্ডারে আছে এর জন্য মূলত ডাইরেক্ট src="file_name" দিয়ে দিতে পারছি। কিন্তু এটা যদি অন্য কোনো ফোল্ডারে থাকতো? সেই ক্ষেত্রে প্রথমত ফোল্ডারের নাম যেমন jsFile এর পর একটি স্লাশ (/) jsFile/ এবং এবারে আপনার ফাইল নাম যেমন javascript.js অতএব myFile/javascript.js এইভাবে কানেক্ট করতে পারেন। 

এবার আমি যদি জাভাস্ক্রিপ্ট ফাইলে কিছু লিখি এবং আমার এইচটিএমএল ফাইলটি রান করি, তাহলে আমার জাভাস্ক্রিপ্টে লিখে সকল আউটপুট এই এইচটিএমএল পেইজটিতে পেইয়ে যাবো। 

আজকের টিউটোরিয়াল এই পর্যন্ত ধন্যবাদ সবাইকে।

Friday, June 3, 2022

জাভাস্ক্রিপ্ট লিখার জন্য ক্রোম ডেভেলপার কনসোল প্রয়োজন?

জাভাস্ক্রিপ্ট লিখার জন্য ক্রোম ডেভেলপার কনসোল প্রয়োজন?

জাভাস্ক্রিপ্ট কোড লেখার আগে ক্রোমের ডেভেলপার কনসোলের সঙ্গে সবাইকে পরিচিত হতে হবে। ক্রোমের ডেভেলপার কনসোল আসলে অনেক পাওয়ারফুল। এর অনেক কাজের মধ্যে জাভাস্ক্রিপ্ট কোড রান করাটাও একটা কাজ। ক্রোমের কনসোলের সাহায্যে সহজেই আমরা লাইন বাই লাইন কোড লিখে লিখে রান করতে পারি। যদিও নোড জেএস ব্যাবহার করেও কোড রান করাতে পারি, কিন্তু আমি রিকোমেন্ড করবো জাভাস্ক্রিপ্ট শেখার সময় প্রথমেই ক্রোমের কনসোল দিয়ে শুরু করুন। এটার বেশ কিছু সুবিধা রয়েছে, যেগুলো আপনারা কোড শিখার সময় আস্তে আস্তে বুঝতে পারবেন। আর কন্সোলে রয়েছে অনেক গুলো টুল যার জন্য জাভাস্ক্রিপ্ট শেখা ক্রোমের কন্সোল দিয়ে আরো সহজ। 




Monday, March 28, 2022

Top 10 JavaScript Framework জাভাস্ক্রিপ্টের জনপ্রিয় ১০ টি লাইব্রেরি

Top 10 JavaScript Framework জাভাস্ক্রিপ্টের জনপ্রিয় ১০ টি লাইব্রেরি

এখনকার সময়ে জাভাস্ক্রিপ্টে অনেক ফ্রেমওয়ার্ক ও লাইব্রেরি আছে যা সকলের কাছেই অনেক জনপ্রিয় এবং ওয়েব এ্যাপ্লিকেশনের দিক দিয়ে প্রায় সকল যায়গায় এই লাইব্রেরি গুলো ব্যাবহার করা হয়। 

1. Node JS নোড জেএস

জাভাস্ক্রিপ্টের সবচেয়ে পপুলার রানটাইম এনভারোমেন্ট এবং সবচেয়ে বেশি ব্যাবহৃত। এটা সাধারণত সার্ভার সাইডে ব্যাবহার করা হয়। আপনি জাভাস্ক্রিপ্ট শেখার পর ব্যাক-এন্ড কাজ করতে চাইলে নোড জেএস আলাদা করে লেখা শুরু করতে পারেন।


2. React JS রিয়াক্ট জেএস

ফেসবুক ডেভেলপারদের দ্বারা দেখাশোনা করা হয়। আসল কাজ ফ্রন্ট-এন্ড ডেভেলপমেন্ট। কোম্পোনেন্ট বেইজ, লাইট, ঝামেলা কম, আল্ট্রা ফাস্ট পারফরমেন্স। এপিআই খুবই ছোট আর তাই তাড়াতাড়ি শেখা যায় এবং কাজও করা যায়।

3. Vue Js ভ্যু জেএস

ভ্যু জে এস বেশ ভালো অবস্থানে আছে  আসলে এটাও ফ্রন্ট-এন্ড ডেভেলপমেন্ট ব্যাবহার করা হয়। শুরুতে সহজে শেখা যায় এবং শেষ কয়েক বছর বছর ধরে অনেক ব্যাবহার হচ্ছে Vue Js


4. Angular JS এঙ্গুলার জেএস

গুগল থেকে মেইন্টেইন করা হয়। কয়েকটা ভার্সন আছে। প্রধানত ব্যাবহার করা হয় ফ্রন্ট-এন্ড ডেভেলপমেন্টে।

5. Meteor JS মেটেরর জেএস 

মেটেওর ব্যাবহার করে ক্লাইন্ট সাইডের সংগে সার্ভার সাইডেও কাজ করা যায়। এর জন্য আপনাকে অন্য কোন ল্যাংগুয়েজ (পিএইচপি/রুবি/পাইথন) ব্যাবহার করতে হবেনা। জাভাস্ক্রিপ্ট দিয়েই সার্ভার সাইডেও সেইম ফাংশনালিটি আর পারফরমেন্স কাজ করতে পারবেন।

6. Ember JS এম্বার জেএস

এটাও ব্যাসিক্যালি এক-পেজের এ্যাপ্লিকেশন তৈরিতে ব্যাবহার হয়।

7. React Native রিয়াক্ট ন্যাটিভ 

জাভাস্ক্রিপ্ট আর রিয়াক্ট ব্যাবহার করে মোবাইল এ্যাপ বানাতে চান? হ্যা, তাহলে রিয়াক্ট নেটিভ আছে আপনার জন্য। রিয়াক্ট নেটিভ দিয়ে পুরোপুরি নেটিভ এবং ক্রস পাল্টফোর্ম মোবাইল এ্যাপ বানাতে পারবেন।

8. Babel JS ব্যাবেল জেএস 

ব্যাবেল সাধারনত ব্যাবহার করা হয় ES কোড বা জাভাস্ক্রিপ্টের নতুন ভার্সনের কোডকে ES5 এ কনভার্ট করার জন্য। ES6 বা জাভাস্ক্রিপ্টে অনেক নতুন সিনট্যাক্স যা এখনো সাপোর্ট না আমাদের ব্রাউজারে। তাই ব্রাউজার এরি মুহুর্তে অই ধরনের সিনট্যাক্স ব্যাবহার করার জন্য ব্যাবেল ইউজ করে। ব্যাবেল দিয়ে সব ব্রাউজারে সাপোর্টেড ভার্সন করা যায়।

9. Webpack ওয়েবপ্যাক

সাধারণত একটা এ্যাপ্লিকেশনে অনেক টেকনোলজি ব্যাবহার করা হয়। সব একসংগে বান্ডিল করে একটা ফাইলে নিয়ে সার্ভ করার জন্য বেশির ভাগ ক্ষেত্রে ব্যাবহার করা হয়। আপনার ওয়েবসাইটে অনেক স্ক্রিপ্ট ফাইল থাকতে পারে। ওয়েবপ্যাক সব একসংগে করে একটা স্ক্রিপ্ট করে এবং এটা ব্যাবহার করা অনেক ফ্লেক্সিবল।

10. Express Js এক্সপ্রেস জেএস

বিশেষ করে নোডের সংগে ব্যাবহার করা হয়। সার্ভার তৈরি করতে এবং আপনার এ্যাপ্লিকেশনের রাউটিং করার জন্য। অনেক সহজে শেখা যায় এবং বেশ কাজেরও বটে।




Monday, February 7, 2022

জাভাস্ক্রিপ্ট কী? What is javascript?

জাভাস্ক্রিপ্ট কী? What is javascript?

জাভাস্ক্রিপ্ট! জাভাস্ক্রিপ্ট কী? জাভাস্ক্রিপ্ট একটা প্রোগ্রামিং ল্যাংগুয়েজ। হাই লেভেল প্রোগ্রামিং ল্যাংগুয়েজ। 

জাভাস্ক্রিপ্ট সংক্ষেপে JS বলা হয়। জাভাস্ক্রিরপ্ট ইন্টারনেটে ব্যাবহৃত অনেক জনপ্রিয় একটি ভাষা। জাভাস্ক্রিপ্ট হলো একটি ক্লায়েন্ট সাইড স্ক্রিপ্টীং ল্যাংগুয়েজ বা ব্রাউজার স্ক্রিপ্টিং ল্যাংগুয়েজ। জাভাস্ক্রিপ্ট একটু প্রোটোটাইপ ভিত্তিক স্কিপ্টিং ল্যাংগুয়েজ যাতে পরিবর্তবশীল, দুর্বল টাইপ এবং প্রথম শ্রেণীরর ফাংশন আছে। এটি একটি অবজেক্ট ওরিয়েন্টেড কার্যকারী প্রোগ্রামিং শৈলী সমর্থনকারী ভাষা। 



জাভাস্ক্রিপ্ট একটি অবজেক্ট-ওরিয়েন্টেড, ডায়নামিক প্রোগ্রামিং ভাষা। এতে আছে ডেটা টাইপ, অপারেটর, গুরুতকপূর্ণ কিছু অবজেক্ট। যে গুলো সব সময় আপনি ব্যাবহার করতে পারবেন। আর ফাংশন বা মেথড তো সাথে থাকছেই। 

জাভাস্ক্রিপ্ট C প্রোগ্রামিং ল্যাঙ্গুয়েজের সাথে বেশ কিছু মিল আছে। যা আস্তে আস্তে আপনার বুঝতে পারবেন তবে হ্যা বর্তমানে বাজারে JS এর ভ্যালু অনেক। তাই আপনি আজকে থেকে শুরু করে দিন JS শিখা। 

হাই লেভেল ল্যাংগুয়েজ মানে? 

হাই লেবেল ল্যাংগুয়েজ মানে এই ল্যাংগুয়েজ অনেকটা সফটলি কোডেড। আপনাকে আপনার মেশিন সম্পর্কে খুব বেশি কিছু জানতে হবেনা। এর জন্য যেমন সি প্রোগ্রামিং ল্যাংগুয়েজ ব্যাবহার করতে গেলে আপনাকে মেশিন কিভাবে কাজ করে, কিভাবে কোড কম্পাইল করে কিভাবে সেটা রান করেম, মেমোরি কতটুকু নেবে এই গুলো ভাবতে হয়। হাই লেভেল ল্যাংগুয়েজে এত কিছু ভাবা লাগেনা। এখানে ল্যাংগুয়েজ আপনার হয়ে অনেক কাজ করে দেবে। 

হাই লেভেল ল্যাংগুয়েজে সুবিধা কী?

সুবিধা হলো আপনি একটা জটিল এ্যাপ বানাবেন।  এখন আপনাকে এ্যাপের ফাংশনালিটি নিয়ে না ভেবে, সেইগুলো নিয়ে কাজ না করে যদি একদম গোড়া থেকে সুরু করেন, কোন টাইপের ডেটা নেবেন, মেমোরি কতটুকু যাবে, এগুলো নিয়েই ভাবতে হয়, সময় দিতে হয় তাহলে দেখা যাবে আপনার এ্যাপের ব্যাকবোনই বানাতে বানাতে বাজেট শেষ এবং অনেক বড় ধরনের সময় লস হবে। নাইতো আপনি মোটিভেশনাল সিনে কী হচ্ছে না হচ্ছে এত কিছু ভেবেও আপনার আসল কাজ সুরু করতে পারেন।