Category Archives: Professional

AppML কেস স্টাডি – পণ্য (AppML Case Study – Products)

May 26, 2015 Author-Check- Article-or-Video Leave a comment

এইচটিএমএল

এইচটিএমএল সোর্স:

<!DOCTYPE html>
 <html lang="en-US">
 <title>Products</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
 <body>
 
 <div class="container">
 <h1>Products</h1>
 
 <div id="Form01" class="jumbotron" style="display:none" appml-controller="myFormController">
   <div appml-include-html="inc_formcommands.htm"></div>
   <div class="form-group">
     <label>ProductName:</label>
     <input id="ProductName" class="form-control">
   </div>
   <div class="form-group">
     <label>Supplier:</label>
     <div appml-data="local?model=model_dropdown_suppliers">
       <select id="SupplierID" class="form-control">
       <option appml-repeat="records" value="{{SupplierID}}">{{SupplierName}}</option>
       </select>
     </div>
   </div>
   <div class="form-group">
     <label>Category:</label>
     <div appml-data="local?model=model_dropdown_categories">
       <select id="CategoryID" class="form-control">
       <option appml-repeat="records" value="{{CategoryID}}">{{CategoryName}}</option>
     </select>
   </div>
   </div>
   <div class="form-group">
     <label>Unit:</label>
     <input id="Unit" class="form-control">
   </div>
   <div class="form-group">
     <label>Price:</label>
     <input id="Price" onchange="myValidator(this)" class="form-control">
   </div>
 </div>
  
 <div appml-data="local?model=model_productslist" appml-controller="myListController">
 <div appml-include-html="inc_listcommands.htm"></div>
 <div appml-include-html="inc_productsquery_local.htm"></div>
 <table class="table table-striped table-bordered">
 <tr>
   <th></th>
   <th>Product Name</th>
   <th>Category</th>
   <th>Supplier</th>
   <th>Price</th> 
 </tr>
 <tr appml-repeat="records">
   <td style="cursor:pointer"
     onclick="appml('Form01').run({{ProductID}})">
     <span class="glyphicon glyphicon-edit"></span>
   </td>
   <td>{{ProductName}}</td>
   <td>{{CategoryName}}</td>
   <td>{{SupplierName}}</td>
   <td>{{Price}}</td> 
 </tr>
 </table>
 </div>
 <h3 id="sumprice"></h3>
 
 </div>
 
 <script>
 function myValidator(item) {
     var obj = appml("Form01");
     obj.message = "validate";
     obj.validate = {};
     obj.validate.item = item.id;
     obj.validate.value = item.value;
     myFormController(obj);
 }
 function myListController($appml) {
     if ($appml.message == "done") {
         var i, x, tot = 0;
         x = $appml.data.records;
         for (i = 0; i < x.length; i++) {
             tot += Number(x[i].Price);
         }
         document.getElementById("sumprice").innerHTML =
         x.length + " products. Total price " + tot; 
     }
     if ($appml.message == "display") {
         if ($appml.display.name == "ProductName") {
             $appml.display.value = $appml.display.value.toUpperCase();
         }
     }
 }
 function myFormController($appml) {
     if ($appml.message == "ready") {
         $appml.dataSource = "local?model=model_productsform";
         return -1;
     }
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display = "";
     }
     if ($appml.message == "validate") {
         if ($appml.validate.item == "Price") { 
             if (isNaN($appml.validate.value)) { 
                 $appml.setError(15, "Price must be a number");
                 return; 
             }
         }
     }
 }
 </script>
 
 </body>
 </html>

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

লিস্ট মডেল

{
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT ProductID,ProductName,CategoryName,SupplierName,Price FROM ((Products LEFT JOIN Suppliers ON Products.SupplierID=Suppliers.SupplierID) LEFT JOIN Categories ON Products.CategoryID=Categories.CategoryID)",
 "orderby" : "ProductName"
 },
 "filteritems" : [
 {"item" : "ProductName", "label" : "Name"},
 {"item" : "Products.SupplierID", "type" : "number", "hidden" : "true"},
 {"item" : "Suppliers.SupplierID", "label" : "Supplier"}, 
 {"item" : "Categories.CategoryID", "label" : "Category"}
 ],
 "sortitems" : [
 {"item" : "ProductName"}
 ]

ফরম মডেল

 {
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Products",
 "maintable" : "Products",
 "keyfield" : "ProductID"
 },
 "updateItems" : [
 {"item" : "ProductName"},
 {"item" : "SupplierID"},
 {"item" : "CategoryID"},
 {"item" : "Unit"},
 {"item" : "Price"}
 ]
 }

AppML : Application Modeling Language

AppML কেস স্টাডি – গ্রাহকরা (AppML Case Study – Customers)

May 25, 2015 Author-Check- Article-or-Video Leave a comment

এইচটিএমএল

এইচটিএমএল সোর্স:

<!DOCTYPE html>
 <html lang="en-US">
 <title>Customers</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
 <body>
 
 <div class="container">
 <h1>Customers</h1>
 
 <div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_customersform"

                                                                 appml-controller="myFormController">
   <div appml-include-html="inc_formcommands.htm"></div>
   <div class="form-group">
     <label for="customername">CustomerName:</label>
     <input id="customername" class="form-control">
   </div>
   <div class="form-group">
     <label for="contactname">ContactName:</label>
     <input id="contactname" class="form-control">
   </div>
   <div class="form-group">
     <label for="address">Address:</label>
     <input id="address" class="form-control">
   </div>
     <div class="form-group">
     <label for="city">City:</label>
   <input id="city" class="form-control">
   </div>
   <div class="form-group">
     <label for="postalcode">PostalCode:</label>
     <input id="postalcode" class="form-control">
   </div>
   <div class="form-group">
     <label for="country">Country:</label>
   <  input id="country" class="form-control">
   </div>
 </div>
 
 <div appml-data="local?model=model_customerslist">
   <div appml-include-html="inc_listcommands.htm"></div>
   <div appml-include-html="inc_filter.htm"></div>
   <table class="table table-striped table-bordered">
   <tr>
     <th></th>
     <th>Customer</th>
     <th>City</th>
     <th>Country</th>
   </tr>
   <tr appml-repeat="records">
     <td style="cursor:pointer;width:34px;"
       onclick="appml('Form01').run({{CustomerID}});">
       <span class="glyphicon glyphicon-edit"></span>
     </td>
     <td>{{CustomerName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
   </tr>
   </table>
 </div>
 
 </div>
 
 <script>
 function myFormController($appml) {
     if ($appml.message == "ready") {return -1; }
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display = "";
     }
 }
 </script>
 
 </body>
 </html>

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

লিস্ট মডেল

{
 "rowsperpage" : 10,
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Customers",
 "orderby" : "CustomerName"
 },
 "filteritems" : [
 {"item" : "CustomerName", "label" : "Customer"},
 {"item" : "City"},
 {"item" : "Country"}
 ],
 "sortitems" : [
 {"item" : "CustomerName", "label" : "Customer"},
 {"item" : "City"},
 {"item" : "Country"}
 ]
 }

ফরম মডেল

{
 "database" : {
 "connection" : "localmysql",
 "maintable" : "Customers",
 "keyfield" : "CustomerID",
 "sql" : "SELECT * FROM Customers"
 },
 "updateItems" : [
 {"item" : "CustomerName"},
 {"item" : "Address"},
 {"item" : "PostalCode"},
 {"item" : "City"},
 {"item" : "Country"}
 ]
 }

AppML : Application Modeling Language

AppML কেস স্টাডি – JSON ফাইল (AppML Case Study – JSON Files)

May 25, 2015 Author-Check- Article-or-Video Leave a comment

এইচটিএমএল

এইচটিএমএল সোর্স:

<<!DOCTYPE html>
<html lang="en-US">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>

<div class="container" appml-data="appml.php?model=model_cd_from_json">
<h1>CD Collection</h1>
<h3>Extracted from an XML file</h3>

<div appml-include-html="inc_listcommands_nofilter.htm"></div>
<table class="table table-striped table-bordered">
<tr>
    <th>Title</th>
    <th>Artist</th>
    <th>Country</th>
</tr>
<tr appml-repeat="records">
    <td>{{Title}}</td>
    <td>{{Artist}}</td>
    <td>{{Country}}</td>
</tr>
</table>
</div>

</body>
</html>

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

{
 "rowsperpage" : 7,
 "data" : {
    "type" : "jsonfile",
    "filename" : "cd_catalog.js",
    "record" : "cd",
    "items" : [
        {"name" : "Title", "nodename" : "title"},
        {"name" : "Artist", "nodename" : "artist"},
        {"name" : "Price", "nodename" : "price"}
    ]
  }
}

ফাইল

কমা দিয়ে পৃথক করা টেক্সট ফাইল:

{
"cd" : [
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" },
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" },
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" },
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" },
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" }
]
}

AppML : Application Modeling Language

AppML কেস স্টাডি – এক্সএমএল ফাইল (AppML Case Study – XML Files)

May 25, 2015 Author-Check- Article-or-Video Leave a comment

এইচটিএমএল

এইচটিএমএল সোর্স:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
</head>

<body>

<div class="container" appml-data="appml.php?model=model_cd_from_xml">
<h1>CD Collection</h1>
<h3>Extracted from an XML file</h3>
<div appml-include-html="inc_listcommands_nofilter.htm"></div>
<table class="table table-striped table-bordered">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{Title}}</td>
<td>{{Artist}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>

</body>
</html>

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

{
 "rowsperpage" : 7,
 "data" : {
    "type" : "xmlfile",
    "filename" : "cd_catalog.xml",
    "record" : "CD",
    "items" : [
       {"name" : "Artist", "nodename" : "ARTIST"},
       {"name" : "Title", "nodename" : "TITLE"},
       {"name" : "Country", "nodename" : "COUNTRY"}
    ]
 }
}

ফাইল

কমা দিয়ে পৃথক করা টেক্সট ফাইল:

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<PUBLISHED>1985</PUBLISHED>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1988</PUBLISHED>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1982</PUBLISHED>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<PUBLISHED>1990</PUBLISHED>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1997</PUBLISHED>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<PUBLISHED>1998</PUBLISHED>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<PUBLISHED>1973</PUBLISHED>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<PUBLISHED>1990</PUBLISHED>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<PUBLISHED>1996</PUBLISHED>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<PUBLISHED>1995</PUBLISHED>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<PUBLISHED>1999</PUBLISHED>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<PUBLISHED>1995</PUBLISHED>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1997</PUBLISHED>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<PUBLISHED>1971</PUBLISHED>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<PUBLISHED>1996</PUBLISHED>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<PUBLISHED>1990</PUBLISHED>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<PUBLISHED>1988</PUBLISHED>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<PUBLISHED>1983</PUBLISHED>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<PUBLISHED>1983</PUBLISHED>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1991</PUBLISHED>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<PUBLISHED>1985</PUBLISHED>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
</CATALOG>

AppML : Application Modeling Language, Root

AppML কেস স্টাডি – টেক্সট ফাইল (AppML Case Study – Text Files)

May 25, 2015 Author-Check- Article-or-Video Leave a comment

এইচটিএমএল

এইচটিএমএল সোর্স:

<!DOCTYPE html>
 <html lang="en-US">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
 <body>

<div class="container" appml-data="appml.php?model=model_cd_from_txt">
 <h1>CD Collection</h1>
 <h3>Extracted from an XML file</h3>

<div appml-include-html="inc_listcommands_nofilter.htm"></div>
 <table class="table table-striped table-bordered">
 <tr>
    <th>Title</th>
    <th>Artist</th>
    <th>Country</th>
 </tr>
 <tr appml-repeat="records">
    <td>{{Title}}</td>
    <td>{{Artist}}</td>
    <td>{{Country}}</td>
 </tr>
 </table>
 </div>

</body>
 </html>

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

{
 "rowsperpage" : 7,
 "data" : {
    "type" : "csvfile",
    "filename" : "cd_catalog.txt",
    "items" : [
       {"name" : "Title", "index" : 1},
       {"name" : "Artist", "index" : 2},
       {"name" : "Price", "index" : 5}
    ]
 }
}

ফাইল

কমা দিয়ে পৃথক করা টেক্সট ফাইল:

Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990

AppML : Application Modeling Language

অ্যাপ এম এল কেস (AppML Cases)

May 23, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

এই কেস স্টাডিগুলোর মাধ্যমে বোঝানোর চেষ্টা করা হবে কীভাবে অ্যাপ এম এল ব্যবহার করে ইন্টারনেট এপ্লিকেশন তৈরি করা যায়।

১ম পার্টঃ ইন্টারনেট ফাইলে ঢুকা

টেক্সট ফাইলে ঢুকা
এক্সএমএল ফাইলে ঢুকা
জেএসওএন ফাইলে ঢুকা

২য় পার্টঃ ইন্টারনেট ডাটাবেসে ঢুকাঃ

ডাটাবেস ডাটা লিস্টিং করা,
ডাটাবেস ডাটা ফিল্টারিং করা,
ডাটাবেস ডাটা এডিট করা।

অ্যাপ এম এল ব্রাউজার ও অ্যাপ এম এল সার্ভার

এই কেস স্টাডিতে, ব্রাউজার (appml.js) ও সার্ভার (appml.php) দুটিতেই অ্যাপ এম এল চলতে পারে।

পরবর্তী অধ্যায়গুলোতে জানা যাবে কিভাবে কোনও সার্ভারকে ব্রাউজারে নকল করা যাবে।

টেক্সট ফাইলে ঢুকা

টেক্সট ফাইলে ঢুকার জন্য আমরা যে ধরণের ফাইল ব্যবহার করি,

d_catalog.txt

 Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
 Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
 Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
 Still got the blues,Gary Moore,UK,Virgin records,10.20,1990

এক্সএমএল ফাইলে ঢুকা

এক্সএমএল ফাইলে ঢুকার জন্য আমরা যে ধরণের ফাইল ব্যবহার করি,

cd_catalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
 <CATALOG>
 <CD>
   <TITLE>Empire Burlesque</TITLE>
   <ARTIST>Bob Dylan</ARTIST>
   <COUNTRY>USA</COUNTRY>
   <COMPANY>Columbia</COMPANY>
   <PRICE>10.90</PRICE>
   <PUBLISHED>1985</PUBLISHED>
 </CD>
 <CD>
   <TITLE>Hide your heart</TITLE>
   <ARTIST>Bonnie Tyler</ARTIST>
   <COUNTRY>UK</COUNTRY>
   <COMPANY>CBS Records</COMPANY>
   <PRICE>9.90</PRICE>
   <PUBLISHED>1988</PUBLISHED>
 </CD>

জেএসওএন ফাইলে ঢুকা

জেএসওএন ফাইলে ঢুকার জন্য আমরা যে ধরণের ফাইল ব্যবহার করি,

cd_catalog.js

{
 "cd" : [
 { "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
 { "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
 { "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
 { "title" : "Still got the blues", "artist" : "Gary Moore", "price" : "10.20" },

ডাটাবেস

টেস্ট ডাটাবেস এধরনের অনেকগুলো টেবিল ব্যবহার করে,

কাস্টমার

গ্রাহক	ঠিকানা	শহর	দেশ
Around the Horn	120 Hanover Sq.	London	UK
Berglunds snabbkjøp	Berguvsvägen 8	Luleå	Sweden
Blauer See Delikatessen	Forsterstr. 57	Mannheim	Germany
Blondel père et fils	24, place Kléber	Strasbourg	France
Bólido Comidas preparadas	C/ Araquil, 67	Madrid	Spain
Bottom-Dollar Markets	23 Tsawassen Blvd.	Tsawassen	Canada

সরবরাহকারী

সরবরাহকারী	ঠিকানা	শহর	দেশ
Exotic Liquid	49 Gilbert St.	London	UK
New Orleans Cajun Delights	P.O. Box 78934	New Orleans	USA
Grandma Kelly's Homestead	707 Oxford Rd.	Ann Arbor	USA
Tokyo Traders	9-8 SekimaiMusashino-shi	Tokyo	Japan
Cooperativa de Quesos 'Las Cabras'	Calle del Rosal 4	Oviedo	Spain
Mayumi's	92 Setsuko Chuo-ku	Osaka	Japan
Pavlova, Ltd.	74 Rose St. Moonie Ponds	Melbourne	Australia
Specialty Biscuits, Ltd.	29 King's Way	Manchester	UK
PB Kn ckebr d AB	Kaloadagatan 13	G teborg	Sweden
Refrescos Americanas LTDA	Av. das Americanas 12.890	S o Paulo	Brazil

পণ্য

পণ্য	প্রতি এককের মাপ	একক মূল্য	স্টকে একক
Chai	10 boxes x 20 bags	18	39
Chang	24 - 12 oz bottles	19	17
Aniseed Syrup	12 - 550 ml bottles	10	13
Chai	10 boxes x 20 bags	18	39
Chef Anton's Gumbo Mix	36 boxes	21	0
Grandma's Boysenberry Spread	12 - 8 oz jars	25	120
Uncle Bob's Organic Dried Pears	12 - 1 lb pkgs.	30	15
Northwoods Cranberry Sauce	12 - 12 oz jars	40	6
Mishi Kobe Niku	18 - 500 g pkgs.	97	29
Ikura	12 - 200 ml jars	31	31

AppML : Application Modeling Language

অ্যাপ এম এল এপিআই (AppML API)

May 22, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

অ্যাপ এম এল এপিআই অ্যাপ এম এল এর প্রক্রিয়া ও বৈশিষ্ট্য প্রকাশ করে থাকে।

প্রক্রিয়া ও বৈশিষ্ট্য দ্বারা কি কি সম্ভব?

প্রক্রিয়া ও বৈশিষ্ট্যের মাধ্যমে-

অ্যাপ এম এল এপ্লিকেশন তৈরি করা সম্ভব,
এপ্লিকেশনকে ডাটা দ্বারা সমৃদ্ধ করা সম্ভব,
ওয়েবপেজে ব্যবহারের জন্য এপ্লিকেশন ডাটা সন্ধান করা সম্ভব

উদাহরণঃ

new AppML() দ্বারা নতুন অ্যাপ এম এল অবজেক্ট তৈরি করা সম্ভব,

dataSource অ্যাপ এম এল অবজেক্টের ডাটা সোর্স নির্ণয় করে,

data.records ডাটা রেকর্ড সংরক্ষণ করে।

রেকর্ড সংরক্ষণ করে এইচটিএমএল উপাদানে অবজেক্ট দেখা সম্ভব।

উদাহরণ

// Create an AppML object and fetch the data
 obj = new AppML();
 obj.dataSource = "http://www.w3schools.com/appml/customers.php";
 obj.getData();
 
 // Locate the data records
 myArr = obj.data.records;
 len = myArr.length;
 
 // Display the records
 for (i = 0; i < myArr.length; i++) {
     txt += myArr[i].CustomerName + "<br>";
 }
 document.getElementById("demo").innerHTML = txt;

ফলাফলঃ

 Alfreds Futterkiste
 Berglunds snabbköp
 Centro comercial Moctezuma
 Ernst Handel
 FISSA Fabrica Inter. Salchichas S.A.
 Galería del gastrónomo
 Island Trading
 Königlich Essen
 Laughing Bacchus Wine Cellars
 Magazzini Alimentari Riuniti
 North/South
 Paris spécialités
 Rattlesnake Canyon Grocery
 Simons bistro
 The Big Cheese
 Vaffeljernet
 Wolski Zajazd

অ্যাপ এম এল এর কিছু প্রক্রিয়া

প্রক্রিয়া	বর্ণনা
new AppML()	নতুন AppML অবজেক্ট তৈরি করে
run()	একটি এপ্লিকেশন অবজেক্ট রান করায়
appml("name")	appml অবজেক্টকে নির্ধারিত নামসহ পুনরাবৃত্ত করে
displayMessage(text)	নির্ধারিত ম্যাসেজ প্রদর্শন করে
setError(no, description)	ভুল এবং ভুলের বিবরণ প্রদর্শন করে

অ্যাপ এম এল এর কিছু বৈশিষ্ট্য

বৈশিষ্ট্য	বর্ণনা
appName	আইডিসহ এপ্লিকেশনের নাম
container	এপ্লিকেশনের কন্টেইনার উপাদান
controller	এপ্লিকেশনের কন্ট্রোলার
data	এপ্লিকেশনের ডাটা অবজেক্ট
dataSource	এপ্লিকেশনের ডাটা সোর্স
message	এপ্লিকেশন ম্যাসেজ

ডাটা অবজেক্টের কিছু বৈশিষ্ট্য

বৈশিষ্ট্য	বর্ণনা
data.model	এপ্লিকেশনের ডাটা মডেল
data.records	এপ্লিকেশনের ডাটা রেকর্ড

AppML : Application Modeling Language

অ্যাপ এম এল মডেল (AppML Models)

May 22, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

অ্যাপ এম এল মডেল কোনও এপ্লিকেশনকে বিবৃত করে।

অ্যাপ এম এল মডেল আসলে কী

অ্যাপ এম এল মডেল একধরনের জাভাস্ক্রিপ্ট অবজেক্ট বা জেএসওএন, যা কোনও এপ্লিকেশনকে বিবৃত করে। একটি ছোট মডেল ডাটাবেস থেকে প্রাপ্ত তথ্যের ভিত্তিতে সম্পূর্ণ এপ্লিকেশনকে বিবৃত করতে পারে।

{
 "database" : {অ্যাপ এম এল
     "connection" : "localmysql",
     "sql" : "SELECT * FROM Customers"}
 }

অ্যাপ এম এল মডেল যা যা করতে পারে

অ্যাপ এম এল মডেলের কর্মপরিধির মধ্যে আছে,

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

উদাহরণঃ ইউজারকে ডাটা ফিল্টার করার(সার্চ, সর্ট ইত্যাদি ) সুবিধা দেয়ার জন্য মডেলে ফিল্টার ইনফরমেশন যোগ করা যায়,

"filteritems" : [

     {"item" : "CustomerName", "label" : "Customer"},
     {"item" : "City"},
     {"item" : "Country"}
 ]

ইউজারকে ডাটা আপডেট করার সুবিধা দেয়ার জন্য মডেলে আপডেট ইনফরমেশন যোগ করা যায়,

"updateItems" : [
{"item" : "CustomerName"},
{"item" : "Address"},
{"item" : "PostalCode"},
{"item" : "City"},
{"item" : "Country"}
]

মডেল ছাড়া এপ্লিকেশন

আমাদের টিউটোরিয়ালের প্রথম দিকে যেসব এপ্লিকেশন ব্যবহার করা হয়েছে সেগুলোতে কোনও মডেল ব্যবহার করা হয়নি।

নোটঃ পরবর্তী অধ্যায়গুলোতে আমরা ডাটাবেস, পঠন, ফিল্টার এবং আপডেট ডাটা যা মডেলে বিবৃত হয়েছে, তা নিয়ে আরও আলোচনা করব।

AppML : Application Modeling Language, Root

অ্যাপ এম এল ম্যাসেজ (AppML Messages)

May 21, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

অ্যাপ এম এল ম্যাসেজ এবং কার্যপ্রণালী

যখন অ্যাপ এম এল কোনও কাজ করতে যায় তখন এটি কন্ট্রোলারে একটি এপ্লিকেশন অবজেক্ট ($appml) পাঠায়। এপ্লিকেশন অবজেক্টের একটি বৈশিষ্ট্য হল ম্যাসেজ ($appml.message), যা এপ্লিকেশনের অবস্থা বর্ণনা করে। এই ম্যাসেজ পরীক্ষা করে কাজের ধরণ অনুযায়ী জাভাস্ক্রিপ্ট কোড ব্যবহার করা যায়।

উদাহরণ,

function myController($appml) {
     if ($appml.message == "ready") {alert ("Hello Application");}
 }

অ্যাপ এম এল এর ম্যাসেজ

অ্যাপ এম এল ম্যাসেজের তালিকাঃ

Message	Description
"ready"	অ্যাপ এম এল শুরুর পরে দেখায়, লোড করতে প্রস্তুত
"loaded"	অ্যাপ এম এল লোডেড, ডাটা দেখাতে প্রস্তুত
"display"	অ্যাপ এম এল কোনও ডাটা আইটেম দেখানোর আগে দেখায়।
"done"	অ্যাপ এম এল সম্পন্ন হওয়ার পর দেখায়
"submit"	অ্যাপ এম এল ডাটা সাবমিটের আগে দেখায়
"error"	অ্যাপ এম এল কোনও ভুলের সম্মুখীন হলে দেখায়

"ready" ম্যাসেজ

অ্যাপ এম এল শুরুর পরে দেখায়, লোড করতে প্রস্তুত। ইনিশিয়াল ডাটার জন্য (শুরুর মান) আদর্শ ক্ষেত্র,

উদাহরনঃ

<div appml-controller="myController" appml-data="customers.js">
 <h1>Customers</h1>
 <p>{{today}}</p>
 <table>
   <tr>
     <th>Customer</th>
     <th>City</th>
     <th>Country</th>
   </tr>
   <tr appml-repeat="records">
     <td>{{CustomerName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
   </tr>
 </table>
 <p>Copyright {{copyright}}</p>
 </div>
 
 <script>
 function myController($appml) {
     if ($appml.message == "ready") {
         $appml.today = new Date();
         $appml.copyright = "W3Schools"
     }
 }
 </script>

উপরের উদাহরণে $appml.message হল "ready", কন্ট্রোলার এপ্লিকেশনে দুটি বৈশিষ্ট্য যোগ করেছে, (today এবং copyright) । এপ্লিকেশন রান করলে নতুন দুটি বৈশিষ্ট্য কাজ করবে।

"loaded"ম্যাসেজঃ

অ্যাপ এম এল লোডেড, ডাটা দেখাতে প্রস্তুত এমন ক্ষেত্রে "loaded" ম্যাসেজ দেখায়,কোনও পরিবর্তনের প্রয়োজন থাকলে এই ধাপে তা করা ভাল।

উদাহরনঃ

function myController($appml) {
if ($appml.message == "loaded") {
// compute your values here before display
}
}

"display" ম্যাসেজ”

অ্যাপ এম এল কোনও ডাটা আইটেম দেখানোর আগে এই ম্যাসেজ দেখায়।আউটপুট মডিফাইয়ের জন্য এই ধাপ খুব ভাল।

উদাহরণঃ <div appml_app="myController" appml-data="customers.js">

<h1>Customers</h1>
 <table>
   <tr>
     <th>Customer</th>
     <th>City</th>
     <th>Country</th>
   </tr>
   <tr appml-repeat="records">
     <td>{{CustomerName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
   </tr>
 </table>
 </div>
 
 <script>
 function myController($appml) {
     if ($appml.message == "display") {
         if ($appml.display.name == "CustomerName") {
             $appml.display.value = $appml.display.value.substr(0,15); 
         }
         if ($appml.display.name == "Country") {
             $appml.display.value = $appml.display.value.toUpperCase();
         }
     }
 }
 </script>

উপরের উদাহরণে "CustomerName" শব্দটিকে ১৫ অক্ষরে বিস্তারিত করা হয়েছে এবং "Country" শব্দটিকে বড় হাতের অক্ষরে পরিবর্তিত করা হয়েছে।

"done" ম্যাসেজ

অ্যাপ এম এল সম্পন্ন হওয়ার পর এই ম্যাসেজ দেখায়, এপ্লিকেশন ডাটা ক্লিন ও ক্যালকুলেট করার জন্য এই ধাপ খুব উপযোগী।

উদাহরণ,

<script>
 function myController($appml) {
     if ($appml.message == "done") {
         calculate data here
     }
 }
 </script>

"submit" ম্যাসেজ

অ্যাপ এম এল ডাটা সাবমিটের আগে দেখায়, এপ্লিকেশন ইনপুট শনাক্তকরণের জন্য উপযোগী।

উদাহরণ,

<script>
 function myController($appml) {
     if ($appml.message == "submit") {
         validate data here
     }
 }
 </script>

"error" ম্যাসেজ

অ্যাপ এম এল কোনও ভুলের সম্মুখীন হলে দেখায়, এই ধাপ ভুল সংশোধনের জন্য উপযোগী।

উদাহরণ,

<script>
 function myController($appml) {
     if ($appml.message == "error") {
         alert ($appml.error.number + " " + $appml.error.description)
     }
 }
 </script>

অ্যাপ এম এল এর বৈশিষ্ট্য

অ্যাপ এম এল এর কমন কিছু বৈশিষ্ট্য নিচের ছকে দেয়া হল,

Property	Description
$appml.message	এপ্লিকেশনের বর্তমান অবস্থা
$appml.display.name	প্রদর্শনকরা হবে এমন ডাটা ফিল্ডের নাম
$appml.display.value	প্রদর্শনকরা হবে এমন ডাটা ফিল্ডের মান
$appml.error.number	ভুলের সংখ্যা
$appml.error.description	ভুলের বিবরণ

AppML : Application Modeling Language

অ্যাপ এম এল কন্ট্রোলার (AppML Controllers)

May 21, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

অ্যাপ এম এল কন্ট্রোলারের উদ্দেশ্য হল এপ্লিকেশনকে নিয়ন্ত্রণ করা।

কন্ট্রোলার যা যা করতে পারেঃ

প্রারম্ভিক ডাটা সেট করা,
এপ্লিকেশন ডাটা পরিবর্তন করা,
ইনপুট এবং আউটপুট নিয়ন্ত্রণ করা,
ডাটা ভ্যালিডেট করা,
ডাটা সংক্ষেপ করা,
ভুলক্রুটি নিয়ন্ত্রণ,
এপ্লিকেশন শুরু ও শেষ করা,
আরও অনেক কিছু করা যায় এর দ্বারা।

কন্ট্রোলার ব্যতিত

অ্যাপ এম এল এপ্লিকেশন বাই ডিফল্ট কন্ট্রোলার ব্যতিত রান করে।

উদাহরণ,

<table appml-data="customers.js">
 <tr>
   <th>Customer</th>
   <th>City</th>
   <th>Country</th>
 </tr>
 <tr appml-repeat="records">
   <td>{{CustomerName}}</td>
   <td>{{City}}</td>
   <td>{{Country}}</td>
 </tr>
 </table>

কন্ট্রোলার সহ

জাভাস্ক্রিপ্টের সাহায্যে অ্যাপ এম এল এপ্লিকেশন কন্ট্রোলারসহ রান করানো যায়।

কন্ট্রোলার একটি জাভাস্ক্রিপ্ট ফাংশন যা আমরা প্রয়োগ করে থাকি।

appml-controller এট্রিবিউট দ্বারা প্রোগ্রামে কন্ট্রোলার ফাংশন বোঝানো হয়।

উদাহরণ,

<h1>Customers</h1>
 <table appml-data="customers.js" appml-controller="myController">
   <tr>
     <th>Customer</th>
     <th>City</th>
     <th>Country</th>
   </tr>
   <tr appml-repeat="records">
     <td>{{CustomerName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
   </tr>
 </table>
 
 <script>
 function myController($appml) {
     if ($appml.message == "display") {
         if ($appml.display.name == "CustomerName") {
             $appml.display.value = $appml.display.value.toUpperCase();
         }
     }
 }
 </script>

উপরের উদাহরণে কন্ট্রোলার (myControlller), "CustomerName" কে আপারকেস অক্ষরে পরিবর্তিত করে দেখিয়েছে।

কন্ট্রোলার থাকলে অ্যাপ এম এল কন্ট্রোলারে এপ্লিকেশন অবজেক্ট ($appml) পাঠায়, অত্যন্ত গুরুত্বপূর্ণ কার্যক্রম সম্পাদনের জন্য। এপ্লিকেশনের একটি বৈশিষ্ট্য হল ম্যাসেজ ($appml.message), যা এপ্লিকেশনের অবস্থা প্রকাশ করে।

Message	Description
"ready"	অ্যাপ এম এল শুরুর পরে দেখায়, লোড করতে প্রস্তুত
"loaded"	অ্যাপ এম এল লোডেড, ডাটা দেখাতে প্রস্তুত
"display"	অ্যাপ এম এল কোনও ডাটা আইটেম দেখানোর আগে দেখায়।
"done"	অ্যাপ এম এল সম্পন্ন হওয়ার পর দেখায়
"submit"	অ্যাপ এম এল ডাটা সাবমিটের আগে দেখায়
"error"	অ্যাপ এম এল কোনও ভুলের সম্মুখীন হলে দেখায়

পরবর্তী অধ্যায়গুলোতে পর্যায়ক্রমে ম্যাসেজের বিস্তারিত ব্যাখ্যা দেয়া হবে।

AppML : Application Modeling Language

অ্যাপ এম এলঃ এইচটিএমএল অন্তর্ভুক্ত করা (AppML HTML Includes)

May 21, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

এইচটিএমএলের ভেতর এইচটিএমএল অন্তর্ভুক্ত করা

এইচটিএমএল পেজের সর্বত্র একটি আদর্শ এইচটিএমএল ফুটার (HTML footer) অন্তর্ভুক্ত করা হতে পারে এর আদর্শ উদাহরণ।

আদর্শ এইচটিএমএল ফুটারসমৃদ্ধ ফাইলের উদাহরণ নিচে দেয়া হল,

inc_footer.htm

 <hr style="margin-top:10px;">
 <p style="font-size:11px">2015&copy; W3Schools. All rights reserved.</p>
 <hr>

এখানে "inc_footer.htm" অন্তর্ভুক্তির জন্য appml-include-html এট্রিবিউট ব্যবহৃত হয়েছে।

উদাহরণঃ

<!DOCTYPE html>
 <html lang="en-US">
 
 <title>Customers</title>
 <link rel="stylesheet" href="style.css">
 <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script> 
 
 <body>
 
 <h1>Customers</h1>
 <table appml-data="customers.js">
 <tr>
     <th>Customer</th>
     <th>City</th>
     <th>Country</th>
 </tr>
 <tr appml-repeat="records">
     <td>{{CustomerName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
 </tr>
 </table>
 
 <div appml-include-html="inc_footer.htm"></div>
 
 </body>
 </html>

AppML : Application Modeling Language

অ্যাপ এম এল ডাটা (AppML Data)

May 21, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

অ্যাপ এম এল এর প্রধান কাজ হল এইচটিএমএল পেজে ডাটা সরবরাহ করা।

অ্যাপ এম এল কে ডাটার সাথে সংযুক্ত করা

অ্যাপ এম এল চলক থেকে ডাটা প্রদর্শন করতে পারে,
অ্যাপ এম এল ফাইল থেকে ডাটা প্রদর্শন করতে পারে,
অ্যাপ এম এল ডাটাবেস থেকে ডাটা প্রদর্শন করতে পারে।

অ্যাপ এম এল জাভাস্ক্রিপ্ট অবজেক্ট ব্যবহার করলে

এইচটিএমএলকে ডাটা থেকে পৃথক রাখার একটি ভাল পদ্ধতি হল ডাটাকে জাভাস্ক্রিপ্ট অবজেক্টে সংরক্ষণ করা।

উদাহরণ,

 <table appml-data="dataObj">
 <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
 </tr>
 <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
 </tr>
 </table>

<script>
 var dataObj = {
 "records":[
 {"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
 {"CustomerName":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
 {"CustomerName":"B's Beverages","City":"London","Country":"UK"},
 {"CustomerName":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
 {"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
 {"CustomerName":"Blondel père et fils","City":"Strasbourg","Country":"France"},
 {"CustomerName":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
 {"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
 {"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
 {"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
 {"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
 {"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
 ]};
</script>

অ্যাপ এম এল জেএসওএন ফাইল ব্যবহার করে

এইচটিএমএলকে ডাটা থেকে পৃথক রাখার আর একটি ভাল পদ্ধতি হল ডাটাকে জেএসওএন ফাইলে সংরক্ষণ করা।

customers.js

 {
 "records":[
 {"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
 {"CustomerName":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
 {"CustomerName":"B's Beverages","City":"London","Country":"UK"},
 {"CustomerName":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
 {"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
 {"CustomerName":"Blondel père et fils","City":"Strasbourg","Country":"France"},
 {"CustomerName":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
 {"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
 {"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
 {"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
 {"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
 {"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
 ]
 }

অ্যাপ এম এল এর মাধ্যমে জেএসওএন ফাইলকে অ্যাপ এম এল ডাটা এট্রিবিউটে ডাটা সোর্স হিসেবে দেখানো যায়

 <table appml-data="customers.js">
 <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
 </tr>
 <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
 </tr>
 </table>

অ্যাপ এম এল ডাটাবেস ব্যবহার করে

ওয়েব সার্ভারের অল্প একটু সাহায্য নিয়ে এপ্লিকেশনকে এসকিউএল ডাটা দ্বারা পরিপুষ্ট করা যায়,

নিচের উদাহরণে মাইএসকিউএল ডাটাবেস থেকে ডাটা পড়তে পিএইচপির সাহায্য নেয়া হয়েছে।

<table appml-data="http://www.w3schools.com/appml/customers.php">
 <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
 </tr>
 <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
 </tr>
 </table>

নিচের উদাহরণে এসকিউএল সার্ভার ডাটাবেস থেকে ডাটা পড়তে ডটনেটের সাহায্য নেয়া হয়েছে।

 <table appml-data="http://www.w3schools.com/appml/customers.aspx">
 <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
 </tr>
 <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
 </tr>
 </table>

অ্যাপ এম এল এর কার্যকর ক্ষমতা

আমরা কার্যক্ষেত্রে অ্যাপ এম এল এর ক্ষমতা সম্পর্কে ধারণালাভ করতে শুরু করেছি,

অ্যাপ এম এল আমাদেরকে ডাটা, কন্ট্রোলার, মডেল ব্যবহার করতে দেয় যেসব ক্ষেত্রে,

সহজ এইচটিএমএল এপ্লিকেশন ডেভলাপমেন্টের ক্ষেত্রে,
সহজ মডেলিং, প্রোটোটাইপিং, ও টেস্টিঙের ক্ষেত্রে।

কোনও এইচটিএমএল পেজের ভেতর যত খুশি অ্যাপ এম এল এপ্লিকেশন রাখা যায়। অ্যাপ এম এল পেজের অন্য অংশের সাথে কোনও সম্পৃক্ততায় যায় না। আমরা এক্ষেত্রে এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ্টের ব্যবহারে পরিপূর্ণ স্বাধীনতা পেতে পারি। পরিপূর্ণ সিআরইউডি(CRUD) এপ্লিকেশন ডেভলাপমেন্টের ক্ষেত্রেও অ্যাপ এম এল ব্যবহার করা যায়।

নোটঃ CRUD: Create, Read, Update, Delete

AppML : Application Modeling Language, Root

অ্যাপ এম এলঃ কীভাবে তৈরি করবেন? (AppML How To)

May 21, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

অ্যাপ এম এল এপ্লিকেশন তৈরির দুটি সহজ ধাপ নিচে দেখানো হল,

1. HTML ও CSS ব্যবহার করে পেজ তৈরি করা

HTML

 <!DOCTYPE html>
 <html lang="en-US">
 <link rel="stylesheet" href="style.css">
 <title>Customers</title>
 <body>

 <h1>Customers</h1>

 <table>
   <tr>
   <th>Customer</th>
   <th>City</th>
   <th>Country</th>
   </tr>
   <tr>
   <td>{{CustomerName}}</td>
   <td>{{City}}</td>
   <td>{{Country}}</td>
   </tr>
 </table>

 </body>
 </html>

{{ }} চিহ্ন অ্যাপ এম এল ডাটার ধারকস্বরূপ।

CSS

body {
    font: 14px Verdana, sans-serif;
}
h1 {
    color: #996600;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid grey;
    padding: 5px;
    text-align: left;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}

নোটঃ আমাদের ফেভারিট স্টাইলসিটের পরিবর্তে সিএসএস ব্যবহার করতে পারি।

2. অ্যাপ এম এল যোগ করা

নিজের ওয়েবপেজে অ্যাপ এম এল যোগ করার জন্য এই কোড ব্যবহার করা যায়,

<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="style.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>

<h1>Customers</h1>

<table appml-data="customers.js">
<tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
</tr>
<tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
</tr>
</table>

</body>
</html>

অ্যাপ এম এল এর ব্যাখ্যাঃ <script src="http://www.w3schools.com/appml/2.0.3/appml.js">এর মাধ্যমে অ্যাপ এম এল কে পেজে সংযুক্ত করা যায়।

appml-data="customers.js" এর দ্বারা অ্যাপ এম এল ডাটাকে এইচটিএমএল এলিমেন্টের সাথ সংযুক্ত করা যায়। আমাদের উদাহরণে আমরা জেএসওএন ফাইল customers.js ব্যবহার করেছি।

appml-repeat="records" দ্বারা প্রতিটি আইটেমের জন্য এইচটিএমএল এলিমেন্ট রিপিট করা সম্ভব হয়েছে।

{{ }} চিহ্ন অ্যাপ এম এল উপাদান বোঝাতে ব্যবহৃত হয়েছে।

AppML : Application Modeling Language, Root

অ্যাপ এম এল টিউটোরিয়াল (AppML Tutorial)

May 21, 2015 Author-Check- Article-or-Video Leave a comment

রিদওয়ান বিন শামীম

অ্যাপ এম এল কি?

এপ্লিকেশন মডেলিং ল্যাঙ্গুয়েজকে অ্যাপ এম এল দ্বারা প্রকাশ করা হয়। অ্যাপ এম এল যেকোনো এইচটিএমএল পেজে চলতে পারে, কোনও ইন্সটলেশনের প্রয়োজন নেই। অ্যাপ এম এল কয়েকটি মাধ্যম থেকে ডাটা এইচটিএমএল পেজে আনতে ব্যবহৃত হয়,

অবজেক্ট থেকে
ফাইল থেকে
ডাটাবেস থেকে

অ্যাপ এম এল কেন?

স্ট্যাটিক ডকুমেন্ট বিবৃত করতে এইচটিএমএল বিশেষ উপযোগী। কিন্তু ওয়েব এপ্লিকেশন বিবৃত করার জন্য এটি খুব একটি উপযুক্ত নয়। একাজের জন্যই অ্যাপ এম এল এর সৃষ্টি। এটি

এইচটিএমএলকে ডাটা এট্রিবিউটের সাহায্যে প্রসারিত করে
এইচটিএমএলে কন্ট্রোলার যোগ করে এইচটিএমএল ডাটার আচরণ কন্ট্রোল করে

অ্যাপ এম এল বোঝা খুব সহজ এবং এটি ডেভলাপ করাও বিশেষভাবে সহজ।

অ্যাপ এম এল এর উদাহরণ

নিচের উদাহরণে দেখানো হয়েছে অ্যাপ এম এল কীভাবে এইচটিএমএলে কাজ করে থাকে,

<!DOCTYPE html>
<html lang="en-US">

<title>Customers</title>
<link rel="stylesheet" href="style.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>

<body>
<h1>Customers</h1>

<table appml-data="customers.js">
<tr>
   <th>Customer</th>
   <th>City</th>
   <th>Country</th>
</tr>
<tr appml-repeat="records">
   <td>{{CustomerName}}</td>
   <td>{{City}}</td>
   <td>{{Country}}</td>
</tr>
</table>

</body>
</html>

নোটঃ AppML, সহজ, দ্রুত, এবং চটপটে ওয়েব এপ্লিকেশন ডেভেলপমেন্ট এর জন্য একটি টুল।

সহজ এবং কর্মতৎপর

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

অ্যাপ এম এল সিঙ্গেল পেজ এপ্লিকেশন(এসপিএ) তৈরির পদ্ধতিকে সহজ ও কার্যকর করেছে। এমনকি কেউ যদি আগে ওয়েব ডেভলাপমেন্ট না করে থাকে তার কাছেও অ্যাপ এম এল ব্যবহার অনেক সহজ হবে। কেউ যদি আগে থেকে দক্ষ ওয়েব ডেভলাপার হয়ে থাকেন তবে তিনি দ্রুত অ্যাপ এম এল এর উপযোগিতা সম্পর্কে বুঝতে পারবেন।

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন ফাংশন ফাইল (JSON Function Files)

May 11, 2015 Author-Check- Article-or-Video Leave a comment

জেএসওএন ফাংশন ফাইল

রিদওয়ান বিন শামীম

জেএসওএন ফাংশন ফাইল (JSON Function Files)

জেএসওএনএর একটি সাধারণ প্রয়োগ হল ওয়েব সার্ভার থেকে ডাটা পড়া ও ওয়েব পেজে তা প্রদর্শন করা। এই অধ্যায়ে চারটি ছোট ছোট ধাপে দেখানো হবে কীভাবে ফাংশন ফাইল ব্যবহার করে জেএসওএন ডাটা পড়া হয়।

জেএসওএন উদাহরণঃ এই উদাহরণে myTutorials.js থেকে একটি মেনু পড়া হবে ও সেটিকে ওয়েবপেজে দেখানো হবে।

<div id="id01"></div>

<script>
function myFunction(arr) {
     var out = "";
     var i;
     for(i = 0; i<arr.length; i++) {
     out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
     }
     document.getElementById("id01").innerHTML = out;
}
</script>

<script src="myTutorials.js"></script>

উদাহরণের ব্যাখ্যা

প্রথমতঃ অবজেক্টের শ্রেণীবিন্যাস তৈরি করা হয়ঃ
অক্ষরভিত্তিক শ্রেণীবিন্যাস নির্ধারণ করে কোনো অবজেক্টের শ্রেণীবিন্যাস তৈরি করা হয়। প্রত্যেকটি অবজেক্টের দুটি বৈশিষ্ট্য নির্ধারণ করে দেয়া হয়, display এবং url । শ্রেণীবিন্যাসকে myArray নাম দেয়া হয়।
myArray

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

দ্বিতীয়তঃ শ্রেণীবিন্যাস দেখানোর জন্য জাভাস্ক্রিপ্টের একটি ফাংশন তৈরি করা হয়ঃ myFunction() নামের ফাংশন তৈরি করা হয় যা থেকে অবজেক্টগুলো দৃশ্যমান হয় ও এইচটিএমএল লিঙ্ক জাতীয় উপাদান প্রদর্শন করে।

myFunction()

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}

myFunction() কে myArray এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়। যথা,

myFunction(myArray);

তৃতীয়ত, কোন অক্ষরভিত্তিক শ্রেণীবিন্যাসকে আর্গুমেন্ট হিসেবে ব্যবহার করা(শ্রেণীবিন্যাস চলকের পরিবর্তে)ঃ
myFunction() কে array literal(অক্ষরভিত্তিক শ্রেণীবিন্যাস)এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়,

Calling myFunction()

myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]);

চতুর্থতঃ ফাংশন কলকে এক্সটারনাল js fileএ রাখা হয়ঃ
myTutorials.js নামক এক্সটারনাল js fileএ ফাংশন কলকে রাখা হয়।

myTutorials.js

myFunction([
    {
    "display": "JavaScript Tutorial",
    "url": "http://www.w3schools.com/js/default.asp"
    },
    {
    "display": "HTML Tutorial",
    "url": "http://www.w3schools.com/html/default.asp"
    },
    {
    "display": "CSS Tutorial",
    "url": "http://www.w3schools.com/css/default.asp""
    }
 ]);

ফাংশন কলের পরিবর্তে পেজে এক্সটারনাল স্ক্রিপ্ট যোগ করা হয়,
Add External Script

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন এইচটিটিপি রিকুয়েস্ট (JSON Http Request)

May 11, 2015 Author-Check- Article-or-Video Leave a comment

জেএসওএন এইচটিটিপি রিকুয়েস্ট

রিদওয়ান বিন শামীম

জেএসওএনএর একটি সাধারণ প্রয়োগ হল ওয়েব সার্ভার থেকে ডাটা পড়া ও ওয়েব পেজে তা প্রদর্শন করা।

এই অধ্যায়ে চারটি ছোট ছোট ধাপে দেখানো হবে কীভাবে XMLHttp ব্যবহার করে জেএসওএন ডাটা পড়া হয়।

জেএসওএন উদাহর

এই উদাহরণে myTutorials.txt, থেকে একটি মেনু পড়া হবে ও সেটিকে ওয়েবপেজে দেখানো হবে।

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    } 
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

উদাহরণের ব্যাখ্যা

প্রথমতঃ অবজেক্টের শ্রেণীবিন্যাস (Array) তৈরি করা হয়ঃ
অক্ষরভিত্তিক শ্রেণীবিন্যাস (Array) নির্ধারণ করে কোনো অবজেক্টের শ্রেণীবিন্যাস (Array) তৈরি করা হয়। প্রত্যেকটি অবজেক্টের দুটি বৈশিষ্ট্য নির্ধারণ করে দেয়া হয়, display এবং url । শ্রেণীবিন্যাস (Array) কে myArray নাম দেয়া হয়।

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}

myFunction() কে myArray এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়। যথা,

myFunction(myArray);

তৃতীয়তঃ টেক্সট ফাইল তৈরি করা হয়ঃ

myTutorials.txt: নামক ফাইলের মধ্যে অক্ষরভিত্তিক শ্রেণীবিন্যাসকে রাখা হয়।

[
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

চতুর্থতঃ XMLHttpRequest দ্বারা টেক্সট ফাইল পড়া হয়ঃ

XMLHttpRequest লেখা হয় টেক্সট ফাইল পড়ার জন্য, এবং শ্রেণীবিন্যাস দেখানোর জন্য myFunction() ব্যবহার করা হয়।

XMLHttpRequest

var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   var myArr = JSON.parse(xmlhttp.responseText);
   myFunction(myArr);
   }
}

xmlhttp.open("GET", url, true);
xmlhttp.send();

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন সিনট্যাক্স (JSON Syntax)

May 10, 2015 Author-Check- Article-or-Video Leave a comment

জেএসওএন সিনট্যাক্স

রিদওয়ান বিন শামীম

জেএসওএন সিনট্যাক্স, জাভাস্ক্রিপ্ট সিনট্যাক্সের একটি সাবসেট।

জেএসওএন সিনট্যাক্সের নিয়মাবলী

জেএসওএন সিনট্যাক্স, জাভাস্ক্রিপ্টের অবজেক্ট নোটেশন সিনট্যাক্স থেকে উদ্ভূত ।

ডাটা নাম ও মানের জোড়ায় থাকে
ডাটা কমা দ্বারা আলাদা করা থাকে
কুঁকড়ানো ব্র্যাকেট {} দ্বারা অবজেক্ট আবদ্ধ থাকে
স্কয়ার ব্র্যাকেট [ ] দ্বারা শ্রেণীবিন্যাস আবদ্ধ থাকে।

জেএসওএন ডাটা - একটি নাম ও একটি মান

জেএসওএন ডাটাকে নাম ও মানের জোড়ায় লেখা হয়ে থাকে। নাম ও মানের জোড়া ডাবল কোটে আবদ্ধ ফিল্ড নেম, একটি কোলন চিহ্ন ও একটি মান নিয়ে গঠিত হয়।

উদাহরণ,

"firstName":"John"

নোট : জেএসওএন নামে ডাবল কোটের দরকার হয়, জাভাস্ক্রিপ্টের নামের বেলায় দরকার হয় না।

জেএসওএন মান

জেএসওএন মান যেরকম হতে পারে

সংখ্যা (পূর্ণসংখ্যা বা ফ্লোটিং পয়েন্ট )
স্ট্রিং (ডাবল কোটে থাকবে )
Boolean (সত্য বা মিথ্যা)
শ্রেণীবিন্যাস (স্কয়ার ব্র্যাকেট দ্বারা আবদ্ধ)
অবজেক্ট (কুঁকড়ানো ব্র্যাকেট দ্বারা আবদ্ধ)

জেএসওএন অবজেক্ট

জেএসওএন অবজেক্ট কুঁকড়ানো ব্র্যাকেট দ্বারা আবদ্ধ থাকে। জাভাস্ক্রিপ্টের মত জেএসওএন অবজেক্ট মাল্টিপল নাম ও মানের জোড়া সংরক্ষণ করে,

উদাহরণ,

{"firstName":"John", "lastName":"Doe"}

জেএসওএন অ্যারে

স্কয়ার ব্র্যাকেট দ্বারা অ্যারে আবদ্ধ থাকে। জাভাস্ক্রিপ্টের মত জেএসওএন অ্যারে মাল্টিপল অবজেক্ট সংরক্ষণ করতে পারে।

উদাহরণ,

"employees":[
     {"firstName":"John", "lastName":"Doe"},
     {"firstName":"Anna", "lastName":"Smith"},
     {"firstName":"Peter","lastName":"Jones"}
]

উপরের উদাহরণে "employees" হল একটি শ্রেণীবিন্যাস যা তিনটি অবজেক্টকে ধরে রেখেছে, যাদের প্রত্যেকটি এক একজন ব্যক্তির নাম, (ফার্স্ট নেম ও লাস্ট নেম)।

জেএসওএন জাভাস্ক্রিপ্টের সিনট্যাক্স ব্যবহার করে

যেহেতু জেএসওএন সিনট্যাক্স, জাভাস্ক্রিপ্টের অবজেক্ট নোটেশন সিনট্যাক্স থেকে উদ্ভূত তাই জাভাস্ক্রিপ্টে জেএসওএন নিয়ে কাজ করলে খুব কম সংখ্যক অতিরিক্ত সফটওয়ার প্রয়োজন হয়। জাভাস্ক্রিপ্টের মাধ্যমে অবজেক্টের শ্রেণীবিন্যাস তৈরি করে তাতে ডাটা সন্নিবেশ করা যায়, যেমন,

var employees = [
      {"firstName":"John", "lastName":"Doe"},
      {"firstName":"Anna", "lastName":"Smith"},
      {"firstName":"Peter","lastName": "Jones"}
];

জাভাস্ক্রিপ্ট অবজেক্টের শ্রেণীবিন্যাসের প্রথম সত্ত্বাকে যেভাবে দেখানো যায়,

// returns John Doe
 employees[0].firstName + " " + employees[0].lastName;

এটিকে এভাবেও দেখানো যেতে পারে,

// returns John Doe
 employees[0]["firstName"] + " " + employees[0]["lastName"];

ডাটা এভাবে পরিবর্তিত হতে পারে,

employees[0].firstName = "Gilbert";

এটি এভাবেও পরিবর্তিত হতে পারে,

employees[0]["firstName"] = "Gilbert";

পরবর্তী অধ্যায়ে দেখানো হবে কীভাবে জেএসওএন টেক্সটকে জাভাস্ক্রিপ্ট অবজেক্টে পরিনত করা হয়।

জেএসওএন ফাইল

জেএসওএন ফাইলের ফাইল টাইপ হল ".json"
জেএসওএন টেক্সটের MIME টাইপ হল "application/json"

JavaScript

জাভাস্ক্রিপ্ট স্ট্রিং (JavaScript Strings)

May 9, 2015 Rafiqul Islam Leave a comment

জাভাস্ক্রিপ্ট স্ট্রিং (JavaScript Strings)

জাভাস্ক্রিপ্ট স্ট্রিং টেক্সট (লেখা) সংরক্ষণ ও কাজে লাগানোর জন্য ব্যবহার করা হয়।
জাভাস্ক্রিপ্ট স্ট্রিং সাধারণভাবে একগুচ্ছ বর্ণকে পরবর্তীতে ব্যবহারের জন্য সংরক্ষণ করে। যেমন: "John Doe"
স্ট্রিং কোটেশনর এর ভিতরে যেকোন লেখা হতে পারে। আপনি একক বা ডবল কোটেশন ব্যবহার করতে পারেন।

যেমন:

var carname = "Volvo XC60";
var carname = 'Volvo XC60';

আপনি স্ট্রিং এর ভিতরে যতবার খুশি কোটেশন ব্যবহার করতে পারেন, যতক্ষন পর্যন্ত না প্রথম ও শেষ কোটেশন মিলে যায়।

উদাহরণ:

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

স্ট্রিং এর দৈঘ্য

একটি স্ট্রিং এর দৈর্ঘ্য হবে প্রোপার্টি এ নির্দিষ্টকৃত দৈর্ঘ্য (length):

উদাহরণ:

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

বিশেষ বর্ণ

যেহেতু স্ট্রিং কোটেশন এর ভিতরে লিখতে হয়, সেহেতু নিচের উদাহরণটিকে ভুল বুঝে:

var y = "We are the so-called "Vikings" from the north."

উপরের স্ট্রেংটিকে মনে করে, "We are the so-called" .

এই সমস্যা সমাধানের উপায় হল, \ অক্ষরের অব্যাহতি (escape character) ব্যবহার করা।

এই অক্ষরের অব্যাহতি ব্যাকস্লাসটি বিশেষ বর্ণকে স্ট্রিং হিসেবে ফেরত দেয়।:

উদাহরণ:

var x = 'It\'s alright';
var y = "We are the so-called \"Vikings\" from the north."

অব্যাহতি অক্ষর (\) অন্যান্য বিশেষ বর্ণকেও স্ট্রিং হিসেবে ব্যবহার করতে ব্যবহৃত হয়।

এখানে বিশেষ বর্ণের একটি তালিকা দেওয়া হল যা ব্যাকস্লাস (\) এর মাধ্যমে টেক্স স্ট্রিং হিসেবে ব্যবহার করা যায়:

কোড	আউটপুট
\'	একক কোটেশন
\"	ডবল কোটেশন
\\	ব্যাকস্লাস
\n	নতুন লাইন
\r	বহন ফেরত
\t	ট্যাব
\b	ব্যাকস্পেস
\f	ফর্ম ফিড

লম্বা কোড এর লাইনকে ভেঙ্গে দেওয়া

সহজে পড়ার উপযোগী করার জন্য অনেক সময় প্রোগ্রামাররা 80 বর্ণের অধিক ক্যারেকটার এর লম্বা লাইনকে ভেঙ্গে লেখেন।

যদি জাভাস্ক্রিপ্ট এর স্টেটমেন্ট এক লাইনে সংকুলান না হয়, তাহলে সবচেয়ে ভাল উপায় হলো কোন অপারেটর এর শেষে এটিকে ভেঙ্গে দেওয়া।

উদাহরণ:

document.getElementById("demo").innerHTML =
"Hello Dolly.";

আপনি টেক্স স্ট্রিং এর ভিতরে একটি একক ব্যাকস্লাস (\) ব্যবহার করেও লাইটকে ভাঙ্গতে পারেন।

উদাহরণ:

document.getElementById("demo").innerHTML = "Hello \
Dolly!";

নোট : \ মেথড ECMAScript (জাভাস্ক্রিপ্ট) স্ট্যান্ডার্ড নয়। কিছু ব্রাউজার \ (স্লাস) এর পেছনে স্পেস সাপোর্ট করে না।

একটি দীর্ঘ স্ট্রিং কে ভাঙ্গার নিরাপদ (কিন্তু একটু সময়সাপেক্ষ) পথ হচ্ছে স্ট্রিং সংযোযন ব্যবহার করা:

উদাহরণ:

document.getElementById("demo").innerHTML = "Hello" +
"Dolly!";

আপনি কোড লাইনকে ব্যাকস্লাস দিয়ে ভাঙ্গতে পারবেন না:

উদাহরণ:

document.getElementById("demo").innerHTML = \
"Hello Dolly!";

স্ট্রিং অবজেক্টও হতে পারে

সাধারণভাবে জাভাস্ক্রিপ্ট স্ট্রিং হচ্ছে আদিম মান (primitive values), অক্ষর দিয়ে তৈরি: var firstName = "John"

কিন্তু স্ট্রিং কে new কীওয়ার্ড এর সাহায্যে অবজেক্ট হিসেবেও ব্যবহার করা যেতে পারে : var firstName = new String("John")

উদাহরণ :

var x = "John";
var y = new String("John");

// typeof x will return string
// typeof y will return object

নোট: স্ট্রিং কে অবজেক্ট হিসেবে ব্যবহার করবেন না। এটি প্রক্রিয়াকরণ গতিকে ধরি করে ফেলে এবং বাজে পার্শ্বপ্রতিক্রিয়া উৎপন্ন হয়।

যখন == সমান অপারেটর ব্যবহার করবেন, সমান স্ট্রিংগুলো সমান দেখাবে:

যেমন:

var x = "John";
var y = new String("John");

// (x == y) is true because x and y have equal values

যখন আপনি === সমান অপারেটর ব্যবহার করবেন, সমস্ট্রিংগুলো সবসময় সমান থাকবে না, কারণ === অপারেটর মান এবং টাইপ একই হবে বলে আশা করে।

var x = "John";
var y = new String("John");

// (x === y) is false because x and y have different types

বা, অবজেক্ট এর সাথে অবজেক্ট তুলনা করা যায় না:

যেমন:

var x = new String("John");
var y = new String("John");

// (x == y) is false because objects cannot be compared

স্ট্রিং প্রোপার্টি এবং মেথড

আদিম মান, যেমন "John Doe" এর কোন প্রোপার্টিজ এবং মেথড থাকতে পারে না (কেননা এরা অবজেক্ট নয়)।

কিন্তু জাভাস্ক্রিপ্টে আদিম মান এর জন্যও মেথড এবং প্রোপার্টিজ রয়েছে, কারণ যখন মেথড এবং প্রোপার্টিজ কার্যে পরিণত করা হয় তখন ভাজাস্ক্রিপ্ট আদিম মানকে একইরূপে অবজেক্ট হিসেবে গণ্য করে।

স্ট্রিং মেথড সম্পর্কে পরবর্তী অধ্যায় এ আলোচনা করা হয়েছে।

স্ট্রিং প্রোপার্টিজ

প্রোপার্টি (Property)	বর্ণনা
constructor	যে ফাংশনটি স্ট্রিং অবজেক্ট এর প্রোটোটাইপ তৈরী করেছিলেন তা ফেরত দেয়
length	স্ট্রিং এর length ফেরত দেয়
prototype	আপনাকে একটি অবজেক্ট এর ভিতরে প্রোপার্টি এবং মেথড যোগ করার অনুমতি প্রদান করে।

স্ট্রিং মেথড

মেথড (Method)	বর্ণনা
charAt()	সুনির্দিষ্ট ইনডেক্স এর (অবস্থান) নির্দিষ্ট বর্ণ ফেরত দেয়।
charCodeAt()	সুনির্দিষ্ট ইনডেক্স এর নির্দিষ্ট ইউনিকোড বর্ণ ফেরত দেয়।
concat()	দুই বা ততোধিক স্ট্রিং কে যুক্ত করে এবং তার একটি অনুলিপি ফেরত দেয়।
fromCharCode()	ইউনিকোড মানকে বর্ণে পরিবর্তন করে।
indexOf()	স্ট্রিং এর নির্দিষ্ট মান এর ভিতরে প্রথম পাওয়া কাঙ্খিত ঘটনা এর অবস্থান ফেরত দেয়।
lastIndexOf()	স্ট্রিং এর নির্দিষ্ট মান এর ভিতরে শেষ পাওয়া কাঙ্খিত ঘটনা এর অবস্থান ফেরত দেয়।
localeCompare()	বর্তমান অবস্থানের দুটি স্ট্রিং এর মধ্যে তুলনা করে।
match()	রেগুলার এক্সপ্রেশন এর মধ্যে একটি স্ট্রিং কে খুঁজে এবং খুঁজে পাওয়া ফলাফল ফেরত দেয়।
replace()	স্ট্রিং এর নির্দিষ্ট মান খোঁজে এবং নতুন একটি স্ট্রিং দ্বারা প্রতিস্থাপণ করে তা ফেরত দেয়।
search()	স্ট্রিং এর নির্দিষ্ট মান খোঁজে এবং এর অবস্থান ফেরত দেয়।
slice()	স্ট্রিং এর সার অংশ বের করে এবং নতুন একটি স্ট্রিং ফেরত দেয়।
split()	স্ট্রিং কে বিভাজন করে সাবস্ট্রিং এর অ্যারে তৈরি করে।
substr()	স্ট্রিং এর নির্দিষ্ট অংশ এর সার অংশ বের করে কিছুসংখ্যক বর্ণের মাধ্যমে।
substring()	দুইটি নির্দিষ্ট অবস্থান এর মধ্যে একটি স্ট্রিং এর নির্দিষ্ট অংশ এক্সট্রাক্ট করে।
toLocaleLowerCase()	স্ট্রিং কে ছোট হাতের অক্ষরে পরিণত কর।
toLocaleUpperCase()	স্ট্রিং কে বড় হাতের অক্ষরে পরিণত করে।
toLowerCase()	স্ট্রিং কে ছোট হাতের অক্ষরে পরিণত কর।
toString()	স্ট্রিং অবজেক্ট এর মান ফেরত দেয়।
toUpperCase()	স্ট্রিং কে বড় হাতের অক্ষরে পরিণত করে।
trim()	স্ট্রিং এর উভয় প্রান্ত থেকে ফাঁকা স্পেস মুছে ফেলে।
valueOf()	স্ট্রিং অবজেক্ট এর আদি মান ফেরত দেয়।

নিজে নিজে অনুশীলন কর!

অনুশীলন 01:

ইঙ্গিত: ভেরিয়েবল টেক্সট এ স্ট্রিং "Hello World!" নির্ধারণ কর।

<!DOCTYPE html>
<html>
<body>

</body>
</html>

অনুশীলন 02:

ইঙ্গিত: টেক্সট ভেরিয়েবল এর মান এর দৈর্ঘ্য প্রদর্শনের জন্য length প্রোপার্টি ব্যবহার কর।

<!DOCTYPE html>
<html>
<body>

</body>
</html>

অনুশীলন 03:

ইঙ্গিত: স্ট্রিং টি ভেঙ্গে গেছে - ঠিকভাবে প্রদর্শনের জন্য অক্ষরের অব্যাহতি (escape character) ব্যবহার কর।

<!DOCTYPE html>
<html>
<body>

</body>
</html>

অনুশীলন 04:

ইঙ্গিত: শ্রেণীবদ্ধভাবে সংযুক্ত দুটি স্ট্রিং প্রদর্শন করে "হ্যালো ওয়ার্ল্ড!"

<!DOCTYPE html>
<html>
<body>

<p id="demo">Display the result here.</p>

</body>
</html>

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন টিউটোরিয়াল (JSON Tutorial)

May 7, 2015 Author-Check- Article-or-Video Leave a comment

JSON টিউটোরিয়াল

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

JSON: জাভাস্ক্রিপ্ট অবজেক্ট নটেশন (JavaScript Object Notation)।
JSON হল তথ্য সংরক্ষণ এবং তথ্য আদান প্রদানের জন্য একটি শব্দবিন্যাস ।
JSON XML এ ব্যবহারের একটি সহজতম বিকল্প ।

নিম্নলিখিত JSON উদাহরণটি কর্মচারীদের লক্ষ্য নির্ধারণ করে,, একটি অ্যারের সাথে ৩ জন কর্মচারীর রেকর্ড দেয়া হল :
JSON উদাহরণ

{"employees":[
      {"firstName":"John", "lastName":"Doe"},
      {"firstName":"Anna", "lastName":"Smith"},
      {"firstName":"Peter", "lastName":"Jones"}
]}

নিম্নলিখিত XML উদাহরণটিও 3 কর্মচারীর সাথে কর্মীদের লক্ষ্য রেকর্ড নির্ধারণ করে ।
এক্সএমএল উদাহরণ

<employees>
     <employee>
         <firstName>John</firstName> <lastName>Doe</lastName>
     </employee>
     <employee>
         <firstName>Anna</firstName> <lastName>Smith</lastName>
     </employee>
     <employee>
         <firstName>Peter</firstName> <lastName>Jones</lastName>
     </employee>
 </employees>

JSON কি?

• JSON জাভাস্ক্রিপ্ট অবজেক্ট নটেশনকে ভিত্তি করে গড়ে ওঠে ।
• JSON একটি লাইটওয়েট তথ্য-ইন্টারচেঞ্জ ফরম্যাট ।
• JSON একটি স্বাধীন ভাষা ।
• JSON একটি "স্ব-বর্ণনা" এবং বুঝতে সহজ ।
* JSON জাভাস্ক্রিপ্ট সিনট্যাক্স ব্যবহার করে, কিন্তু JSON বিন্যাস শুধু লিখিত, যেমন XML । প্রোগ্রামিং ভাষা দ্বারা এই লেখাগুলো পড়া যায় ডাটা ফরম্যাট হিসাবে ব্যবহার করা যাব ।

JavaScript

জাভাস্ক্রিপ্ট অ্যাসাইনমেন্ট JavaScript Assignment

May 5, 2015 Rafiqul Islam Leave a comment

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

অ্যাসাইনমেন্ট অপারেটর ভেরিয়েবল এর মান নির্ধারণ করে।

অপারেটর	উদাহরণ	একই হিসাবে
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

= অ্যাসাইনমেন্ট অপারেটরটি ভেরিয়েবল এর মান নির্ধারণ করে।

var x = 10;

+= অ্যাসাইনমেন্ট অপারেটরটি ভেরিয়েবল এর সাথে একটি মান যোগ করে।

var x = 10;
x += 5;

-= অ্যাসাইনমেন্ট অপারেটরটি ভেরিয়েবল থেকে একটি মান বিয়োগ করে।

var x = 10;
x -= 5;

*= অ্যাসাইনমেন্ট অপারেটরটি ভেরিয়েবল এর সাথে একটি মান গুণন করে।

var x = 10;
x *= 5;

/= অ্যাসাইনমেন্ট অপারেটরটি ভেরিয়েবলকে একটি মান দ্বারা ভাগ করে।

var x = 10;
x /= 5;

%= অ্যাসাইনমেন্ট অপারেটরটি ভেরিয়েবলকে একটি মান দ্বারা ভাগ করে ভাগশেষ প্রদান করে।

var x = 10;
x %= 5;

JavaScript

গাণিতিক জাভাস্ক্রিপ্ট (JavaScript Arithmetic)

May 5, 2015 Rafiqul Islam Leave a comment

গাণিতিক জাভাস্ক্রিপ্ট (JavaScript Arithmetic)

সাধারণভাবে সংখ্যা নিয়ে কাজ করাই হচ্ছে গাণিতিক

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

গাণিতিক অপারেটর সংখ্যা (আক্ষরিক বা ভেরিয়েবল) নিয়ে গাণিতিক কার্য সম্পাদন করে।

অপারেটর	বর্ণনা
+	যোগ
-	বিয়োগ
*	গুণ
/	ভাগ
%	ভাগশেষ
++	বৃদ্ধি
--	হ্রাস

গাণিতিক অপারেশন

একটি সাধারণ গাণিতিক অপারেশন দুটি সংখ্যার উপর কাজ করে।

সংখ্যা দুইটি লিটারেল (স্বাভাবিক সংখ্যা) হতে পারে

উদাহরণ

var x = 100 + 50;

বা ভেরিয়েবল

উদাহরণ

var x = a + b;

অথবা এক্সপ্রেশন (রাশিমালা)

var x = (100 + 50) * a;

অপারেটর ও অপারেন্ডস (অপারেশন বা কার্যসম্পাদনের সংখ্যা)

সংখ্যাকে (গাণিতিক অপারেশন এ) বলা হয় অপারেন্ডস।

অপারেশন (ক্রিয়াপ্রণালী) (দুইটি অপারেন্ডস এর মধ্যে সম্পন্ন হয়) কে বলা অপারেটর দ্বারা সংঙ্গায়িত করা হয়।

অপারেন্ড	অপারেটর	অপারেন্ড
100	+	50

এডিশন (যোগ) অপারেটর সংখ্যাগুলোকে যোগ করে

var x = 5;
var y = 2;
var z = x + y;

সাবস্ট্রাকশন (বিয়োগ) অপারেটর সংখ্যাগুলোকে বিয়োগ করে

var x = 5;
var y = 2;
var z = x - y;

মাল্ডিপ্লিকেশন (গুণ) অপারেটর সংখ্যাগুলোকে গুণ করে

var x = 5;
var y = 2;
var z = x * y;

ডিভিশন (ভাগ) অপারেটর সংখ্যাগুলোকে ভাগ করে

var x = 5;
var y = 2;
var z = x / y;

মডুলার (ভাগশেষ) অপারেটর ভাগশেষ প্রদান করে

var x = 5;
var y = 2;
var z = x % y;

ইনক্রেমেন্ট অপারেটর সংখ্যার মান বৃদ্ধি করে

var x = 5;
x++;
var z = x;

ডিক্রিমেন্ট অপারেটর সংখ্যার মান হ্রাস করে

var x = 5;
x--;
var z = x;

অপারেটর প্রাধান্য (Operator Precedence)

কোন অপারেটর এর কাজ আগে সম্পন্ন হবে তা গাণিতিক নিয়ম অনুযায়ীই সম্পন্ন হয়।

var x = 100 + 50 * 3;

এর ফলালাল কি 130*3 এর সমান নাকি 100 + 150 এর সমান?

যোন নাকি গুণ এর কাজ আগে সম্পন্ন হবে?

প্রথাগত স্কুল এর গণিত এর নিয়ম অনুসারে গুণ এর কাজ আগে সম্পন্ন হবে।

গুণ (*) এবং ভাগ (/) কে যোগ (+) এবং বিয়োগ (-) এর থেকে অধিক প্রাধান্য দেয়া হয়।

এবং (স্কুল গণিতের নিয়ম অনুসারে) বন্ধনি চিহ্ন প্রদানের মাধ্যমে প্রাধান্য পরিবর্তণ করা যায়।

উদাহরণ

var x = (100 + 50) * 3;

বন্ধনি চিহ্ন ব্যবহার কররে বন্ধনির ভিতরের কার্য আগে সম্পন্ন হয়।
যখন অনেকগুলো অপারেশন সমগুরুত্বের হয় (যেমন গুণ এবং ভাগ), তারা বাম এরটি আগে এবং ক্রমান্নয়ে ডানেরগুলো নির্ণয় করে।
উদাহরণ

var x = 100 + 50 - 3;

গাণিতিক অপারেটর প্রাধান্য

নিম্নের টেবিলে উচ্চ হতে নিম্ন প্রাধান্য অনুসারে জাভাস্ক্রিপ্ট এর গাণিতিক অপারেটর এর তালিকা প্রদান করা হয়েছে।

অপারেটর	প্রাধান্য
( )	বন্ধনি
++ --	বৃদ্ধি এবং হ্রাস
* / %	গুণন, বিভাজন, এবং ভাগশেষ
+ -	যোগ এবং বিয়োগ

নোট : প্রথম বন্ধনির মধ্যকার অংশ অন্য যেকোন অংশের পূর্বে নির্ণয় করা হয়।

JavaScript, JavaScript Frameworks

জাভাস্ক্রিপ্ট টিউটোরিয়াল JavaScript Tutorial

May 1, 2015 Rafiqul Islam Leave a comment

জাভাস্ক্রিপ্ট টিউটোরিয়াল JavaScript Tutorial

জাভাস্ক্রিপ্ট হচ্ছে এইচটিএমএল ও ওয়েব এর একটি প্রোগ্রামিং ভাষা।
প্রোগ্রামিং ভাষা আপনি কম্পিউটারকে যেভাবে কাজ করাতে চান সেভাবে কাজ করায়।
জাভাস্ক্রিপ্ট শেখা সহজ।
এই টউটোরিয়ালটি আপনাকে প্রাথমিক থেকে উচ্চতর জাভাস্ক্রিপ্ট শেখাবে।

প্রতি অধ্যায় এ উদাহরণ

প্রতি অধ্যায় এ উদাহরণ সন্নিবেশিত করা হয়েছে।

যেমন:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>

ফলাফল

My First JavaScript

উদাহরণ এর সাহায্যে শেখা

উদাহরণ 1000 শব্দ দ্বারা বর্ণনা করা থেকেও ভাল। শেখার জন্য অনেক ক্ষেত্রে উদাহরণ ব্যাখ্যা দেখে শেখার চেয়েও সহজতর।

নোট: আপনি যদি সকল উদাহরণ ব্যবহার করে দেখেন, তাহলে আপনি খুব অল্প সময়ে জাভাস্ক্রিপ্ট সম্পর্কে প্রচুর জানতে পারবেন।

জাভাস্ক্রিপ্ট কেন শিখবেন?

জাভাস্ক্রিপ্ট হচ্ছে তিনটি ল্যাংগুয়েজ এর মধ্যে একটি যা প্রত্যেক ওয়েব ডেভেলপারকে অবশ্যই শিখতে হয়:

HTML ওয়েব পেজ উপাদানগুলো সন্নিবেশিত করতে
CSS ওয়েব পেজ এর বিন্যাস/সাজসজ্জা নির্দিষ্ট করতে
JavaScript ওয়েব পেজ এর আচরণ প্রোগ্রামিং এর সাহায্যে নিয়ন্ত্রণ করতে

এই টিউটোরিয়ালটি হচ্ছে জাভাস্ক্রিপ্ট সম্পর্কে, এবং জাভাস্ক্রিপ্ট কিভাবে এইচটিএমএল এবং সিএসএস এর সাথে কাজ করে সে সম্পর্কে।

শেখার গতি

এই টউটোরিয়ার এ শেখার গতি আপনার পছন্দের উপর নির্ভর করে।
সবকিছুই আপনার উপর।
আপনি যদি কোন কিছু পুরোপুরি বুঝতে না পারেন তাহলে আপনি বিরতি নিতে পারেন বা পু্ণরায় পড়তে পারেন।
সবসময়ই নিশ্চিত হয়ে নিন যে আপনি উদাহরণগুলো বুঝতে পেরেছেন।

মঙ্গ ডি বি । MongoDB

MongoDB PHP. MongoDB পিএইচপি

April 24, 2015 Author-Check- Article-or-Video

MongoDB পিএইচপি

নয়ন চন্দ্র দত্ত

পিএইচপি এর সঙ্গে MongoDB ব্যবহার করার জন্য আপনাকে MongoDB পিএইচপি ড্রাইভার ব্যবহার করতে হবে। নিচের লিঙ্ক থেকে ড্রাইভারটি ডাউনলোড করে নিনঃ
https://s3.amazonaws.com/drivers.mongodb.org/php/index.html
সর্বশেষ রিলিজ ডাউনলোড করতে ভুলবেন না। এখন আর্কাইভটি আনজিপ করুন এবং আপনার পিএইচপি এক্সটেনশন ডিরেক্টরির ("ext" ডিফল্টভাবে) মধ্যে php_mongo.dll এ এবং নিচের লাইন্টি php.ini এ স্থাপন করুনঃ

extension=php_mongo.dll

একটি সংযোগ তৈ্রী করুন এবং একটি ডাটাবেস নির্বাচন করুন। একটি সংযোগ করতে আপনাকে ডাটাবেসের নাম নির্দিষ্ট করতে হবে, যদি ডেটাবেস উপস্থিত না থাকে তাহলে MongoDB স্বয়ংক্রিয়ভাবে এটি তৈরি করবে।
ডেটাবেসের সাথে সংযোগ করার জন্য কোড স্নিপেট নিম্নরূপ হবেঃ

php
// connect to mongodb
$m = new MongoClient();
echo "Connection to database successfully";
// select a database
$db = $m->mydb;
echo "Database mydb selected";
?>

যখন প্রোগ্রাম নিষ্পন্ন হয় তখন তার ফলাফল নিম্নরূপ হবেঃ

Connection to database successfully
Database mydb selected

কালেকশন তৈরি করা
একটি কালেকশন তৈরি করার জন্য কোড স্নিপেট নিম্নরূপ হবেঃ

যখন প্রোগ্রাম নিষ্পন্ন হয় তখন তার ফলাফল নিম্নরূপ হবেঃ

Connection to database successfully
Database mydb selected
Collection created succsessfully

ডকুমেন্ট প্রবেশ করান

MongoDB তে একটি ডকুমেন্ট প্রবেশ করাতে হলে insert() পদ্ধতি ব্যবহৃত হয়।
ডকুমেন্ট প্রবেশ করানোর জন্য কোড স্নিপেট নিম্নরূপ হবেঃ

php
// connect to mongodb
$m = new MongoClient();
echo "Connection to database successfully";
// select a database
$db = $m->mydb;
echo "Database mydb selected";
$collection = $db->mycol;
echo "Collection selected succsessfully";
$document = array(
"title" => "MongoDB",
"description" => "database",
"likes" => 100,
"url" => "http://www.tutorialspoint.com/mongodb/",
"by", "tutorials point"
);
$collection->insert($document);
echo "Document inserted successfully";
?>

যখন প্রোগ্রাম নিষ্পন্ন হয় তখন তার ফলাফল নিম্নরূপ হবেঃ

Connection to database successfully
Database mydb selected
Collection selected succsessfully
Document inserted successfully

সব ডকুমেন্ট খুজে পেতে

কালেকশন থেকে সব ডকুমেন্ট সিলেক্ট করতে find() পদ্ধতি ব্যবহৃত হয়।
সব ডকুমেন্ট সিলেক্ট করার জন্য কোড স্নিপেট নিম্নরূপ হবেঃ

<?php
// connect to mongodb
$m = new MongoClient();
echo "Connection to database successfully";
// select a database
$db = $m->mydb;
echo "Database mydb selected";
$collection = $db->mycol;
echo "Collection selected succsessfully";

$cursor = $collection->find();
// iterate cursor to display title of documents
foreach ($cursor as $document) {
echo $document["title"] . "\n";
}
?>

যখন প্রোগ্রাম নিষ্পন্ন হয় তখন তার ফলাফল নিম্নরূপ হবেঃ

Connection to database successfully
Database mydb selected
Collection selected succsessfully
{
"title": "MongoDB"
}

ডকুমেন্ট আপডেট করা

ডকুমেন্ট আপডেট করার জন্য update() পদ্ধতি ব্যবহার করতে হবে।
নিচে দেওয়া উদাহরণে আমরা প্রবেশিত ডকুমেন্টের টাইটেল MongoDB Tutorial এ আপডেট করব।
ডকুমেন্ট আপডেট করার জন্য কোড স্নিপেট নিম্নরূপ হবেঃ

// now update the document
$collection->update(array("title"=>"MongoDB"), array('$set'=>array("title"=>"MongoDB Tutorial")));
echo "Document updated successfully";
// now display the updated document
$cursor = $collection->find();
// iterate cursor to display title of documents
echo "Updated document";
foreach ($cursor as $document) {
echo $document["title"] . "\n";
}
?>

যখন প্রোগ্রাম নিষ্পন্ন হয় তখন তার ফলাফল নিম্নরূপ হবেঃ

Connection to database successfully
Database mydb selected
Collection selected succsessfully
Document updated successfully
Updated document
{
"title": "MongoDB Tutorial"
}

ডকুমেন্ট ডিলিট করা বা মুছে ফেলা

একটি ডকুমেন্ট ডিলিট করতে হলে remove() পদ্ধতি ব্যবহার করতে হবে।
নিচে দেওয়া উদাহরণে আমরা MongoDB Tutorial টাইটেলের ডকুমেন্ট ডিলিট করব।
ডকুমেন্ট ডিলিট করার জন্য কোড স্নিপেট নিম্নরূপ হবেঃ

// now remove the document
$collection->remove(array("title"=>"MongoDB Tutorial"),false);
echo "Documents deleted successfully";

// now display the available documents
$cursor = $collection->find();
// iterate cursor to display title of documents
echo "Updated document";
foreach ($cursor as $document) {
echo $document["title"] . "\n";
}
?>

যখন প্রোগ্রাম নিষ্পন্ন হয় তখন তার ফলাফল নিম্নরূপ হবেঃ

Connection to database successfully
Database mydb selected
Collection selected succsessfully
Documents deleted successfully

উপরের দেওয়া উদাহরণে দ্বিতীয় প্যারামিটার বুলিয়ান টাইপের এবং remove() পদ্ধতিতে justOne এর জন্য ব্যবহৃত হয়েছে।
MongoDB পদ্ধতির অবশিষ্ট findOne(), save(), limit(), skip(), sort() ইত্যাদি একইরকম কাজ করে যা উপরের উদাহণে ব্যাখ্যা করা হয়েছে।

মঙ্গ ডি বি । MongoDB

MongoDB Create Backup. MongoDB ব্যাকআপ তৈরি করা

April 24, 2015 Author-Check- Article-or-Video

MongoDB ব্যাকআপ তৈরি করা

নয়ন চন্দ্র দত্ত

কি খবর সবার? আশা করছি সবাই ভাল আছেন। আজ আমি হাজির হয়েছি একটি নতুন টিউটোরিয়াল নিয়ে। আজ আমরা দেখব কীভাবে MongoDB ব্যাকআপ তৈরি করা যায়। তাহলে
আর কথা না বাড়িয়ে আজকের টিউটোরিয়াল শুরু করি।

MongoDB তথ্য ডাম্প

MongoDB তে ডেটাবেসের ব্যাকআপ তৈরি করতে আপনাকে mongodump কমান্ড ব্যবহার করতে হবে। এই কমান্ড ডাম্প ডিরেক্টরির মধ্যে আপনার সার্ভারের সব তথ্য ডাম্প করবে।
এখানে অনেক অপশন আছে যা দ্বারা আপনি তথ্যের পরিমাণ সীমাবদ্ধ বা আপনার দূরবর্তী সার্ভারে ব্যাকআপ তৈরি করতে পারেন।

সিনট্যাক্স

mongodump কমান্ড মৌলিক বাক্য গঠন নিম্নরূপঃ
>mongodump

উদাহরণ
আপনার mongod সার্ভার আরম্ভ করুন। অনুমেয় যে আপনার mongod সার্ভার এ লোকালহোস্ট চলমান। এবং পোর্ট 27017 । এখন একটি কমান্ড প্রম্পট খুলুন এবং উদাহরণস্বরূপ আপনার
MongoDB বিন ডিরেক্টরিতে যান এবং mongodump কমান্ড টাইপ করুন। নিম্নলিখিতভাবে mycol collectioin বিবেচনা করুনঃ
>mongodump

কমান্ড 127.0.0.1 এ চলমান সার্ভারের সাথে এবং পোর্ট 27017 সংযোগ করবে এবং ডিরেক্টরিতে আপনার সার্ভারে সব তথ্য ফিরিয়ে আনুন।
এখানে অনেক available অপশন আছে যা Mongodump কমান্ড এর সাথে ব্যবহার করা যেতে পারে। শুধুমাত্র নির্দিষ্ট ডেটাবেসের নির্দিষ্ট পথে এই কমান্ড এ ব্যাকআপ হবে ।

সিনট্যাক্সঃ mongodump --host HOST_NAME --port PORT_NUMBER
বর্ণনাঃ এই কমান্ড উদাহরণস্বরূপ mongod এর সব ডেটাবেস ব্যাকআপ করবে
উদাহরণঃ mongodump --host tutorialspoint.com --port 27017

সিনট্যাক্সঃ mongodump --dbpath DB_PATH --out BACKUP_DIRECTORY
উদাহরণঃ mongodump --dbpath /data/db/ --out /data/backup/

সিনট্যাক্সঃ mongodump --collection COLLECTION --db DB_NAME
বর্ণনাঃ এই কমান্ড উদাহরণস্বরূপ mongod এর সব ডেটাবেস ব্যাকআপ করবে
উদাহরণঃ mongodump --collection mycol --db test

Restore বা তথ্য পুনরুদ্ধার

ব্যাকআপ করতে MongoDB এর mongorestore কমান্ড ব্যবহার করা হয় । এই কমান্ড ব্যাক আপ ডিরেক্টরি থেকে সমস্ত তথ্য পুনরুদ্ধার করবে। Mongorestore এর বেসিক সিনট্যাক্স বা বাক্য
গঠন এর জন্য কমান্ড হচ্ছে-
>mongorestore

আশা করছি সবার ভাল লেগেছে আজকের টিউটোরিয়াল। পরবর্তিতে MongoDB বিষয়ক আরো টিউটোরিয়াল নিয়ে হাজির হব। আজকের মত এই পর্যন্তই আর কোন সমস্যা হলে নিশ্চই কমেন্ট করবেন ।
http://Bangla.SaLearningSchool.com

মঙ্গ ডি বি । MongoDB

MongoDB Sharding শেয়ার্ডিং

April 24, 2015 Author-Check- Article-or-Video

MongoDB Sharding শেয়ার্ডিং

-পায়েল চৌধুরী

শেয়ার্ডিং হল একাধিক মেশিন জুড়ে তথ্য রেকর্ড সংরক্ষণ করার একটি প্রক্রিয়া এবং এটি তথ্য বৃদ্ধির চাহিদা পূরণের করতে MongoDB এর একটি পন্থা. তথ্যের আকার বৃদ্ধির কারণে তথ্য সংরক্ষণের জন্য শুধু এএকক মেশিনে তথ্য সংরক্ষণ করা যেমন হয়তো গ্রহণযোগ্য না হতে পারে, তেমনি মেশিন কতৃক তথ্য পঠন এবং লিখন প্র্রক্রিয়ার হারও পর্যাপ্ত নাও হতে পারে. হরাইজেন্টাল স্কেলিং এর দ্বারা শেয়ার্ডিং এই সমস্যার সমাধান করে, তথ্যের পরিমাণ বৃদ্ধি পেলে মেশিনের সংখ্যা বাড়ানোর মাধ্যমে লিখন এবং পঠন কার্যক্রমের চাহিদা শেয়ার্ডিং এর দ্বারা পূরণ করা যায়.

শেয়ার্ডিং কেন?

• প্র্রতিলিপির জন্য সকল লিখন মাস্টার নড এ যায়
• বিলম্ব সংবেদনশীল প্রশ্ন(Latency sensitive queries) এখনও মাস্টার এ যায়
• একক প্রতিরূপ সেট এ 12 নোড এর সীমাবদ্ধতা আছে
• সক্রিয় ডেটা সেটটি বড় যখন মেমোরির আকার বড় করা সম্ভব না
• স্থানীয় ডিস্ক যথেষ্ট বড় না বা পর্যাপ্ত নয়
• উল্লম্ব আরোহী(Vertical scaling) অত্যন্ত ব্যয়বহুল

মংগোডিবিতে শেয়ার্ডিং (Sharding in MongoDB)

নীচে চিত্র তে sharded ক্লাস্টার ব্যবহার করে মংগোডিবিতে শেয়ার্ডিং দেখানো হল-

উপরে দেওয়া চিত্রে তিনটি প্রধান উপাদান আছে যাদের বর্ণণা নীচে দেয়া হল:

Shards: Shards তথ্য ধারণ করার জন্য ব্যবহার করা হয়.এটা তথ্য প্রাপ্তি ও মানের ব্যাপারে উচ্চ মান বজায় রাখে. উৎপাদন পরিবেশে প্রত্যেক শেয়ার্ডস( Shards) পৃথক একটি রেপ্লিকা সেট হিসাবে কাজ করে.

কনফিগ সার্ভারস: কনফিগ সার্ভারস ক্লাস্টারস এর মেটাডাটা সংরক্ষণ করে.শেয়ার্ডস এ রক্ষিত ক্লাস্টার ডাটা সেট এর ম্যাপিং এ ডাটা ধারণ করে. ক্যোয়ারী রাউটার নির্দিষ্ট Shards অপারেশন লক্ষ্য করে এই মেটাডাটা ব্যবহার করে. উৎপাদন পরিবেশে sharded ক্লাস্টার ঠিক 3টি কনফিগ সার্ভার আছে.

কোয়েরি রাউটার (Query Routers): কোয়েরি রাউটার মূলত মংগোস ইন্সস্ট্যান্স হয়,যা গ্রাহকের এপ্লিকেশনের সঙ্গে ইন্টারফেস হিসাবে কাজ করে এবং যথাযথ শেয়ার্ডস এ প্রত্যক্ষ ভাবে কাজ করে. কোয়েরি রাউটার কার্যক্রম চালানোর জন্য শেয়ার্ডস নির্দিষ্ট করে দেয় এবং ডাটা প্রক্রিয়াজাত করে,তারপর গ্রাহকদের ফলাফল ফেরত প্রদান করে.ক্লায়েন্ট অনুরোধ লোডকে বিভক্ত করার জন্য একটি sharded ক্লাস্টার এ একাধিক কোয়েরি রাউটার ধারণ করতে পারে.

Root, মঙ্গ ডি বি । MongoDB

MongoDB Limit Records

April 24, 2015 Author-Check- Article-or-Video

MongoDB সীমাবদ্ধ রেকর্ডস

নয়ন চন্দ্র দত্ত

Limit() পদ্ধতি

MongoDB তে রেকর্ডকে সীমাবদ্ধ করতে হলে limit() মেথড বা পদ্ধতি ব্যবহার করতে হবে। Limit() পদ্ধতি এক নাম্বারের টাইপ সমর্থন করে যা ডকুমেন্টের নাম্বার এবং আপনি প্রদর্শন করতে চাইছেন।

সিনট্যাক্সঃ
limit() এর বেসিক সিনট্যাক্স নিম্নরূপঃ

>db.COLLECTION_NAME.find().limit(NUMBER)

উদাহরণঃ
নিম্নলিখিত তথ্যের সাথে myycol কালেকশনটি বিবেচনা করুনঃ

{ "_id" : ObjectId(5983548781331adf45ec5), "title":"MongoDB Overview"}
{ "_id" : ObjectId(5983548781331adf45ec6), "title":"NoSQL Overview"}
{ "_id" : ObjectId(5983548781331adf45ec7), "title":"Tutorials Point Overview"}

ডকুমেন্ট quering এর সময় নিচের উদাহরণটি কেবলমাত্র ২টি ডকুমেন্ট প্রদর্শন করবেঃ

>db.mycol.find({},{"title":1,_id:0}).limit(2)
{"title":"MongoDB Overview"}
{"title":"NoSQL Overview"}
>

যদি আপনি Limit() পদ্ধতিতে ডকুমেন্টের নাম্বার উল্লেখ না করেন তাহলে এটি কালেকশনের সকল ডকুমেন্ট প্রদর্শন করবে।

MongoDB Skip() পদ্ধতি

এছাড়াও limit() পদ্ধতি ছাড়া আরও একটি পদ্ধতি skip() আছে যা ডকুমেন্টের সংখ্যার টাইপ সমর্থন করে এবং সেই নাম্বারের ডকুমেন্ট এড়িয়ে(skip) চলে।

সিনট্যাক্সঃ
skip() এর বেসিক সিনট্যাক্স নিম্নরূপঃ

>db.COLLECTION_NAME.find().limit(NUMBER).skip(NUMBER)

উদাহরণঃ
নিম্নলিখিত উদাহণটি শুধু দ্বিতীয় ডকুমেন্ট প্রদর্শন করবেঃ

>db.mycol.find({},{"title":1,_id:0}).limit(1).skip(1)
{"title":"NoSQL Overview"}
>

অনুগ্রহ করে লক্ষ্য করুন- skip() পদ্ধতিতে ডিফল্ট মান ০ ।

JavaScript

জাবাস্ক্রিপ্ট আউটপুট (JavaScript Output)

April 24, 2015 Author-Check- Article-or-Video

JavaScript Output

অনুবাদ করেছেন AbuJubair Mahin

জাভাস্ক্রিপ্ট কোনো বিল্ট ইন প্রিন্ট অথবা ডিসপ্লে ফাংশন নেই।

JavaScript Display প্রোপার্টিস

জাভাস্ক্রিপ্ট বিভিন্ন উপায়ে তথ্য "প্রদর্শন" করতে পারে:

* window.alert() ব্যবহার করে সতর্কতা বক্সে লেখা ।
* document.write() ব্যবহার করে HTML আউটপুট মধ্যে লেখা ।
* innerHTMLব্যবহার করে একটি HTML উপাদান মধ্যে লেখা ।
* console.log() ব্যবহার করে ব্রাউজার কনসোল মধ্যে লেখা ।

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>

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 onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

সতর্কতাঃ Document.write () মেথড শুধুমাত্র পরীক্ষার জন্য ব্যবহার করা উচিত।

innerHTML ব্যবহার

একটি HTML উপাদান অ্যাক্সেস করার জন্য, জাভাস্ক্রিপ্ট document.getElementById (ID) পদ্ধতি ব্যবহার করতে পারেন.
আইডি অ্যাট্রিবিউট HTML উপাদান সংজ্ঞায়িত করে. InnerHTML property, HTML সামগ্রী সংজ্ঞায়িত করেঃ

উদাহরনঃ

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

</body>
</html>

আমাদের সকল উদাহরণে, আমরা প্রায়ই (একটি HTML উপাদান মধ্যে লেখা) innerHTML পদ্ধতি ব্যবহার করেছি ।

console.log() ব্যবহার

আপনার ব্রাউজারে, আপনি তথ্য প্রদর্শন console.log () পদ্ধতি ব্যবহার করতে পারেন.

ব্রাউজার এ F12 press করে কনসোল, সক্রিয় এবং মেনু "কনসোল" নির্বাচন করুন।

উদাহরনঃ

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

</body>
</html>

ধন্যবাদ, আশা করি বিষয়টি সকলেই বুঝতে পেরেছেন 🙂

JavaScript

জাভাস্ক্রিপ্ট ফাংশন (JavaScript Functions)

April 24, 2015 Author-Check- Article-or-Video

জাভাস্ক্রিপ্ট ফাংশন (JavaScript Functions)

শেখ আবুল হাশিম

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

01.<html>

02.<head>

03.<script type="text/javascript">

04.function popup() {

05.alert("Hello Webcoachbd")

06.}

07.</script>

08.</head>

09.<body>

10.<input type="button" onclick="popup()" value="popup">

11.</body>

12.</html>

এখন বাটনে ক্লিক করলেই popup() ফাংশনটি কল হবে এবং এর ভিতর সেকেন্ড ব্রাকেটের মধ্যে থাকা কোডটুকু এক্সিকিউট হবে। onclick হচ্ছে ইভেন্ট।ইভেন্ট এর বিষয়ে এরপরের টিউটোরিয়ালে আলোচনা আছে।

যাইহোক ফাংশন লেখার সময় প্রথমে function এই শব্দটি এরপর ফাংশনের যেকোন নাম যেমন আমি দিয়েছি popup(). ফাংশনের নাম দেয়ার সময় আপনি ইচ্ছেমত যেকোন নাম দিতে পারেন। আপনি ইচ্ছে করলেই করতে পারেন তার মানে এই নয় যে আপনার এমনই করা উচিৎ। বরং ফাংশনের নাম দেয়ার সময় প্রাসঙ্গিক নাম দেয়া ভাল। যেমন ধরুন দুটি সংখ্যার যোগফল এর মান বের করার জন্য একটা ফাংশন লিখলেন এটার নাম হতে পারে getAddition(). জাভাস্ক্রিপ্টের কিছু সংরক্ষিত নাম আছে, এসব নাম বা শব্দগুলি ফাংশনের নাম কিংবা ভেরিয়েবলের নাম হিসেবে ব্যবহার করা যাবেনা।

ফাংশনে প্যারামিটার ব্যবহার করা

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

01. <html>

03. <head>

05. <script type="text/javascript">

07. function getAddition(firstNumber,secondNumber){

09. var result;

11. result = firstNumber + secondNumber;

13. return result;

15. }

17. var myResult = getAddition(10,20);

19. alert(myResult);

21. </script>

23. </head>

25. <body>

27. </body>

29. </html>

ব্যাখ্যাঃএখানে ফাংশনটিতে দুটি প্যারামিটার আছে firstNumber এবং secondNumber.এরপর একটা ভেরিয়েবল ডিক্লেয়ার করেছি যার নাম result এবং এই ভেরিয়েবলে প্যারামিটার দুটি যোগ করেছি।সবশেষে result রিটার্ন করেছি।এটা ফাংশনের একটা গুরত্বপূর্ন বৈশিষ্ট্য যে আপনি শুধু একটা মান ফেরৎ (রিটার্ন) পাঠাতে পারেন। return স্টেটমেন্ট ব্যবহার করে এটা করা যায়।

একটা জিনিস মনে রাখতে হবে যে যখন return স্টেটমেন্ট ব্যবহার করবেন তখন এই স্টেটমেন্টের পর আর কোন কোড কাজ করবেনা।একটা ফাংশন return স্টেটমেন্ট দেখলেই সে সংশ্লিষ্ট মান টি রিটার্ন করে কোড পড়া বন্ধ করে দেয়।

যাইহোক এরপর ১৭ নম্বর লাইনে দেখুন ফাংশনটিকে কিভাবে কল করেছি।return স্টেটমেন্ট দিয়ে পাঠানো মান এভাবে একটা ভেরিয়েবল ডিক্লেয়ার করে ধরতে হয়।যেমন আমি var myResult দিয়ে করেছি।এরপর alert() ফাংশন দিয়ে আউটপুট এনেছি।যদি alert(result) দেন তাহলে হবেনা।কারন তো বললামই যে রিটার্নকৃত মান ভেরিয়েবল দিয়ে ধরতে হয়।

সবশেষে getAddition এ দুটি আর্গুমেন্ট পাঠিয়েছি ১০ এবং ২০ কারন প্যারামিটার দুটি আছে।যতগুলি প্যারামিটার আছে ফাংশনটি কল করার সময় ততগুলি আর্গুমেন্ট পাঠাতে হবে।

*ফাংশনের ভিতরে কোন প্যারামিটার বা ভেরিয়েবল ব্যবহার করলে সেই ভেরিয়েবলের প্রভাব বাইরে থাকবেনা।এমনকি একই নামের একটা ভেরিয়েবল যদি ফাংশনের বাইরে থাকে তারপরেও ভেরিয়েবল দুটি সম্পূর্ন আলাদা।

এইচটিএমএল HTML

এইচটিএমএল(5) স্টাইল গাইড এবং কোডিং কনভেনশন HTML(5) Style Guide and Coding Conventions

April 21, 2015 Author-Check- Article-or-Video Leave a comment

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

এইচটিএমএল কোডিং এর নিয়ম

ওয়েব ডেভেলপাররা এইচটিএমএল এ কোডিং স্টাইল এবং syntax ব্যবহারের ক্ষেত্রে প্রায়ই দ্বিধান্বিত থাকেন।

২০০০ থেকে ২০১০ সালের মধ্যে অনেক ওয়েব ডেভেলপার এইচটিএমএলকে এক্সএইচটিএমএল এ রূপান্তরিত করে।

এক্সএইচটিএমএল দিয়ে ডেভেলপাররা সঠিক এবং সুন্দরভাবে কোডিং লিখতে বাধ্য হয়।

যখন এইচটিএমএল ৫ কোড ভ্যালিডেশন (বৈধ্যতা) নিয়ে আসে তখন এটি আরও সাবলিল হয়।

HTML5 দিয়ে, আপনি আপনার নিজেকে তৈরি করতে পারবেন শ্রেষ্ঠ অনুশীলন, স্টাইল গাইড এবং কোডিং কনভেনশন দ্বারা।

স্মার্ট এবং ভবিষ্যত প্রমান

এইচটিএমএল এ গঠনগত ভাবে কোডিং করলে তা অন্যদের জন্য বুজতে অনেক সহজ হয়।

ভবিষ্যতে এক্সএমএল রিডার এর মত প্রোগ্রাম আপনার এইচটিএমএল পরতে চাইতে পারে।

স্টাইল এ দক্ষতা আনতে হলে স্মার্ট, পরিপাটি, পরিষ্কার, এবং সুগঠিত হতে হবে।

সঠিক ডকুমেন্ট টাইপ

ডকুমেন্ট এর প্রথমে doctype লিখতে হবে

<!DOCTYPE html>

যদি ছোট হাতের অক্ষরে আমরা লিখি

<!DOCTYPE html>

ছোট হাতের এলিমেন্ট (উপাদান) এর নাম লিখতে হবে

উপাদানের নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহন করে।

আমরা সবসময় সুপারিশ করি উপাদানের নাম ছোট হাতের অক্ষরে লেখার জন্য।

একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে (এক্সএইচটিএমএল হিসাবে)
ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
ছোট হাতের অক্ষরে লেখা সহজ।

খারাপ অনুশীলন

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

আরও বেশি খারাপ অনুশীলন

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

সঠিক অনুশীলন

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

সকল এলিমেন্ট (উপাদান) এর সমাপনি বন্ধনী

এইচটিএমএল ৫ এ, সকল এলিমেন্ট এর বন্ধনী সমাপ্ত করার প্রয়োজন নেই। (উদাহরণ <p> এলিমেন্ট)

আমরা সবসময় বলি সকল ট্যাগ বা উপাদানকে সমাপ্ত করার জন্য।

খারাপ অনুশীলন

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

সঠিক অনুশীলন

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

এইচটিএমএল এর ফাকা উপদানগুলোর ট্যাগ সমাপ্ত করা

এইচটিএমএল ৫ এ এই বিষয়টি অপশনাল

এটি গ্রহণযোগ্য

<meta charset="utf-8">

অথবা

<meta charset="utf-8" />

এক্সএইচটিএমএল এবং এক্সএমএল এ স্লাশ চিহ্ন (/) দরকার পরে।

যদি আপনি এক্সএমএল সফটওয়্যারকে পেজ অ্যাক্সেস করার অনুমতি দেন তাহলে, এই চিহ্নকে রেখে দেওয়ােই ভাল।

Attribute এর নাম ছোট হাতের হতে হবে

Attribute নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহণ করে।

আমরা সবসময় এর নাম ছোট হাতের অক্ষরে লেখার জন্য সুপারিশ করি ।

একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে (এক্সএইচটিএমএল হিসাবে)
ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
ছোট হাতের অক্ষরে লেখা সহজ।

ভাল দেখায় না

ভাল দেখায়

উদ্ধৃতি অ্যাট্রিবিউট মান

কোটেশন চিহ্ন ছাড়া attribute এর ভ্যালুকে লেখা এইচটিএমএল ৫ সাপোর্ট করে।

আমরা সবসময় সুপারিশ করি

যদি ভ্যালুতে ফাকা স্থান থাকে তাহলে উদ্ধৃতি চিহ্ন ব্যবহার করতে হবে
ভিন্ন ভিন্ন স্টাইল মিসিয়ে লেখা কখনই ভাল নয়
কোটেশন দেয়া মান পড়া সহজ ।

নিচের কোডটি কাজ করবে না কারন ফাকা স্থান আছে :

<table class=table striped>

এটি কাজ করবে

<table class="table striped">

ইমেজ এট্রিবিউট

সবসময় ইমেজ এর সাথে alt attribute ব্যবহার করতে হবে। কারন যখন ছবি লোড না হবে তখন খুব প্রয়োজনীয়।

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

ইমেজ সাইজ নির্ধারণ করে দেওয়া উচিত কারন ব্রাউজার ইমেজ লোড হওয়ার পূর্বে তার জন্য জায়গা ফাকা রাখে

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces এবং equal চিহ্ন

ফাকা জায়গা বেশি হলে কোন সমস্যা নেই

<link rel = "stylesheet" href = "styles.css">

কিন্তু ফাকা কম হলে তা পরতে সহজ এবং সুবিধার হয়

<link rel="stylesheet" href="styles.css">

লম্বা কোড লাইন এড়িয়ে চলুন

যখন এইচটিএমএল এডিটর ব্যবহার করা হয় তখন বাম পাস থেকে ডান পাশে স্ক্রল করা এক ধরনের বিরক্তিকর। এইজন্য ৮০ টি ক্যারেক্টার এর লাইন এ লিখতে হবে।

ফাকা line এবং Indentation

কোন কারন ছাড়া ফাকা লাইন করা উচিত নয়।

বড় বড় কোড এর জন্য তা ব্যবহার করা যাবে।

Indentation এর ক্ষেত্রে ট্যাব এর পরিবর্তে ২ টি স্পেস ব্যবহার করতে হবে।

কোন কারন ছাড়া ফাকা জায়গা এবং Indentation ব্যবহার করা উচিত নয়।

প্রয়োজনীয় নেই

 <body>

  <h1>Famous Cities</h1>

  <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.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

ভাল

<body>

<h1>Famous Cities</h1>

<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.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

টেবিল এর উদাহরণ

 <table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

লিস্ট এর উদাহরণ

 <ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

<html> এবং body ট্যাগ বাদ দেওয়া

এইচটিএমএল ৫ এ <html>এবং <body> ট্যাগ বাদ দেওয়া হয়েছে

এইচটিএমএল ৫ এর ক্ষেত্রে উদাহরণ

 <!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

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

আমরা কখনই বলি না <html>এবং <body> ট্যাগ বাদ দেওয়ার জন্য।

<html> হল ডকুমেন্ট এর রুট। পেজ এর ভাষাকে এর মাঝে নির্দিষ্ট করে দিতে হয়।

<!DOCTYPE html>
<html lang="en-US">

ল্যাঙ্গুয়েজ ডিক্লায়ার করা এসেম্বিলি অ্যাপলিকেশন (স্ক্রিণ রিডার) এবং সার্চ ইঞ্জিন এর জন্য গুরুত্বপূর্ণ ।

<html>এবং <body> ট্যাগ বাদ দেওয়া DOM এবং এক্সএমএল সফটওয়্যার ক্র্যাশ এর কারণ হতে পারে।

পুরাতন ব্রাউজার (IE9) এরর দেখাতে পারে যদি <body> না ব্যবহার না করা হয়।

<head> ট্যাগ কি বাদ দেওয়া

এইচটিএমএল ৫ এর ক্ষেত্রে এটি ঠিক আছে।

ডিফল্ট ভাবে ব্রাউজার বডি সেকশন এর পূর্বে সকল উপাদান যোগ করে হেড সেকশন এর মধ্যে । সুতরাং <head> ট্যাগ কে বাদ দেওয়া যেতে পারে।

উদাহরণ

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

Meta data

এইচটিএমএল ৫ এ <title> এলিমেন্ট অত্যাবশ্যকীয়। টাইটেলকে যথাসম্ভব অর্থবহ করুন।

<title>HTML5 Syntax and Coding Style</title>

সঠিকভাবে search engine এ ইনডেক্স করার ক্ষেত্রে ডকুমেন্ট এর মধ্যে ভাষা এবং ক্যারেক্টার encode কে ডিফাইন করে দিতে হবে

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

এইচটিএমএল কমেন্ট

ছোট কমেন্ট এক লাইনে লেকা যেতে পারে।

<!-- This is a comment -->

অনেক বড় কমেন্ট হলে আলাদা আলাদা লাইন এ লিখতে হবে।

<!--
 This is a long comment example. This is a long comment example. This is a long comment example.
 This is a long comment example. This is a long comment example. This is a long comment example.
 -->

লম্বা কমেন্ট একাধিক লাইনে ভেঙ্গে লিখলে বুঝতে সুবিধা হয়।

স্টাইল শিট

Style শিট লিঙ্ক করার ক্ষেত্রে সাধারন syntax ব্যবহার করুন

<link rel="stylesheet" href="styles.css">

ছোট নিয়ম এক লাইন এ লিখতে হবে

p.into {font-family:"Verdana"; font-size:16em;}

বড় নিয়ম কয়েকটি লাইন এ লিখতে হবে

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

ব্রাকেট এর শুরুর আগে একটা স্পেস ব্যবহার করতে হবে,
indentation এ দুইটি স্পেস ব্যবহার করতে হবে,
প্রপার্টি এবং এর ভ্যালুর মাঝে কোলন এর পাশাপাশি একটি স্পেস ব্যবহার করতে হবে,
কমা এবং সেমিকোলন এর পরে একটা স্পেস ব্যবহার করতে হবে,
প্রত্যেক জোড়া প্রপার্টি ভ্যালু এর পরে সেমিকোলন ব্যবহার করতে হবে,
কোটেশন ব্যবহার করতে হবে যদি ভ্যালু এর মাঝে একটা স্পেস থাকে,
৮০ ক্যারেক্টার এর উপরে কোন লাইনে রাখা যাবে না।

যেকোনো ধরনের লেখার ক্ষেত্রে স্পেস এর পরে কমা বা সেমিকোলন যুক্ত করা সাধারন নিয়ম।

এইচটিএমএল এর মধ্যে javascript লোড করা

সাধারন syntax ব্যবহার করে external javascript লোড করা যায়। এর জন্য কোন attribute এর দরকার পরে না।

<script src="myscript.js">

Javascript দিয়ে এইচটিএমএল কে অ্যাক্সেস করা

যদি এইচটিএমএল স্টাইল যদি পরিপাটি না হয় তাহলে javascript এ এরর আসতে পারে। এই দুইটি statement দুই ধরনের ফলাফল দেখাবে

var obj = getElementById("Demo")

var obj = getElementById("demo")

যদি সম্ভব হয় এইচটিএমএল এর উপাদানের সাথে javascript যোগ করার পর উপাদানের একই নাম ব্যবহার করতে হবে।

ফাইল এর নামের ক্ষেত্রে ছোট হাতের অক্ষর ব্যবহার

ফাইল এর নাম করনের ক্ষেত্রে অনেক ওয়েব সার্ভার কেস এর ব্যাপারে সক্রিয় (apache , unix)

london.jpg কখনই London.jpg নামে অ্যাক্সেস হবে না

অন্যান্য ওয়েব সার্ভার যেমন (Microsoft, IIS) খুব বেশি সক্রিয় না

London.jpg কে London.jpg বা london.jpg নামে অ্যাক্সেস করা যাবে।

যদি আপনি বড় ছোট হাতের অক্ষর একসাথে ব্যবহার করেন তাহলে অত্যন্ত সামঞ্জস্যপূর্ণ হতে হবে।

যদি আপনি সংবেদনশীল নয় এমন একটি সার্ভার থেকে সংবেদনশীল এমন একটি সার্ভার এ যান তাহলে ছোট ছোট এরর আপনার ওয়েব পেজকে নষ্ট করে দিতে পারে।

এই সকল সমস্যা থেকে প্রতিকারের জন্য ছোট হাতের অক্ষর ব্যবহার করতে হবে।

File extensions

এইচটিএমএল ফাইল এর এক্সটেনশন হল .html ( বা .htm)

সিএসএস ফাইল এর এক্সটেনশন হল .css

Javascript ফাইল এর এক্সটেনশন হল .js

এইচটিএমএল HTML

HTML5 এ রূপান্তর (HTML5 Migration)

April 20, 2015 Author-Check- Article-or-Video

HTML5 এর ধারবাহিক টিউটোরিয়ালে আপনাকে স্বাগতম। আজ আমরা আলোচনা করব Migration from HTML4 to HTML5 নিয়ে। আজ আমরা শিখবো কিভাবে একটি typical HTML4 page কে typical HTML5 page এ পরিনত করা যায় আগের সকল কিছু অপরিবর্তিত রেখে।

Typical HTML4	Typical HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div id="post">	<article>
<div id="footer">	<footer>

Typical HTML4

বলে রাখা ভাল আপনি একই নিয়ম ব্যাবহার করে HTML5 থেকে HTML4 এবং XHTML এ পরিবর্তন করতে পারবেন। এখন একটা Typical HTML4 Page উদাহরণ দেখাই-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>HTML4</title>
 <style>
   body {font-family:Verdana,sans-serif;font-size:0.8em;}
   div#header,div#footer,div#content,div#post 
   {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
   div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
   div#content {background-color:#ddd;}
   div#menu ul {margin:0;padding:0;}
   div#menu ul li {display:inline; margin:5px;}
 </style>
 </head>
 <body>
 
 <div id="header">
   <h1>Monday Times</h1>
 </div>
 
 <div id="menu">
   <ul>
     <li>News</li>
     <li>Sports</li>
     <li>Weather</li>
   </ul>
 </div>
 
 <div id="content">
 <h2>News Section</h2>
 
 <div id="post">
   <h2>News Article</h2>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
 </div>
 
 <div id="post">
   <h2>News Article</h2>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
 </div>
 
 </div>
 
 <div id="footer">
   <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
 </div>
 
 </body>
 </html>

যেভাবে HTML5 Doctype পরিবর্তন করবেন

HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5 doctype:

<!DOCTYPE html>

যেভাবে HTML5 Encoding পরিবর্তন করবেন

HTML4:

HTML5:

এইচটিএমএল HTML

HTML5 এর শব্দার্থিক উপাদানসমূহ (HTML5 Semantic Elements)

April 19, 2015 Author-Check- Article-or-Video Leave a comment

HTML5 এর ধারবাহিক টিউটোরিয়ালে আপনাকে স্বাগতম। আজ আমরা আলোচনা করব HTML5 Semantic Elements নিয়ে। Semantics কে আমরা বলতে পারি ভাষার অর্থ বিষয়ক গবেষণা।

এখন প্রশ্ন হল Semantic Elements কি?

একটি Semantic Elements এর প্রধান কাজ হল পরিষ্কারভাবে ব্রাউজার এবং ডেভেলপার উভয় এর অর্থ বর্ণনা করা।

non-semantic elements এর উদাহরণ:

<div> and <span> - Tells nothing about its content.

semantic elements এর উদাহরণ:

<form>, <table>, and <img> - Clearly defines its content.

Semantic Elements কোন কোন Browser Support করে?

এক কথাই বলা যাই HTML5 semantic elements আধুনিক সকল Browser এই Support করে।

নতুন উপাদানসমূহ:

<article>	নিবন্ধ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<aside>	সাধারণত সাইডবারের জন্য ব্যবহৃত হয়
<bdi>	একটি ভিন্ন দিক ফরম্যাটে লেখা প্রকাশের জন্য ব্যবহৃত হয়
<command>	কমান্ড বাটন সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<details>	অতিরিক্ত বিশদ ব্যাখ্যা ব্যবহারকারীর প্রদর্শন অথবা আড়াল করতে ব্যবহৃত হয়
<dialog>	ডায়লগ বক্স অথবা উইন্ডোতে সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<summary>	<details> উপাদানের সারমর্ম প্রদর্শনের জন্য ব্যবহৃত হয়
<figure>	চিত্রাঙ্কনের, ডায়াগ্রামে, ছবি, কোড তালিকা ইত্যাদির স্বয়ংসম্পূর্ণ বিষয়বস্তু নির্ধারণ করা হয়
<figcaption>	<figure> উপাদান জন্য ক্যাপশন ব্যবহৃত হয়
<footer>	একটি বিভাগের জন্য পাদচরণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<header>	একটি বিভাগের জন্য হেডার সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<hgroup>	যখন একাধিক মাত্রার শিরোনাম থাকে, তখন <h1> থেকে <h6> উপাদানের সমষ্টিকে বুঝায়
<mark>	চিহ্নিত / হাইলাইট টেক্সট সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<meter>	একটি পরিচিত পরিসীমার মধ্যে স্কেলের পরিমাপ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<nav>	নেভিগেশন লিঙ্কগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<progress>	একটি টাস্ক অগ্রগতি প্রতিনিধিত্ব করে
<ruby>	রুবি টীকা সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<rt>	অক্ষরের একটি ব্যাখ্যা / উচ্চারণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<rp>	Ruby টীকা সমর্থন করে না তা ব্রাউজারে দেখানোর জন্য ব্যবহৃত হয়
<section>	নথিতে একটি অধ্যায় সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<time>	তারিখ / সময় প্রদর্শনের জন্য ব্যবহৃত হয়
<wbr>	লাইন বিরতির জন্য ব্যবহৃত হয়
<audio>	শব্দ যুক্ত করার জন্য ব্যবহৃত হয়
<video>	ভিডিও যুক্ত করার জন্য ব্যবহৃত হয়
<source>	<video> এবং <audio> জন্য একাধিক মিডিয়া রিসোর্স যুক্ত করার জন্য ব্যবহৃত হয়
<embed>	একটি বহিরাগত অ্যাপ্লিকেশন অথবা ইন্টারেক্টিভ বিষয়বস্তুর জন্য একটি ধারক
<track>	<video> এবং <audio> এর জন্য টেক্সট গানগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<canvas>	গ্রাফিক্স আঁকতে ব্যবহৃত হয়
<datalist>	ইনপুট নিয়ন্ত্রণ জন্য পূর্ব নির্ধারিত অপশনের একটি তালিকা নির্দিষ্ট করে
<keygen>	key-জুটি জেনারেটরের জন্য ব্যবহৃত হয়
<output>	হিসাবের ফলাফল ব্যাখ্যা করার জন্য ব্যবহৃত হয়

এইচটিএমএল HTML

HTML5 এর নতুন উপাদান (HTML5 New Elements)

April 18, 2015 Author-Check- Article-or-Video

মাসুদ

HTML5 New Elements গুলো এবং এদের কাজগুলো নিম্নে দেয়া হল

<article>	একটা ডকুমেন্ট এর মধ্যে আর্টিকেল বোঝাতে এই Element ব্যবহৃত হয়।
<aside>	কোন কন্টেন্ট যদি পেজ কন্টেন্ট এর থেকে আলাদা হয় তাহলে তা এই Element দ্বারা বোঝানো হয়।
<bdi>	কতগুলো বর্নের মধ্যে যদি নির্দিষ্ট কতগুলো বর্ন আলাদা ফরমেটে হয় তাহলে এই Element দ্বারা বোঝানো হয়।
<details>	এর দ্বারা অতিরিক্ত বিবরন ব্যবহারকারী আড়াল করে রাখতে পারে।
<dialog>	কোন ডায়লগ বক্স নির্দেশ করে।
<figcaption>	<figure> element এর caption নির্দেশ করে।
<footer>	কোন ডকুমেন্ট এর footer নির্দেশ করে।
<header>	কোন ডকুমেন্ট এর header নির্দেশ করে।
<main>	এর দ্বারা কোন ডকুমেন্ট এর প্রধান কন্টেন্ট নির্দেশ করা হয়।
<mark>	এর দ্বারা কোন ডকুমেন্ট এর সিলেক্ট করা বর্ন বোঝানো হয়।
<menuitem>	এর দ্বারা কোন পপ-আপ মেনু থেকে যে কোন কমান্ড সিলেক্ট করতে পারে।
<meter>	এর দ্বারা কোন ডকুমেন্ট এর কোন নির্দিষ্ট রেঞ্জ এর পরিমাপ বোঝানো হয়।
<nav>	এর দ্বারা কোন ডকুমেন্ট এর নেভিগেশন লিঙ্কস গুলো বোঝানো হয়।
<progress>	এর দ্বারা কোন ডকুমেন্ট কার্যপ্রক্রিয়া প্রকাশ করা হয়।
<section>	কোন একটি ডকুমেন্ট এর নির্ধারিত সেকশন প্রকাশ করে।
<summary>	এর দ্বারা <details> element এর বিস্তারিত অংশ দেখা যায়।
<time>	সময় ও তারিখ নির্দেশ করে।
<wbr>	সম্ভাব্য লাইন বিরতি প্রকাশ করে।

এইচটিএমএল HTML

এইচটিএমএল ৫ ব্রাউজার সাপোর্ট (HTML5 Browser Support)

April 17, 2015 Author-Check- Article-or-Video

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

এইচটিএমএল ৫ ব্রাউজার সাপোর্ট

এইচটিএমএল ৫ সকল আধুনিক ব্রাউজার সাপোর্ট করে। সকল নতুন এবং পুরাতন ব্রাউজার অটোমেটিক ভাবে অচেনা elements গুলোকে ইনলাইন element হিসেবে চিহ্নিত করে। এই কারনে আপনি অচেনা element গুলোকে চিহ্নিত নিয়ন্ত্রণ করার জন্য পুরাতন ব্রাউজার গুলো শিখতে পারেন। আপনি অনেক আগের ভার্সন IE6(windows XP 2001) শিখতে পারেন যা এইচটিএমএল এর অজানা element গুলোকে নিয়ন্ত্রণ করতে পারে।

এইচটিএমএল ৫ element গুলোকে ব্লক element হিসেবে ডিফাইন করা

এইচটিএমএল৫ ৮টি নতুন element কে ডিফাইন করে থাকে। সবগুলোই ব্লক লেভেল elements। পুরাতন ব্রাউজার গুলোকে সঠিক ফরম্যাট এ ব্যবহার করার জন্য সিএসএস এর ডিসপ্লে প্রপার্টি কে ব্লক আকারে সেট করতে হয়।

উদাহরণ

Example

header, section, footer, aside, nav, main, article, figure {
display: block;
}

নতুন element এইচটিএমএল এ যোগ করা

ব্রাউজার এর কৌশল অনুযায়ী এইচটিএমএল এর যেকোনো নতুন element কে যোগ করতে পারেন । নিচের উদাহরণ এ একটি নতুন element <myHero> যোগ করা হয়েছে

<!DOCTYPE html>
 <html lang="en">
 <head>
 <title>HTML5 Skeleton</title>
 <meta charset="utf-8">
 
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
 </script>
 <![endif]-->
 
 <style>
 body {font-family: Verdana, sans-serif; font-size:0.8em;}
 header,nav, section,article,footer
 {border:1px solid grey; margin:5px; padding:8px;}
 nav ul {margin:0; padding:0;}
 nav ul li {display:inline; margin:5px;}
 </style>
 </head>
 <body>
 
 <header>
   <h1>HTML5 SKeleton</h1>
 </header>
 
 <nav>
 <ul>
   <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
   <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
   <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
 </ul>
 </nav>
 
 <section>
 
 <h1>Famous Cities</h1>
 
 <article>
 <h2>London</h2>
 <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>
 </article>
 
 <article>
 <h2>Paris</h2>
 <p>Paris is the capital and most populous city of France.</p>
 </article>
 
 <article>
 <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>
 </article>
 
 </section>
 
 <footer>
 <p>&copy; 2014 W3Schools. All rights reserved.</p>
 </footer>
 
 </body>
 </html>

এইচটিএমএল HTML

HTML 5 এর পরিচিতি (HTML5 Introduction)

April 16, 2015 Author-Check- Article-or-Video Leave a comment

আতিক হাসান

ওয়েবপেজ ডিজাইন এন্ড ডেভেলপার

HTML 5 এর পরিচিতি

HTML 4 এর উন্নত ভার্সনই হল HTML 5।HTML 5 এ নতুন কিছু ট্যাগ, এলিমেন্ট, এট্রিবিউট যোগ করা হয়েছে এবং পুরনো কিছু বাদ দেয়া হয়েছে।

HTML 5 এর উদাহরনঃ

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 </head>
 
 <body>
 Content of the document......
 </body>
 
 </html>

HTML 5 এ নতুন যা পরিবর্তন আনা হয়েছে

HTML 5 এ DOCTYPE ঘোষণা খুবই সহজ। যেমনঃ-

<!DOCTYPE html>

HTML 5 এ Character Encoding ঘোষণা করাও খুবই সহজ।যেমনঃ-

HTML 5 এর নতুন কিছু Elements

HTML 5 এ খুব বেশী ব্যাবহৃত নতুন এলিমেন্টগুলো হচ্ছেঃ

Semantic Elements যেমন- <header>, <footer>, <article>, and <section>.

Form control attributes যেমন- number, date, time, calendar, range and required.

Graphic Elements যেমন- <svg> and <canvas>.

Multimedia Elements: যেমন- <audio> and <video>.

HTML5 API's (Application Programming Interfaces)

HTML 5 এর প্রধান নতুন API’s হচ্ছেঃ

HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE

HTML 5 থেকে যেসকল এলিমেন্ট বাদ দেয়া হয়েছে

এলিমেন্ট	HTML 4 এলিমেন্টের পরিবর্তে লেখা হয়
<acronym>	<abbr>
<applet>	<object>
<basefont>	CSS
<big>	CSS
<center>	CSS
<dir>	<ul>
<font>	CSS
<frame>
<frameset>
<noframes>
<strike>	CSS
<tt>	CSS

এইচটিএমএল HTML

এইচটিএমএল ইনপুট বৈশিষ্ট্যাবলী (HTML Input Attributes)

April 15, 2015 Author-Check- Article-or-Video Leave a comment

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

ভ্যালু attribute

ফর্ম এর শুরুতে ইনপুট ফিল্ড এর জন্য একটি প্রাথমিক ভ্যালু সেট করার জন্য value attribute ব্যবহার করা হয়

উদাহরণ

<form action="">
 First name:<br>
 <input type="text" name="firstname" value="John">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

ফলাফল

কেবল পঠনযোগ্য অ্যাট্রিবিউট (Readonly attribute)

ইনপুট ফিল্ডের ভ্যালু শুধু পরতে পারবে কিন্তু কোন প্রকার পরিবর্তন করতে পারবে না এই readonly attribute দ্বারা

উদাহরণ

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

এই attribute এর জন্য কোন মান লাগবে না শুধু লিখতে হবে readonly=”readonly”

ফলাফল

নিষ্ক্রিয়করণ অ্যাট্রিবিউট (Disabled attribute)

ইনপুট ফিল্ডের কোন ডাটা এডিট করা যাবে না,বাবহার করা যাবে না, ক্লিক করা যাবে না এবং সাবমিট করা যাবে না এই রকম disable করে রাখার জন্য এই disable attribute ব্যবহার করা হয়

উদাহরণ

<form action="">
 First name:<br>
 <input type="text" name="firstname" value="John" disabled>
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

এই attribute এর কোন মানের দরকার পরে না (disabled=”disabled”)

ফলাফল

আকার অ্যাট্রিবিউট (Size attribute)

ইনপুট ফিল্ডের এর character এর আকার size attribute দ্বারা করা হয়

উদাহরণ

 <form action="">
 First name:<br>
 <input type="text" name="firstname" value="John" size="40">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

ফলাফল

সর্বচ্চোআকার অ্যাট্রিবিউট (Maxlength attribute)

ম্যাক্সিমাম কতটি ক্যারেক্টার হতে পারে এর জন্য আমরা maxlength attribute ব্যবহার করব।

উদাহরণ

<form action="">
 First name:<br>
 <input type="text" name="firstname" maxlength="10">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

ফলাফল

Maxlength দ্বারা নির্দিষ্ট character এর বেশি কোন ওয়ার্ড সাপোর্ট করে না। এই attribute কোন ফিডব্যাক প্রদান করে না। যদি ইউজার কে আমরা alert করতে চাই তাহলে আমাদের javascript বাবকার করতে হবে

ইনপুট নিষেধাজ্ঞা অব্যর্থ হয় না। javascript এর মাধ্যমে অবৈধ ভাবে ইনপুট করার অনেক উপায় আছে। নিরাপত্তার জন্য নিষেধাজ্ঞার পাশাপাশি রিসিভার (সার্ভার) দ্বারা চেক করা আবশ্যক.

এইচটিএমএল ৫ এর attribute গুলো

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

এবং ফর্ম এর জন্য

Autocomplete
Novalidate

স্বয়ংকৃয়ভাবে সম্পূর্ণ বৈশিষ্ট্য (Autocomplete attribute)

কোন ইনপুট ফিল্ড আপনা থেকেই পরিপূর্ণ করবে কিনা এর জন্য autocomplete অন বা অফ ব্যবহার করা হয়। যদি তা অন করা থাকে তাহলে ব্রাউজার ইনপুট ফিল্ডের কোন ভ্যালু insert করার আগে আগেই অটোমেটিক পুরণ হয়ে যাবে যদি আগে এই ভ্যালুটি ইনপুট করা হয়ে থাকে। ফর্মের এর ক্ষেত্রে autocomplete অন রাখা সম্ভব নির্দিষ্ট কিছু ইনপুট ফিল্ডের এর জন্য তা অফ করে রাখা যাবে। autocomplete attribute ফর্মের এর ক্ষেত্রে কাজ করে এবং ইনপুট ফিল্ড এর ভিন্ন ভিন্ন ধরন যেমন text, search, url, tel, email, password, date picker, range, এবং color এই সব ক্ষেত্রে কাজ করে।

উদাহরণ

<form action="action_page.php" autocomplete="on">
 First name:<input type="text" name="fname">

Last name: <input type="text" name="lname">

E-mail: <input type="email" name="email" autocomplete="off">

<input type="submit">
 </form>

কিছু কিছু ব্রাউজার এর ক্ষেত্রে কাজের জন্য autocomplete ফাংশন চালু করা লাগতে পারে।

ফলাফল

Novalidate attribute

ফর্ম ডাটা সাবমিট করার পর এটাকে অবৈধ ঘোষণা করার জন্য এই attribute ব্যবহার করা হয়

উদাহরণ

ফলাফল

অটোফোকাস বৈশিষ্ট্য (Autofocus attribute)

কোন ইনপুট ফিল্ড পেজ লোড হওয়ার সাথে সাথে ওই ঘরে কার্সর আনার জন্য এই attribute ব্যবহার করা হয়

উদাহরণ

First name:<input type="text" name="fname" autofocus>

ফলাফল

এইখানে firstname এর ঘরে কার্সর দেখা যাবে।

ফর্ম attribute

একাধিক ফর্মের input ফিল্ড কে একটি কমন ফর্ম এর ID দিয়ে চিহ্নিত করার জন্য এই attribute ব্যবহার করা হয়

উদাহরণ

যদিও ফর্ম এর বাইরে একটি ইনপুট ফিল্ড ব্যবহার করা হচ্ছে কিন্তু তারপরও এটি ফর্মের একটি অংশ

<form action="action_page.php" id="form1">
 First name: <input type="text" name="fname">

<input type="submit" value="Submit">
 </form>

Last name: <input type="text" name="lname" form="form1">

ফলাফল

The "Last name" field below is outside the form element, but still part of the form.

Last name:

Formaction attribute

Form action attribute একটি ফর্ম এর ফাইল এর URL চিহ্ন করে যেখানে যেয়ে ইনপুট ডাটা সাবমিট হবে। এই attribute দুটি টাইপ এ ব্যবহার করা হয় type=”submit”, type=”image”

উদাহরণ

ভিন্ন ভিন্ন action এ দুইটি বাটন দ্বারা দেখানো হল

<form action="action_page.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

ফলাফল

Formenctype attribute

যখন সার্ভার এ ফর্ম ডাটা সাবমিট করা হবে তখন তা কিভাবে encode করা হবে এর জন্য আমরা এই attribute ব্যবহার করব পোস্ট মেথড এর ক্ষেত্রে । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরন

প্রথম সাবমিট বাটন ডিফল্ট encoded এবং দ্বিতীয় সাবমিট বাঁটন multipart/form-data হিসেবে encode করা হয়েছে

<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname">

ফলাফল

Formmethod attribute

ফর্ম ডাটা url এ পাঠানোর ক্ষেত্রে HTTP মেথড বোঝার জন্য এই attribute ব্যবহার করা হয় । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরণ

দ্বিতীয় বাটন টি HTTP এই মেথড এর

<form action="action_page.php" method="get">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

ফলাফল

Formnovalidate attribute

Input উপাদান কে সাবমিট করার পর তা অবৈধ ঘোষণা করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়। type=”submit” এই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরণ

দুইটি সাবমিট বাটন একটি validate ছাড়া অন্যটি validate সহ

ফলাফল

Formtarget attribute

ফর্ম সাবমিট করার পর কোথায় আমরা এর প্রতিক্রিয়া দেখতে চাই তা আমরা এই attribute এর মাধ্যমে করতে পারি। type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরণ

ভিন্ন ভিন্ন টার্গেট এর জন্য দুইটি বাটন ব্যবহার করা হল

<form action="action_page.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

ফলাফল

উচ্চতা এবং প্রস্থ অ্যাট্রিবিউট Height and width attribute

ইনপুট ফিল্ডের আকার নির্ধারণ করার জন্য এই attribute ব্যবহার করা হয়। type=”image” ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরণ

Width এবং height সহ একটি ইমেজ যুক্ত বাটন দেখানো হল

ফলাফল

তালিকা বৈশিষ্ট্য (List attribute)

<datalist> উপাদান যাতে ইনপুট করার জন্য কিছু pre-defned অপশন থাকবে

উদাহরণ

Pre-defined ভ্যালু সহ একটি ইনপুট ফিল্ড

<input list="browsers">

<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
 </datalist>

ফলাফল

ন্যূনতম, সর্বোচ্চ অ্যাট্রিবিউট (Min, max attribute)

একটি ইনপুট ফিল্ড এর মিনিমাম এবং ম্যাক্সিমাম ডাটা ইনপুট করার ক্ষেত্রে এই attribute গুলো ব্যবহার করা হয় ভিন্ন ভিন্ন ধরনের ইনপুট ব্যবহার করা যায় number, range, date, datetime, datetime-local, month, time এবং week।

উদাহরন

মিনিমাম এবং ম্যাক্সিমাম ভ্যালু সহ একটি উদাহরণ

Enter a date before 1980-01-01:
 <input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
 <input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
 <input type="number" name="quantity" min="1" max="5">

ফলাফল

একাধিক অ্যাট্রিবিউট (Multiple attribute)

ইনপুট ফিল্ডে একাধিক ডাটা সাবমিট করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়।দুই ধরনের ইনপুটে কাজ করা যায় ইমেইল, ফাইল।

উদাহরণ

এই ইনপুট ফিল্ড এ অনেকগুলো ইমেজ আপলোড করা যাবে

Select images: <input type="file" name="img" multiple>

ফলাফল

প্যাটার্ন অ্যাট্রিবিউট (Pattern attribute)

Regular expression এই ধরনের ডাটা ইনপুট করার ক্ষেত্রে আমরা এই attribute ব্যবহার করব। এতে ফরম্যাট দেওয়া থাকে সেই অনুপাতে ডাটা ইনপুট দিতে হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।

উদাহরণ

এই ইনপুট ফিল্ড এ ৩ টা লেটার ইনপুট করা যাবে যেখানে কোন নাম্বার বা special character থাকবে না

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

ফলাফল

স্থানধারক অ্যাট্রিবিউট (Placeholder attribute)

ইনপুট ফিল্ড এ কোন কিছু ইনপুট করার আগে হালকা ভাবে কোন লেখা ডিসপ্লে করার জন্য এই attribute ব্যবহার করা হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।

উদাহরণ

<input type="text" name="fname" placeholder="First name">

ফলাফল

আবশ্যক অ্যাট্রিবিউট (Required attribute)

কোন ইউজার যেন কোন নির্দিষ্ট ইনপুট ফিল্ড ফাকা না রেখে ফর্ম সাবমিট করে সেই জন্য আমরা এই attribute ব্যবহার করব। এই টাইপ গুলো হল text, search, url, tel, email, password, date pickers, numbers, checkbox, radio, file.।

উদাহরণ

Username: <input type="text" name="usrname" required>

ফলাফল

ধাপ অ্যাট্রিবিউট (Step attribute)

ইনপুট ফিল্ড এ লিগাল নাম্বার ইনপুট দেওয়ার ক্ষেত্রে এই attribute টি ব্যবহার করা হয়। যেমন যদি স্টেপ ৩ হয় তাহলে লিগাল নাম্বার গুলো হবে -৩,০,৩,৬

এই attribute যেই ধরনের ইনপুট টাইপ গুলোর ক্ষেত্রে কাজ করতে পারে এইগুলো হল number, range, date, datetime, datetime-local, month, time এবং week.

উদাহরণ

<input type="number" name="points" step="3">

ফলাফল

এইচটিএমএল HTML

এইচটিএমএল ইনপুট ধরন (HTML Input Types)

April 14, 2015 Author-Check- Article-or-Video

-মাসুদ-

আজকে আমরা জানবো এইচটিএমএল ইনপুট সম্পর্কে।

টেক্সট ইনপুট

সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়। এধরনের ইনপুট এক লাইনের হয়ে থাকে।

 <form>
 First name:<br>
 <input type="text" name="firstname">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

পাসওয়ার্ড ইনপুট

পাসওয়ার্ড গ্রহণের জন্য এ ধরনের ইনপুট ফিল্ড ব্যবহৃত হয়।

<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

পাসওয়ার্ড এর ঘরটিতে কোনকিছু লিখলে তা মাস্কিং হয়ে থাকবে অর্থ্যাত লেখাগুলো দেখা যাবেনা।

সাবমিট বাটন

ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।

যেমনঃ

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Masud">
<br>
Last name:<br>
<input type="text" name="lastname" value="Rana">
<br><br>
<input type="submit" value="Submit">
</form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

চেকবক্স

চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।

<form>
 <input type="checkbox" name="vehicle" value="Bike">I have a cycle
 <br>
 <input type="checkbox" name="vehicle" value="Car">I have a motorcycle
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

রেডিও বাটন

রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়।লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ

 <form>
 <input type="radio" name="sex" value="male" checked>Male
 <br>
 <input type="radio" name="sex" value="female">Female
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

এইচটিএমএল HTML

এইচটিএমএল ফরম (HTML Forms)

April 13, 2015 Rafiqul Islam Leave a comment

আজকে আমরা জানবো এইচটিএমএল ফর্ম কি এবং এর ব্যবহার সম্পর্কে। সাধারনত কোন ব্যাক্তির কাছ থেকে তথ্য গ্রহণ (ইনপুট) করতে এইচটিএমএল ফর্ম ব্যবহৃত হয়। যা <form> --- দ্বারা বোঝানো হয়। যেমনঃ

<form>
.
form elements
.
</form>

এইচটিএমএল ফর্ম এর মধ্যে ফর্ম এলিমেন্ট থাকে। তথ্য ইনপুট দেয়ার জন্য বিভিন্ন ধরনের ফর্ম এলিমেন্ট ব্যবহৃত হতে পারে যেমন চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।

টেক্সট ইনপুট

সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়।

 <form>
 First name:<br>
 <input type="text" name="firstname">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

নোটঃ ফর্ম নিজে নেজেই প্রদর্শিত হতে পারে না। ডিফল্ট টেক্সট ফিল্ড এর প্রসস্থতা হচ্ছে ২০ বর্ণ ।

চেকবক্স

চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।

রেডিও বাটন

<input type="radio"> রেডিও বাটনকে সঙ্গায়িত করে

রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়। লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ

<form>
 <input type="radio" name="sex" value="male" checked>Male
 <br>
 <input type="radio" name="sex" value="female">Female
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

সাবমিট বাটন

ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।

যেমনঃ

<form action="action_page.php">
 First name:<br>
 <input type="text" name="firstname" value="Masud">
 <br>
 Last name:<br>
 <input type="text" name="lastname" value="Rana">
 <br><br>
 <input type="submit" value="Submit">
 </form>

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

আপনি যদি "Submit" বাটন এ ক্লিক করেন তাহলে এই ফর্ম এর ডাটা "action_page.php".পেজ এ পাঠিয়ে দেবে।

একটু লক্ষ্য করলে দেখবো যে উপরের কোডটি লেখার সময় আমরা <form action=”action_page.php”> লিখেছি। এটি লেখা হয়েছে ফরমটা কোথায় সাবমিট হবে তা বুঝিয়ে। এটাকে Attribute বলা হয়।

এইচটিএমএল HTML

এইচটিএমএল ফরম উপাদানসমূহ (HTML Form Elements)

April 12, 2015 Author-Check- Article-or-Video Leave a comment

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

<input>Element:

ফর্ম element এর মধ্যে সবচেয়ে গুরুত্বপূর্ণ element হল <input> element. এই element টি বিভিন্ন বিষয়ের উপর ভিক্তি করে বিভিন্ন রকম হয়ে থাকে।

<select> Element (drop-down-list):

উদাহরনঃ

 <select name="cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat">Fiat</option>
 <option value="audi">Audi</option>
 </select>

ফলাফল

<option> element পছন্দ মতন কনটেন্ট সিলেক্ট অপশন থেকে নির্বাচন করার জন্য ব্যবহার করা হয়। তালিকাতে সাধারনত প্রথম অপশন টি সিলেক্ট করা থাকে।

উদাহরণ

ফলাফল

<textarea> Element

ইনপুট ফিল্ডের অনেকগুলো লাইন লিখার ক্ষেত্রে আমরা <textarea> ব্যবহার করে থাকি।

উদাহরণ

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

ফলাফল

<button> element

কোন বাটন কে ক্লিক করার জন্য আমরা এই element টি ব্যবহার করে থাকি।

উদাহরণ

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

ফলাফল

এইচটিএমএল ৫ <datalist> element

Pre-defined অপশন্‌স এর তালিকা থেকে ইনপুট এর উপাদান এর জন্য দাতালিস্ত ব্যবহার করা হয়। ইউজার রা pre-defined অপশন্‌স এর একটি তালিকা দেখতে পাবে ডাটা ইনপুট দেওয়ার জন্য। এই জন্য <datalist> element এর ভিতর ID attribute নিশ্চিতভাবে ডিফাইন করে দিতে হবে।

উদাহরণ

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>
</form>

ফলাফল

এইচটিএমএল ৫ <keygen> element

ইউজার রা নিরাপদ ভাবে বৈধতা ঘোষণা করার জন্য এই element ব্যবহার করা হয় । এই element এর মাধ্যমে একজোড়া ফিল্ড তৈরি হয় ফর্ম এর মধ্যে। যখন ফর্ম সাবমিট করা হয় দুই ধরনের key তৈরি হয়। একটি প্রাইভেট এবং পাবলিক। প্রাইভেট key লোকাল ভাবে জমা হয় এবং পাবলিক key সার্ভার এ পাঠানো হয়। client কে certify করার ক্ষেত্রে এই প্রাইভেট key ব্যবহার করা হয় যাতে ভবিষ্যতে এই ইউজার কে অথিনটিকেত করা যায়।

উদাহরণ

<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
form>

ফলাফল

এইচটিএমএল ৫ <output> element

কোন ক্যালকুলাসন করার জন্য এবং তার ফলাফল দেখানোর জন্য এই element ব্যবহার করা হয়

উদাহরণ

<form action="action_page.asp"
 oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 0
 <input type="range"  id="a" name="a" value="50">
 100 +
 <input type="number" id="b" name="b" value="50">
 =
 <output name="x" for="a b"></output>
 <br><br>
 <input type="submit">
 </form>

ফলাফল

এইচটিএমএল ফর্ম elements

ট্যাগ	বর্ণনা
<form>	ইউজার দের ইনপুট দেওয়ার জন্য ফর্ম
<input>	ইনপুট কে নিয়ন্ত্রণ করার জন্য
<textarea>	একের অধিক লাইন কে ইনপুট দেওয়ার জন্য
<lable>	একটি ইনপুট এর লেবেল ডিফাইন করার জন্য
<fieldset>	একটি ফর্মের মধ্যে গ্রুপ সম্পর্কিত উপাদান ডিফাইন করার জন্য
<legend> <fieldset>	element এর নাম দেওয়ার জন্য (caption)
<select>	ড্রপ ডাউন তালিকা ডিফাইন করার জন্য
<optgroup>	গ্রুপ সম্পর্কিত অপশন ড্রপ ডাউন তালিকা থেকে পাওয়ার জন্য
<option>	ড্রপ ডাউন লিস্ট থেকে অপশন সিলেক্ট করার জন্য
<button>	বাটন কে ক্লিক করার ক্ষেত্রে
<datalist>	pre-defined অপশন্‌স এর একটি তালিকা যা থেকে ইনপুট কে নিয়ন্ত্রণ করা যাবে।
<keygen>	ফর্মের একজোড়া key ফিল্ড তৈরি করার জন্য
<optput>	calculation এর ফলাফল পাওয়ার জন্য।

এইচটিএমএল HTML

এইচটিএমএল ও এক্সএইচটিএমএল (HTML and XHTML)

April 11, 2015 Author-Check- Article-or-Video Leave a comment

XHTML কি

XHTML এর পূর্নরুপ হল EXtensible HyperText Markup Language। এটি অবিকল HTML এর মত তবে কিছুটা কঠোর। XHTML সব বড় বড় ব্রাউজারে সাপোর্ট করে।

কেন XHTML ব্যবহার করবো?

HTML কোডিং এ কোন ভুল থাকলেও অনেক সময় বিভিন্ন ব্রাউজ়ারে তা ধরা পড়েনা এবং ব্রাউজারে সুন্দর ভাবেই দেখা যায়। কিন্ত বর্তমানে বাজারে অনেক নতুন ব্রাউজার এসেছে। অনেকেই কম্পিউটার ছাড়াও মোবাইলে সাইট ভিজিট করছে। অনেক মোবাইল ব্রাউজার HTML এর ভুলগুলো সঠিকভাবে দেখাতে পারেনা। XHTML এ যেহেতু কোডিং সঠিকভাবে করতে হয় তাই XHTML ব্যবহার করাই শ্রেয়।

ডকুমেন্ট এর গঠন (Document Structure)

XHTML DOCTYPE আবশ্যক XHTML কোডিং এর ক্ষেত্রে।
এর মধ্যে xmlns attribute ও আবশ্যক।
<html>, <head>, <title>, <body> ও আবশ্যক।

নিম্নে একটি XHTML ডেমো কোড দেয়া হলঃ<

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
some content
</body>

</html>

এক্সএইচটিএমএল এলিমেন্ট XHTML Elements

XHTML elements গুলো সঠিকভাবে বিন্যাস করতে হবে।
ভুলঃ <b><i>This text is bold and italic</b></i>

সঠিকঃ <b><i>This text is bold and italic</i></b>

XHTML elements গুলো অবশ্যই সঠিকভাবে শেষ করতে হবে।

ভুলঃ <p>This is a paragraph
<p>This is another paragraph

সঠিকঃ
<p>This is a paragraph</p>
<p>This is another paragraph</p>

XHTML elements গুলো lowercase বা ছোটহাতের হতে হবে।

ভুলঃ

<BODY>
<P>This is a paragraph</P>
</BODY>

সঠিকঃ
<body>
<p>This is a paragraph</p>
</body>

XHTML documents এর অন্তত একটা root element থাকতে হবে।

এক্সএইচটিএমএল এট্রিবিউট XHTML Attributes

Attribute names গুলো lowercase বা ছোটহাতের হতে হবে।

ভুলঃ <table WIDTH="100%">

সঠিকঃ <table width="100%">

Attribute values গুলোও quoted করা থাকতে হবে।

ভুলঃ <table width=100%>

সঠিকঃ <table width="100%">

Attribute সংক্ষিপ্ত করা যাবেনা।

ভুলঃ
<input type="checkbox" name="vehicle" value="car" checked />

সঠিকঃ

কিভাবে HTML থেকে XHTML রুপান্তর করবো?

১। প্রতিটি পেজ এর প্রথম লাইনে XHTML <!DOCTYPE> যুক্ত করতে হবে।

২। প্রতিটি পেজ এর HTML elements এর মধ্যে xmlns attribute যুক্ত করতে হবে।

৩। প্রতিটি elements গুলো lowercase বা ছোটহাতের করতে হবে।

৪। প্রতিটি elements সঠিকভাবে বন্ধ করতে হবে।

৫। Attribute names গুলো lowercase বা ছোটহাতের করতে হবে।

৬। attribute values গুলো সঠিকভাবে Quote করতে হবে।

এইচটিএমএল HTML

এইচটিএমএল ইউনিফর্ম রিসোর্স লোকেটর (HTML Uniform Resource Locators)

April 10, 2015 Author-Check- Article-or-Video Leave a comment

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

ওয়েব ঠিকানার অন্য নাম হচ্ছে URL

একটি URL লেখার জন্য আমাদের টাইপ করতে হয় শব্দের সাহায্যে (http://bangla.salearningschool.com) বা ইন্টারনেট প্রটোকল এড্রেস (IP) টাইপ করে, যেমন (192.185.24.202)।

প্রায় সবাই এড্রেস বারে ডোমেইন নামকে টাইপ করে থাকে কারন নাম্বার এর থেকে নাম মনে রাখা সহজ।

URL- ইউনিফর্ম রিসোর্স লোকেটর

ওয়েব ব্রাউজার গুলি ওয়েব সার্ভার থেকে url ব্যবহার করার মাধ্যমে কোন পেজ কে গ্রহণ করে থাকে। এইচটিএমএল পেজ এর কোন লিঙ্ক কে ক্লিক করলে <a> ট্যাগ কোন ওয়েব এড্রেস কে নির্দেশ করে। ওয়েব এ কোন ডকুমেন্ট বা পেজ কে খুজে পাওয়ার জন্য URL ব্যবহার করা হয়।

একটি ওয়েব এড্রেস http://bangla.salearningschool.com/about-us.php নিচের নিয়মগুলোকে অনুসরন করে।

scheme://host.domain:port/path/filename

বর্ণনা

Scheme-ইন্টারনেট সার্ভিস এর ধরন কে ডিফাইন করে। (সাধারনভাবে http হয়ে থাকে)

Host-ডোমেইন এর host ডিফাইন করে (http এর ক্ষেত্রে ডিফল্ট হলত www)

Domain-ইন্টারনেট ডোমেইন এর নাম ডিফাইন করে (salearningschool.com)

port-host এর পোর্ট নাম্বার (http হল 80)

path- সার্ভার এর পাথ ডিফাইন করে (site এর প্রধান directory)

filename-ডকুমেন্ট বা ডাটার নাম

সাধারণ URL পরিকল্পনাগুলি

http (HyperText Transfer Protocol)- সাধারনত ওয়েব পেজ এর জন্য ব্যবহার করা হয়।

https (secure HyperText Transfer protocol)-নিরাপদ ওয়েব পেজ এর জন্য ব্যবহার করা হয়।

ftp (File Transfer Protocol)-ফাইল কে আপলোড বা ডাউনলোড করার জন্য

file-কম্পিউটার এর কোন ফাইল

URL এনকোডিং

ASCII character set এর মাধ্যমে URL গুলোকে ইন্টারনেট এ পাঠানো হয়। URL এ সবসময় character থাকে এবং তা ASCII তে পরিবর্তন করতে হয়। URL এনকোডিং নন ASCII characters গুলোকে “%” এ প্রতিস্থাপন করা হয় hexadecimal ডিজিট এর মাধ্যমে। URL এ কোন ফাকা জাইগা থাকে না ফাকা জায়গা গুলো (+) চিহ্ন অথবা %20 দিয়ে পুরন করা হয়।

ASCII এনকোডিং উদাহরণ

এইচটিএমএল ৫ এর ডিফল্ট character set গুলো হল UTF-8

বর্ণ	Windows-1252 থেকে	UTF-8 থেকে
€	%80	%E2%82%AC
£	%A3	%C2%A3
©	%A9	%C2%A9
®	%AE	%C2%AE
À	%C0	%C3%80
Á	%C1	%C3%81
Â	%C2	%C3%82
Ã	%C3	%C3%83
Ä	%C4	%C3%84
Å	%C5	%C3%85

এইচটিএমএল HTML

এইচটিএমএল প্রতিক (HTML Symbols)

April 9, 2015 Author-Check- Article-or-Video Leave a comment

শরিফুল ইসলাম

অনেক গানিতিক, প্রযুক্তিগত, মুদ্রার চিহ্ন নরমাল কীবোর্ড এ পাওয়া যায় না। এইচটিএমএল এর entity নাম ব্যবহার করে আমরা এই চিহ্ন গুলো নিয়ে আসতে পারি। যদি কোন entity নাম না থাকে তাহলে আমরা entity নাম্বার ব্যবহার করতে পারি decimal or hexadecimal রেফারেঞ্চ। যদি আমরা এইচটিএমএল পেজ কোন entity নাম বা কোন নাম্বার ব্যবহার করি তাহলে এই character গুলি সঠিক ফরম্যাট এ ডিসপ্লে করবে।

উদাহরণ

 <p>I will display &euro;</p>
 <p>I will display &#8364;</p>
 <p>I will display &#x20AC;</p>

এর ফলাফল পাওয়া যাবে

I will display €
I will display €
I will display €

কিছু গানিতিক চিহ্ন যা এইচটিএমএল সাপোর্ট করে

Char	নাম্বার	Entity	বর্ণনা

∀	∀	∀	FOR ALL
∂	∂	∂	PARTIAL DIFFERENTIAL
∃	∃	∃	THERE EXISTS
∅	∅	∅	EMPTY SETS
∇	∇	∇	NABLA
∈	∈	∈	ELEMENT OF
∉	∉	∉	NOT AN ELEMENT OF
∋	∋	&ni;	CONTAINS AS MEMBER
∏	∏	∏	N-ARY PRODUCT
∑	∑	∑	N-ARY SUMMATION

কিছু গ্রীক লেটার যা এইচটিএমএল সাপোর্ট করে

Char	নাম্বার	Entity	বর্ণনা

Α	Α	Α	গ্রীক ক্যাপিটাল লেটার আলফা
Β	Β	Β	গ্রীক ক্যাপিটাল লেটার বিটা
Γ	Γ	Γ	গ্রীক ক্যাপিটাল লেটার গামা
Δ	Δ	Δ	গ্রীক ক্যাপিটাল লেটার ডেলটা
Ε	Ε	Ε	গ্রীক ক্যাপিটাল লেটার EPSILON
Ζ	Ζ	Ζ	গ্রীক ক্যাপিটাল লেটার যেটা

অন্যান্য আরও অনেক entities যা এইচটিএমএল সাপোর্ট করে

Char	নাম্বার	Entity	বর্ণনা
©	©	©	কপিরাইট চিহ্ন
®	®	®	নিবন্ধন চিহ্ন
€	€	€	EURO চিহ্ন
™	™	™	ট্রেডমার্ক
←	←	←	বামদিকের নির্দেশ
↑	↑	↑	উপরের নির্দেশ
→	→	→	ডানদিকের নির্দেশ
↓	↓	↓	নিচের দিকের নির্দেশ
♠	♠	&spades;	BLACK SPADE SUIT
♣	♣	&clubs;	BLACK CLUB SUIT
♥	♥	&hearts;	BLACK HEART SUIT
♦	♦	&diams;	BLACK DIAMOND SUIT

এইচটিএমএল HTML

এইচটিএমএল ইনট্রিগুলো (HTML Entities)

April 8, 2015 Author-Check- Article-or-Video Leave a comment

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

কিছু সংরক্ষিত অক্ষর অবশ্যই character entities দ্বারা পরিবর্তন করতে হয়।

এমনকি যেই অক্ষরগুলো কীবোর্ড এ নাই সেইগুলো পরিবর্তন করা সম্ভব

এইচটিএমএল Entities

কিছু অক্ষর এইচটিএমএল এ সংরক্ষিত করা আছে। যদি আমরা কোন টেক্সট এ ছোট চিহ্ন (<) এবং বড় চিহ্ন (>) ব্যবহার করি ব্রাউজার তাদের ট্যাগ দিয়ে মিক্স করে দিতে পারে।

character entities এইচটিএমএল এ কিছু সংরক্ষিত অক্ষর দেখাতে সাহায্য করে।

character entity গুলো নিচের মতন

&entity_name;

OR

&#entity_number;

যদি আমরা ছোট চিহ্ন ডিসপ্লে করতে চাই তাহলে লিখব < বা <

নাম্বার এর পরিবর্তে নাম ব্যবহার করা বেশি উপকারী কারন এতে নামটা বেশি মনে থাকে। এর একটি অপকারিতা আছে কিছু কিছু ব্রাউজার entity নাম নাও পরতে পারে কিন্তু নাম্বার ঠিক পরতে পারে।

অবিচ্ছিন্ন স্থান (Non breaking space)

একই লাইন এ ফাকা জায়গা তৈরি করার জন্য   ব্যবহার করা হয়। মনে রাখতে হবে ব্রাউজার সবসময় এইচটিএমএল পেজ এর অতিরিক্ত ফাকা জায়গা মুছে ফেলে কেবলমাত্র একটি ফাকা জায়গা রাখে। যদি আমি ১০ টি স্পেস দেই ব্রাউজার তার ৯ টাই মুছে ফেলে ১ টি লিখবে। যদি আমরা টেক্সট এ প্রকৃত ফাকা জায়গা পেতে চাই তাহলে ক্যারেক্টার ব্যবহার করতে হবে।

কিছু গুরুত্বপূর্ণ ক্যারেক্টার entities

ফলাফল	বর্ণনা	নাম	প্রবেশকৃত নাম্বার
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

কিছু বৈশিষ্ট্যসূচক চিহ্ন

একটি বৈশিষ্ট্যসূচক চিহ্ন “glyph” লেখার বর্ণে যোগ করা হয়েছে। আবার কিছু বৈশিষ্ট্যসূচক চিহ্ন: grave ( ̀) এবং acute ( ́) কে বলা হয় accents (কথা)।

বৈশিষ্ট্যসূচক চিহ্ন বর্ণের উপরে , নিচে, পাশে এবং দুটি লেটার এর মাঝে হতে পারে। আলফানিউমেরিক ক্যারেক্টার এর কম্বিনেশন এ এই বৈশিষ্ট্যসূচক চিহ্নগুলো ব্যবহার করা হয়ে থাকে।

কিছু উদাহরণ নিচে দেওয়া হল

চিহ্ন	বর্ণ	গঠন	ফলাফল
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

এইচটিএমএল HTML

HTML Head (এইচটিএমএল হেড)

April 7, 2015 Author-Check- Article-or-Video Leave a comment

Atik Hasan

Webpage design & developer

HTML Head (এইচটিএমএল হেড):

<head>…..</head> ট্যাগ দিয়ে head সেকশন গঠিত। head সেকশনে meta data অর্থাৎ ডকুমেন্ট সম্পর্কিত তথ্য থাকে।এই head সেকশন এ যা কিছু লেখা হয় তা ওয়েব পেইজ এ দেখা যায় না। head সেকশন এ সাধারণত নিম্মের ট্যাগগুলো থাকেঃ

Title, Meta, Link, Base, Style, Script

শিরোনাম ট্যাগ

এই ট্যাগের মাঝে যা লিখা হয় তা Browser এর টাইটেল বারে দেখা যায়। মূলত ওয়েব পেইজ content এর একটি সংক্ষিপ্ত টাইটেল এই ট্যাগের মাঝে লেখা হয়। যেমন আমি যদি ওয়েব পেইজ ডিজাইনের বিভিন্ন এলিমেন্ট নিয়ে একটি ওয়েব পেইজ বানাতে চাই তা হলে টাইটেল নিচের মত হলে ভাল হয়ঃ-

<title>web page design tutorial</title>

মেটা ট্যাগ

এই ট্যাগ ব্যাবহার করা হয় ডকুমেন্ট সম্পর্কিত সকল তথ্য সন্নিবেশ/বর্ণনা করার জন্য।মেটা ডাটা browser, search engine এবং অন্নান্য ওয়েব সারভিস দ্বারা বেবহৃত হয়। সার্চ ইঞ্জিন ইনডেক্সিং এর জন্য এ ট্যাগের গুরুত্ত অপরিসীম।

সার্চ ইঞ্জিনের জন্য keywords নির্ধারণ করাঃ

ওয়েব পেজ এর description নির্ধারণ করাঃ

ওয়েব পেজ এর author নির্ধারণ করাঃ

ওয়েব পেজ এর character set নির্ধারণ করাঃ

৩০ সেকন্ড পরপর ওয়েব পেজ auto refresh করাঃ

লিঙ্ক ট্যাগ

Link ট্যাগটি দ্বারা একটি পেইজকে অন্য পেইজের সাথে বা এলিমেন্টের সাথে সম্পর্ক ইস্থাপন করা হয়।এই ট্যাগ টি সাধারণত স্টাইল শীট যোগ করার জন্য ব্যাবহার করা হয়।

বেজ ট্যাগ

Base ট্যাগ টি দ্বারা ওয়েব সাইটের সকল লিঙ্ক জন্য এর একটি default অ্যাড্রেস বা default target সেট করিয়ে দেয়া হয়।যেমনঃ-

যেহেতু আমরা base অ্যাড্রেসের target হিসেবে _blank দিয়েছি সেহেতু এই পেইজের কোন লিঙ্ক এ ক্লিক করলে নতুন একটি ট্যাব এ পেজটি ওপেন হবে।

স্টাইল ট্যাগ (Style Tag)

HTML ডকুমেন্টটিতে কি ধরণের ইস্টাইল ব্যাবহার হবে তা এই style ট্যাগ দ্বারা লেখা হয়। যেমনঃ-

<style>

body {background-color:yellow;}

</style>

স্ক্রিপ্ট ট্যাগ (Script Tag)

Script ট্যাগটি Java script লেখার জন্য ব্যাবহার করা হয়। যেমন আমরা ওয়েব পেজ এ Hello JavaScript এই লেখাটুকো দেখাব demo নামক id ব্যাবহার করে।

<script>

function myFunction {

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিঙে টাইপ কাস্টিং

April 6, 2015 Author-Check- Article-or-Video

সি প্রোগ্রামিঙে টাইপ কাস্টিংঃ
রিদওয়ান বিন শামীম

টাইপ কাস্টিং একটি পদ্ধতি যেখানে কোন চলককে এক ডাটা টাইপ থেকে অন্য ডাটা টাইপে পরিবর্তিত করা যায়। যেমন, একটি লম্বা মানকে যদি সাধারণ একটি পূর্ণ সংখ্যায় প্রকাশ করতে চাই, তাহলে long থেকে int এ টাইপ কাস্ট করে তা করা যায়।এক টাইপ থেকে অন্য টাইপে রুপান্তরের ক্ষেত্রে নিচের মত করে কাস্ট অপারেটর ব্যবহার করে এটি করা হয়ঃ
(type_name) expression

কাস্ট অপারেটর কীভাবে floating-point operation হিসাবে দুটি পূর্ণসংখ্যা চলক বিভাজন তৈরি করে আলাদা করে তা নিচের উদাহরণ থেকে আমরা বুঝতে পারি।

#include <stdio.h>

main()
{
int sum = 17, count = 5;
double mean;

mean = (double) sum / count;
printf("Value of mean : %f\n", mean );

}
উপরের কোড ঠিকভাবে কাজ করলে তা যে ফলাফল দেখাবে তা হল,
Value of mean : 3.400000
এখানে বলা উচিৎ যে, কাস্ট অপারেটর ডিভিশনের চেয়ে বেশি অগ্রাধিকার পায় তাই অঙ্কের মান type double দ্বারা রূপান্তরিত হয়, তারপর দ্বৈত মান প্রদর্শন করে। টাইপ কনভার্সন অন্তর্নিহিতও হতে পারে যা কম্পাইলারের মাধ্যমে স্বয়ংক্রিয়ভাবে হতে পারে বা কাস্ট অপারেটরের মাধ্যমে সরাসরিও হয়। তবে টাইপ কনভার্সন কাস্ট অপারেটরের মাধ্যমে করাই ভাল।
পূর্ণসংখ্যার মানোন্নয়নঃ পূর্ণসংখ্যার মানোন্নয়ন একটি প্রক্রিয়া যেটি int বা unsigned int এরচে ছোট মানের পূর্ণসংখ্যার মানকে int বা unsigned int এর মানে আনতে ব্যবহার করা হয়।কোন int এ ক্যারেকটার যোগ করার ক্ষেত্রে আমরা যা করতে পারি তা হল,
#include <stdio.h>

main()
{
int i = 17;
char c = 'c'; /* ascii value is 99 */
int sum;

sum = i + c;
printf("Value of sum : %d\n", sum );

}
উপরের কোড ঠিকভাবে কাজ করলে তা যে ফলাফল দেখাবে তা হল,

Value of sum : 116
এখানে মান ১১৬ আসছে কারণ কম্পাইলার পূর্ণসংখ্যার মানোন্নয়ন করে সি ('c' )এর মান ascii তে রুপান্তর করে নিচ্ছে মূল কাজের আগে।
সাধারণ এরিথমেটিক রুপান্তরঃ সাধারণ এরিথমেটিক রুপান্তরের ক্ষেত্রে অন্তর্হিত ভাবে সব মানকে একটি নির্দিষ্টভাবে সাজানো হয়। কম্পাইলার প্রথমে পূর্ণসংখ্যার মানোন্নয়ন করে, এর পরও টাইপ সমান না হলে নিচের ক্রমানুসারে সংখ্যার প্রাপ্যতার অগ্রাধিকার ভিত্তিতে রুপান্তর করা হয়।

সাধারণ এরিথমেটিক রুপান্তর assignment operators বা logical operators ইত্যাদির জন্য ব্যবহার করা হয় না। নিচের উদাহরণ থেকে আমরা ব্যপারটা বুঝবঃ
#include <stdio.h>

main()
{
int i = 17;
char c = 'c'; /* ascii value is 99 */
float sum;

sum = i + c;
printf("Value of sum : %f\n", sum );

}
উপরের কোড ঠিকভাবে কাজ করলে তা যে ফলাফল দেখাবে তা হল,

Value of sum : 116.000000
এখানে c প্রথমে পূর্ণসংখ্যায় রূপান্তরিত হয়েছে কিন্তু মূল মান দ্বিগুণ হওয়ায় সাধারণ এরিথমেটিক রুপান্তর ব্যবহার করে এবং কম্পাইলার i ও c কে floatএ রূপান্তরিত করে সেভাবেই ফলাফল দিয়েছে।

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিঙে প্রিপ্রসেসর

April 6, 2015 Author-Check- Article-or-Video Leave a comment

সি প্রোগ্রামিঙে প্রিপ্রসেসরঃ
রিদওয়ান বিন শামীম

সি প্রোগ্রামিঙে প্রিপ্রসেসর কম্পাইলারের অংশ নয় কিন্তু কিন্তু কম্পাইলেসন প্রক্রিয়ার একটি পৃথক অংশ। সহজ কথায় বলতে গেলে, সি প্রিপ্রসেসর একটি টেক্সট সাবস্টিটিউশন অনুষঙ্গ এবং কম্পাইলারকে মূল কম্পাইলেসনের আগে প্রয়োজনীয় প্রিপ্রসেসিং সম্পন্ন করার নির্দেশ দিয়ে থাকে। আমরা এ প্রবন্ধে সি প্রিপ্রসেসরকে সিপিপি বলব।
সমস্ত প্রিপ্রসেসর কমান্ড একটি পাউন্ড প্রতীক (#) দ্বারা শুরু হয়। এটি প্রথম অশূন্য মাত্রা, এবং পঠনযোগ্যতার জন্য এটি প্রথম কলামে শুরু করা হয়। কিছু গুরুত্বপূর্ণ প্রিপ্রসেসিং ডিরেক্টিভ নিচের তালিকায় দেয়া হল।
Directive Description
#define প্রিপ্রসেসর ম্যাক্রো অন্তর্ভুক্ত/অদলবদল করে।
#include অন্য ফাইল থেকে নির্দিষ্ট হিডার(header) অন্তর্ভুক্ত করে।
#undef প্রিপ্রসেসরের ম্যাক্রোকে আনডেফাইন করে।
#ifdef ম্যাক্রো ডিফাইনড হলে সত্য নির্দেশ করে।
#ifndef ম্যাক্রো আনডিফাইনড হলে সত্য নির্দেশ করে।
#if কম্পাইলেসনের সময় ঠিক হলে টা টেস্ট করে।
#else #if এর অলটারনেটিভ।
#elif #else এবং #if যদি এক বিবৃতিতে থাকে।
#endif শর্ত সাপেক্ষে প্রিপ্রসেসরের সমাপ্তি করে।
#error Stderr এ এরর ম্যাসেজ নির্দেশ করে।
#pragma বিশেষ প্রক্রিয়া ব্যবহার করে কম্পাইলারে বিশেষ কমান্ড নির্দেশ করে।

বিভিন্ন ডিরেক্টিভ বুঝার জন্য নিচের উদাহরণ দেয়া হল,
#define MAX_ARRAY_LENGTH 20
এই ডিরেক্টিভ MAX_ARRAY_LENGTH কে 20 দিয়ে পালটানোর জন্য সিপিপিকে নির্দেশ দেয় এবং #define ব্যবহার করে ধ্রুবকের পঠনযোগ্যতা বাড়াতে।
#include <stdio.h>
#include "myheader.h"
এই ডিরেক্টিভ সিস্টেম লাইব্রেরি থেকে stdio.h নেয়ার জন্য সিপিপিকে নির্দেশ দেয়, এবং বর্তমান সোর্স ফাইলে টেক্সট যোগ করে। পরবর্তী লাইন সিপিপিকে লোকাল ডিরেক্টরি থেকে myheader.h নিতে ও বর্তমান সোর্স ফাইলে কন্টেন্ট যোগ করতে নির্দেশ দেয়।
#undef FILE_SIZE
#define FILE_SIZE 42
এটি সিপিপিকে FILE_SIZE কে 42 হিসেবে প্রদর্শন করতে নির্দেশ করে।
#ifndef MESSAGE
#define MESSAGE "You wish!"
#endif
এটি সিপিপিকে কোন ম্যাসেজ যদি ডিফাইন না করা হয়ে থাকে তাকে ডিফাইন করতে নির্দেশ দেয়।
#ifdef DEBUG
/* Your debugging statements here */
#endif
এটি সিপিপিকে কোন বিবৃতি সম্পন্ন করতে বলে যদি DEBUG ডিফাইন করা থাকে। কম্পাইলেসনের সময় -DDEBUG flag সম্পন্ন থাকলে এটি দরকার হয়, জিসিসি কম্পাইলারের ক্ষেত্রে। এটি DEBUGকে ডিফাইন করবে তাই কম্পাইলেসনের সময় debugging on বা off করা যাবে।
ANSI C কয়েক রকম ম্যাক্রো ডিফাইন করে। প্রোগ্রামিঙে এর সবগুলোই ব্যবহার করা যাবে কিন্তু পূর্বনির্ধারিত ম্যাক্রোগুলো সরসরি পরিবর্তন করা যায় না।
Macro Description
__DATE__ character literalএ বর্তমান তারিখ "MMM DD YYYY" ফরমেটে
__TIME__ character literal এ বর্তমান সময়"HH:MM:SS" ফরমেটে
__FILE__ string literalএ বর্তমান ফাইল নেম।
__LINE__ দশমিক ধ্রুবকে বর্তমান লাইন নাম্বার।
__STDC__ কম্পাইলার ANSI standardএ কম্পাইল করলে 1 দ্বারা নির্ণীত।

নিচের উদাহরণগুলো দেখা যাক;
#include <stdio.h>

main()
{
printf("File :%s\n", __FILE__ );
printf("Date :%s\n", __DATE__ );
printf("Time :%s\n", __TIME__ );
printf("Line :%d\n", __LINE__ );
printf("ANSI :%d\n", __STDC__ );

}
test.c ফাইলে কোডগুলো সম্পন্ন হলে যে ফলাফল হবেঃ
File :test.c
Date :Jun 2 2012
Time :03:36:24
Line :8
ANSI :1

প্রিপ্রসেসরের অপারেটরঃ ম্যাক্রো তৈরি করতে সি প্রিপ্রসেসর যে অপারেটর সুবিধা দেয় টা হল, ম্যাক্রো চালু রাখাঃ ম্যাক্রো সাধারণত এক লাইনে হয়, এক লাইনের অনেক লম্বা কোন ম্যাক্রো চালু রাখতে এই অপারেটর ব্যবহার করা হয়। যেমন,
#define message_for(a, b) \
printf(#a " and " #b ": We love you!\n")
স্ট্রিংজাইজঃ ('#') দ্বারা প্রকাশ করা হয়। ম্যাক্রো ডেফিনেশনের মধ্যে ম্যাক্রো প্যারামিটারকে স্ট্রিং ধ্রুবকে পরিনত করে। নির্দিষ্ট প্যারামিটার লিস্ট বা আর্গুমেন্টের ক্ষেত্রেই কেবল এই অপারেটর ব্যবহার করা হয়।
#include <stdio.h>

#define message_for(a, b) \
printf(#a " and " #b ": We love you!\n")

int main(void)
{
message_for(Carole, Debra);
return 0;
}
কোড ঠিকভাবে লেখা হলে তা এই ফলাফল দেখাবে,
Carole and Debra: We love you!
টোকেন পেস্টিং অপারেটরঃ একে (##) দ্বারা প্রকাশ করা হয়, ম্যাক্রো ডেফিনেশনের দুটি তকেঙ্কে একীভূত করতে ব্যবহার করা হয়,
#include <stdio.h>

#define tokenpaster(n) printf ("token" #n " = %d", token##n)

int main(void)
{
int token34 = 40;

tokenpaster(34);
return 0;
}
কোড ঠিকভাবে লেখা হলে তা এই ফলাফল দেখাবে
token34 = 40
এটি কীভাবে দেখানো হল যেখানে
printf ("token34 = %d", token34);
token##n কে token34 এ রূপান্তরের ক্ষেত্রে stringize এবং token-pasting দুটিই ব্যবহৃত হয়েছে।
ডিফাইনড অপারেটরঃ কোন আইডেন্টিফায়ার #define ব্যবহার করে ধ্রুবক প্রকাশ করলে এটি ব্যবহার হয়, আইডেন্টিফায়ার ডিফাইনড হলে ভ্যলু ট্রু অর্থাৎ নন-জিরো আর আন ডিফাইনড হলে ফলস বা জিরো।
#include <stdio.h>

#if !defined (MESSAGE)
#define MESSAGE "You wish!"
#endif

int main(void)
{
printf("Here is the message: %s\n", MESSAGE);
return 0;
}
কোড ঠিকভাবে লেখা হলে তা এই ফলাফল দেখাবে
Here is the message: You wish!

প্যারামিটারাইজড ম্যাক্রোঃ সিপিপির একটি গুরুত্বপূর্ণ সুবিধা হল এইটি প্যারামিটারাইজড ম্যাক্রো ব্যবহার করে কাজকে এগিয়ে নেয়।
int square(int x) {
return x * x;
}
ম্যাক্রো ব্যবহার করে পুনরায় লিখতে পারি,
#define square(x) ((x) * (x))
আর্গুমেন্ট সহ ম্যাক্রোকে #define directive দ্বারা লিখতে হয়, আর্গুমেন্ট লিস্ট নির্দিষ্ট এবং ম্যাক্রোর নাম মেনে চলতে হয়, macro name ও open parenthesis এর মধ্যে কোন ফাঁকা জায়গা রাখা যাবে না।
#include <stdio.h>

#define MAX(x,y) ((x) > (y) ? (x) : (y))

int main(void)
{
printf("Max between 20 and 10 is %d\n", MAX(10, 20));
return 0;
}
কোড ঠিকভাবে লেখা হলে তা এই ফলাফল দেখাবে
Max between 20 and 10 is 20

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিং এর একটি গুরুত্বপূর্ণ টপিক Union

April 6, 2015 Author-Check- Article-or-Video

আপনাদের সবাইকে স্বাগতম আমাদের সাইটে। আজ আমরা এখানে সি প্রোগ্রামিং এর একটি গুরুত্বপূর্ণ চ্যাপ্টার আলোচনা করব, তার নাম হলো Union। আপনাদের আগেই বলেছি সি প্রোগ্রামিং শিখতে হলে আপনাকে কিছুটা হলেও ইংরেজী শিখতে হবে।
একটি ইউনিয়ন এর সাহায্যে আপনি একই মেমরির স্থানে বিভিন্ন ধরনের তথ্য সংরক্ষণ করতে সক্ষম হবেন যা সি তে পাওয়া যায় একটি বিশেষ ডাটা টাইপ হিসেবে। আপনি অনেক সদস্যদের সঙ্গে একটি ইউনিয়ন নির্ধারণ করতে পারবেন, কিন্তু শুধুমাত্র এক সদস্য যে কোনো সময় একটি মান থাকতে পারে. ইউনিয়ন মাল্টি উদ্দেশ্যর জন্য একই মেমরি অবস্থান ব্যবহার করে একটি কার্যকর উপায় প্রদান।
Defining a Union
এখানে Union এর সঙ্গা প্রদান করা হচ্ছেঃ
কাঠামো নির্ধারণ করার সময় হিসাবে আপনি কি একটি ইউনিয়ন নির্ধারণ করার জন্য, আপনি খুব অনুরূপ ইউনিয়ন বিবৃতি ব্যবহার করা আবশ্যক ছিল। ইউনিয়ন বিবৃতিতে আপনার প্রোগ্রামের জন্য একাধিক সদস্য, একটি নতুন ডাটা টাইপ সংজ্ঞায়িত করে। নিম্নরূপ ইউনিয়ন বিবৃতি বিন্যাস হল:
union [union tag]
{
member definition;
member definition;
...
member definition;
} [one or more union variables];

ইউনিয়ন ট্যাগ ঐচ্ছিক এবং প্রতিটি সদস্য সংজ্ঞা যেমন আমি কোন int হিসাবে একটি স্বাভাবিক পরিবর্তনশীল সংজ্ঞা, হয়; অথবা চ ভাসমান; বা অন্য কোন বৈধ পরিবর্তনশীল সংজ্ঞা. ইউনিয়ন এর সংজ্ঞা শেষে, চূড়ান্ত সেমিকোলন আগে, আপনি এক বা একাধিক ইউনিয়ন ভেরিয়েবল উল্লেখ করতে পারেন কিন্তু এটা ঐচ্ছিক. এখানে আপনি তিন সদস্য হয়েছে, যা ডেটা নামে একটি ইউনিয়ন টাইপ সংজ্ঞায়িত করবে উপায় i, f, and str:
union Data
{
int i;
float f;
char str[20];
} data;

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

একটি ইউনিয়ন দ্বারা দখল মেমরি ইউনিয়নের বৃহত্তম সদস্য রাখা যথেষ্ট বড় হতে হবে. এই পংক্তি দ্বারা দখল করা যায়, যা সর্বোচ্চ স্থান, কারণ উদাহরণস্বরূপ, উপরোক্ত উদাহরণ তথ্য টাইপ মেমরি স্পেস 20 বাইট ব্যাপৃত হবে. নিম্নলিখিত উপরে ইউনিয়ন দখল করে মোট মেমরির মাপ প্রদর্শন করা হবে যা উদাহরণ:

#include <stdio.h>
#include <string.h>

union Data
{
int i;
float f;
char str[20];
};

int main( )
{
union Data data;

printf( "Memory size occupied by data : %d\n", sizeof(data));

return 0;
}

উপরের কোড কম্পাইল এবং মৃত্যুদন্ড কার্যকর করা হয়, এটি নিম্নলিখিত ফলাফল সৃষ্টি করে:
Memory size occupied by data : 20
Accessing Union Members
একটি ইউনিয়নের কোন সদস্য অ্যাক্সেস করার জন্য, আমরা সদস্য এক্সেস অপারেটর ব্যবহার (.). সদস্য এক্সেস অপারেটর ইউনিয়ন পরিবর্তনশীল নাম এবং আমরা অ্যাক্সেস করতে চান যে ইউনিয়ন সদস্য মধ্যে একটি নির্দিষ্ট সময়ের হিসাবে কোডেড হয়. আপনি ইউনিয়ন ধরনের ভেরিয়েবল সংজ্ঞায়িত করতে ইউনিয়ন শব্দ ব্যবহার করতে হবে. ইউনিয়নের ব্যবহার ব্যাখ্যা উদাহরণ অনুসরণ করা হয়:
#include <stdio.h>
#include <string.h>

union Data
{
int i;
float f;
char str[20];
};

int main( )
{
union Data data;

data.i = 10;
data.f = 220.5;
strcpy( data.str, "C Programming");

printf( "data.i : %d\n", data.i);
printf( "data.f : %f\n", data.f);
printf( "data.str : %s\n", data.str);

return 0;
}

উপরের কোড কম্পাইল এবং মৃত্যুদন্ড কার্যকর করা হয়, এটি নিম্নলিখিত ফলাফল সৃষ্টি করে:
data.i : 1917853763
data.f : 4122360580327794860452759994368.000000
data.str : C Programming
এখানে, আমরা পরিবর্তনশীল নির্ধারিত চূড়ান্ত মান মেমোরি দখল করেছে, কারণ আমি ও ইউনিয়ন চ সদস্যদের মান ক্ষতিগ্রস্ত হবে যে দেখতে পারেন এবং এই মান Str সদস্য খুব ভাল মুদ্রিত হচ্ছে যে যদি কারণ। এখন আমরা হচ্ছে ইউনিয়নের প্রধান উদ্দেশ্য, যা একটি সময়ে এক পরিবর্তনশীল ব্যবহার করতে হবে যেখানে এর আবার একই উদাহরণ দেখব:
#include <stdio.h>
#include <string.h>

union Data
{
int i;
float f;
char str[20];
};

int main( )
{
union Data data;

data.i = 10;
printf( "data.i : %d\n", data.i);

data.f = 220.5;
printf( "data.f : %f\n", data.f);

strcpy( data.str, "C Programming");
printf( "data.str : %s\n", data.str);

return 0;
}

উপরের কোড কম্পাইল এবং মৃত্যুদন্ড কার্যকর করা হয়, এটি নিম্নলিখিত ফলাফল সৃষ্টি করে:
data.i : 10
data.f : 220.500000
data.str : C Programming

এখানে, সব সদস্যদের খুব ভাল এক সদস্য একটি সময়ে ব্যবহার করা হচ্ছে, কারণ মুদ্রিত হচ্ছে।

এইচটিএমএল HTML

এইচটিএমএল স্ক্রিপ্ট (HTML Scripts)

April 6, 2015 Author-Check- Article-or-Video

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

Javascript এইচটিএমএল পেজ কে অনেক গতিশীল এবং ইন্টার‌্যাক্টিভ করে তুলে।

এইচটিএমএল <script> ট্যাগ

জাভাস্ক্রিপ্ট এর মতো ক্লায়েন্ট সাইড স্ক্রিপ্ট কে সঙ্গায়িত করার জন্য <script> ট্যাগ ব্যবহার করা হয়।

জাভাস্ক্রিপ্ট এর সাধারণ ব্যবহার হচ্ছে ইমেজ (স্টিল ছবি) ব্যবহার কৌশল, ফর্ম যাচাইকরণ, এবং গতিশীল বস্তুর পরিবর্তন।

নিচের স্ক্রিপ্টটি ফলাফল হিসেবে Hello JavaScript! প্রদর্শন করে। এইচটিএমএল ইলিমিন্ট এর ভিতরে id="demo" হিসেবে লেখা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

</body>
</html>

ফলাফল

Hello JavaScript!

এইচটিএমএল <noscript> ট্যাগ

যদি ব্যবহারকারীর ব্রাউজারে স্ক্রিপ্ট ডিজাবল করা থাকে বা তার ব্রাউজার স্ক্রিপ্ট সমর্থন না করে তাহলে ব্যবহারকারীকে একটি বিকল্প কনটেন্ট প্রদর্শন করার জন্য <noscript> ট্যাগ ব্যবহার করা হয়। শুধুমাত্র ব্রাউজারে স্ক্রিপ্টিং ডিজাবল বা ব্রাউজার স্ক্রিপ্ট সমর্থন না করলেই <noscript> ট্যাগ এর কনটেন্ট প্রদর্শিত হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
 
</body>
</html>

ফলাফল:

Hello JavaScript!

A browser without support for JavaScript will show the text written inside the noscript element.

জাভাস্ক্রিপ্ট এর একটি পরীক্ষা (আমাদের জাভাস্ক্রিপ্ট টিওটোরিয়াল থেকে)

জাভাস্ক্রিপ্ট যা করতে পারে তার কিছু উদাহরণ নিচে দেওয়া হল:

JavaScript can change HTML content:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
 }
</script>

</body>
</html>

ফলাফলঃ

My First JavaScript

JavaScript can change the content of an HTML element:

This is a demonstration.

JavaScript can change HTML styles:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
function myFunction() {
    document.getElementById("demo").style.fontSize = "25px"; 
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

ফলাফলঃ

My First JavaScript

JavaScript can change the style of an HTML element.

JavaScript can change HTML attributes

<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
    var pic;
    if (sw == 0) {
        pic = "pic_bulboff.gif"
    } else {
        pic = "pic_bulbon.gif"
    }
    document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

</body>
</html>

ফলাফলঃ

এইচটিএমএল scripts ট্যাগ

ট্যাগ	বর্ণনা
<script>	client side script কে ডিফাইন করে
<noscript>	যদি client-side-script সাপোর্ট না করে তাহলে ইউজারদের জন্য বিকল্প কনটেন্ট ডিফাইন করে থাকে

এইচটিএমএল HTML

এইচটিএমএল কালার সেড (HTML Color Shades )

April 5, 2015 Author-Check- Article-or-Video

HTML কালার সেড

লাল, সবুজ এবং নীল আলোর সংমিশ্রণে একটি কলারকে প্রদর্শন করা হয়।

গ্রে কালারের সেডসমূহ

সব রঙের আলোর সমান পরিমান বেবহার করে গ্রে কালার তৈরী করা হয়। নিচে কিছু গ্রে কালার সেডের হেক্সা কোড ও আরজিবি (RGB) কোড দেয়া হলো:

Gray Shades	HEX	RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

১৬ মিলিয়ন ভিন্ন ভিন্ন কালার

০ থেকে ২৫৫ রেঞ্জের মধ্যে লাল, সবুজ এবং নীলের সংমিশ্রণে প্রায় ১৬ মিলিয়ন ভিন্ন ভিন্ন কালার তৈরী করা সম্ভব। এখনকার মনিটরগুলো প্রায় ১৬৩৮৪ কালার দেখাতে সক্ষম। কালার কোডগুলোর দিকে লক্ষ্য করলে দেখা যায় কোডের রেঞ্জ ০ থেকে ২৫৫ এর মধ্যে পরিবর্তিত হচ্ছে।

Red Light	HEX	RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

স্টোন এজ

পূর্বে কম্পিউটার যখন শুধুমাত্র ২৫৬টি কালার সাপোর্ট করতো তখন ওয়েবের জন্য ২১৬টি নিরাপদ কালার ছিল যা সকল ব্রাউজারে সাপোর্ট করতো।

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

এইচটিএমএল HTML

এইচটিএমএল রঙের মান HTML Color Values

April 4, 2015 Author-Check- Article-or-Video

নামঃ মোঃ সাইদুল হক রিগান

এইচটিএমএল রঙের মান HTML Color Values

এইচ টি এম এল এ রঙকে হেক্সাডেসিমেল দ্বারা প্রকাশ করা হয়। এটি হল কোন রঙ এ লাল, সবুজ, এবং নীল (আরজিবি) এর মিশ্রণের পরিমাণ।

প্রতিটি আলোর উৎস জন্য সর্বনিম্ন মান ০ (হেক্স ০০) হয়. সর্বোচ্চ মান ২৫৫ হয় (হেক্স এফ এফ)

হেক্সাডেসিমেল মান লেখার আগে # চিহ্ন বসানো হয়। তারপর তিন বা ছয় হেক্স অক্ষর দ্বারা রঙ এর মান বসানো হয়।

তিন অক্ষর (#rgb) দিয়ে লিখলে তা স্বয়ংক্রিয়ভাবে অক্ষরে (#rrggbb) রূপান্তরিত হয়।

Color 3 digit HEX	Color 6 digit HEX	Color RGB
#F00	#FF0000	rgb(255,0,0)
#0F0	#00FF00	rgb(0,255,0)
#00F	#0000FF	rgb(0,0,255)

ধূসর রঙ এর মাত্রা (কালো থেকে সাদা) এর জন্য তিনটি রঙ এর সমান মান দ্বারা প্রকাশ করা যায়।

Color 3 digit HEX	Color 6 digit HEX	Color RGB
#000	#000000	rgb(0,0,0)
#888	#888888	rgb(136,136,136)
#FFF	#FFFFFF	rgb(255,255,255)

হেক্সাডেসিমালের মান অনুসারে কালার সাজানো

Color Name	HEX	Shades	Mix
Black	#000000	Shades	Mix
Navy	#000080	Shades	Mix
DarkBlue	#00008B	Shades	Mix
MediumBlue	#0000CD	Shades	Mix
Blue	#0000FF	Shades	Mix
DarkGreen	#006400	Shades	Mix
Green	#008000	Shades	Mix
Teal	#008080	Shades	Mix
DarkCyan	#008B8B	Shades	Mix
DeepSkyBlue	#00BFFF	Shades	Mix
DarkTurquoise	#00CED1	Shades	Mix
MediumSpringGreen	#00FA9A	Shades	Mix
Lime	#00FF00	Shades	Mix
SpringGreen	#00FF7F	Shades	Mix
Aqua	#00FFFF	Shades	Mix
Cyan	#00FFFF	Shades	Mix
MidnightBlue	#191970	Shades	Mix
DodgerBlue	#1E90FF	Shades	Mix
LightSeaGreen	#20B2AA	Shades	Mix
ForestGreen	#228B22	Shades	Mix
SeaGreen	#2E8B57	Shades	Mix
DarkSlateGray	#2F4F4F	Shades	Mix
LimeGreen	#32CD32	Shades	Mix
MediumSeaGreen	#3CB371	Shades	Mix
Turquoise	#40E0D0	Shades	Mix
RoyalBlue	#4169E1	Shades	Mix
SteelBlue	#4682B4	Shades	Mix
DarkSlateBlue	#483D8B	Shades	Mix
MediumTurquoise	#48D1CC	Shades	Mix
Indigo	#4B0082	Shades	Mix
DarkOliveGreen	#556B2F	Shades	Mix
CadetBlue	#5F9EA0	Shades	Mix
CornflowerBlue	#6495ED	Shades	Mix
RebeccaPurple	#663399	Shades	Mix
MediumAquaMarine	#66CDAA	Shades	Mix
DimGray	#696969	Shades	Mix
SlateBlue	#6A5ACD	Shades	Mix
OliveDrab	#6B8E23	Shades	Mix
SlateGray	#708090	Shades	Mix
LightSlateGray	#778899	Shades	Mix
MediumSlateBlue	#7B68EE	Shades	Mix
LawnGreen	#7CFC00	Shades	Mix
Chartreuse	#7FFF00	Shades	Mix
Aquamarine	#7FFFD4	Shades	Mix
Maroon	#800000	Shades	Mix
Purple	#800080	Shades	Mix
Olive	#808000	Shades	Mix
Gray	#808080	Shades	Mix
SkyBlue	#87CEEB	Shades	Mix
LightSkyBlue	#87CEFA	Shades	Mix
BlueViolet	#8A2BE2	Shades	Mix
DarkRed	#8B0000	Shades	Mix
DarkMagenta	#8B008B	Shades	Mix
SaddleBrown	#8B4513	Shades	Mix
DarkSeaGreen	#8FBC8F	Shades	Mix
LightGreen	#90EE90	Shades	Mix
MediumPurple	#9370DB	Shades	Mix
DarkViolet	#9400D3	Shades	Mix
PaleGreen	#98FB98	Shades	Mix
DarkOrchid	#9932CC	Shades	Mix
YellowGreen	#9ACD32	Shades	Mix
Sienna	#A0522D	Shades	Mix
Brown	#A52A2A	Shades	Mix
DarkGray	#A9A9A9	Shades	Mix
LightBlue	#ADD8E6	Shades	Mix
GreenYellow	#ADFF2F	Shades	Mix
PaleTurquoise	#AFEEEE	Shades	Mix
LightSteelBlue	#B0C4DE	Shades	Mix
PowderBlue	#B0E0E6	Shades	Mix
FireBrick	#B22222	Shades	Mix
DarkGoldenRod	#B8860B	Shades	Mix
MediumOrchid	#BA55D3	Shades	Mix
RosyBrown	#BC8F8F	Shades	Mix
DarkKhaki	#BDB76B	Shades	Mix
Silver	#C0C0C0	Shades	Mix
MediumVioletRed	#C71585	Shades	Mix
IndianRed	#CD5C5C	Shades	Mix
Peru	#CD853F	Shades	Mix
Chocolate	#D2691E	Shades	Mix
Tan	#D2B48C	Shades	Mix
LightGray	#D3D3D3	Shades	Mix
Thistle	#D8BFD8	Shades	Mix
Orchid	#DA70D6	Shades	Mix
GoldenRod	#DAA520	Shades	Mix
PaleVioletRed	#DB7093	Shades	Mix
Crimson	#DC143C	Shades	Mix
Gainsboro	#DCDCDC	Shades	Mix
Plum	#DDA0DD	Shades	Mix
BurlyWood	#DEB887	Shades	Mix
LightCyan	#E0FFFF	Shades	Mix
Lavender	#E6E6FA	Shades	Mix
DarkSalmon	#E9967A	Shades	Mix
Violet	#EE82EE	Shades	Mix
PaleGoldenRod	#EEE8AA	Shades	Mix
LightCoral	#F08080	Shades	Mix
Khaki	#F0E68C	Shades	Mix
AliceBlue	#F0F8FF	Shades	Mix
HoneyDew	#F0FFF0	Shades	Mix
Azure	#F0FFFF	Shades	Mix
SandyBrown	#F4A460	Shades	Mix
Wheat	#F5DEB3	Shades	Mix
Beige	#F5F5DC	Shades	Mix
WhiteSmoke	#F5F5F5	Shades	Mix
MintCream	#F5FFFA	Shades	Mix
GhostWhite	#F8F8FF	Shades	Mix
Salmon	#FA8072	Shades	Mix
AntiqueWhite	#FAEBD7	Shades	Mix
Linen	#FAF0E6	Shades	Mix
LightGoldenRodYellow	#FAFAD2	Shades	Mix
OldLace	#FDF5E6	Shades	Mix
Red	#FF0000	Shades	Mix
Fuchsia	#FF00FF	Shades	Mix
Magenta	#FF00FF	Shades	Mix
DeepPink	#FF1493	Shades	Mix
OrangeRed	#FF4500	Shades	Mix
Tomato	#FF6347	Shades	Mix
HotPink	#FF69B4	Shades	Mix
Coral	#FF7F50	Shades	Mix
DarkOrange	#FF8C00	Shades	Mix
LightSalmon	#FFA07A	Shades	Mix
Orange	#FFA500	Shades	Mix
LightPink	#FFB6C1	Shades	Mix
Pink	#FFC0CB	Shades	Mix
Gold	#FFD700	Shades	Mix
PeachPuff	#FFDAB9	Shades	Mix
NavajoWhite	#FFDEAD	Shades	Mix
Moccasin	#FFE4B5	Shades	Mix
Bisque	#FFE4C4	Shades	Mix
MistyRose	#FFE4E1	Shades	Mix
BlanchedAlmond	#FFEBCD	Shades	Mix
PapayaWhip	#FFEFD5	Shades	Mix
LavenderBlush	#FFF0F5	Shades	Mix
SeaShell	#FFF5EE	Shades	Mix
Cornsilk	#FFF8DC	Shades	Mix
LemonChiffon	#FFFACD	Shades	Mix
FloralWhite	#FFFAF0	Shades	Mix
Snow	#FFFAFA	Shades	Mix
Yellow	#FFFF00	Shades	Mix
LightYellow	#FFFFE0	Shades	Mix
Ivory	#FFFFF0	Shades	Mix
White	#FFFFFF	Shades	Mix

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিং এ মেমোরি ব্যবস্থাপনাঃ Memory Management in C Programming

April 4, 2015 Author-Check- Article-or-Video Leave a comment

সি প্রোগ্রামিং এ মেমোরি ব্যবস্থাপনা

রিদওয়ান বিন শামীম

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

S.N. Function and Description

1 void *calloc(int num, int size);
Num ইলিমেন্টের এর জন্য array বরাদ্দ দেয় এই ফাংশন, যেগুলোর আকার বাইটে সীমাবদ্ধ।

2 void free(void *address);
এই ফাংশন এড্রেস দ্বারা নির্ধারিত মেমোরি ব্লক প্রকাশ করে।

3 void *malloc(int num);
এই ফাংশন num bytes এর array বরাদ্ধ করে,এবং তাদের শুরু করায়।

4 void *realloc(void *address, int newsize);
এই ফাংশন মেমোরিকে পুনরায় সংগঠিত করে ও নতুন আকারে গড়ে তুলে।

প্রোগ্রামিং এ কাজ করার সময় যদি অ্যারির আকার সম্পর্কে জানা থাকে তাহলে অ্যারি সনাক্ত করা সহজ হবে। উদাহরণস্বরূপ, কারো নাম সংরক্ষণ করতে গেলে, নাম লিখতে ম্যাক্সিমাম ১০০ অক্ষর লাগতে পারে, যা আমরা এভাবে লিখতে পারি,
char name[100];

কিন্তু যদি এমন হয় যেখানে আমাদের যে তথ্য লিখতে হবে তার আকার সম্পর্কে কোন ধারণা নেই, যেমন কোন বিষয়ে বিবৃতি, সেক্ষেত্রে আমাদের একটি পয়েন্টার ব্যবহার করতে হবে অনির্ধারিত মেমোরি সাইজ উল্লেখ করে, যা পরবর্তীতে এভাবে দেখানো যায়,
#include
#include
#include

int main()
{
char name[100];
char *description;

strcpy(name, "Zara Ali");

/* allocate memory dynamically */
description = malloc( 200 * sizeof(char) );
if( description == NULL )
{
fprintf(stderr, "Error - unable to allocate required memory\n");
}
else
{
strcpy( description, "Zara ali a DPS student in class 10th");
}
printf("Name = %s\n", name );
printf("Description: %s\n", description );
}

উপরের কোডগুলো ঠিকভাবে লিখা হলে তা এরুপ ফলাফল দেখাবে,
Name = Zara Ali
Description: Zara ali a DPS student in class 10th

একই ধরনের প্রোগ্রাম লিখা যাবে malloc কে calloc দ্বারা রিপ্লেস করে,
calloc(200, sizeof(char));

অপারেটিং সিস্টেম নিজেই প্রোগ্রামের বরাদ্দ করা মেমোরি রিলিজ করবে, কিন্তু আমরা নিজেরাই প্রয়োজন শেষ হলে free() ফাংশন দ্বারা মেমোরি রিলিজ করে দিতে পারি। এছাড়াও realloc() ফাংশন ব্যবহার করে বরাদ্দকৃত মেমোরি ব্লকের আকার ছোটবড়ও করা যায়। realloc() এবং free() ফাংশন ব্যবহার করে দেখা যাক।

#include
#include
#include

int main()
{
char name[100];
char *description;

strcpy(name, "Zara Ali");

/* allocate memory dynamically */
description = malloc( 30 * sizeof(char) );
if( description == NULL )
{
fprintf(stderr, "Error - unable to allocate required memory\n");
}
else
{
strcpy( description, "Zara ali a DPS student.");
}
/* suppose you want to store bigger description */
description = realloc( description, 100 * sizeof(char) );
if( description == NULL )
{
fprintf(stderr, "Error - unable to allocate required memory\n");
}
else
{
strcat( description, "She is in class 10th");
}

printf("Name = %s\n", name );
printf("Description: %s\n", description );

/* release memory using free() function */
free(description);
}

উপরের কোড ঠিকভাবে লিখা হলে তা যে ফলাফল দেখাবে তা হল,
Name = Zara Ali
Description: Zara ali a DPS student.She is in class 10th
বাড়তি মেমোরি ব্লক বরাদ্দ না করে আমরা উপরের ফাংশন লিখে দেখতে পারি, মেমোরিতে সীমাবদ্ধতা থাকলে strcat() ফাংশন প্রদর্শিত হবে।

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিং : চলক আর্গুমেন্ট । C – Variable Arguments

April 4, 2015 Author-Check- Article-or-Video Leave a comment

সি প্রোগ্রামিং : চলক আর্গুমেন্ট।

রিদওয়ান বিন শামীম

অনেক সময় প্রোগ্রামিঙে এমন পরিস্থিতি আসে যখন অনুমিত প্যারামিটারের সংখ্যার স্থলে আর্গুমেন্টের চলক নাম্বার নেবে এমন ফাংশন খুঁজতে হয়। সি প্রোগ্রামিং এজাতীয় ক্ষেত্রের জন্য একটি ব্যবস্থা রেখেছে যাতে করে আমরা এমন একটি ফাংশন ব্যবহার করতে পারি যা আমাদের চাহিদামত প্যারামিটারের চলক নাম্বার গ্রহন করে থাকে। নিচের উদাহরণ তেমন একটি ফাংশনঃ

int func(int, ... )
{
.
.
.
}

int main()
{
func(1, 2, 3);
func(1, 2, 3, 4);
}

এখানে func() এক্লিপ্সের মত তিন ডটের(...) শেষ আর্গুমেন্ট নির্দেশ করে, এক্লিপ্সের সামনেরটি int যা গৃহীত আর্গুমেন্টের মোট চলক নাম্বার প্রকাশ করে। এটিকে ঠিকভাবে কাজ করানোর জন্য stdarg.h হিডার ফাইল ব্যবহার করতে হয় যা চলক আর্গুমেন্টের ফাংশন ও ম্যাক্রো সঠিকভাবে প্রয়োগের জন্য দরকার হয়। এক্ষেত্রে নিচের ধারাগুলো মেনে চলা হয়।

# শেষ প্যারামিটার এক্লিপ্স ধরে ফাংশন ঠিক করা হয়, এক্লিপ্সের আগের ফাংশন int যা আর্গুমেন্টের সংখ্যা প্রকাশ করে।
# ফাংশন ডেফিনেশনে va_list টাইপের চলক রাখতে হয়, যা stdarg.h হিডার ফাইলে বিবৃত হয়।
# int প্যারামিটার ও va_start ম্যাক্রো ব্যবহার করতে হয় আর্গুমেন্ট লিস্টে va_list চলক চালু করতে। va_start ম্যাক্রো stdarg.h হিডার ফাইলে বিবৃত হয়।
# আর্গুমেন্ট লিস্টে কাজ করতে va_arg ম্যাক্রো ও va_list চলক ব্যবহার করা হয়।
# va_list চলকের বিবৃত মেমোরি পরিষ্কার করতে va_end ম্যাক্রো ব্যবহার করা হয়।
উপরের পদ্ধতি ব্যবহার করে প্যারামিটারের চলক নাম্বার একটি ফাংশনে আমরা লিখতে পারি,

#include <stdio.h>
#include <stdarg.h>

double average(int num,...)
{

va_list valist;
double sum = 0.0;
int i;

/* initialize valist for num number of arguments */
va_start(valist, num);

/* access all the arguments assigned to valist */
for (i = 0; i < num; i++)
{
sum += va_arg(valist, int);
}
/* clean memory reserved for valist */
va_end(valist);

return sum/num;
}

int main()
{
printf("Average of 2, 3, 4, 5 = %f\n", average(4, 2,3,4,5));
printf("Average of 5, 10, 15 = %f\n", average(3, 5,10,15));
}

উপরের কোড সঠিকভাবে লিখলে যে ফলাফল হয় তা নিচে দেয়া হল, বলে নেয়া ভাল, দুবার average() ফাংশন ব্যবহার করা হয়েছে প্রথমবার প্রথম আর্গুমেন্ট চলক আর্গুমেন্টের সংখ্যা প্রকাশ করেছে, আর্গুমেন্টের চলক সংখ্যা ছাড়ে কেবল এক্লিপ্স ব্যবহার করা হয়।
Average of 2, 3, 4, 5 = 3.500000
Average of 5, 10, 15 = 10.000000

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি –রিকারসিং (C – Recursion)

April 4, 2015 Author-Check- Article-or-Video

সি –রিকারসিং (C – Recursion)

Md. Amirul Islam (ARIF)

Bogra

রিকারসিং ( Recursion) হল আইটেম রিপিটিং করার একটি স্বয়ংসম্পূর্ণ প্রক্রিয়া। প্রোগ্রামিং ল্যাঙ্গুয়েজে একই প্রয়োগ পাশাপাশি যদি একটি প্রোগ্রাম আপনাকে অনুমতি দেয় একই ফাংশনের ভিতরে একই /the same ফাংশন কল করতে তাহলে এটাকে রিকারসিং বলা হয় ।

এভাবে ফাংশন কল করা হয়ঃ

void recursion(){ recursion(); /* function calls itself */} int main(){ recursion();}

সি প্রোগ্রামিং ল্যাঙ্গুয়েজ রিকারসিং সমর্থিত অর্থাৎ একটি ফাংশন নিজেকেই কল করতে পারে । কিন্তু যখন রিকারসিং ব্যাবহার করা হয় তখন প্রোগ্রামারের প্রয়োজন হয় ফাংশনটি থেকে সতর্কতার সাথে একটি এক্সিট কন্ডিশন সংজ্ঞায়িত করা, অন্যথায় এটি ইনফিনিটি লুপে চলে যাবে ।

রিকার্সিভ ফাংশনগুলো খুবই গুরুত্বপূর্ণ অনেক গাণিতিক সমস্যা সমাধান করতে। যেমন একটি নাম্বারের গৌণিক নিরূপণ (calculate factorial), জেনারেটিং Fibonacci সিরিজ ইত্যাদি।

সংখ্যা গুণিতক (Number Factorial)

নিচের উদাহরনটি অনুসরন করুন। যা একটি রিকার্সিভ ফাংশন ব্যবহার করে একটি প্রদত্ত সংখ্যার জন্য গৌণিক হিসাব: সংখ্যা গুণিতক

#include <stdio.h> int factorial(unsigned int i){ if(i <= 1) { return 1; } return i * factorial(i - 1);}int main(){ int i = 15; printf("Factorial of %d is %d\n", i, factorial(i)); return 0;}

যখন উপরের কোড গুলো প্রণীত ও অনুষ্ঠিত (compiled and executed) হয় তখন নিম্নলিখিত ফলাফল সৃষ্টি করে:

Factorial of 15 is 2004310016 Fibonacci সিরিজ (Fibonacci Series) আরেকটি উধাহরন অনুসরন করুন, যা একটি রিকার্সিভ ফাংশন ব্যবহার করে একটি প্রদত্ত সংখ্যার জন্য Fibonacci সিরিজ তৈরি করে: #include <stdio.h> int fibonaci(int i){ if(i == 0) { return 0; } if(i == 1) { return 1; } return fibonaci(i-1) + fibonaci(i-2);} int main(){ int i; for (i = 0; i < 10; i++) { printf("%d\t%n", fibonaci(i)); } return 0;}

0 1 1 2 3 5 8 13 21 34

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিঙে এরর হ্যান্ডেলিং . Error Handling in C Programming

April 4, 2015 Author-Check- Article-or-Video Leave a comment

সি প্রোগ্রামিঙে এরর হ্যান্ডেলিং
রিদওয়ান বিন শামীম

যেহেতু সি প্রোগ্রামিঙে সরাসরি ভুল সংশোধনের সুযোগ নেই কিন্তু সিস্টেম প্রোগ্রামিং ল্যাঙ্গুয়েজ হওয়ার কারণে কিছু নিম্ন মানের পরিবর্তনের সুযোগ দিয়ে থাকে। বেশিরভাগ সি এমনকি ইউনিক্স ফাংশনও -1 বা NULL রিটার্ন দেখায়, এবং errno নামক এরর কোড প্রদর্শন করে যা একটি গ্লোবাল কোড, যা নির্দেশ করে ভুলটি কোন ফাংশন কলের সময় হয়েছিল। হিডার ফাইলে বিভিন্ন এরর কোড পাওয়া যায়। তাই সি প্রোগ্রামিং রিটার্ন ভ্যলু চেক করে ও সেই মোতাবেক ব্যবস্থা নেয়। প্রোগ্রাম শুরুর সময় errno কে ০ নির্ধারণ করে নেয়া ভাল, এর মানে হচ্ছে প্রোগ্রামে কোন ভুল নেই।
errno, perror()এবং strerror()
perror() এবং strerror(),errnoএর অধীনে টেক্সট মেসেজ প্রদর্শনে ব্যবহার করা হয়। perror() ফাংশন এর কাছে সরবরাহকৃত string প্রদর্শন করে কোলন, স্পেসের
মাধ্যমে, তারপর লিখিত বার্তা আকারে errno value প্রদর্শন করে। strerror()ফাংশন লিখিত বার্তার একটি পয়েন্টার ফেরত দেয়, বর্তমান errno value সহ। একটি এরর কন্ডিশন তৈরি করে এমন একটি ফাইল খোলার চেষ্টা করা যাক যার অস্তিত্বই নেই। এখানে যদিও দুটি ফাংশন ব্যবহার করা হবে, একটি বা বেশি ফাংশনও ব্যবহার করা যায়। আরেকটি ব্যপার হল, stderr file stream ব্যবহার করা ভাল এররের আউটপুট পাওয়ার জন্য।
#include <stdio.h>
#include <errno.h>
#include <string.h>

extern int errno ;

int main ()
{
FILE * pf;
int errnum;
pf = fopen ("unexist.txt", "rb");
if (pf == NULL)
{
errnum = errno;
fprintf(stderr, "Value of errno: %d\n", errno);
perror("Error printed by perror");
fprintf(stderr, "Error opening file: %s\n", strerror( errnum ));
}
else
{
fclose (pf);
}
return 0;
}
উপরোক্ত কোড লেখার পর যে ফলাফল আসবে তা হল,
Value of errno: 2
Error printed by perror: No such file or directory
Error opening file: No such file or directory

শূন্য এরর দিয়ে ডিভাইড করাঃ অনেক ডেভলপার এটি করেন না, যার ফলে রানটাইম এরর হয়ে প্রোগ্রামটি অচল হয়ে যায়। শূন্য এরর দিয়ে ডিভাইড করতে নিচের কোড লিখতে হবে,
#include <stdio.h>
#include <stdlib.h>

main()
{
int dividend = 20;
int divisor = 0;
int quotient;

if( divisor == 0){
fprintf(stderr, "Division by zero! Exiting...\n");
exit(-1);
}
quotient = dividend / divisor;
fprintf(stderr, "Value of quotient : %d\n", quotient );

exit(0);
}
ঠিকভাবে লিখলে যা ফলাফল হবে তা হল,
Division by zero! Exiting...
প্রোগ্রামের Exit Status ঃ প্রোগ্রামিঙে কোন সফল কোডিঙের পরে EXIT_SUCCESS কোড পাওয়া যায় যা মূলত একটি ম্যাক্রো, এর মান ০, কোন প্রোগ্রামে এরর কন্ডিশন থাকলে এবং সেভাবেই বের হয়ে আসার চেষ্টা করলে এই কোডটি দেখাবে, EXIT_FAILURE। যেটিকে -1 দ্বারা প্রকাশ করা হয়, তাই এক্ষেত্রে এই কোড লেখা হয়,
#include <stdio.h>
#include <stdlib.h>

main()
{
int dividend = 20;
int divisor = 5;
int quotient;

if( divisor == 0){
fprintf(stderr, "Division by zero! Exiting...\n");
exit(EXIT_FAILURE);
}
quotient = dividend / divisor;
fprintf(stderr, "Value of quotient : %d\n", quotient );

exit(EXIT_SUCCESS);
}
ঠিকভাবে লিখা হলে যে ফলাফল আসবে তা হল,
Value of quotient : 4

এরচেয়ে কম ওয়ার্ডে হল না। বোনাস (1.20 => 350 words article) আশা করছি।

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি ফাইল অপারেশন্স . C File I/O

April 4, 2015 Author-Check- Article-or-Video

শেখ আবুল হাশিম

খুলনা খানজাহান আলী কলেজ

বাগেরহাট, খুলনা।

১. ফাইল খোলা
২. ফাইল থেকে কোন কিছু পড়া বা ফাইলে কিছু লেখা
৩. ফাইল বন্ধ করা

ফাইল ব্যবহারের জন্য আমাদের একটা ফাইল handle দরকার। এটার মাধ্যমে আমরা একটা ফাইরকে চিহ্নিত করি। এটা FILE টাইপের একটা পয়েন্টার যেটাকে এভাবে ডিক্লেয়ার করতে হয়ঃ

FILE *fp;

fopen দিয়ে একটা ফাইল খুললে আমরা এটা রিটার্ন পাই।

File open:

fp = fopen(filename, mode);

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

r – read মোডে ফাইল খোলা হবে। ফাইল আগে থেকে না থাকলে এভাবে ব্যবহার করলে FILE পয়েন্টার রিটার্ন করবে না।
w – read মোডে ফাইল খোলা হবে। ফাইল না থাকলে নতুন একটা ফাইল তৈরি হবে। ফাইল আগে থেকে থাকলে ফাইলের সব ডাটা মুছে যাবে এবং ফাইলের প্রথম থেকে লেখে হবে।
a – append- আগে থেকে আছে এরকম ফাইলের শেষে থেকে লেখা শুরু করার জন্য এই মোড ব্যবহার করা হয়। ফাইল না থাকলে নতুন একটা ফাইল তৈরি হবে।

+ ব্যবহার করে একই সাথে read এবং write করা যায়। এরপর ব্যবহার করে কিভাবে বা হবে সেটা ঠিক করা যায়।

r+ – একই সাথে লেখা এবং পড়ার দরকার হলে এবং ফাইলের শুরু থেকে পড়া শুরু করার জন্য এই মোড ব্যবহার করা হয়।
w+ – একই সাথে লেখা এবং পড়ার দরকার হলে এবং ফাইলের শুরু থেকে লেখা শুরু করার জন্য এই মোড ব্যবহার করা হয়। ফাইল না থাকলে নতুন একটা ফাইল তৈরি হবে।
a+ – একই সাথে লেখা এবং পড়ার দরকার হলে এবং ফাইলের শেষে লেখা শুরু করার জন্য এই মোড ব্যবহার করা হয়। ফাইল না থাকলে নতুন একটা ফাইল তৈরি হবে।

নীচে কয়েকটি উদাহরণ দেখি।

একটা ফাইল খুলে কোন কিছু লেখার জন্য এভাবে ফাইল ওপেন করা যায়ঃ

fp = fopen(“myfile.txt”, “w”);

তাহলে myfile.txt নামে একটি ফাইল তৈরি হবে যেটার মধ্যে আমরা লিখতে পারব।

read মোডে ফাইল খোলার জন্য এভাবে লিখতে হবেঃ

fp = fopen("names.txt", "r");

এখানে names.txt ফাইলটি থাকতে হবে। তাহলে আমরা এখন এই ফাইল থেকে পড়তে পারব।

File print:

এই ফাংশনটি printf এর মত তবে এটা ফাইলে লেখার জন্য ব্যবহার করা হয়।

যেমন আমরা যদি এভাবে লিখি

printf("Hello, World!");

তাহলে কনসোলে Hello, World! লেখা হবে।

fprintf এর ক্ষেত্রেও তাই- শুধু ফাইল handle টা দিয়ে দিতে হবে।

fprintf(fp, "Hello, World!");

তাহলে ফাইলে Hello, World! লেখা হবে।

File scan:

এই ফাংশনটি scanf এর মত তবে এটা ফাইল থেকে পড়ার জন্য ব্যবহার করা হয়।

যেমন আমরা যদি এভাবে লিখি

int num;
scanf(“%d”, &num);

তাহলে কিবোর্ড থেকে একটা পুর্ণসংখ্যা ইনপুট নিয়ে num ভেরিয়েবলে রাখা হবে।

fscanf এর ক্ষেত্রেও তাই- শুধু ফাইল handle টা দিয়ে দিতে হবে।

int num;
fscanf(fp, “%d”, &num);

তাহলে ফাইল থেকে একটা পুর্ণসংখ্যা পড়ে নিয়ে num ভেরিয়েবলে রাখা হবে।

File close:

ফাইল ব্যবহার শেষে ফাইলটি বন্ধ করার জন্য এই ফাংশন ব্যবহার করতে হবে।

এভাবে লিখলে ফাইল বন্ধ হবেঃ

fclose(fp);

একটা সম্পুর্ণ উদাহরণ দেখিঃ

#include "stdio.h"

int main()

{

FILE *fp;

fp = fopen("myfile.txt", "w");

fprintf(fp, "Hello, World!n");

fclose(fp);

return 0;

}

এটা রান করলে একটা ফাইল তৈরি হবে এবং তাতে Hello, World! লেখা হবে। আপনারা ফাইলটি খুলে দেখতে পারেন ঠিকমত লেখা হল কিনা।

আরও কয়েকটি ফাংশনের নাম জেনে রাখুন যেগুলো দিয়ে ফাইল থেকে পড়া বা ফাইলে লেখা যায়।
fputc
fgetc
fread
fwrite
ftell
fseek
fflush

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিঙে typedef এর ব্যবহার

April 4, 2015 Author-Check- Article-or-Video

সি প্রোগ্রামিঙে typedef এর ব্যবহারঃ
রিদওয়ান বিন শামীম

সি প্রোগ্রামিং ল্যাঙ্গুয়েজ typedef নামের একটি কি-ওয়ার্ড ব্যবহার করতে দেয়, যা নতুন নাম টাইপ করতে দেয়, নিচের উদাহরণে BYTE টার্ম বিবৃত করা হয়েছে।
typedef unsigned char BYTE;
বিবৃত করার পর unsigned char এর ব্যাখ্যা হিসাবে BYTE identifier রূপে কাজ করে। যেমন,
BYTE b1, b2;
বড় হাতের অক্ষর দ্বারা নিশ্চিত করা হয় যে এটি symbolic abbreviation কিন্তু ছোট হাতের অক্ষরও ব্যবহার করা যায় যেমন,
typedef unsigned char byte;
ব্যবহারকারী নির্ধারিত ডাটা বিবৃতির জন্য typedef ব্যবহার করা যায়, যেমন নতুন ডাটা টাইপের জন্য typedef ব্যবহার করা যায়, এরপর কাঠামোগত চলক প্রকাশের জন্য সরাসরি নিচের কোড ব্যবহার করা যায়।
#include
#include

typedef struct Books
{
char title[50];
char author[50];
char subject[100];
int book_id;
} Book;

int main( )
{
Book book;

strcpy( book.title, "C Programming");
strcpy( book.author, "Nuha Ali");
strcpy( book.subject, "C Programming Tutorial");
book.book_id = 6495407;

printf( "Book title : %s\n", book.title);
printf( "Book author : %s\n", book.author);
printf( "Book subject : %s\n", book.subject);
printf( "Book book_id : %d\n", book.book_id);

return 0;
}
কোডগুলো ঠিকমত লিখা হলে তা যে ফলাফল দেখাবে তা হল,
Book title : C Programming
Book author : Nuha Ali
Book subject : C Programming Tutorial
Book book_id : 6495407
typedef vs #define
#define হল এক প্রকার C-directive যা যা বিভিন্ন ডাটা টাইপের aliases বোঝাতে ব্যবহার হয়। যা মূলত typedef এর মতই কিন্তু কিছু পার্থক্য আছে, typedef সিম্বোলিক নাম দেয়ার ক্ষেত্রে সীমাবদ্ধ কিন্তু #define সাধারণত alias এর ভ্যলু বোঝাতে পারে, typedef এর প্রভাব কম্পাইলার থেকে প্রকাশ পায় কিন্তু #define বিবৃতি প্রিপ্রসেসর থেকে প্রকাশ করা হয়। #define এর সবচে সহজ ব্যবহার নিচে দেখানো হল।
#include

#define TRUE 1
#define FALSE 0

int main( )
{
printf( "Value of TRUE : %d\n", TRUE);
printf( "Value of FALSE : %d\n", FALSE);

return 0;
}
উপরের কোড সঠিকভাবে লিখা হলে তা যে ফলাফল দেবে তা হল,
Value of TRUE : 1
Value of FALSE : 0

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি – বিট ক্ষেত্র (C – Bit Fields)

April 4, 2015 Author-Check- Article-or-Video

সি - বিট ক্ষেত্র (C - Bit Fields)
Md. Amirul Islam (ARIF)
Bogra

ধরুন আপনার সি প্রোগ্রামে একটি স্ট্রাচার নামক কয়েকটি TRUE/FALSE ভেরিয়াবল গ্রুপ ।
নিম্নরূপ:

struct
{
unsigned int widthValidated;
unsigned int heightValidated;
} status;

এই স্ট্রাচারের লাগে ৮ বাইট মেমোরি স্পেস কিন্তু আমরা প্রত্যেক ভেরিয়াবলে সংরক্ষণ করতে যাচ্ছি 0 অথবা 1 । সি প্রোগ্রামিং ল্যাঙ্গুয়েজ স্বল্প মেমোরি স্পেস ব্যবহার করতে একটি ভাল সুবিধা করে দিয়েছে । যদি আপনি এই ভেরিয়াবল ব্যাবহার করেন একটি স্ট্রাকচারের ভিতরে তারপর আপনি সংজ্ঞায়িত করতে পারবেন একটি ভেরিয়াবল এর প্রস্থ যা সি কম্পিলার বলে যে আপনি সুধুমাত্র সেই বাইট সংখ্যা ব্যাবহার করতে যাচ্ছেন ।
নিম্নে উদাহরণস্বরূপ, উপরোক্ত গঠন পুনরায় লেখা যেতে পারে:

struct
{
unsigned int widthValidated : 1;
unsigned int heightValidated : 1;
} status;

এখন, উপরোক্ত গঠনে 4 বাইট মেমোরি স্পেস স্ট্যাটাস ভেরিয়াবল এর জন্য লাগবে কিন্তু শুধুমাত্র 2 বিট ব্যাবহার হবে ভেলু গুলো জমা রাখতে । যদি আপনি প্রত্যেকটি একটি 1 বিটের প্রস্থে 32 ভেরিয়াবল ব্যাবহার করতে চান, তারপরেও স্ট্যাটাস স্ট্রাকচারে 4 বাইট হবে । কিন্তু যখনি আপনার ৩৩ ভেরিয়াবল থাকবে তখন এটি মেমোরির পরবর্তী স্লটে বরাদ্দ হবে । এবং এটাতে ৮ বাইট ব্যাবহার হবে।
আমাদের ধারণা বুঝতে নিম্নলিখিত উদাহরণে পরীক্ষা করা যাক:
#include
#include

/* define simple structure */
struct
{
unsigned int widthValidated;
unsigned int heightValidated;
} status1;

/* define a structure with bit fields */
struct
{
unsigned int widthValidated : 1;
unsigned int heightValidated : 1;
} status2;

int main( )
{
printf( "Memory size occupied by status1 : %d\n", sizeof(status1));
printf( "Memory size occupied by status2 : %d\n", sizeof(status2));

return 0;
}

যখন উপরের কোড গুলো প্রণীত ও অনুষ্ঠিত (compiled and executed) হয় তখন নিম্নলিখিত ফলাফল সৃষ্টি করে:
Memory size occupied by status1 : 8
Memory size occupied by status2 : 4

বিট ফিল্ড ঘোষণা (Bit Field Declaration)
একটি স্ট্রাকচারের ভিতর বিট ফিল্ডের ফর্ম ঘোষণা করা হয়ঃ

struct
{
type [member_name] : width ;
};

নিচে বিট ফিল্ডের ভেরিয়াবল উপাদানের বর্ণনা দেওয়া হলঃ

উপাদান বর্ণনা
type একটি ইন্টেগ্রা টাইপ (integer type) যেটা নির্ধারণ করে কিভাবে বিট ফিল্ডের এর মান ব্যাখ্যা করা হয়। টাইপ হতে পারেঃ int, signed int, unsigned int.
member_name বিট ফিল্ডের নাম।
width একটি বিট ফিল্ডের বিটের সংখ্যা। প্রস্থ (width) কে অবশ্যই নির্দিষ্ট প্রকারের বিট প্রস্থ এর সমান অথবা ছোট হতে হবে ।

একটি পূর্বনির্ধারিত প্রস্থ সঙ্গে সংজ্ঞায়িত ভেরিয়েবলকে বিট ফিল্ড বলা হয়। একটি বিট ক্ষেত্র একটি একক বিটের চেয়ে বেশি রাখা যাবে। উদাহরণস্বরূপ, যদি আপনার প্রয়োজন হয় একটি ভেরিয়াবল শুধুমাত্র ০ থেকে ৭ ভেলু জমা করতে তখন আপনি একটি বিট ফিল্ড সংজ্ঞায়িত করতে পারেন একটি ৩ বিটের প্রস্থের সাথে।
এরুপঃ

struct
{
unsigned int age : 3;
} Age;

উপরের গঠন সংজ্ঞা C কম্পাইলার নির্দেশ করে যে ভেলু জমা করতে এজ ভেরিয়াবল ব্যাবহার করছে শুধু ৩ বিট, যদি আপনি তিনের বেশি বিট ব্যাবহার করতে চেষ্টা করেন তখন এটা আপনাকে আনুমতি দেবে না ।
চলুন নিচের উধাহরন চেষ্টা করা যাকঃ

#include
#include

struct
{
unsigned int age : 3;
} Age;

int main( )
{
Age.age = 4;
printf( "Sizeof( Age ) : %d\n", sizeof(Age) );
printf( "Age.age : %d\n", Age.age );

Age.age = 7;
printf( "Age.age : %d\n", Age.age );

Age.age = 8;
printf( "Age.age : %d\n", Age.age );

return 0;
}

Sizeof( Age ) : 4
Age.age : 4
Age.age : 7
Age.age : 0

The above structure definition instructs C compiler. that age variable is going to use only 3 bits to store the value, if you will try to use more than 3 bits then it will not allow you to do so. Let us try the following example:

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিং – স্ট্রাকচার

April 4, 2015 Author-Check- Article-or-Video

শেখ আবুল হাশিম
খুলনা খানজাহান আলী কলেজ
বাগেরহাট, খুলনা।

লেকচার ৯ – সি প্রোগ্রামিং – স্ট্রাকচার

C ল্যাংগুয়েজে একাধিক ভেরিয়েবল নিয়ে গ্রুপ ভেরিয়েবল ডিক্লেয়ার করা যায়। এই গুপটিকে বলা হয় স্ট্রাকচার। আমরা যদি কোন এক ব্যাক্তির নাম, বয়স এবং তার বেতন নিয়ে কাজ করতে চাই তাহলে সেগুলো একসাথে রাখা সুবিধাজনক।
সেজন্য আমরা এভাবে স্ট্রাকচার তৈরি করিঃ
struct [struct_name]
{
[structure fields]
};
যেমনঃ
struct Person
{
char name[20];
int age;
int salary;
};
এখানে স্ট্রাকচারে তিনটি ফিল্ড রয়েছে- name, age এবং salary । এই ফিল্ড তিনটিকে কোন আলাদা ভেরিয়েবল ধরার দরকার নেই। এগুলো সবসময় একসাথে থাকবে। তবে আলাদে ভাবে এদের মান দেখা বা পরিবর্তন করা যাবে।
এখন এই স্ট্রাকচারটিকে আমরা সাধারন একটা প্রাথমিক (primitive type) টাইপের ভেরিয়েবলের মত ব্যবহার করতে পারব।
যেমন এভাবে ভেরিয়েবল ডিক্লেয়ার করা হয়ঃ
Person p1;
[বিঃদ্রঃ আমরা বেশিরভাগ সময় C++ কম্পাইলার ব্যবহার করি। সেকারনে একেবারে শুদ্ধ C ল্যাংগুয়েজ ব্যবহার করার চেষ্টা করছি না এই লেকচারে।]

Initializing a Structure
ভেরিয়েবল ডিক্লেয়ার করার সময়ই অন্য টাইপের ভেরিয়েবলের যেমন প্রাথমিক মান ঠিক করে দেয়া যায় সেরকম স্ট্রাকচারের ক্ষেত্রেও করা যায়ঃ
Person p1 = {”Kalam”, 38, 60000};
এক্ষেত্রে স্টাকচারের ফিল্ডগুলোর ক্রম ঠিক রাখতে হবে।
ক্রম উলটাপাল্টা করতে চাইলে ফিল্ডগুলোর নামসহ এভাবে লেখা যায়ঃ
Person p1 = { .age = 38, .name = ”Kalam”, .salary= 60000};
ফিল্ডের নামের আগে ডট (.) দিতে হবে। এক্ষেত্রে ইচ্ছা করলে এক বা একাধিক ফিল্ডের মান না দিলেও অসুবিধা নেই।
স্ট্রাকচারের ফিল্ডগুলো নিয়ে আলাদা ভাবে কাজ করতে চাইলে ডট (.) ব্যবহার করে করা যায়ঃ
int current_age;
Person p1;

p1.name = "Kalam";
p1.age = 38;
p1.salary = 60000;

current_age = p1.age
Assignment
Person p1 = {"Kalam", 38, 60000};

Person p2;

p2 = p1; /* copies the member values from p1 into p2. */
এখানে মনে রাখতে হবে এভাবে একটা ভেরিয়েবল থেকে আরেকটাতে মান কপি করলে দুইটা আলাদা ভেরিয়েবল হিসাবে কাজ করবে। একটাতে মান পরিবর্তন করলে আরেকটাতে কোন পরিবর্তন হবে না।
যেমন p2.age=56; লিখলে p1.age এর মানের কোন পরিবর্তন হবে না।
Functions and Structures
ফাংশনের প্যারামিটার বা রিটার্ন ভ্যালু হিসাবে অন্য যেকোন টাইপের ভেরিয়েবলের মতই স্ট্রাকচার ব্যবহার করা যায়।
নীচের প্রোগ্রামটি লক্ষ করুণঃ
#include "stdio.h"

void print_person(Person p)
{
printf("Name: %sn", p.name);
printf("Age: %dn", p.age);
printf("Salary: %dn", p.salary);
}

void main()
{
Person p1 = {"Kalam", 38, 60000};
print_person(p1);
}
এখানে ভ্যালু হিসাবে পাঠানো হচ্ছে স্ট্রাকচার। ফাংশনের মধ্যে কোন ফিল্ডের মান পরিবর্তন করলে সেটা ফাংশনের বাইরে কোন প্রভাব ফেলবে না বা মান পরিবর্তন হবে না।
রেফারেন্স হিসাবেও স্ট্রাকচার ভেরিয়েবল ব্যবহার করা যায় এভাবে (অন্য টাইপের ভেরিয়েবলের মতই ভরিয়েবলের নামের পূর্বে & ব্যবহার করে)
#include "stdio.h"

void test_person(Person &p)
{
if(p.age == 0)
{
p.age=18;
}
}

void main()
{
Person p1 = {"Kalam", 0, 60000};
test_person(p1);

printf("Age: %d", p1.age);
}
এখনে Age: 18 এভাবে আউটপুট পাব।
Arrays of Structure
অন্য টাইপের মতই স্ট্রাকচারের Array তৈরি ও ব্যবহার করা যায়ঃ
ডিক্লেয়ার করার জন্য এভাবে লিখতে হবেঃ
Person pn[10];
এখন অন্য টাইপের ভেরিয়েবলের মতই ইনডেক্স ব্যবহার করা যাবে এভাবেঃ
pn[0].age = 30;

pn[9].salary=50000;
Structure within a Structure (nested structure)
আমরা যদি্ ব্যক্তির ঠিকানাও রাখতে চাই একসাথে তাহলে আমরা nested structure ব্যবহার করে সেটা করতে পারিঃ
struct Person
{
char name[20];
int age;
int salary;
struct address
{
int house_no;
char street[30];
char post[30];
char district[30];
};
};
এক্ষেত্রে যেভাবে ব্যবহার করতে হবেঃ
Person p1;

p1.age = 34;
p1.address.house_no = 2543;

এইচটিএমএল HTML

এইচটিএমএল রঙ (HTML Color codes chart)

April 3, 2015 Author-Check- Article-or-Video

এইচটিএমএল রঙ (HTML Color Names)

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

স্বর্ণা আখতারআমরা জানি একেকটি কালার হলো লাল, নীল এবং সবুজ এর সমন্বিত রূপ। সাধারনত, ১৪০ টি কালার আছে যেগুলো সব ওয়েব ব্রাউজারেই সাপোর্ট করে। এই ১৪০ টি নাম এইচ টি এম এল ৫ এবং সিএসএস ৫ এ উল্লেখ আছে। যার মধ্যে ১৭ টি এসেছে এইচ টি এম এল থেকে এবং ১২৭ টি এসেছে সিএসএস থেকে। নিচে সেইসব ১৪০ টি কালারের নাম এবং তাদের হেক্সাডেসিমেল কোড দেয়া হল।

Color Name	HEX	Shades	Mix
AliceBlue	#F0F8FF	Shades	Mix
AntiqueWhite	#FAEBD7	Shades	Mix
Aqua	#00FFFF	Shades	Mix
Aquamarine	#7FFFD4	Shades	Mix
Azure	#F0FFFF	Shades	Mix
Beige	#F5F5DC	Shades	Mix
Bisque	#FFE4C4	Shades	Mix
Black	#000000	Shades	Mix
BlanchedAlmond	#FFEBCD	Shades	Mix
Blue	#0000FF	Shades	Mix
BlueViolet	#8A2BE2	Shades	Mix
Brown	#A52A2A	Shades	Mix
BurlyWood	#DEB887	Shades	Mix
CadetBlue	#5F9EA0	Shades	Mix
Chartreuse	#7FFF00	Shades	Mix
Chocolate	#D2691E	Shades	Mix
Coral	#FF7F50	Shades	Mix
CornflowerBlue	#6495ED	Shades	Mix
Cornsilk	#FFF8DC	Shades	Mix
Crimson	#DC143C	Shades	Mix
Cyan	#00FFFF	Shades	Mix
DarkBlue	#00008B	Shades	Mix
DarkCyan	#008B8B	Shades	Mix
DarkGoldenRod	#B8860B	Shades	Mix
DarkGray	#A9A9A9	Shades	Mix
DarkGreen	#006400	Shades	Mix
DarkKhaki	#BDB76B	Shades	Mix
DarkMagenta	#8B008B	Shades	Mix
DarkOliveGreen	#556B2F	Shades	Mix
DarkOrange	#FF8C00	Shades	Mix
DarkOrchid	#9932CC	Shades	Mix
DarkRed	#8B0000	Shades	Mix
DarkSalmon	#E9967A	Shades	Mix
DarkSeaGreen	#8FBC8F	Shades	Mix
DarkSlateBlue	#483D8B	Shades	Mix
DarkSlateGray	#2F4F4F	Shades	Mix
DarkTurquoise	#00CED1	Shades	Mix
DarkViolet	#9400D3	Shades	Mix
DeepPink	#FF1493	Shades	Mix
DeepSkyBlue	#00BFFF	Shades	Mix
DimGray	#696969	Shades	Mix
DodgerBlue	#1E90FF	Shades	Mix
FireBrick	#B22222	Shades	Mix
FloralWhite	#FFFAF0	Shades	Mix
ForestGreen	#228B22	Shades	Mix
Fuchsia	#FF00FF	Shades	Mix
Gainsboro	#DCDCDC	Shades	Mix
GhostWhite	#F8F8FF	Shades	Mix
Gold	#FFD700	Shades	Mix
GoldenRod	#DAA520	Shades	Mix
Gray	#808080	Shades	Mix
Green	#008000	Shades	Mix
GreenYellow	#ADFF2F	Shades	Mix
HoneyDew	#F0FFF0	Shades	Mix
HotPink	#FF69B4	Shades	Mix
IndianRed	#CD5C5C	Shades	Mix
Indigo	#4B0082	Shades	Mix
Ivory	#FFFFF0	Shades	Mix
Khaki	#F0E68C	Shades	Mix
Lavender	#E6E6FA	Shades	Mix
LavenderBlush	#FFF0F5	Shades	Mix
LawnGreen	#7CFC00	Shades	Mix
LemonChiffon	#FFFACD	Shades	Mix
LightBlue	#ADD8E6	Shades	Mix
LightCoral	#F08080	Shades	Mix
LightCyan	#E0FFFF	Shades	Mix
LightGoldenRodYellow	#FAFAD2	Shades	Mix
LightGray	#D3D3D3	Shades	Mix
LightGreen	#90EE90	Shades	Mix
LightPink	#FFB6C1	Shades	Mix
LightSalmon	#FFA07A	Shades	Mix
LightSeaGreen	#20B2AA	Shades	Mix
LightSkyBlue	#87CEFA	Shades	Mix
LightSlateGray	#778899	Shades	Mix
LightSteelBlue	#B0C4DE	Shades	Mix
LightYellow	#FFFFE0	Shades	Mix
Lime	#00FF00	Shades	Mix
LimeGreen	#32CD32	Shades	Mix
Linen	#FAF0E6	Shades	Mix
Magenta	#FF00FF	Shades	Mix
Maroon	#800000	Shades	Mix
MediumAquaMarine	#66CDAA	Shades	Mix
MediumBlue	#0000CD	Shades	Mix
MediumOrchid	#BA55D3	Shades	Mix
MediumPurple	#9370DB	Shades	Mix
MediumSeaGreen	#3CB371	Shades	Mix
MediumSlateBlue	#7B68EE	Shades	Mix
MediumSpringGreen	#00FA9A	Shades	Mix
MediumTurquoise	#48D1CC	Shades	Mix
MediumVioletRed	#C71585	Shades	Mix
MidnightBlue	#191970	Shades	Mix
MintCream	#F5FFFA	Shades	Mix
MistyRose	#FFE4E1	Shades	Mix
Moccasin	#FFE4B5	Shades	Mix
NavajoWhite	#FFDEAD	Shades	Mix
Navy	#000080	Shades	Mix
OldLace	#FDF5E6	Shades	Mix
Olive	#808000	Shades	Mix
OliveDrab	#6B8E23	Shades	Mix
Orange	#FFA500	Shades	Mix
OrangeRed	#FF4500	Shades	Mix
Orchid	#DA70D6	Shades	Mix
PaleGoldenRod	#EEE8AA	Shades	Mix
PaleGreen	#98FB98	Shades	Mix
PaleTurquoise	#AFEEEE	Shades	Mix
PaleVioletRed	#DB7093	Shades	Mix
PapayaWhip	#FFEFD5	Shades	Mix
PeachPuff	#FFDAB9	Shades	Mix
Peru	#CD853F	Shades	Mix
Pink	#FFC0CB	Shades	Mix
Plum	#DDA0DD	Shades	Mix
PowderBlue	#B0E0E6	Shades	Mix
Purple	#800080	Shades	Mix
RebeccaPurple	#663399	Shades	Mix
Red	#FF0000	Shades	Mix
RosyBrown	#BC8F8F	Shades	Mix
RoyalBlue	#4169E1	Shades	Mix
SaddleBrown	#8B4513	Shades	Mix
Salmon	#FA8072	Shades	Mix
SandyBrown	#F4A460	Shades	Mix
SeaGreen	#2E8B57	Shades	Mix
SeaShell	#FFF5EE	Shades	Mix
Sienna	#A0522D	Shades	Mix
Silver	#C0C0C0	Shades	Mix
SkyBlue	#87CEEB	Shades	Mix
SlateBlue	#6A5ACD	Shades	Mix
SlateGray	#708090	Shades	Mix
Snow	#FFFAFA	Shades	Mix
SpringGreen	#00FF7F	Shades	Mix
SteelBlue	#4682B4	Shades	Mix
Tan	#D2B48C	Shades	Mix
Teal	#008080	Shades	Mix
Thistle	#D8BFD8	Shades	Mix
Tomato	#FF6347	Shades	Mix
Turquoise	#40E0D0	Shades	Mix
Violet	#EE82EE	Shades	Mix
Wheat	#F5DEB3	Shades	Mix
White	#FFFFFF	Shades	Mix
WhiteSmoke	#F5F5F5	Shades	Mix
Yellow	#FFFF00	Shades	Mix
YellowGreen	#9ACD32	Shades	Mix

এইচটিএমএল HTML

HTML Iframe (এইচটিএমএল আইফ্রেম)

April 2, 2015 Rafiqul Islam Leave a comment

একটি iframe একটি ওয়েব পৃষ্ঠার মধ্যে আরো একটি ওয়েব পেজ প্রদর্শন করতে ব্যবহৃত হয়।

Iframe Syntax (iframe সিনট্যাক্স)

একটি iframe যোগ করার সিন্টেক্স হল :

src অ্যাট্রিবিউট আইফ্রেম পৃষ্ঠার URL টি (ওয়েব ঠিকানা) নির্দিষ্ট করে

Iframe - এর উচ্চতা এবং প্রস্থতা নির্ধারন

Iframe - এর এর আকার নির্ধারণ করার জন্য height এবং width অ্যাট্রিবউট ব্যবহার করুন

অ্যাট্রিবিউট এর মান ডিফল্ট হিসেবে পিক্সেল এ থাকে, কিন্তু আপনি ইচ্ছা করলে একে পারসেন্ট হিসেবেও ব্যবহার করতে পারেন (যেমন: 80%)

উদাহরণ:

Iframe - এর বর্ডার মুছে ফেলা

ডিফল্ট হিসেবে iframe এর চারদিকে একটি কালো বর্ডার থাকে

বর্ডারটি মুছার জন্য একটি স্টাইল অ্যাট্রিবিউট যোগ করুন এবং CSS এর বর্ডার প্রোপার্টি ব্যবহার করুন

উদাহরণ :

CSS এর সাহায্যে iframe বর্ডার এর সাইজ, রং এবং স্টাইলও পরিবর্তন করা যায়

উদাহরণ :

কোন একটি লিংক এর টার্গেট হিসাবে আইফ্রেম ব্যবহার করন

একটি আইফ্রেমকে কোন একটি লিঙ্ক এর টারগেট ফ্রেম হিসেবে ব্যবহার করা যায়
লিঙ্কটির target অ্যাট্রিবিউটটি অবশ্যই আইফ্রেম এর name অ্যাট্রিবিউটটিকে নির্দেশ করতে হবে

উদাহরণ :

এইচটিএমএল এ আইফ্রেম ট্যাগ

এইচটিএমএল এ আইফ্রেম ট্যাগ হচ্ছে : </iframe>

যা একটি ইনলাইন ফ্রেম সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।

JavaScript, JavaScript Frameworks

জাভাস্ক্রিপ্ট অবজেক্ট (JavaScript Objects)

April 1, 2015 Author-Check- Article-or-Video

জাভাস্ক্রিপ্ট অবজেক্ট (JavaScript Objects)

-পায়েল চৌধুরী

বাস্তব জীবনের দৃষ্টান্তে অবজেক্টস, প্রপার্টিস এবং মেথডস

বাস্তবে একটি গাড়ী হল একটা অবজেক্ট.

গাড়ীর ওজন, রং এসব হল একটি গাড়ীর প্রপার্টিজ এবং এর চালু হবার এবং থামার মেথড আছে.

Object	Properties	Methods
	car.name = Fiat	car.start()
	car.model = 500	car.drive()
	car.weight = 850	kg car.brake()
	car.color = white	car.stop()

সকল গাড়ির বৈশিষ্ট্য (Prperties) একই, কিন্ত এর মান গাড়ী থেকে গাড়ী থেকে পৃথক।
সকল গাড়ির পদ্ধতি (Methods) একই, কিন্তু মেথড সম্পন্ন হওয়ার সময় ভিন্ন হয়।

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

আমরা জানি যে, জাভাস্ক্রিপ্ট ভেরিয়েবল তথ্য মানের ধারক (data values) হিসাবে কাজ করে।

নীচের কোডের ভেরিয়েবলটি গাড়ীর নামের (Fiat) একটি সাধারণ মান (simple value) হিসাবে দেয়া হয়েছে:

var car = "Fiat";

বস্তু (Objects) সমূহও ভেরিয়েবল। কিন্তু এরা অনেক মান ধারণ করতে পারে। নীচের কোডের ভেরিয়েবলটি গাড়ীর নামের অনেকগুলো মান (Fiat, 500, white হিসাবে দেয়া হয়েছে:

var car = {type:"Fiat", model:500, color:"white"};

মানসমূহ name:value এভাবে জোড়ায় (name কোলন value) লেখা হয়।
জাভাস্ক্রিপ্ট অবজেক্টস নামকৃত মানসমূহের (named values) ধারক হিসাবে কাজ করে।

অবজেক্ট প্র্রপার্টিজ

name:value জোড়াকে (জাভাস্ক্রিপ্ট অবজেক্টস এ) প্র্রপার্টিজ বলে।

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Property	Property Value
firstName	John
lastName	Doe
age	50
eyeColor	blue

অবজেক্টস মেথডস

মেথডস হল ক্রিয়াসমূহ যা অবজেক্টস এর উপর সম্পন্ন করা হয়।
মেথডস সমূহ ফাংশন ডেফিনেশন হিসাবে প্র্রপার্টিজ এর মধ্যে সংরক্ষণ করা হয়।

Property	Property Value
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

জাভাস্ক্রিপ্ট অবজেক্ট যে নামকৃত ভেলু সমূহের ধারক হিসাবে কাজ করে তাদের প্র্রপার্টিজ এবং মেথডস বলে।

অবজেক্ট নির্ধারণ

জাভাস্ক্রিপ্ট অবজেক্ট এর উদাহারণ:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

স্পেস এবং লাইন ব্রেক গুরুত্বপূর্ণ নয়। একটি অবজেক্ট নির্ধারণ করতে একাধিক লাইন জুড়ে লিখতে হতে পারে:
উদাহারণ:

var person = {
     firstName:"John",
     lastName:"Doe",
     age:50,
     eyeColor:"blue"
 };

অবজেক্ট প্র্রপার্টিজ এর ব্যবহার( Accessing Object Properties)

আমরা দু’ভাবে অবজেক্ট প্র্রপার্টিজ ব্যবহার করতে পারি:

objectName.propertyName

অথবা

objectName[propertyName]

উদাহারণ ১:

person.lastName;

উদাহারণ ২:

person["lastName"];

অবজেক্ট মেথডস এর ব্যবহার (Accessing Object Methods)

নিম্নলিখিত অনুযায়ী আমরা Object Methods ব্যবহার করতে পারি:

objectName.methodName()

উদাহারণ 1

name = person.fullName();

যদি fullName প্র্রপার্টি, () ছাড়া ব্যবহার করা হয়, তবে এটা আমাদের ফাংশন ডেফিনেশন এ ফেরত নিয়ে যাবে:
উদাহারণ 2

name = person.fullName;

আপনি কি জাভাস্ক্রিপ্ট এ Strings, Numbers, and Booleans কে Objects হিসেবে নির্ধারণ করেন

জাভাস্ক্রিপ্ট এ Strings, Numbers, and Booleans কে Objects হিসাবে কখনো ডিক্লেয়ার করবেননা!
যখন জাভাস্ক্রিপ্ট এ কোন ভেরিয়েবলকে "new", কিওয়ার্ড দ্বারা ডিক্লেয়ার করা হয় তখন সে ভেরিয়েবলটি একটা অবজেক্ট তৈরী করে :

var x = new String();        // Declares x as a String object
var y = new Number();        // Declares y as a Number object
var z = new Boolean();       // Declares z as a Boolean object

String, Number, and Boolean অবজেক্টস পরিহার করুন। এগুলো আপনার কোডকে জটিল করবে এবং কাজের গতিকে ধীর করে দিবে।

আমাদের সাথে থাকুন, পরবর্তীতে অবজেক্টের উপর আরো টিউটোরিয়াল পাবেন।

JavaScript

জাভাস্ক্রিপ্ট ইভেন্ট (JavaScript Events)

April 1, 2015 Author-Check- Article-or-Video

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

এইচটিএমএল ইভেন্ট হল এমন কিছু জিনিস যা এইচটিএমএল এর উপাদানের মধ্যে ঘটে থাকে। যখন javascript এইচটিএমএল পেজ এর মধ্যে ব্যবহার হয় ,তখন javascript ওই ইভেন্ট গুলোর উপর প্রতিক্রিয়া করে।

এইচটিএমএল ইভেন্ট

একটি এইচটিএমএল ইভেন্ট তাই করে যা ব্রাউজার করে অথবা কোন ইউজার কিছু করে।

এখানে কিছু এইচটিএমএল ইভেন্ট দেয়া হল

এইচটিএমএল ওয়েবপেজ লোড হওয়া শেষ হয়েছে
ইনপুট ফিল্ড পরিবর্তন হয়েছে
এইচটিএমএল বাটন এ ক্লিক করা হয়েছে।

আপনি যখন কিছু করতে চান তখন কোন ইভেন্ট ঘটতে পারে।

ইভেন্ট চিহ্নিত হওয়ার পর javascript আপনার কোড কার্যে পরিণত করে।

এইচটিএমএল জাভাস্ক্রিপ্ট কোড এর সাথে ইভেন্ট handler attribute ব্যবহারের অনুমতি দেয় এবং এইচটিএমএল এলিমেন্ট এর সাথে যুক্ত করতে হয়।

একক উদ্ধৃতি চিহ্ন দিয়ে:

<some-HTML-element some-event='some JavaScript'>

ডবল উদ্ধৃতি চিহ্ন দিয়ে:

<some-HTML-element some-event="some JavaScript">

এই উদাহরনে কোড এর মাধ্যমে বাটন এলিমেন্ট এর মধ্যে একটি onclick attribute ব্যবহার করা হয়েছে।
যেমন

উপরের উদাহরণ এ javascript কোড এর একটি উপাদান এবং সেই সাথে id=”demo” এ পরিবর্তন করবে।

পরবর্তী উদাহরনে innerhtml ব্যবহার করে javascript কোড নিজের উপাদানের কোন কনটেন্ট কে পরিবর্তন করবে।
যেমন

অনেকসময় javascript কোড কয়েক লাইনের হয়ে থাকে। ইভেন্ট অ্যাট্রিবউট ফাংশন কল করার ক্ষেত্রে এটি খুবই সাধারন।
যেমন :

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

অধিক ব্যবহৃত এইচটিএমএল ইভেন্ট

ইভেন্ট	বিবরণ
Onchange	এইচটিএমএল উপাদান পরিবর্তন হয়।
Onclick	ব্যবহারকারী এইচটিএমএল উপাদান এর উপর ক্লিক করতে পারে।
Onmouseover	ব্যবহারকারী এইচটিএমএল উপাদান এর উপর মাউস মুভ করলে ইভেন্ট কার্যকর হয়।
Onmouseout	ব্যবহারকারী এইচটিএমএল এর কোন উপাদান এর উপর থেকে মাউস সরালে ইভেন্ট কার্যকর হয়।
Onkeydown	ব্যবহারকারী কিবোর্ড এর কোন বাটন প্রেস করলে ইভেন্ট কার্যকর হয়।
Onload	ব্রাউজার পেজ লোড হওয়া বন্ধ করে।

JavaScript

জাভাস্ক্রিপ্ট নাম্বার মেথড (JavaScript Number Methods)

April 1, 2015 Author-Check- Article-or-Video

জাভাস্ক্রিপ্ট সংখ্যা পদ্ধতি

নয়ন চন্দ্র দত্ত

সংখ্যা পদ্ধতি আপনাকে সংখ্যা নিয়ে কাজ করতে সাহায্য করবে।

গ্লোবাল পদ্ধতি

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

পদ্ধতিঃ Number()

ব্যাখ্যাঃ তার বিচার থেকে রূপান্তরিত একটি নম্বর প্রদান করে।

পদ্ধতিঃ parseFloat()

ব্যাখ্যাঃ Parses যা এটি বিচার করে এবং একটি ফ্লোটিং পয়েন্ট সংখ্যা ফিরিয়ে দেয়।

পদ্ধতিঃ parseInt()

ব্যাখ্যাঃ Parses যা এটি বিচার করে এবং একটি পূর্ণসংখ্যা ফিরিয়ে দেয়।

সংখ্যা পদ্ধতি

জাভাস্ক্রিপ্ট সংখ্যা পদ্ধতি এমন পদ্ধতি যা সংখ্যার উপর ব্যবহার করা যেতে পারেঃ

পদ্ধতিঃ toString()

ব্যাখ্যাঃ স্ট্রিং হিসেবে একটি নম্বর ফিরিয়ে দেয়।

পদ্ধতিঃ toExponential()

ব্যাখ্যাঃ বৃত্তাকার এবং সূচক স্বরলিপি ব্যবহার করে লেখা একটি সংখ্যা সঙ্গে একটি স্ট্রিং ফিরিয়ে দেয়।

পদ্ধতিঃ toFixed()

ব্যাখ্যাঃ দশমিকে একটি নির্দিষ্ট নম্বর সঙ্গে বৃত্তাকার এবং লিখিত একটি সংখ্যা সঙ্গে একটি স্ট্রিং ফিরিয়ে দেয়।

পদ্ধতিঃ toPrecision()

ব্যাখ্যাঃ একটি নির্দিষ্ট দৈর্ঘ্য সঙ্গে লিখিত নম্বর দিয়ে একটি স্ট্রিং ফিরিয়ে দেয়।

পদ্ধতিঃ valueOf()

ব্যাখ্যাঃ নম্বর হিসাবে একটি সংখ্যা ফিরিয়ে দেয়।

[ সব সংখ্যা পদ্ধতি একটি নতুন ভেরিয়েবল এ ফিরে আসে। কিন্তু তারা মূল পরিবর্তনশীল পরিবর্তন করবেন না। ]

toString() পদ্ধতি

toString () স্ট্রিং হিসেবে একটি নম্বর ফিরিয়ে দেয়। সব সংখ্যা পদ্ধতিতে যেকোনো ধরনের সংখ্যা ব্যবহার করা যেতে পারে (লিটারেল, ভেরিয়েবল, বা এক্সপ্রেশন)।

উদাহরণ

<!DOCTYPE html>

<html>

<body>

<p>The toString() method converts a number to a string.</p>

<p id="demo"></p>

<script>

var x = 123;

document.getElementById("demo").innerHTML =

   x.toString() + "<br>" +

   (123).toString() + "<br>" +

   (100 + 23).toString();

</script>

</body>

</html>

toExponential() পদ্ধতি

toExponential () বৃত্তাকার এবং সূচক স্বরলিপি ব্যবহার করে লেখা সংখ্যার সঙ্গে একটি স্ট্রিং ফিরিয়ে দেয়। একটি প্যারামিটার দশমিক পয়েন্ট পিছনে অক্ষর সংখ্যা সংজ্ঞায়িত করেঃ উদাহরণ

<!DOCTYPE html>
<html>
<body>

<p>The toExponential() method returns a string, with the number rounded and written 
using exponential notation.</p>

<p>An optional parameter defines the number of digits behind the decimal point.</p>

<p id="demo"></p>

<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
    x.toExponential() + "<br>" + 
    x.toExponential(2) + "<br>" + 
    x.toExponential(4) + "<br>" + 
    x.toExponential(6);
</script>

</body>
</html>

প্যারামিটারটি ঐচ্ছিক। যদি আপনি এটি উল্লেখ না করেন, জাভাস্ক্রিপ্ট নম্বর সুসম্পন্ন হবে না।

toFixed() পদ্ধতি

toFixed () দশমিক দিয়ে লেখা সংখ্যার সঙ্গে একটি স্ট্রিং ফিরিয়ে দেয়।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<p>The toFixed() method rounds a number to a given number of digits.</p>
<p>For working with money, toFixed(2) is perfect.</p>

<p id="demo"></p>

<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
     x.toFixed(0) + "<br>" +
     x.toFixed(2) + "<br>" +
     x.toFixed(4) + "<br>" +
     x.toFixed(6);
</script>

</body>
</html>

[ toFixed(2) টাকা দিয়ে কাজ করার জন্য যতোপযুক্ত। ]

toPrecision() পদ্ধতি

toPrecision () একটি নির্দিষ্ট দৈর্ঘ্য সঙ্গে লিখিত নম্বর দিয়ে একটি স্ট্রিং ফিরিয়ে দেয়।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<p>The toPrecision() method returns a string, with a number written with a 
specified length:</p>

<p id="demo"></p>

<script>
var x = 9.656;
document.getElementById("demo").innerHTML = 
     x.toPrecision() + "<br>" +
     x.toPrecision(2) + "<br>" +
     x.toPrecision(4) + "<br>" +
     x.toPrecision(6); 
</script>

</body>
</html>

ভেরিয়েবলকে নাম্বার এ রূপান্তর

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

Number() পদ্ধতি
parseInt() পদ্ধতি
parseFloat() পদ্ধতি

এই পদ্ধতিগুলো সংখ্যা পদ্ধতি না হলেও এগুলো গ্লোবাল জাভাস্ক্রিপ্ট পদ্ধতি।

Number() পদ্ধতি

Number() জাভাস্ক্রিপ্ট ভেরিয়েবল নাম্বার এ রূপান্তর কর‍্তে ব্যবহার করা যেতে পারেঃ

উদাহরণ

x = true;
Number(x);       // returns 1
x = false; 
Number(x);       // returns 0
x = new Date();
Number(x);       // returns 1404568027739
x = "10"
Number(x);       // returns 10
x = "10 20"
Number(x);       // returns NaN

parseInt() পদ্ধতি

parseInt () একটি স্ট্রিং এবং একটি পূর্ণ সংখ্যা ফিরিয়ে দেয়। স্পেস এর অনুমতি আছে। শুধুমাত্র প্রথম সংখ্যা প্রদান করেঃ উদাহরণ

parseInt("10");        // returns 10
parseInt("10.33");     // returns 10
parseInt("10 20 30");  // returns 10
parseInt("10 years");  // returns 10
parseInt("years 10");  // returns NaN

সংখ্যা রূপান্তরিত করা সম্ভব না হলে, NaN (না একটি নম্বর) ফিরিয়ে দেয়।

parseFloat() পদ্ধতি

parseFloat () একটি স্ট্রিং parses এবং একটি নম্বর parseInt () একটি স্ট্রিং parses এবং একটি সম্পূর্ণ নম্বর ফিরিয়ে দেয়। স্পেস এর অনুমতি আছে। শুধুমাত্র প্রথম সংখ্যা প্রদান করেঃ উদাহরণ

 parseFloat("10");        // returns 10
 parseFloat("10.33");    // returns 10.33
 parseFloat("10 20 30"); // returns 10
 parseFloat("10 years"); // returns 10
 parseFloat("years 10"); // returns NaN

সংখ্যা রূপান্তরিত করা সম্ভব না হলে, NaN (না একটি নম্বর) ফিরিয়ে দেয়।

valueOf() পদ্ধতি

valueOf () নম্বর হিসাবে একটি নম্বর প্রদান করে। উদাহরণ

 var x = 123;
 x.valueOf();          // returns 123 from variable x
 (123).valueOf();      // returns 123 from literal 123
 (100 + 23).valueOf(); // returns 123 from expression 100 + 23

জাভাস্ক্রিপ্ট এ, একটি সংখ্যা একটি আদি মান (typeof = number) হতে পারে বা একটি অবজেক্টও (typeof = object) হতে পারে।

[ জাভাস্ক্রিপ্ট এ, সব ডেটা টাইপ এর valueOf () এবং toString () পদ্ধতি আছে।]

JavaScript

জাভাস্ক্রিপ্ট ব্রেক এবং চলমান স্টেটমেন্ট (JavaScript Break and Continue)

April 1, 2015 Author-Check- Article-or-Video

মোঃ আব্দুল্লাহ

ব্রেক স্টেটমেন্ট সাধারনত একটি লুপ থেকে বেরিয়ে আসার জন্য ব্যবহৃত হয়।

কন্টিনিউ স্টেটমেন্ট লুপের একটি ইটারেশনকে অতিক্রম করে।

Break স্টেটমেন্ট

ইতিমধ্যে তুমি আগের অধ্যায়ে ব্রেক স্টেটমেন্টের ব্যবহার এই টিউটোরিয়ালে দেখেছ। এটি ব্যবহৃত হত একটি স্টেটমেন্টকে সুইচ স্টেটমেন্ট থেকে বের করার জন্য।
ব্রেক স্টেটমেন্ট একটি লুপ থেকে বের হওয়ার জন্যও ব্যবহৃত হয়।
ব্রেক স্টেটমেন্ট একটি চলমান লুপকে ভাঙে এবং লুপের পরবর্তী যদি কোন কোড থেকে থাকে তাহলে ঐ সকল কোডকে পরিচালিত করে।

উদাহরণ

for (i = 0; i < 10; i++) {
    if (i === 3) { break }
    text += "The number is " + i + "<br>";
}

স্টেটমেন্টের যদি একটি লাইনের কোড থাকে, তবে ব্রেকেট উপেক্ষা করা যেতে পারে।

for (i = 0; i < 10; i++) {
    if (i === 3) break;
    text += "The number is " + i + "<Br>";
}

Continue স্টেটমেন্ট

যদি একটি নির্দিষ্ট যুক্তির উদ্ভব হয় এবং এটি পরবর্তী লুপের সাথে ইটারেশনকে চালিয়ে যায় continue স্টেটমেন্ট লুপের ইটারেশনকে ভেঙে দেয় ।
নিম্নের উদাহারণে 3 উপেক্ষা করে যাবেঃ

উদাহরণ

 for (i = 0; i < 10; i++) {
     if (i === 3) continue;
     text += "The number is " + i + "<Br>";
 }

JavaScript Labels

জাভা স্ক্রিপ্ট স্টেটমেন্টকে চিহ্নিত করার জন্য আগে স্টেটমেন্টটিকে একটি লেবেল নাম ও কোলোন দিয়ে চিহ্নিত করতে হবে।
সিনটেক্স:

label:
statements

ব্রেক এবং কনটিনিউ স্টেটমেন্ট হল একমাত্র জাভা স্ক্রিপ্ট স্টেটমেন্ট যা কোড ব্লক থেকে বের হয়ে আসতে পারে।

সিনটেক্স

break labelname;

continue labelname;

কনটিনিউ স্টেটমেন্ট ( লেবেল রেফারেন্স সহ বা ছাড়া ) কেবল মাত্র লুপের ভেতরে ব্যবহৃত হতে পারে।

ব্রেক স্টেটমেন্ট লেবেল রেফারেন্স ছাড়া লুপ বা সুইচের ভিতরে ব্যবহৃত হতে পারে।

এটি লেবেল রেফারেন্স সহ যেকোনো জাভা স্ক্রিপ্টের কোড ব্লক থেকে বের হয়ে আসার জন্য ব্যবহৃত হতে পারে।

উদাহরণ

var cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
      text += cars[0] + "<br>";
      text += cars[1] + "<br>";
      text += cars[2] + "<br>";
      text += cars[3] + "<br>";
      break list;
      text += cars[4] + "<br>";
      text += cars[5] + "<br>";
}

JavaScript

জাভাস্ক্রিপ্ট ডেটস (JavaScript Dates)

April 1, 2015 Author-Check- Article-or-Video

ডেট মেথডের সাহায্যে ডেট ভেলু পাওয়া যায় এবং তা বেবহার করা যায়, যেমন বছর, মাস, দিন, মিনিট, সেকেন্ড, মিলিসেকেন্ড।

Date Get মেথড

একটি ডেটের কোন একটি অংশকে পাওয়ার জন্য ডেট গেট মেথড বেবহার করা হয়:

মেথড	বর্ণনা
getDate()	ডেট নাম্বার পাওয়ার জন্য যেমন: ১-৩১
getDay()	সপ্তাহ নাম্বার পাওয়ার জন্য
getFullYear()	বছরের সবগুলো ডিজিট পাওয়ার জন্য যেমন: ২০১৫
getHours()	ঘন্টা জানার জন্য
getMilliseconds()	মিলিসেকেন্ড হিসেবের জন্য
getMinutes()	মিনিট হিসেবের জন্য
getMonth()	মাস হিসেবের জন্য
getSeconds()	সেকেন্ড হিসেবের জন্য
getTime()	১৯৭০ থেকে এই পর্যন্ত সময়কে মিলিসেকেন্ডে হিসেবের জন্য

getTime() মেথড

১৯৭০ থেকে এই পর্যন্ত সময়কে মিলিসেকেন্ডে হিসেবের জন্য এই মেথড বেবহৃত হয়।

উদাহরণ:

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>

getFullYear() মেথড

বছরের সবগুলো ডিজিট পাওয়ার জন্য এই মেথড বেবহৃত হয়।

উদাহরণ:

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>

getDay() মেথড

সপ্তাহ নাম্বার পাওয়ার জন্য এই মেথড বেবহৃত হয়।

উদাহরণ:

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
</script>

Array ব্যবহার করেও এই মেথডে দেখানো যায়:

<script>
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
</script>

ডেট ইনপুট-পার্সিং

ডেট ইনপুট এর মাধ্যমে কোনো ডেটের ভেলু নিয়ে তাকে Date.parse() মেথডের সাহায্যে মিলিসেকেন্ডে কনভার্ট করা যায়, Date.parse() মেথড কোনো একটি ভেলু/ডেট এবং ১৯৭০ থেকে সেই পর্যন্ত সময়কে মিলিসেকেন্ডে কনভার্ট করে।

উদাহরণ ১:

<script>
var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;
</script>

উদাহরণ ২:

<script>
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);
document.getElementById("demo").innerHTML = d;
</script>

ডেট কম্পেয়ার

দুইটি ডেটের মধ্যে খুব সহজেই কম্পেয়ার করা যায়।

উদাহরণ:

var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);

if (someday > today) {
    text = "Today is before January 14, 2100.";
} else {
    text = "Today is after January 14, 2100.";
}
document.getElementById("demo").innerHTML = text;

হিন্টস: জাভাস্ক্রিপ্টে মাস গনণা শূন্য থেকে শুরু হয়, জানুয়ারী ০ ডিসেম্বর ১১

JavaScript, JavaScript Frameworks

জাভাস্ক্রিপ্ট স্ট্রিক্ট (JavaScript Use Strict)

April 1, 2015 Author-Check- Article-or-Video

জাভাস্ক্রিপ্ট স্ট্রিক্ট (JavaScript Use Strict)

মোহাম্মাদ আমিরুল ইসলাম (আরিফ)

ওয়েব ডিজাইনার অ্যান্ড ডেভেলপার

জাভাস্ক্রিপ্ট স্ট্রিক্ট (JavaScript Use Strict)

Use Strict "ইউজ স্ট্রিক্ট" হল এমন একটি জাভাস্ক্রিপ্ট কোড যা Strict mode "স্ট্রিক্ট মোডে" চালু হয়।

ইউজ স্ট্রিক্ট নির্দেশিকা (The "use strict" Directive)

ইউজ স্ট্রিক্ট নির্দেশিকা (The "use strict" Directive) জাভাস্ক্রিপ্ট 1.8.5 (ECMAScript version 5) এ নতুন ।

এটা কোন স্টেটমেন্ট নয় কিন্তু এটি একটি আক্ষরিক অভিব্যক্তি। এটি জাভাস্ক্রিপ্টটের নতুন ভার্সন । পুরাতন ভার্সন এ এটি ব্যাবহার করা যায় না।

Use Strict (ইউজ স্ট্রিক্ট) ব্যাবহার করার উদ্দেশ্য একটি নির্দিষ্ট কোড যা Strict mode (স্ট্রিক্ট মোড) এ চালু হবে ।

Strict mode "স্ট্রিক্ট মোডে" সাপোর্ট করে ব্রাউজারেরে এই ভার্সন গুলোতে

Internet Explorer from version 10
Firefox from version 4
Chrome from version 13
Safari from version 5.1
Opera from version 12

স্ট্রিক্ট মোডে ঘোষণা (Declaring Strict Mode):

Strict mode "স্ট্রিক্ট মোডে" ঘোষণা করা হয় Use Strict (ইউজ স্ট্রিক্ট) এর মাধ্যমে । এটি জাভাস্ক্রিপ্ট ফাইলের শুরুতে অথবা জাভাস্ক্রিপ্ট ফাংশন এর ভিতর ব্যাবহার করা হয়ে থাকে।

জাভাস্ক্রিপ্টের শুরুতে ঘোষণা করা হলো এর গ্লোবাল ব্যপ্তি থাকবে। (সকল কোড স্ট্রিক্ট মোড এ কার্যকর হবে)

ফাংশনের ভিতরে ঘোষণা করা হলো এর লোকাল ব্যপ্তি থাকবে। (শুধুমাত্র ফাংশনের ভিতরের কোডগুলো স্ট্রিক্ট মোড এ কার্যকর হবে)

জাভাস্ক্রিপ্ট ফাইলের শুরুতেঃ

<!DOCTYPE html>
<html>
<body>

<p>Global "use strict" declaration.</p>

<p>Activate debugging in your browser to see the error report.</p>

<script>
"use strict";
y= 3.14;       // This will cause an error.
myFunction();  // This will also cause an error.

function myFunction() {
      x = 3.14;
}
</script>

</body>
</html>

জাভাস্ক্রিপ্ট ফাংশন এর ভিতরঃ

<!DOCTYPE html>
<html>
<body>

<p>Local "use strict" declaration.</p>

<p>Activate debugging in your browser to see the error report.</p>

<script>
y= 3.14;        // This will not cause an error.
myFunction();   // This will cause an error.

function myFunction() {
     "use strict";
     x = 3.14;
}
</script>

</body>
</html>

"ইউজ স্ট্রিক্ট" সিনট্যাক্স (The "use strict"; Syntax)

সিনট্যাক্স যেন জাভাস্ক্রিপ্টটের পুরোনো সংস্করণের সাথে সামঞ্জস্যপূর্ণ হয় সেভাবে সাজান হয়েছে।

কম্পাইল করার ক্ষেত্রে একটি সাংখ্যিক আক্ষরিক (4 + + 5) অথবা একটি আক্ষরিক স্ট্রিং ("jamal kamal";) ব্যবহারে জাভাস্ক্রিপ্ট প্রোগ্রামে কোন পার্শ্ব প্রতিক্রিয়া নেই।এটি সাধারণত কম্পাইল হয় অবিদ্যমান ভেরিয়াবল এবং ডায়েস এর সাথে।

সুতরাং, "ইউজ স্ট্রিক্ট" শুধুমাত্র নতুন কম্পাইলার (সংগ্রহক) এ কাজ করে, যে কম্পইলাম এর মানে বুঝতে পারে ।

স্ট্রিক্ট মোড (Strict mode) কেন?

Strict mode “নিরাপদ” জাভাস্ক্রিপ্ট লিখতে সাহায্য করে ।

Strict mode পূর্ববর্তী "bad syntax" পরিবর্তন করে "real errors" গ্রহণ করে।

উদাহরণ হিসাবে, স্বাভাবিক জাভাস্ক্রিপ্ট, একটি মিসটাইপিং ভেরিয়াবল একটি গ্লোবাল ভেরিয়াবল সৃষ্টি করে।

Strict mode এর ক্ষেত্রে এগুলোকে "erorr" দেখাবে, এবং এখানে অসাবধানতাবশতঃ গ্লোবাল ভেরিয়াবল তৈরি হওয়া অসম্ভব।

সাধারন জাভাস্ক্রিপ্টটে একজন ডেভেলপার অ লিখনযোগ্য বৈশিষ্ট্য মান নির্ধারণের ক্ষেত্রে কোন ত্রুটি পাবেন না।

Strict mode যেকোন assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object গুলোকে এরর "erorr" দেখাবে।

(Strict mode) স্ট্রিক্ট মোডে যা যা অনুমোদিত নয়

ঘোষণা না করে ভেরিয়েবল (প্রোপার্টি বা অবজেক্ট) ব্যবহার করা অনুমোদিত নয়।

"use strict";
x = 3.14;            // This will cause an error (if x has not been declared)

ভেরিয়াবল, ফাংশন অথবা এগ্রিমেন্ট মুছে ফেলা অনুমোদিত নয়।

"use strict";
x = 3.14;
delete x;                // This will cause an error

একাধিক বার প্রোপার্টি নির্ধারণ করা অনুমোদিত নয়।

"use strict";
var x = {p1:10, p1:20}; // This will cause an error

প্যারামিটার এর নাম নকল করা অনুমোদিত নয়।

"use strict";
function x(p1, p1) {};           // This will cause an error

অষ্টক গণনাপদ্ধতি এবং অব্যাহতি অক্ষর ব্যাবহার করা অনুমোদিত নয়।

"use strict";
var x = 010;           // This will cause an error
var y = \010;          // This will cause an error

রীড অনলি প্রপার্টি "read-only property" লেখা অনুমোদিত নয়।

"use strict";
var obj = {};
obj.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;               // This will cause an error

গেট অনলি প্রপার্টি "get-only property" লেখা অনুমোদিত নয়।

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;           // This will cause an error

আন ডিলিটএবল প্রপার্টি ডিলিট করা অনুমোদিত নয়।

"use strict";
delete Object.prototype;      // This will cause an error

স্ট্রিং "eval" ভেরিয়াবল হিসাবে ব্যাবহার করা যাবে না।

"use strict";
var eval = 3.14;             // This will cause an error

স্ট্রিং "arguments" ভেরিয়াবল হিসাবে ব্যাবহার করা যাবে না।

"use strict";
var arguments = 3.14;       // This will cause an error

"with statement" অনুমোদিত নয়।

"use strict";
with (Math){x = cos(2)};        // This will cause an error

ভবিষ্যতের জন্য সংরক্ষিত কীওয়ার্ড “keywords" গুলোঅনুমোদিত নয়। সেগুলো হল :

implements
interface
package
private
protected
public
static
yield

JavaScript

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

April 1, 2015 Author-Check- Article-or-Video

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

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

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

মান ধারণ করতে পারে জাভাস্ক্রিপ্টে এমন 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

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

April 1, 2015 Author-Check- Article-or-Video

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

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

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

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

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

<!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>

এইচটিএমএল HTML

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

March 31, 2015 Author-Check- Article-or-Video Leave a comment

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>

</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>

ফলাফলঃ

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>

</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 - 001

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

March 31, 2015 Author-Check- Article-or-Video

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

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

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

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

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

নীচে একটি সম্পূর্ণ এইচটিএমএল উদাহরণ সহ সকল 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>

<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>  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>

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

ডিরেক্টিভ (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 টেস্ট মডেল ভেরিয়েবল ভূল অথবা অপরিপূর্ণতার জন্য।

jQuery-001 । জে কুয়েরি - ০০১

jQuery এর – AJAX এর ভূমিকা

March 31, 2015 Author-Check- Article-or-Video

jQuery এর - AJAX এর ভূমিকা

মোঃ আরিফুল ইসলাম

পুরো পৃষ্ঠা রিলোড না করে সার্ভারের সাথে তথ্য বিনিময় করা এবং সেটি ওয়েব পেজ এর একটি অংশে আপডেট করা AJAX এর কাজ।

AJAX কি?

AJAX =JavaScript এবং XML এর সমন্বয়।

সংক্ষেপে, AJAX ওয়েব পেজ এর ব্যাকগ্রাউন্ড থেকে ডাটা লোড করে এবং সেটি ওয়েব পেজ এ প্রদর্শন করে। পুরো ওয়েব পেজকে রিলোড না করে।

AJAX ব্যবহার করে তৈরি করা কিছু ওয়েব অ্যাপ্লিকেশন এর উদাহরণ- Gmail, Google Maps, Youtube, and Facebook

JQuery এবং Ajax

Ajax এর ফাংশন Jquery এর কিছু মেথড ব্যাবহার করে।

jQuery AJAX মেথড থেকে আমরা যেকোন রিমোট সার্ভার ব্যাবহার করে যেকোন text, HTML, XML, অথবা JSON ফাইল কল করতে পারি। এছাড়াও বহিরাগত কোন নির্বাচিত HTML এলিমেন্টকে লোড করিয়ে ওয়েব পেজ এ প্রদর্শন করাতে পারি।

JQuery ছাড়া কি, AJAX এর কোডিং সুশৃঙ্খলভাবে কাজ করতে পারে

সচরাচর AJAX এর যে কোড লেখা হয় সেগুলিতেই AJAX এর কোডিং সুশৃঙ্খলভাবে কাজ করতে পারে। কারণ, বিভিন্ন ব্রাউজার এ AJAX এর সিনট্যাক্স ইমপ্লিমেন্ট করা আছে।

jQuery AJAX মেথড

পরবর্তী টিউটোরিয়াল এ আমরা jQuery AJAX মেথড সম্পর্ক এ জানবো।

jQuery-001 । জে কুয়েরি - ০০১

jQuery এ এইচটিএমএল এলিমেন্টস দূর করা

March 31, 2015 Author-Check- Article-or-Video

লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরিতে খুব সহজে আগে থেকে থাকা এইচটিএমএল এলিমেন্টস দূর করা যায় ।

এলিমেন্টস বা উপাদান দূর করা

এলিমেন্টস বা উপাদান দূর করার জন্য দুই ধরণের জেকোয়েরি মেথডস আছে ।

remove() : এটি এর সাব ক্যাটাগরি সহ সকল সিলেক্ট করা এলিমেন্টস দূর করে ।
empty() : সাব ক্যাটাগরি এর সকল উপাদানকে দূর করে ।

jQuery remove() Method

jQuery remove() Method এর সাব ক্যাটাগরি সহ সকল সিলেক্ট করা এলিমেন্টস দূর করে ।

$("#div1").remove();

ফলাফল : remove()

jQuery empty() Method

jQuery empty() Method এর সাব ক্যাটাগরি এর সকল উপাদানকে দূর করে ।

$("#div1").empty();

ফলাফল : empty()

দূরকৃত এলিমেন্টস এর ফিল্টার করা

jQuery remove() method একটি প্যারামিটার সাপোর্ট করে তাই এটি দূরকৃত এলিমেন্টস এর ফিল্টার করতে পারে ।

এই প্যারামিটার টি যেকোন জেকোয়েরি সিলেক্টর হবে ।

নিচের উদাহরণ class="italic": ক্লাসের সকল <p> উপাদানগুলোকে দূর করবে ।

$("p").remove(".italic");

ফলাফল : দূরকৃত এলিমেন্টস এর ফিল্টার

জেকোয়েরি এইচটিএমএল রেফারেন্স

এছাড়া জেকোয়েরি এর সকল এইচটিএমএল কে উপরের পদ্ধতিতে দূর করতে পারবেন । এজন্য আপনি পূর্বে পোস্ট করা আমাদের সকল এইচটিএমএল রেফারেন্স গুলো দেখতে পারেন ।

এভাবে আপনি খুব সহজে জেকোয়েরিতে এইচটিএমএল এলিমেন্টস গুলো দূর করতে পারবেন

jQuery-001 । জে কুয়েরি - ০০১

জেকোয়েরি এর কলব্যাক ফাংশন ।

March 31, 2015 Author-Check- Article-or-Video

লেখকঃ মোস্তাফিজুর ফিরোজ ।

কেমন আছেন সবাই? আজ আমি আপনাদের সাথে জেকোয়েরি এর কলব্যাক ফাংশন সমূহ আলোচনা করবো ।

জেকোয়েরি এর কলব্যাক ফাংশন

যখন কোনো পেজের ইফেক্ট ১০০% শেষ হয় তখন কলব্যাক ফাংশন তার কাজ সম্পাদন করে থাকে ।
সাধারণত জাভাস্ক্রিপ্ট এর বিবৃতি গুলো লাইন বাই লাইন সম্পাদিত হয় । আর যখন ইফেক্ট ব্যবহার করা হয় তখন ইফেক্ট শেষ না হলেও পরের লাইন সম্পাদিত হতে পারে । আর এই সমস্যা দূর করার জন্য কলব্যাক ফাংশন তৈরি করা হয় ।

চলমান ইফেক্ট শেষ হলে কলব্যাক ইফেক্ট চালু হয় ।

কলব্যাক ইফেক্ট টিতে সাধারণত এমন কোড থাকে :

$(selector).hide(speed,callback);

কলব্যাক ফাংশনসহ উদাহরণঃ

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

ফলাফল : কলব্যাক ফাংশন

এটায় hide effect শেষ হলে কলব্যাক ফাংশন কাজ করবে ।

কলব্যাক ফাংশনবিহীন উদাহরণঃ

$("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
});

ফলাফল : কলব্যাক ফাংশনবিহীন

এটায় কোনো কলব্যাক ফাংশন ব্যবহার করা হয়নি । তাই hide effect শেষ হলেই alert box হাজির হবে ।

তাহলে কলব্যাক ফাংশনের কাজ বুঝলেন তো? না বুঝতে পারলে কমেন্ট করবেন আমি বুঝতে সাহায্য করবো ।

jQuery-001 । জে কুয়েরি - ০০১

জেকোয়েরি ইফেক্টস ব্যবহার করে টেক্সট হাইড এবং শো করা

March 31, 2015 Author-Check- Article-or-Video Leave a comment

লেখকঃ মোস্তাফিজুর ফিরোজ

কেমন আছেন সবাই ? নিশ্চয়ই ভালো । ভালো না থাকলেও আজ আপনাদের যেটা শিখাবো তাতে এমনিই মন ভালো হয়ে যাবে । আজ আমি আপনাদের জেকোয়েরি ইফেক্টস ব্যবহার করে টেক্সট হাইড এবং শো করা শিখাবো ।

তাহলে আগে চলুন এখান থেকে দুইটি উদাহরণ দেখে আসি ।

উদাহরণ ১ঃ jQuery hide()

একটি সহজ jQuery hide() মেথড প্রদর্শন করে

উদাহরণ ২ঃ jQuery hide()

আরেকটি সহজ jQuery hide() মেথড প্রদর্শন করে। কিভাবে টেক্সট এর কিছু অংশ লুকায়।

jQuery hide() এবং show() ট্যাগের ব্যবহার

jQuery তে hide() and show() মেথড ব্যবহার করে এইচটিএমএল এলিমেন্ট লুকাতে এবং প্রদর্শন করতে পারি:

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

ফলাফল : Hide এবং Show

Syntax

এটাতে কিন্তু আমরা কিছু Syntax যোগ করে স্পিড বাড়াতে কমাতে পারি । তাহলে দেখুন Syntax গুলো কেমন ।

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

এই অপশনাল প্যারামিটার গুলো নির্দেশ করে দেখাতে এবং বন্ধ করতে কেমন সময় নিবে। এর মান "slow", "fast", বা milliseconds হতে পারে।

উদাহরণ:

$("button").click(function(){
    $("p").hide(1000);
});

ফলাফল : স্পিড নিয়ন্ত্রণ

jQuery toggle() মেথড এর ব্যবহার

jQuery toggle() মেথডটি আপনি hide() এবং show() মেথডের মাঝে ব্যবহার করতে পারেন। তাহলে বন্ধ তথ্যগুলো দেখাবে, আর দেখানোগুলো বন্ধ করবে ।

$("button").click(function(){
    $("p").toggle();
});

ফলাফল : Toggle

Syntax

এখানেও আমরা একটা স্পিড Syntax যোগ করে এর স্পীড নিয়ন্ত্রণ করতে পারি ।

$(selector).toggle(speed,callback);

এই স্পীড প্যারামিটার এটিকে দ্রুত, আস্তে এবং মিলিসেকেন্ডে পরিবর্তন করতে পারে ।

কোথাও না বুঝতে পারলে কমেন্ট করুন।

jQuery-001 । জে কুয়েরি - ০০১

jQuery দিয়ে CSS Class এর মান বের করা এবং অরোপ করা

March 31, 2015 Author-Check- Article-or-Video

জেকুয়্যেরি (jQuery) – গেট ও সেট সিএসএস ক্লাসেস

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

JQuery সঙ্গে, এলিমেন্টের সিএসএস ম্যানিপুলেট সহজ।

jQuery ম্যানিপুলেটিং সিএসএস

jQuery এর CSS ম্যানিপুলেশন জন্য বিভিন্ন পদ্ধতি আছে। আমরা নিম্নলিখিত পদ্ধতি পর্যবেক্ষণ করবো:

addClass () - নির্বাচিত এলিমেন্ট এক বা একাধিক ক্লাস যুক্ত করে
removeClass () - নির্বাচিত এলিমেন্ট থেকে এক বা একাধিক ক্লাস মুছে ফেলে
toggleClass () - নির্বাচিত এলিমেন্ট এ ক্লাস যোগ/ অপসারণ এর মধ্যে টগল করে
css()- সেটস্ অথবা স্টাইল এট্রিবিউট ফেরৎ করে

উদাহরণ স্টাইলশীট

নিম্নলিখিত স্টাইল এই পেজে সব উদাহরণ জন্য ব্যবহার করা হবে:

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

.blue {
    color: blue;
}

jQuery এর addClass () পদ্ধতি

নিম্নলিখিত উদাহরণে বিভিন্ন এলিমেন্টে এ কিভাবে ক্লাস এট্রিবিউট যোগ করা হয় তা দেখানো হয়েছে। ক্লাস যোগ করার সময় অবশ্যই আপনি, একাধিক এলিমেন্ট নির্বাচন করতে পারেন:

উদাহরণ:

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

ফলাফল : addClass ()

এছাড়াও আপনি addClass () মেথড এর মধ্যে একাধিক ক্লাস নির্দিষ্ট করতে পারেন:

উদাহরণ:

$("button").click(function(){
    $("#div1").addClass("important blue");
});

ফলাফল : একাধিক ক্লাস

jQuery এর removeClass () পদ্ধতি

নিম্নলিখিত উদাহরণে বিভিন্ন এলিমেন্টে থেকে কিভাবে ক্লাস এট্রিবিউট অপসারণ করা হয় তা দেখানো হয়েছে।

উদাহরণ:

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

ফলাফল : removeClass ()

jQuery এর toggleClass () পদ্ধতি

নিম্নলিখিত উদাহরণে দেখানো হয়েছে কিভাবে jQuery toggleClass () মেথড ব্যবহার করা হয়। এ পদ্ধতি নির্বাচিত এলিমেন্ট এ ক্লাস যোগ/ অপসারণ এর মধ্যে টগল করে:

উদাহরণ:

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

ফলাফল : toggleClass ()

jQuery এর css() পদ্ধতি

JQuery এর css()মেথড পরবর্তী অধ্যায়ে ব্যাখ্যা করা হবে।

jQuery এর CSS রেফারেন্স

সমস্ত jQuery সিএসএস পদ্ধতির জন্য, আমাদের jQuery এর HTML / CSS এর রেফারেন্স এ যান।

এইচ টি এম এল - ০০২ । HTML - 002

আমরা এ অধ্যায়ে HTML Attribute সম্পর্কে আলোচনা করব। HTML Attributes

March 31, 2015 Author-Check- Article-or-Video

আমরা এ অধ্যায়ে HTML Attribute সম্পর্কে আলোচনা করব। Attribute মূলত HTML element সম্পর্কে অতিরিক্ত তথ্য (information) প্রদান করে। Attribute সর্বদা start tag এর মাধ্যমে চিহ্নিত হয়। HTML Document এ Attribute প্রকাশ হয় এভাবে name= “value”। নিম্নে HTML এ ব্যবহৃত কিছু Attributes এর list তুলে ধরা হল-

Attribute(বৈশিষ্ট্য)	Description(বর্ণনা)
Alt	Image এর alternative text কে চিহ্নিত করে এই Attribute।
Disabled	কোন input element কে নিষ্ক্রিয়(disable)করতে একে ব্যবহার করা হয়।
Herf	কোন link এর web address কে চিহ্নিত করে।
Id	এর দ্বারা element এর identification name বোঝায়।তবে প্রতিটি web page এর id একই রকম হওয়া যাবে না।
Src	Image এর source URL(web address)কে উল্লেখ করে।
Style	Element এর style(শৈলি)কে তুলে ধরা হয় এর মাধ্যমে।
Title	Element এর অতিরিক্ত তথ্য নির্দেশ করতে একে ব্যবহার করা হয়।যেমন- <p title=” salearningschool.com সম্পর্কে ”> Salearningschool.com একটি web developer site । এটি web developing সম্পর্কে বিভিন্ন ধরণের Tutorial প্রদান করে। </p> এই উদাহরণে <p> element এর attribute হল Title এবং এর value হল salearningschool.com।
Value	এর দ্বারা Document এ অবস্থিত element এর বিষয়বস্তুকে নির্দেশ করা হয়।
Width, Height	Document এ ব্যবহৃত image এর size কে এই attribute দ্বারা প্রকাশ করা হয়।
Lang	Element এর language (ভাষা) কে উল্লেখ করা হয় এর মাধ্যমে।
Translate	যদি কিনা কোন element এর বিষয়বস্তু translate করার প্রয়োজন হয় তখন এই attribute ব্যবহৃত হয়।
Class	কোন element এর এক বা একাধিক css class কে প্রকাশ করা হয় এর দ্বারা।
Hidden	কোন element নেই অর্থে এটি ব্যবহৃত হয়য়।
Spell check	এর দ্বারা কোন element এর বানান ও ব্যকরণ ঠিক আছে কিনা পরীক্ষা করা হয়।

এইচটিএমএল HTML

এইচটিএমএল ক্লাসেস (HTML Classes)

March 30, 2015 Author-Check- Article-or-Video

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

HTML Classes

সিএসএস এর মাধ্যমে বিভিন্ন ক্লাস এর এর স্টাইল সেট করে দেওয়া যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>

<div class="cities">
 <h2>London</h2>
<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>
 </div> 

</body>
</html>

Classing ব্লক elements

এইচটিএমএল <div> একটি ব্লক লেভেল উপাদান। অন্যান্য এইচটিএমএল এর উপাদানের ক্ষেত্রে এটি container হিসেবে কাজ করতে পারে। সবগুলো এইচটিএমএল উপাদানের div এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
 </head>
<body>

<div class="cities">
 <h2>London</h2>
<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>
 </div>

<div class="cities">
 <h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
 <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>

</body>
</html>

Classing inline elements

এইচটিএমএল এর <span> উপাদান একটি ইনলাইন উপাদান যা container এর টেক্সট এর জন্য ব্যবহার হয়ে থাকে। সবগুলো এইচটিএমএল উপাদানের span এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
 </style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

এইচ টি এম এল - ০০২ । HTML - 002

HTML এর প্রথমিক কিছু বিষয়

March 30, 2015 Author-Check- Article-or-Video

HTML এর প্রথমিক কিছু বিষয়

HTML Documents(নথি):

<!DOCTYPE html> লেখার মধ্য দিয়ে সব ধরণের HTML document শুরু হয়।<html> tag লেখার মাধ্যমে শুরু এবং </html> tag লেখার মাধ্যমে শেষ হয়।<body> এবং </body> tag এর মাঝখানে HTML Document এর দৃশ্যমান অংশটুকু অবস্থান করে।

উদাহরণস্বরূপঃ

<!DOCTYPE html>

<html>

<body>

<h1> আমার প্রথম শিরোনাম </h1>

</body>

<html>

HTML Headings(শিরোনাম):

<h1> থেকে <h6> tag দিয়ে HTML এর Heading কে বিশেষায়িত করা হয়।

উদাহরণঃ

<h1> এই হল একটি শিরোনাম </h1>

<h2> এই হল একটি শিরোনাম </h2>

<h3> এই হল একটি শিরোনাম </h3>

HTML Paragraphs(অনুচ্ছেদ):

<p> tag এর মধ্য দিয়ে HTML এর Paragraph কে তুলে ধরা হয়।

উদাহরণঃ

HTML Links(সংযোগ):

<a> tag এর মধ্য দিয়ে HTML Link কে তুলে ধরা হয়।

উদাহরণস্বরূপঃ

This is a link </a>

এখানে (herf )attribute টি ব্যবহৃত হয়েছে link Address কে চিহ্নিত করার জন্য।এই attribute গুলো HTML elements এর অতিরিক্ত তথ্য সরবারহ করার জন্য ব্যবহৃত হয়।

HTML Images(চিত্র):

<img> tag এর মাধ্যমে HTML image কে প্রকাশ করা হয়।যার source file হিসেবে (src), alternative text হিসেবে (alt) এবং size প্রকাশ করতে (width এবং height) attribute ব্যবহার করা হয়।

উদাহরণস্বরূপঃ

আপনারা পরবর্তী অধ্যায়ে attribute সম্পর্কে আরও জানবেন।

এইচটিএমএল HTML

এইচটিএমএল ব্লক (HTML Block and Inline Elements)

March 29, 2015 Author-Check- Article-or-Video

এইচটি এম এল ব্লক (HTML Block Elements)

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

উদাহরণঃ

<h2>London</h2>
<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>

</div>

ফলাফলঃ

London

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.

এইচটিএমএল এর ব্লক উপাদান এবং ইনলাইন উপাদান

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

Examples: <h1>, <p>, <ul>, <table>

ইনলাইন উপাদান গুলো কোন লাইন এর বিরতি ছারাই শুরু হয়

Examples: <b>, <td>, <a>, <img>

এইচটিএমএল DIV Element

<div> একটি ব্লক লেভেল উপাদান যা অন্য এইচটিএমএল উপাদান এর সাথে container হিসেবে ব্যবহার করা যায়। এই <div> উপাদানের কোন স্পেশাল অর্থ নেই। এর জন্য কোন attribute এর দরকার পরে না। কিন্ত স্টাইল এবং ক্লাস হল কমন। কারন এটি ব্লক লেভেল উপাদান যা ব্রাউজার এ লাইন এর বিরতি হিসেবে প্রকাশ করে।

এইচটিএমএল <span> element

<span> একটি ইনলাইন উপাদান যা টেক্সট এর সাথে container হিসেবে ব্যবহার করা যায়। এই <span> উপাদানের কোন স্পেশাল অর্থ নেই। এর জন্য কোন attribute এর দরকার পরে না। কিন্ত স্টাইল এবং ক্লাস হল কমন। <div> উপাদান এর মতন <span> অটোমেতিক ফরম্যাট নেই।

উদাহরণঃ

<h1>My <span style="color:red">Important</span>Heading</h1>

ফলাফলঃ

My ImportantHeading

এইচটিএমএল grouping ট্যাগ

<div>-ডকুমেন্ট কে ব্লক- লেভেল হিসেবে ডিফাইন করার জন্য

<span>- ডকুমেন্ট কে ইনলাইন হিসেবে ডিফাইন করার জন্য

jQuery-001 । জে কুয়েরি - ০০১

jQuery stop() মেথড । jQuery Stop Animations

March 29, 2015 Author-Check- Article-or-Video Leave a comment

কোনো animation বা effect শেষ হবার পূর্বেই সেটাকে থামানোর ক্ষেত্রে jQuery stop() method ব্যবহার করা হয়।

Sliding, fading এবং custom animation সহ সকল jQuery effect ফাংশনের ক্ষেত্রে stop() method ব্যবহার করা হয়।

সিনট্যাক্স

$(selector).stop(stopAll,goToEnd);

stopAll parameter একটি optional parameter যা animation queue টি clear হয়েছে কি না তা নির্দেশ করে। এর Default মান হলো False, যা শুধুমাত্র active animation কে stop করে এবং সারির পরবর্তী animation গুলোকে চলতে দেয়।

goToEnd parameter একটি optional parameter যা current animation কে complete করবে কি না তা নির্দেশ করে। এর Default মান হলো False.

সুতরাং Default মান যখন অপরিবর্তিত থাকে তখন stop() method টি কোনো Selected element এর current animation কে চলতে বাধা প্রদান করে।

নিম্নোক্ত উদাহরণের সাহায্যে stop() method এর একটি ব্যবহার দেখানো হলো যেখানে কোনো parameter ব্যবহার করা হয় নি।

$("#stop").click(function(){
    $("#panel").stop();
});

ফলাফল : stop()

অনুবাদক: ফয়সাল রকি

jQuery-001 । জে কুয়েরি - ০০১

জে- কুয়ারী ইফেক্ট – অ্যানিমেশন : jQuery Animations – The animate() Method

March 29, 2015 Author-Check- Article-or-Video Leave a comment

শউলি

Query animate() method ব্যবহার করে কাস্টম অ্যানিমেশন তৈরী করার পদ্ধতি :

সিনট্যাক্স

$(selector).animate({params},speed,callback);

সিনট্যাক্স এর মধ্যে যে {params}, parameter আছে তাকে যার অ্যানিমেশন তৈরী করতে হবে তার CSS property এর মধ্যে define করতে হবে।

অন্য parameter (speed parameter) টি অপশনাল এবং এটি ব্যাবহার করা হয় ইফেক্ট আর সময়কাল (duration) সেট করার জন্য । "slow", "fast", অথবা মিলি সেকেন্ড এ ও ভ্যালু দেয়া যায়।

অন্য আর অপশনাল একটি parameter callback যা অ্যানিমেশন সমাপ্ত হওয়ার পরে কার্যকর করা হয়।

একটি খুব ছোট উদাহরণ নীচে দেওয়া হলো

$("button").click(function(){
    $("div").animate({left: '250px'});
});

ফলাফল : animate()

jQuery animate() method একাধিক Properties

এর মাধ্যমে একাধিক Properties একই সময়ে animate করা যেতে পারে

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

ফলাফল : একাধিক Properties

এখন প্রশ্ন হতে পারে animate() method দিয়া কি CSS Properties animate করা সম্ভব?

উত্তর প্রায়, হ্যাঁ!

এখন আমরা দেখব কিভাবে animate() মেথড Relative Values ব্যবহার করে |

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

ফলাফল : Relative Values

পূর্ব নির্ধারিত (Pre-defined) Values ব্যবহার করেও animate() method use করা যায়

যেমন নিচের উধাহরণ দেখুন

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
});

ফলাফল : Pre-defined

এবার আমার দেখব কিভাবে Queue Functionality ব্যবহার করে animate() method use করা যায়

যেমন নিচের উধাহরণ দুটি লক্ষ করুন

উধাহরণ 1 .

আপনি যদি একে অপরের পর বিভিন্ন অ্যানিমেশন সম্পাদন করতে চান , তখন Queue Functionality ar সুবিধা গ্রহণ করতে পারেন

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
});

ফলাফল : Queue Functionality

উধাহরণ 2

এটা প্ৰথম এ <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বাড়ায়

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});

ফলাফল : ফন্ট সাইজ

jQuery-001 । জে কুয়েরি - ০০১

jQuery – AJAX এর লোড মেথড । jQuery – AJAX load() Method

March 29, 2015 Author-Check- Article-or-Video

প্রতাব চন্দ্র

জে’কুয়েরি load() মেথড একটি সাধারণ অথচ একটি শক্তিশালী অ্যাজাক্স মেথড।

লোড মেথড ওয়েব সার্ভার থেকে ডাটা বা তথ্য লোড করে এবং নির্দেশ করে দেয়া এলিমেন্টের ভেতর এই ডাটা স্থাপন করে।

সিনট্যাক্স (Syntax)

$(selector).load(URL,data,callback);

যে URL বা লিংক আপনি লোড করতে চান উপরের সিনট্যাক্সের “URL” প্যারামিটার এ সেটি দিতে হবে।

এখানে data প্যারামিটারটি ঐচ্ছিক। এটি কোনো রিকোয়েস্ট এর সাথে পাঠানোর জন্য querystring key/value সেট নির্ধারণ করে দেয়।

এখানে উল্লেখিত callback প্যারামিটারটিও ঐচ্ছিক বা optional । load() মেথড সম্পূর্ণ হবার পর যে ফাংশন কার্যকর (execute) হবে এটি সেই ফাংশনের নাম।

এখানে একটি উদারহণ দেওয়া হলো:

<h2>জে’কুয়েরি এবং অ্যাজাক্স মজার জিনিস!</h2>
<p id="p1">একটি প্যারাগ্রাফের ভিতর এখানে কিছু টেক্সট যোগ করা হয়</p>

নিচের উদাহরণটি "demo_test.txt" এর কনটেন্ট নির্দেশিত একটি <div> এলিমেন্টের ভেতর লোড করবে:

$("#div1").load("demo_test.txt");

ফলাফল : demo_test.txt

উল্লেখ্য, URL প্যারামিটারে jQuery সিলেক্টরও যোগ করা সম্ভব।

নিচের উদাহরণে "demo_test.txt" থেকে id="p1" নির্দেশিত এলিমেন্টের কনটেন্ট নির্ধারিত <div> এলিমেন্টের ভেতর লোড করবে।

$("#div1").load("demo_test.txt #p1");

ফলাফল : URL প্যারামিটারে jQuery সিলেক্টরও যোগ

ঐচ্ছিক callback প্যারামিটার একটি callback ফাংশন নির্দেশ করে যখন load() মেথডটি সম্পূর্ণ হয়। callback ফাংশন একাধিক প্যারামিটার ধারণ করতে পারে। যেমন-

responseTxt –যদি call সফল হয় তবে প্রাপ্ত কনটেন্ট ধারণ করে।
statusTxt - contains the status of the call এর পরিস্থিতি বা status ধারণ করে
xhr - XMLHttpRequest অবজেক্ট ধারণ করে

load() মেথড সম্পূর্ণ হবার পর একটি অ্যালার্ট বক্স প্রদর্শন করার প্রক্রিয়া নিচের উদাহরণে দেখানো হলো। যদি মেথড সফল হয় তাহলে এটি "External content loaded successfully!" বার্তা প্রদর্শন করবে। আর যদি ব্যর্থ হয় তবে error মেসেজ দেখাবে।
উদাহরণ:

$("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

ফলাফল : অ্যালার্ট বক্স প্রদর্শন করার প্রক্রিয়া

jQuery-001 । জে কুয়েরি - ০০১

jQuery – এর মেথড গুলোকে এক এর পর এক ব্যবহার করা । jQuery – Chaining

March 29, 2015 Author-Check- Article-or-Video

Protap Chandra

জে'কুয়েরি (jQuery) চেইনিং (Chaining)

jQuery এর সাহায্যে আপনি অ্যাকশন/মেথডকে একত্রে চেইনিং (Chaining) করতে পারবেন।

চেইনিং এর সুবিধা হলো, এর মাধ্যমে একের অধিক jQuery মেথডকে একটিমাত্র এলিমেন্টের ভিতরে রান করানো যায়।

jQuery মেথড চেইনিং

এখন পযর্ন্ত আমরা একসাথে একটি jQuery স্টেটমেন্ট লেখা শিখেছি (একটির পর অন্যটি)।

তবে চেইনিং নামে একটি কৌশল আছে যেটি একই এলিমেন্টের মধ্যে আমাদের একসাথে একের অধিক jQuery কমান্ড রান করার সুযোগ দেয়। একটির পর আরেকটি, তারপর আরেকটি, এভাবে করা সম্ভব।

পরামর্শ: এর সুবিধা হলো, ইন্টারনেট ব্রাউজারকে একই ধরনের এলিমেন্ট একবারের বেশি খুঁজতে হয়না।

একটি action কে "চেইনি" করার জন্য আপনাকে যা করতে হবে তা হলো "পূর্ববর্তী" action এর সাথে "পরবর্তী" action টি জুড়ে দিতে হবে।

নিচের উদাহরণটি css(), slideUp(), এবং slideDown() মেথডগুলোকে একত্রে চেইনিং করে। এখানে "p1" element প্রথমে লালে রুপান্তরিত হয়। এরপর এটি উপরের দিকে স্লাইডিং করে (Slide up), এবং পরে নিচের দিকে স্লাইডিং করে (Slide down)।

উদাহরণ:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

ফলাফল : চেইনিং

আপনি নিজে ইচ্ছা করলে আরো মেথড জুড়ে দিতে পারেন।

পরামর্শ: যখন চেইনিং করা হচ্ছে তখন কোডের লাইনগুলো যথেষ্ট লম্বা হয়ে যেতে পারে। তবে সিনট্যাক্সের ব্যাপারে jQuery অতটা কড়াকড়ি আরোপ করে না। লাইন ব্রেক (linebreak) কিংবা অবচ্ছেদগুলো (indentations) আপনার নিজের খুশিমতো সাজিয়ে নিতে পারেন।

যেমন নিচের কোডটিও সুন্দরভাবে কাজ করবে:

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

ফলাফল : চেইনিং

jQuery-001 । জে কুয়েরি - ০০১

jQuery – HTML DOM উপদান/element এর আয়তন (প্রস্থ, উচ্চতা )

March 29, 2015 Author-Check- Article-or-Video

Query এর আয়তন নিয়ে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ মেথড আছে:

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

Query আয়তন

jQuery এর width() এবং height() মেথড

width() মেথড একটি এলিমেন্ট এর প্রসস্থতা সেট করে বা ফেরত দেয় (প্যাডিং, সীমানা, বা মার্জিন সহ)।

height() মেথড একটি এলিমেন্ট এর উচ্চতা সেট করে বা ফেরত দেয় (প্যাডিং, সীমানা, বা মার্জিন সহ)।

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ এবং উচ্চতা দেখানো হলঃ

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});

ফলাফল : width() এবং height()

jQuery এর innerWidth () এবং innerHeight () পদ্ধতি

InnerWidth () মেথড একটি এলিমেন্ট এর এর মান (প্যাডিং সহ) ফেরত দেয়/প্রদান করে।

InnerHeight () মেথড একটি এর উচ্চতা এর মান (প্যাডিং সহ) ফেরত দেয়/প্রদান করে।

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর ভেতরের প্রস্থ / উচ্চতা দেখানো হল:

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});

ফলাফল : innerWidth () এবং innerHeight ()

jQuery এর outerWidth () এবং outerHeight () পদ্ধতি

OuterWidth () মেথড একটি উপাদান প্রস্থ নির্দেশ করে (প্যাডিং এবং সীমানা সহ)।

OuterHeight () মেথড একটি উপাদান এর উচ্চতা নির্দেশ করে থাকে (প্যাডিং এবং সীমানা সহ)।

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর বাইরের প্রস্থ / উচ্চতা দেখানো হল:

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});

ফলাফল : outerWidth () এবং outerHeight ()

outerWidth(true) মেথড একটি এলিমেন্ট এর এর প্রস্থ (প্যাডিং, সীমানা, বা মার্জিন সহ) ফেরত দেয়/প্রদান করে।

outerHeight(true) মেথড একটি এলিমেন্ট এর এর উচ্চতা (প্যাডিং, সীমানা, বা মার্জিন সহ) ফেরত দেয়/প্রদান করে।

$("button").click(function(){
    var txt = "";
    txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
    txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
});

ফলাফল : outerWidth(true) মেথড এবং outerHeight(true) মেথড

jQuery এর আরো width() এবং height() পদ্ধতি

নিম্নলিখিত উদাহরণে আমরা (এইচটিএমএল ডকুমেন্ট) এবং উইন্ডো (ব্রাউজার ভিউপোর্ট) প্রস্থ এবং উচ্চতা দেখব:

$("button").click(function(){
    var txt = "";
    txt += "Document width/height: " + $(document).width();
    txt += "x" + $(document).height() + "\n";
    txt += "Window width/height: " + $(window).width();
    txt += "x" + $(window).height();
    alert(txt);
});

ফলাফল : width() এবং height()

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ ও উচ্চতা দেখানো হল:

$("button").click(function(){
    $("#div1").width(500).height(500);
});

ফলাফল : প্রস্থ ও উচ্চতা

jQuery-001 । জে কুয়েরি - ০০১

jQuery – AJAX এর noConflict() মেথড । jQuery – AJAX noConflict() Method

March 29, 2015 Author-Check- Article-or-Video

মাহবুবুর রহমান

jQuery এবং অন্যান্য JavaScript ফ্রেমওয়ার্ক

ইতিমধ্যে আপনি যেনেছেন যে, jQuery তে $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।

বেশকিছু জনপ্রিয় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক আছে, যেমন Angular, Backbone, Ember, Knockout ইত্যাদি।

যদি অন্য কোন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক শর্টকাট হিসেবে $ ব্যবহার করে তাহলে কি ঘটবে?

যদি দুটি আলাদা ফ্রেমওয়ার্ক একই শর্টকাট ব্যবহার করে, তাহলে তাদের যেকোন একটির কাজ বন্ধ হয়ে যেতে পারে ।

ইতিমধ্যেই JQuery টিম এটি সম্পর্কে ভেবেছে, এবং noConflict() মেথড তৈরি করেছে।

JQuery এর noConflict() পদ্ধতি

noConflict() পদ্ধতি, $ শর্টকাট আইডেন্টিফায়ার রেখেই রিলিজ করেছে যাতে অন্য যে কোন স্ক্রিপ্টও এটি ব্যবহার করতে পারেন।

আপনি অবশ্যই এখনও শর্টকার্ট নাম এর পরিবর্তে পূর্ণ নাম ব্যবহার করে jQuery ব্যবহার করতে পারেন।

$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery is still working!");
    });
});

ফলাফল : noConflict() পদ্ধতি

আপনি খুব সহজেই নিজেই নিজের শর্টকাট তৈরি করতে পারেন। noConflict() মেথড jQuery তে একটি রেফারেন্স ফেরত দেয়, যা আপনি পরবর্তীতে ব্যবহারের জন্য ভ্যারিয়েবল হিসেবে সংরক্ষণ করে রাখতে পারেন।

উদাহরণ

var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery is still working!");
    });
});

ফলাফল : শর্টকাট তৈরি

যদি আপনার একটি jQuery code ব্লক থাকে এবং আপনি এটিকে পরিবর্তন করতে না চান, তাহলে আপনি আপনি ready মেথড ব্যবহার করে $ সাইন পারামিটার হিসাবে ব্যবহার করতে পারেন। এটি jQuery এর ফাংশনের ভিতরে $ সাইন ব্যবহারের অনুমতি দেয় - এর বাহিরে আপনাকে jQuery ব্যবহার করতে হবে।

উদাহরণ

$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery is still working!");
    });
});

ফলাফল : ready মেথড

jQuery-001 । জে কুয়েরি - ০০১

jQuery – AJAX এর get() and post() মেথড । jQuery – AJAX get() and post() Methods

March 29, 2015 Author-Check- Article-or-Video

অনুবাদক: ফয়সাল রকি

জেকুয়েরি - এজাক্স get() এবং post() পদ্ধতি ব্যবহার করে HTTP GET বা POST request বা অনুেরাধ-এর মাধ্যমে সার্ভারে data request পাঠানো হয়।

HTTP request: GET বনাম POST

ক্লাইন্ট ও সার্ভারের মধ্যকার request ও response এর জন্য বহুল ব্যবহৃত পদ্ধতি দুটি হলো GET ও POST.

GET: নির্দিষ্ট কোনো resource হতে data request পাঠানো হয়।

POST: নির্দিষ্ট কোনো resource এ data process এর উদ্দেশ্যে পাঠানো হয়।

মূলতঃ সার্ভার হতে কোনো data পুনরুদ্ধার করাই হলো GET এর কাজ। উল্লেখ্য যে, GET এর মাধ্যমে data পুনরুদ্ধারের ক্ষেত্রে অনেক সময় cached data দেখাতে পারে।
POST এর মাধ্যমেও সার্ভার হতে data পুনরুদ্ধার করা যায়। তবে POST এর পদ্ধতির ক্ষেত্রে কখনো cached data দেখায় না এবং প্রায় সময়ই data পাঠানোর ক্ষেত্রে request সহ প্রেরণ করা হয়।

GET ও POST সম্বন্ধে বিস্তারিত জানতে এবং উভয়ের পার্থক্য জানতে "HTTP পদ্ধতি: GET বনাম POST" অধ্যায়টি পড়ুন।

jQuery $.get() পদ্ধতি

এই $.get() পদ্ধতিতে HTTP GET request এর সাথে সার্ভারে data request পাঠানো হয়।
সিনট্যাক্স:

$.get(URL,callback);

required বা প্রয়োজনীয় URL parameter বা URL এর মানদন্ডটি আপনার পাঠানো এর URL request কে নির্দেশ করে।

optional callback parameter টি এমন একটি ফাংশন যা request টি সফল হলে কাজ করে।

নিম্নোক্ত উদাহরণে $.get() পদ্ধতির সাহায্যে সার্ভার হতে একটি ফাইল পুনরুদ্ধার দেখানো হলো।

$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

ফলাফল : $.get() পদ্ধতির সাহায্যে সার্ভার হতে একটি ফাইল পুনরুদ্ধার

$.get() এর প্রথম parameter টি আপনার পাঠানো এর URL request কে নির্দেশ করে ("demo_test.asp").

দ্বিতীয় parameter টি একটি callback ফাংশন। প্রথম callback parameter টি request কৃত page এর content কে নির্দেশ করে এবং দ্বিতীয় callback parameter টি request এর status কে নির্দেশ করে।

টিপ: এখানে ASP file এর একটা উদাহরণ দেয়া হলো ("demo_test.asp")

<%
 response.write("This is some text from an external ASP file.")
 %>

jQuery $.post() পদ্ধতি

$.post() পদ্ধতিতে HTTP POST request এর সাথে সার্ভারে data request পাঠানো হয়।

সিনট্যাক্স

$.post(URL,data,callback);

required বা প্রয়োজনীয় URL parameter বা URL এর মানদন্ডটি আপনার পাঠানো এর URL request কে নির্দেশ করে।

optional data parameter টি নির্দিষ্ট কিছু data কে নির্দেশ করে যা request এর সাথে পাঠানো হয়।

optional callback parameter টি এমন একটি ফাংশন যা request টি সফল হলে কাজ করে।

নিম্নোক্ত উদাহরণে $.post() পদ্ধতির সাহায্যে request এর সাথে নির্দিষ্ট কিছু data পাঠানো দেখানো হলো।

উদাহরণ:

$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

ফলাফল : $.post()

$.post() এর প্রথম parameter টি আপনার পাঠানো URL request কে নির্দেশ করে ("demo_test_post.asp").

অতঃপর আমরা কিছু data (নাম ও শহর) request এর সাথে send করি।

"demo_test_post.asp" এর ASP script parameter গুলোকে read করে, process করে এবং একটি ফলাফল return করে।

তৃতীয় parameter টি একটি callback ফাংশন। প্রথম callback parameter টি request কৃত page এর content কে নির্দেশ করে এবং দ্বিতীয় callback parameter টি request এর status কে নির্দেশ করে।

টিপ: এখানে ASP file এর একটা উদাহরণ দেয়া হলো ("demo_test_post.asp"):

<%
 dim fname,city
 fname=Request.Form("name")
 city=Request.Form("city")
 Response.Write("Dear " & fname & ". ")
 Response.Write("Hope you live well in " & city & ".")
 %>

jQuery-001 । জে কুয়েরি - ০০১

jQuery ইফেক্টস – স্লাইড ইফেক্ট। jQuery Effects – Sliding

March 29, 2015 Author-Check- Article-or-Video Leave a comment

আলামিন মনির

JQuery দিয়ে আপনি বিভিন্ন উপাদানের একটি স্লাইডার প্রভাব তৈরি করতে পারেন.

jQuery এর নিম্নলিখিত স্লাইড পদ্ধতি আছে:

jQuery slideDown()

JQuery এর slideDown () মেথড প্রদর্শন করে।

jQuery slideUp()

JQuery এর slideUp () মেথড প্রদর্শন করে।

jQuery slideToggle()

JQuery এর SlideToggle () মেথড প্রদর্শন করে।

তিনটি পদ্ধতি ধাপে ধাপে নিম্নে আলোচনা করা হলঃ

jQuery এর slidedown () পদ্ধতি

JQuery এর slidedown() মেথড এটি দিয়ে উপাদান নিচের দিকে স্লাইড করে।

Syntax

$(selector).slideDown(speed,callback);

বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি স্লাইডিং সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে slidedown () মেথড দেখানো হল:

$("#flip").click(function(){
    $("#panel").slideDown();
});

ফলাফল : slideDown()

jQuery এর slideUp () পদ্ধতি

JQuery এর slideUp () মেথডটি একটি উপাদানকে উপরের দিকে স্লাইড করে।
Syntax

$(selector).slideUp(speed,callback);

এটাও বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি স্লাইডিং সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে slideUp () মেথড দেখানো হলঃ

$("#flip").click(function(){
    $("#panel").slideUp();
});

ফলাফল : slideUp()

slideToggle () পদ্ধতি

JQuery এর slideToggle () মেথড slidedown () এবং slideUp () পদ্ধতির মধ্যে toggles করে।

যে সকল উপাদানের স্লাইড নিচে slid হয়েছে, slideToggle () তাদের স্লাইড হবে

যে সকল উপাদানের স্লাইড আপ slid হয়েছে, slideToggle () তাদের নিচে স্লাইড হবে.

Syntax

$(selector).slideToggle(speed,callback);

এটাও বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড.
নিম্নলিখিত উদাহরণে slideToggle () মেথড দেখানো হলঃ

$("#flip").click(function(){
    $("#panel").slideToggle();
});

ফলাফল : slideToggle()

jQuery-001 । জে কুয়েরি - ০০১

jQuery ইফেক্টস – জাপ্সা ইফেক্ট । jQuery Effects – Fading

March 29, 2015 Author-Check- Article-or-Video

আলামিন মনির

jQuery এর ফেইড পদ্ধতি নিম্নে দেয়া হলঃ

JQuery দিয়ে আপনি একটি লেখাকে দৃশ্যমানতা এবং এই উপাদানটি আউট/বিবর্ণ করতে পারেন।

jQuery এর নিম্নলিখিত বিবর্ণ পদ্ধতি আছে:

fadeIn()

JQuery এর FadeIn () মেথড প্রদর্শন করে।

jQuery fadeOut()

JQuery এর Fadeout () মেথড প্রদর্শন করে।

jQuery fadeToggle()

JQuery এর fadeToggle () মেথড প্রদর্শন করে।

jQuery fadeTo()

JQuery এর fadeTo () মেথড প্রদর্শন করে।

jQuery এর FadeIn () পদ্ধতি

JQuery তে FadeIn () মেথডটি লুকানো উপাদান দেখতে ব্যবহার করা হয়।

Syntax

$(selector).fadeIn(speed,callback);

আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে FadeIn () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

ফলাফল : fadeIn()

jQuery এর fadeout () পদ্ধতি

JQuery এর fadeout () মেথড দিয়ে একটি দৃশ্যমান উপাদানকে আউট করতে ব্যবহার করা হয়।

Syntax

$(selector).fadeOut(speed,callback);

এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeout () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

ফলাফল : fadeOut()

jQuery এর fadeToggle () পদ্ধতি

JQuery এর fadeToggle () মেথড হচ্ছে FadeIn () এবং fadeout () পদ্ধতির মধ্যে পার্থক্য।

উপাদান কে হাইড করে দেয়,এবং fadeToggle () তাদের আবার বিবর্ণ করে দেয়।

উপাদান কে হাইড করে দেয় এবং fadeToggle () তাদের আবার দৃশ্যমান করে দেয়।

Syntax

$(selector).fadeToggle(speed,callback);

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeToggle () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

ফলাফল : fadeToggle()

jQuery এর fadeTo () পদ্ধতি

JQuery এর fadeTo () মেথড (0 এবং 1 এর মধ্যে মান) একটি প্রদত্ত অস্বচ্ছতা ফেইড দেখাতে পারবেন।

Syntax

$(selector).fadeTo(speed,opacity,callback);

FadeTo () মেথড প্রয়োজন অস্বচ্ছতা করতে প্যারামিটারের মান দিয়ে দিতে পারবেন। অস্বচ্ছতা ফেইড নির্দিষ্ট (0 মধ্যে মান 1) এর মধ্যে।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeTo () মেথড দেখানো হলঃ

$("button").click(function(){
     $("#div1").fadeTo("slow", 0.15);
     $("#div2").fadeTo("slow", 0.4);
     $("#div3").fadeTo("slow", 0.7);
 });

ফলাফল : fadeTo()

এইচ টি এম এল - ০০২ । HTML - 002

এইচটিএমএল অনুচ্ছেদ. HTML Paragraphs

March 29, 2015 Author-Check- Article-or-Video

Paste the translated text here
এইচটিএমএল অনুচ্ছেদ
________________________________________
এইচটিএমএল তথ্য গুলো অনুচ্ছেদ আকারে দেয়া হয়
________________________________________
এইচটিএমএল অনুচ্ছেদ
এইচটিএমএল <p> উপাদান গুলকে অনুচ্ছেদ বলে ।
উদাহরন
<p> এটা একটা অনুচ্ছেদ </p>
<p> এটা আরেকটা অনুচ্ছেদ </p>
ব্রাউজার সয়ংক্রিয় ভাবে শূন্য যাইগা যোগ করে দিবে অনুচ্ছেদ এর আগে ও পরেএইচটিএমএল দেখুন
আপনি নিশ্চিত হতে পারবেন না কিভাবে এইচটিএমএল অনুচ্ছেদ দেখান হবে ।
ছোট অথবা বড় পর্দা এবং আকার পরিবর্তন করা উইন্ডোজ গুলো আলাদা আলাদা দেখাবে ।
এইচটিএমএল দিয়ে আপনি বাইরের জিনিস পরিবর্তন করতে পারবেন না, অথবা অতিরিক্ত ফাকা যাইগা অথবা বেশি সারি রেখে এইচটিএমএল সুত্র এর মাধ্যমে ।
আপনার ব্রাউজার টি পেজ দেখানোর সময় অতিরিক্ত ফাকা জাইগা অথবা সারি মুছে ফেলবে ।
যেকোনো ফাকা জাইগা অথবা ফাকা সারি একটা ফাকা জাইগা হিসেবে ধরা হবে ।
উদাহরন
<p>
এই অনুচ্ছেদটাতে অনেক ফাকা জাইগা আছে কিন্তু ব্রাউজার সেটা গণ্য করবে না

</p>

<p>
এই অনুচ্ছেদটাতে অনেক ফাকা জাইগা আছে কিন্তু ব্রাউজার সেটা গণ্য করবে না

________________________________________
কখনোই শেষ এ ট্যাগ যুক্ত করতে ভুলবেন না ।
অধিকাংশ ব্রাউজারই এইচটিএমএল সঠিকভাবে দেখাবে যদিও আপনি শেষে ট্যাগ যুক্ত করতে ভুলে গিয়ে থাকেন ।
উদাহরন
<p> এটি একটি উদাহরন
<p> এটা আরেকটা উদাহরনTry it Yourself »
উদাহরন গুলো মোটামুটি সবগুল ব্রাউজার এই কাজ করবে কিন্তু এর উপর নির্ভরশীল হওয়া যাবে না ।
শেষে ট্যাগ যুক্ত করতে ভুলে গেলে অনাকাঙ্ক্ষিত ভুল ফলাফল দেখাবে ।
এইচটিএমএল এর উন্নত ভার্সন গুলো যেমন একসএইচটিএমএল আপনাকে শেষে ট্যাগ যুক্ত না করা গ্রহন করবে না ।

এইচটিএমএল লাইন ভাঙা
এইচটিএমএল <br> গুলকে লাইন ভাঙা বলে ।
<br> ব্যাবহার করুন যদি আপনি লাইন ভাঙতে চান নতুন অনুচ্ছেদ শুরু না করেই ।
উদাহরন
<p>This is<br>a para<br>graph with line breaks</p>
নিজে চেষ্টা করুণ
<br> এই উপাদানটি এইচটিএমএল শূন্য উপাদান । এখানে কোন ট্যাগ নেই ।
________________________________________

কবিতার সমস্যা
উদাহরন
<p> এই কবিতাটি এক সারিতে দেখাবে </p>

<p>

বনি সাগরে শুয়ে থাকে
বনি নদিতে শুয়ে থাকে
বনি সাগরে শুয়ে থাকে
ওহ বনিকে আমার কাছে এনে দাও

</p>

নিজে চেষ্টা করুন
________________________________________
এইচটিএমএল <pre> উপাত্ত
এইচটিএমএল <pre> উপাত্ত গুলো আগে থেকে ঠিক করা লেখা বোঝায় যেখানে সঠিক ফাকা যাইগা ও সারি আছে ।
যে কোন কিছু দেখাতে হলে , সঠিক ফাকা যাইগা ও লাইন ভাঙ্গার আপনাকে লেখাটিকে মুড়ে ফেলতে হবে <pre> ।
উদাহরন
<p> এটা কবিতার মত দেখাবে </p>

<pre>

</pre> নিজে চেষ্টা করুন
________________________________________
আপনার অভিজ্ঞতা থেকে যাচাই করুন
অভিজ্ঞতা ১ অভিজ্ঞতা ২ অভিজ্ঞতা ৩
________________________________________
এইচটিএমএল ট্যাগ এর সুত্র
W3Schools' ট্যাগ সুত্র এইচটিএমএল নিয়ে অতিরিক্ত তথ্য আরোপ করে

ট্যাগ বর্ণনা
<p>
অনুচ্ছেদ কে বোঝায়
<br>
একটি লাইন ভাঙা বোঝায়
<pre>
আগে থেকে করা লেখা বোঝায়

এইচ টি এম এল - ০০২ । HTML - 002

এইচটিএমএল এর ভিত্তি এর উদাহরন

March 29, 2015 Author-Check- Article-or-Video

Paste the translated text here
এইচটিএমএল এর ভিত্তি এর উদাহরন
ভয় পাবার কারন নেই যদি এই উদাহরন গুলো আপনি না শিখে থাকেন । আপনি পরবর্তী অধ্যায় এ শিখতে পারবেন ।
________________________________________
এইচটিএমএল উপাত্ত
সকল এইচটিএমএল দলিল একটি ঘোষণা দিয়ে শুরু হবে <!DOCTYPE html>.
এইচটিএমএল দলিল নিজে নিজেই এটা দিয়ে শুরু হয় <html> এবং শেষ হয় </html>.
এইচটিএমএল এর দৃশ্যমান অংশ গুলো <body> and </body> এর মধ্যে হয় ।
উদাহরন
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Try it Yourself »

________________________________________
এইচটিএমএল শিরনাম
এইচটিএমএল শিরোনাম <h1> থেকে <h6> পর্যন্ত যুক্ত করে সংজ্ঞায়িত করা হয় ।
উদাহরন
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Try it Yourself »

________________________________________
এইচটিএমএল অনুচ্ছেদ
HTML অনুচ্ছেদ এভাবে দেখান হয় <p> ।
উদাহরন
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Try it Yourself »

________________________________________
এইচটিএমএল লিংক
এইচটিএমএল লিংক গুলো এভাবে দেখান হয় <a>
উদাহরন
<a href="http://bangla.salearningschool.com">This is a link</a>

Try it Yourself »
লিংক ঠিকানা টি এভাবে আরোপ করা হয় href ।
এইচটিএমএল এর তথ্যগুলো অতিরিক্ত তথ্য দেবার জন্য ব্যাবহার করা হয় ।
________________________________________
এইচটিএমএল ছবি
এইচটিএমএল ছবি গুলো এভাবে যুক্ত করে দেখান হয় <img>
উৎস ফাইল গুলো (src), বিকল্প লেখা (alt), এবং আকার (লম্বা এবং আড়াআড়ি) এভাবে আরোপ করা হয়
উদাহরন
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

এইচ টি এম এল - ০০২ । HTML - 002

এইচটিএমএল কি? HTML Document Example

March 29, 2015 Author-Check- Article-or-Video

Paste the translated text here
প্রথম পেইজঃ
এইচটিএমএল কি?
উওর: এইচটিএমএল ডকুমেন্ট (ওয়েব পেজ) বর্ণনা জন্য একটি মার্কআপ ভাষা.
এইচটিএমএল ল্যাঙ্গুয়েজ অনেক গুলো টেক্সট এর মার্কআপ করা।
কিছু মার্কআপ ট্যাগ এর সমন্বয়ে এইচটিএমএল ট্যাগ গুলো গঠিত।
এইচটিএমএল ডকুমেন্ট এইচটিএমএল ট্যাগ দ্বারা বর্ননা করা হয়।
প্রতিটি এইচটিএমএল ট্যাগ বিভিন্ন ডকুমেন্টের বিষয়বস্তু বর্ণনা করে থাকে।
যেমনঃ
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>
এখানে লক্ষ করলে দেখা যে, প্রথমে <html> দিয়ে শুরু হয়েছে এবং শেষে </html> দিয়ে ডকুমেন্ট শেষ করা হয়েছে। এরকম প্রতিটি ট্যাগের শুরু এবং শেষ করতে হবে। এখানে এক একটি ট্যাগের এক এক ধরনের কাজ। যেমনঃ ওয়েবপেজে টাইটেল দিতে <title>Page Title</title> এই ট্যাগটি ব্যবহার করা হয়। <body>………</body> এই ট্যাগটির মাঝে সব রকম ট্যাগ ব্যবহার করা হয়। এই ট্যাগটির নাম বডি ট্যাগ।
যেমনঃ
<title>Page Title</title>
উপরের এটি একটি এইচটিএমএল ট্যাগ। যা দ্বারা আপনার এইচটিএমএল ডকুমেন্ট এর টাইটেল নির্দেশ করে। এটিকে টাইটেল ট্যাগ বলে। এমন অনেক এইচটিএমএল ট্যাগ রয়েছে।
যেমনঃ
<head>
<title>Page Title</title>
</head>
এখানে দুটি ট্যাগ ব্যবহার করা হয়েছে। একটি হেড ট্যাগ অন্যটি টাইটেল ট্যাগ।
<h1>My First Heading</h1>
h1, h2, h3, h4, h5, h6 এমন ছয়টি ট্যাগ আছে। যেগুলো দিয়ে লেখাকে বড় করা হয়ে থাকে। সবচেয়ে বড় h1 ট্যাগ। এবং সবচেয়ে ছোট h6 ট্যাগ।
<p>My first paragraph.</p>
এখানে যে ট্যাগটি ব্যবহার করা হয়েছে তাকে বলা হয় পি ট্যাগ। এর কাজ হল আপনার লেখাকে প্যারা করে সাজানো।
এখানে একটি কথা অবশ্যই মনে রাখতে হবে যে, প্রতিটি ট্যাগের শুরু এবং শেষ করতে হবে। এছাড়াও অন্য একটি ট্যাগ আছে যাকে ওপেন ট্যাগ বলে।
যেমনঃ <link />, <img />, <hr /> ইত্যাদি। এগুলোকে ওপেন ট্যাগ বলে।
দ্বিতীয় পেইজঃ
আপনি যে কোন টেক্স এডিটর ব্যবহার করতে পারেন। এক্ষেত্রে বিভিন্ন এডিটর ব্যবহার করা হয়ে থাকে। যেমনঃ Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor ইত্যাদি। এসব সফটওয়ার গুলো খুব ভাল মানের কাজের জন্য ব্যবহার করা হয়ে থাকে।
যাইহোক আমরা খুব সহজে আমার পিসি থেকে Notepad (PC) এটি ওপেন করে নিব।
আমরা বিশ্বাস করি একটি সহজ টেক্সট এডিটর ব্যবহার করে এইচটিএমএল শিখা একটি ভালো উপায়।
নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করার জন্য নীচের চারটি ধাপ অনুসরণ করুন.
ধাপ-১: আপানার নোটপ্যাডটি ওপেন করুন। স্টার্ট ক্লিক করুন>তার পর অল প্রোগ্রাম সিলেক্ট করুন>তারপর এক্সেসরিজ সিলেক্ট করুন>তারপর নোটপ্যাড সিলেক্ট করুন।
ধাপ-২: কিছু এইচটিএমএল ট্যাগ লিখুন। যেমনঃ <!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
ধাপ-৩: ফাইলটি আপনার কম্পিউটারের একটি নির্দিষ্ট ফোল্ডারে সেইভ করুন। ক্লিক ফাইল>তারপর সেইভএস এ ক্লিক করুন। এখানে অবশ্যই ফাইল নেইম “file_name.html” এক্সটেনশন ব্যবহার করতে হবে। অন্যথায় কিন্তু আপনার ব্রাউজার ফাইলটি রিট করতে পারবে না।
ধাপ-৪: এবার আপনার ফাইলটি ওপেন করুন যে কোন একটি ব্রাউজারে। তখন আপনি দেখতে পাবেন যা যা লিখেছেন সব ব্রাউজারে দেখা যাবে।

এইচ টি এম এল - ০০২ । HTML - 002

HTML এর সম্পাদনা : IDE for HTML

March 29, 2015 Author-Check- Article-or-Video

HTML এর সম্পাদনা

নোটপ্যাড বা TextEdit ব্যবহার করে HTML লিখা
নিচে উল্লেখিত একটি পেশাদারী HTML এডিটর ব্যবহার করে HTML সম্পাদনা করা যেতে পারে:
* অ্যাডোবি Dreamweaver
* মাইক্রোসফট এক্সপ্রেশন ওয়েব
* CoffeeCup এইচটিএমএল এডিটর
তবে, এইচটিএমএল শেখার জন্য আমরা নোটপ্যাড (পিসি) বা TextEdit (ম্যাক) মত একটি টেক্সট এডিটর সুপারিশ করব।

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

নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করার জন্য নীচের 4 ধাপ অনুসরণ করুন:

ধাপ 1: নোটপ্যাড ওপেন করুন
উইন্ডোজ 7 বা তার আগের নোটপ্যাড খোলা :
স্টার্ট মেনুতে ক্লিক করুন (পর্দা নিচে বামে) অল প্রগ্রামসে ক্লিক করুন. এ্যাক্সেসরিসে ক্লিক করুন. নোটপ্যাডে ক্লিক করুন.
Windows 8 বা পরে নোটপ্যাড খোলা:
স্টার্ট স্ক্রিন খুলুন (আপনার পর্দায় বামে নীচে উইন্ডো প্রতীক). নোটপ্যাড টাইপ করুন.

ধাপ 2: কিছু এইচটিএমএল লিখুন
নোটপ্যাড মধ্যে কিছু এইচটিএমএল লিখুন বা কপি করুন.
উদাহরণ:
< ! DOCTYPE html>

আমার প্রথম শীর্ষক

আমার প্রথম অনুচ্ছেদ.

নোটপ্যাড ধাপ 3: এইচটিএমএল সংরক্ষণ করুন
আপনার কম্পিউটারে ফাইল সংরক্ষণ করুন.
ফাইল নির্বাচন করুন >নোটপ্যাড মেনু হিসাবে সংরক্ষণ করুন .
আপনি ফাইল এক্সটেনশন হিসাবে .HTM বা .এইচটিএমএল ব্যবহার করতে পারেন. কোন পার্থক্য নাই, এটি আপনার উপরে।
ধাপ 4: আপনার ব্রাউজারে এইচটিএমএল পেজ দেখুন।
আপনার সংরক্ষিত HTML ফাইল ডাবল ক্লিক করুন, এবং এর ফলে নিচের মত দেখতে হবে।
ব্রাউজারে দেখুন

এইচ টি এম এল - ০০২ । HTML - 002

জেনে নিন HTML 5 (এইচটিএমএল ৫) এর খুঁটিনাটি : Some details on HTML5

March 29, 2015 Author-Check- Article-or-Video

জেনে নিন HTML 5 (এইচটিএমএল ৫) এর খুঁটিনাটি

আজ আমি HTML 5 (এইচটিএমএল ৫)- এর খুঁটিনাটি নিয়ে আলোচনা করব । যারা HTML (এইচটিএমএল)- সম্পর্কে অথবা HTML 5 (এইচটিএমএল ৫)- সম্পর্কে জানেন না বা কিছু জানেন; আশা করি তারা এ সম্পর্কে মোটামোটি ধারণা নিতে পারবেন অর্থাৎ তাদের জন্য টিউনটি কিছুটা হলেও উপকারে আসতে পারে

HTML (এইচটিএমএল) কি ?
নতুনদের মনে প্রশ্ন জাগতে পারে যে, HTML (এইচটিএমএল) আবার কি ? যা অনেকের মুখে শুনা যায় ! তাদের উদ্দেশে আমি বলছি; HTML (এইচটিএমএল) হল এক প্রকার Markup Language (মার্কআপ ল্যাঙ্গুয়েজ), অর্থাৎ এটির মাধ্যমে কোন একটি ওয়েব পেইজের Markup (মার্কআপ) তথা মূল কাঠামো গঠন করা হয় । যার পূর্ণ নাম হচ্ছে Hyper Text Markup Language (হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ) ।

তাছাড়া HTML (এইচটিএমএল) কত গুলো ট্যাগের সমন্বয়ে গঠিত, যা কোন ওয়েব পেইজের Markup (মার্কআপ) তথা কাঠামো গঠন করে, আর এই Markup (মার্কআপ) ট্যাগ এর কাজ হল কোন ওয়েব পেইজের বিভিন্ন ইলিমেন্ট কিভাবে প্রদর্শিত হবে তা নির্দেশ করা । একটি ওয়েব পেইজের ইলিমেন্ট যথাক্রমেঃ টেক্সট, ইমেজ, অডিও, ভিডিও ইত্যাদি ।

HTML (এইচটিএমএল) আমাদের কেন প্রয়োজন ?
একটি ওয়েব পেইজ বা কোন একটি ওয়েব সাইট তৈরি করতে HTML (এইচটিএমএল)- এর গুরুত্ব অপরিসীম । কেননা; যেহেতু HTML (এইচটিএমএল) কোন একটি ওয়েব পেইজের Markup (মার্কআপ) অর্থাৎ মূল কাঠামো গঠন করে, সেহেতু কোন ওয়েব পেইজ ডিজাইন করতে অথবা ওয়েবসাইট তৈরি করতে HTML (এইচটিএমএল) এর বিকল্প কিছু নেই ।

HTML (এইচটিএমএল) এর ইতিহাস
বহুল ব্যবহারিত আজকের এই HTML (এইচটিএমএল) আমাদের নিকট আপনা-আপনি চলে আসে নাই এটির পেছনেও রয়েছে এক বিশাল ইতিহাস, HTML (এইচটিএমএল) এর সৃষ্টি কর্তা হলেন- ইউরোপীয় বিজ্ঞানী স্যার টিম বার্নাস লী ।

তিনি ১৯৮০ সালে CERN এ একজন বিশেষজ্ঞ থাকাকালীন CERN গবেষকদের মাঝে তথ্য শেয়ারের জন্য ENQUIRE Prototyped নামে একটি System এর প্রস্তাব দেন ।

তারপর, ১৯৮৯ সালে স্যার টিম বার্নাস লী ইন্টারনেট ভিত্তিক একটি Hyper Text (হাইপার টেক্সট) সিস্টেম প্রস্তাবে একটি মেমো লিখেন । এবং ১৯৯০ সালে স্যার টিম বার্নাস লী ব্রাউজারের ও সার্ভারের সফটওয়্যারের HTML (এইচটিএমএল) উল্লেখ্য করেন । তারপর এই বছরেই স্যার টিম বার্নাস লী ও CERN এর তথ্য ইঞ্জিনিয়ার Robert Cailliau যৌথ ভাবে CERN কে এ প্রকল্পের জন্য অর্থায়নের অনুরোধ করেন কিন্তু প্রকল্পটি আনুষ্ঠানিক ভাবে CERN দ্বারা গৃহীত হয়নি । তবে HTML (এইচটিএমএল) পরিচিতি লাভ করে একই সালে NCSA কর্তৃক ডেভেলপকৃত মোজাইক ব্রাউজারের মাধ্যমে ।

তাছাড়া স্যার টিম বার্নাস লী অলাভজন জনসেবামূলক প্রতিষ্ঠান ওয়ার্ল্ড ওয়াইড ওয়েব এর তত্ত্বাবধায়ক ওয়ার্ল্ড ওয়াইড ওয়েব কনসোটিয়াম (W3C) এর ডিরেক্টর । ওয়ার্ল্ড ওয়াইড ওয়েব কনসোটিয়াম কর্তৃক ডেভেলপকৃত HTML 3.2 প্রকাশিত হয় ১৯৯৭ সালের জানয়ারিতে ও একই সনের শেষের দিকে প্রকাশ হয় HTML 4.2 এবং HTML (এইচটিএমএল) এর সর্বশেষ সংস্করণ তথা HTML 5 প্রকাশিত হয় ২০১০ সালে ।

HTML 5 (এইচটিএমএল ৫) কি ?
HTML 5 (এইচটিএমএল ৫) হচ্ছে HTML (এইচটিএমএল) এর সর্বশেষ সংস্করণ । যা ২০১০ সালে প্রকাশিত হয় এবং এখন পর্যন্ত পরবর্তী কোন সংস্করণ আসে নি ।

HTML 5 (এইচটিএমএল ৫) এ নতুন কিছু বৈশিষ্ট্যঃ
০১. মিডিয়া প্লেব্যাকের জন্য

০৩. স্থানীয় সংগ্রহস্থলের জন্য সমর্থন ।

০৪. নতুন ফর্ম নিয়ন্ত্রণ, যেমন ক্যালেন্ডার, তারিখ, সময়, ই-মেইল, অনুসন্ধান, ইউআরএল ইত্যাদি ।

০৫. নতুন নির্দিষ্ট বিষয়বস্তুর উপাদান, যেমনঃ

HTML 5 (এইচটিএমএল ৫) এর কিছু নিয়মঃ
০১. উন্নত ত্রুটি পরিচালনার ব্যবস্থা থাকতে হবে ।

০২. নতুন বৈশিষ্ট গুলো এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্টের উপর ভিত্তি করে তৈরি করা।

০৩. একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা ।

০৪. আলাদা প্লাগিনের ব্যবহার কমাতে হবে (যেমন: ফ্ল্যাশ) ।

০৫. HTML 5 (এইচটিএমএল ৫) এর স্বাধীন ডিভাইস হতে হবে ।

০৬. উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে ।

HTML 5 (এইচটিএমএল ৫) এর জন্য ব্রাউজার সাপোর্টঃ
HTML 5 (এইচটিএমএল ৫) এখনও অফিসিয়ালি প্রকাশিত হয় নি, তাছাড়া কোন ব্রাউজারে HTML 5 (এইচটিএমএল ৫) এর পূর্ণ সমর্থন আসে নাই । তবে প্রতিনিয়ত ব্রাউজারগুলোতে নতুন নতুন উপাদান যুক্ত করা হচ্ছে ।

এইচ টি এম এল - ০০২ । HTML - 002

HTML দ্বারা কিভাবে ডকুমেন্টসকে প্যারাগ্রাফ আকারে লেখা যায় । HTML and Paragraph

March 29, 2015 Author-Check- Article-or-Video

HTML দ্বারা কিভাবে ডকুমেন্টসকে প্যারাগ্রাফ আকারে লেখা যায় । লেখকঃ মোস্তাফিজুর ফিরোজ ।

আজ আমি আপনাদের সামনে আলোচনা করবো HTML দ্বারা কিভাবে ডকুমেন্টসকে প্যারাগ্রাফ আকারে লেখা যায় ।

HTML প্যারাগ্রাফঃ
HLML <p> দ্বারা সাধারণত কোনো প্যারাগ্রাফ নির্দেশ করা হয় ।

উদাহরণ হিসেবে আমরা দেখাতে পারিঃ
<p>এটা একটা প্যারাগ্রাফ</p>
<p>এটা আরেকটা প্যারাগ্রাফ</p>

এভাবে লিখে চেষ্টা করুন ।

HTML ডিসপ্লেঃ
আমরা সাধারণত বুঝতে পারিনা HTML কিভাবে দেখাচ্ছে ।
বড় অথবা ছোট স্ক্রীন এবং মানানসই স্ক্রীনে ডিফারেন্ট ফলাফল দেখায় ।
HTML এ আপনি অতিরিক্ত ফাঁকা অথবা অতিরিক্ত লাইন যোগ করে আপনি আউটপুট পরিবর্তন করতে পারবেন না ।
কারণ, ব্রাউজার অতিরিক্ত ফাঁকা অথবা অতিরিক্ত লাইন বাদ দিয়ে আপনাকে ফলাফল দেখিয়ে থাকে । অতিরিক্ত ফাঁকা অথবা অতিরিক্ত লাইন কে ব্রাউজার একটি মাত্র স্পেস হিসেবে দেখায় ।

উদাহরণ হিসেবে আমরা দেখাতে পারি নিম্নরূপেঃ

Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

উপরের দুইটি উদাহরণ লিখে দেখবেন ফলাফল একই দেখাবে । তাই স্পেস অথবা লাইন বেশি দিয়েও লাভ নেই ।
আর হ্যা, এখানে </p> হলো HTML এর শেষ ট্যাগ । এটা দিতে একদম ভুলে গেলে চলবে না কিন্তু ।

HTML লাইন ব্রেক এর ব্যবহারঃ
<br> দিয়ে একটা লাইন ব্রেক বুঝানো হয় ।
উদাহরণ হিসেবে বলতে পারিঃ
<p>This is<br>a para<br>graph with line breaks</p>

এভাবে আপনি HTML লাইন ব্রেক দিতে পারলেন । কিন্তু কবিতা লেখার সময় আপনাকে কিন্তু এভাবে লিখলে হবে না । তখন আপনাকে <pre> ট্যাগ ব্যবহার করতে হবে ।
উদাহরণ হিসেবে দেখাতে পারিঃ

<p>This will display as a poem:</p>

<pre>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

একটা কবিতা লিখে এভাবে HTML এর ভাষায় লিখেই দেখেন না ।

এভাবে আপনি HTML লিখে প্রাকটিস করতে থাকুন। আর আপনি এটা নোটপ্যাড প্লাস দিয়ে লিখে .html ফরমেটে সেভ করে আপনার ব্রাউজার দিয়ে ওপেন করে দেখতে পারেন কেমন হল । আর না বুঝলে আমি তো আছিই ।

এইচ টি এম এল - ০০২ । HTML - 002

HTML 5 এর উপর প্রাথমিক আলোচনা । Overview on HTML 5

March 29, 2015 Author-Check- Article-or-Video

HTML 5 এর উপর প্রাথমিক আলোচনা । Overview on HTML 5

এইচ টি এম এল - ০০২ । HTML - 002

HTML এর tag সমূহ : HTML Tags

March 29, 2015 Author-Check- Article-or-Video

HTML এর tag সমূহ
নামঃ সাদিক
TAG ব্যবহার ধরন
 মন্তব্য করার জন্য STF
<!DOCTYPE> Html ডকুমেন্টের ধরন নির্ধারনের জন্য STF
<a> লিংক দেওয়ার জন্য STF
<abbr> Abbreviation দেওয়ার জন্য STF
<acronym> Acronym দেওয়ার জন্য STF
<address> Html ডকুমেন্টের লেখক এর তথ্য দেওয়ার জন্য STF
<applet> Applet এম্বেড করার জন্য TF
<area/> Image-map এরিয়া করার জন্য STF
<b> লেখা bold করার জন্য STF
<base/> Specific the basic url/target for all
relative urls in a documant STF
<basefont> ফন্ট সাইজ ও কালার নির্ধারন করার জন্য TF
<bdo> Overrides the current text direction STF
<big> বড় লেখার জন্য TF
<blockquote> উক্তি /quotation দেওয়ার জন্য STF
<body> বডি দেওয়ার জন্য STF
<br/> লাইন ব্রেক করার জন্য STF
<button> বাটন আনার জন্য STF
<caption> ক্যপশন দেওয়ার জন্য STF
<center> লেখা মাঝখানে নেওয়ার জন্য TF
<cite> Defines a citation STF
<code> কোড শো করার জন্য STF
<coi/> টেবিলের মধ্যে কলাম নেয়ার জন্য STF
<colgroup> Spucifies a group of one or more
columns in a table for formating STF
<dd> Defines a description of an
item in a definition list STF
<del> কোন লেখা মুছার জন্য STF
<dfn> Defines a definition term STF
<dir> ডাইরেক্টরি লিস্ট আনার জন্য TF
<div> Defines a section in a document STF
<dl> Defines a definition list STF
<dt> Defines a term(an item) in a definition list STF

JavaScript, JavaScript Frameworks

জাভাস্ক্রিপ্ট ডেটা টাইপ (JavaScript Data Types)

March 28, 2015 Sayed

জাভাস্ক্রিপ্ট ডেটা টাইপ (JavaScript Data Types)

লিখেছেনঃ মোহাম্মাদ আমিরুল ইসলাম (আরিফ)

ওয়েব ডিজাইনার অ্যান্ড ডেভেলপার

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

জাভাস্ক্রিপ্টে ডেটা টাইপ একটি গুরুত্বপূর্ণ বিষয়।

জাভাস্ক্রিপ্ট এর ডেটা টাইপ গুলো হলঃ (String, Number, Boolean, Array, Object.) স্ট্রিং, নাম্বার, বুলিয়ান, অ্যারে, অবজেক্ট । জাভাস্ক্রিপ্ট প্রোগ্রামিং করতে এই টাইপগুলো ব্যবহার করা হয়ে থাকে ।

যেমনঃ

var lastName = "Johnson";

উপরের জাভাস্ক্রিপ্টটি একটি স্ট্রিং টাইপ জাভাস্ক্রিপ্ট ।

var length = 16;

উপরের জাভাস্ক্রিপ্টটি একটি নাম্বার টাইপ জাভাস্ক্রিপ্ট ।

var cars = ["Saab", "Volvo", "BMW"];

উপরের জাভাস্ক্রিপ্টটি একটি অ্যারে টাইপ জাভাস্ক্রিপ্ট ।

var x = {firstName:"John", lastName:"Doe"};

উপরের জাভাস্ক্রিপ্টটি একটি অবজেক্ট টাইপ জাভাস্ক্রিপ্ট ।

জাভাস্ক্রিপ্ট স্ট্রিং (JavaScript String)

জাভাস্ক্রিপ্ট স্ট্রিংগুলো সাধারণত কয়কটি অক্ষররে সমষ্টি হয়ে থাকে । যেমনঃ “kamal”

স্ট্রিং গুলো single quotes ‘’ অথবা double quotes “” এর ভিতর ব্যবহার হয়ে থাকে ।

যেমনঃ

var carName = " kamal"; [ এখানে double quotes “” ব্যবহার হয়েছে ]
var carName = ' kamal'; [ এখানে single quotes ‘’ ব্যবহার হয়েছে ]

আপনি স্ট্রিং এর ভিতরে quotes ব্যবহার করতে পারেন ।

যেমনঃ

var answer = "It's alright";                    [double quotes “” এর ভিতর single quote ‘’]
var answer = "He is called 'Johnny'";     [double quotes “” এর ভিতর single quotes ‘’]
var answer = 'He is called "Johnny"';    [single quotes ‘’ এর ভিতর double quotes “”]

কোড গুলো নিজে প্রয়োগ করুনঃ

DOCTYPE html>

<html>

<body>

var carName1 = "Volvo XC60";

var carName2 = 'Volvo XC60';

var answer1 = "It's alright";

var answer2 = "He is called 'Johnny'";

var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =

carName1 + "
" +

carName2 + "
" +

answer1 + "
" +

answer2 + "
" +

answer3;

</script>

</body>

</html>

জাভাস্ক্রিপ্ট নাম্বার (JavaScript Numbers)

জাভাস্ক্রিপ্টটে শুধু মাত্র এক প্রকারের নাম্বার আছে । নাম্বারগুলো ডেসিম্যাল এবং ডেসিম্যাল ছাড়াও লেখা হতে পারে ।

যেমনঃ

var x1 = 34.00; [ডেসিম্যাল দিয়ে লেখা]
var x2 = 34; [ডেসিম্যাল ছাড়া লেখা]

অতিরিক্ত বড় অথবা অতিরিক্ত ছোট নাম্বার গুলো e দ্বারা লেখা হয় ।

যেমনঃ

var y = 123e5; [ এখানে 123e5;=12300000 হবে]
var z = 123e-5; [এখানে 123e-5;= 0.00123 হবে]

নির্দিষ্ট নাম্বার এর পরে e5 দিলে অই নাম্বার এর পরে পাঁচটি ০ যোগ হবে আর e-5 দিলে অযুত এর আগে পয়েন্ট হবে ।

কোড গুলো নিজে প্রয়োগ করুনঃ

DOCTYPE html>

<html>

<body>

var x1 = 34.00;

var x2 = 34;

var y = 123e5;

var z = 123e-5;

document.getElementById("demo").innerHTML = x1 + "
" + x2 + "
" + y + "
" + z

</script>

</body>

</html>

জাভাস্ক্রিপ্ট বুলিয়ান (JavaScript Booleans)

বুলিয়ান এর শুধু দুইটি মান আছে । সত্য ও মিথ্যা ।

যেমনঃ

var x = true;
var y = false;

জাভাস্ক্রিপ্ট অ্যারে (JavaScript Arrays)

জাভাস্ক্রিপ্ট অ্যারে গুলো তৃতীয় বন্ধনী দ্বারা লেখা হয়। জাভাস্ক্রিপ্ট অ্যারে আইটেম গুলো কমা দ্বারা আলাদা করা হয় ।

কোড গুলো দেখতে এরকম হয়ঃ

var cars = ["Saab", "Volvo", "BMW"];

জাভাস্ক্রিপ্ট অবজেক্ট [JavaScript Objects]

জাভাস্ক্রিপ্ট অবজেক্ট গুলো দ্বিতীয় বন্ধনী দ্বারা লেখা হয়। জাভাস্ক্রিপ্ট অবজেক্ট আইটেম গুলো কমা দ্বারা আলাদা করা হয় ।

কোড গুলো দেখতে এরকম হয়ঃ

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

এইচটিএমএল HTML

এইচটিএমএল লিস্ট (HTML tag list)

March 28, 2015 Author-Check- Article-or-Video

Tamim Ikbal

HTML List ট্যাগ কি এবং এটা কিভাবে HTML এ কাজ করে ?

একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।

Unordered List

এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে।

<html>

<head>

<title>your website name</title>

</head>

<body>

<ul>

<li>Bangla</li>

<li>English</li>

<li>Social Science</li>

<li>Mathemetaics</li>

</ul>

</body>

</html>

আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।

Bangla
English
Social Science
Mathemetaics

Ordered List

কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন ।

<html>

<head>

<title>your website name</title>

</head>

<body>

2.<li>iPad</li>

3.<li>iPhone</li>

4.<li>MacBook Air</li>

5.</ol>

</body>

</html>

আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।

iPad
iPhone
MacBook Air

হয়তো ভাবছেন <ol start="10"> লিখার পর বাকি সব গুল 10,11,12 তালিকা কি করে করলাম । একটু লক্ষ করেন <ol start=" পর আমি “10” লিখছি যার কারনে 10 থেকে তালিকা শুরু হইছে । আর তিনটি তালিকা থাকার কারনে ১০,১১,১২ পর্যন্ত প্রদশন করছেন । আপনারা যদি <ol start=" লিখার পরে “49” দিন এবং ট্যাগ শেষ করেন তাহলে ৪৯ থেকেই আপনার তালিকা শুরু হবে ।

Windows 8, সাধারণ কম্পিউটিং

উইন্ডোজ ৮ এর গুরুত্বপূর্ণ শর্টকাট কী ও ব্যবহার: Important keyboard short-cuts for Windows 8

March 28, 2015 Author-Check- Article-or-Video

নাম: আল মুতাসিম বিল্লাহ
ইমেইল: sumon235@gmail.com

উইন্ডোজ ৮ এর গুরুত্বপূর্ণ শর্টকাট কী ও ব্যবহার:

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

Win + X : displays a text menu of useful Windows tools and applets
Win + Z : displays the right-click context menu when in a full-screen app
Win + + : launch Magnifier and zoom in
Win + - : zoom out
Win + , : Aero peek at the desktop
Win + Enter : launch Narrator
Win + PgUp : move the current screen to the left-hand monitor
Win + PgDn : move the current screen to the right-hand monitor
Win + PrtSc : capture the current screen and save it to your Pictures folder
Win + Tab : switch between running apps
Win : switch between the Start screen and the last-running Windows 8 app
Win + C : displays the Charms: the Settings, Devices, Share and Search options
Win + D : launches the desktop

শর্টকাটের মাধ্যমে কম্পিউটার পরিচালনা অনেক সহজ ও দ্রুততার সাথে হয়। আপনি ইচ্ছা করলে আপনার কম্পিউটার কাজকে ম্যানুয়ালি করতে পারেন বা পারেন অটোমেটিক শর্টকাট কী ব্যবহার করে। আজ পর্যন্তই আগামী দিনে আবার নতুন কোনও তথ্য নিয়ে আমি হাজির হবো।

এইচ টি এম এল - ০০২ । HTML - 002

HTML হল ওয়েব ডিজাইনের মূলভিত্তি যা দিয়ে ওয়েব পেজ তৈরি করা হয়।

March 28, 2015 Author-Check- Article-or-Video Leave a comment

নাভিদ তাসনিম

HTML 5

HTML হল ওয়েব ডিজাইনের মূলভিত্তি যা দিয়ে ওয়েব পেজ তৈরি করা হয়।একজন দক্ষ ওয়েব ডিজাইনার বা ওয়েব ডেভলপার হতে গেলে অবশ্যই HTML সম্পর্কে ভালো জ্ঞান থাকতে হবে।এখন প্রশ্ন হতে পারে HTML ছাড়াই তো Microsoft Frontpage, Adobe Dreamweaver, Webpage Maker,Wordpress, Joomla ব্যবহার করে সুন্দর ওয়েব পেজ তৈরি করা যায়,HTML এর প্রয়োজন কি তাহলে? প্রয়োজনটা হল এটাই যে HTML জানা বাদে একজন নিজের মতো পুরোপুরি ওয়েব পেজ কাস্টমাইজেশন করতে পারে না।তাছাড়া সার্চ ইন্জিন অপটিমাইজেশন (SEO) এর জন্যও HTML জানা অতীব গুরুত্বপূর্ণ।

HTML এ সাধারনত তিন প্রকার ট্যাগ থাকে।
যথা- HEAD ট্যাগ,HTML ট্যাগ এবং BODY ট্যাগ।

HTML এর সর্বশেষ সংস্করন হল HTML 5।পরিবর্তন হিসেবে HTML 5 এ কিছু নতুন ট্যাগ সংযোজন করা হয়েছে।নিম্নে সেগুলো দেয়া হল:

এইচ টি এম এল - ০০২ । HTML - 002

Hyper Text Markup Language 5 : HTML5 হলো এইচটিএমএলের নতুন সংস্করণ

March 28, 2015 Author-Check- Article-or-Video

Hyper Text Markup Language 5

-----------------------------------------------------

HTML5 কি?

HTML5 হলো এইচটিএমএলের নতুন সংস্করণ এইচটিএমএল৫। HTML 4.01 এর পূর্ববর্তী সংস্করণ 1999 সালে প্রকাশিত হয়েছিল। তারপর থেকে অনেক পরিবর্তন হয়েছে। HTML5 এর কাজ এখনও চলছে। কিন্তু অনেক ট্যাগ বিভিন্ন ব্রাউজারে এখন কাজ করে।

HTML5 কিভাবে কাজ শুরু করেছে?

HTML5 এর ওয়ার্ল্ড ওয়াইড ওয়েব সাথে (W3C) এবং ওয়েব হাইপারটেক্সট অ্যাপ্লিকেশন প্রযুক্তি ওয়ার্কিং গ্রুপ (WHATWG) মধ্যে সহযোগিতা করে তৈরির কাজ চলছে। WHATWG ওয়েব ফর্ম এবং অ্যাপ্লিকেশন তৈরির কাজ করছে এবং W3C এক্সএইচটিএমএল 2.0 নিয়ে কাজ করছিল। 2006 সালে তারা HTML-এর একটি নতুন সংস্করণ তৈরি করার সিদ্ধান্ত নিয়েছে।

HTML5 এর জন্য কিছু নিয়ম প্রতিষ্ঠিত হয়:
নতুন বৈশিষ্ট্য সমূহ এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্ট উপর ভিত্তি করে তৈরি করা উচিত
আলাদা প্লাগিনের ব্যবহার কমানোর কথা বলা হয়েছে (যেমন: ফ্ল্যাশ)
উন্নত ত্রুটি পরিচালনার ব্যবস্থা
আরও একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা
HTML5 এর স্বাধীন ডিভাইস হতে হবে
উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে
************************************************************
আমার Microworker ইমেল:skmdrony@yahoo.com