HELLO Friends ,কেমন আছ তোমরা ? আমি মুটামুটি (fatfaty :p) আছি ।
আমাদের কোন কিছু শিখার অন্তরায় হলো শর্টকাট । And that’s why আমি আজ একটি শর্টকাট মুক্ত টিউটেরিয়াল করেছি । এখানে No screenshot and No Shortcut .
এখন আসি tutorial সম্পর্কে । আপনারা সবাই হয়তো ট্রিকবিডি বা অন্য যেকোন wordpress blog এর visual টেক্সট ইডিটর টা দেখেছেন । আমি যেসময় প্রথম এই ধরনের Editor দেখি তখন আমি আমার প্রজেক্টে এটা ব্যবহার করতে চেয়েছিলাম । But গুগল করলেই পেতাম
“Create your won rich text editor using jquery and html5 ” 🙁
But আমি চাইতাম সবকিছুই পিউর । তাই একটা বড় প্রজেক্ট গিটহাব থেকে ডাউনলোড করে কেটে ছোট করে “minimum” অংশ গুলো রাখলাম । 🙂 ?
সত্যি বলতে কি তখন আমি আমার চাওয়ার থেকেও বেশি কিছু পেলাম এবং এ থেকেই আমার js পথচলা শুরু ।। So shortcut can’t help you to learn anything .
গালি দিবেন না প্লিজ । বক বক বাদ দিয়ে এখন কাজের কথায় আসি 🙂
(***Github:গিটহাব হল সোর্স কোন নিরাপদে রাখার জন্য একটি organisation )
(***js:Javascript But not Java. Useful to web designing***)
প্রথমেই Html তৈরি করতে হবে । So একটি ফাইল তেরি করুন যার ফরমেট হবে .html ।
(SS চাওয়া যাবে না । কঠিন ভাবে শিখলে মাথায় গেথে যাবে । যদি POSSIBLE হত তবে CODE ও দেওয়া ঠিক না )
নিচের Source code টা ভালো করে দেখুন । নিজে নিজে তৈরি করা html ফইলটাতে লিখুন । Notepad,notepad++,Dreamweaver ব্যবহার করতে পারেন । android user রা Es note editor বা webmaster.apk ব্যবহার করতে পারেন । Result এর জন্য Firefox,Chrome,Opera browser ব্যবহার করতে পারেন । but opera mini হবে না ।
/*HTML সেকশন*/
<button onClick=”addElementF(‘h1’)”>For h1 Tag</button>
<button onClick=”addElementF(‘hr’)”>For hr Tag</button>
<button onClick=”addElementF(‘li’)”>For li Tag</button>
<div id=”TextEditor” style=”width:400px;height:400px;border:1px solid red”>
Shanto
</div>
/*শেষ*/
ব্যাখা :
<button<>/button> হলো html tag . এগুলো ব্রাউজবে দেখাবে ।
onClick=() হলো মাউসক্লিক ইভেন্ট caller ।
(ইভেন্ট: যখন ওয়েব পেজ এ কোন ঘটনা ঘটানো হয় তাই ইভেন্ট (event))
<div> এটাও tag । কিন্তু এখানে একটা attribute(উপাদান) আছে contenteditable=””
এটা দিয়ে আমরা কন্টেন্ট edit করার অনুমতি পাই ।
(style attribute এ visual effect তৈরি করা হয়েছে ।
Ok fine.
এখন জাভাস্ক্রিপ্ট এ আসি । এটাই মূল সেকশন । মানে প্রোগ্রাম ।
(Note :javascript case sensitive.)
(/*….*/ যা আছে এটা হলে কমেন্ট । এটা ব্রাউজার execute করবে না । এখানে যাকিছু লিখতে পারেন ।)
দিয়ে in document js শুরু হয় এবং দিয়ে শেষ হয় ।
var সাধারণত variable বা চলকের আগে কসে ।
function দ্বা addElementF() ফাংশন শুরু করেছি ।
“param” মানে parameter যা ইভেন্ট থেকে ডাটা কালেক্ট করে ফাংশনে পৌছে দেয় ।
switch() একটি js conditional ফাংশন । google it আরও জানতে ।
বাকি সব কমেন্টে লেখা আছে ।
html section এর নিচে এগুলো লিখুন ।
/*JS শুরু*/
/*ভেরিয়েবল সেকশন । এখানে edtr ভেরিয়েবলে আমাদের টেক্সট editor কে রাখা হয়েছে ID এর মাধ্যমে */
var edtr = document.getElementById(‘TextEditor’);
/*End of variable section*/
/*ফাংশন শুরু*/
function addElementF(param){
/*js switch ফাংশন */
switch (param){
case “h1”:
edtr.innerHTML +=”<h1>Appear Html H1 tag visualy</h1> “;
break;
case “hr”:
alert(param);
edtr.innerHTML +=”<hr>”;
break;
case “li”:
alert(param);
edtr.innerHTML +=”<ul><li>List Style</li></ul>”;
break;
}
/*switch ফংশন শেষ */
}
/*মুল ফাংশন শেষ */
/*JS শেষ*/
ব্রাউজরে ফাইলটা রান করান ।
শর্টকাট পরিহার করলেই আপনি web developing এর বস হতে পারবেন । আর হ্যা পরিশ্রম করতেই হবে । প্রাথমিক অবস্থায় যদি শিখতে চান তবে wordpress,joomla বা jquery,node.js এসবের ধারে কাছেও ঘেসবেন না । আপনি expert হলে এদের ডেভেলপাররাই আপনার হাতেরপায়ে ধরবে । Good bye everyone.
/*JS শুরু*/
/*ভেরিয়েবল সেকশন । এখানে edtr ভেরিয়েবলে আমাদের টেক্সট editor কে রাখা হয়েছে ID এর মাধ্যমে */
var edtr = document.getElementById(‘TextEditor’);
/*End of variable section*/
/*ফাংশন শুরু*/
/*js switch ফাংশন */
switch (param){
case “h1”:
edtr.innerHTML +=”<h1>Appear Html H1 tag visualy</h1> “;
break;
case “hr”:
alert(param);
edtr.innerHTML +=”<hr>”;
break;
case “li”:
alert(param);
edtr.innerHTML +=”<ul><li>List Style</li></ul>”;
break;
}
/*switch ফংশন শেষ */
}
/*মুল ফাংশন শেষ */
/*JS শেষ*/
ব্রাউজরে ফাইলটা রান করান ।
(important: এটা form action নিতে পারবে না । এর জন্য আরও কিছু কোড যোগ করতে হবে । So জানতে চাইলে কমেন্ট করুন । next tutorial তৈরি করব ।)
শর্টকাট পরিহার করলেই আপনি web developing এর বস হতে পারবেন । আর হ্যা পরিশ্রম করতেই হবে । প্রাথমিক অবস্থায় যদি শিখতে চান তবে wordpress,joomla বা jquery,node.js এসবের ধারে কাছেও ঘেসবেন না । আপনি expert হলে এদের ডেভেলপাররাই আপনার হাতেরপায়ে ধরবে । Good bye everyone.
Source code here: Source +webmaster pro apk
try Html code here :Html editor online
অনুরোধ :Web development এর জন্য একটা ক্যাটেগরি তৈরি করে দেওয়ার জন্য এডমিন প্যানেল কে অনুরোধ করছি ।