Mar 21

জাভাস্ক্রিপ্ট সিনট্যাক্স (JavaScript Syntax)

জাভাস্ক্রিপ্ট সিনট্যাক্স

জাভাস্ক্রিপ্ট সিনট্যাক্স হলো কিছু নিয়মের সমষ্টি, এই প্রোগ্রাম কিভাবে কাজ করে সিনট্যাক্সের মাধ্যমে তাই নির্দেশ করা হয়।

 

জাভাস্ক্রিপ্ট প্রোগ্রাম

কম্পিউটার প্রোগ্রাম হলো কম্পিউটারের মাধ্যমে কোন কাজ সম্পাদন করার জন্য প্রয়োজনীয় নির্দেশসমূহের লিস্ট। প্রোগ্রামিং লেঙ্গুয়েজের এ সকল নির্দেশসমূহকে বলা হয় স্টেটমেন্ট।
জাভাস্ক্রিপ্টও একটি প্রোগ্রামিং লেঙ্গুয়েজ।
জাভাস্ক্রিপ্টের স্টেটমেন্টগুলোকে সেমিকোলন দ্বারা একটি থেকে অন্যটিকে আলাদা করা হয়।
উদাহরণ:
var x = 5;
var y = 6;
var z = x + y;

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

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

জাভাস্ক্রিপ্ট ভেলু

জাভাস্ক্রিপ্টে দুই ধরনের ভেলু রয়েছে: ফিক্সড ভেলু এবং ভেরিয়েবল ভেলু।
ফিক্সড ভেলুকে লিটারেল বলা হয় এবং ভেরিযবল ভেলুকে ভেরিয়েবল বলা হয়।

জাভাস্ক্রিপ্ট লিটারেলস

ফিক্সড ভেলু লেখার সবচেয়ে গুরুত্বপূর্ণ নিয়মটি হচ্ছে:
দশমিকসহ অথবা দশমিক ছাড়া শুধু নাম্বার লিখা।
10.50
1001
স্ট্রিংকে ডাবল কোটেশন অথবা সিঙ্গেল কোটেশনের মধ্যে লেখা।
“John Doe”
‘John Doe’
এক্সপ্রেসনে শুধুমাত্র ফিক্সড ভেলু ব্যবহার করা।
5 + 6
5 * 10

জাভাস্ক্রিপ্ট ভেরিযবল

প্রোগ্রামিং লেঙ্গুয়েজে ডাটাকে স্টোর করার জন্য ভেরিযবল ব্যবহার করা হয়।
জাভাস্ক্রিপ্টে ভেরিযবলকে ডিফাইন করার জন্য var কীওয়ার্ড ব্যবহার করা হয়।
ভেরিযবলে ভেলু এসাইন করার জন্য সমান (=) চিহ্ন ব্যবহার করা হয়।
নিচের উদাহরণে x কে ভেরিযবল হিসেবে ডিফাইন করা হয়েছে এবং পরে x ভেরিযবলে ভেলু 6 এসাইন করা হয়েছে।
var x;
x = 6;

জাভাস্ক্রিপ্ট অপারেটর

কোনো ভেলুকে ভেরিযবলে এসাইন করার জন্য জাভাস্ক্রিপ্ট এসাইনমেন্ট অপারেটর ব্যবহার করে।
var x = 5;
var y = 6;
ভেলুর হিসাব করার জন্য জাভাস্ক্রিপ্ট এরেথমেটিক অপারেটর ব্যবহার করে।
(5 + 6) * 10

জাভাস্ক্রিপ্ট কীওয়ার্ডস

কি ধরনের কাজ সম্পাদন করতে হবে তা জাভাস্ক্রিপ্ট কীওয়ার্ডসের মাধ্যমে ডিফাইন করা হয়।
var কীওয়ার্ডের মাধ্যমে নতুন ভেরিযবল তৈরির নির্দেশনা দেয়া হয়।
var x = 5 + 6;
var y = x * 10

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

জাভাস্ক্রিপ্টের সকল স্টেটমেন্টই সম্পাদিত হয় না। // এর পরের কোড অথবা /* এবং */ এর ভেতরের কোডগুলো কমেন্ট হিসেবে নির্ধারিত হয়। যে কোনো কমেন্টকে বাতিল বলে গন্য করা হয় এবং তা সম্পাদিত হয় না।
var x = 5; // I will be executed
// var x = 6; I will NOT be executed

জাভাস্ক্রিপ্ট একটি কেস সেনসেটিভ লেঙ্গুয়েজ

জাভাস্ক্রিপ্টের সকল আইডেনটিফায়ার কেস সেনসেটিভ। lastName এবং lastname এই ভেরিযবল দুটি সম্পূর্ণ আলাদা।
lastName = “Doe”;
lastname = “Peterson”;
জাভাস্ক্রিপ্ট কখনোই কীওয়ার্ড var এর পরিবর্তে VAR অথবা Var কে গ্রহণ করবে না।

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

জাভাস্ক্রিপ্ট ইউনিকোড কারেক্টার সেট ব্যবহার করে যার মধ্যে পৃথিবীর সকল কারেক্টার, পানচুয়েশন, সিম্বল রয়েছে।

Mar 21

জাভাস্ক্রিপ্ট ভেরিয়েবল (JavaScript Variables)

জাবাস্ক্রিপ্ট ভেরিয়েবল

মোঃ রফিকুল ইসলপাম

 

জাবাস্ক্রিপ্ট ভেরিইয়েবল হচ্ছে তথ্য্যের মান সংরক্ষণের জন্য একটি কনটেইনার ।

ভেরিয়েবলস কে নিচে x, y, z  এর সাহায্যে উদাহরণ হিসাবে দেয়া হল ।

Var x = 5;

Var y = 6;

Var z = x+y;

 

উপরের উদাহরণে যাহা বুঝায় তা হলঃ-

X এর মান হচ্ছে 5

Y এর মান হচ্ছে 6

Z এর  মান হচ্ছে 11

 

বীজগণিতের মত

নিচের উদাহরণে ভেরিয়েবল হচ্ছেঃ price1, price2 এবং total

Var  price1 = 5;

Var price2 = 6;

Var total = price1+ price2;

 

প্রোগ্রামিংটা হচ্ছে প্রায় বীজগনিতের মত। আমরা ভেরিয়েবল ব্যবহার করি (যেমন price1 এর মত) মূল্য  নির্ধারণের জন্য ।

প্রোগ্রামিংটা হচ্ছে প্রায় বীজগনিতের মত। আমরা এক্সপ্রেশনে ( যেমন total=price1+price2) এ ভেরিয়েবল ব্যবহার করি ।

 

জাভাস্ক্রিপ্ট শনাক্তকারী JavaScript Identifiers

সকল জাভস্ক্রিপ্ট ভেরিয়েবলকে অবশ্যিই অনন্য নাম দ্বারা চিহ্নিত করতে হবে।

এই অনন্য নামগুলোকে বলা হয় আইডেন্টিফায়ার (শনাক্তকারী)

আইডেন্টিফায়ার ছোট নাম দ্বারা (যেমন x এবং y) অথবা বিস্তারিতভাবে (যেমন age, sum, totalVolume) চিহ্নিত করা যেতে পারে।

ভেরিয়েবল এর নামের কাঠামোর সাধারণ নিয়ম হচ্ছে (অনন্য আইডেন্টিফায়ার):

  • নামে অক্ষর, সংখ্যা, আন্ডারস্কোর(_), এবং ডলার ($) এর চিহ্ন ব্যবহার করা যেতে পারে ।
  • নাম অবশ্যই অক্ষর দ্বারা শুরু করতে হবে।
  • নাম $ এবং _ চিহ্ন দ্বারাও শুরু করা যেতে পারে । (কিন্তু আমরা এই টিউটোরিয়াল এ এগুলো ব্যবহার করিনি।)
  • নাম কেস সংবেদনশীল (y এবং Y একই ভেরিয়েবল নয়)
  • সংরক্ষিত শব্দ (যেমন জাভাস্ক্রিপ্ট কীওয়ার্ড) নাম হিসাবে ব্যবহার করা যাবে না।

 

অ্যাসাইনমেন্ট অপারেটর

জাভাস্ক্রিপ্ট এ সমান চিহ্ন (=) হচ্ছে অ্যাসাইনমেন্ট অপারেটর, সমান সমান (equal to) অপারেটর নয়।

এটি বীজগণিতের নিয়ম মেনে চলে না। নিচের উদাহরণটি বীজগণিতে কোন অর্থ বহন করে না।

x = x + 5

জাভাস্ক্রিপ্টে এটি যথাযথ অর্থ বহন করে: এটি x এর মান x + 5 নির্ধারণ করে ।

(এটি x + 5 এর মান নির্ণয় করে এবং x এর স্থলে উক্ত মান বসায়। ফলে x এর মান 5 বৃদ্ধি পেয়েছে।)

নোট: “সমান সমান” (equal to) অপারেটর লেখার জন্য জাভাস্ক্রিপ্টে == ব্যবহার করা হয়।

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

জাভাস্ক্রিপ্ট ভেরিয়েবল সংখ্যা যেমন 100 এবং টেক্সট যেমন “John Doe” ধারণ করতে পারে।

প্রোগ্রামিং এ টেক্সট এর মানকে টেক্সট স্ট্রিং বলা হয়।

জাভাস্ক্রিপ্ট অনেক ধরণের ডেটা পরিচালনা করতে পারে। কিন্তু এখনকার মত সংখ্যা এবং স্ট্রিং নিয়ে ভাবুন।

স্ট্রিং ডবল বা সিঙ্গেল কোটেশন এর ভিতরে লিখা হয়। সংখ্যা লিখতে কোন কোটেশন লাগে না।

যদি আপনি কোন সংখ্যার দুপাশে কোটেশন দেন তাহলে এটি স্ট্রিং হিসেবে বিবেচিত হবে।

উদাহরণ

var pi = 3.14;
var person = “John Doe”;
var answer = ‘Yes I am!’;

 

 

জাভাস্ক্রিপ্ট ভেরিয়েবল ঘোষণা (তৈরি) করা

জাভাস্ক্রিপ্ট এ ভেরিয়েবল তৈরি করাকে বলা হয় ভেরিয়েবল ডিক্লেয়ার করা।

var কীওয়ার্ড এর সাহায্যে জাবাস্ক্রিপ্টে ভেরিয়েবল ডিক্লেয়ার করা যায়:

var carName;

ডিক্লিয়ারেশন করার পর ভেরিয়েবলটি খালি অবস্থায় থাকে (এর কোন মান নেই)
ভেরিয়েবল এর মান নির্ধারণের জন্য সমান চিহ্ন ব্যবহার করতে হয়:

carName = “Volvo”;

আপনি ভেরিয়েবল ডিক্লেয়ার করার সময়ও মান নির্ধারণ করে দিতে পারেন:

var carName = “Volvo”;

নিচের উদাহরণে আমরা একটি ভেরিয়েবল তৈরি করেছি এবং এর মান “Volvo” নির্ধারণ করে দিয়েছি।
এরপর id=”demo” এর মাধ্যমে একটি এইচটিএমএল এর প্যারাগ্রাফের ভিতরে এর মান প্রদর্শন করেছি।

<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

 

নোট: ভাল প্রোগ্রামিং অনুশীলন হলো সকল ভেরিয়েবল স্ক্রিপ্ট এর শুরুতে ডিক্লেয়ার করা।

 

একটি স্টেটমেন্ট, অনেকগুলো ভেরিয়েবল

আপনি একটি স্টেটমেন্ট এর মধ্যে অনেকগুলো ভেরিয়েবল ডিক্লেয়ার করতে পারেন।

স্টেটমেন্টটি var দিয়ে শুরু করুন এবং ভেরিয়েবলগুলো কমা দিয়ে পৃথক করুন:

var person = “John Doe”, carName = “Volvo”, price = 200;

ডিক্লেয়ারেশন একাধিক লাইনে ভেঙ্গেও লেখা যেতে পারে:

var person = “John Doe”,
carName = “Volvo”,
price = 200;

মান = অনির্দিষ্ট

কম্পিউটার প্রোগ্রাম এ প্রায়শই মান ছাড়াই ভেরিয়েবল ডিক্লেয়ার করা হয়। এই মান এমনকিছু যা নির্ণয় করে পাওয়া যাবে বা এমনকিছু যা পরবর্তীতে নির্ধারণ করে দেয়া হবে, যেমন ব্যবহারকারীর ইনপুট।

মান ব্যতীত কোন ভেরিয়েবল ডিক্লেয়ার করলে তা অনির্দিষ্ট (undefined) হিসেবে থাকে।

স্টেটমেন্টটি কার্যেপরিণত করার পর carName ভেরিয়েবলটির মান অনির্দিষ্ট অবস্থায় আছে:

var carName;

 

 

জাভাস্ক্রিপ্ট ভেরিয়েবল পূণ-ডিক্লেয়ার করা

যদি আপনি কোন ভেরিয়েবলকে পুণ-ডিক্লেয়ার করেন তাহলে এর মান অপরিবর্তিত অবস্থায় থোকে।
স্টেটমেন্টটি কার্যে পরিণত করার পরও carName ভেরিয়েবলটির মান এখনও “Volvo” ই আছে।
যেমন:

var carName = “Volvo”;
var carName;

গাণিতিক জাভাস্ক্রিপ্ট

বীজগণিতিক নিয়ম অনুসারে জাভাস্ক্রিপ্ট ভেরিয়েবল দিয়ে = এবং + এর মতো অপারেটর দিয়ে গাণিতিক কাজগুলো করা যায়:

var x = 5 + 2 + 3;

আপনি স্ট্রিংও ব্যবহার করতে পারেন, কিন্তু সেগুলো শৃঙ্খলাবদ্ধ হতে হবে (added end-to-end)।

 

Mar 21

এইচটিএমএল এর কোটেশন (HTML Quotation and Citation Elements)

HTML Quotation and Citation Elements

শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467

 

এইচটিএমএল এর কোটেশন (HTML Quotation and Citation Elements)

 

এইচটিএমএল <q> সংক্ষিপ্ত উদ্ধৃতি এর জন্য

সংক্ষিপ্ত উদ্ধৃতি এর জন্য এর জন্য <q> এলিমেন্ট ব্যবহার করা হয়। ব্রাউজার নিজে নিজে এই উদ্ধৃতির চিহ্ন বসিয়ে দেয়।

উদাহরণঃ

<p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q></p>


ফলাফলঃ

WWF’s goal is to: Build a future where people live in harmony with nature.

 

এইচটিএমএল <blockquote> বড় উদ্ধৃতি এর জন্য

বড় উদ্ধৃতর জন্য <blockquote> ব্যবহার করা হয়। ব্রাউজার সাধারণত <blockquote> এর ভিতরের অংশ প্রদর্শন করে।

উদাহরণ

<p>Here is a quote from WWF’s website:</p>
<blockquote cite=“http://www.worldwildlife.org/who/index.html”>
For 50 years, WWF has been protecting the future of nature.
The world’s leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

ফলাফলঃ

Here is a quote from WWF’s website:

For 50 years, WWF has been protecting the future of nature.
The world’s leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.

 

সংক্ষিপ্ত রূপ প্রকাশের জন্য এইচটিএমএল <abbr> এর ব্যবহার

কোন কিছুর সংক্ষিপ্ত রূপ প্রকাশ করার জন্য এইচটিএমএল এর <abbr> ব্যবহার করা হয়। ব্রাউজারে উক্ত আন্ডার লাইন করা শব্দ/শব্দসমষ্টি এর উপর মাউস পয়েন্টার নিলে উক্ত শব্দ/শব্দসমষ্টিি এর সম্পর্কিত বিস্তারিত তথ্য প্রদান করে। ফলে এটি ব্রাউজার, অনুবাদ এবং search engine এর ক্ষেত্রে গুরুত্তপূর্ণ তথ্য দেয়।

উদাহরণ

<p>The <abbr title=“World Health Organization”>WHO</abbr> was founded in 1948.</p>

 

ফলাফলঃ

The WHO was founded in 1948.

 

যোগাযোগ এর ঠিকানা প্রকাশে এইচটিএমএল <address>

কোন আর্টিকেল এর মালিক এর যোগাযোগ এর তথ্য দেওয়ার ক্ষেত্রে আমরা <address> ব্যবহার করব। সাধারনত এটি ইতালিক আকারে দেখায়। প্রায় প্রত্যেক ব্রাউজার কোন লেখার শুরুতে এবং শেষে লাইন ব্রেক যুক্ত করে

উদাহরণঃ

<address>

Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

ফলাফলঃ
Written by Jon Doe.Visit us at:Example.comBox 564, DisneylandUSA

 

কাজের শিরোনাম লেখার জন্য <cite>

কোন কাজের শিরোনাম দেওয়ার ক্ষেত্রে আমরা <cite> ব্যবহার করব। প্রায় প্রত্যেক ব্রাউজার সাধারনভাবে এটিকে ইতালিক এ প্রদর্শন করে।

উদাহরণ

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

 

ফলাফলঃ

The Scream by Edward Munch. Painted in 1893.

 

এইচটিএমএল <bdo>

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

উদাহরণঃ

<bdo dir=“rtl”>This text will be written from right to left</bdo>

 

ফলাফলঃ

This text will be written from right to left

 

 

এইচটিএমএল উদ্ধৃতি, তলব এবং ডেফিনিশন এলিমেন্ট এর নাম এবং তাদের বর্ণনা নিচে দেওয়া হলঃ
ট্যাগ বর্ণনা
<abbr> সংক্ষিপ্ত রূপ বুঝায়
<address> কোন ডকুমেন্ট এর লেখকের যোগাযোগের ঠিকানা প্রকাশ করতে ব্যবহৃত হয়
<bdo> টেক্সট এর অভিমুখ পরিবর্তন করার জন্য
<blockquote> কটেশন মার্ক যুক্ত অংশ যা অন্য কোন উৎস থেকে এসেছে
<dfn> কোন শব্দের সংজ্ঞা
<q> সংক্ষিপ্ত ইনলাইন কোটেশন এর ক্ষেত্রে।
<cite> কোন কাজের শিরোনাম।

 

 

 

Mar 20

পি এইচ পি ৫ সিন্ট্যাক্স (PHP 5 Syntax)

পিএইচপি হলো একটি প্রোগ্রামিং ল্যাগুয়েজ যা ওয়েব ডেভেলপমেন্ট এর জন্য বহুল ব্যবহৃত।

পিএইচপি কোড এর প্রতিটি অংশ < ?php চিহ্ন দিয়ে শুরু এবং ?> চিহ্ন দিয়ে শেষ হবে।
এবার আপনার কোড এডিটর (নোটপ্যাড/ড্রিময়েভার বা আপনি যা ব্যাবহার করেন) খুলুন এবং নিচের মত লিখুনঃ

< ?php
 // PHP code goes here
 ?>

 

 

পিএইচপি কোড কে কাজ করাতে অবশ্যই ফাইলটি সেভ করার সময় .php এক্সটেনশন দিয়ে সেভ করতে হবে। যদি .html থাকে তাহলে পিএইচপি কোড execute হবেনা।

এবার তাহলে ছোট একটা কোড লেখা যাক।

<!DOCTYPE html>
 <html>
 <body>
 
 <h1>My first PHP page</h1>
 
 <?php
 echo "Hello World!";
 ?>
 
 </body>
 </html>

 
উপরে লক্ষ্য করুন echo নামে একটা ফাংশন ব্যবহার করা হয়েছে যেটা দিয়ে php তে কোনো লেখা প্রদর্শন করানো হয়। তারপর লক্ষ্য করুন “;” সেমিকোলন চিহ্ন ব্যবহার করা হয়েছে। এটা দিয়ে পিএইচপি-তে কোনো লাইন শেষ বুঝনো হয়। অর্থাৎ কোনো লাইনের শেষে ; দিয়ে সেই লাইনের এক্সিকিউশন বন্ধ করা হয়। উদাহরণঃ ” Hello World!”

PHP তে কমেন্ট

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

উদাহরণঃ

<!DOCTYPE html>
 <html>
 <body>
 
 <?php
 // This is a single-line comment
 
 # This is also a single-line comment
 
 /*
 This is a multiple-lines comment block
 that spans over multiple
 lines
 */
 
 // You can also use comments to leave out parts of a code line
 $x = 5 /* + 15 */ + 5;
 echo $x;
 ?>
 
 </body>
 </html>

 

single line comment – // এই চিহ্ন দ্বারা।
এখানে // এই চিহ্ন এর পরের This is single line comment এই লেখাটি ব্রাউজার প্রদর্শন করবে না। কারণ এইটা কমেন্ট এর মধ্যে লেখা

multi-line comment – /* */
এখানে # এর পরের লেখাগুলোও ব্রাউজার দেখাবে না। কারণ এটাও একটা কমেন্ট। এটাকে বলা হয় ইউনিক্সের শেল স্টাইল মন্তব্য। এই স্টাইলটা বেশি ব্যবহৃত হয় কোনো পিএইচপি কনফিগারেশন বা মান সম্পর্কিত মন্তব্য যোগ করতে।

Mar 20

এইচটিএমএল এর টেক্সট ফরমেটিং (HTML Text Formatting Elements)

HTML Text Formatting Elements

শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467

এইচটিএমএল ফরম্যাটিং elements (HTML Formatting Element)

গত অধ্যায়ে আপনারা জেনেছেন, HTML Style Attribute দ্বারা কিভাবে HTML Style কে পরিবর্তন করা যায়।

এ অধ্যায়ে আমরা HTML Formatting Element সম্পর্কে জানব। নিম্নে HTML Text  Formatting  Elements গুলোকে উদাহরণসহ তুলে ধরা হল-

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

যেমন আমরা বোল্ড এবং ইতালিক টেক্সট পাওয়ার জন্য ব্যবহার করব <b> এবং <i>। ফরম্যাটিং উপাদান দ্বারা কি ধরনের টেক্সট হতে পারে তা নিচে দেওয়া হল

  • Bold text
  • Important text
  • Italic text
  • Emphasized text
  • Marked text
  • Small text
  • Deleted text
  • Inserted text
  • Subscripts
  • Superscripts

 

এইচটিএমএল Bold এবং strong ফরম্যাট এর উদাহরণ

<b> এলিমেন্ট Text কে বোল্ড করে, Text কে কোন বিশেষ গুরুত্ব প্রদান করে না।

উদাহরণঃ

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>

 

ফলাফলঃ

This text is normal.

This text is bold.

 

এইচটিএমএল এর <strong> এলিমেন্ট strong টেক্সট ডিফাইন করে যা শব্দ বা বাক্যটিকে বিশেষ গুরুত্ব প্রদান করে।

উদাহরণঃ

<p><strong>This text is strong</strong>.</p>

 

ফলাফলঃ

This text is strong.

 

 

এইচটিএমএল italic এবং emphasized ফরম্যাট

এইচটিএমএল এ <i> উপাদান দিয়ে ইতালিক টেক্সট ডিসপ্লে করা হয় কোন অতিরিক্ত গুরুত্ত প্রদান করা ব্যতীত।

উদাহরণঃ

<p><i>This text is italic</i>.</p>

 

ফলাফলঃ

This text is italic.

 

গুরুত্ব সহকারে emphasized টেক্সট দেখানোর জন্য <em> উপাদান ব্যবহার করা হয়

উদাহরণঃ

<p><em>This text is emphasized</em>.</p>

 

ফলাফলঃ

This text is emphasized.

 

দ্রষ্টব্য: ব্রাউজার গুলো <strong> কে <b> এবং <em> কে <i> আকারে ডিসপ্লে করে
যদিও এই ট্যাগ গুলোর মধ্যে অর্থগত ভিন্নতা রয়েছেঃ এখানে <b> এবং <i> বোল্ড এবং ইতালিক টেক্সট বুঝায় কিন্ত <strong> এবং <em> ট্যাগ বুঝায় যে টেক্সগুলো গুরুত্বপূর্ণ।

 

 এইচটিএমএল small ফরম্যাটিং

<small> ট্যাগ ব্যবহার করে এইচটিএমএল এ ছোট আকারের লেখা দেখানো যায়

উদাহরণ

<h2>HTML <small>Small</small> Formatting</h2>

 

ফলাফলঃ

HTML Small Formatting

 

 

এইচটিএমএল marked ফরম্যাটিং:

হাইলাইট করা কোন টেক্সট ডিসপ্লে করার জন্য ব্যবহার করা হয় <mark> ট্যাগ

উদাহরণ

<h2>HTML <mark>Marked</mark> Formatting</h2>

 

ফলাফলঃ

HTML Marked Formatting

 

 

এইচটিএমএল deleted ফরম্যাটিং

কোন টেক্সট কে বাদ দেয়া বা মুছে ফেলা হয়েছে বুঝাতে টেক্সট এর গায়ে কাটা চিহ্ন দেখানোর জন্য <del> ট্যাগ ব্যবহার করা হয় ।

উদাহরণ

<p>My favorite color is <del>blue</del> red.</p>

 

ফলাফলঃ

My favorite color is blue red.

 

এইচটিএমএল inserted ফরম্যাটিং

কোন নতুন টেক্সট যুক্ত করা হয়েছে বূঝাতে টেক্সট এর নিচে দাগ দেখানোর জন্য আমরা <ins> ট্যাগ ব্যবহার করা হয়।

উদাহরণ

<p>My favorite <ins>color</ins> is red.</p>

 

ফলাফল

My favorite color is red.

 

এইচটিএমএল subscripts ফরম্যাটিং

সাধারন লাইনের নিচে কোন টেক্সট কে ডিসপ্লে করার জন্য আমরা <sub> ট্যাগটি ব্যবহার করব

উদাহরণ

<p>This is <sub>subscripted</sub> text.</p>

 

ফলাফলঃ

This is subscripted text.

 

 

এইচটিএমএল superscripts ফরম্যাটিং

সাধারন লাইনের উপরে কোন টেক্সট কে দেখানোর জন্য আমরা <sup> এই ট্যাগ টি ব্যবহার করা হয়

উদাহরণ

<p>This is <sup>superscripted</sup> text.</p>

 

ফলাফলঃ

This is superscripted text.

 

 

এইচটিএমএল এর টেক্সট ফরম্যাটিং এর জন্য ট্যাগ গুলো নিচে পর্যায় ক্রমে দেখানো হলঃ

 

Tag Description (বর্ণনা)
<b> কোন text কে bold করতে এ tag ব্যবহার করা হয়।
<strong> গুরুত্বপূর্ণ Text কে তুলে ধরতে এই tag ব্যবহৃত হয়।
<i> কোন text কে italic করতে এই tag ব্যবহৃত হয়।
<em> Emphasized  text কে তুলে ধরতে এটি ব্যবহৃত হয়।
<small> ছোট কোন Text কে তুলে ধরা এই tag এর দ্বারা।
<u> Text কে underline করতে একে ব্যবহার করা হয়।
<mark> কোন text কে হাইলাইট করতে <mark> tag ব্যবহার করা হয়।
<del> Text কে remove করতে এই tag ব্যবহৃত হয়।
<ins> কোন text কে add করতে এটি ব্যবহৃত হয়।
<sub> Subscripted  text কে চিহ্নিত করতে এই element ব্যবহৃত হয়।
<sup> Superscripted  text কে চিহ্নিত করতে এই element ব্যবহৃত হয়।

 

Mar 19

পি এইচ পি ৫ ইকো এবং প্রিন্ট স্ট্যাটমেন্ট (PHP 5 echo and print Statements)

শরিফুল ইসলাম
Job category-Php Coder

 

Php তে ফলাফল পাওয়ার জন্য আমাদের echo বা print ব্যবহার করতে হয়। পিএইচপি এর প্রায় সব উদাহরন এ print বা echo এর ব্যবহার দেখতে পাওয়া যায়। কমবেশি print এবং echo এর ফাংশন প্রায় একই। তবে print এর তুলনায় echo একটু তারাতারি কাজ করে।
Echo statement ব্যবহার করে পিএইচপি তে একটি উদাহরন দেখা যাক

<?php
 echo "<h2>PHP is Fun!</h2>";
 echo "Hello world!<br>";
 echo "I'm about to learn PHP!<br>";
 echo "This ", "string ", "was ", "made ", "with multiple parameters.";
 ?>

 

এটি যদি রান করি তাহলে ফলাফল দেখা যাবে

PHP is Fun!

Hello world!
I’m about to learn PHP!
This string was made with multiple parameters.

 

Print statement ব্যবহার করে পিএইচপি তে যদি উদাহরন দেখি

<?php
 print "<h2>PHP is Fun!</h2>";
 print "Hello world!<br>";
 print "I'm about to learn PHP!";
 ?>

 

এটা যদি রান করি তাহলে ফলাফল হবে

PHP is Fun!

Hello world!
I’m about to learn PHP!

 

Mar 19

এইচটিএমএল এর স্টাইল (HTML Styles)

এইচটিএমএল এর স্টাইল (HTML Styles)

নাম-শরিফুল ইসলাম
Job category-PHP Coder
Email-bappiislam1988@gmail.com
Mob-01722806467
বিষয়- HTML Styles

এইচটিএমএল স্টাইল

প্রত্যেকটি এইচটিএমএল উপাদানের জন্য একটি ডিফল্ট বা নির্দিষ্ট স্টাইল থাকে পিছনের কালার বা ব্যাকগ্রাউন্ড কালার সাদা এবং টেক্সট এর কালার কালো। স্টাইল attribute এর মাধ্যমে আমরা এই ডিফল্ট কালার কে পরিবর্তন করতে পারি। নিচের উদাহরণ এ ব্যাকগ্রাউন্ড কালার ডিফল্ট সাদা থেকে light gray কালার এ পরিবর্তনকরা হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<body style=”background-color:lightgrey”>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>
</html>

 

This is a heading

This is a paragraph.

Bgcolor attribute পুরাতন এইচটিএমএল ভার্সন এ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না

এইচটিএমএল স্টাইল attribute

এইচটিএমএল স্টাইল attribute নিম্নোক্ত syntax মেনে চলে

style=”property:value”

এই প্রপার্টি হল সিএসএস এর প্রপার্টি এবং ভ্যালু হল সিএসএস এর ভ্যালু।

 

এইচটিএমএল টেক্সট কালার

এইচটিএমএল এর টেক্সট কালার পরিবর্তন করার জন্য color প্রপার্টি ব্যবহার করা হয়।
উদাহরণ

<body>
<h1 style=”color:blue”>This is a heading
<p style=”color:red”>This is a paragraph.</p>
</body>

 

ফলাফল

This is a heading

This is a paragraph.

 

এইচটিএমএল ফন্টস

Font-family প্রপার্টি দ্বারা ফন্টের ধরন পরিবর্তন করা হয়।
উদাহরণ

<body>
<h1 style=”font-family:verdana”>This is a heading</h1>
<p style=”font-family:courier”>This is a paragraph.</p>
</body>

 

 

ফলাফল

This is a heading

This is a paragraph.

পুরাতন এইচটিএমএল এ <font> ট্যাগ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না।

 

এইচটিএমএল টেক্সট সাইজ

Font-size প্রপার্টি দ্বারা টেক্সট এর আকার পরিবর্তন করা হয়।
উদাহরণ

<body>
<h1 style=”font-size:300%”>This is a heading</h1>
<p style=”font-size:160%”>This is a paragraph.</p>
</body>

 

ফলাফল

This is a heading

This is a paragraph.

 

এইচটিএমএল টেক্সট alignment

Text-align প্রপার্টি দ্বারা টেক্সট horizontal ভাবে কোন দিকে অবস্থান করবে তা নির্দেশ দেওয়া হয়
উদাহরণ

<body>
<h1 style=”text-align:center”>Centered Heading</h1>
<p>This is a paragraph.</p>
</body>

 

 

ফলাফল

 

Centered Heading

This is a paragraph.

 

<center> ট্যাগ পুরাতন এইচটিএমএল ভার্সন এ কাজ করে নতুন এইচটিএমএল এ কাজ করে না।

 

একনজরে প্রপার্টি গুলো

• স্টাইল attribute এর ব্যবহার

• background-color এর ব্যবহার

• color এর সাহায্যে টেক্সট কালার এর ব্যবহার

• টেক্সট এর ফন্ট এর জন্য font-family এর ব্যবহার

• টেক্সট এর আকার এর জন্য font-size এর ব্যবহার

এবং

• text-align এর ব্যবহার।

Mar 18

এএসপি ডট নেট এমভিসি ASP.NET MVC কন্ট্রোলার

রিদওয়ান বিন শামীম
এএসপি ডট নেট এমভিসিতে কন্ট্রোলার যোগ করতে যে প্রক্রিয়া প্রয়োজন তা অনেকটা এরকম, প্রথমে কন্ট্রোলার ফোল্ডার তৈরি করতে হবে। কন্ট্রোলার ফোল্ডারে কন্ট্রোলার ক্লাসেস (controller classes) থাকে, যা ব্যবহারকারীর ইনপুট ও রেসপন্স নির্ধারণ করে। MVC তে সব কন্ট্রোলারের নামের শেষে “Controller”এক্সটেনশন থাকতে হয়। উদাহরণ স্বরূপ বলা যায়
ভিজুয়াল ওয়েব ডেভলপাররা কোন ফাইল তৈরি করলে : হোমপেজ ও এবাউট পেজের নাম দেবে HomeController.cs এবং লগ অন পেজের নাম দেবে AccountController.cs । যেটা সার্ভারের ডিফল্ট ডিরেক্টরিতে “default.asp” নামে দেখানো হবে। কিন্তু MVC framework এ কন্ট্রোলার ক্লাসের মাধ্যমে এই কাজটি করা হয়। কন্ট্রোলার দ্বারা ডাটা, রিকুয়েস্ট, ইনপুট ও রেসপন্স নির্ধারণ করা হয়। হোম কন্ট্রোলার ফাইল ইনডেক্স ও এবাউট কন্ট্রোলদুটি ঠিক রাখে। HomeController.cs ফাইল যে ধরণের কোড ব্যবহার করে তা নিচে দেয়া হল। using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{return View();}

public ActionResult About()
{return View();}
}
}
ভিউ ফোল্ডারের Index.cshtml এবং About.cshtml ফাইল গুলো কন্ট্রোলারের ActionResult views Index() এবং About() in the controller ইত্যাদি নির্দেশ করে।

Mar 18

JavaScript Debugging

নাম-শরিফুল ইসলাম

ডিবাগার ছাড়া আপনি খুব তাড়াতাড়ি আপনার লিখিত javascript কোড হারিয়ে ফেলবেন। ডিবাগার ছাড়া javascript কোড লেখা খুব কঠিন। আপনার কোড এ syntax এরর অথবা logical এরর থাকতে পারে, এইগুলোকে চিহ্নিত করা কঠিন। প্রায় যখন javascript কোড এ কোন এরর থাকে কিছুই হয় না , কোন এরর বার্তা দেখায় না এবং আপনি কোন ইঙ্গিত পাবেন না আসলে এই এরর গুলো কোথায় খুজতে হবে। সাধারনত প্রত্যেকবার আপনি যখন নতুন javascript কোড লিখতে যান তখন এরর সংঘটিত হয়।

Javascript ডিবাগার :

প্রোগ্রামিং কোডের মধ্যে কোন এরর খোঁজাকে কোড ডিবাগ বলা হয়। এটা খুব একটা সহজ নয় তবে প্রত্যেকটি আধুনিক ব্রাউজার এর সাথে ডিবাগার সংযুক্ত অবস্থায় থাকে। ইউজার দের ত্রুটির প্রতিবেদন পাওয়ার জন্য এই ডিবাগারকে অন বা অফ দুটোই করা যেতে পারে। ডিবাগার দিয়ে আপনি ব্রেকপয়েন্ট সেট করতে পারেন(কোড গণনা কোন জায়গায় থেমে গিয়েছে) এবং variable গুলো পরীক্ষা করে যখন কোড গণনা করা হয়। অন্যথায় পেজ এর পাদদেশ থেকে কিছু স্টেপস অনুসরন করা যেতে পারে। F12 কি ব্যাবহারের মাধ্যমে আপনার ব্রাউজার এর ডেবাগ্ অপশন চালু করতে পারেন এবং এর মেন্যুতে console সিলেক্ট করতে পারেন।

Console.log() মেথড :

যদি আপনার ব্রাউজার ডেবাগ্ সাপোর্ট করে তাহলে আপনি console.log() ব্যবহার করতে পারেন একটি উইন্ডো তে javascript ভ্যালু দেখার জন্য

উদাহরণ

DOCTYPE html>

<html>

<body>

 

<h1>My First Web Page</h1>

 

<script>

a = 5;

b = 6;

c = a + b;

console.log(c);

</script>

 

</body>

</html>

ব্রেক পয়েন্ট সেট করা :

ডেবাগ্ উইন্ডো তে আপনি javascript কোড এর মধ্যে ব্রেক পয়েন্ট সেট করতে পারেন। এতে প্রত্যেকটি ব্রেক পয়েন্ট এ javascript কোড গণনা বন্ধ করবে এবং javascript ভ্যালু পরীক্ষা করবে। পরীক্ষার পর আপনি পুনরায় কোড গণনা চালু করতে পারেন ।

ডিবাগার কি ওয়ার্ড :

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

উদাহরণ

var x = 15 * 5;

debugger;

document.getElementbyId(“demo”).innerHTML = x;

ব্রাউজার এর ডিবাগিং টুল :

আপনি F12 প্রেস করার মাধ্যমে আপনার ব্রাউজার এর ডি বাগিং চালু করতে পারেন এবং মেন্যু থেকে console সিলেক্ট করতে পারেন অথবা নিচের স্টেপস গুলো অনুসরন করুন

Chrome

ব্রাউজার চালু করুন, মেন্যু থেকে টুলস সিলেক্ট করুন, টুল থেকে ডেভেলপার টুলস সিলেক্ট করুন এবং সবশেষে console সিলেক্ট করুন।

Firefox Firebug:

ব্রাউজার ওপেন করুন, এই সাইট http://www.getfirebug.com যান, নিয়মনীতি অনুসরন করুন কিভাবে ইন্সটল করতে হয়।

Internet Explorer:

ব্রাউজার চালু করুন, মেন্যু থেকে টুলস সিলেক্ট করুন, টুল থেকে ডেভেলপার টুলস সিলেক্ট করুন এবং সবশেষে console সিলেক্ট করুন।

Opera:

ব্রাউজার চাল করুন, এই সাইট http://dev.opera.com/articles/view/opera-developer-tools পরিদর্শন করুন, এবং নিয়মনীতি অনুসরন করুন কিভাবে ডেভেলপার console বাটন যোগ করতে হয়।

Safari Firebug:

ব্রাউজার ওপেন করুন, এই সাইট http://extensions.apple.com পরিদর্শন করুন এবং নিয়মনীতি অনুসরন করুন কিভাবে firebug lite ইন্সটল করতে হয়।

Safari দেভেলপ মেন্যু:

ব্রাউজার থেকে যান preference > Advanced in the main menu ,রেডিও বাটন চেক করে দিতে হবে (Enable Show Develop menu in menu bar), যখন মেন্যুতে ডেভেলপ নামে নতুন অপশন আসবে > তখন “show error console” বাছাই করতে হবে।

আপনি কি জানেন ?

ডিবাগিং হল এক ধরনের প্রক্রিয়া যা দিয়ে কম্পিউটার এর প্রোগ্রাম এর কোন কিছু টেস্ট করা, খুঁজা এবং এরর কে হ্রাস করা বুঝায়।

 

 

Mar 18

JavaScript Errors (Throw and Try to Catch)

নাম-শরিফুল ইসলাম

JavaScript Errors – Throw and Try to Catch

Try statement দিয়ে ব্লকের কোড এ কোন ভুল আছে কিনা তা টেস্ট করবে
Catch statement দিয়ে কোন ভুল থাকলে তা নিয়ন্ত্রণ করবে
Throw statement দিয়ে কাস্টম এরর তৈরি করা হয়
Finally statement দিয়ে কোন কোড কে গণনা করা হয়, try এবং catch এর পর ফলাফল পাওয়া যায়।

এরর হতে পারে !:
Javascript কোড গণনা এর সময় বিভিন্ন কারনে এরর ঘটতে পারে। এরর হতে পারে প্রোগ্রামার এর ভুল কোড এর কারনে, ভুল ইনপুট এর কারন এবং অন্যান্য আরও অনেক কারনে
উদাহরণ

উপরের উদাহরণ এ আমরা try ব্লক এ একটি কোড তৈরি করেছি যাতে ভুল ছিল। এবং catch ব্লক এই এরর কে খুজে পেয়েছে এবং গননার মাধ্যমে তা নিয়ন্ত্রণ করেছে।
Javascript try and catch :
Try statement দিয়ে ব্লক কোড এর এরর টেস্ট করা হয় যদি try ব্লক এর মধ্যে কোন এরর ধরা পরে তখন catch statement কোড কে গণনা করে এবং এরর নিয়ন্ত্রণ করে।
এই javascript statement try এবং catch একসাথে এসেছে
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

Javascript throws এরর :

যখন কোন এরর হয় javascript সাধারনত বন্ধ হয়ে যায় এবং এরর মেসেজ তৈরি করে। এইখানে টেকনিকাল বিষয় হল javascript এরর throw করবে।
Throw statement:
কাস্টম এরর তৈরি করার ক্ষেত্রে throw statement ব্যবহার করা হয়।এইখানে টেক নিকাল বিষয় হল javascript exception throw করে।
এই exception হতে পারে নাম্বার, স্ট্রিং, বুলিয়ান এবং কোন object.।
throw “Too big”; // টেক্সট throw করে
throw 500; // নাম্বার throw করে
যদি আমরা try এবং catch এর সাথে throw ব্যবহার করি তাহলে আমরা প্রোগ্রাম এর ধারা কে নিয়ন্ত্রণ করতে পারব এবং কাস্টম এরর মেসেজ তৈরি করতে পারব।

ইনপুট বৈধকরণ :

এই উদাহরণ ইনপুট পরীক্ষা করবে, যদি ভ্যালু ভুল হয় , তাহলে একটি এরর তৈরি হবে, এই এরর catch statement দিয়ে ধরা হবে এবং একটি কাস্টম এরর মেসেজ ডিসপ্লে করবে
উদাহরণ
Please input a number between 5 and 10:


 

Finally statement :
Finally statement কোড কে গণনা করবে try এবং catch এর পর ফলাফল দিবে
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
উদাহরণ
function myFunction() {
var message, x;
message = document.getElementById(“message”);
message.innerHTML = “”;
x = document.getElementById(“demo”).value;
try {
x = Number(x);
if(x == “”) throw “is empty”;
if(isNaN(x)) throw “is not a number”;
if(x > 10) throw “is too high”;
if(x < 5) throw “is too low”;
}
catch(err) {
message.innerHTML = “Error: ” + err + “.”;
}
finally {
document.getElementById(“demo”).value = “”;
}
}