Мне нужна помощь в чтении этого кода, чтобы понять, что он делает, чтобы я мог преобразовать его в JavaScript

Question

Я новичок в программировании и что изучать JavaScript.Я знаю, что jQuery - это библиотека JavaScript, но синтаксис такой разный, и мне просто нужна помощь в чтении того, что делает код, чтобы я мог воссоздать его с помощью JavaScript.

Я работаю над проектом из YouTubeучебник, который добавляет элементы в базу данных WebSQL с помощью jQuery Mobile. Я нахожусь в той точке учебника, где мы обновляем элемент, который мы ввели.Код может заполнить форму обновления информацией, которую мы ввели.Код работает отлично, но он в jQuery, и я хотел изменить его на JavaScript, если это возможно.Можете ли вы помочь мне, объяснив, что на самом деле делает код и как преобразовать его в JavaScript?Спасибо заранее.

HTML-код формы обновления

       <div data-role="header">
           <h1>Update Product</h1>
       </div>
       <div data-role="main" class="ui-content">
           <form>
               <div class="ui-field-contain">
                   <label for="newName" class="ui-hidden-accessible">Name</label>
                   <input type="text" id="newName" data-clear-btn="true" placeholder="New Name"/><br/>
                   <label for="newQuantity" class="ui-hidden-accessible">Quantity</label>
                   <input type="number" name="number" pattern="[0-9}" id="newQuantity" value="" data-clear-btn="true" placeholder="New Quantity"/><br/>
                   <button class="ui-btn ui-icon-plus ui-btn-icon-left"
                           id="btnupdate" onclick="updateProduct()">Update</button>
               </div>
           </form>

       </div>
````    </div>

JavaScript Code of populating the form and then updating the changes.

````var currentProduct = {
  id:-1,
  name: "",
  quantity:-1,
````}

````$(document).on('pagebeforeshow', '#updatedialog', function() {
 $('#newName').val(currentProduct.name);
 $('#newQuantity').val(currentProduct.quantity);
});

function updateProduct() {
 var newName = $('#newName').val();
 var newQuantity = $('#newQuantity').val();
 productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

    databaseHandler.db.transaction(
        function(tx){
            tx.executeSql(
            "Update product set name=?, quantity=? where id=?",
             [newName, newQuantity, _id],
              function(tx, results){},
               function(tx, error){//todo: display this message to user
                    console.log("Error updating product" + error.message);
                 }
               );
        }
    );
}

Я хотел бы заполнить форму обновления информацией о продукте, изменить любую информацию в форме и обновитьинформация с использованием JavaScript, а не jQuery.

Answer 1

Вот части jQuery:

$(document).on('pagebeforeshow', '#updatedialog', function() {
    $('#newName').val(currentProduct.name);
    $('#newQuantity').val(currentProduct.quantity);
});

function updateProduct() {
    var newName = $('#newName').val();
    var newQuantity = $('#newQuantity').val();
    productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

А вот как вы можете преобразовать их в чистый JavaScript:

document.getElementById("updatedialog").addEventListener("pagebeforeshow", function() {
    document.getElementById("newName").value = currentProduct.name;
    document.getElementById("newQuantity").value = currentProduct.name;
});

function updateProduct() {
    var newName = document.getElementById("newName").value
    var newQuantity = document.getElementById("newQuantity").value
    productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

Answer 2

Всякий раз, когда мне нужно изменить код JQuery на Javascript, я использую эту веб-страницу: http://youmightnotneedjquery.com/ и Jquery на Javascript .У вас должна быть вся необходимая информация, чтобы изменить части Jquery на javascript.

Наиболее очевидным является замена "$" на document.querySelectorAll.

Пример:

$('#newName').val(currentProduct.name);

Заменить на:

document.getElementById('newName').value = currentProduct.name;

Надеюсь, это поможет!