জাভাস্ক্রিপ্ট সতর্কতা() পদ্ধতি

জাভাস্ক্রিপ্ট alert() পদ্ধতি, Window.alert() নামেও পরিচিত , একজন ব্যবহারকারীকে একটি সতর্কতা ডায়ালগ বক্স প্রদর্শন করে। এটি ব্যবহারকারীর কাছে একটি OK বোতাম সহ একটি বার্তা প্রদর্শন করার জন্য একটি ঐচ্ছিক বার্তা যুক্তি গ্রহণ করে। alert() এর সাধারণ ব্যবহার ব্যবহারকারীকে জানাতে একটি ক্রিয়া সফল হয়েছে, বা ত্রুটিগুলি প্রদর্শন করা।

alert() পদ্ধতিটি একটি বিকাশের হাতিয়ার হিসাবেও কাজে আসে। উদাহরণস্বরূপ, একটি alert() স্থাপন করা একটি ফর্ম জমা দেওয়ার জন্য একটি ফাংশনের ভিতরে। সাধারণত, alert() event.preventDefault() এর পরে স্থাপন করা হবে বলা হয়.

পর্যালোচনার জন্য, event.preventDefault() সাবমিট বোতামে ক্লিক করার পর রিডাইরেক্ট করার ডিফল্ট আচরণ বাতিল করে। event.preventDefault() পর্যালোচনা করতে এই দ্রুত টিউটোরিয়ালটি পড়ুন .

জাভাস্ক্রিপ্ট সতর্কতা() কি?

জাভাস্ক্রিপ্ট alert() একটি পপ-আপ ডায়ালগ বক্স প্রদর্শন করে। একটি কাস্টম বার্তা প্রদর্শন করতে একটি স্ট্রিং আকারে একটি ঐচ্ছিক বার্তা প্রেরণ করা যেতে পারে৷ alert() সম্পর্কে একটি গুরুত্বপূর্ণ নোট এটি শুধুমাত্র একটি বার্তা প্রদর্শন করতে ব্যবহার করা উচিত যার জন্য ঠিক আছে ক্লিক করে স্বীকৃতি প্রয়োজন৷ একটি কর্মের প্রয়োজন এমন একটি বার্তায় alert() ব্যবহার করা উচিত নয় .

একটি alert() ডায়ালগ বক্সের অনেক ব্যবহার রয়েছে। এটি একটি fetch() এর পরিপ্রেক্ষিতে সাফল্য বা ত্রুটি প্রদর্শন করতে ব্যবহার করা যেতে পারে অনুরোধ আরেকটি ব্যবহার হল alert() প্রদর্শন করা প্রোগ্রামটি যথাযথভাবে প্রবাহিত হচ্ছে তা নিশ্চিত করার জন্য একটি ফাংশনে।

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

alert()-এর সিনট্যাক্স সংক্ষিপ্ত এবং সোজা। শুধু alert() আহ্বান করুন একটি স্ট্রিং আকারে একটি বার্তা সহ:

alert('message')

এটি একটি ডায়ালগ বক্স প্রদর্শন করবে যা বলবে 'বার্তা।' এটি প্রদর্শন করতে আপনার কাস্টম বার্তাটিকে একটি স্ট্রিং হিসাবে রাখুন।

বার্তাটি ঐচ্ছিক। একটি বার্তা অন্তর্ভুক্ত না হলে, একটি OK বোতাম সহ একটি ফাঁকা ডায়ালগ বক্স প্রদর্শিত হবে৷

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

alert()

জাভাস্ক্রিপ্ট সতর্কতা() উদাহরণ

এই নিবন্ধটির ভূমিকায়, আমরা alert() ব্যবহার করার জন্য একজন ব্যবহারকারী এবং একটি বিকাশকারীর পরিস্থিতি বিবেচনা করেছি . আসুন এখন দেখে নেওয়া যাক প্রতিটি কীভাবে বাস্তবায়িত হবে। ডেভেলপার সাইড দিয়ে শুরু করা যাক। আমরা একটি alert() রাখব একটি ফাংশনের ভিতরে যা ফর্ম জমা দেয়।

আমরা একটি ব্যবহারকারীর নাম এবং পাসওয়ার্ড দিয়ে লগ ইন করার জন্য একটি মৌলিক ফর্ম দিয়ে শুরু করব৷

<form>
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

যা রেন্ডার করে:

এখন আমাদের জাভাস্ক্রিপ্ট ফর্মের onSubmit প্রপার্টিতে পাস করার জন্য একটি ফাংশন তৈরি করা যাক।

const handleOnSubmit = (event) => {
 event.preventDefault();
 alert("Logged In")
}

তারপর আমরা onSubmit প্রপার্টিতে আমাদের ফর্মে এই ফাংশনটি পাস করি।

<form onSubmit="handleOnSubmit(event)">
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

এখন আমরা ফর্মটিতে ফাংশনটি সঠিকভাবে সংযুক্ত করেছি কিনা তা দেখতে লগইন বোতামে ক্লিক করতে পারি। বোতামটি ক্লিক করার পর আমরা একটি ডায়ালগ বক্স পাই যা দেখতে এইরকম:

দারুণ! আমরা জানি যে আমাদের সংজ্ঞায়িত ফাংশনটি আমাদের ফর্মের সাথে যোগাযোগ করছে। জাভাস্ক্রিপ্ট alert() আমাদের প্রোগ্রামের প্রবাহ পরীক্ষা করার একটি সহজ উপায় দেয়।

আমাদের পরবর্তী উদাহরণের জন্য, আসুন আমরা কিভাবে একটি fetch()-এ সাফল্য এবং ত্রুটির বার্তা প্রকাশ করতে পারি তা একবার দেখে নেওয়া যাক। অনুরোধ

fetch('/current-cart/', {
      credentials: 'include',
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(resp => resp.json())
    .then(cart => {
      if(cart.error){
        alert(cart.error)
      }

এই উদাহরণে, আমাদের কাছে একটি ই-কমার্স অ্যাপে একটি শপিং কার্ট আনার অনুরোধ রয়েছে। একটি বর্তমান শপিং কার্ট সংরক্ষণ করা হয়েছে কিনা তা দেখার জন্য আমরা একটি অনুরোধ পাঠাচ্ছি। শেষ পর্যন্ত অনুরোধের মধ্য দিয়ে যেতে, আমাদের কাছে একটি alert() আছে যে ত্রুটি প্রদর্শন করবে, যদি থাকে।

যেহেতু একটি সক্রিয় শপিং কার্ট নেই আমরা এই ত্রুটিটি পেয়েছি:

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

return fetch('/login', {
      credentials: 'include',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(creds)
    })
    .then(resp => resp.json())
    .then(response => {
      if (response.error) {
        alert(response.error)
      }

এখানে, alert() একটি লগ-ইন ফর্মের সাথে যুক্ত ত্রুটি বার্তা প্রদর্শন করবে। যদি কোনও ব্যবহারকারী ফর্মটি পূরণ না করে লগ-ইন করার চেষ্টা করে, আমরা এই ত্রুটিগুলি পাই:

এটি alert() ব্যবহার করে ব্যবহারকারীর অভিজ্ঞতা নির্দেশ করার একটি উদাহরণ বৈধতা প্রদর্শন করতে।

আমরা দেখেছি কিভাবে alert() ডেভেলপমেন্ট সাইড এবং ক্লায়েন্ট সাইড উভয়ই ব্যবহার করা যেতে পারে — ব্যবহারকারী যা দেখেন। আসুন আমরা যা শিখেছি তা পুনর্ব্যক্ত করার জন্য কিছুক্ষণ সময় নিই।

উপসংহার

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

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

এখন পর্যন্ত, আপনার alert()-এর সাধারণ ব্যবহার সম্পর্কে ধারণা থাকা উচিত . বিভিন্ন কার্যকারিতা পরীক্ষা করার উপায় হিসাবে আপনার পরবর্তী জাভাস্ক্রিপ্ট প্রকল্পে এটি ব্যবহার করে দেখুন৷