Pratik JavaKaynak Kodlu Örnek Betikler Code

Bunlarda Neler İnşa Edeceksiniz? JavaSenaryo Örnekleri

Aşağıdaki örneklerin her biri, derleme adımı veya harici kütüphane gerektirmeden herhangi bir tarayıcıda çalışan eksiksiz bir HTML sayfasıdır. Bunlar birlikte, neredeyse her tarayıcı betiğinde bulunan üç beceriyi kapsar: verilerden işaretleme oluşturma, kullanıcı girdisini doğrulama ve olaylara tepki verme.

Temel aşinalık JavaSenaryo Sözdiziminin bilindiği varsayılmaktadır. Döngüler hala size yabancı geliyorsa, okuyun. Döngüler nasıl kullanılır? JavaSenaryo başlamadan önce.

Örnek 1: JavaKomut dosyası Çarpım Tablosu

Kullanıcıdan satır ve sütun sayısını isteyen basit bir çarpım tablosu oluşturun.

Çözüm:

<html>
<head>
  <title>Multiplication Table</title>
  <script type="text/javascript">
    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols);
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
      for(i=1;i<=rows;i++)
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>";
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }
  </script>
</head>
<body>
</body>
</html>

Çıktı (3 satır ve 4 sütun):

1   2   3   4
2   4   6   8
3   6   9  12

Code açıklama: Dıştaki for döngüsü her yinelemede bir tablo satırı oluştururken, içteki while döngüsü bu satırı her sütuna bir hücre yerleştirerek doldurur. Sayaç j Her satırdan sonra 1'e sıfırlanır; bu, çoğu acemi kullanıcının unuttuğu adımdır. Bu sıfırlama yapılmazsa, yalnızca ilk satırda hücreler bulunur.

Örnek #2: JS Form Örneği

Kullanıcıdan ad, soyad, e-posta, kullanıcı kimliği, parola ve parola onayı bilgilerini toplayan örnek bir form programı oluşturun. Tüm girişler zorunludur ve girilen e-posta adresi doğru formatta olmalıdır. Ayrıca, parola ve parola onayı metin kutularına girilen değerler aynı olmalıdır. Doğrulama işleminden sonra... JavaSenaryoHata oluştuğu metin kutusunun hemen yanında, kırmızı renkte uygun hata mesajları görüntülenmelidir.

Kaynaklı Çözüm Code:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    var divs = new Array();
    divs[0] = "errFirst";
    divs[1] = "errLast";
    divs[2] = "errEmail";
    divs[3] = "errUid";
    divs[4] = "errPassword";
    divs[5] = "errConfirm";
    function validate()
	{
      var inputs = new Array();
      inputs[0] = document.getElementById('first').value;
      inputs[1] = document.getElementById('last').value;
      inputs[2] = document.getElementById('email').value;
      inputs[3] = document.getElementById('uid').value;
      inputs[4] = document.getElementById('password').value;
      inputs[5] = document.getElementById('confirm').value;
      var errors = new Array();
      errors[0] = "<span style='color:red'>Please enter your first name!</span>";
      errors[1] = "<span style='color:red'>Please enter your last name!</span>";
      errors[2] = "<span style='color:red'>Please enter your email!</span>";
      errors[3] = "<span style='color:red'>Please enter your user id!</span>";
      errors[4] = "<span style='color:red'>Please enter your password!</span>";
      errors[5] = "<span style='color:red'>Please confirm your password!</span>";
      for (i in inputs)
      {
        var errMessage = errors[i];
        var div = divs[i];
        if (inputs[i] == "")
        	document.getElementById(div).innerHTML = errMessage;
        else if (i==2)
        {
          var atpos=inputs[i].indexOf("@");
          var dotpos=inputs[i].lastIndexOf(".");
          if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
        	document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
          else
        	document.getElementById(div).innerHTML = "OK!";
        }
        else if (i==5)
        {
          var first = document.getElementById('password').value;
          var second = document.getElementById('confirm').value;
          if (second != first)
        	document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
          else
       		document.getElementById(div).innerHTML = "OK!";
        }
        else
        	document.getElementById(div).innerHTML = "OK!";
       }
     }
        function finalValidate()
        {
          var count = 0;
          for(i=0;i<6;i++)
          {
            var div = divs[i];
            if(document.getElementById(div).innerHTML == "OK!")
            count = count + 1;
          }
          if(count == 6)
          	document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
        }
   </script>
</head>
<body>
	<table id="table1">
      <tr>
        <td>First Name:</td>
        <td><input type="text" id="first" onkeyup="validate();" /></td>
        <td><div id="errFirst"></div></td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td><input type="text" id="last" onkeyup="validate();"/></td>
        <td><div id="errLast"></div></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td><input type="text" id="email" onkeyup="validate();"/></td>
        <td><div id="errEmail"></div></td>
      </tr>
      <tr>
        <td>User Id:</td>
        <td><input type="text" id="uid" onkeyup="validate();"/></td>
        <td><div id="errUid"></div></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" id="password" onkeyup="validate();"/></td>
        <td><div id="errPassword"></div></td>
      </tr>
      <tr>
        <td>Confirm Password:</td>
        <td><input type="password" id="confirm" onkeyup="validate();"/></td>
        <td><div id="errConfirm"></div></td>
      </tr>
      <tr>
        <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
        <td><div id="errFinal"></div></td>
      </tr>
	</table>
</body>
</html>

Beklenen Davranış:

Empty first name        -> Please enter your first name!
Email "ann@site"        -> Enter a valid email address!
Email "ann@site.com"    -> OK!
Passwords differ        -> Your passwords don't match!
All six fields valid    -> All the data you entered is correct!!!

Code açıklama: Üç dizi paralel olarak çalışıyor. girişler mevcut değerleri tutar, hataları Eşleşen mesajları tutar ve div'ler Her mesajı görüntüleyen konteynerin kimliğini içerir. Bu nedenle indeks, bir alanı, hata metnini ve çıktı konumunu birbirine bağlar. E-posta dalı, yalnızca "@" işareti ilk karakter olmadığında ve "@" işareti ile son nokta arasında en az iki karakter bulunduğunda bir adresi kabul eder.

Örnek #3: Olay Kullanarak Açılır Pencere Mesajı

Demo web sayfanızda basit bir "Hoş geldiniz!!!" mesajı görüntüleyin ve kullanıcı fareyi mesajın üzerine getirdiğinde "Web sayfama hoş geldiniz!!!" mesajını içeren bir açılır pencere görüntülenmelidir.

Çözüm:

<html>
    <head>
        <title>Event!!!</title>
        <script type="text/javascript">
            function trigger() {
                document.getElementById("hover").addEventListener("mouseover", popup);
                function popup() {
                    alert("Welcome to my WebPage!!!");
                }
            }
        </script>
        <style>
            p{
                font-size: 50px;
                position: fixed;
                left: 550px;
                top: 300px;
            }
        </style>
    </head>
    <body onload="trigger();">
        <p id="hover">Welcome!!!</p>
    </body>
</html>

Beklenen Davranış:

Page loads      -> the text "Welcome!!!" appears in large type
Mouse hovers    -> an alert box shows "Welcome to my WebPage!!!"

Code açıklama: Dinleyici, body onload olayında çalışan tetikleyici fonksiyonun içine eklenmiştir. Yüklemenin beklenmesi önemlidir, çünkü "hover" kimliğine sahip paragraf, head etiketi henüz ayrıştırılırken mevcut değildir. Aynı sonuç, betiği kapanış body etiketinden hemen önce yerleştirerek veya defer özniteliğini ekleyerek daha temiz bir şekilde elde edilebilir.

Örnek #4: Canlı DigisetInterval kullanarak tal Clock

Sayfada geçerli saati gösterin ve her saniye bir kez yenileyin. Bu örnek, zamanlayıcıları tanıtır ve document.write'a modern bir alternatif sunar.

<html>
<head>
    <title>Digital Clock</title>
</head>
<body>
    <h2 id="clock">--:--:--</h2>

    <script>
        function showTime() {
            const now = new Date();
            const hh = String(now.getHours()).padStart(2, "0");
            const mm = String(now.getMinutes()).padStart(2, "0");
            const ss = String(now.getSeconds()).padStart(2, "0");

            // textContent is safer than innerHTML for plain text
            document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss;
        }

        showTime();                 // draw immediately
        setInterval(showTime, 1000); // then refresh every second
    </script>
</body>
</html>

Beklenen Davranış:

09:05:07
09:05:08
09:05:09   (the heading updates in place once per second)

setInterval'den önce showTime'ı bir kez çağırmak, sayfa açıldığında görünen bir saniyelik gecikmeyi önler. Saatin durması gerektiğinde, setInterval tarafından döndürülen değerle clearInterval'ı kullanın.

Bunları Yazmak İçin En İyi Uygulamalar JavaSenaryo Örnekleri

Üç orijinal örnek, daha eski bir stile aittir. JavaSenaryo. Aşağıdaki liste, bunları üretim ortamına uyarlarken nelerin değiştirilmesi gerektiğini göstermektedir.

1. document.write'ı değiştirin: Sayfa yüklendikten sonra çağrıldığında tüm belgeyi siler. Bunun yerine bir öğe oluşturun ve textContent'i ayarlayın veya bir düğüm ekleyin.
2. Her değişkeni tanımlayın: Sayaç gibi örtük global değişkenlere güvenmek yerine `let` ve `const` kullanın. i Yukarıdaki döngülerde.
3. textContent'i innerHTML'e tercih edin: innerHTML kullanarak kullanıcı tarafından sağlanan metni eklemek, siteler arası komut dosyası çalıştırma açığı oluşturur.
4. Taşıma işleyicilerini işaretleme kodunun dışına taşıyın: onkeyup ve onclick özniteliklerini, davranışı yapıdan ayrı tutan addEventListener ile değiştirin.
5. İstem girişini dönüştür: İstemi her zaman bir dize döndürdüğü için, karşılaştırmalarda kullanmadan önce değerleri Number() içine alın.
6. Sunucuda tekrar doğrulama yapın: Tarayıcı kontrollerini yalnızca bir kolaylık katmanı olarak değerlendirin.

Bu örnekleri daha da ileri götürmek için, inceleyin. JavaKomut dosyası dizi yöntemleri Form doğrulayıcıda kullanılan paralel diziler için, JavaKomut dosyası dizeleri e-posta konum kontrolleri için ve çerezlerde JavaSenaryo Ziyaretçinin girdiği değerleri hatırlamak için. Tamamlanmış betiğin nereye ait olduğuna karar vermek için okuyun. dahili ve harici JavaSenaryo.

SSS