জাভাস্ক্রিপ্ট টাইপ রূপান্তরকরণ (JavaScript Type Conversion)

আদনান নাহিদ
সরকারি তিতুমীর কলেজ

 

নাম্বার থেকে নাম্বারে পরিবর্তন, স্ট্রিং থেকে স্ট্রিং এ পরিবর্তন, বুলিয়ান থেকে বুলিয়ানে পরিবর্তন করা যায় ।

জাভাস্ক্রিপ্ট ডেটা প্রকারভেদ

মান ধারণ করতে পারে জাভাস্ক্রিপ্টে এমন 5 ধরনের ডাটা টাইপ আছে:

  • স্ট্রিং
  • নাম্বার
  • বুলিয়ান
  • অবজেক্ট
  • ফাংশন

অবজেক্ট ৩ ধরনের হয়:

  • অবজেক্ট
  • তারিখ
  • অ্যারে বা শ্রেণীবিন্যাস

এবং ২ ধরনের ডাটা টাইপের মান থাকতে পারে না :

  • অকার্যকর
  • অনির্দিষ্ট

 

typeof অপারেটর

একটি পরিবর্তনশীল জাভাস্ক্রিপ্ট এ ডাটা টাইপ খুঁজে পেতে অাপনি typeof অপারেটর ব্যবহার করতে পারেন ।
উদাহরণ


typeof "John"                 // Returns string
typeof 3.14                   // Returns number
typeof NaN                    // Returns number
typeof false                  // Returns boolean
typeof [1,2,3,4]              // Returns object
typeof {name:'John', age:34}  // Returns object
typeof new Date()             // Returns object
typeof function () {}         // Returns function
typeof myCar                  // Returns undefined (if myCar is not declared)
typeof null                   // Returns object

 

লক্ষ্য করুন :

  • NaN নাম্বারের ডাটা টাইপ
  • অ্যারের অবজেক্টের ডাটা টাইপ
  • তারিখের অবজেক্টের ডাটা টাইপ
  • Null অবজেক্টের ডাটা টাইপ
  • একটি অনির্ধারিত পরিবর্তনশীল এর ডাটা টাইপ

যদি জাভাস্ক্রিপ্ট অবজেক্ট অ্যারে (অথবা তারিখ) হয় তাহলে আপনি অর্থ বা সীমা নির্ধারণ করার ক্ষেত্রে typeof ব্যবহার করতে পারবেন না ।

 

Typeof ডাটা টাইপ

typeof অপারেটর পরিবর্তনশীল নয়। এটি একটি অপারেটর। অপারেটর (+ + – * /) এর কোন ডাটা টাইপ থাকে না ।
কিন্তু, typeof অপারেটর সবসময় একটি স্ট্রিং প্রদান করে operand এর সময় ।

 

কনস্টাকশন প্রপারটি

সব জাভাস্ক্রিপ্টের জন্যই constructor property, constructor function প্রদান করে ।
উদাহরণ


"John".constructor                 // Returns function String()   { [native code] }
(3.14).constructor                 // Returns function Number()   { [native code] }
false.constructor                  // Returns function Boolean()  { [native code] }
[1,2,3,4].constructor              // Returns function Array()    { [native code] }
{name:'John', age:34}.constructor  // Returns function Object()   { [native code] }
new Date().constructor             // Returns function Date()     { [native code] }
function () {}.constructor         // Returns function Function() { [native code] }

 

আপনি কনস্টাকশন প্রপারটি খুঁজে দেখতে পারেন এর কোন অবজেক্ট অ্যারে আছে কিনা (contains the word “Array”) :
উদাহরণ


function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

 

আপনি কনস্টাকশন প্রপারটি খুঁজে দেখতে পারেন এর কোন অবজেক্ট তারিখ কিনা (contains the word “Date”) :
উদাহরণ


function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

 

জাভাস্ক্রিপ্ট টাইপ রূপান্তরকরণ

জাভাস্ক্রিপ্ট ভেরিয়েবল নতুন একটি ভেরিয়েবলে এবং অন্য ডাটা টাইপে রূপান্তরিত করা যেতে পারে:

  • জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে
  • জাভাস্ক্রিপ্টের মাধ্যমে স্বয়ংক্রিয়ভাবে

 

নাম্বারকে স্ট্রিং এ রূপান্তর

গ্লোবাল পদ্ধতি String() দিয়ে সংখ্যাকে স্ট্রিং এ রূপান্তর করতে পারে ।

এটি যেকোনো ধরনের সংখ্যায় , লিটারেল, ভেরিয়েবল বা এক্সপ্রেশন এ ব্যবহার করা যায় :

উদাহরণ


String(x)         // returns a string from a number variable x
String(123)       // returns a string from a number literal 123
String(100 + 23)  // returns a string from a number from an expression

 

সংখ্যা পদ্ধতি toString() ও একই ধরনের কাজ করে ।
উদাহরণ


x.toString()
(123).toString()
(100 + 23).toString()

 

আপনি  (নাম্বার পদ্ধতি) অ্ধ্যায়ে সংখ্যাকে স্ট্রিং এ রূপান্তর করার আরো অনেক মেথড খুজে পাবেন :

পদ্ধতি বর্ণনা
toExponential() ব্যাখ্যামূলক একটি সংখ্যার সাথে সূচক নোটেশন ব্যবহার করে স্ট্রিং ফেরৎ পাওয়া
toFixed() স্থায়ী একটি নিদিষ্ট সংখ্যার সাথে দশমিক সংখ্যা ব্যবহার করে স্ট্রিং ফেরৎ পাওয়া
toPrecision() স্পষ্টতা একটি নিদিষ্ট দৈর্ঘ্যর সাথে একটি সংখ্যা ব্যবহার করে স্ট্রিং ফেরৎ পাওয়া

 

Booleans থেকে স্ট্রিং এ রূপান্তর

গ্লোবাল পদ্ধতি String(), Booleans কে স্ট্রিং এ রূপান্তর করতে পারে :
উদাহরণ


String(false)        // returns "false"
String(true)         // returns "true"

 

বুলিয়ান পদ্ধতি toString() ও একই ধরনের কাজ করে ।


false.toString()     // returns "false"
true.toString()      // returns "true"

 

তারিখকে স্ট্রিং এ রূপান্তর

গ্লোবাল পদ্ধতি String() দিয়ে তারিখকে স্ট্রিং এ রূপান্তর করতে পারে :


String(Date()) // returns Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

 

তারিখের পদ্ধতি toString() ও একই ধরনের কাজ করে ।
উদাহরণ


Date().toString() // returns Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

 

আপনি  (ডেট মেথড) অ্ধ্যায়ে সংখ্যাকে স্ট্রিং এ রূপান্তর করার আরো অনেক মেথড খুজে পাবেন :

মেথড বর্ণনা
getDate() তারিখকে সংখ্যা হিসেবে গ্রহণ করে (1-31)
getDay() সপ্তাহকে সংখ্যা হিসেবে গ্রহণ করে (0-6)
getFullYear() বছরের চারটি অঙ্ক গ্রহণ করে  (YYYY)
getHours() ঘন্টাকে গ্রহণ করে (0-23)
getMilliseconds() মিলি সেকেন্ড কে গ্রহণ করে (0-999)
getMinutes() মিনিটকে গ্রহণ করে (0-59)
getMonth() মাসকে গ্রহণ করে (0-11)
getSeconds() সেকেন্ড কে গ্রহণ করে (0-59)
getTime() সময়কে গ্রহণ করে (মিলিসেকেন্ড জানুয়ারী 1st 1970 থেকে)

 

স্ট্রিং কে সংখ্যায় রূপান্তর

গ্লোবাল পদ্ধতি Number() দিয়ে স্ট্রিংকে সংখ্যায় রূপান্তর করতে পারেন ।

স্ট্রিং নম্বর ধারণকারী (“3.14” ) কে (3.14 ) এ রূপান্তর ।

খালি স্ট্রিং কে 0 তে রূপান্তর ।

অন্যানগৈুলোকে NaN (নম্বর নয়) এ পরিবর্তন ।


Number("3.14")    // returns 3.14
Number(" ")       // returns 0
Number("")        // returns 0
Number("99 88")   // returns NaN

 

আপনি  (নাম্বর মেথড) অ্ধ্যায়ে স্ট্রিং কে সংখ্যায় রূপান্তর করার আরো অনেক মেথড খুজে পাবেন :

পদ্ধতি বর্ণনা
parseFloat একটি স্ট্রিং পার্স করুন এবং একটি ফ্লোটিং পয়েন্ট সংখ্যা ফেরৎ পান
parseInt একটি স্ট্রিং পার্স করুন এবং একটি পূর্ণসংখ্যা ফেরৎ পান

 

ইউনারী + অপারেটর

একটি ভেরিয়েবল (পরিবর্তনশীল নাম্বার) কে সংখ্যায় রূপান্তরের ক্ষেত্রে ইউনারী + অপারেটর ব্যবহার করা যেতে পারে :
উদাহরণ


 var y = "5";      // y is a string
 var x = + y;      // x is a number

 

যদি variable কে রূপান্তরিত করা না যায় তাহলে এটি সংখ্যাই থাকে যার মান হয় NaN (নম্বর নয়):
উদাহরণ


 var y = "John";   // y is a string
 var x = + y;      // x is a number (NaN)

 

Booleans কে নাম্বার এ রূপান্তর

গ্লোবাল পদ্ধতি Number() দিয়ে Booleans কে নাম্বারে রূপান্তর করতে পারেন :


Number(false)     // returns 0
Number(true)      // returns 1

 

তারিখ কে নাম্বারে রূপান্তর

গ্লোবাল পদ্ধতি Number() দিয়ে তারিখকে নাম্বারে রূপান্তর করতে পারেন :


d = new Date();
Number(d)          // returns 1404568027739

 

তারিখের পদ্ধতি toString() ও একই ধরনের কাজ করে ।


d = new Date();
d.getTime()        // returns 1404568027739

 

স্বয়ংক্রিয় রূপান্তর

যখন জাভাস্ক্রিপ্ট একটি “ভুল” ডাটা টাইপ নিয়ে কাজ করার চেষ্টা করে, এটি মানকে “সঠিক” ডাটা টাইপে রূপান্তর করতে চেষ্টা করে।
ফলাফল সবসময় আপনার আশানরূপ হয় না:


5 + null    // returns 5         because null is converted to 0
"5" + null  // returns "5null"   because null is converted to "null"
"5" + 2     // returns 52        because 2 is converted to "2"
"5" - 2     // returns 3         because "5" is converted to 5
"5" * "2"   // returns 10        because "5" and "2" are converted to 5 and 2

 

স্বয়ংক্রিয় স্ট্রিং রূপান্তর

জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবেই ভেরিয়েবল এর toString ফাংশনকে কল করে যখন অবজেক্ট বা ভেরিয়েবল থেকে “output” আশা করেন :


document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 
                                 GMT+0200"

 

সংখ্যা এবং Booleans ও রূপান্তরিত হয়, কিন্তু এবি খুব একটা দৃশ্যমান নয়:


// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"

 

জাভাস্ক্রিপ্ট টাইপ রূপান্তর ছক

এই টেবিল বিভিন্ন প্রকার জাভাস্ক্রিপ্ট মানকে সংখ্যা, স্ট্রিং, এবং বুলিয়ান এ রূপান্তর প্রদর্শন করে :

আদি মান সংখ্যায় রূপান্তরিত স্ট্রিং এ রূপান্তরিত বুলিয়ানে রূপান্তরিত
false 0 “false” false
true 1 “true” true
0 0 “0” false
1 1 “1” true
“0” 0 “0” true
“1” 1 “1” true
NaN NaN “NaN” false
Infinity Infinity “Infinity” true
-Infinity -Infinity “-Infinity” true
“” 0 “” false
“20” 20 “20” true
“twenty” NaN “twenty” true
[ ] 0 “” true
[20] 20 “20” true
[10,20] NaN “10,20” true
[“twenty”] NaN “twenty” true
[“ten”,”twenty”] NaN “ten,twenty” true
function(){} NaN “function(){}” true
{ } NaN “[object Object]” true
null 0 “null” false
undefined NaN “undefined” false

নোট: কোটেশন যুক্ত মান স্ট্রিং নির্দেশ করে।

বোল্ড করা মান (কিছু) প্রোগ্রামার সমর্থন করে না।

 

এইচটিএমএল প্রতিক্রিয়াশীল ওয়েব ডিজাইন (HTML Responsive Web Design)

স্বর্ণা আখতার

 

প্রতিক্রিয়াশীল ওয়েব ডিজাইন এর প্রধান কাজ ই হল আপনার ওয়েব সাইটকে বিভিন্ন ডিভাইস যেমন, মোবাইল বা কম্পিউটার এর লেআউট এর সাথে খাপ খাওয়ানো। এটি আপনার ওয়েব সাইটকে সহজবোধ্য ও সুখপাঠ্য করে গড়ে তোলে।

প্রতিক্রিয়াশীল ওয়েব ডিজাইন লেআউট যেভাবে তৈরি করবেন

প্রতিক্রিয়াশীল ওয়েব ডিজাইন আপনাকে নিজেই অথবা আপনি কিভাবে ফুটিয়ে তুলবেন সেটার উপর নির্ভর করবে।

নিচে একটি উদাহরন দেয়া হল


<!DOCTYPE html>
 <html lang="en-US">
 <head>
 <style>
 .city {
     float: left;
     margin: 5px;
     padding: 15px;
     width: 300px;
     height: 300px;
     border: 1px solid black;
 } 
 </style>
 </head>
 <body>
 
 <h1>W3Schools Demo</h1>
 <h2>Resize this responsive page!</h2>
 
 <div class="city">
   <h2>London</h2>
   <p>London is the capital city of England.</p>
   <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
 </div>
 
 <div class="city">
   <h2>Paris</h2>
   <p>Paris is the capital and most populous city of France.</p>
 </div>


 

বুটস্ট্র্যাপ ব্যবহারের মাধ্যমে

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

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

উদাহরের সাহায্যে দেখানো হল


<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
 
 <div class="container">
 
 <div class="jumbotron">
   <h1>W3Schools Demo</h1> 
   <p>Resize this responsive page!</p> 
 </div>
 
 <div class="row">
   <div class="col-md-4">
     <h2>London</h2>
     <p>London is the capital city of England.</p>
     <p>It is the most populous city in the United Kingdom,
     with a metropolitan area of over 13 million inhabitants.</p>
   </div>
   <div class="col-md-4">
     <h2>Paris</h2>
     <p>Paris is the capital and most populous city of France.</p>
   </div>
   <div class="col-md-4">
     <h2>Tokyo</h2>
     <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
     and the most populous metropolitan area in the world.</p>
   </div>
 </div>
 
 </div>
 
 </body>
 </html>



						
						
						
		

যোগাযোগ ব্যবস্থাপনায় লক্ষণীয় বিষয়সমূহ

To read this article in English please click this link

বড় প্রজেক্টের ক্ষেত্রে যোগাযোগের বিষয়টিও পূর্বপরিকল্পিত হতে হবে এবং কার্যকর ভাবে বাস্তবায়ন করতে হবে। অবস্থার পরিপ্রেক্ষিতে এই পরিকল্পনা পর্যালোচনা এবং পরিবর্তন করা যেতে পারে। সারকথা:-

* যোগাযোগ খুবই সুকৌশল এবং বিচক্ষণতার সাথে করতে হবে।

* সংকলন, প্রেরণ, সংরক্ষণ ও বিতরণ সংক্রান্ত কাজ এবং প্রজেক্টের যাবতীয় রেকর্ড সংরক্ষণ করতে হবে।

* কি ব্যাপারে, কার সাথে, কতটুকু বিরতিতে এবং ঠিক কোন সময়ে যোগাযোগ করা তা আগেই নির্ধারণ করতে হবে।

মাশরুম প্রজেক্ট ম্যানেজমেন্ট:

নির্দিষ্ট ব্যক্তির কাছে সময়মত ঠিক তথ্য প্রেরণ করার চাইতে নিয়মিত বিরতিতে এজেন্টের অগ্রগতি পরিদর্শন করাটাই শ্রেয় যেখানে সবাইকে সবকিছু জানানো হবে না।

যোগাযোগ ব্যবস্থাপনায় কিছু লক্ষণীয় বিষয়ঃ

* যোগাযোগ পরিকল্পনা

* বাস্তবায়ন (তথ্য বিতরণ)

* তদারকি এবং নিয়ন্ত্রন (পারফরম্যান্স রিপোর্ট এবং বিনিয়োগকারীদের সাথে আলোচনা)

উক্ত কাজগুলির মাধ্যমে বিনিয়োগকারীদের সাথে যোগাযোগ করলে তা সংশয় কমাতে সাহায্য করে এবং কর্মীদের উৎসাহিত করে।

প্রজেক্ট ম্যানেজারের কাজ: বেশিরভাগ ক্ষেত্রে যোগাযোগ এমনকি তা মোট সময়ের ৯০ শতাংশ হতে পারে যার অর্ধেক হবে টিমের সদস্যদের সাথে।

আরও কিছু বিষয়ঃ

* পরিকল্পনা (যোগাযোগ পরিকল্পনা)

* ফলাফল (যোগাযোগ ব্যবস্থাপনার পরিকল্পনা)

* বিরতির পরিমাণ

* মাধ্যম/ধরন যেমন ইমেইল, ওয়েব, মিটিং ইত্যাদি

* কোন কোন তথ্য

* কার সাথে

এ পরিকল্পনায় বেশ কিছু বিষয় প্রভাব ফেলে যেমন ব্যবসায়িক পরিবেশ, প্রাতিষ্ঠানিক সম্পত্তি এবং মূল প্রজেক্টের পরিকল্পনা।

প্রয়োজনীয় সরঞ্জামঃ

যোগাযোগের মাধ্যম: যোগাযোগ কিভাবে হবে তা নির্ধারণ করুন। n সংখ্যক লোক n(n1)/2পন্থায় যোগাযোগ করতে পারে। এর মাধ্যমে একটি ছোট দল গঠন করা যেতে পারে। কিছু ক্ষেত্রে অফিসিয়াল চ্যানেলের ব্যবহার গুরুত্বপূর্ণ। বিভিন্ন প্রযুক্তি যেমন ভিডিও কনফারেন্স, নেট মিটিং ব্যবহার করা যেতে পারে।

যোগাযোগ ব্যবস্থার পরিকল্পনা:

তথ্য সমূহ কাকে প্রদান করা হচ্ছে?

কোন কোন তথ্য প্রদান করা হচ্ছে?

কার মাধ্যমে প্রদান করা হচ্ছে?

কোন প্রক্রিয়ায় প্রদান করা হচ্ছে?

কতক্ষণ পর পর?

বাস্তবায়ন(তথ্য প্রদান):

যোগাযোগের আদর্শ উপায়ঃ

* ঠিকভাবে শ্রবণ

* মতামত প্রদান

* পারিভাষিক ভাষা ব্যবহার

যোগাযোগের উপায়:

* নিয়মতান্ত্রিক এবং অনিয়মিত লিখিত পদ্ধতি

* নিয়মতান্ত্রিক এবং অনিয়মিত মৌখিক পদ্ধতি।

তদারকি এবং নিয়ন্ত্রণঃ

দ্রষ্টব্যঃ এখানে প্রজেক্ট ম্যানেজমেন্ট সংক্রান্ত যাবতীয় তথ্য PMI এবং PMBOK অনুযায়ী সংকলিত।

এইচটিএমএল লেআউট (HTML Layout)

Md. Mursedul Islam Sumon

Web Designer

 

এইচটিএমএল লেআউট (HTML Layouts)

বিভিন্ন ওয়েবসাইটে অনেক সময়ই লক্ষ্য করা যায় যে লিখাগুলো কয়েকটি কলামে বিভক্ত করা থাকে। যেমন, ম্যাগাজিন, নিউজপেপার ইত্যাদি।

HTML এ <div> tag এর ব্যবহার করে layout design বা কলামে বিভক্ত করা যায়।

div element ব্যবহার করে প্রায় layout করা হয়, কারন div ব্যবহার করলে একে সহজেই CSS দিয়ে এর অবস্থান ও সবকিছু design করে নেয়া যায়।

নিচের উদাহরণটিতে চারটি div ব্যবহার করে কয়েকটি কলাম তৈরি করা হল-


<body>

<div id=”header”>
<h1>City Gallery</h1>
</div>

<div id=”nav”>
London<br>
Paris<br>
Tokyo<br>
</div>

<div id=”section”>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id=”footer”>
Copyright © W3Schools.com
</div>

</body>



উপরোক্ত html এর CSS part টুকু নিম্নরুপ


<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
 </style>

 

ফলাফলঃ


Table


 

HTML5 ব্যবহার করে ওয়েবসাইট বিন্যাস

HTML5 দিয়ে খুব সুন্দরভাবে ও সহজেই একটা website এর layout তৈরি করা যায়।

HTML5 এর কিছু নতুন Tag ব্যবহার করে সহজেই website এর বিভিন্ন part আলাদা করা যায়।

 

header = এই tag ব্যবহার করে website এর header section কে বুঝানো হয়।
nav = এই tag ব্যবহার করে মেনুর আইটেমগুলোর link করা হয়।
section = এই tag ব্যবহার করে কোন document এর section বুঝানো হয়।
article = এই tag দিয়ে একটি article বুঝানো হয়।
aside = এই tag দিয়ে পেজ এর sidebar বুঝানো হয়।
footer = এই tag দিয়ে পেজ এর সর্বনিম্ন অংশ বা footer part বুঝানো হয়।

নিচের উদাহরনে <header>, <nav>, <section>, এবং <footer> ব্যবহার করে layout তৈরি করা দেখানো হল-


<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright © W3Schools.com
</footer>

</body>


 

 

উপরোক্ত html এর CSS নিম্নে দেয়া হল-


<style>
 header {
     background-color:black;
     color:white;
     text-align:center;
     padding:5px; 
 }
 nav {
     line-height:30px;
     background-color:#eeeeee;
     height:300px;
     width:100px;
     float:left;
     padding:5px; 
 }
 section {
     width:350px;
     float:left;
     padding:10px; 
 }
 footer {
     background-color:black;
     color:white;
     clear:both;
     text-align:center;
     padding:5px; 
 }


টেবিল ব্যবহার করে HTML বিন্যাস

Table tag ব্যবহার করে html layout তৈরি করা যায়।


<body>
 
 <table class="lamp">
 <tr>
   <th>
     <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
   </th>
   <td>
     The table element was not designed to be a layout tool.
   </td>
 </tr>
 </table>
 
 </body>


 

উপরোক্ত html এর CSS নিম্নে দেয়া হল-


<style>
 table.lamp {
     width:100%;
     border:1px solid #d4d4d4;
 }
 table.lamp th, td {
     padding:10px;
 }
 table.lamp th {
     width:40px;
 }
 </style>

 

অ্যাঙ্গুলার জেএস (AngularJS) এবং টুইটার বুটস্ট্র্যাপ

অ্যাঙ্গুলার জেএস (AngularJS) এবং টুইটার বুটস্ট্র্যাপ

মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

 

বুটস্ট্র্যাপ একটি জনপ্রিয় স্টাইল শিট (style sheet) এই অধ্যায়ে AngularJS সঙ্গে কিভাবে এটি ব্যবহার হয় দেখানো হবে।

 

বুটস্ট্র্যাপ
আপনার AngularJS এপ্লিকেশন এ বুটস্ট্র্যাপ অন্তর্ভুক্ত করার জন্য, আপনার <head> এলিমেন্ট এর মধ্যে নিম্নলিখিত লাইনটি যোগ করুন:

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>

আপনি বুটস্ট্র্যাপ অধ্যয়ন করতে চান, আমাদের বুটস্ট্র্যাপ টিউটোরিয়ালে যান.

নীচে একটি সম্পূর্ণ এইচটিএমএল উদাহরণ সহ সকল AngularJS নির্দেশ এবং বুটস্ট্র্যাপ ক্লাস ব্যাখ্যা করা হয়েছে।

 

এইচটিএমএল কোড
<!DOCTYPE html>
<html ng-app=””>
<head>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>

<body ng-controller=”userController”>
<div class=”container”>

<h3>Users</h3>

<table class=”table table-striped”>
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat=”user in users”>
<td>
<button class=”btn” ng-click=”editUser(user.id)”>
<span class=”glyphicon glyphicon-pencil”></span>&nbsp;&nbsp;Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>

<hr>
<button class=”btn btn-success” ng-click=”editUser(‘new’)”>
<span class=”glyphicon glyphicon-user”></span> Create New User
</button>
<hr>

<h3 ng-show=”edit”>Create New User:</h3>
<h3 ng-hide=”edit”>Edit User:</h3>

<form class=”form-horizontal”>
<div class=”form-group”>
<label class=”col-sm-2 control-label”>First Name:</label>
<div class=”col-sm-10″>
<input type=”text” ng-model=”fName” ng-disabled=”!edit” placeholder=”First Name”>
</div>
</div>
<div class=”form-group”>
<label class=”col-sm-2 control-label”>Last Name:</label>
<div class=”col-sm-10″>
<input type=”text” ng-model=”lName” ng-disabled=”!edit” placeholder=”Last Name”>
</div>
</div>
<div class=”form-group”>
<label class=”col-sm-2 control-label”>Password:</label>
<div class=”col-sm-10″>
<input type=”password” ng-model=”passw1″ placeholder=”Password”>
</div>
</div>
<div class=”form-group”>
<label class=”col-sm-2 control-label”>Repeat:</label>
<div class=”col-sm-10″>
<input type=”password” ng-model=”passw2″ placeholder=”Repeat Password”>
</div>
</div>
</form>

<hr>
<button class=”btn btn-success” ng-disabled=”error || incomplete”>
<span class=”glyphicon glyphicon-save”></span> Save Changes
</button>
</div>

<script src = “myUsers.js”></script>
</body>
</html>

 

এটা নিজে চেষ্টা করে দেখুন

ডিরেক্টিভ (Directives) (উপরে ব্যবহৃত) ব্যাখ্যা
AngularJS ডিরেক্টিভ বর্ণনা
<html ng-app ডিফাইন করে (unnamed) এপ্লিকেশন <html> এলিমেন্ট এর জন্য
<body ng-controller একটি কন্ট্রোলার ডিফাইন করে <body> এলিমেন্ট এর জন্য
<tr ng-repeat <tr> এলিমেন্ট রিপিট করে প্রত্যেক ইউজার এর ইউজারগুলোর মধ্যে
<button ng-click editUser() ফাংশনকে কল করে যখন <button> এ ক্লিক করা হয়
<h3 ng-show <h3> এলিমেন্ট প্রদর্শন করে যদি edit = true
<h3 ng-hide <h3> এলিমেন্ট অদৃশ্য করে যদি edit = true
<input ng-model <input> এলিমেন্ট বাধাই করে এপ্লিকেশন এর মধ্যে।
<button ng-disabled <button> এলিমেন্ট নিস্ক্রিয় করে যদি কোন ভূল বা অপরিপূর্ণতা থাকে incomplete = true

________________________________________
বুটস্ট্র্যাপ ক্লাস এ ব্যাখ্যা
এলিমেন্ট বুটস্ট্র্যাপ ক্লাস ডিফাইনস
<div> container একটি কন্টেন্ট কন্টেইনার
<table> table একটি টেবিল
<table> table-striped একটি স্ট্রাইপড টেবিল
<button> btn একটি বাটন
<button> btn-success একটি সফল বাটন
<span> glyphicon একটি গ্লিফ আইকন
<span> glyphicon-pencil একটি পেন্সিল আইকন
<span> glyphicon-user একটি ইউজার আইকন
<span> glyphicon-save একটি সংরক্ষন আইকন
<form> form-horizontal একটি হরিজন্টাল ফরম
<div> form-group একটি ফরম গ্রুপ
<label> control-label একটি কন্ট্রোল লেবেল
<label> col-sm-2 একটি ২ কলাম স্প্যান
<div> col-sm-10 একটি ১০ কলাম স্প্যান

________________________________________
জাভাস্ক্রিপট কোড
function userController($scope) {
$scope.fName = ”;
$scope.lName = ”;
$scope.passw1 = ”;
$scope.passw2 = ”;
$scope.users = [
{id:1, fName:’Hege’, lName:”Pege” },
{id:2, fName:’Kim’, lName:”Pim” },
{id:3, fName:’Sal’, lName:”Smith” },
{id:4, fName:’Jack’, lName:”Jones” },
{id:5, fName:’John’, lName:”Doe” },
{id:6, fName:’Peter’, lName:”Pan” }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;

$scope.editUser = function(id) {
if (id == ‘new’) {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = ”;
$scope.lName = ”;
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};

$scope.$watch(‘passw1’,function() {$scope.test();});
$scope.$watch(‘passw2’,function() {$scope.test();});
$scope.$watch(‘fName’, function() {$scope.test();});
$scope.$watch(‘lName’, function() {$scope.test();});

$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};

}

________________________________________
জাভাস্ক্রিপ্ট কোড এর ব্যাখ্যা
স্কোপ প্রপার্টিজ ব্যবহার করা হয়েছে
$scope.fName মডেল ভেরিয়েবল (ইউজার ফার্স্ট নেম)
$scope.lName মডেল ভেরিয়েবল ((ইউজার লাস্ট নেম)
$scope.passw1 মডেল ভেরিয়েবল (ইউজার পাসওয়ার্ড ১)
$scope.passw2 মডেল ভেরিয়েবল (ইউজার পাসওয়ার্ড ১))
$scope.users মডেল ভেরিয়েবল (অ্যারে অব ইউজার)
$scope.edit সেট true যখন ইউজার ক্রিয়েট ইউজার এ ক্লিক করে.
$scope.error সেট true যদি passw1 passw2 এর মত না হয়
$scope.incomplete সেট true যদি কোন ফিল্ড ফাকা থাকে (length = 0)
$scope.editUser সেট মডেল ভেরিয়েবল
$scope.watch ওয়াচেস মডেল ভেরিয়েবল
$scope.test টেস্ট মডেল ভেরিয়েবল ভূল অথবা অপরিপূর্ণতার জন্য।

আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো

আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো । সাথে সাথে উপাদান গুলোর CSS class পরিবরতন করবো যেমন নতুন css class যোগ করা।
লেখাঃ মোস্তাফিজুর ফিরোজ ।

কেমন আছেন সবাই? আজ আমরা জেকোয়েরি দিয়ে সিএসএস ক্লাস পরিচালনা করা শিখবো ।

জেকোয়েরি দিয়ে খুব সহজে সিএসএস ক্লাস গুলোকে পরিচালনা করা যায় ।

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

১। addClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস যোগ করা যায় ।

২। removeClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস দূরীভূত করা যায় ।

৩। toggleClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করা যায় ।

৪। css() ঃ স্টাইল এট্রিবিউটকে সেট করে থাকে ।

স্টাইলশিট এর উদাহরণঃ
নিচের উদাহরণটি আজ সবখানে ব্যবহার করবো । তাই খুব ভালভাবে খেয়াল করুন ।

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

১। jQuery addClass() Methodঃ
নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর সাথে কিভাবে ক্লাস এট্রিবিউটস যোগ করতে হয় । যখন ক্লাস যোগ করা হয় তখন অবশ্যই আপনি অনেকগুলো এলিমেন্টস একসাথে নির্বাচন করতে পারবেন ।

$(“button”).click(function(){
$(“h1,h2,p”).addClass(“blue”);
$(“div”).addClass(“important”);
});

addClass() method এর মাধ্যমে আপনি একসাথে অনেক গুলো ক্লাস কে নির্দেশনা দিতে পারবেন ।
$(“button”).click(function(){
$(“#div1”).addClass(“important blue”);
});

২। jQuery removeClass() Methodঃ
নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর থেকে কিভাবে ক্লাস এট্রিবিউটসকে দূর করতে হয় ।

$(“button”).click(function(){
$(“h1,h2,p”).removeClass(“blue”);
});

৩। jQuery toggleClass() Methodঃ
নিচের উদাহরণের মাধ্যমে আমরা দেখতে পাবো jQuery toggleClass() Method ব্যবহার করতে হয় । এই মেথড নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করে ।

$(“button”).click(function(){
$(“h1,h2,p”).toggleClass(“blue”);
});

৪। jQuery css() Methodঃ
এই মেথড স্টাইল এট্রিবিউটকে সেট করে থাকে । এটা অনেকভাবে স্টাইল করে থাকে । তাই পরে এটা নিয়ে একটি পোস্ট করবো ।

তাই এই গুলো আপাতত প্র্যাকটিস করতে থাকুন । দেখা হবে পরবর্তী পোস্টে jQuery css() Method নিয়ে । ততক্ষণ আমাদের সাথেই থাকুন ।

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
ওয়েবসাইটঃ www.firoz.me

কি খবর ? কেমন আছেন সবাই? আজকে একটু ঠাণ্ডা বেশি, তাই সবাই মনে হয় লেপের ভিতর থেকে ভালোই আছেন । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখাবো ।

jQuery CSS Classes
জেকোয়েরি মোবাইল তার উপাদান সমূহকে বিভিন্ন ভাবে ডিজাইন করার জন্য সিএসএস ক্লাস ব্যবহার করে থাকে । আজ আমরা তাই সিএসএস ক্লাসের কিছু সাধারণ ব্যবহার দেখাবো ।

Global Classes
এই Global Classes গুলো জেকোয়েরি মোবাইল উইজেটস যেমন বাটন, টুলবার, প্যানেল, টেবিল, লিস্ট প্রভৃতি যোগ করার কাজে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-corner-all
ক্লাসের বর্ণনাঃ উপাদানের গোলাকার কোণা তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-shadow
ক্লাসের বর্ণনাঃ উপাদান সমূহের শ্যাডো মানে ছায়া তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-overlay-shadow
ক্লাসের বর্ণনাঃ মাত্রাতিরিক্ত ছায়া তৈরিতে এটা ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-mini
ক্লাসের বর্ণনাঃ উপাদাঙ্গুলোকে ছোট করতে এটা ব্যবহার করা হয় ।

Button Classes
<a> অথবা <button> উপাদানগুলোকে Global Classes এর সাথে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn
ক্লাসের বর্ণনাঃ বাটনগুলোকে বিভিন্ন স্টাইলে সাজাতে এই <a> উপাদানসমূহকে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-inline
ক্লাসের বর্ণনাঃ বাটন গুলোকে একই সারিতে দেখাতে এটি ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-icon-top
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার উপরে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-right
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার ডান দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-bottom
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার নিচে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-left
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার বাম দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-notext
ক্লাসের বর্ণনাঃ শুমুমাত্র আইকন দেখাবে ।

ক্লাসের নামঃ ui-btn-a|b
ক্লাসের বর্ণনাঃ a এবং b দুইটি ব্যাকগ্রাউণ্ডের কালার দেখাবে । a এর কালার ডিফল্ট থাকে যা হল ধূসর ব্যাকগ্রাউণ্ডের সাথে কালো লেখা । শুধুমাত্র b কালো ব্যাকগ্রাউণ্ডের সাথে সাদা লেখার পরিবর্তন করবে ।

Icon Classes
সকল <a> এবং <button> উপাদানের ক্লাসসমূহ দেয়া হল ।

ক্লাসের নামঃ ui-icon-action
ক্লাসের বর্ণনাঃ অ্যাকশন বাটন ।

ক্লাসের নামঃ ui-icon-alert
ক্লাসের বর্ণনাঃ একটা ত্রিভূজের ভিতর বিস্ময় চিহ্ন ।

ক্লাসের নামঃ ui-icon-audio
ক্লাসের বর্ণনাঃ স্পিকারের চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-l
ক্লাসের বর্ণনাঃ নিচের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-r
ক্লাসের বর্ণনাঃ নিচের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-l
ক্লাসের বর্ণনাঃ উপরের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-r
ক্লাসের বর্ণনাঃ উপরের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-l
ক্লাসের বর্ণনাঃ বাম দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-r
ক্লাসের বর্ণনাঃ ডান দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d
ক্লাসের বর্ণনাঃ নিম্নগামী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-back
ক্লাসের বর্ণনাঃ ব্যাক বাটন ।

ক্লাসের নামঃ ui-icon-bars
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল দাগের বাটন ।

ক্লাসের নামঃ ui-icon-bullets
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল ফোটার বাটন ।

ক্লাসের নামঃ ui-icon-calendar
ক্লাসের বর্ণনাঃ ক্যালেন্ডার বাটন ।

ক্লাসের নামঃ ui-icon-camera
ক্লাসের বর্ণনাঃ ক্যামেরা বাটন ।

ক্লাসের নামঃ ui-icon-carat-d
ক্লাসের বর্ণনাঃ নিম্নগামী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-l
ক্লাসের বর্ণনাঃ বামমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-r
ক্লাসের বর্ণনাঃ ডানমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-check
ক্লাসের বর্ণনাঃ চেক মার্ক ।

ক্লাসের নামঃ ui-icon-clock
ক্লাসের বর্ণনাঃ ঘড়ির আইকন ।

ক্লাসের নামঃ ui-icon-cloud
ক্লাসের বর্ণনাঃ মেঘের আইকন ।

ক্লাসের নামঃ ui-icon-comment
ক্লাসের বর্ণনাঃ কমেন্ট বা ম্যাসেজ বাটন ।

ক্লাসের নামঃ ui-icon-delete
ক্লাসের বর্ণনাঃ ডিলিট বাটন ।

ক্লাসের নামঃ ui-icon-edit
ক্লাসের বর্ণনাঃ এডিট অথবা পেন্সিল আইকন ।

ক্লাসের নামঃ ui-icon-eye
ক্লাসের বর্ণনাঃ চোখের আইকন ।

ক্লাসের নামঃ ui-icon-forbidden
ক্লাসের বর্ণনাঃ নিষিদ্ধ আইকন ।

ক্লাসের নামঃ ui-icon-forward
ক্লাসের বর্ণনাঃ ফরওয়ার্ড আইকন ।

ক্লাসের নামঃ ui-icon-gear
ক্লাসের বর্ণনাঃ সেটিংস বাটন ।

ক্লাসের নামঃ ui-icon-grid
ক্লাসের বর্ণনাঃ গ্রিড চিহ্ন ।

ক্লাসের নামঃ ui-icon-heart
ক্লাসের বর্ণনাঃ হার্ট অথবা লাভ চিহ্ন ।

ক্লাসের নামঃ ui-icon-home
ক্লাসের বর্ণনাঃ হোম বাটন ।

ক্লাসের নামঃ ui-icon-info
ক্লাসের বর্ণনাঃ ইনফরমেশন বাটন ।

ক্লাসের নামঃ ui-icon-location
ক্লাসের বর্ণনাঃ লোকেশন বাটন ।

ক্লাসের নামঃ ui-icon-lock
ক্লাসের বর্ণনাঃ তালার আইকন ।

ক্লাসের নামঃ ui-icon-mail
ক্লাসের বর্ণনাঃ মেইল আইকন ।

ক্লাসের নামঃ ui-icon-minus
ক্লাসের বর্ণনাঃ বিয়োগ আইকন ।

ক্লাসের নামঃ ui-icon-navigation
ক্লাসের বর্ণনাঃ নেভিগেশন আইকন ।

ক্লাসের নামঃ ui-icon-phone
ক্লাসের বর্ণনাঃ টেলিফোন আইকন ।

ক্লাসের নামঃ ui-icon-power
ক্লাসের বর্ণনাঃ পাওয়ার বাটন । বা অন অফ বাটন ।

ক্লাসের নামঃ ui-icon-plus
ক্লাসের বর্ণনাঃ যোগ বাটন ।

ক্লাসের নামঃ ui-icon-recycle
ক্লাসের বর্ণনাঃ রিসাইকেল চিহ্ন ।

ক্লাসের নামঃ ui-icon-refresh
ক্লাসের বর্ণনাঃ রিফ্রেশ বাটন ।

ক্লাসের নামঃ ui-icon-search
ক্লাসের বর্ণনাঃ সার্চ বাটন ।

ক্লাসের নামঃ ui-icon-shop
ক্লাসের বর্ণনাঃ দোকান অথবা ব্যাগের আইকন ।

ক্লাসের নামঃ ui-icon-star
ক্লাসের বর্ণনাঃ তারার চিহ্ন ।

ক্লাসের নামঃ ui-icon-tag
ক্লাসের বর্ণনাঃ ট্যাগ বাটন ।

ক্লাসের নামঃ ui-icon-user
ক্লাসের বর্ণনাঃ ব্যবহারকারী বাটন ।

ক্লাসের নামঃ ui-icon-video
ক্লাসের বর্ণনাঃ ভিডিও বা ক্যামেরা আইকন ।

Theme Classes
জেকোয়েরি মোবাইল সাধারণত ধূসর এবং কালো এই দুই ধরনের থিম সরবরাহ করে থাকে । কিন্তু আপনি আপনার ইচ্ছামত এটা পরিবর্তন করে নিতে পারেন । আপনি (a-z) মত আপনার থিমটি কাস্টোমাইজ করতে পারবেন ।

ক্লাসের নামঃ ui-bar-(a-z)
ক্লাসের বর্ণনাঃ হেডার, ফুটার এবং অন্যান্য বারের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-body-(a-z)
ক্লাসের বর্ণনাঃ কনটেন্ট ব্লক যেমন page content panes , listview items, popups, collapsibles, loader, sliders, এবং panels এর কালার নির্দেশ করে ।

ক্লাসের নামঃ ui-btn-(a-z)
ক্লাসের বর্ণনাঃ বাটন এবং আইকনের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-group-theme-(a-z)
ক্লাসের বর্ণনাঃ গুরুপ ভিত্তিক রঙ নির্দেশ করে দেয় ।

ক্লাসের নামঃ ui-overlay-(a-z)
ক্লাসের বর্ণনাঃ ডায়ালগ, পপ-আপ এবং পেজের উপাদানসমূহের রঙ ঠিক করে দেয় ।

ক্লাসের নামঃ ui-page-theme-(a-z)
ক্লাসের বর্ণনাঃ প্রত্যেক পেজের রঙ নির্দেশ করে ।

Grid Classes
গ্রিডের কলাম গুলো বিন্নভাবে থাকতে পারে। সাধারণত ৫ ধরণের গ্রিড ব্যবহার করা হয়ে থাকে ।

গ্রিড ক্লাসঃ ui-grid-solo
কলামঃ 1
কলামের ব্যাপ্তিঃ 100%
সুসঙ্গত হয়ঃ ui-block-a

গ্রিড ক্লাসঃ ui-grid-a
কলামঃ 2
কলামের ব্যাপ্তিঃ 50% / 50%
সুসঙ্গত হয়ঃ ui-block-a|b

গ্রিড ক্লাসঃ ui-grid-b
কলামঃ 3
কলামের ব্যাপ্তিঃ 33% / 33% / 33%
সুসঙ্গত হয়ঃ ui-block-a|b|c

গ্রিড ক্লাসঃ ui-grid-c
কলামঃ 4
কলামের ব্যাপ্তিঃ 25% / 25% / 25% / 25%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d

গ্রিড ক্লাসঃ ui-grid-d
কলামঃ 5
কলামের ব্যাপ্তিঃ 20% / 20% / 20% / 20% / 20%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d|e

আর এর ভিতরেই কিন্তু আমরা জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখে গেলাম । কোথাও না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।

জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট

জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট
—–
কেউ যখন তার মোবাইল ডিভাইসের অবস্থান (orientation) পরিবর্তন করে আনুভূমিক (horizontal) কিংবা উল্লম্ব (vertical) অবস্থায় নিয়ে আসবে তখন orientationchange ইভেন্ট কাজ করবে।
orientationchange ইভেন্ট ব্যবহার করার জন্য window object এর সাথে ইভেন্টটি সংযুক্ত করে দিতে হবে। যেমন-
$(window).on(“orientationchange”,function(){
alert(“ডিভাইসের অবস্থান পরিবর্তন হয়েছে!”);
});
callback ফাংশনটি একটি আর্গুমেন্ট ধারণ করতে পারে, আর তা হলো event অবজেক্ট; যা মোবাইল ডিভাইসের orientation বা অবস্থা জানায়: “portrait” (অর্থ হচ্ছে মোবাইল ডিভাইস এখন উল্লম্ব অবস্থানে রাখা আছে) কিংবা “landscape” (মোবাইল ডিভাইস এখন আনুভূমিক অবস্থানে রাখা আছে):
উদাহরণ:
$(window).on(“orientationchange”,function(event){
alert(“Orientation is: ” + event.orientation);
});

জেকয়ারি এফেক্ট মেথড

জেকয়ারি এফেক্ট মেথড
নয়ন চন্দ্র সরকার

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

জেকয়ারির অ্যানিমেশন এফেক্ট তৈরি করতে যে পদ্ধতিগুলো ব্যবহার করা হয়, সেগুলো নিচে আলোচনা করা হল।

“animate ( ) মেথডঃ
এই মেথডটা নিদিষ্ট উপাদানে কাস্টম অ্যানিমেশন রান করে।

clearQueue ( ) মেথডঃ
এই মেথড অপেক্ষারত ফাংশনগুলোকে নিদিষ্ট উপাদান গুলো থেকে দূর করতে সাহায্য করে।

Delay( ) মেথডঃ
এই মেথডের মাধ্যমে সকল অপ্পেক্ষারত ফাংশনগুলোর জন্য একটা ডিলে সেট করা হয়।

Dequeue ( ) মেথডঃ
এটা পরবর্তী ফাংশন কে লাইন থেকে বিতারিত করে ফাংশন টা সম্পাদন করে।

FadeIn ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ ইন করে।

Fadeout ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ আউট করে।

fadeTo ( ) মেথডঃ
এই নিয়মটা নিদিষ্ট উপাদানগুলোকে একটা প্রদত্ত অপাছিতিতে ফেইদ ইন বা আউট করে।

fadeToggle ( ) মেথডঃ
এটা ফেইদ ইন এবং আউট এর মধ্যে টগল করে ।

Finish ( ) মেথডঃ
এই মেথডটা সব অপ্পেক্ষারত এনিমেশনগুলোকে নির্দিষ্ট উপাদাগুলথেকে থামতে, দূর করতে অথবা সম্পন্ন করতে সাহায্য করে ।

Hide ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে হাইট করে ।

Queue ( ) মেথডঃ
এটা অপ্পকেক্ষারত ফাংশনগুলোকে নির্দিষ্ট উপদানে দেখায় ।

Show ( ) মেথডঃ
এটা সো করায়

Slidedown ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে স্লাইড দাউন করে ।

Slideup ( ) মেথডঃ
এটা নির্দিষ্ট উপদাঙ্গুলকে স্লাইড আপ করে ।

Stop ( ) মেথডঃ
এটা চলতি অ্যানিমেশন নির্দিষ্ট উপদান থেকে থামতে সাহায্য করে ।
Toggle ( ) মেথডঃ
এটা hide() এবং show() এর মধ্যে তগল করে

jQuery Mobile Scrollstart

jQuery Mobile Scrollstart
——————————–
অনুবাদক: ফয়সাল রকি
——————————-

যখন কোনো ব্যবহারকারী কোনো page scroll করা শুরু করে তখন scrollstart ইভেন্টটি কাজ করতে শুরু করে।
উদাহরণ:
$(document).on(“scrollstart”,function(){
alert(“Started scrolling!”);
});

লক্ষ্যণীয় বিষয়: iOS ব্যবহৃত device গুলো page scroll এর সময় DOM manipulation কে freeze করে দেয়; সুতরাং যখন কোনো ব্যবহারকারী কোনো page scroll করে তখন কোনো কিছু পরিবর্তন করা সম্ভব হয় না।

jQuery Mobile Scrollstop
যখন কোনো ব্যবহারকারী কোনো page scroll করা বন্ধ করে তখন Scrollstop ইভেন্টটি কাজ শুরু করে।
উদাহরণ:
$(document).on(“scrollstop”,function(){
alert(“Stopped scrolling!”);
});