Mar 29

jQuery – AJAX এর noConflict() মেথড । jQuery – AJAX noConflict() Method

মাহবুবুর রহমান

 

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 মেথড

Mar 29

জেকয়ারি এফেক্ট মেথডস। jQuery Effect Methods Reference

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mar 29

জেকোয়েরি সিলেক্টর এর ব্যবহার এবং কাজ . jQuery Selectors Reference

জেকোয়েরি সিলেক্টর এর ব্যবহার এবং কাজ . Mostafizur Rahman, Firoz

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

সিলেক্টর নামঃ *
উদাহরণঃ $(“*”)
কাজঃ সকল উপাদান সিলেক্ট করে ।

সিলেক্টর নামঃ #id
উদাহরণঃ $(“#lastname”)
কাজঃ id=”lastname” গুলো শুধুমাত্র সিলেক্ট করে । মানে আইডিগুলোর লাস্টনেমকে শুধু মাত্র সিলেক্ট করবে ।

সিলেক্টর নামঃ .class
উদাহরণঃ $(“.intro,.demo”)
কাজঃ “intro” অথবা “demo” এর সকল ক্লাস সিলেক্ট করে ।

সিলেক্টর নামঃ element
উদাহরণঃ $(“p”)
কাজঃ সকল <p> ট্যাগের উপাদান গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ el1,el2,el3
উদাহরণঃ $(“h1,div,p”)
কাজঃ সকল <h1>, <div> এবং <p> elements গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :first
উদাহরণঃ $(“p:first”)
কাজঃ শুধুমাত্র প্রথম <p> element গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :last
উদাহরণঃ $(“p:last”)
কাজঃ শুধুমাত্র শেষ <p> element গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :even
উদাহরণঃ $(“tr:even”)
কাজঃ সকল জোড় <tr> elements গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :odd
উদাহরণঃ $(“tr:odd”)
কাজঃ সকল বিজোড় <tr> elements গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :first-child
উদাহরণঃ $(“p:first-child”)
কাজঃ পিতা-মাতার সকল প্রথম শিশুকে শুধুমাত্র সিলেক্ট করবে ।

সিলেক্টর নামঃ :first-of-type
উদাহরণঃ $(“p:first-of-type”)
কাজঃ পিতামাতা এবং শিশু দুজনই প্রথম হলে শুমাত্র তাদের সিলেক্ট করবে ।

সিলেক্টর নামঃ :last-child
উদাহরণঃ $(“p:last-child”)
কাজঃ পিতা-মাতার সকল শেষ শিশুকে শুধুমাত্র সিলেক্ট করবে ।

সিলেক্টর নামঃ :last-of-type
উদাহরণঃ $(“p:last-of-type”)
কাজঃ পিতামাতা এবং শিশু দুজনই শেষের হলে শুমাত্র তাদের সিলেক্ট করবে ।

সিলেক্টর নামঃ :nth-child(n)
উদাহরণঃ $(“p:nth-child(2)”)
কাজঃ পিতা-মাতার সকল দ্বিতীয় শিশুকে শুধুমাত্র সিলেক্ট করবে ।

সিলেক্টর নামঃ :nth-last-child(n)
উদাহরণঃ $(“p:nth-last-child(2)”)
কাজঃ পিতা-মাতার সকল শেষের দ্বিতীয় শিশুকে শুধুমাত্র সিলেক্ট করবে । মানে ছোট জনের আগের জন ।

সিলেক্টর নামঃ :nth-of-type(n)
উদাহরণঃ $(“p:nth-of-type(2)”)
কাজঃ দ্বিতীয় <p> elements এর সকল <p> element কে সিলেক্ট করবে ।

সিলেক্টর নামঃ :nth-last-of-type(n)
উদাহরণঃ $(“p:nth-last-of-type(2)”)
কাজঃ দ্বিতীয় <p> elements এর সকল <p> element কে সিলেক্ট করবে । শেষের দিক থেকে কিন্তু ।

সিলেক্টর নামঃ :only-child
উদাহরণঃ $(“p:only-child”)
কাজঃ একমাত্র শিশু হলে শুধু মাত্র তাদের সিলেক্ট করবে ।

সিলেক্টর নামঃ :only-of-type
উদাহরণঃ $(“p:only-of-type”)
কাজঃ একই রকমের পিতা-মাতার একমাত্র শিশু হলে শুধু মাত্র তাদের সিলেক্ট করবে ।

সিলেক্টর নামঃ parent > child
উদাহরণঃ $(“div > p”)
কাজঃ <div> element এর সরাসরি শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।

সিলেক্টর নামঃ parent descendant
উদাহরণঃ $(“div p”)
কাজঃ <div> element এর নিচের দিককার শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।

সিলেক্টর নামঃ element + next
উদাহরণঃ $(“div + p”)
কাজঃ <div> element এর পরবর্তী শিশু হলে সকল <p> elements কে সিলেক্ট করবে ।

সিলেক্টর নামঃ element ~ siblings
উদাহরণঃ $(“div ~ p”)
কাজঃ <div> element ভাই-বোন হলে সকল <p> elements কে সিলেক্ট করবে ।

সিলেক্টর নামঃ :eq(index)
উদাহরণঃ $(“ul li:eq(3)”)
কাজঃ চার নাম্বার ইলিমেন্টসকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :gt(no)
উদাহরণঃ $(“ul li:gt(3)”)
কাজঃ ৩ এর চেয়ে বড় হলে শুধুমাত্র তাদের সিলেক্ট করবে ।

সিলেক্টর নামঃ :lt(no)
উদাহরণঃ $(“ul li:lt(3)”)
কাজঃ ৩ এর চেয়ে ছোট হলে শুধুমাত্র তাদের সিলেক্ট করবে ।

সিলেক্টর নামঃ :not(selector)
উদাহরণঃ $(“input:not(:empty)”)
কাজঃ যাদের মান শূন্য নয় তাদের সকল্কে সিলেক্ট করবে ।

সিলেক্টর নামঃ :header
উদাহরণঃ $(“:header”)
কাজঃ সকল হেডার এলিমেন্টস <h1>, <h2> … কে সিলেক্ট করবে ।

সিলেক্টর নামঃ :animated
উদাহরণঃ $(“:animated”)
কাজঃ সকল এনিমেটেড এলিমেন্টসকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :focus
উদাহরণঃ $(“:focus”)
কাজঃ যেগুলো ফোকাসে থাকবে শুধু তাদের সিলেক্ট করবে ।

সিলেক্টর নামঃ :contains(text)
উদাহরণঃ $(“:contains(‘Hello’)”)
কাজঃ “Hello” টেক্সট থাকলে তাদের সবগুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :has(selector)
উদাহরণঃ $(“div:has(p)”)
কাজঃ <p> element যুক্ত সকল <div> elements কে সিলেক্ট করবে ।

সিলেক্টর নামঃ :empty
উদাহরণঃ $(“:empty”)
কাজঃ যারা খালি থাকবে শুধু তাদেরই সিলেক্ট করবে ।

সিলেক্টর নামঃ :parent
উদাহরণঃ $(“:parent”)
কাজঃ যারা অন্য এলিমেন্টের প্যারেন্ট ক্যাটাগরিতে থাকবে তাদের সকল্কে সিলেক্ট করবে ।

সিলেক্টর নামঃ :hidden
উদাহরণঃ $(“p:hidden”)
কাজঃ সকল হিডেন <p> elements কে সিলেক্ট করবে ।

সিলেক্টর নামঃ :visible
উদাহরণঃ $(“table:visible”)
কাজঃ সকল ভিজিবল টেবিলকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :root
উদাহরণঃ $(“:root”)
কাজঃ ডকুমেন্টের root element কে শুধুমাত্র সিলেক্ট করবে ।

সিলেক্টর নামঃ :lang(language)
উদাহরণঃ $(“p:lang(de)”)
কাজঃ “de” লেখা দ্বারা শুরু সকল <p> elements কে সিলেক্ট করবে ।

সিলেক্টর নামঃ [attribute]
উদাহরণঃ $(“[href]”)
কাজঃ href attribute থাকা সকল উপাদানকে সিলেক্ট করবে ।

সিলেক্টর নামঃ [attribute=value]
উদাহরণঃ $(“[href=’default.htm’]”)
কাজঃ href attribute থাকা সকল “default.htm” ভেলুর উপাদানকে সিলেক্ট করবে ।

সিলেক্টর নামঃ [attribute!=value]
উদাহরণঃ $(“[href!=’default.htm’]”)
কাজঃ href attribute থাকা সকল “default.htm” ভেলু বাদের বাকি সব উপাদানকে সিলেক্ট করবে ।

সিলেক্টর নামঃ [attribute$=value]
উদাহরণঃ $(“[href$=’.jpg’]”)
কাজঃ href attribute থাকা সকল “.jpg” উপাদানকে সিলেক্ট করবে ।

সিলেক্টর নামঃ [attribute|=value]
উদাহরণঃ $(“[title|=’Tomorrow’]”)
কাজঃ title attribute এর সকল ‘Tomorrow’ ভেলুকে সিলেক্ট করবে ।

সিলেক্টর নামঃ [attribute^=value]
উদাহরণঃ $(“[title^=’Tom’]”)
কাজঃ title attribute এর সকল “Tom” ভেলুকে সিলেক্ট করবে ।

সিলেক্টর নামঃ [attribute~=value]
উদাহরণঃ $(“[title~=’hello’]”)
কাজঃ title attribute এর শুধুমাত্র “hello” ভেলুকে সিলেক্ট করবে ।

সিলেক্টর নামঃ [attribute*=value]
উদাহরণঃ $(“[title*=’hello’]”)
কাজঃ title attribute এর সকল “hello” ভেলুকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :input
উদাহরণঃ $(“:input”)
কাজঃ সকল ইনপুট উপদান গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :text
উদাহরণঃ $(“:text”)
কাজঃ সকল ইনপুট উপদানের type=”text” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :password
উদাহরণঃ $(“:password”)
কাজঃ সকল ইনপুট উপদানের type=”password” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :radio
উদাহরণঃ $(“:radio”)
কাজঃ সকল ইনপুট উপদানের type=”radio” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :checkbox
উদাহরণঃ $(“:checkbox”)
কাজঃ সকল ইনপুট উপদানের type=”checkbox” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :submit
উদাহরণঃ $(“:submit”)
কাজঃ সকল ইনপুট উপদানের type=”submit” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :reset
উদাহরণঃ $(“:reset”)
কাজঃ সকল ইনপুট উপদানের type=”reset” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :button
উদাহরণঃ $(“:button”)
কাজঃ সকল ইনপুট উপদানের type=”button” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :image
উদাহরণঃ $(“:image”)
কাজঃ সকল ইনপুট উপদানের type=”image” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :file
উদাহরণঃ $(“:file”)
কাজঃ সকল ইনপুট উপদানের type=”file” গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :enabled
উদাহরণঃ $(“:enabled”)
কাজঃ সকল enabled ইনপুট উপদান গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :disabled
উদাহরণঃ $(“:disabled”)
কাজঃ সকল disabled ইনপুট উপদান গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :selected
উদাহরণঃ $(“:selected”)
কাজঃ সকল selected ইনপুট উপদান গুলোকে সিলেক্ট করবে ।

সিলেক্টর নামঃ :checked
উদাহরণঃ $(“:checked”)
কাজঃ সকল checked ইনপুট উপদান গুলোকে সিলেক্ট করবে ।

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

 

Mar 29

jQuery – AJAX এর get() and post() মেথড । jQuery – AJAX get() and post() Methods

অনুবাদক: ফয়সাল রকি

 

জেকুয়েরি – এজাক্স 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 & ".")
 %>

 

 

Mar 29

jQuery ইফেক্টস – স্লাইড ইফেক্ট। jQuery Effects – Sliding

আলামিন মনির

 

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()

 

Mar 29

jQuery ইফেক্টস – জাপ্সা ইফেক্ট । jQuery Effects – Fading

আলামিন মনির

 

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()

Mar 29

আপনার ওয়েব পেজ এ যেভাবে JQuery ব্যবহার/Install করবেন । Installing JQuery Library

আপনার ওয়েব পেজ এ যেভাবে JQuery ব্যবহার/Install করবেন । Installing JQuery Library ।
Name: Md. Ariful Islam. Edited by Sayed Ahmed
============================================
আপনার ওয়েব সাইটে jQuery ব্যবহার করার জন্য বেশ কিছু উপায় আছে।যেমন:
*JQuery.com থেকে jQuery লাইব্রেরি ডাউনলোড করে ব্যবহার করা।
*অথবা, CDN (Content Delivery Network) থেকে jQuery ব্যবহার করা। কিছু CDN যেমন: গুগল, মাইক্রোসফট এর CDN

jQuery ডাউনলোড করে ব্যবহার-
…………………………………………………
ডাউনলোড করার জন্য jQuery এর দুটি সংস্করণ পাওয়া যায়। সেগুলি হল:
১. Production সংস্করণ।-এটা minified version এটাকে সংকুচিত/compressed করা হয়েছে, কারণ এটা আপনার লাইভ ওয়েবসাইট এ ব্যবহার করার জন্য।এটা জায়গা কম নেয় এবং দ্রুত লোড হয় ।
২. Development সংস্করণ।-এটা পরীক্ষামূলক ব্যবহার করার জন্য এবং এটা একটা পাঠযোগ্য কোড। এটার বিস্তারিত আমরা পরবর্তীতে জনবো। আপনি ডেভেলপ করার সমই আএই ভারসন ব্যবহার করে কোড ডিবাগ করতে পারবেন।

দুটি সংস্করণই jQuery.com থেকে ডাউনলোড করা যাবে।

JQuery লাইব্রেরি একটি একক জাভাস্ক্রিপ্ট ফাইল।

আপনার ডাউনলোড করা jQuery ফাইলটি একই ডিরেক্টরির/folder এর মধ্যে রাখুন। তারপর HTML Script tag ব্যবহার করে HTML file থেকে jquery library কে পয়েন্ট করুন।

 

<head>
<script src=”jquery-1.11.1.min.js”></script>
</head>

——

CDN থেকে কিভাবে JQuery ব্যবহার করবেন

 

Google CDN:

<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
</head>

Microsoft CDN:

<head>
<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js”></script>
</head>

গুগল বা মাইক্রোসফট থেকে হোস্ট থেকে jQuery ব্যবহার করার বড় সুবিধা হল:

অনেকেই হইত CDN থেকে ইতিমধ্যে JQuery ডাউনলোড করেছে যখন অন্য ওয়েবসাইট ব্রাউজ করেছে। সেহেতু তাদের কম্পিউটারে আপনার ওয়েবসাইট তারাতারি লোড হবে কারন JQuery তাদের cache থেকে লোড হবে। ব্যবহারকারী অন্য সাইট ভিজিট করার সময় যখন গুগল বা মাইক্রোসফট থেকে jQuery ডাউনলোড করে তখন তা তার browser এর cache তে থাকে । পরবর্তীতে অন্য কোন jQuery সাইট ভিজিট করলে website টি cache থেকে jquery ডাটা নিয়ে খুব দ্রুত লোড হয়।

Mar 29

JQuery Introduction : JQuery শুরুর কথা

JQuery Introduction : JQuery শুরুর কথা : Partially edited by Sayed Ahmed

আপনার jQuery সম্পর্কে জানার আগে কয়েকটি মৌলিক জ্ঞান থাকতে হবেঃ
এইচটিএমএল
সিএসএস
জাভাস্ক্রিপ্ট

JQuery কি?

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

JQuery লাইব্রেরি এর নিম্নলিখিত আরও কিছু বৈশিষ্ট্য রয়েছেঃ
এইচটিএমএল / DOM ম্যানিপুলেশন
সিএসএস এর ম্যানিপুলেশন
এইচটিএমএল ঘটনা পদ্ধতি
ইফেক্ট এবং অ্যানিমেশন
AJAX এর
ইউটিলিটি

কেন JQuery?
আরও অন্যান্য অনেক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কস বা অবকাঠামো রয়েছে কিন্তু JQuery বর্তমানে সবচেয়ে জনপ্রিয় এবং সবচেয়ে বাড়তি সুবিধাজনক মনে হয়। অনেক বড় বড় জনপ্রিয় কোম্পানির ওয়েবসাইটে JQuery ব্যবহার করে থাকে। যেমন-
গুগল
মাইক্রোসফট
আইবিএম
Netflix
ইতাদি আরও সাইট রয়েছে…

এখন প্রশ্ন JQuery এর সব ব্রাউজারে কাজ করবে?
JQuery ইন্টারনেট এক্সপ্লোরার 6 সহ সব প্রধান ব্রাউজারগুলোতে ঠিকভাবে কাজ করবে।

Mar 29

JQUERY নীড়: JQuery ভুমিকা

ফয়সাল রকি : Partially edited by Sayed Ahmed

JQuery হলো JavaScript এর Library. JavaScript প্রোগ্রামকে সহজীকরণ করে। এর সাহায্যে জটিলতম JavaScript প্রোগ্রামগুলোকে সহজে একসূত্রে গাঁথা যায়। খুব সামান্য চেষ্টা এবং শ্রম ব্যয় করে আপনি JQuery শিখতে পারবেন।

উদাহরণ:
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});

JQuery উদাহরণ

উদাহরণের সাহায্যে শিক্ষন একটি আধুনিক প্রক্রিয়া! এই ওয়েবসাইটে JQuery এর প্রচুর উদাহরণ রয়েছে। উদাহরণগুলো ধারাবাহিকভাবে বিন্যস্ত করা আছে.

JQuery রেফারেন্স

JQuery এর পরিপূর্ণ শিক্ষণের জন্য এর অবজেক্ট ও মেথড সম্পর্কে যথার্থ শিক্ষা উপকরণ প্রয়োজন। এই ওয়েবসাইটে অবজেক্ট ও মেথড সম্পর্কে পরিপূর্ণ রেফারেন্স পাওয়া যাবে।

—————–

Mar 29

Google Maps- এর প্রাথমিক ধারনা. একটি মৌলিক গুগল ম্যাপ তৈরি করুন. Create a simple Google Map of a Location

Paste the translated text here
Google Maps- কি?Google Maps- এ আপনি সর্বদা আপনার ওয়েব সাইটে মানচিত্র প্রদর্শন করতে পারবেন:
Google Maps API
এই টিউটোরিয়ালটি গুগল ম্যাপস এপিআই (অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস) সম্পর্কে.
গুগল ম্যাপস এপিআইর সঙ্গে, আপনি আপনার মানচিত্র এবং মানচিত্র তথ্য. নিজের মতো করে (কিছু) পরিবর্তন করতে পারেন,.
একটি API সফ্টওয়্যার অ্যাপ্লিকেশন নির্মাণের জন্য যে পদ্ধতি এবং সরঞ্জাম ব্যবহার করা যেতে পারে তার একটি সংকলন.
Google Maps- এ প্রাথমিক ধারনা
একটি মৌলিক গুগল ম্যাপ তৈরি করুন
লন্ডন, ইংল্যান্ড কেন্দ্রিক একটি Google ম্যাপ:তৈরি করে এই উদাহরণটি করাঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<script
src=”http://maps.googleapis.com/maps/api/js”>
</script><script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>

<body>
<div id=”googleMap” style=”width:500px;height:380px;”></div>

</body>
</html>
এটা নিজে চেষ্টা করে দেখুন»
এই পৃষ্ঠার বাকি অংশ উপরের উদাহরণে ধাপে ধাপে বর্ণনা করা হলো.
1. Load the Google API
গুগল ম্যাপস এপিআই জাভাস্ক্রিপ্ট লাইব্রেরি. এটি একটি স্ক্রিপ্ট ট্যাগের সঙ্গে একটি ওয়েব পৃষ্ঠা যোগ করা যেতে পারে:
<script src=”http://maps.googleapis.com/maps/api/js”></script>

2. মানচিত্রের বৈশিষ্ট্য ঠিক করা

মানচিত্র আরম্ভ করার জন্য একটি ফাংশন তৈরি করুন:
function initialize() {
}
ফাংশনের শুরুতে, মানচিত্র জন্য বৈশিষ্ট্য নির্ধারণ করতে একটি বস্তু (mapProp) তৈরি করতে হবে:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
কেন্দ্রিয় ভূসম্পত্তিটি নির্দিষ্ট করে যেখানে ম্যাপ কেন্দ্র. একটি নির্দিষ্ট বিন্দু ম্যাপ কেন্দ্র একটি অক্ষাংশ দ্রাঘিমাংশ বস্তুর তৈরি করুন. যাতে স্থানাঙ্ক পাস: অক্ষাংশ, দ্রাঘিমাংশ.

zoom ভূসম্পত্তিটি নির্ধারণ করে মানচিত্রের zoom স্তর . zoom: 0 পৃথিবীর একটি মানচিত্র zoomed out সম্পূর্ণরূপে দেখায়. উচ্চ zoom স্তর একটি উচ্চ রেজল্যুশনের zoom.

MapTypeId সম্পত্তি প্রদর্শন মানচিত্র ধরন নির্ধারণ করা হয়.

নিম্নলিখিত মানচিত্র ধরনের সমর্থিত হবে:

রোডম্যাপ (স্বাভাবিক, ডিফল্ট 2D ম্যাপ)
উপগ্রহ (ফোটোগ্রাফিক ম্যাপ)
হাইব্রীড (ফোটোগ্রাফিক মানচিত্র + + সড়ক ও শহরের নাম)
ভূখণ্ড (ইত্যাদি পাহাড়, নদী, সঙ্গে ম্যাপ)

3. একটি মানচিত্র ধারক তৈরি করুন

মানচিত্রে “contain” একটি নামে <div> এলিমেন্ট তৈরি করুন. আকার উপাদান CSS ব্যবহার করুন:
উদাহরণ
<div id=”googleMap” style=”width:500px;height:380px;”></div>

4. একটি মানচিত্রের লক্ষ্য তৈরি করুন
উদাহরণঃ
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
5. মানচিত্র লোড করার একটি Event Listener যোগ করুন

উইন্ডো লোড (পৃষ্ঠা লোড করা হয়) উপর আরম্ভ () ফাংশন চালানো হবে যে একটি DOM শ্রোতা যুক্ত করুন:
google.maps.event.addDomListener(window, ‘load’, initialize);

Asynchronously Loading
এটির সাহায্যে গুগল ম্যাপস এপিআই লোড করা সম্ভব.

উদাহরণ নিচে পাতা সম্পূর্ণরূপে লোডের পর গুগল ম্যাপস এপিআই লোড window.onload ব্যবহার করে.

LoadScript () ফাংশন গুগল ম্যাপস এপিআই <script> ট্যাগ সৃষ্টি করে. API- টি সম্পূর্ণরূপে লোড হয় উপরন্তু, কলব্যাক = আরম্ভ পরামিতি আরম্ভ () ফাংশন চালানো URL এর শেষে যোগ করা হয়েছে:
<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);
}

function loadScript()
{
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “http://maps.googleapis.com/maps/api/js?key=&sensor=false&callback=initialize”;
document.body.appendChild(script);
}

window.onload = loadScript;
</script>
</head>

<body>
<div id=”googleMap” style=”width:500px;height:500px;”></div>

</body>
</html>

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

একাধিক মানচিত্র

উদাহরণস্বরূপ নিচের ওয়েব পৃষ্ঠা (বিভিন্ন মানচিত্র ধরনের সঙ্গে চার মানচিত্র) চার মানচিত্র সংজ্ঞায়িত:
<!DOCTYPE html>
<html>
<head>
<script
src=”http://maps.googleapis.com/maps/api/js”>
</script>

<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapProp3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapProp4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);
var map2 = new google.maps.Map(document.getElementById(“googleMap2”),mapProp2);
var map3 = new google.maps.Map(document.getElementById(“googleMap3”),mapProp3);
var map4 = new google.maps.Map(document.getElementById(“googleMap4″),mapProp4);
}

google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>

<body>
<div id=”googleMap” style=”width:400px;height:300px;”></div>
<br>
<div id=”googleMap2″ style=”width:400px;height:300px;”></div>
<br>
<div id=”googleMap3″ style=”width:400px;height:300px;”></div>
<br>
<div id=”googleMap4″ style=”width:400px;height:300px;”></div>

</body>
</html>
এটা নিজে চেষ্টা করে দেখুন»

Google API Key
Google allows your web site to call any Google API, many thousand times per day.
গুগল সর্বদা আপনার ওয়েব সাইটে যে কোন গুগল এপিআই, প্রতিদিন অনেক হাজার হাজার গুণ কল করতে পারবেন.

আপনি ভারী ট্রাফিকের জন্য পরিকল্পনা, আপনি গুগল থেকে একটি বিনামূল্যে API Key পাওয়া উচিত.

একটি বিনামূল্যে Key পেতে https://console.developers.google.com এ যান.

যেখানেএকটি API লোড হয় সেখানে Google Maps- key parameter এর মধ্যে API key টি খুঁজে পেতেআশা করে
<script src=”http://maps.googleapis.com/maps/api/js?key=YOUR_KEY”></script>