Fungsi setattribute onclick javascript dengan parameter

Question

Sejak dirilis pada 4 Desember 1995 (enam bulan setelah Java yang dirilis pada 23 Mei 1995), JavaScript telah mengalami banyak perubahan. JavaScript dimulai sebagai bahasa pemrograman sisi klien (yang berjalan di dalam browser web melalui mesin JavaScript bawaan) untuk menambahkan konten interaktif ke halaman web. Itu menjadi lebih kuat dengan DHTML (1997) dan Ajax (1999). With Node. js (released in May 27, 2009), JavaScript can be used to program server-side and build full-stack web applications, as well as standalone utility scripts. In 2015, the ECMAScript 6 (ES6 or ES2015) introduces major update to the language, such as classes and modules, and make JavaScript a general-purpose programming language capable of complex software tasks

Table of Contents Show

Introduction
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
JavaScript Sisi Klien berdasarkan Contoh
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
elemen, tigaelemen dengan alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')17, dan tiga JavaScript Example: User-defined function and onclick Event Handler Example on event and user-defined function
elemen dalam array alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')_25. Kami kemudian menggunakan for-loop untuk mengulangi semua elemen dalam array. Properti alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')_26 menyimpan panjang array
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
JavaScript Sisi Server berdasarkan Contoh
Sintaks Dasar JavaScript
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Testing Loop
Testing Loop
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Example on event and user-defined function
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Built-in JavaScript Objects
Testing Loop
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Example on event and user-defined function
Example on event and user-defined function
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
More on Objects
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Document Object Model (DOM) API for JavaScript
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!

Introduction

It began as a Client-side Programming Language run inside a web browser via a Built-in JavaScript Engine

JavaScript is the most widely used client-side programming language that lets you supercharge your HTML with interactivity, animation and dynamic visual effect for better User Interface and User Experience (UI/UX). Dia

bahasa scripting yang kecil, ringan, berorientasi objek, lintas platform, bertujuan khusus dimaksudkan untuk dijalankan di bawah lingkungan host (biasanya browser web)
bahasa skrip sisi klien untuk memperkaya antarmuka pengguna web dan membuat halaman web dinamis (mis. g. , untuk. validasi input, dan respons langsung terhadap tindakan pengguna)
mesin yang mendukung AJAX (JavaScript Asinkron dan XML - yang dapat digunakan untuk memperbarui satu bagian halaman web secara asinkron), yang menghasilkan pembaruan minat pada JavaScript

JavaScript bekerja sama dengan HTML/CSS. HTML menyediakan konten; . Bersama-sama, mereka memperkaya UI/UX pengguna web

JavaScript Sekarang Di Mana Saja dengan Node. js

JavaScript telah berkembang melampaui pemrograman sisi klien. Dengan diperkenalkannya Node. js pada tahun 2009 (lingkungan run-time JavaScript lintas-platform open-source), Anda dapat menjalankan JavaScript Anda sendiri atau di dalam server (bukan browser). Ini memungkinkan Anda untuk menggunakan satu bahasa tunggal untuk pemrograman sisi server dan sisi klien

Sejarah dan Versi

JavaScript, originally called LiveScript, was created by Brendan Eich at Netscape in 1995. Soon after, Microsoft launched its own version of JavaScript called JScript. Subsequently, Netscape submitted it to ECMA (formerly "European Computer Manufacturers Association", now "Ecma International - European association for standardizing information and communication systems") for standardization, together with Microsoft's JScript

The ECMA Specification is called "ECMA-262 ECMAScript Language Specification" @ http. //www. ecma-international. org/publications/standards/Ecma-262. htm (also approved as "ISO/IEC 16262")

ECMA-262 version 1 (June 1997). First edition
ECMA-262 version 2 (August 1998)
ECMA-262 version 3 (December 1999). Added regular expressions, try/catch, switch, do-while, etc
ECMA-262 version 4 - Abandon due to political differences. In 2007, the TC-39 (the committee responsible for ECMAScript) put up a draft specification for ECMAScript 4, which was massive in scope and introduced many new syntax and features. But a group of developers from Yahoo, Google and Microsoft felt that was too much and created an alternate proposal called ECMAScript 3. 1. ECMAScript 4 was never finalized
ECMA-262 version 5 and 5. 1 (Juni 2011). Skrip ECMA 3. 1 was eventually standardized as ECMAScript 5. Added "strict mode", JSON, Array iteration methods, etc

ECMA-262 2015. most popularly known as ECMAScript 6 or ES6
Versi ini menambahkan sintaks baru yang signifikan untuk menulis aplikasi yang kompleks, termasuk deklarasi kelas,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

7 untuk deklarasi lokal,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

8 untuk deklarasi lokal konstan, nilai parameter default, iterator, dan untuk. loop, generator gaya Python, ekspresi fungsi panah (

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

9), data biner, array yang diketik, koleksi baru (peta, set, dan WeakMap), janji, refleksi, proksi, literal templat untuk string, dan banyak lagi

Skrip ECMA 2016 (ES7). Sejak ES6, standar ECMAScript berada pada siklus rilis tahunan pada bulan Juni
Versi ini menambahkan operator eksponensial (
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
_0), pelingkupan blok variabel dan fungsi,
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
1 dan
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
2 kata kunci untuk pemrograman asinkron, dll.

Skrip ECMA 2017 (ES8). Menambahkan padding string, fungsi async yang menggunakan generator dan promise,





  
  JavaScript Example: Loop


  Testing Loop

3,





  
  JavaScript Example: Loop


  Testing Loop

4 untuk manipulasi objek yang mudah, dll.

Skrip ECMA 2018 (ES9). Menambahkan parameter istirahat (
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
5), operator sebar, iterasi asinkron, penambahan ekspresi reguler

Skrip ECMA 2019 (ES10). Menambahkan





  
  JavaScript Example: Loop


  Testing Loop

_6,





  
  JavaScript Example: Loop


  Testing Loop

7, mengubah





  
  JavaScript Example: Loop


  Testing Loop

8 dan





  
  JavaScript Example: Loop


  Testing Loop

9, pengikatan tangkapan menjadi opsional, dll.

Skrip ECMA 2020 (ES11). memperkenalkan tipe primitif

for ( initialization ; test ; post-processing ) {
   body ;
}

0 untuk bilangan bulat ukuran arbitrer, operator penggabungan nullish (

for ( initialization ; test ; post-processing ) {
   body ;
}

1) dan objek

for ( initialization ; test ; post-processing ) {
   body ;
}

2

Skrip ECMA 2021 (ES12). Penambahan peningkatan pada string (

for ( initialization ; test ; post-processing ) {
   body ;
}

_3), promise (

for ( initialization ; test ; post-processing ) {
   body ;
}

4), dan referensi objek. Operator penugasan logis (

for ( initialization ; test ; post-processing ) {
   body ;
}

_5,

for ( initialization ; test ; post-processing ) {
   body ;
}

6,

for ( initialization ; test ; post-processing ) {
   body ;
}

7,)

JavaScript vs. Jawa

Java adalah bahasa pemrograman tujuan umum yang lengkap. Itu dibuat oleh James Gosling di Sun Microsystems (sekarang bagian dari Oracle) dan dirilis pada Agustus 1995

JavaScript dibuat oleh Brendan Eich di Netscape, juga pada tahun 1995. Awalnya disebut LiveScript, itu adalah bahasa tujuan khusus yang kecil dan ringan untuk menulis program sisi klien yang berjalan di dalam browser untuk membuat antarmuka pengguna yang aktif dan menghasilkan halaman web yang dinamis. Itu diganti namanya menjadi JavaScript dalam keputusan pemasaran naas untuk mencoba memanfaatkan popularitas bahasa Java, ketika Netscape merilis Navigator 2 pada tahun 1996.

Java dan JavaScript adalah bahasa yang sama sekali berbeda untuk tujuan pemrograman yang berbeda. However, in the early days, some efforts were made to adopt Java syntax and convention into JavaScript, such that JavaScript seems to be a subset of Java. Pada kenyataannya, mereka memiliki sedikit kesamaan

Apa yang TIDAK DAPAT Dilakukan JavaScript Sisi Klien?

Ingatlah bahwa JavaScript adalah program sisi klien yang Anda unduh dari server, dan dijalankan di dalam browser mesin (klien) Anda. Apa yang menghentikan seseorang menulis JavaScript yang menghapus hard disk Anda, atau memicu serangan denial-of-service ke server lain?

Itu tidak dapat membaca file dari mesin klien
Itu hanya dapat terhubung ke server asalnya. Itu dapat membaca file dari server asalnya. Itu tidak dapat menulis file ke mesin server
Itu tidak dapat terhubung ke server lain
Itu tidak dapat menutup jendela yang tidak terbuka

jQuery

jQuery adalah Perpustakaan JavaScript lintas-browser yang populer. jQuery adalah JavaScript (tetapi memiliki sintaks ekstensinya sendiri), karenanya, Anda perlu memahami JavaScript. Saya sarankan Anda membaca sintaks JavaScript (dan memberikan perhatian khusus pada objek), dan kemudian beralih ke jQuery untuk produksi Anda. Baca "Dasar-Dasar jQuery"

Standalone dan JavaScript sisi server dengan Node. js Mesin JavaScript

[MELAKUKAN]

Editor dan IDE Kode Sumber JavaScript

Anda memerlukan editor teks untuk menulis JavaScript Anda. Anda dapat menggunakan editor teks biasa seperti NotePad Windows atau TextEdit macOS (sangat TIDAK disarankan karena tidak dapat melakukan penyorotan sintaks). Untuk meningkatkan produktivitas Anda, editor kode sumber yang baik (yang menyediakan penyorotan sintaks, pelengkapan kode otomatis, cuplikan, dokumentasi, navigasi simbol, pemfaktoran ulang, dll. ) sangat penting. Tersedia banyak freeware/shareware, seperti Visual Studio Code (VS Code), Sublime Text, Atom, Brackets, Komodo Edit, Emacs, Vim, BBEdit, TextMate, NotePad++ (Windows), dll. Anda juga dapat menggunakan IDE skala penuh seperti Eclipse, NetBeans, IntelliJ IDEA. Ada juga banyak editor dan kompiler "online" yang tersedia (mis. g. , Programiz, JSFiddle, Playcode), tetapi menurut saya Anda harus menginstalnya sendiri

JavaScript Sisi Klien berdasarkan Contoh

Saya akan berasumsi bahwa Anda mengetahui HTML dan CSS (baca artikel HTML/CSS saya jika tidak). Saya juga akan berasumsi bahwa Anda memahami beberapa dasar pemrograman (pemikiran komputasional) seperti variabel, konstruksi if-else dan for-loop

JavaScripts sisi klien berjalan di dalam browser melalui mesin JavaScript bawaan. Ada standar pada JavaScript. Tetapi Big-5 (Chrome, Firefox, IE/Edge, Safari dan Opera), khususnya IE, tidak mematuhi semua standar secara ketat. Selain itu, mereka membuat ekstensi mereka sendiri. Oleh karena itu, perilaku JavaScript dapat berbeda di browser yang berbeda. Anda mungkin perlu menguji JavaScript di lebih dari satu browser

JavaScript juga berjalan mandiri (dan di server). Untuk menjalankan JavaScript mandiri, Anda perlu menginstal Node. js, yang merupakan mesin JavaScript. Saya akan menyajikan contoh-contohnya di bagian selanjutnya

Sisi klien JS EG 1. Fungsi

for ( initialization ; test ; post-processing ) {
   body ;
}

8 dan

for ( initialization ; test ; post-processing ) {
   body ;
}

9

Mari kita menulis JavaScript sisi klien pertama kita untuk mencetak pesan "Halo, dunia"

Mulailah dengan file baru dan masukkan kode berikut. Jangan memasukkan nomor baris, yang digunakan untuk membantu penjelasan. Perhatikan itu

JavaScript peka huruf besar-kecil.





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

0 BUKAN





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

1 dan BUKAN





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

2

Spasi putih "Ekstra" (kosong, tab, dan baris baru) diabaikan. Artinya, beberapa spasi putih diperlakukan sebagai satu karakter kosong. Anda dapat menggunakannya secara bebas untuk membuat program Anda lebih mudah dibaca

Simpan file sebagai "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

3" (atau nama file apa pun yang Anda inginkan, dengan ekstensi file "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

4" atau "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

5"). Jalankan skrip dengan memuat file HTML ke browser yang mendukung JavaScript (mis. g. , Salah satu dari LIMA BESAR - Chrome, Firefox, Internet Explorer/Edge, Safari atau Opera)





  
  JavaScript Example: Functions alert() and document.write()
  


  My first JavaScript says:

Bagaimana itu bekerja?

JavaScripts adalah kode pemrograman yang disematkan di dalam dokumen HTML. Kode-kode tersebut terdapat di antara sepasang tag





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6, sebagai berikut. CATATAN. Dalam HTML4/XHTML, Anda perlu menyertakan atribut





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

7 ke elemen





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6. Baris 7-9 dan Baris 13-17 adalah dua buah JavaScripts, masing-masing ditempatkan di bagian





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

9 dan





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

0

Pernyataan JavaScript diakhiri dengan titik koma





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

1 (seperti Java/C/C++/C#)

Fungsi





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

_2 (Baris 8) memunculkan kotak dialog yang menampilkan





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 dan tombol OK. String diapit oleh sepasang tanda kutip ganda atau tanda kutip tunggal, mis. g. ,





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

4 atau





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

5

Halaman web saat ini diwakili oleh apa yang disebut objek





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

6 di JavaScript. Properti





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

_7 (Baris 16) menyimpan tanggal modifikasi terakhir dari dokumen saat ini. Fungsi





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

_8 (Baris 14 sampai 16) dapat digunakan untuk menulis





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 yang ditentukan ke dokumen saat ini, sebagai bagian dari dokumen HTML saat ini

The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

00 operator (Line 16) can be used to concatenates two strings (like Java)

Sebagai akibat dari

for ( initialization ; test ; post-processing ) {
   body ;
}

_9, bagian





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

0 dari dokumen ini berisi.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

2 dan





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

8 adalah beberapa fungsi bawaan yang umum digunakan yang disediakan dalam JavaScript

MENCOBA. Cetak judul dokumen dan lokasi URL. (Petunjuk. gunakan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_05 dan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

06 properti. )

Jangan Tertangkap oleh Cache - Lakukan Control-Refresh (atau Control-F5)

Jika Anda memodifikasi kode dan memuat ulang halaman web, kode baru mungkin tidak dapat dijalankan karena browser meng-cache versi yang dimuat sebelumnya. Anda dapat menggunakan Control-F5 (Control-Refresh) untuk meminta browser membuang cache, dan mengambil halaman baru

Jangan Gunakan

for ( initialization ; test ; post-processing ) {
   body ;
}

_8

Karena tidak ada yang menyukainya

"Penggunaan lansiran biasanya tidak dianjurkan demi metode lain yang tidak menghalangi pengguna berinteraksi dengan laman - untuk menciptakan pengalaman pengguna yang lebih baik. Namun demikian, ini dapat berguna untuk debugging. "

for ( initialization ; test ; post-processing ) {
   body ;
}

8 secara teknis adalah properti objek

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

09, dan harus dirujuk sebagai

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

10. Tapi karena

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

09 adalah objek global, semua variabelnya adalah variabel global, dan dapat dirujuk tanpa nama objek

Alat Pengembangan Web F12 dan Debugger Browser

Sebelum kita melanjutkan ke contoh berikutnya, Anda harus mencoba Alat Pengembangan Web, yang tersedia di sebagian besar browser untuk men-debug HTML/CSS/JavaScript/webapps

Luncurkan browser Anda dan tekan F12 untuk mengaktifkan Alat Pengembangan Web (Saya telah mencoba di Firefox, Chrome, Edge)
Pilih panel "Konsol". Anda dapat memasukkan pernyataan JavaScript di konsol. Misalnya, masukkan pernyataan JavaScript berikut satu per satu dan amati hasilnya.
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```

Catatan.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_12 menulis pesan ke konsol, yang sering digunakan untuk debugging (seperti

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

13 di Jawa, atau

My First JavaScript says

This document was last modified on mm/dd/yyyy hh:mm:ss.

16

Skrip ini menanyakan nama pengguna, mengonfirmasi nama, dan mencetak pesan salam

Ada tiga jenis kotak dialog pop-up untuk berinteraksi dengan pengguna

Fungsi





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

_2 menempatkan





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 pada kotak pop-up dengan tombol OK. Pengguna perlu mengklik tombol OK untuk melanjutkan

Fungsi

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_19 menampilkan kotak pop-up input dengan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

20 dengan tombol OK dan Batal. Ini mengembalikan input yang dimasukkan oleh pengguna sebagai string; . Parameter opsional

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

22 menentukan string awal yang akan ditampilkan. Pada artikel ini, saya akan menunjukkan parameter fungsi opsional dengan trailing

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

23 untuk kekompakan

Fungsi

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_24 menempatkan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

25 pada kotak pop-up dengan tombol OK dan Batal. Ia mengembalikan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 jika pengguna menekan tombol OK;





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

This document was last modified on mm/dd/yyyy hh:mm:ss.

30 (Baris 9)

Baris 9 memanggil fungsi

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_19 untuk memunculkan kotak dialog, dan membaca string yang dimasukkan oleh pengguna. String yang dibaca ditugaskan ke variabel

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

28. Fungsi

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_15 mirip dengan

for ( initialization ; test ; post-processing ) {
   body ;
}

8, tetapi menerima input pengguna

Di Baris 10, fungsi

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_24 menampilkan pesan dan mengembalikan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 atau

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27, tergantung apakah pengguna menekan tombol OK atau Batal

Jika hasilnya adalah

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_26, Baris 11 mencetak

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

39. Jika tidak, Baris 13 mencetak ________44______40

MENCOBA. Alih-alih mencetak pesan ucapan menggunakan

for ( initialization ; test ; post-processing ) {
   body ;
}

_9, lakukan melalui

for ( initialization ; test ; post-processing ) {
   body ;
}

8

Sisi Klien JS EG 3. Objek

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_43

Skrip berikut membuat objek

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 yang mewakili tanggal-waktu saat ini, dan mencetak waktu saat ini





  
  JavaScript Example: The Date object

This document was last modified on mm/dd/yyyy hh:mm:ss.

45

"
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
_49" memulai komentar akhir baris (Baris 8 dan 9). Komentar diabaikan oleh mesin JavaScript tetapi penting untuk menjelaskan kode Anda kepada orang lain (dan kepada Anda sendiri tiga hari kemudian)

50. Baris 9 dan 10, juga menangani menit dan detik

Baris 12 sampai 14 gunakan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_56 untuk menulis ke dokumen saat ini.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_57 (baris tulis) menulis baris baru (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

58) setelah string yang diberikan. Perhatikan bahwa browser mengabaikan spasi ekstra (baris baru, kosong, tab) dalam dokumen HTML;

Baris 16-20 berisi pernyataan kondisional if-then-else. Bergantung pada nilai
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
50, salah satu pesan akan ditampilkan

This document was last modified on mm/dd/yyyy hh:mm:ss.

_65 mengembalikan 0 hingga 6 untuk hari Minggu hingga Sabtu)

Use a conditional statement to print the day of the week in word (i. e. , 0 for Sunday, 1 for Monday and etc. ). (Petunjuk. Gunakan konstruksi

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_71 sebagai berikut. )

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

Sisi Klien JS EG 4. Loop

Skrip berikut meminta pengguna untuk pengganda, dan mencetak kelipatan 1 hingga 100 menggunakan for-loop





  
  JavaScript Example: Loop


  Testing Loop

Bagaimana itu bekerja?

Baris 11 meminta nomor dari pengguna, dan menugaskannya ke variabel

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

72

Baris 12-14 berisi for-loop. For-loop mengambil sintaks berikut.
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
Ada empat bagian dalam for-loop. Tiga di antaranya, inisialisasi, pengujian, dan pasca-pemrosesan, dilampirkan dalam tanda kurung
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
73 dan dipisahkan oleh 2 titik koma. Tubuh berisi tugas berulang yang harus dilakukan. Pernyataan inisialisasi pertama kali dieksekusi. Tes tersebut kemudian dievaluasi. Jika hasil tes benar, badan dieksekusi; . Tes dievaluasi lagi dan proses berulang sampai tes kembali salah. Ketika tes salah, for-loop selesai dan eksekusi program berlanjut ke pernyataan berikutnya setelah for-loop. Diagram alir berikut mengilustrasikan proses for-loop.
Dalam contoh ini, variabel
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
_74 diinisialisasi menjadi 1. Jika
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
_74 kurang dari atau sama dengan 100, badan loop dieksekusi, diikuti oleh pernyataan pasca-pemrosesan, yang menambah nilai
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
74 sebesar 1. Loop berulang sampai nilai
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
_74 TIDAK kurang dari atau sama dengan 100 (i. e. , lebih dari 100)

MENCOBA

Ubah skrip di atas untuk meminta pengguna untuk pengganda serta jumlah kelipatan yang akan dicetak (dalam dua pernyataan
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
15)

Ubah skrip di atas untuk mencetak hanya kelipatan yang merupakan angka ganjil. (Petunjuk. Operator modulo "

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_79" dapat digunakan untuk menghitung sisanya, mis. g. ,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

80 menghitung sisa dari

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

81 dibagi dengan 2, yang menghasilkan 0 atau 1. )

Sisi Klien JS EG 5. Fungsi yang ditentukan pengguna dan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_82 Event Handler

Selain fungsi bawaan JavaScript seperti

for ( initialization ; test ; post-processing ) {
   body ;
}

8,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

15,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

85, dan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

57, Anda dapat menentukan fungsi Anda sendiri. Fungsi memiliki nama dan badan yang terdiri dari sekumpulan pernyataan JavaScript yang secara kolektif melakukan tugas tertentu. Mungkin diperlukan nol atau lebih argumen dari pemanggil dan mengembalikan nol atau satu nilai kembali ke pemanggil





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

This document was last modified on mm/dd/yyyy hh:mm:ss.

90"

Baris 15-16 membuat tombol HTML. Mengklik tombol memicu event handler ________44______82, i. e. ,
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
_87 didefinisikan sebelumnya

MENCOBA. Sertakan tombol lain, yang membuka "

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_93"

Sisi Klien JS EG 6. Lebih Banyak Penangan Acara.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

95 and

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

96

JavaScript dapat digunakan untuk menangani berbagai jenis peristiwa, sebagai respons terhadap tindakan pengguna atau tindakan browser. Sebagai contoh,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_94. menyala setelah browser memuat halaman

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_95 dan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

96. menyala ketika pengguna mengarahkan pointer mouse ke/menjauh dari elemen HTML





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

Membedah Program

Baris 8 mendefinisikan variabel

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_00, yang menyimpan string untuk ditampilkan di event handler

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94

Pada tag pembuka (Baris 12), kita mendefinisikan event handler

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94 untuk event

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

03. Itu memanggil

for ( initialization ; test ; post-processing ) {
   body ;
}

_8 dengan pesan yang ditentukan sebelumnya

Baris 13 dan 14 mendefinisikan event handler

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

95 dan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

96 untuk elemen HTML

Warna teks akan berubah menjadi merah saat pengguna mengarahkan penunjuk tetikus ke elemen (dengan menyetel properti gaya CSS

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

07 menjadi merah), dan kembali ke warna aslinya saat penunjuk tetikus dipindahkan (dengan menyetel ulang gaya CSS . Kata kunci khusus

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_09 mengacu pada objek ini

Sisi Klien JS EG 7. Memisahkan HTML, CSS dan JavaScript

Contoh sebelumnya berfungsi dengan baik. Anda akan menemukan banyak contoh seperti itu di buku teks, terutama buku teks lama. Namun, itu memiliki masalah besar. Semua konten HTML, gaya presentasi CSS, dan kode pemrograman JavaScript ditempatkan dalam satu file. Untuk program mainan kecil, masalahnya tidak serius. Tetapi ketika program Anda berkembang dan jika HTML, CSS, dan JavaScript ditulis oleh orang yang berbeda, Anda akan memiliki tantangan nyata dalam memelihara program tersebut. Ingatlah bahwa HTML untuk konten, CSS untuk presentasi, dan JavaScript untuk perilaku

Mari tulis ulang contoh untuk menempatkan HTML, CSS, dan JavaScript dalam tiga file berbeda

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

0

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

1

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

2

Bagaimana itu bekerja?

Menempatkan kode skrip di dalam halaman HTML bukanlah praktik rekayasa perangkat lunak yang baik. Alih-alih, pendekatan yang sekarang lebih disukai adalah menempatkan skrip, serta gaya CSS, di file eksternal, yang kemudian dapat diterapkan secara seragam ke semua halaman di situs web Anda

Mari kita mulai dengan file HTML. Sekarang, file HTML hanya menyimpan konten, tidak ada gaya presentasi dan tidak ada logika pemrograman

Lembar gaya CSS disimpan dalam file eksternal, direferensikan melalui tag





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6 di atas
Catatan. Dalam HTML4/XHTML1. 0 Anda harus menyertakan atribut

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_11 di tag pembuka





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6

Juga, kode pemrograman JavaScript disimpan dalam file eksternal, direferensikan melalui





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6 di atas diperlukan, meskipun tidak ada konten
Catatan. Dalam HTML4/XHTML1. 0, Anda harus menyertakan atribut





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

_7 di





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

3

Bagaimana itu bekerja?

Dokumen HTML ini berisi elemen dengan

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

16 unik, dua

elemen, tiga

elemen dengan

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

17, dan tiga





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6 dengan unik

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

19

Dalam fungsi yang ditentukan pengguna

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_20, kami menggunakan

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

21 untuk memilih elemen, lalu memodifikasi properti

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

22

Dalam fungsi
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
_23, kami menggunakan
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
24 untuk memilih semua
elemen dalam array alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')_25. Kami kemudian menggunakan for-loop untuk mengulangi semua elemen dalam array. Properti alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')_26 menyimpan panjang array

In

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

27 function, we use

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

28 to select all the

elemen. Kami menggunakan loop

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_29 JavaScript untuk mengulangi semua elemen. Kami menggunakan variabel

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

8 yang paling aman, karena

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

29 loop membuat variabel cakupan blok baru untuk setiap iterasi;

Halaman ini berisi tiga tombol untuk memicu fungsi yang ditentukan
untuk memanipulasi elemen dalam DOM menggunakan JavaScript, kode JavaScript harus dijalankan setelah elemen yang relevan dibuat dalam dokumen. Ini dapat dilakukan dengan meletakkan JavaScript tepat sebelum tag penutup

Skrip berisi fungsi

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

33, yang ditetapkan sebagai

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94 handler melalui

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

35. Artinya,

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_33 akan dipicu setelah halaman dimuat. Fungsi

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_33 menetapkan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

82 event handler ke tombol, dipilih melalui

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

39 menggunakan

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

19 tombol unik

Alih-alih properti
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
22, JavaScript versi lama menggunakan
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
42 (yang mencakup teks dan markup) untuk mengubah konten elemen yang dipilih. Menurut MDN. "
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
_22 harus digunakan sebagai gantinya. Karena teks tidak diuraikan sebagai HTML, kemungkinan besar kinerjanya lebih baik. Selain itu, ini menghindari vektor serangan XSS (Cross-Site Scripting). "

Sisi Klien JS EG 9. Mencegat Hyperlink

Contoh ini menggunakan skrip untuk mencegat hyperlink untuk memasang pesan peringatan, lalu melanjutkan ke tautan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

4

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

5

Bagaimana itu bekerja?

Halaman HTML memiliki hyperlink





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6dengan unik

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

19

Fungsi

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_33 menetapkan penangan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

82 ke hyperlink, dipilih melalui

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

39

Saat hyperlink diklik, penangan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

82

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

50 dipicu. Jika

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_16 mengembalikan nilai true, halaman baru akan dimuat;

Contoh JavaScript Lebih Lanjut

Lebih Lanjut "Contoh JavaScript Tingkat Lanjut"

Men-debug JavaScript

Debugger grafis adalah HARUS dalam pemrograman. Pemrograman dalam JavaScript, khususnya, membutuhkan debugger yang baik. Itu karena JavaScripts ditafsirkan dan tidak perlu dikompilasi. Karenanya, tidak ada kompiler untuk menunjukkan kesalahan sintaksis kepada Anda. A simple and trivial syntax error (e. g. , braket hilang, salah ejaan) akan membuat seluruh skrip tidak bisa diterapkan. Lebih buruk lagi, Anda tidak akan melihat pesan kesalahan apa pun saat skrip tidak berfungsi. Bisakah Anda men-debug tanpa pesan kesalahan atau petunjuk?

Tanpa debugging grafik, satu-satunya cara untuk men-debug JavaScript adalah memasukkan

for ( initialization ; test ; post-processing ) {
   body ;
}

8 di lokasi strategis untuk mencetak data yang dipilih

Setelah memodifikasi JavaScript, saya sarankan Anda menggunakan Ctrl-F5 untuk menyegarkan halaman, yang akan memuat salinan baru alih-alih memuat dari cache. Anda mungkin perlu menghapus cache browser atau memulai ulang browser, jika modifikasi Anda tidak berpengaruh

Alat Pengembang Web F12

Di Chrome dan Firefox, Anda dapat menekan F12 untuk mengaktifkan Alat pengembang (karenanya disebut Alat Pengembang F12)

Ini menyediakan fitur-fitur ini

Menghibur. Lihat pesan kesalahan JavaScript. Mulai pembakar dan alihkan ke panel "Konsol".
Naskah. Lihat dan debug JavaScript. Mulai pembakar. Beralih ke panel "Script". "Aktifkan" atau "Muat ulang" jika perlu. Anda dapat mengatur breakpoint dengan mengklik nomor pernyataan, satu langkah melalui pernyataan JavaScript, melihat ekspresi, dan lain-lain
DOM. Lihat DOM HTML dari dokumen saat ini
HTML dan CSS

Untuk men-debug JavaScript

Luncurkan Firebug ⇒ Pilih panel "Script" untuk melihat JavaScript Anda, ditunjukkan dengan nomor baris tebal hijau
Segarkan (Ctrl-F5) halaman, dan periksa konsol kesalahan (Di bawah "Konsol" ⇒ "Kesalahan") untuk kesalahan sintaksis. Perbaiki semua kesalahan sintaks
Untuk melacak program, atur breakpoint pada pernyataan JavaScript yang dipilih, dengan mengklik margin kanan (di sebelah kiri nomor baris). Sebuah lingkaran merah muncul menunjukkan breakpoint. Perhatikan bahwa Anda hanya dapat menyetel breakpoint pada pernyataan dengan nomor baris tebal hijau. [Jika pernyataan JavaScript Anda tidak memiliki nomor baris tebal hijau, ada kesalahan sintaks pada pernyataan ini. Anda perlu memperbaiki kesalahan sintaks dan memuat ulang halaman. ]
Picu skrip (melalui mengklik tombol/tautan, atau memuat ulang halaman). Eksekusi berhenti pada breakpoint pertama. Anda kemudian dapat melangkahi pernyataan (atau melangkah ke fungsi), dan memeriksa variabel dengan memposisikan penunjuk tetikus pada variabel;
Anda dapat melanjutkan eksekusi (melalui tombol lanjutkan)

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_53

Alih-alih menggunakan

for ( initialization ; test ; post-processing ) {
   body ;
}

8 dan

for ( initialization ; test ; post-processing ) {
   body ;
}

9 untuk menunjukkan hasil antara, Anda juga dapat menggunakan

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

56, yang menulis

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

57 dan nilai

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

58 ke konsol kesalahan. Itu tidak mengganggu tampilan halaman web Anda atau operasi normal Anda

Misalnya, modifikasi JavaScript pada Contoh 8 untuk mencetak nilai innerHTML sebelum modifikasi. Anda perlu menyalakan konsol (tekan F12) untuk melihat hasilnya

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_6

JavaScript dan HTML

Seperti yang terlihat dari contoh sebelumnya, JavaScript tertanam di dalam dokumen HTML, dan dijalankan oleh browser. Ada dua kesempatan di mana browser menjalankan instruksi JavaScript

JavaScripts terlampir dalam





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

_6 berjalan selama pemuatan halaman

Beberapa JavaScripts, yang disebut event handler, dijalankan sebagai akibat dari tindakan (atau peristiwa) pengguna atau browser. Misalnya, mengklik tombol (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_82) atau memuat halaman (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94)

Oleh karena itu, ada dua tempat untuk meletakkan JavaScript Anda

antara





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6 tag wadah;

di dalam tag HTML sebagai event handler (seperti

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

82,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

95,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94), e. g. ,

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_66

Elemen





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

_6 berisi pernyataan pemrograman JavaScript. Sebagai contoh,

Dalam HTML4/XHTML1. 0, you need to include the attribute

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

68 in the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6 is needed although there is no content. ?

Dalam HTML4/XHTML1. 0, Anda harus memasukkan

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_68 di





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6 tag, dan menjalankannya di bawah browser web, Anda harus mengaktifkan debugger (Alat Pengembang Web) untuk melihat hasilnya. Lihat bagian di atas pada contoh sisi klien

Standalone JS Misalnya 2. [MELAKUKAN]

[TODO] Periksa Keterbatasan seperti File IO, Jaringan, dll. Bandingkan dengan Skrip Shell dan skrip Python untuk otomatisasi

JavaScript Sisi Server berdasarkan Contoh

Anda juga dapat menggunakan JavaScript untuk memprogram webapp sisi server, seperti Java Servlet/JSP, Microsoft ASP, PHP, Python, dll. Daya tariknya adalah Anda dapat menggunakan satu bahasa untuk memprogram sisi klien dan sisi server dalam aplikasi web

Lihat Node. artikel js

Sintaks Dasar JavaScript

Komentar

Komentar diabaikan oleh runtime JavaScript tetapi sangat berguna dalam menjelaskan kode Anda kepada orang lain (dan juga kepada Anda sendiri tiga hari kemudian). Anda harus menggunakan komentar secara bebas untuk menjelaskan atau mendokumentasikan kode Anda

Komentar akhir baris dimulai dengan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

Perhatikan itu

Komentar HTML terlampir di dalamnya

CSS mendukung komentar multibaris

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_75, tetapi BUKAN komentar akhir baris

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

49

JavaScript mendukung

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

75 dan ________44______49, seperti Java/C/C++/C#

Spasi putih (kosong, tab, baris baru)

Seperti C/C++/Java, JavaScript mengabaikan spasi tambahan (kosong, tab, dan baris baru). Saya sangat menyarankan Anda menggunakan spasi tambahan untuk memformat program Anda agar kode Anda lebih mudah dibaca dan dipahami

Ekspresi

Ekspresi adalah kombinasi dari variabel, literal, operator, dan sub-ekspresi yang dapat dievaluasi untuk menghasilkan nilai tunggal

Pernyataan, Titik Koma, dan Blok

Pernyataan adalah instruksi pemrograman tunggal. Tidak seperti C/C++/Java, di mana Anda harus mengakhiri pernyataan dengan titik koma (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

Titik koma dalam JavaScript membagi komunitas. Beberapa lebih suka menggunakannya selalu, apa pun yang terjadi. Yang lain suka menghindarinya untuk singkatnya. Saya akan menyerahkannya kepada Anda

Sebuah blok terdiri dari nol atau lebih pernyataan diapit oleh sepasang kurung kurawal

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

Variabel, Literal dan Jenis

Deklarasi variabel (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

29,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

7,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

8) dan Operator Penugasan (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

84)

Variabel adalah lokasi penyimpanan bernama yang menyimpan nilai. Sebelum ES6, Anda hanya dapat menggunakan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

Anda harus mencoba

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Anda dapat menetapkan (dan menetapkan kembali) nilai ke variabel menggunakan operator penugasan (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

Pengidentifikasi

Pengidentifikasi adalah nama yang diberikan untuk mengidentifikasi entitas (seperti variabel dan fungsi). Aturan untuk pengidentifikasi yang valid adalah

Pengidentifikasi dapat berisi huruf (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

92,

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_93), angka (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

94), garis bawah (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

95) dan tanda dolar (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

96). Tapi itu tidak bisa dimulai dengan angka (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

94)

Pengidentifikasi peka terhadap huruf besar-kecil.





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

0 BUKAN





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

2, dan BUKAN





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

1

Identifiers cannot be keywords

Perhatikan bahwa tanda hubung (





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_01) dan spasi TIDAK diperbolehkan. Oleh karena itu,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

02,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

03, BUKAN pengidentifikasi yang valid. Anda harus menggunakan garis bawah (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

_95) bukan tanda hubung (





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

01)

Literal

Literal adalah nilai tetap, e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Jenis

JavaScript berorientasi objek. Tapi, Ini mendukung tipe dan objek primitif

Primitif bukanlah objek dan tidak memiliki properti dan metode. JavaScript mendukung tipe primitif ini

rangkaian. urutan karakter. Literal string diapit oleh sepasang tanda kutip tunggal atau kutip ganda (mis. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

08,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

13)

nomor. mengambil keduanya bilangan bulat (mis. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

06) atau floating-point (mis. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_15)

boolean. mengambil literal boolean baik

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 atau

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27 (dalam huruf kecil)

belum diartikan. mengambil nilai literal khusus yang disebut





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18. Perhatikan bahwa





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 adalah tipe dan nilai literal

simbol (ES6). Tipe data yang instansnya unik dan tidak dapat diubah
besar (ES2020/ES11). bilangan bulat dengan presisi sewenang-wenang

JavaScript juga mendukung jenis dan nilai objek ini (kami akan membahas objek nanti)

obyek. untuk objek umum
fungsi. untuk objek fungsi. Tidak seperti Java, fungsi adalah objek kelas satu dalam JavaScript, mis. g. , Anda dapat menetapkan fungsi ke variabel

batal. Nilai literal khusus untuk unallocated (unconstructed)





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

20. Perhatikan bahwa

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_21 BUKAN





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

22.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_23 adalah





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

20.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_21 dimaksudkan untuk mewakili tidak adanya objek yang dibangun.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_21 sebenarnya dianggap primitif karena tidak memiliki properti dan metode

Tidak seperti kebanyakan bahasa pemrograman umum (seperti Java/C/C++/C#) yang bertipe kuat, JavaScript bertipe longgar (mirip dengan sebagian besar bahasa skrip seperti UNIX Shell Script, Perl, Python). Anda tidak perlu secara eksplisit mendeklarasikan jenis variabel (seperti





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Operator





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_31

Anda dapat menggunakan operator





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Sebagai contoh,

Jenis





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_18 dan ________74______18 Nilai Literal

Variabel yang tidak dideklarasikan (melalui

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Ketika sebuah variabel dideklarasikan (melalui

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Sebagai contoh,

(ES6) Konstanta

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

_8-deklarasi

Anda dapat membuat read-only, bernama konstanta dengan kata kunci

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_74 Jenis, Literal & Operasi

Sebuah variabel bertipe

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Literal bilangan bulat dapat dinyatakan dalam

Desimal. dimulai dengan angka





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

47 sampai





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

48 (bukan





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49), e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

50 atau





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

51,

Oktal. diawali dengan angka





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_49, e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_53 atau





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

54,

Heksadesimal. dimulai dengan





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_55 (atau





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

56), e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

57 atau





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

58

Biner. dimulai dengan





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_59 (atau





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

60), e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_61 atau





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

62. [Biner mungkin tidak didukung di beberapa browser. ]

Literal floating-point dapat diekspresikan dalam bentuk biasa (mis. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

JavaScript juga menyediakan beberapa

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

ketakterbatasan. e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_67

-ketakterbatasan. e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_68

NaN (Bukan Angka). e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_69, atau mengonversi string





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

70 menjadi angka

Operasi Aritmatika

Operasi aritmatika, seperti tabel di bawah ini, dapat diterapkan pada bilangan. Hasil berikut diperoleh dengan asumsi bahwa





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Dalam JavaScript, operasi aritmatika selalu dilakukan dalam floating-point presisi ganda (BUKAN bilangan bulat). Yaitu,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Operator Eksponen (





  
  JavaScript Example: Loop


  Testing Loop

0)

ECMAScript 2016 (ES7) memperkenalkan operator eksponen (





  
  JavaScript Example: Loop


  Testing Loop





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Sebelum ES7, Anda harus menggunakan fungsi bawaan ________74______88

Aritmatika cum Operator Penugasan

Ini adalah operator tangan pendek untuk menggabungkan dua operasi

Beberapa





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

_89 Fungsi bawaan yang sering digunakan

parseInt(str), parseFloat(str). Parsing





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 hingga non-digit pertama, dan kembalikan nomornya;

Matematika. bulat (bil), Matematika. lantai (angka), Matematika. ceil(bil)
Matematika. acak(). Hasilkan angka acak antara 0 (inklusif) dan 1 (eksklusif)

isNaN(str). kembalikan true jika





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 bukan angka. Misalnya, Menarik untuk dicatat bahwa JavaScript tidak memiliki fungsi pendamping seperti





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

93,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

94

Nomor(str). Kembalikan nomor yang diwakili oleh

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_25, atau





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91. Take that that this function name begins with uppercase, because this is a type casting operation

toFixed(Tempat desimal). Kembalikan angka/string ini ke angka desimal yang diberikan. Sebagai contoh,

Jenis, Literal & Operasi __7430

A





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

Tidak seperti Java/C/C++, tetapi seperti atribut HTML/CSS, Anda dapat menggunakan tanda kutip tunggal atau ganda untuk





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

JavaScript bertipe dinamis, dan melakukan konversi tipe secara otomatis. Ketika nilai





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

_00 Operator. Penjumlahan atau Penggabungan?

Jika kedua operan ke

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Mengonversi angka





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 menjadi

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

77,





  
  JavaScript Example: The Date object

29 dan





  
  JavaScript Example: The Date object

30

Untuk mengonversi angka





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Perhatikan bahwa





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Anda juga dapat menggunakan fungsi





  
  JavaScript Example: The Date object

Membangun/Mengubah ke ________74______30.





  
  JavaScript Example: The Date object

42 dan





  
  JavaScript Example: The Date object

43

Anda dapat membuat





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object

Anda dapat menggunakan





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Anda juga dapat mengonversi angka menjadi string dengan menggabungkannya dengan string kosong, mis. g. ,

Properti String

panjangnya. e. g. ,





  
  JavaScript Example: The Date object

_48 mengembalikan panjang string

Operasi String

toUpperCase(). mengembalikan string huruf besar
ke Huruf Kecil(). returns the lowercase string
charAt(idx). returns the character at the
```
  
  JavaScript Example: The Date object
  
```
49 position. Index begins from 0. Negative index can be used, which counts from the end of the string

substring(beginIdx, endIdx). returns the substring from





  
  JavaScript Example: The Date object

50 (inclusive) to





  
  JavaScript Example: The Date object

51 (exclusive)

substr(beginIdx, length). returns the substring from





  
  JavaScript Example: The Date object

50 of





  
  JavaScript Example: The Date object

53

indexOf(searchStr, fromIdx?). Return the beginning index of the first occurrence of





  
  JavaScript Example: The Date object

54, starting from an optional





  
  JavaScript Example: The Date object

55 (default of 0); or





  
  JavaScript Example: The Date object

56 if not found

lastIndexOf(searchStr, fromIdx?). Return the beginning index of the last occurrence of





  
  JavaScript Example: The Date object

54





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6, starting from an optional





  
  JavaScript Example: The Date object

55 (default of





  
  JavaScript Example: The Date object

60); or





  
  JavaScript Example: The Date object

56 if not found

slice(beginIdx, endIdx). Return the substring from





  
  JavaScript Example: The Date object

62 (inclusive) to





  
  JavaScript Example: The Date object

63 (exclusive)

repeat(count) (ES6). repeat the string
split(delimiter), array. join(delimiter). returns an array by splitting the string using
```
  
  JavaScript Example: The Date object
  
```
64, e. g. ,
Searching/Modifying Strings using Regular Expression. See ""

Character Type?

JavaScript does not have a dedicated character type, but treats it as a one-character single. To get an individual character from a string, you can use

charAt(idx). For example,
Array Bracket Operator []. You can treat a string as a character array, and access individual character via array bracket operator
```
  
  JavaScript Example: The Date object
  
```
65, e. g. ,

(ES6) Multi-line Back-Quoted Template String and Substitution

Prior to ES6, You can enclosed a string literal using either single or double quotes (e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

ES6 introduces template string, delimited by back-quotes, for example,

There is no need to escape single or double quote inside a template string (because there is no conflicts). But you need to use escape sequence for back-quote, i. e. ,





  
  JavaScript Example: The Date object

Template strings support multi-line strings. All whitespaces (blank, tab, newline) within the back-quotes are part of the multi-line string. For example,

Substitution





  
  JavaScript Example: The Date object

76

Template strings support substitution, which allow you to embed any valid JavaScript expression as part of the string in the form of





  
  JavaScript Example: The Date object

Multi-line template string with substitution provides a more convenient way to write out formatted HTML fragment. For example,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

The





  
  JavaScript Example: The Date object

78 Type, Literals & Operations

A variable of the type





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

As mentioned, JavaScript performs automatic type conversion if necessary. During the type conversion, the following 6 values are converted to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

number





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49

number





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91 (Not-a-Number),

empty string (





  
  JavaScript Example: The Date object

13,





  
  JavaScript Example: The Date object

88),





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 value,

boolean

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 (unallocated) object

All the other values are converted to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

You need to memorize this.





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Comparison (Relational) Operators

The following relational operators, which produce a





  
  JavaScript Example: The Date object

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

07 vs.

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

08

The strictly equality operator (

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

07) returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if both operands have the same type and same value; while abstract equality operator (

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

08) returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if both operands have the same value, but may or may not be the same type, i. e. , == converts its operands if the operand types do not match

JavaScript needs to provide two different equality operators, because it is loosely type and carries out automatic type conversion in many situation. For example,

When a number is compared with a string, the string is converted to a number (or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91 if it does not contain a valid number). Hence,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

14 returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26. But,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

16 returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27, because the operands are not of the same type

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

07,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

19,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

08,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

21 can be applied to boolean (and all the JavaScript types), e. g. ,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

22 gives

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 (because empty string is converted to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27); but

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

25 gives

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26

It is RECOMMENED to use

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

07 (or

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

19), instead of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

08 (or

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

21), unless you are certain that type is not important

String Sorting (Collation) Order

When two strings are compared, the encoding order (ASCII/Unicode table) is used. Hence, string

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

31 is greater than string

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

32

Sebagai contoh,

To compare two strings alphabetically, use

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

33, e. g. , [TODO]

Logical (Boolean) Operators

The following boolean (or logical) operators are provided in JavaScript

OperatorDescriptionExampleResult&&Logical AND. Logical OR. Penugasan NOT&&=Logis DAN cum Logis (ES12). =Logical OR cum assignment (ES12)

Catatan.

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

34 dalam JavaScript adalah operator XOR bitwise, bukan XOR boolean (yang jarang diperlukan)

Evaluasi Sirkuit Pendek untuk Ekspresi Boolean

Evaluasi operasi logis selalu dihubung pendek. Artinya, operasi dihentikan segera setelah hasilnya pasti, e. g. , (

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

_35) dihubung pendek untuk memberikan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27, (

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

37) memberikan

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26,





  
  JavaScript Example: Loop


  Testing Loop

5 tidak akan dievaluasi

Konversi Jenis Eksplisit

The JavaScript runtime performs type conversion automatically. However, at times, you may need to convert from one type to another explicitly

Converting a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 to a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30. Simply concatenate the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 with an empty

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

43, e. g. ,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

44 gives

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

45

Converting a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 to a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74. Use built-in functions

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

48,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

49 or

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

50 to convert a





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 which contains a valid

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74. For example,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

53 gives





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

78 gives





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

79 gives





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

59 gives

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

60,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

61 gives





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80, but

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

63 gives





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91

Converting a float to an integer. Use





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

77 (e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

78 gives





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80), or built-in mathematical functions such as





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

81,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

83 or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

82

Flow Control - Decision (Conditional)

JavaScript provides these flow control construct. The syntax is the same as Java/C/C++

SyntaxExample

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

3

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

4

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

5

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

6

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

7

Notes. JavaScript, like C/Java, does not support native

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

71, but nested

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

72

[ES12] Logical nullish Assignment Operator (

for ( initialization ; test ; post-processing ) {
   body ;
}

5)

The logical nullish assignmebnt

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

74 assigns only if x is

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 (unallocated object) or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 (uninitialized variable) i. e. , nullish. For example,

Flow Control - Loops (Repetition)

JavaScript provides the following loop constructs. The syntax is the same as Java/C/C++

JavaScript also introduces

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

77 and

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

29 loops (to be discussed later)

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

79,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

80 and Statement Label

The following loop-control statements are provided (same syntax as Java/C/C++)

break. exits the innermost loop
continue. aborts the current iteration, and continues to the next iteration

label. provides an identifier for a statement, which can be used by

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

81 and

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

82

Try to avoid these statements, as they are hard to trace and maintain

Arrays

An array is an indexed collection. An array can be used to store a list of items (elements) under a single name with an running integer index. You can reference individual element via the integral index in the form of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

83. Furthermore, you can conveniently process all the elements of an array collectively via a loop with a varying index

Creating an Array via "Array Initializer

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

84"

You can create an array by assigning an array literal to a variable, known as Array Initializer, in the form of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

84. For examples,

Take note that JavaScript's array literal is enclosed in square bracket

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

86, instead of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

87 in Java/C/C++. JavaScript uses

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

87 for object literal (to be discussed later)

You can also use an Array Initializer to create an array with missing indexes. For example,

Accessing an Item

You can access individual element of an array via an integral index, in the form of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

83. The index of the array begins at 0, and shall be a non-negative integer

Array's Property

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

90

The length of the array is maintained in a variable (property) called

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

90, which can be accessed via

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

92. In fact, the property

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93 returns the last integral index plus 1, as JavaScript's array index is 0-based. Nonetheless, you are allow to manipulate (write) the

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93. For example,

Dynamic Arrays

Unlike Java/C/C++, the JavaScript array is dynamically allocated. You can add more elements to an array. You can also remove the content of an element using keyword

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

95. For examples,

Accessing All Items using for-loop with index

Array is usually processed collectively using a loop, e. g. ,

The JavaScript's

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

77 loop

JavaScript provides a special

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

97 loop to process all the elements in an array. The syntax is as follows, where

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

98 takes on the each of the index number of element which are not





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

8

Sebagai contoh,

The JavaScript's

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

29 loop

JavaScript provides a special





  
  JavaScript Example: Loop


  Testing Loop

01 loop to process all the elements in an array. The syntax is as follows, where





  
  JavaScript Example: Loop


  Testing Loop

02 takes on the each of the element including the





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

9

Add/Remove item(s)

You can

Use index





  
  JavaScript Example: Loop


  Testing Loop

04 to add one item to the end of an array

Use

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

95 to remove a particular index (set it to





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18)

Use





  
  JavaScript Example: Loop


  Testing Loop

07 to add one or more items to the end of an array.





  
  JavaScript Example: Loop


  Testing Loop

08 returns the resultant length of the array

Use





  
  JavaScript Example: Loop


  Testing Loop

09 to add one or more items to the beginning of an array.





  
  JavaScript Example: Loop


  Testing Loop

10 returns the resultant length of the array

Use





  
  JavaScript Example: Loop


  Testing Loop

11 to remove and return the last item of an array

Use





  
  JavaScript Example: Loop


  Testing Loop

12 to remove and return the first item of an array

Sebagai contoh,

PurposeExampleAdd one item to the end of an array using index





  
  JavaScript Example: Loop


  Testing Loop

13Add one or items to the end of an array using





  
  JavaScript Example: Loop


  Testing Loop

07





  
  JavaScript Example: Loop


  Testing Loop

08 returns the resultant length of the array. Add one or items to the beginning of an array using





  
  JavaScript Example: Loop


  Testing Loop

09





  
  JavaScript Example: Loop


  Testing Loop

10 returns the resultant length of the array. Remove and return the last item from an array using





  
  JavaScript Example: Loop


  Testing Loop

11Remove and return the first item of an array using





  
  JavaScript Example: Loop


  Testing Loop

12

Array's Properties (Variables) and Operations (Functions)

The





  
  JavaScript Example: Loop


  Testing Loop

20 object has these commonly-used properties

length. the number of items including





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 items. In fact,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93 is set to the last index plus 1

It has these commonly-used methods

array. bergabung([pemisah]). join the elements of an array together into a single string, separated by the





  
  JavaScript Example: Loop


  Testing Loop

23 (defaulted to





  
  JavaScript Example: Loop


  Testing Loop

24). For example,

str. split([separator, limit]). Reverse of





  
  JavaScript Example: Loop


  Testing Loop

25. Take a string and split into an array based on the





  
  JavaScript Example: Loop


  Testing Loop

26. Sebagai contoh,

array. concat(nilai1, nilai2,. , valueN). returns a new array composing of this array and the given arrays or values. For example,

array. reverse(). reverses the order of elements in the array, the first becomes last. For example,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

0

array. sort(). sorts the elements in the array. For example, Take note take, by default, number are also sorted based on ASCII/Unicode order. To sort numbers numerically, you can supply a callback comparison function. The function shall take 2 arguments, say





  
  JavaScript Example: Loop


  Testing Loop

27 and





  
  JavaScript Example: Loop


  Testing Loop

28, and return a negative number if





  
  JavaScript Example: Loop


  Testing Loop

29; a positive number if





  
  JavaScript Example: Loop


  Testing Loop

30; and 0 if





  
  JavaScript Example: Loop


  Testing Loop

31

array. slice(beginIdx, endIdx). extracts and returns a section of an array from





  
  JavaScript Example: The Date object

62 (inclusive) to





  
  JavaScript Example: The Date object

63 (exclusive). For example,

array. splice(startIdx, countToRemove, insertItem1, insertItem2, . ). removes elements from an array, and insert elements at its place. For example,
array. indexOf(searchItem[, startIdx]) and array. lastIndexOf(searchItem[, startIdx]). search for the index of the item forward or backward. It returns -1 if item cannot be found. For example,
push(). adds one or more elements to the end of an array and returns the resultant length of the array
pop(). removes and return the last element from an array
shift(). removes and returns the first element from an array
unshift(). adds one or more elements to the front of an array and returns the resultant length of the array

Functional Programming in Filter-Map-Reduce pattern

Arrays also support these iterative methods that iterate through each item of the array, to support functional programming of filter-map-reduce pattern

array. forEach(callback). takes a function with an argument which iterates through all the items in the array. NOTE. This syntax is meant to support functional programming of filter-map-reduce pattern
array. map(callback). return a new array, which contains all the return value from executing
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
34 on each item. For example,

filter(callback). return a new array, containing the items for which





  
  JavaScript Example: Loop


  Testing Loop

34 returned

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26. For example,

array. every(callback). return

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if





  
  JavaScript Example: Loop


  Testing Loop

34 returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 for ALL items

array. some(callback). return

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if





  
  JavaScript Example: Loop


  Testing Loop

34 returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 for at least one item in the array

For detailed specification and examples about a built-in object, check "Core JavaScript References"

Associative Arrays of Key-Value Pairs

An associative array is an array of key-value pair. Instead of using numbers 0, 1, 2,. as keys as in the regular array, you can use anything as key in an associative array. Associative arrays are used extensively in JavaScript and jQuery

JavaScript does not support native associative array (it actually does not support native array too). In JavaScript, associative arrays (and arrays) are implemented as objects (to be elaborate later)

You can create an associative array via the Object Initializer. For example,

Take note that Array initializer uses square brackets





  
  JavaScript Example: Loop


  Testing Loop

43; while object initializer (for associative array) uses curly brackets





  
  JavaScript Example: Loop


  Testing Loop

44

Functions

Functions are useful

when you have to use the same codes several times
as the JavaScript event handler
make your program easier to read and understood

A function accepts zero or more arguments from the caller, performs the operations defined in the body, and returns zero or a single result to the caller

Functions are objects in JavaScript (to be discussed later)

The syntax for user-defined function is





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

1

Functions are declared using the keyword

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88. Unlike Java/C/C++, you do not have to specify the return-type and the types of the arguments because JavaScript is loosely typed. You can use a





  
  JavaScript Example: Loop


  Testing Loop

46 statement to return a single piece of result to the caller anywhere inside the function body. If no





  
  JavaScript Example: Loop


  Testing Loop

46 statement is used (or a





  
  JavaScript Example: Loop


  Testing Loop

46 with no value), JavaScript returns





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18

For client-side JavaScript, functions are generally defined in the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

9 section, so that it is always loaded before being invoked

To invoke a function





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

2

Client-Side JavaScript Function Examples





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

3

Function's





  
  JavaScript Example: Loop


  Testing Loop

51

Function has access to an additional built-in variable called





  
  JavaScript Example: Loop


  Testing Loop

51 inside its body, which is an array containing all the arguments. For example,

Pass by Value vs. Pass by Reference

In JavaScript, primitive arguments are passed by value. That is, a copy of the variable is made and passed into the function. On the other hand, objects (including array and associative array) are passed by references. That is, if you modify the content of an object inside the function, the "copy" outside the function is also affected

The Default Function Arguments

JavaScript lets you invoke a function omitting some trailing arguments. It sets the omitted arguments to the value





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18. For example,

You can use this feature to provide default value to function argument, for example,

In the above example, we allow caller to omit the trailing arguments (





  
  JavaScript Example: Loop


  Testing Loop

54,





  
  JavaScript Example: Loop


  Testing Loop

55) or pass a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 value (which is a special literal for unallocated object)

The common idiom in practice today is to use the short-circuited OR expression (as in





  
  JavaScript Example: Loop


  Testing Loop

55) to provide default value if no value (





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 or

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21) is passed, provided the valid inputs cannot be

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49,





  
  JavaScript Example: The Date object

88, and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91 that evaluate to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27

(ES6) Function with Default Parameter Values

ES6 greatly simplify the above by introducing default parameter value in the form of





  
  JavaScript Example: Loop


  Testing Loop

65. For example,

(ES6) Rest/Spread Operator (





  
  JavaScript Example: Loop


  Testing Loop

5) and Arrow-Function Notation

ES6 also introduces rest/spread operator (





  
  JavaScript Example: Loop


  Testing Loop

5) and arrow-function notation. See ES6 article

Anonymous (Inline) Functions

In JavaScript, you can define an anonymous function (without a function name) using the following syntax





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

4

Fungsi anonim sering digunakan dalam event handler dan lainnya

Variabel Fungsi

In JavaScript, a variable can hold a primitive (number, string, boolean) or an object

In JavaScript, functions are first-class object. Hence, a variable can also hold a function object. For example,

Two Ways in defining a function

As seen in the above example, there are two ways to define a function

Use a function declaration statement in the form of.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

5

Use a function expression by assigning an anonymous function to a variable.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

6

Functions as Arguments

Recall that a function takes zero or more arguments from the caller. In JavaScript, arguments can be a primitive or object. Since functions are first-class objects in JavaScript, a function may take another function as its argument

For example, the following function take a function and an array as its arguments, and apply the function to the array

Nested Functions

In JavaScript, you can define a function inside a function. For example,

Function as the return value

You can return a function from a function. For example,

Interacting with Users

Client-side JavaScript provides these built-in top-level functions for interacting with the user

alert(str). Pop-up a box to alert user for important information. The user will have to click "OK" to proceed. The

for ( initialization ; test ; post-processing ) {
   body ;
}

8 returns nothing (or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18)

prompt(str, defaultValue). Pop-up a box to prompt user for input, with an optional





  
  JavaScript Example: Loop


  Testing Loop

70. The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

15 returns the user's input as a string. For example,

confirm(str). Pop-up a box and ask user to confirm some information. The user will have to click on "OK" or "Cancel" to proceed. The
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
16 which returns a boolean value. For example,

document. write(str), document. writeln(str). Write the specified string to the current document. The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

57 (write-line) writes a newline after the string, while

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

85 does not. Take note that browsers ignores extra white spaces, including newlines, in an HTML document, and treat newline as a single blank character. You need to write a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

60 or

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

59 tag to ask the browser to display a line break

The following top-level built-in functions are available to client-side as well as server-side (or standalone)

console. log(value). write to the system (or error) console, used mainly for debugging

Other Top-level Built-in Functions

JavaScript also pre-defines the following top-level global functions

parseInt(str), parseFloat(str). parses the given





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 and returns the numeric value or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91 (Not-A-Number). The





  
  JavaScript Example: Loop


  Testing Loop

79 accepts an optional





  
  JavaScript Example: Loop


  Testing Loop

80 (or base). For example,

Number(object). returns the number representation of the object. It works for





  
  JavaScript Example: Loop


  Testing Loop

81 object, as well as many objects such as

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43

isFinite(number). returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 is not





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91,





  
  JavaScript Example: Loop


  Testing Loop

86 or





  
  JavaScript Example: Loop


  Testing Loop

87

isNaN(number). returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if number is





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91. Useful for checking the output of





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

77 and





  
  JavaScript Example: The Date object

29

eval(codes). evaluate the given JavaScript codes, which could be an expression or a sequence of statements. For example. [TODO]
encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent(). encode or decode name-value pairs for the HTTP request, by replacing special characters with
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
92. For example. [TODO]

An Introduction to Events (for Client-side JavaScript)

Client-side JavaScript are often event-driven. That is, a function (called event handler) will be fired in response to a certain user's or browser's action that generates an event

The commonly-used events are





  
  JavaScript Example: Loop


  Testing Loop

93. generated when the user clicks on an HTML element





  
  JavaScript Example: Loop


  Testing Loop

94,





  
  JavaScript Example: Loop


  Testing Loop

95. generated when the user positions the mouse pointer inside/away from the HTML element

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

03,





  
  JavaScript Example: Loop


  Testing Loop

97. generated after the browser loaded a document, and before the next document is loaded, respectively

The event handler, called





  
  JavaScript Example: Loop


  Testing Loop

98 (such as

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

82,

for ( initialization ; test ; post-processing ) {
   body ;
}

00,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94), is the function that responses to an event. The event handler is typically attached to the target HTML tag, e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

7

More about events in the later sections

Objects

Objects are Everywhere

JavaScript is object-oriented (OO), and objects are everywhere in JavaScript. Arrays are objects. Functions are also objects. Primitives like string and number are auto-box to objects in many operations. Almost everything in JavaScript can be an object, possibly except the





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 and

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 (unallocated object)

It is crucial to understanding objects to be proficient in JavaScript, as they are everywhere, and they are used extensively in JavaScript plug-ins like jQuery, AngularJS, React, and etc

JavaScript, however, does not support all the OO features, so as to keep the language simple

Properties and Methods

In conventional object-oriented programming languages (like Java/C++/C#), an object is a collection of properties and methods under a common name

Properties (also called variables, attributes). contains values associated with the object
Methods (also called operations, functions). contains actions that the object can perform

For example, a

for ( initialization ; test ; post-processing ) {
   body ;
}

04 object has properties such as

for ( initialization ; test ; post-processing ) {
   body ;
}

05,

for ( initialization ; test ; post-processing ) {
   body ;
}

06,

for ( initialization ; test ; post-processing ) {
   body ;
}

07,

for ( initialization ; test ; post-processing ) {
   body ;
}

08; and methods such as

for ( initialization ; test ; post-processing ) {
   body ;
}

09,

for ( initialization ; test ; post-processing ) {
   body ;
}

10,

for ( initialization ; test ; post-processing ) {
   body ;
}

11,

for ( initialization ; test ; post-processing ) {
   body ;
}

12

Unlike full-fledged OO languages, JavaScript is designed on a simple OO paradigm. A JavaScript object is simply a collection of properties. A property is an association between a key (or name) and value (i. e. , key-value pair or name-value pair). Jika nilainya adalah fungsi (ingat bahwa fungsi JavaScript adalah objek kelas satu yang dapat ditugaskan ke variabel), properti tersebut dikenal sebagai metode. Dengan kata lain, JavaScript tidak membedakan antara properti dan metode seperti bahasa OO konvensional. A method is simply a property holding a function

Membuat Objek melalui Object Initializer dengan Object Literal

Anda dapat membuat objek baru dengan langsung menetapkan literal objek ke variabel, yang dikenal sebagai Penginisialisasi Objek. The syntax is as follows





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

8

A JavaScript object is a collection of properties. Each property is an association of a name (key) and value pair

The name and value are separated by a colon

for ( initialization ; test ; post-processing ) {
   body ;
}

13

The name-value pairs are separated by commas
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
24. No comma is needed after the last name-value pair
The property name could be a string or a number. For string name which is NOT a valid identifier (an valid identifier begins with an alphabet, underscore or dollar sign; and does not containing special characters like blank or
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
15), you need to enclose the name with single or double quotes. Otherwise, the quotes are optional. For example, Take note that if the property name's string is a proper identifier, you can omit the quotes. This is commonly practiced by the developers
The property value could be a literal, a variable or an expression
A property's value could take all JavaScript types, including primitives (string, number, boolean), object or function. The property is known as a method, if it holds a function. JavaScript does not differentiate between variables and methods like conventional OO languages (Java/C++/C#). A method is simply a property holding a function

Objects created via Object Initializer are instances of class

for ( initialization ; test ; post-processing ) {
   body ;
}

16

Trailing Commas

Trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome. JavaScript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ES?), and more recently, to function parameters (ES?) and to named imports and named exports (ES?)

Property Accessors. The Dot and Index (Square Bracket) operator

In JavaScript, you can access an object's properties via either

The dot (

for ( initialization ; test ; post-processing ) {
   body ;
}

17) operator. in the form of

for ( initialization ; test ; post-processing ) {
   body ;
}

18 or

for ( initialization ; test ; post-processing ) {
   body ;
}

19, just like Java/C++

The index
```
  
  JavaScript Example: The Date object
  
```
65 operator (or bracket notation). In JavaScript, you can also use the index operator to access the object properties, in the form
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
21, just like accessing an array item

The

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

95 operator

You can remove a property (including method) via "

for ( initialization ; test ; post-processing ) {
   body ;
}

23"

Operator

for ( initialization ; test ; post-processing ) {
   body ;
}

24

You can use the

for ( initialization ; test ; post-processing ) {
   body ;
}

24 operator to check if a particular instance belongs to a particular class of objects, e. g. ,

The

for ( initialization ; test ; post-processing ) {
   body ;
}

26 method

The

for ( initialization ; test ; post-processing ) {
   body ;
}

27 returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if

for ( initialization ; test ; post-processing ) {
   body ;
}

29 has the specific

for ( initialization ; test ; post-processing ) {
   body ;
}

30

Operator

for ( initialization ; test ; post-processing ) {
   body ;
}

31

You can use the

for ( initialization ; test ; post-processing ) {
   body ;
}

31 operator to check if a particular property belongs to an object, for example,

Example 1. A Simple Object, Deleting and Adding Properties

Unlike Java/C++, you can delete or add new properties to an existing JavaScript object

Example 2. An Object having Object Properties

An object's property can hold primitives (number, string). It can also hold an object

Example 3. An object with function

A JavaScript object's property can also hold a function (or method). You can assign to an anonymous function or a named function as shown in the following example

To quote or not to quote the name in name-value pair?

The

for ( initialization ; test ; post-processing ) {
   body ;
}

33 (of the

for ( initialization ; test ; post-processing ) {
   body ;
}

34 pair) can take a string or a number, e. g. ,

for ( initialization ; test ; post-processing ) {
   body ;
}

35

Many developers do not enquote the string

for ( initialization ; test ; post-processing ) {
   body ;
}

33, if it is a valid identifier (a valid identifier begins with an alphabet,

for ( initialization ; test ; post-processing ) {
   body ;
}

37 or

for ( initialization ; test ; post-processing ) {
   body ;
}

38; and does not contain special characters like blank and

for ( initialization ; test ; post-processing ) {
   body ;
}

15). For example,

for ( initialization ; test ; post-processing ) {
   body ;
}

40 is the same as

for ( initialization ; test ; post-processing ) {
   body ;
}

41. However, you need to enquote a string

for ( initialization ; test ; post-processing ) {
   body ;
}

33 if it is NOT a valid identifier, e. g. ,

for ( initialization ; test ; post-processing ) {
   body ;
}

43

The string





  
  JavaScript Example: The Date object

95 must be enquoted; otherwise, it will be treated as a variable name

Dot Operator vs. Index (Square Bracket) Operator

You can access an object's property via either dot operator or index operator. Dot operator is commonly used as it is more concise and used in conventional OO languages. But index operator allows access to properties containing special characters and selection of properties using variables, which is not feasible with dot operator. For example,

Iterate through all the properties of an Object

There are three ways to iterate through all properties of an object

for. in. traverses all enumerable properties of an object and its prototype chain
Object. keys(obj). return an array of all enumerable property names
Object. getOwnPropertyNames(obj). return an array of all property names

Sebagai contoh,

Operator

for ( initialization ; test ; post-processing ) {
   body ;
}

45

Establishes the default object for a set of statements. The syntax is





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

9

The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 vs





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 Literal Values

As discussed earlier

An undeclared variable has type of





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18, and its value cannot be referenced

A declared but uninitialized variable has type of





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18, with a special literal value of





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 too. [





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 is both a type and a literal value. ]

A unallocated object has a special literal value of

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21. Take note that

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 is an object

In boolean expressions, both the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 evaluate to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27 (together with empty-string





  
  JavaScript Example: The Date object

13, number





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49 and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91, and boolean

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27). To check for

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 value, use

for ( initialization ; test ; post-processing ) {
   body ;
}

62, as

for ( initialization ; test ; post-processing ) {
   body ;
}

63 (or





  
  JavaScript Example: The Date object

93) returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 for

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18,





  
  JavaScript Example: The Date object

13,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91, and

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27

Built-in JavaScript Objects

JavaScript provides many useful global objects, such as





  
  JavaScript Example: Loop


  Testing Loop

20,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43,





  
  JavaScript Example: Loop


  Testing Loop

81, and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89

I shall discuss some commonly used objects here. For detailed specification and examples about a built-in object, check "Core JavaScript References"

Creating an Object via Constructor and the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 Operator

All the built-in objects define a so-called constructor, which is a special method having the same name as the object, for creating new instances. To invoke the constructor, you need to use a special

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator

For example, the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 object has a constructor method called

for ( initialization ; test ; post-processing ) {
   body ;
}

79. To construct a new instance of

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 object

The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

31 and

for ( initialization ; test ; post-processing ) {
   body ;
}

24 Operators

As seen from the above examples, the





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

31 operator returns the type of a value, which can be a primitive type (such as number, string, boolean) or object (including function)

The

for ( initialization ; test ; post-processing ) {
   body ;
}

24 operator check if the value is an instance of a class

The





  
  JavaScript Example: The Date object

43 and

for ( initialization ; test ; post-processing ) {
   body ;
}

86 Methods

Metode berikut tersedia untuk semua objek JavaScript bawaan

keString(). mengembalikan deskripsi string tentang objek ini

valueOf(). converts this object to a primitive value such as

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74

The





  
  JavaScript Example: Loop


  Testing Loop

20 Object and Associative Arrays

For an introduction to arrays, read the "" section

Nowadays, we usually create an array via Array Initializer in the form of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

84. Nonetheless, as arrays are objects of class





  
  JavaScript Example: Loop


  Testing Loop

20, we could also construct an array by invoking the

for ( initialization ; test ; post-processing ) {
   body ;
}

91 constructor with the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator. This is more complex and, hence, less commonly used today (but may show up in old codes and books)

Sebagai contoh,

An Associative Array is a Generic "Object", not an "Array" Object

For an introduction to arrays, read the "" section

JavaScript does not really support associative array, but allow you to add properties to an object, using the associative array syntax and index operator. In other words,

Using an Array Object for Associative Array

In JavaScript, we usually create an associative array using a generic object (via the Object Initializer). You can also create an associative array via





  
  JavaScript Example: Loop


  Testing Loop

20 constructor. For examples,

In this case, additional properties are added into an





  
  JavaScript Example: Loop


  Testing Loop

20 object as object's properties. The array has

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93 of 0, as

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93 reflects only the numerical indexes. Using an array object for associative array is not recommended. I describe here for completeness

The





  
  JavaScript Example: Loop


  Testing Loop

81 Object vs





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 Primitive Type

JavaScript provides primitive





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 type. It also provide a





  
  JavaScript Example: Loop


  Testing Loop

81 class as a wrapper class for primitive





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30. Read "" for primitive





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30

A string can be created in two ways

directly assigned a string literal in the form of





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

03 or





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

04 to a variable, resulted in a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 primitive

invoke the





  
  JavaScript Example: Loop


  Testing Loop

81 object constructor to construct a





  
  JavaScript Example: Loop


  Testing Loop

81 object

Sebagai contoh,

The former is a primitive





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30, while the latter is a





  
  JavaScript Example: Loop


  Testing Loop

81 object





  
  JavaScript Example: Loop


  Testing Loop

81 object is a wrapper for primitive string, which provides many useful methods for manipulating strings. See ""

A





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 primitive is "auto-box" to a





  
  JavaScript Example: Loop


  Testing Loop

81 object, when you invoke a





  
  JavaScript Example: Loop


  Testing Loop

81 object's methods. For example,

The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 Object vs

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 Primitive Type

JavaScript provides primitive

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 type. It also provide a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 class as a wrapper class for primitive

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74. Read "" for primitive

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74

The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 object is a wrapper object for primitive

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74, which provides many properties and methods. Again, a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 primitive is auto-box to a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 object, when you invoke a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 object's operation. See ""

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

25 Object vs boolean





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

26 Type

JavaScript provides primitive





  
  JavaScript Example: The Date object

78 type. It also provide a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

25 class as a wrapper class for primitive





  
  JavaScript Example: The Date object

78. Read "" for primitive





  
  JavaScript Example: The Date object

78

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

25 object is a wrapper object for primitive





  
  JavaScript Example: The Date object

78, which provides many properties and methods

The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 Object

Commonly-used constructors

new Date(). constructs a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 object with the current date and time

new Date(dateTimeStr). constructs a
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
43 object with the given date-time string in an acceptable form (e. g. , "Month, day, year, hours. minutes. seconds")
new Date(year, Month, day). where month is 0-11 for Jan to Dec
new Date(year, Month, day, hours, minutes, seconds, milliseconds)

Commonly-used methods

```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
62, setDate(), getMonth(), setMonth(), getFullYear(), setFullYear(). get/set the date (1-31), month (0-11 for Jan to Dec), year (4-digit year)
getDay(). get the day of the week (0-6 for Sunday to Saturday)

getHours(), setHours(), getMinutes(), setMinutes(), getSeconds(),





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

37. get/set the hours/minutes/seconds

getTime(), setTime(). get/set the number of milliseconds since January 1, 1970, 00. 00. 00

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

38 Object

Commonly-used properties

E, PI. Euler’s constant and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

39

LN2, LN10, LOG2E, LOG10E. ln(2), ln(10), log2(e), log10(e)
SQRT2, SQRT1_2. square root of 2 and one-half

Commonly-used methods

abs(x)
sin(a), cos(a), tan(a), asin(x), acos(x), atan(x), atan2(x,y)
cell(x), floor(x), round(x)
exp(x), log(x), pow(base,exp), sqrt(x)
max(x,y), min(x,y)
random(). returns a pseudo-random number between 0 and 1

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 Object

For an introduction to functions, read "" section

Every function in JavaScript is actually a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 object

Function Variable

A variable can be assigned a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 object (called function variable), which takes a special object type called

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88. [In JavaScript, an object's type is either

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88 (for





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 object) or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

20 (for any object not a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40). ]

Sebagai contoh,

Anonymous Function

If a function is called only once, you can use an anonymous function, omitting the function name. Anonymous functions are commonly-used as event handler, e. g. ,

You can define a inline (anonymous) function and assign it to a variable as follows

Function Constructor

Besides using

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88 keyword, you can also use the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 constructor (with

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator) to define a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 object. This is not easily understood and, hence, not recommended

The syntax for





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 constructor is





  
  JavaScript Example: The Date object

0

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

53 object

Formatting Console Output

console. log('formattingStr', arg1, arg2, . ). You can use C's

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

14-like syntax with format specifiers (such as





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

55,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

56,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

57) to format the output string

You can use %c to apply CSS rules, e. g. ,





  
  JavaScript Example: The Date object

1

Logging Methods

JavaScript mendukung 5 tingkat logging, dalam urutan tingkat keparahan

menghibur. kesalahan()
menghibur. warn()
console. log()
console. info()
console. debug()

More Debugging Methods

console. trace(). print the current stack trace
console. dir(). displays an interactive list of the properties of the specified JavaScript object
console. dirxml(). displays in XML the properties of the specified JavaScript object
console. assert(). writes an error message to the console if the assertion is false; otherwise do nothing

Time Measurements

console. time([label]). starts a new timer
console. timeEnd([label]). ends the timer and returns the time in milliseconds since the timer starts
console. timeLog([label]). returns the elapsed time since the timer started

More on Objects

Prototype-based vs. Class-based OO

JavaScript's OO is prototype-based, instead of class-based like Java/C++/C#

A class-based OO language (such as Java/C++/C#) is founded on concepts of class and instance. A class is a blue-print or template of things of the same kind. An instance is a particular realization of a class. For example, "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

58" is a class; and "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

59" and "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

60" are instances of the "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

58" class. In a class-based OO language, you must first write a class definition, before you can create instances based on the class definition. The instances created have exactly the same properties and methods as the class - no more, and no less

On the other hand, a prototype-based OO language (such as JavaScript) simply has objects (or instances). A new object can be constructed based on an existing object as prototype. There is no class definition, and hence, they are also called class-less OO languages

In JavaScript

Every JavaScript object has a prototype. The prototype is also an object. A JavaScript object is created from a prototype object and gets its initial properties from the prototype

Every JavaScript object has an internal property called





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62, which holds its prototype object. When you define a new object, its





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 is set to a built-in object called





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64. In other words, the new object uses





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64 as its prototype, and gets its initial properties from





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64. The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 property is not enumerable, i. e. , itu tidak akan muncul di

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

77 loop

Example. Object Prototype

Notes

Prototype Chain. In the above example,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

69's prototype is





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64, whose prototype is

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21. This form a prototype chain of





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

72.





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

69 defines two own properties.





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

74 and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

75. When you invoke





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

76, which cannot be found in





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

69, but found in its prototype

Object. getPrototypeOf(obj). Instead of using





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

78 property used in above example, which is NOT in the official JavaScript specification, you should use





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

79 method to get the prototype of an object

Defining Your Own Custom Objects via a Constructor

In JavaScript, you can create your own custom objects by defining a constructor. A constructor is simply a function, which can be invoked via the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator to create and initialize new objects. Recall that JavaScript is prototype-based and class-less. A new object is created from a prototype object, and gets its initial properties from this prototype object. The constructor function provides the prototype to create and initialize new instances (to be explained later)

By convention, a constructor name begins with an uppercase letter

Keyword

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09

"

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09" refers to the current object.





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

83 refers to the property of this object

Example. Object Constructor Function

Let us define a constructor for our custom





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 objects, with properties





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

74,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

86,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

87 and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

88

Bagaimana itu bekerja?

Properties (including methods) are declared inside the constructor via





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

83, which can then be initialized

Methods can be declared inside the constructor via





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

90. There are a few ways to provide the method's definition

Define an ordinary

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88, and assign the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

92 (without parentheses, which is a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88 type) to





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

90, as in the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

88

Assign





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

90 to an inline function, as in the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

87

Invoke the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 constructor with

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator (rarely-used).





  
  JavaScript Example: The Date object

2

To invoke a method, use





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

00

The





  
  JavaScript Example: The Date object

43 is a special method, which returns a string description of this object. The





  
  JavaScript Example: The Date object

43 will be implicitly invoked if an object is passed into the

for ( initialization ; test ; post-processing ) {
   body ;
}

9,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

56 or

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

00 operator (like Java)





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 and





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07

Revisit the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 Operator

In JavaScript, the new constructor(args) call does the followings

Create a new generic object using built-in root

for ( initialization ; test ; post-processing ) {
   body ;
}

16 as prototype

Assign this newly created object to

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09 variable

Run the constructor function, which typically adds properties to

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09

Set the internal property





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 to





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

13 (in the above example,





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

14). The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 property is not enumerable (i. e. , it would not shown up in the

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

77 loop). It is used to maintain the so called "prototype chain" of the objects

Return the newly created object

Take note that you can invoke the constructor function WITHOUT the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator, e. g. ,





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

18. In this case, the constructor will be run as per ordinary function. There will not be any association of

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09 and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 properties; and the return value will depend on the function codes

Try tracing the object created in the above example via Chrome's Developer Tools, which could display the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 internal property

Another Example

Constructor's





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07 Property

All the JavaScript constructor function objects (in fact, all function objects) have a special property called





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07. By default, it holds an object that can be used as a prototype for creating new objects

In the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 example, the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 constructor function has a





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

14, which holds a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 object to be used as a prototyping object. When a new





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 object is constructed via the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator, the newly constructed object's





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 property is set to





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

14

Menambahkan properti Bersama ke Properti





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07 Pembuat

The constructor's





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07 is used to implement shared properties (typically shared methods) for all the objects it prototyped. Dalam JavaScript, Anda dapat menambahkan properti secara dinamis selama runtime ke





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07. Properti/metode yang ditambahkan akan tersedia untuk semua objek (objek baru maupun yang sudah ada). Sebagai contoh,

Saat Anda mereferensikan sebuah properti, JavaScript terlebih dahulu memeriksa apakah properti tersebut ada secara lokal (atau memiliki properti); . Ingatlah bahwa panggilan





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

36 menyetel





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 ke





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

13. Karenanya, properti yang ditambahkan ke





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

_13 tersedia untuk (dan dibagikan oleh) semua objek yang dibuat prototipe oleh konstruktor ini

Dalam praktiknya, kami mendefinisikan metode (dan variabel statis) di





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

13 untuk digunakan bersama oleh semua objek;

Mencari Rantai Prototipe

Objek dalam JavaScript membentuk rantai prototipe. Dalam contoh di atas, rangkaian prototipe adalah





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

41

Saat Anda mereferensikan properti objek, JavaScript ikuti langkah-langkah berikut untuk menemukan properti

Periksa apakah properti ada secara lokal (mis. e. , memiliki properti)

Jika tidak, centang properti





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

_62. Ini berlanjut secara rekursif ke rantai prototipe. Prosesnya disebut "pencarian dalam rantai prototipe"

Oleh karena itu, dalam contoh di atas, semua properti di





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

14 dan





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64 diwarisi oleh





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

45

for ( initialization ; test ; post-processing ) {
   body ;
}

24 Operator

Every object has a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 object property (except

for ( initialization ; test ; post-processing ) {
   body ;
}

16); every constructor function has a





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07 property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 to the constructor's





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07. JavaScript provides a shortcut. the

for ( initialization ; test ; post-processing ) {
   body ;
}

24 operator tests an object against a function and returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if the object inherits from the function prototype. For example,

[MELAKUKAN]





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

54





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

54 lets you create a new object based on the given prototype object. It simply sets the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 to the given prototype object, so that all properties of the prototype are available to the new object. Using





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

54, You do NOT need to define a constructor function and run





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

58 to create new objects

Inheritance via Prototype Chain

You can implement inheritance in JavaScript via the prototype chain. For example,

How It Works

[MELAKUKAN]

Getter and Setter

In languages like Java, you can declare a variable to be





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

59 and define





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

60 getter/setter to access the





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

59 variable. JavaScript does not really support





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

59 access?. But you can also define ordinary methods





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

63 or





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

64 as getter/setter like Java

Moreover, in JavaScript, you can define getter/setter as properties instead of methods in one of the following two ways

via built-in functions





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

65 or





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

66;

inside the "object initializer" via keywords





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

67 and





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

68

Example 1. Define Getters/Setters via





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

65 or





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

66

Notes

The





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

71 allows you to define multiple properties; while





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

72 for a single property

You invoke the getters/setters like properties with assignment operator, instead of via function call

Example 2. Define Getter/Setter inside the Object Initializer

Notes

The getter/setter are defined inside Object Initializer via keywords





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

67 and





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

68 with a rather strange syntax, as shown in the example

for ( initialization ; test ; post-processing ) {
   body ;
}

16's Properties





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

76

All JavaScript objects inherited a special property called





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

77, which contains a reference to the function that created the object. For example,

[TODO] more Object's properties

Document Object Model (DOM) API for JavaScript

Document Object Model (DOM), is a standard API that allows programmers to access and manipulate the contents of an HTML/XHTML/XML document dynamically inside their program. It models an HTML/XHTML/XML document as an object-oriented, tree-like structure, known as a DOM-tree, consisting of nodes resembling the tags (elements) and contents. DOM also provides an interface for event handling, allowing you to respond to user's or browser's action

DOM API is implemented in many languages such as Java, JavaScript, Perl, and ActiveX. Spesifikasi DOM API dikelola oleh W3C. DOM has various levels

DOM Level 0 (DOM0) (Pre-W3C). obsolete
DOM Level 1 (DOM1) (W3C Oct 1998). obsolete
DOM Level 2 (DOM2) (W3C Nov 2000) and DOM Level 2 HTML (HTML DOM2) (W3C Jan 2003)
DOM Level 3 (DOM3) (W3C Apr 2004). yet to be fully supported by browsers

jQuery is much better in selecting and manipulating DOM element. You should use jQuery in production. I keep these sections here for completeness

Finding and Selecting Elements

In JavaScript, we often use DOM API to select elements within the current document, so as to access or manipulate their contents. The most commonly-used functions are

FunctionDescriptionExample





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

78Returns the element with the given unique

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

19.





  
  JavaScript Example: The Date object

3





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

80Returns an array of elements with the given tag name.





  
  JavaScript Example: The Date object

4





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

81Returns an array of elements with the given





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

82 attribute name.





  
  JavaScript Example: The Date object

5





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

83Returns an array of elements with the given

for ( initialization ; test ; post-processing ) {
   body ;
}

33 attribute.





  
  JavaScript Example: The Date object

6

You can use wildcard





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

85 in





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

86 to select all the elements, e. g. ,





  
  JavaScript Example: The Date object

7

The above functions select element(s) based on the unique

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

19,

for ( initialization ; test ; post-processing ) {
   body ;
}

33 attribue and tag-name. HTML 5 further defines two function that can select elements based on





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

82 attribute (which is used extensively by CSS in the class-selector)

FunctionDescriptionExample





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

90Returns the first element with the given





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

82 attribute.





  
  JavaScript Example: The Date object

8





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

92Returns an array of elements with the given





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

82 attribute.





  
  JavaScript Example: The Date object

8

Beside the above selection functions, there are many other selection functions available. However, I strongly recommend that you stick to the above functions. I listed below the other function below for completeness





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

94 returns an array of all





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

95 elements, same as





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

96





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

97. return an array of allelements





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

98 and





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

99. return all the hyperlinks





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6and anchors





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6elements. [To confirm. ]

Manipulating Element's Content through the

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

42 Property

You can access and modify the content of an element via the "

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

42" property, which contains all the texts (includes nested tags) within this element

Sebagai contoh,

"

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

42" is the most convenient way to access and manipulate an element's content. However, it is not a W3C standard, but it is supported by most of the browsers

Pohon DOM dan Node

W3C recommends that you access and manipulate HTML elements via the DOM tree and nodes. However, it is really an overkill for writing simple JavaScripts. I present them here again for completeness

When a browser loads an HTML page, it builds DOM models a web page in a hierarchical tree-like structure composing of nodes, resembling its HTML structure

An example of an HTML document with the corresponding DOM-tree is given follow. Take note that the text content of an element is stored in a separate Text node

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

0

Load the web page onto Firefox, and use the firebug to inspect the DOM tree.

Pohon DOM terdiri dari jenis node berikut

Document Node. the root node representing the entire HMTL document
simpul elemen. represents an HTML element (or tag). An element node may have child nodes, which can be either element or text node. Simpul elemen mungkin juga memiliki atribut
Text Node. contains the text content of an element
Others. such as comment, attribute

011 for Text node is the text contained;

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

011 for Element node is undefined

```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
014. an integer indicating the type of the node, e. g. , Element (1), Attribute (2), Text (3), Comment (8), Document (9)

Take note of the difference between singular and plural terms. For example,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

015 refer to the parent node (each node except root has one and only one parent node),

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

016 holds an array of all the children nodes

The root node of the DOM tree is called





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

6. The root node





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

6 has only one child, called

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

025, representing the tag, and it acts as the parent for two child nodes representing and tags, which in turn will have other child nodes. You can also use a special property called

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

026 to access the tag directly

For example, you can use the following node property to access the Text node

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

027 in the above example

Example

The following JavaScript lists all the nodes in the section, in a depth-first search manner, via a recursive function

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

1

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

2

Accessing the HTML element via Node interface may not be too useful nor practical for JavaScript applications, as you need to know the actual topological structure of the DOM-tree. Furthermore, some browsers (e. g. , firefox) may create extra Text nodes to contain the white spaces between tags

Text Node

DOM models the texts enclosed by HTML tags as a separate text node. It cannot have child node. To retrieve the text content, you could the property

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

011. For example,

Attribute Properties

To access an attribute of an Element node called

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

029, you could either use

property

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

030, where

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

031 is the name of the attribute, or

methods

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

032 and

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

033

Sebagai contoh,

Attribute

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

034 (for CSS)

Element has a property called style, which models CSS style with CSS properties such as

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

07 and

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

036. For example,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

3

Memanipulasi Node

A Node object has these functions

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

037. returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

element as the last child of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

4

Inserting a new Node (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

053)

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

4

Replacing a Node (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

054)

Change the last line to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

055

Deleting a Node (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

056)

Anda dapat menghapus simpul anak dari simpul induk melalui

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

057

Misalnya, biarkan hapus yang terakhir

dari

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

_6

Objek





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

_6

Objek





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

_6 adalah simpul akar dari pohon DOM. Itu dapat digunakan untuk mengakses semua elemen di halaman HTML

kode javascript

Fungsi setattribute onclick javascript dengan parameter

Introduction

It began as a Client-side Programming Language run inside a web browser via a Built-in JavaScript Engine

JavaScript Sekarang Di Mana Saja dengan Node. js

Sejarah dan Versi

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

JavaScript vs. Jawa

Apa yang TIDAK DAPAT Dilakukan JavaScript Sisi Klien?

jQuery

Standalone dan JavaScript sisi server dengan Node. js Mesin JavaScript

Editor dan IDE Kode Sumber JavaScript

JavaScript Sisi Klien berdasarkan Contoh

Sisi klien JS EG 1. Fungsi for ( initialization ; test ; post-processing ) { body ; }8 dan for ( initialization ; test ; post-processing ) { body ; }9

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Bagaimana itu bekerja?

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Jangan Tertangkap oleh Cache - Lakukan Control-Refresh (atau Control-F5)

Jangan Gunakan for ( initialization ; test ; post-processing ) { body ; }_8

Hello world, again!

Hello world, again!

Hello world, again!

Alat Pengembangan Web F12 dan Debugger Browser

Hello world, again!

Hello world, again!

Hello world, again!

Di mana pesan kesalahannya?

Client-Side JS EG 2. Variabel dan Fungsi My First JavaScript says Hello world, again!This document was last modified on mm/dd/yyyy hh:mm:ss._15, My First JavaScript says Hello world, again!This document was last modified on mm/dd/yyyy hh:mm:ss.16

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Bagaimana itu bekerja?

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Sisi Klien JS EG 3. Objek My First JavaScript says Hello world, again!This document was last modified on mm/dd/yyyy hh:mm:ss._43

Hello world, again!

Hello world, again!

Bagaimana itu bekerja?

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Sisi klien JS EG 1. Fungsi
for ( initialization ; test ; post-processing ) { body ; }
8 dan
for ( initialization ; test ; post-processing ) { body ; }
9

Jangan Gunakan
for ( initialization ; test ; post-processing ) { body ; }
_8

Client-Side JS EG 2. Variabel dan Fungsi
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
_15,
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
16

Sisi Klien JS EG 3. Objek
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
_43

Sisi Klien JS EG 5. Fungsi yang ditentukan pengguna dan
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
_82 Event Handler