سلام.

به اولین پست آموزشی جهان تولز خوش اومدید.

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

پیش نیاز ها :

html

java script

بهتره css هم بلد باشید.

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

خب اول

ساختن یک صفحه html :

    

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. background-color: #ff6500;
  7. direction: rtl;
  8. font-family:tahoma;
  9. font-size: 20px;
  10. color: white;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. </body>
  16. </html>

دوم

گذاشتن تگ اسکریپت برای گذاشتن کد های جاوا اسکریپت :

    

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. background-color: #ff6500;
  7. direction: rtl;
  8. font-family:tahoma;
  9. font-size: 20px;
  10. color: white;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <script>
  16. </script>
  17. </body>
  18. </html>
    19.

سوم

گذاشتن کد جاوا اسکریپت

    

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. background-color: #ff6500;
  7. direction: rtl;
  8. font-family:tahoma;
  9. font-size: 20px;
  10. color: white;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <script>
  16. ​function abzar(){
  17.   var a;
  18.   a = document.getElementById("name").value;
  19.   document.getElementById("nameview").value = "سلام " +  a  + " خوبی؟";
  20.  }
  21. </script>
  22. </body>
  23. </html>
    24.

چهارم

گذاشتن کد های html برای دریافت مقدار

    

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. background-color: #ff6500;
  7. direction: rtl;
  8. font-family:tahoma;
  9. font-size: 20px;
  10. color: white;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <center>
  16. <p>نامتون : <input id="name" type="text"></p>
  17. <p><input type="button" value="نمایش نام" onclick="abzar()"></p>
  18. <p><textarea id="nameview" rows="10" cols="35"></textarea></p>
  19. </center>
  20. <script>
  21. ​function abzar(){
  22.   var a;
  23.   a = document.getElementById("name").value;
  24.   document.getElementById("nameview").value = "سلام " +  a  + " خوبی؟";
  25.  }
  26. </script>
  27. </body>
  28. </html>
    29.

نمایش نتیجه

لینک آموزش کد ها :

آموزش کامل ساختار یک فایل HTML

آموزش تگ script در HTML

کار با توابع یا Functions در جاوا اسکریپت

کار با متغیرها یا Variables در جاوااسکریپت

متد getElementById در DOM جاوااسکریپت

آموزش صفت عمومی ID در HTML

آموزش تگ input در HTML

آموزش رویداد عمومی OnClick در HTML

آموزش تگ textarea در HTML

آموزش صفت Rows در HTML

آموزش صفت Cols در HTML

تمام لینک های آموزشی بالا از سایت آموزشی فری لرن است.