এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

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

রেফারেন্স- reference

 

এইচটিএমএল ৫ জিওলোকেশন


ব্রাউজার সাপোর্ট

API Google Chrome Edge/IE Mozila Firefox Safari Opera
geolocation ৫.০-৪৯.০(http)
৫০.০(https)
৯.০ ৩.৫ ৫.০ ১৬.০



ইউজারের অবস্থান নির্ণয়ের জন্য এইচটিএমএল জিওলোকেশন এপিআই ব্যবহার করা হয়।




ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৫.০, ইন্টারনেট এক্সপ্লোরার ৯.০, ফায়ারফক্স ৩.৫, সাফারি ৫.০ এবং অপেরা ১৬.০ ভার্সন থেকে জিওলোকেশন সাপোর্ট করে।

ক্রোম ৪৯.০ ভার্সন পর্যন্ত http সাইটগুলোতেও ইউজারের অবস্থান জানার রিকুয়েস্ট কাজ করে, ভার্সন ৫০.০ থেকে শুধুমাত্র https সাইটগুলোর জন্য কাজ করে।


getCurrentPosition() মেথডের রিটার্নকৃত ডেটা

getCurrentPosition() মেথড সফল হলে যেসকল প্রোপার্টি রিটার্ন হয় তার একটি লিস্ট দেওয়া হলোঃ

প্রোপার্টি রিটার্ন
coords.latitude দশমিক সংখ্যায় অক্ষাংশ(latitude) রিটার্ন করে
coords.longitude দশমিক সংখায় দ্রাঘিমাংশ(longitude) রিটার্ন করে
coords.accuracy অবস্থানের যথার্থতা রিটার্ন করে
coords.altitude সমুদ্রপৃষ্ঠ থেকে উচ্চতা রিটার্ন করে(যদি পাওয়া যায়)
coords.altitudeAccuracy সমুদ্রপৃষ্ঠ থেকে উচ্চতার যথার্থতা রিটার্ন করে(যদি পাওয়া যায়)
coords.heading coords.heading এই প্রোপার্টিটি উত্তর মেরু থেকে দূরত্বকে ডিগ্রী হিসেবে প্রকাশ করে
coords.speed প্রতি সেকেন্ডে গতি রিটার্ন করে(মিটারে)
timestamp তারিখ/সময়

ইউজারের অবস্থান নির্ণয়

ইউজারের অবস্থান নির্ণয়ের জন্য এইচটিএমএল জিওলোকেশন এপিআই ব্যবহার করা হয়। এক্ষেত্রে প্রথমে ইউজারের কাছ থেকে অনুমতি চাওয়া হয়, ব্যবহারকারী অনুমতি দিলে তখনই অবস্থান পাওয়া যায়।


এইচটিএমএল জিওলোকেশন এর ব্যবহার

getCurrentPosition() মেথডের মাধ্যমে ইউজারের অবস্থান পাওয়া যায়।


উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল ৫ জিওলোকেশন</title>
</head>
<body>

<p> বাটনটি চাপুন ফলাফল পাওয়ার জন্য ।</p>

<button onclick="getLocation()">চেষ্টা করুন</button>

<p id="test"></p>

<script>
var a = document.getElementById("test");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        a.innerHTML = "দুঃখিত,আপনার ব্রাউজারে  জিওলোকেশন  সাপোর্ট করে না।";
    }
}

function showPosition(position) {
    a.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

ফলাফল



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

  • প্রথমে if কন্ডিশনের মাধ্যমে জিওলোকেশন সাপোর্ট চেক করা হয়
  • যদি সাপোর্ট করে তাহলে getCurrentPosition() মেথডটি রান হবে, অন্যথায় ব্যবহারকারীকে অ্যালার্ট দেওয়া হয় আপনার ব্রাউজার জিওলোকেশন সাপোর্ট করেনা
  • যদি getCurrentPosition() মেথডটি সফল হয় তাহলে এটি showPosition ফাংশনকে স্থানাংক অবজেক্ট রিটার্ন করে
  • showPosition() ফাংশনের মাধ্যমে অক্ষাংশ এবং দ্রাঘিমাংশ ডকুমেন্টে দেখানো হয়।

এরর এবং অননুমোদন নিয়ন্ত্রন পদ্ধতি

getCurrentPosition() মেথড ইউজারের অবস্থান নির্ণয় করতে অথবা কোন এরর ঘটলে এই ফাংশনটি রান হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল Error নিয়ন্ত্রন</title>
</head>
<body>

<p>ফলাফল পাওয়ার জন্য বাটনটি চাপুন।।</p>

<button onclick="getLocation()">চেষ্টা করুন </button>

<p id="test"></p>

<script>
var a = document.getElementById("test");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        a.innerHTML = "দুঃখিত,আপনার ব্রাউজারে  জিওলোকেশন  সাপোর্ট করে না।";
    }
}

function showPosition(position) {
    a.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            a.innerHTML = "জিওলোকেশন এর জন্য রিকুয়েস্ট তৈরি করা হয়েছে।"
            break;
        case error.POSITION_UNAVAILABLE:
            a.innerHTML = "এই লোকেশনে কোন তথ্য খুঁজে পাওয়া যায়নি।"
            break;
        case error.TIMEOUT:
            a.innerHTML = "ইউজার লোকেশন এর জন্য যে রিকুয়েস্টটি করা হয়েছে তা টাইম আউট হয়ে গেছে।"
            break;
        case error.UNKNOWN_ERROR:
            a.innerHTML = "এখানে একটি অজানা ত্রুটি ঘটেছে।"
            break;
    }
}
</script>

</body>
</html>

ফলাফল




স্ক্রিপ্টের মাধ্যমে অবস্থান প্রদর্শন

আমরা গুগল ম্যাপের সাহায্যে ইউজারের অবস্থান প্রদর্শন করতে পারিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল জিওলোকেশন</title>
</head>
<body>

<p id="test">আপনার অবস্থান দেখতে বাটনে ক্লিক করুন।</p>

<button onclick="getLocation()">এখানে ক্লিক করুন</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyAIkVN8rsnCicnrvUOhv1ZYcO_8j_Zx9uM"></script>
<script>
var a = document.getElementById("test");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        a.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';


    var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
    
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            a.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            a.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            a.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            a.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>

ফলাফল




জিওলোকেশন অবজেক্ট - অন্যান্য মেথড

watchPosition() - এই মেথডের মাধ্যমে ইউজারের বর্তমান অবস্থান নির্ণয় করা যায় এবং স্থান পরিবর্তন করলে তার আপডেটও পাওয়া যায়

clearWatch() - এর মাধ্যমে watchPosition() মেথডকে স্থগিত রাখা হয়

নিচের উদাহরনে watchPosition() মেথড এর ব্যবহার দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল জিওলোকেশন</title>
</head>
<body>

<p>বাটনটি চাপুন ফলাফল পাওয়ার জন্য ।</p>

<button onclick="getLocation()">চেষ্টা করুন</button>

<p id="test"></p>

<script>
var a = document.getElementById("test");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        a.innerHTML = "দুঃখিত,আপনার ব্রাউজারে  জিওলোকেশন  সাপোর্ট করে না।";}
    }
    
function showPosition(position) {
    a.innerHTML="Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

ফলাফল