طراحی و استفاده از فرم ها در جاوا اسکریپت

فرم ها یکی از عناصر پر کاربرد در صفحات وب می باشد که در سایت های داینامیک کاربرد فراوانی دارند. دسترسی به عناصر موجود در فرم مانند input, button و ... از نیازهای اساسی برنامه نویسی تحت وب می باشد که به وسیله آن عملیات بسیاری مانند اعتبارسنجی اطلاعات، ساخت برنامه های Client Side و ... قابل انجام می باشد.

نحوه استفاده

در بخش آموزش HTML نحوه استفاده از کنترل های مختلف مانند input, button, checkbox و ... در صفحات وب آموزش داده شد. توسط جاوا اسکریپت می توانید با توجه به اطلاعات وارد شده، گزینه های انتخاب شده یا هنگام کلیک بر روی دکمه ها، عملیات مورد نیاز خود را انجام دهید.

Button

Button ها دکمه های عملیاتی در جاوا اسکریپت می باشند که از آنها برای اجرای دستورات استفاده می شود. این دستورات معمولا در یک function تعریف شده و خاصیت onclick مربوط به دکمه مورد نظر فراخوانی می شوند.

مثال: صفحه ای طراحی کنید که با کلیک بر روی button پیغام خوش آمد گویی به کاربر نمایش دهد.

برای حل این مثال ابتدا باید یک button به صفحه اضافه نمایید.

<button id="btnShow">Click on me!</button>

در ادامه می بایست یک function برای انجام عملیات مورد نظر تعریف کنید.

<script>
  function showMessage(){
    alert("Welcome to Beno Academy");
  }
</script>

و در نهایت در خاصیت onclick مربوط به دکمه، function را فراخوانی کنید.

<button id="btnShow" onclick="showMessage()">Click on me!</button>

کد کامل این مثال به شکل زیر خواهد بود:

<!DOCTYPE html>
<html>
  <head>
    <title>Beno academy | Javascript</title>
  </head>
  <body>
    <button id="btnShow" onclick="showMessage()">Click on me!</button>
    <script>
      function showMessage() {
        alert("Welcome to Beno Academy");
      }
    </script>
  </body>
</html>

دستری به اطلاعات Input

input ها که بسیاری از برنامه نویسیان آن را با نام TextBox می شناسند مهمترین عنصر در فرم های اینترنتی جهت دریافت اطلاعات از کاربر می باشد. برای دسترسی به اطلاعات وارد شده درون  input از خاصیت value می توان استفاده نمود.

مثال: صفحه ای طراحی کنید که نام کاربر را توسط input دریافت کرده و به وی پیغام خوش آمد گویی نمایش دهد.

برای حل این تمرین، به صفحه طراحی شده در مرحله قبل یک input به شکل زیر اضافه کنید.

Enter your name: <input id="txtName" />
<button id="btnShow" onclick="showMessage()">Click on me!</button>

حال در متد showMessage باید input مورد نظر را توسط Id آن در صفحه شناسایی کنیم.

var userInput = document.getElementById("txtName");

و در نهایت محتوای آن را به همراه پیغام نمایش دهیم.

alert("Hello " + userInput.value );

کد کامل این مثال به شکل زیر خواهد بود:

<!DOCTYPE html>
<html>
  <head>
    <title>Beno academy | Javascript</title>
  </head>
  <body>
    Enter your name: <input id="txtName" />
    <button id="btnShow" onclick="showMessage()">Click on me!</button>
    <script>
      function showMessage() {
        var userInput = document.getElementById("txtName");
        alert("Hello " + userInput.value );
      }
    </script>
  </body>
</html>

نمایش اطلاعات درون عناصر HTML

یکی دیگر از مواردی که ممکن است در طراحی صفحات خود به آن نیاز داشته باشید نمایش اطلاعات درون عناصری مانند div, span و ... می باشد. در این حالت با استفاده از خاصیت innerHtml می توان محتوای یک عنصر را مشخص نمود.

مثال: یک ماشین حساب ساده حاوی دو input و چهار button طراحی کنید که با کلیک روی هریک از buttonها یکی از عملیات چهارگانه جمع، تفریق، ضرب و تقسیم را انجام دهد.

برای حل این مثال به روش های مختلف و متنوعی می توان عمل کرد که در این مقاله قصد داریم. ابتدا باید عناصر مورد نیاز جهت دریافت اطلاعات، انجام عملیات و نمایش نتیجه را در صفحه قرار دهیم.

Number 1: <input id="txtNum1" /> <br />
Number 2: <input id="txtNum2" /> <br />
<br />
<button id="btnAdd">+</button>
<button id="btnSub">-</button>
<button id="btnMul">*</button>
<button id="bdnDiv">/</button>
<br />
<span id="spnResult"></span>

در حل این مثال قصد داریم از span برای نمایش نتیجه استفاده نماییم. از آنجا که محتوای inputها نیاز است در چهار function مورد استفاده قرار گیرد، می توان یک متغیر عمومی برای ذخیره سازی نتیجه تعریف نمود تا مجبور به تعریف آنها بصورت مجزا درون هر function نباشیم.

<script>
  var result = 0;
</script>

حال باید برای هریک از عملیات یک function ایجاد کنیم.

<script>

  var result=0;
  function add(){
    var num1 = parseInt(document.getElementById("txtNum1").value);
    var num2 = parseInt(document.getElementById("txtNum2").value);
    result = num1 + num2;
    document.getElementById("spnResult").innerHTML ="Result is : " + result;
  }
  function sub(){
    var num1 = document.getElementById("txtNum1").value;
    var num2 = document.getElementById("txtNum2").value;
    result = num1 - num2;
    document.getElementById("spnResult").innerHTML ="Result is : " + result;
  }
  function mul(){
    var num1 = document.getElementById("txtNum1").value;
    var num2 = document.getElementById("txtNum2").value;
    result = num1 * num2;
    document.getElementById("spnResult").innerHTML ="Result is : " + result;
  }
  function div(){
    var num1 = document.getElementById("txtNum1").value;
    var num2 = document.getElementById("txtNum2").value;
    result = num1 / num2;
    document.getElementById("spnResult").innerHTML ="Result is : " + result;
  }
</script>

و در نهایت می بایست هریک از این function ها را در button مربوط به خود فراخوانی کنیم.

<button id="btnAdd" onclick="add()">+</button>
<button id="btnSub" onclick="sub()">-</button>
<button id="btnMul" onclick="mul()">*</button>
<button id="bdnDiv" onclick="div">/</button>

کد کامل این مثال به شکل زیر خواهد بود:

<!DOCTYPE html>
<html>
  <head>
    <title>Beno academy | Javascript</title>
  </head>
  <body>
    Number 1: <input id="txtNum1" /> <br />
    Number 2: <input id="txtNum2" /> <br />
    <br />
    <button id="btnAdd" onclick="add()">+</button>
    <button id="btnSub" onclick="sub()">-</button>
    <button id="btnMul" onclick="mul()">*</button>
    <button id="bdnDiv" onclick="div()">/</button>
    <br />
    <span id="spnResult"></span>
    <script>
      var result = 0;
      function add() {
        var num1 = parseInt(document.getElementById("txtNum1").value);
        var num2 = parseInt(document.getElementById("txtNum2").value);
        result = num1 + num2;
        document.getElementById("spnResult").innerHTML =
          "Result is : " + result;
      }
      function sub() {
        var num1 = document.getElementById("txtNum1").value;
        var num2 = document.getElementById("txtNum2").value;
        result = num1 - num2;
        document.getElementById("spnResult").innerHTML =
          "Result is : " + result;
      }
      function mul() {
        var num1 = document.getElementById("txtNum1").value;
        var num2 = document.getElementById("txtNum2").value;
        result = num1 * num2;
        document.getElementById("spnResult").innerHTML =
          "Result is : " + result;
      }
      function div() {
        var num1 = document.getElementById("txtNum1").value;
        var num2 = document.getElementById("txtNum2").value;
        result = num1 / num2;
        document.getElementById("spnResult").innerHTML =
          "Result is : " + result;
      }
    </script>
  </body>
</html>