مقدمات js برای برنامه نویسان بکند

در بخش های قبل با html آشنا شدید و دیدید که چطور می‌توان با استفاده از آن صفحات وب را توسعه داد.

محدودیت های html

فرض کنید می‌خواهیم پس از لود شدن صفحه، کاربر با یک کلیک روی دکمه، تم سایت را از حالت روشن (Light Mode) به تیره (Dark Mode) تغییر دهد. یا مثلاً بخواهیم منوی همبرگری با کلیک باز و بسته شود، یا فرمی قبل از ارسال اعتبارسنجی شود. انجام هیچ‌کدام از این کارها با خود HTML به تنهایی امکان‌پذیر نیست.

چرا؟ چون HTML یک زبان استاتیک است. وظیفه‌اش فقط توصیف ساختار اولیه و محتوای صفحه است، نه واکنش به رویدادها یا تغییر پویای ظاهر و محتوا. بدون جاوااسکریپت:

• نمی‌توانی به کلیک، تایپ، یا هر حرکت کاربر پاسخ دهی.
• نمی‌توانی بدون بارگذاری مجدد صفحه، چیزی را اضافه، حذف یا تغییر دهی.
• نمی‌توانی از سرور داده بگیری و قسمتی از صفحه را به‌روز کنی.
• حتی نمی‌توانی ساده‌ترین انیمیشن یا تعامل (مثل نمایش خطا در فرم) را اجرا کنی.

HTML فقط می‌تواند صفحات ایستا و خواندنی بسازد، مثل یک پوستر یا یک سند متنی. برای اینکه صفحه «زنده» شود و با کاربر گفتگو کند، به جاوااسکریپت نیاز داری. به عبارتی، HTML اسکلت صفحه است، CSS لباس آن، و JS روح و حرکت آن.

هدف این بخش

در این بخش ابتدا روش کار با دو api را با استفاده از جاوا اسکریپت به شما نمایش خواهم داد.

نوشتن اولین کد javascript

یک فایل html به نام index.html ایجاد کرده و کد زیر را در آن قرار دهید.

<button onclick="alert('Hello World!')">Click Me!</button>

<button onclick="alert('Hello World!')">Click Me!</button>

سپس آن را در مرورگر باز کنید. یک دکمه در صفحه خواهید دید. روی آن کلیک کنید. خروجی مشابه زیر خواهد بود.

تبریک! شما اولین برنامه خود را با js نوشتید. در ادامه این برنامه را کامل تر خواهیم کرد.

ارسال ویژگی به تابع

اکنون کد زیر را در index.html وارد کنید.

<button name="first-button" onclick="alert(this.name)">Click Me!</button>

<button name="first-button" onclick="alert(this.name)">Click Me!</button>

اگر صفحه را رفرش کرده و روی دکمه کلیک کنید خواهید دید که مقدار ویژگی name که برابر first-button است نمایش داده خواهد شد.

در تکه کد بالا، this به همین دکمه اشاره می‌کند. پس می‌توان با استفاده از dot notation (یعنی همون نقطه) به ویژگی‌های this دسترسی داشته باشیم.

تعریف تابع در javascript

alert که در کد قبلی دیدید یکی از توابع آماده جاوا اسکریپت است که یک مقدار را چاپ می‌کند. اکنون اگر بخواهیم با کلیک کردن روی دکمه، سناریوی خاص خودمان را داشته باشیم، باید تابع خودمان را اجرا کنیم. بدین منظور باید ببینیم که چطور می‌توان در جاوا اسکریپت تابع را تعریف کرد.

برای تعریف تابع، کد زیر را وارد کنید.

<button name="first-button" onclick="showName(this)">Click Me!</button>
<script>
  function showName(button) {
    alert(button.name)
  }
</script>

<button name="first-button" onclick="showName(this)">Click Me!</button>
<script>
  function showName(button) {
    alert(button.name)
  }
</script>

در کد بالا، یک تابع به نام showName تعریف کردیم که دکمه را به عنوان ورودی می‌گیرد و مقدار اتریبیوت name آن را چاپ می‌کند.

فراخوانی API با javascript

اکنون کد زیر را وارد کنید.

<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    fetch('http://localhost:8000/api/hello')
      .then(response => response.text())
      .then(data => {
          console.log(data);
      })
      .catch(error => {
          console.error('Error: ', error);
      });
  }
</script>

<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    fetch('http://localhost:8000/api/hello')
      .then(response => response.text())
      .then(data => {
          console.log(data);
      })
      .catch(error => {
          console.error('Error: ', error);
      });
  }
</script>

در این کد:

• خط ۴: با استفاده از تابع fetch یک درخواست به سمت سرور ارسال می‌کنیم.
• خط ۵: با استفاده از تابع then پاسخ سرور را گرفته و به متن تبدیل می‌کنیم.
• خط ۶ تا ۸: با استفاده از console.log پاسخی که در مرحله قبل به متن تبدیل کردیم را در کنسول چاپ می‌کنیم.
• خط ۹ تا ۱۱: در این قسمت اگر به هر دلیل موفق به دریافت پاسخ از سرور نشویم، یک خطا در کنسول چاپ می‌کنیم.

اکنون مرورگر را باز کنید و رفرش کنید و سپس روی دکمه کلیک کنید. سپس با استفاده از F12 بخش Developer Tools را باز کنید و سپس به تب Console بروید. خروجی به شکل زیر خواهد بود.

این Hello از سمت بکند دریافت شده است.

به روز رسانی صفحه با javascript

اکنون کد زیر را قرار دهید.

<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    fetch('http://localhost:8000/api/hello')
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
          console.error('Error: ', error);
      });
  }
</script>

<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    fetch('http://localhost:8000/api/hello')
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
          console.error('Error: ', error);
      });
  }
</script>

در کد بالا:

• خط ۱: یک div خالی در نظر گرفته شده که بتوانیم خروجی api را در آن قرار دهیم.
• خط ۸ و ۹: div ای که برای نمایش نتیجه در نظر گرفته بودیم را با استفاده از js میگیریم و خروجی api را در آن قرار می‌دهیم.

اکنون مرورگر را رفرش کرده و روی دکمه کلیک کنید. خروجی مشابه زیر خواهد بود.

ارسال ورودی به api

اغلب api ها به این سادگی نیستند و ورودی می‌گیرند. یکی از سادهترین شکل های ممکن برای ارسال ورودی به یک api ارسال آن ها از طریق url است. در ادامه خواهیم داد که چطور به این شکل می‌توان به یک api ورودی ارسال کرد.

کد زیر را وارد کنید.

<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    fetch('http://localhost:8000/api/hello/mohammadreza')
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
          console.error('Error: ', error);
      });
  }
</script>

<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    fetch('http://localhost:8000/api/hello/mohammadreza')
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
          console.error('Error: ', error);
      });
  }
</script>

در کد بالا، مقدار mohammadrza را به api ارسال می‌کنیم و در خروجی مقدار hello mohammadreza را دریافت خواهیم کرد.

مرورگر را باز کنید، صفحه را رفرش کرده و روی دکمه کلیک کنید. خروجی مشابه زیر خواهد بود.

مشکل کد فعلی این است که همیشه یک مقدار ثابت را به api ارسال میکند و همین باعث میشود که همیشه یک خروجی ثابت دریافت کند. اکنون باید تغییراتی ایجاد کنیم که کاربر بتواند ورودی های دلخواهش را وارد کند.

بدین منظور با قرار دادن کد زیر، یک input در صفحه قرار می‌دهیم که کاربر بتواند ورودی را از طریق آن وارد کند.

<input id="input">
<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    input = document.getElementById('input')
    fetch('http://localhost:8000/api/hello/' + input.value)
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
          console.error('Error: ', error);
      });
  }
</script>

<input id="input">
<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    input = document.getElementById('input')
    fetch('http://localhost:8000/api/hello/' + input.value)
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
          console.error('Error: ', error);
      });
  }
</script>

در کد بالا:

• خط ۱: یک اینپوت قرار دادیم. که کاربر بتواند ورودی را در آن بنویسد.
• خط ۶: اینپوت مورد نظر را میگیریم.
• خط ۷: مقدار اینپوت را در آدرس api قرار می‌دهیم.

اکنون صفحه را رفرش کنید. سپس مقداری وارد کرده و روی دکمه کلیک کنید. خروجی مشابه زیر خواهد بود.

مدیریت خطا

اگر سرور را از دسترس خارج کنید و سپس فرم را ثبت کنید، خواهید دید که چیزی در خروجی نمایش داده نخواهد شد. خودتان را به جای کاربر در نظر بگیرید. در اینصورت او نمیداند که چرا فرم کار نمی‌کند. اکنون لازم است به کاربر اطلاع بدهیم که سرور از دسترس خارج شده.

بدین منظور کد زیر را وارد کنید.

<input id="input">
<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    input = document.getElementById('input')
    fetch('http://localhost:8000/api/hello/' + input.value)
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
        element = document.getElementById('result')
        element.innerHTML = error
      });
  }
</script>

<input id="input">
<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    input = document.getElementById('input')
    fetch('http://localhost:8000/api/hello/' + input.value)
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
        element = document.getElementById('result')
        element.innerHTML = error
      });
  }
</script>

اکنون اگر در حالتی که سرور از دسترس خارج شده باشد فرم را ثبت کنید خروجی مشابه زیر خواهد بود.

خطایی که نمایش داده میشود ظاهری شبیه به حالتی دارد که خروجی به درستی از سرور دریافت می‌شود. ظاهر خطا باید کمی با حالت عادی متفاوت باشد. بدین منظور کد را به شکل زیر اصلاح کنید.

<input id="input">
<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    input = document.getElementById('input')
    fetch('http://localhost:8000/api/hello/' + input.value)
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
        element = document.getElementById('result')
        errorBox = `
        <div style="background-color: pink">
          ${error}
        </div>`
        element.innerHTML = errorBox
      });
  }
</script>

<input id="input">
<div id="result"></div>
<button name="first-button" onclick="fetchAPI(this)">Click Me!</button>
<script>
  function fetchAPI(button) {
    input = document.getElementById('input')
    fetch('http://localhost:8000/api/hello/' + input.value)
      .then(response => response.text())
      .then(data => {
        element = document.getElementById('result')
        element.innerHTML = data
      })
      .catch(error => {
        element = document.getElementById('result')
        errorBox = `
        <div style="background-color: pink">
          ${error}
        </div>`
        element.innerHTML = errorBox
      });
  }
</script>

اکنون خروجی فرم در مرورگر باید مشابه زیر باشد.