Cara menggunakan number guess game javascript

Blockly Games merupakan sekumpulan permainan edukatif yang mengajarkan programming. Tujuan aslinya dibuat untuk anak-anak. Namun kita bisa memanfaatkannya untuk melatih kemampuan logika. Sekaligus juga melihat alternatif lain belajar pemrograman. Anggaplah ini sebagai having fun bagimu di samping materi serius yang lain.

Blockly Games terdiri dari:

• Puzzle
• Maze
• Bird
• Turtle
• Movie
• Pond

Document Object Model (DOM) merupakan antarmuka pemrograman untuk dokumen HTML dan XML (juga SVG) terkait. Dengan DOM, kita bisa mengetahui dan mengatur struktur representasi dokumen melalui program terutama JavaScript. Program dapat mengolah struktur, style, dan isi dari dokumen tersebut. Maka dari itu DOM membutuhkan dan menghubungkan antara dokumen dan kode pemrograman.

Seperti yang telah diketahui sebelumnya bahwa hampir semua hal di JavaScript adalah objek, maka begitupun pada HTML yang kita ketahui melalui DOM. Kombinasi interaksi antarmuka antara DOM dan JavaScript ini juga dapat dilakukan karena adanya Application Programming Interface (API). API memungkinkan sebuah program berkomunikasi dengan program yang lain dengan cara tertentu. Dengan API, bahasa selain JavaScript seperti Python dan Ruby jadi bisa juga mengakses dokumen HTML dan XML.

DOM API di HTML umumnya adalah untuk node ataupun objek element,

document.write("Hello!");

document.write("Hello!");

• document.write("Hello!");

  1:

  document.write("Hello!");

  3,

  document.write("Hello!");

  4,

  document.write("Hello!");

  5,

  document.write("Hello!");

  6

  • document.write("Hello!");

    7

  • document.write("Hello!");

    8

  • document.write("Hello!");

    0
    • element:

      <button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

      1,

      <button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

      2,

      <button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

      3,

      <button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

      4, dll

Hubungan antar berbagai “object” tersebut atau yang akan kita sebut seterusnya dengan “node” adalah antara parent untuk yang di atasnya, children untuk yang di bawahnya, dan sibling yang hierarkinya sama.

Umumnya kita bisa melakukan perubahan DOM dengan JavaScript seperti berikut:

document.getElementsByTagName("h1")[0].innerHTML = "Article Title";
document.getElementsById("title").innerHTML = "Article Title";
document.getElementsByClassName("title").innerHTML = "Article Title";

Mirip dengan cara mencetak JavaScript ke halaman web!

document.write("Hello!");

• ▢ Tontonlah video ini jika perlu: Document Object Model (DOM), by Think Vitamin

Objectives

• ▢ Mengenal events secara umum dan secara object.
• ▢ Mengenal keyword

  <button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

  5.
• ▢ Mengelola events dengan model event handler ataupun listener.

Learnings

Mengenal events

Events atau kejadian merupakan sinyal dari browser untuk menandakan bahwa sesuatu sedang terjadi. Misalnya event/sinyal saat suatu tombol keyboard ditekan, mouse diklik, mouse sedang hover ke sebuah elemen, dan lain-lain. Kebanyakan aplikasi di browser melakukan sesuatu/aksi karena respon terhadap event.

Ada beberapa tipe event:

• event pada DOM yang diinisiasi oleh element DOM, seperti click dan mouseover
• event pada window, seperti resize dan minimize windows
• event lainnya, seperti load dan state ready

Setiap mengatur event, kita akan gunakan function yang akan dipanggil terhadap event tersebut. Function ini disebut event handler. Penamaan function-nya biasanya berpola

<button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

<button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

<button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

Penggunaan dasarnya seringkali ada pada HTML tag…

<button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

Dengan event yang kita pasang di dalam form, lalu adanya function JavaScript yang dipanggil saat ada event click, kita bisa membuat kalkulator sederhana yang lebih ramah pengguna.

<form name="addition">
  <input name="firstNumber" type="number">
  <span>+</span>
  <input name="secondNumber" type="number">
  <input name="addButton" type="button" value="=" onclick="addNumbers()">
  <input name="result" type="number" value="">
</form>

<script type="text/javascript">
  function addNumbers() {
    console.log(`Penambahan`);
    var form = document.forms.addition;
    var x = form.elements.firstNumber.value;
    var y = form.elements.secondNumber.value;
    var z = Number(x) + Number(y);
    console.log(`${x} + ${y} = ${z}`);
    form.elements.result.value = z;
  }
</script>

Objectives

• ▢ Mengulas kembali dan memahami scope lebih lanjut.

Learnings

Cakupan atau scope pada JavaScript berhubungan erat dengan konsep global dan local. Global dan local ini dipengaruhi oleh lokasi saat kita deklarasikan. Variabel local bisa saja memiliki identifier yang sama dengan variabel global, tapi konteksnya berbeda. Jika kita ganti nilai suatu variabel yang namanya sama namun konteksnya berbeda, pengaruh hanya terjadi pada variabel dalam konteks yang kita perlakukan.

// global scope
var example = "Global";

function testExample() {
  // local scope
  var example = "Local";
  return example;
}

console.log(example); // Global
console.log(testExample()); // Local

Dengan kode di atas, jika kita tidak/belum mendeklarasikan variabel

<button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

<form name="addition">
  <input name="firstNumber" type="number">
  <span>+</span>
  <input name="secondNumber" type="number">
  <input name="addButton" type="button" value="=" onclick="addNumbers()">
  <input name="result" type="number" value="">
</form>

Selain variabel bahkan kita bisa mengatur scope function seperti…

// global scope
var functionA = function() {
  // local scope in functionA
  var functionB = function() {
    // local scope in functionB, in functionA
  };
};

Hukum global dan local adalah hal atau objek global dapat diakses di local, namun tidak sebaliknya.

var example = "Example"
var functionA = function() {
  console.log(example + " in A");
  var functionB = function() {
    console.log(example + " in B"); // it's possible
  };
  functionB();
};
functionA();

Scope juga berkaitan dengan

<button onclick="document.write('<p>Cleared.</p>');">Clear!</button>

var functionA = function() {
  console.log(this); // global Window object
}

var sampleObject = {};
sampleObject.functionB = function() {
  console.log(this); // Object of sampleObject
}

functionA();
sampleObject.functionB();

Maka dari itu, perhatikanlah dan berhati-hatilah waktu dan letak kita mendeklarasikan variabel atau function. Untuk memperkuat pemahaman kamu, bacalah referensi yang disertakan berikut.