Scribd
Unggah
421 tayangan

Belajar JavaScript

Dokumen tersebut membahas tentang pengertian dan pengenalan JavaScript sebagai bahasa pemrograman untuk membuat interaksi pada website agar terlihat lebih hidup, serta menjelaskan bahwa JavaScript telah menjadi bahasa pemrograman yang dibutuhkan untuk membangun website modern."

Diunggah oleh

mathbtg
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
421 tayangan

Belajar JavaScript

Dokumen tersebut membahas tentang pengertian dan pengenalan JavaScript sebagai bahasa pemrograman untuk membuat interaksi pada website agar terlihat lebih hidup, serta menjelaskan bahwa JavaScript telah menjadi bahasa pemrograman yang dibutuhkan untuk membangun website modern."

Diunggah oleh

mathbtg
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 44

Belajar JavaScript Part 1 : Pengertian dan Pengenalan JavaScript

https://www.malasngoding.com/belajar-javascript-pengertian-dan-pengenalan-javascript/

Javascript merupakan bahasa pemrograman yang berguna untuk membuat


interaksi pada website sehingga website terlihat lebih hidup seperti misalnya
membuat efek-efek pada website. Javascript sudah menjadi salah satu bahasa
pemrograman yang wajib dan harus dikuasai untuk membangun website yang
modern. Javascript menjadi kebutuhan dan bahasa pemrograman yang harus
dikuasai apalagi bagi anda yang akan mengkhususkan diri di bagian web design.
Adapun beberapa bahasa pemrograman yang wajib dikuasai oleh seorang web
developer adalah:
 HTML
Dalam membangun sebuah website HTML berperan sebagai pembuat bentuk.
 CSS
Dalam membangun sebuah website CSS memiliki peran sebagai design bentuk, warna,
tulisan dan sebagainya
 JavaScript
Dalam membangun sebuah website JavaScript berguna untuk membuat fitur-fitur serta
efek yang membuat halaman website lebih interaktif.
Pada perkembangan dunia website sekarang ini javascript sudah menjadi
bahasa pemrograman yang sangat dibutuhkan. Banyak website yang
menggunakan javascript untuk membuat modal alert, pemberitahuan, form
validation, efek, ajax, game dan sebagainya.

Contoh salah satu website yang menggunakan javascript untuk membuat website
mereka lebih interaktif atau lebih hidup adalah facebook, twitter, google dan lainnya.
pada halaman facebook terdapat kotak chatting yang dapat anda buka dan tutup.
Form chat dapat terbuka dan tertutup jika di klik karena menggunakan bantuan
javascript. Kemudian lagi jika anda pernah memesan atau memeriksa ongkos tiket
pesawat melalui situs-situs penyedia layanan tiket pesawat, setelah anda memilih
kota sekarang dan memilih kota tujuan anda maka akan muncul maskapai pesawat
yang tersedia tanpa me-reload halaman. hal ini terjadi karena menggunakan
teknik ajax yang di buat dengan javascript.

Apa saja yang dapat dilakukan dengan JavaScript

Untuk lebih menegaskan pemahaman tentang pengertian


javascript dan kegunaan javascript berikut akan dijelaskan apa-apa saja yang
dapat di lakukan oleh javascript:
 Javascript dapat mengganti atribut HTML
 Javascript dapat mengganti style css
 Javascript dapat membuat form validasi
dan masih banyak lagi yang dapat di lakukan dengan javascript seperti yang akan
kita pelajari pada tutorial belajar javascript dasar di www.malasngoding.com ini.
Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript

https://www.malasngoding.com/belajar-javascript-part-2-cara-penulisan-dan-penggunaan-javascript/

Cara Penulisan Dan Penggunaan Javascript – Selamat datang di turorial


javascript dasar berbahasa indonesia. ini merupakan tutorial javascript part 2. di
mana pada part 1 kita telah membahas tentang pengertian dan pengenalan
javascript. silahkan teman-teman membaca tutorial javascript sebelumnya di
www.malasngoding. baca : Belajar Javascript Part 1 : Pengertian Dan Pengenalan
Javascript.

Seperti yang telah di jelaskan bahwa javascript berfungsi untuk membuat interaksi
pada halaman website atau aplikasi yang dibangun berbasis website. Jadi
di tutorial javascript ber-episode ini akan di jelaskan dari dasar tentang javascript.
dan kemudian diharapkan dapat memberikan manfaat kepada teman-teman dan
orang banyak. Baiklah silahkan langsung saja simak penjelasan berikut ini.

Cara Penulisan Syntax Javascript


Kita mulai dengan cara penulisan syntax javascript yang baik dan benar. dan
adapun pengetahuan dasar yang harus kita ketahui dari javascript adalah sebagai
berikut.

 Di simpan dengan ekstensi .js.


 Syntax javascript yang di sisipkan pada halaman HTML di tulis di dalam tag <script>.
 Syntax javascript bisa diletakkan di bagian element tag <head> atau tag <body>.
 Javascript bersifat case sensitive.
 Di setiap akhir baris harus di tutup dengan titik koma/semicolon ( ; ).

syntax javascript bisa di gunakan dengan 2 cara teman-teman. yaitu dengan cara
di sisipkan pada halaman HTML langsung, dan 1 lagi dengan cara menyimpan file
javascript dengan ekstensi .js. dan kemudian mengincludenya pada halaman
HTML. Agar lebih spesifik akan kita bahas satu per satu.

Menggunakan Javascript Secara Internal


Penulisan javascript secara internal adalah dengan cara menyisipkan langsung
syntax javascript di dalam HTML. jika teman-teman menggunakan cara ini maka
syntax javascriptnya harus teman-teman letakkan di antara tag <script> pembuka
dan tag </script> penutup. dan meletakkannya bisa di dalam tag <head>, bisa juga
di dalam tag <body>. Buat sebuah file HTML untuk membuat contoh penggunaan
Javascript secara internal. Bisa file html bisa juga php. Karena javascript mampu
berjalan di antara keduanya. Di sini saya hanya membuat file html saja sebagai
contoh. buat sebuah file html dengan nama belajar.html.

belajar.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title>
5
6 </head>
7 <body>
8 <h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1>
9 <h2>www.malasngoding.com</h2>
10
11 <div id="nama"></div>
12
13 <script>
14 document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";
15 </script>
16 </body>
17
18 </html>

coba perhatikan pada contoh di atas. terdapat sebuah element div yang kita beri
id=”nama”. dan kemudian kita memberikan sentuhan javascript di sana dengan
perintah berikut.

1 document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";

Document adalah syntax wajib di javascript, dan


fungsi getElementById() berfungsi untuk memerintahkan mendapatkan element
yang ber id sesuai dengan yang ada di dalam parameter
fungsi getElementById() itu sendiri. penulisannya harus diperhatikan ya teman-
teman besar kecilnya. Karena javascript bersifat case sensitive dan innerHTML
berfungsi untuk menuliskan html. Jadi secara lengkap intruksi yang kita serukan
adalah kita menyerukan untuk menulisakan “Nama Saya Malas Ngoding” di
element yang ber id “nama”. jika di jalankan pada browser. maka hasilnya sebagai
berikut.

cara penulisan dan penggunaan javascript

Menggunakan Javascript Secara External


Setelah membahas cara penulisan javascript secara internal, atau dengan cara
menyisipkan langsung syntax javascript pada html, maka di sini kita akan
membahas cara lainnya untuk menggunakan javascript, yaitu dengan cara
menggunakan javascript secara external. caranya buat lah dua buah file, yaitu :
 belajar.html
 belajar.js
di file belajar.html kita akan menuliskan syntax HTML nya saja dan pada belajar.js
kita akan menuliskan syntax javascript nya pada file belajar.js. dan cara agar kedua
file ini terhubung adalah dengan cara menghubungkannya dengan syntax berikut.
1 <script type="text/javascript" src="belajar.js"></script>

belajar.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title>
5
6 </head>
7 <body>
8 <h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1>
9 <h2>www.malasngoding.com</h2>
10
11 <div id="nama"></div>
12
13 </body>
14 <script type="text/javascript" src="belajar.js"></script>
15 </html>

belajar.js
1 document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";

dan jika di jalankan maka hasilnya akan sama.

Oke teman-teman sekian lah tutorial Belajar Javascript Part 2 : Cara Penulisan
Dan Penggunaan Javascript. pada tutorial ini kita telah belajar tentang
bagaimana penulisan javascript dan bagaimana cara menggunakannya.

Belajar Javascript Part 3 : Mengenal Variabel Pada Javascript


https://www.malasngoding.com/belajar-javascript-part-3-mengenal-variabel-pada-javascript/

Mengenal Variabel Pada Javascript – Tidak hanya pada PHP, di Javascript pun
memiliki variabel. Kegunaan variabel di javascript juga sama seperti kegunaan
variabel pada bahasa pemrograman lainnya, yaitu untuk penyimpanan data
sementara. Bagi teman-teman yang masih belum memahami tentang pengertian
variabel, silahkan teman-teman baca tutorial saya sebelumnya di
www.malasngoding.com tentang pengertian variabel. baca : Belajar PHP Mengenal
Variabel Pada PHP.

Cara Penulisan Variabel Di JavaScript


Yang harus di perhatikan di dalam membuat variabel di javascript adalah, semua
penulisan variabel pada javascript tidak boleh mengandung spasi, harus
memperhatikan penulisan huruf besar kecil. Lebih lengkapnya perhatikan poin-poin
cara penulisan variabel pada javascript yang benar.

Cara penulisan variabel di javascript:


 Penulisan nama variabel bisa menggunakan huruf, angka, tanda underscore dan tanda
dollar.
 Penulisan nama variabel harus diawali dengan huruf.
 Penulisan nama variabel javascript harus memperhatikan huruf besar kecil (case sensitive).
 Nama variabel tidak boleh mengandung spasi.
 penulisan variabel javascript diawali dengan syntax “var“.

Cara Membuat Variabel di JavaScript


baiklah teman-teman langsung saja kita buat contoh cara membuat variabel
dengan javascript. silahkan teman-teman siapkan sebuah file html dengan nama
belajar.html.

belajar.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 3 : Mengenal Variabel Pada Javascript</title>
5
6 </head>
7 <body>
8 <h1>Belajar Javascript Part 3 : Mengenal Variabel Pada Javascript</h1>
9 <h2>www.malasngoding.com</h2>
10
11 <div id="nama"></div>
12 <div id="alamat"></div>
13
14 <script>
15 var nama = "Malas Ngoding";
16 var alamat = "Jakarta";
17 document.getElementById("nama").innerHTML = nama;
18 document.getElementById("alamat").innerHTML = alamat;
19 </script>
20 </body>
21 </html>

seperti yang teman-teman perhatikan pada syntax di atas. saya membuat dua
buah variabel javascript. dengan nama “nama” dan “alamat”. oh ya teman-teman
jangan lupa untuk memberikan tanda titik koma atau semicolon(;) di akhir baris nya.
karena ini ketetapan cara penulisan javascript.

1 var nama = "Malas Ngoding";


2 var alamat = "Jakarta";

dan kemudian saya menampilkan isi dari variabel ini ke dalam element nama dan
alamat.

1 document.getElementById("nama").innerHTML = nama;
2 document.getElementById("alamat").innerHTML = alamat;
belajar javascript mengenal variabel pada javascript
note :

document.getElementById() berguna untuk menentukan element yang ber id


sesuai dengan yang di dalam parameter fungsi ini. innerHTML berguna untuk
menerapkan syntax html.

oke teman-teman sekian dulu tutorial Belajar Javascript Part 3 : Mengenal


Variabel Pada Javascript. yang membahas tentang pengenalan variabel pada
javascript. sampai jumpa di tutorial selanjutnya di malasngoding.com.

Belajar Javascript Part 4 : Operator Aritmatika Pada Javascript


https://www.malasngoding.com/belajar-javascript-part-4-operator-aritmatika-pada-javascript/

Operator Aritmatika Pada Javascript – Operasi aritmatika/matematika sangat


lah di perlukan pada saat kita membuat aplikasi yang kira-kira memerlukan logika
yang mengharuskan kita untuk membuat perhitungan. Baik itu perhitungan dalam
jumlah kecil maupun perhitungan dalam jumlah yang sangat besar. oleh sebab itu.
untuk menyambung tutorial javascript dasar di www.malasngoding.com ini kita
akan membahas tentang Belajar Javascript Part 4 : Operator Aritmatika Pada
Javascript.

Sebelum lebih jauh belajar membuat operasi perhitungan aritmatika di


javascript, kita akan membahas terlebih dulu tentang operator-operator yang
tersedia di javascript. yang bisa kita gunakan untuk membuat operasi
perhitungan matematika dengan javascript.

beikut adalah operator yang dapat kita gunakan di javascript untuk membuat
perhitungan aritmatika.

+ Penjumlahan

– Pengurangan

* Perkalian

/ Pembagian

% Modulus*)

++ Increment

— Decrement
Note:
*)
It's the remainder operator and is used to get the remainder after integer division. Lots of languages
have it. For example:
10 % 3 // = 1 ; because 3 * 3 gets you 9, and 10 - 9 is 1.
The remainder operator returns the remainder left over when one operand is divided by a second
operand. It always takes the sign of the dividend.
12 % 5 // =2
-1 % 2 // =-1
1 % -2 //= 1
NaN % 2 // =NaN
1 % 2 // =1
2 % 3 // =2
-4 % 2 // =-0
5.5 % 2 // =1.5
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Examples

Arithmetic operators take numerical values (either literals or variables) as their operands
and return a single numerical value. The standard arithmetic operators are addition (+),
subtraction (-), multiplication (*), and division (/).
Addition (+)Section
The addition operator produces the sum of numeric operands or string concatenation.

SyntaxSection

Operator: x + y

ExamplesSection

// Number + Number -> addition


1 + 2 // 3

// Boolean + Number -> addition


true + 1 // 2

// Boolean + Boolean -> addition


false + false // 0

// Number + String -> concatenation


5 + 'foo' // "5foo"

// String + Boolean -> concatenation


'foo' + false // "foofalse"

// String + String -> concatenation


'foo' + 'bar' // "foobar"

Subtraction (-)Section
The subtraction operator subtracts the two operands, producing their difference.

SyntaxSection

Operator: x - y

ExamplesSection

5 - 3 // 2
3 - 5 // -2
'foo' - 3 // NaN
Division (/)Section
The division operator produces the quotient of its operands where the left operand is the
dividend and the right operand is the divisor.

SyntaxSection

Operator: x / y

ExamplesSection

1 / 2 // returns 0.5 in JavaScript


1 / 2 // returns 0 in Java
// (neither number is explicitly a floating point number)

1.0 / 2.0 // returns 0.5 in both JavaScript and Java

2.0 / 0 // returns Infinity in JavaScript


2.0 / 0.0 // returns Infinity too
2.0 / -0.0 // returns -Infinity in JavaScript

Multiplication (*)Section
The multiplication operator produces the product of the operands.

SyntaxSection

Operator: x * y

ExamplesSection

2 * 2 // 4
-2 * 2 // -4
Infinity * 0 // NaN
Infinity * Infinity // Infinity
'foo' * 2 // NaN

Remainder (%)Section
The remainder operator returns the remainder left over when one operand is divided by a
second operand. It always takes the sign of the dividend.

SyntaxSection

Operator: var1 % var2

ExamplesSection

12 % 5 // 2
-1 % 2 // -1
1 % -2 // 1
NaN % 2 // NaN
1 % 2 // 1
2 % 3 // 2
-4 % 2 // -0
5.5 % 2 // 1.5

Exponentiation (**)Section
The exponentiation operator returns the result of raising first operand to the power second
operand. that is, var1var2, in the preceding statement, where var1 and var2 are variables.
Exponentiation operator is right associative. a ** b ** c is equal to a ** (b ** c).
SyntaxSection

Operator: var1 ** var2

NotesSection
In most languages like PHP and Python and others that have an exponentiation operator
(**), the exponentiation operator is defined to have a higher precedence than unary
operators such as unary + and unary -, but there are a few exceptions. For example, in
Bash the ** operator is defined to have a lower precedence than unary operators. In
JavaScript, it is impossible to write an ambiguous exponentiation expression, i.e. you
cannot put a unary operator (+/-/~/!/delete/void/typeof) immediately before the base
number.

-2 ** 2;
// 4 in Bash, -4 in other languages.
// This is invalid in JavaScript, as the operation is ambiguous.

-(2 ** 2);
// -4 in JavaScript and the author's intention is unambiguous.

ExamplesSection

2 ** 3 // 8
3 ** 2 // 9
3 ** 2.5 // 15.588457268119896
10 ** -1 // 0.1
NaN ** 2 // NaN

2 ** 3 ** 2 // 512
2 ** (3 ** 2) // 512
(2 ** 3) ** 2 // 64

To invert the sign of the result of an exponentiation expression:

-(2 ** 2) // -4

To force the base of an exponentiation expression to be a negative number:


(-2) ** 2 // 4

Note: JavaScript also has a bitwise operator ^ (logical XOR). ** and ^ are different (for
example : 2 ** 3 === 8 when 2 ^ 3 === 1.)
Increment (++)Section
The increment operator increments (adds one to) its operand and returns a value.

 If used postfix, with operator after operand (for example, x++), then it returns the value before
incrementing.
 If used prefix with operator before operand (for example, ++x), then it returns the value after
incrementing.
SyntaxSection

Operator: x++ or ++x

ExamplesSection

// Postfix
var x = 3;
y = x++; // y = 3, x = 4

// Prefix
var a = 2;
b = ++a; // a = 3, b = 3

Decrement (--)Section
The decrement operator decrements (subtracts one from) its operand and returns a value.

 If used postfix (for example, x--), then it returns the value before decrementing.
 If used prefix (for example, --x), then it returns the value after decrementing.
SyntaxSection

Operator: x-- or --x

ExamplesSection

// Postfix
var x = 3;
y = x--; // y = 3, x = 2

// Prefix
var a = 2;
b = --a; // a = 1, b = 1

Unary negation (-)Section


The unary negation operator precedes its operand and negates it.
SyntaxSection

Operator: -x

ExamplesSection

var x = 3;
y = -x; // y = -3, x = 3

// Unary negation operator can convert non-numbers into a number


var x = "4";
y = -x; // y = -4

Unary plus (+)Section


The unary plus operator precedes its operand and evaluates to its operand but attempts
to convert it into a number, if it isn't already. Although unary negation (-) also can convert
non-numbers, unary plus is the fastest and preferred way of converting something into a
number, because it does not perform any other operations on the number. It can convert
string representations of integers and floats, as well as the non-string values true, false,
and null. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported.
Negative numbers are supported (though not for hex). If it cannot parse a particular value,
it will evaluate to NaN.
SyntaxSection

Operator: +x

ExamplesSection

+3 // 3
+'3' // 3
+true // 1
+false // 0
+null // 0
+function(val){ return val } // NaN

Bagaimana Cara Membuat Perhitungan Aritmatika di Javascript ?


Caranya sangat mudah, perhatikan contoh berikut.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 4 : Operator Aritmatika Pada Javascript</title>
5 </head>
6 <body>
7 <h1>Belajar Javascript Part 4 <br/> Operator Aritmatika Pada Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10 <div id="penjumlahan"></div>
11
12 <script>
13 var bilangan1 = 6;
14 var bilangan2 = 2;
15
16 var penjumlahan = bilangan1 + bilangan2;
17
18 document.getElementById("penjumlahan").innerHTML = penjumlahan;
19
20 </script>
21 </body>
</html>

pada contoh di atas kita membuat contoh penjumlahan dengan mengisi nilai pada
variabel di atas. Terdapat dua buah variabel, yaitu variabel bilangan1 dan
bilangan2. Variabel bilangan1 berisi nilai 6 dan variabel bilagan2 berisi nilai 2.
Kemudian untuk menjumlahkannya kita tinggal menambahkan operator
bilangannya seperti contoh di atas.
1 var penjumlahan = bilangan1 + bilangan2;

sampai di sini variabel penjumlahan sudah berisi hasil dari bilangan1 ditambah
bilangan2. 6+2.
kemudian hasilnya kita tampilkan pada element yang ber id penjumlahan.(tag div).
dan hasilnya.

belajar javascript operator aritmatika pada javascript


dan muncul hasilnya 8.

contoh lainnya.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 4 : Operator Aritmatika Pada Javascript</title>
5 </head>
6 <body>
7 <h1>Belajar Javascript Part 4 <br/> Operator Aritmatika Pada Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10 <div id="penjumlahan"></div>
11 <div id="pengurangan"></div>
12 <div id="perkalian"></div>
13 <div id="pembagian"></div>
14 <div id="modulus"></div>
15
16
17 <script>
18 var bilangan1 = 6;
19 var bilangan2 = 2;
20
21 var penjumlahan = bilangan1 + bilangan2;
22 var pengurangan = bilangan1 - bilangan2;
23 var perkalian = bilangan1 * bilangan2;
24 var pembagian = bilangan1 / bilangan2;
25 var modulus = bilangan1 % bilangan2;
26
27 document.getElementById("penjumlahan").innerHTML = penjumlahan;
28 document.getElementById("pengurangan").innerHTML = pengurangan;
29 document.getElementById("perkalian").innerHTML = perkalian;
30 document.getElementById("pembagian").innerHTML = pembagian;
31 document.getElementById("modulus").innerHTML = modulus;
32
33 </script>
34 </body>
35 </html>

dan hasilnya

membuat perhitungan aritmatika dengan javascript

Belajar Javascript Part 5 : Menganal Tipe Data Pada Javascript


Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript – Jumpa lagi di
tutorial dasar javascript berbahasa indonesia. di tutorial ini kita masih membahas
tentang tutorial dasar javascript. sesuai dengan judul tutorial ini “Mengenal Tipe
Data Pada Javascript“. jadi kita akan membahas tentang apa saja tipe data yang
ada di javascript. bagaimana menggunakannya dan sebagainya yang berhubungan
dengan tipe data javascript. seperti di tutorial-tutorial lainnya di malasngoding.com,
kita akan belajar memahami kasus dengan membuat contoh-contoh sederhana
untuk mempermudah dalam hal pembelajarannya.

Mengenal Tipe Data Pada Javascript


Kita mulai dengan mengenal tipe data pada javascript. di javascript terdapat 5
buah tipe data yang masing-masing memiliki kegunaan dan fungsinya masing-
masing. di antaranya adalah :
 Number
 String
 Boolean
 Array
 Object
Dan adapun beberapa kegunaan dan penggunaan dari masing-masing tipe
data javascript adalah sebagai berikut.

Tipe Data Number Di Javascript


Tipe data number atau integer adalah tipe data yang berbentuk bilangan bulat.
contohnya adalah 0,1,2,3,4,5,6,7,8,9,10 ….. dan seterusnya. cara menggunakan
tipe data number adalah sebagai berikut.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript</title>
5 </head>
6 <body>
7 <h1>Tipe Data Number Pada Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10 <!-- id hasil -->
11 <div id="hasil"></div>
12
13 <script>
14 // tipe data Number
15 var angka = 80;
16
17 // menampilkan tipe data number pada element id hasil
18 document.getElementById("hasil").innerHTML = angka;
19 </script>
20 </body>
21 </html>

seperti yang dapat teman-teman lihat pada contoh di atas. penulisan tipe data
number tidak menggunakan tanda petik seperti string.

1 var angka = 80;

dan jika dijalankan pada browser maka hasilnya.


tipe data number pada javascript

Tipe Data String Di Javascript


Di dalam pemrograman, tipe data string memiliki peran penting di dalamnya. Tanpa
tipe data string kita juga tidak bisa mendefinisikan suatu variabel dan lainnya. Tipe
data string biasanya berbentuk kata atau kalimat. Contoh tipe data string di
javascript sebagai berikut.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript</title>
5 </head>
6 <body>
7 <h1>Tipe Data String Pada Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10 <!-- id hasil -->
11 <div id="hasil"></div>
12
13 <script>
14 // tipe data string
15 var kalimat = "Belajar javascript dasar di malasngoding.com";
16
17 // menampilkan tipe data string pada element id hasil
18 document.getElementById("hasil").innerHTML = kalimat;
19 </script>
20 </body>
21 </html>
dapat di lihat pada contoh tipe data string di atas. terdapat sebuah variabel
dengan tipe data string. dan kemudian kita tampilkan. Belajar Javascript Part 5 :
Mengenal Tipe Data Pada Javascript

1 var kalimat = "Belajar javascript dasar di malasngoding.com";


belajar javascript mengenal tipe data pada javascript

Tipe Data Array di Javascript


Tipe data array adalah tipe data yang mampu menyimpan banyak data di dalam
satu buah variabel dan data-data yang terdapat di dalam variabel tersebut di
berikan nomor masing-masing sesuai urutannya, untuk memudahkan kita dalam
menampilkan atau memanggil data yang diinginkan. Perhatikan contoh tipe data
array di javascript berikut.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript</title>
5 </head>
6 <body>
7 <h1>Tipe Data Array Pada Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10 <!-- id hasil -->
11 <div id="hasil"></div>
12
13 <script>
14 // tipe data Array
15 var hewan = ["Kambing", "Bebek", "Ayam"];
16
17 // menampilkan tipe data Array pada element id hasil
18 document.getElementById("hasil").innerHTML = hewan[1];
19 </script>
20 </body>
21 </html>

perhatikan pada contoh tipe data array di atas. terdapat tipe data array di dalam
variabel hewan.

1 var hewan = ["Kambing", "Bebek", "Ayam"];

di dalam variabel array hewan ini terdapat data kambing, bebek dan ayam. berarti
angka penyebut untuk kambing adalah 0. bebek 1 dan ayam 2. angka nya di mulai
dari 0. dan untuk mengakses/menampilkan salah satu angkanya adalah sebagai
berikut.
1 hewan[1]

ini berarti kita memilih data array di dalam variabel hewan dengan nomor urut 1.
dan akan di tampilkan hewan bebek.

 kambing = 0
 bebek = 1
 ayam = 2

tipe data array pada javascript

Tipe Data Object Pada Javascript


tipe data object berisi data yang banyak di dalam sebuah variabel. memiliki nama
dan valuenya masing-masing. contohnya perhatikan:

<!DOCTYPE html>
1
<html>
2
<head>
3
<title>Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript</title>
4
</head>
5
<body>
6
<h1>Tipe Data Object Pada Javascript</h1>
7
<h2>www.malasngoding.com</h2>
8
9
<!-- id hasil -->
10
<div id="hasil"></div>
11
12
<script>
13
// tipe data object
14
var manusia = {
15
nama : "malas ngoding",
16
alamat : "Jakarta",
17
umur : 30,
18
pekerjaan : "facebooker"
19
};
20
21
// menampilkan tipe data object pada element id hasil
22
document.getElementById("hasil").innerHTML = manusia.nama + " tinggal di " + manusia.alamat +
23
" .dia sekarang berumur"+ manusia.umur +" dan bekerja sebagai " + manusia.pekerjaan;
24
</script>
25
</body>
26
</html>

di sini terdapat tipe data object.


1 var manusia = {
2 nama : "malas ngoding",
3 alamat : "Jakarta",
4 umur : 30,
5 pekerjaan : "facebooker"
6 };

nama, alamat, umur, pekerjaan adalah nama. dan valuenya adalah malasngoding,
jakarta, 30 dan facebooker. untuk mengakses datanya, pertama tuliskan nama
variabel, dan kemudian diikuti dengan nama data. misalnya jika kita ingin
menampilkan data alamat. penulisannya adalah manusia.alamat, maka akan di
tampilkan jakarta.

belajar javascript mengenal tipe data pada javascript

oke teman-teman, cukup sekian dulu tutorial Belajar Javascript Part 5 : Mengenal
Tipe Data Pada Javascript. semoga dapat bermanfaat.

Belajar Javascript Part 6 : Membuat Function di Javascript


Belajar Javascript Part 6 : Membuat Function di Javascript – Di tutorial belajar
javascript dasar part 6 ini kita akan melanjutkan pembahasan kita tentang javascript
dasar. yang sebelumnya kita telah membahas tentang tutorial dasar javascript
lainnya dari part 1 sampai part 5. di tutorial belajar javascript dasar part 6 di
malasngoding.com ini kita akan belajar membuat function di javascript.

Apa itu function? mungkin sebagian teman-teman ada yang masih belum
mengetahui pengertian dari function, maka akan saya ulas sedikit tentang
pengertian function. Function adalah fasilitas di setiap pemrograman untuk
membuat suatu perintah yang fungsinya dapat kita gunakan berulang kali tanpa
batas. selama halaman masih terhubung dengan function yang di maksud. Untuk
lebih jelasnya teman-teman bisa membacanya di tutorial php part 8 : mengenal
function pada php.
Membuat Function Di Javascript
Untuk membuat function di javascript ada beberapa hal yang harus teman-teman
pahami dulu. yaitu tentang penulisan function di javascript. Berikut ini adalah contoh
format penulisan function javascript.

1 <script>
2
3 /membuat function di javascript
4 function nama_function(){
5 // isi function nya di buat di sini
6 }
7
8 </script>

seperti yang teman-teman lihat pada contoh di atas. untuk membuat function,
penulisannya harus diawali oleh syntax “function” dan kemudian di lanjutkan
dengan nama function yang mau di buat dan isi dari function dituliskan di dalam
tanda kurung kurawal pembuka “{” dan tanda kurung kurawal penutup “}”.

langsung saja kita masuk ke tutorial membuat function dengan javascript. Silahkan
teman-teman perhatikan contoh berikut ini untuk membuat function di javascript.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 6 : Membuat Function di Javascript</title>
5 </head>
6 <body>
7 <h1>Membuat Function di Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10 <!-- id hasil -->
11 <div id="hasil"></div>
12
13 <script>
14 // membuat function tampilkan_nama
15 function tampilkan_nama(){
16 return "Malas Ngoding";
17 }
18
19 document.getElementById("hasil").innerHTML = tampilkan_nama();
20
21 </script>
22 </body>
23 </html>

di contoh di atas perhatikan

1 // membuat function tampilkan_nama


2 function tampilkan_nama(){
3 return "Malas Ngoding";
4 }

kita membuat function dengan nama tampilkan_nama(). yang berisi perintah untuk
mengembalikan string “malas ngoding”. jadi saat function tampilkan_nama()
dipanggil, hasilnya adalah “malas ngoding”.
membuat function di javascript

Oke teman-teman sekian dulu tutorial Belajar Javascript Part 6 : Membuat


Function di Javascript. semoga dapat bermanfaat.

Belajar Javascript Part 7 : Mengenal Event Pada Javascript


Belajar Javascript Part 7 : Mengenal Event Pada Javascript – Halo teman-
teman sekalian, jumpa lagi di tutorial javascript dasar di malasngoding.com. Kali ini
sesuai dengan judulnya, kita akan membahas tentang event pada javascript.
teman-teman sudah tahu belum pengertian dari event? Kalau sudah tahu
alhamdulillah, tapi mungkin ada teman-teman yang belum tahu. Jadi lebih baik saya
jelaskan kembali pengertian event pada javascript. Silahkan teman-teman simak
tentang pengertian event pada javascript berikut ini.

Pengertian Event Pada Javascript


Event pada javascript adalah sesuatu yang terjadi pada element. Pasti teman-
teman pada bingung kan dengan pengertian event pada javascript. Jadi gini,
misalnya kita memiliki sebuah tombol di halaman website atau aplikasi yang kita
bangun, dan kita ingin memberikan suatu aksi jika tombol tersebut diklik. Jadi yang
menjadi event di sini adalah “klik”. Misalnya jika tombol diklik maka akan
ditampilkan pesan yang menampilkan sebuah kalimat. Jadi eventnya adalah klik.
Adapun beberapa event yang terdapat pada javascript adalah sebagai berikut.

Macam-macam event pada javascript

 onclick = adalah event jika sebuah element html di klik.


 onchange = adalah event jika sebuah element html berubah.
 onmouseover = adalah event jika sebuah element html di letakkan cursor mouse.
 onmouseout = adalah event jika saat cursor mouse meninggalkan element html.
 onkeydown = adalah event jika saat di terjadi pengetikan pada elemnet html.
 onload = adalah event ketika jika saat element atau halaman di buka.

Baiklah akan kita bahas beberapa event javascript yang sudah dijelaskan di atas.
Cara Membuat Event Javascript
Untuk membuat event dengan javascript, kita bisa menambahkan atribut dengan
nama-nama event di atas, pada element html yang ingin kita berikan event.
contohnya.

1 <button onclick="di sini berikan aksi yang ingin di lakukan">TOMBOL</button>

Contoh event pada Javascript


untuk contohnya saya akan membuat event klik pada sebuah tombol. Jadi saya
ingin menampilkan sebuah kalimat jika tombol tersebut di klik.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 7 : Mengenal Event Pada Javascript</title>
5 </head>
6 <body>
7 <h1>Mengenal Event Pada Javascript</h1>
8 <h2>www.mrtulusn.blogspot.com</h2>
9
10 <!-- memberikan event pada element tombol -->
11 <button onclick="tampilkan_nama()">KLIK SAYA</button>
12
13 <!-- id hasil -->
14 <div id="hasil"></div>
15
16 <script>
17 // membuat function tampilkan_nama
18 function tampilkan_nama(){
19 document.getElementById("hasil").innerHTML = "<h3>Nama Saya Adalah Ranti</h3>";
20 }
21
22 </script>
23 </body>
24 </html>

coba teman-teman perhatikan pada contoh di atas, terdapat sebuah tombol yang
kita berikan event klik.

1 <button onclick="tampilkan_nama()">KLIK SAYA</button>

pada saat tombol ini di klik maka akan di jalankan function tampilkan_nama(). Nah
lalu kita buat function tampilkan_nama nya.

1 function tampilkan_nama(){
2 document.getElementById("hasil").innerHTML = "<h3>Nama Saya Adalah Andi</h3>";
3 }

isi dari function tampilkan_nama() ini adalah menampilkan kalimat “nama saya
adalah andi” pada element id hasil.

perhatikan pada gambar berikut ini.


mengenal event pada javascript
pada saat tombol di klik,

cara membuat event pada javascript


nah, muncul “nama saya adalah andi”.

Sekian dulu tutorial Belajar Javascript Part 7 : Mengenal Event Pada


Javascript di www.malasngoding.com semoga bermanfaat.

Belajar Javascript Part 8 : String Pada Javascript


Belajar String Pada Javascript – Kali ini kita akan melanjutkan kembali tutorial
tentang pembahasan javascript yang sempat terputus, karena ada beberapa
kesibukan yang harus di selesaikan.

Sesuai dengan judul dari tutorial ini, yaitu Belajar Javascript Part 8 : String Pada
Javascript. kita akan belajar tentang pengenalan string pada Javascript.

Artinya kita akan belajar mengenal tipe data string pada javascript. meskipun
sebelumnya kita telah membahasnya di tutorial tipe data string
javasript di malasngoding.com. maka tidak ada salahnya kita angkat lagi judul ini,
untuk sedikit lebih memperluas ruang lingkup pelajaran kita tentang
string javascript.

Yuk langsung di simpak penjelasan tentang string pada javascript berikut ini.

Belajar String Pada Javascript


Seperti yang sudah kita ketahui string adalah tipe data yang tersusun dari huruf
atau kata.

Untuk mengenal tipe data string pada javascript lebih jauh lagi, kita akan mulai
dengan melihat bentuk penulisan tipe data string javascript dan cara membuatnya.

Berikut adalah cara penulisan string ada javascript

1 var warna = "hitam";


2 var warna = 'hitam';

seperti contoh penulisan string javascript di atas, terdapat 2 contoh variabel yang
menyimpan data bertipe data string. Untuk penulisan tipe data string, kita bisa
menggunakan petik dua (“) atau petik satu (‘).

Saya kira di sini teman-teman sudah paham jika sudah pernah membaca tutorial
tipe data di php atau tutorial tipe data javascript yang sudah kita bahas dan pelajari
sebelumnya.

Penggunaan tanda petik di dalam string


Lalu bagaimana jika kita ingin menggunakan tanda petik di dalam tipe data
string ?

Caranya adalah dengan membalik tanda petik. Jika string dibungkus oleh petik dua,
maka petik yang digunakan di dalam string adalah petik satu. Begitu juga
sebaliknya, jika string dibungkus oleh petik satu, maka petik yang harus digunakan
dalam string adalah petik dua. contohnya :

1 var kata = "hari ini adalah hari jum'at";


2 var kata = "nama saya 'diki'";
3 var kata = 'nama saya "diki"';

cara penulisannya dan perbedaannya bisa teman-teman lihat pada contoh di atas.

yuk kita lihat hasilnya jika dijalankan pada browser.

1 <h2>www.malasngoding.com</h2>
2
3 <div id="tampil"></div>
4
5 <script>
6 var kata = 'nama saya "diki"';
7 document.getElementById("tampil").innerHTML=kata;
8 </script>
Oke sekian dulu tutorial belajar string pada javascript ini. yuk kita lanjutkan lagi
ke tutorial javascript selanjutnya.

Belajar Javascript Part 9 : Menampilkan Tanggal Dengan Javascript


Belajar Javascript Menampilkan Tanggal Dengan Javascript – Selain di PHP,
dengan javascript kita juga bisa menampilkan tanggal. kita dapat menampilkan
tanggal dengan berbagai format. Bisa itu menampilkan hari, menit, detik, bulan,
tahun dan lainnya. Sebelumnya di tutorial PHP kita telah membahas tentang cara
menampilkan tanggal dengan PHP maka di tutorial kali ini di tutorial Javscritp ppart
9 kita akan belajar menampilkan tanggal dengan javascript.

Jika teman-teman belum membaca tutorial menampikan tanggal dengan php,


silahkan teman-teman baca tutorial sebelumnya di www.malasngoding.com
tentang cara menampilkan tanggal dengan php. Oke langsung saja kita masuk ke
pembahasan tutorial ini. Silahkan teman-teman baca penjelasan tentang cara
menampilkan format tanggal dengan javascript berikut.

Menampilkan Tanggal Dengan Javascript


Ada sebuah fungsi yang khusus disediakan di javascript untuk menampilkan
tanggal. yaitu kita bisa menggunakan fungsi Date(). Dengan menggunakan
fungsi Date() ini kita bisa menampilkan tanggal di php dan untuk mengatur format
tanggal yang ditampilkan, teman-teman bisa menyesuaikannya dengan
memberikan/mengisi format tanggalnya sesuai dengan keinginan di dalam
parameter fungsi Date().

Perlu teman-teman perhatikan. seperti yang sudah kita bahas pada tutorial javasript
dasar sebelumnya, bahwa javascript memiliki sifat case sensitive, yang artinya
penulisan javascript sangat berpengaruh sekali tentang besar kecil hurufnya. Jadi
untuk membuat tanggal, teman-teman harus menuliskan fungsi datenya dengan
benar, maksudnya huruf Dnya besar.

contoh salah

date()

contoh benar

Date()

Jadi jika teman-teman misalnya menuliskan fungsi Date() dengan menggunakan


huruf kecil semua, maka hasilnya tidak akan muncul. Jadi harus diawali dengan
huruf kapital diawalnya, sesuai dengan ketentuan penulisan fungsi date.
Contoh Menampilkan Tanggal dengan Javascript
Pada sub judul ini kita akan membahas tentang cara menggunakan fungsi Date()
pada javascript.

silahkan langsung teman-teman perhatikan lagi.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 9 : Menampilkan Tanggal Dengan Javascript</title>
5 </head>
6 <body>
7 <h1>Menampilkan Tanggal Dengan Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10 <!-- id hasil -->
11 <div id="hasil"></div>
12
13 <script>
14 var tanggal = new Date();
15
16 document.getElementById("hasil").innerHTML = tanggal;
17 </script>
18 </body>
19 </html>

pada contoh ini, saya memasukkan fungsi date ke dalam variabel tanggal dan
kemudian menampilkannya.

1 var tanggal = new Date();


2
3 document.getElementById("hasil").innerHTML = tanggal;

dan hasilnya.

belajar javascript menampilkan tanggal dengan javascript

Oke teman-teman sekian dulu tutorial Belajar Javascript Part 9 : Menampilkan


Tanggal Dengan Javascript. semoga dapat bermanfaat.
Belajar Javascript Part 10 : Switch Case Di Javascript
Belajar Javascript Part 10 : Switch Case Di Javascript – Switch Case adalah
fungsi yang berguna untuk membuat pengecekan sebuah nilai. Dan nilai yang
tersedia untuk pengecekan bisa banyak atau lebih dari satu. Pada tutorial
sebelumnya kita telah membahas tentang cara menggunakan switch case pada
php dan di tutorial ini kita akan membahas tentang penggunaan switch case pada
javascript. Silahkan teman-teman perhatikan contoh penggunaan switch case pada
javascript berikut.

Switch Case Pada Javascript


Pada contoh penggunaan switch case pada javascript di tutorial ini, kita akan
membuat pengecekan sebuah variabel warna yang berisi merah dan kemudian kita
cek isi variabel warna ini.

switch.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 10 : Switch Case Di Javascript</title>
5 </head>
6 <body>
7 <h1>Switch Case Di Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10 <!-- id hasil -->
11 <div id="hasil"></div>
12
13 <script>
14
15 var warna = "merah";
16
17 switch (warna){
18 case "hitam":
19 teks = "warna hitam";
20 break;
21 case "merah":
22 teks = "Warna merah";
23 break;
24 case "hijau":
25 teks = "Warna hijau";
26 break;
27 default:
28 teks = "Warna tidak terdeteksi";
29 }
30
31 document.getElementById("hasil").innerHTML = teks;
32 </script>
33 </body>
34 </html>

perhatikan pada contoh di atas. kita memiliki sebuah variabel bernama warna. dan
berisi string “merah”.
1 var warna = "merah";

kemudian kita mengecek isi variabel warna ini.

1 switch (warna){
2 case "hitam":
3 teks = "warna hitam";
4 break;
5 case "merah":
6 teks = "Warna merah";
7 break;
8 case "hijau":
9 teks = "Warna hijau";
10 break;
11 default:
12 teks = "Warna tidak terdeteksi";
13 }

jika warna menemukan data casenya yang sesuai dengan isi dari variabel warna
maka proses pengecekan akan dihentikan. Di sini data ditemukan pada
pengecekan kedua yaitu merah. kemudian kita menyimpan string ke dalam variabel
teks. Sampai di sini kita telah memiliki isi di dalam variabel teks. Dan terakhir kita
tampilkan.

1 document.getElementById("hasil").innerHTML = teks;

dan hasilnya.

belajar javascript switch case pada javascript

Sedikit tambahan, pada bagian default adalah bagian dimana jika pengecekan tidak
ditemukan maka default yang akan digunakan. Misalnya jika pengecekan warna
tidak ada yg sesuai maka default yang dijalankan.

sekian dulu tutorial Belajar Javascript Part 10 : Switch Case Di Javascript.


semoga dapat bermanfaat.
Belajar Javascript Part 11 : Perulangan For Pada Javascript
Belajar Javascript Part 11 : Perulangan For Pada Javascript – Perulangan di
dalam pemrograman sangatlah berguna. Misalnya jika kita ingin menampilkan
string secara berulang-ulang. Jika kita ingin menampilkan sebuah kalimat sebanyak
100 kali tidak mungkin kita menulis sebanyak 100 kali. Jadi solusi di dalam
pemrogrmannya adalah menggunakan for loop atau perulangan for. Tidak hanya
string, kita juga bisa menjalankan sebuah method secara berulang-ulang.

fungsi for pada semua bahasa pemrograman berfungsi untuk membuat


perulangan. Dengan membuat perulangan kita bisa membuat semuanya secara
berulangang-ulang. Baik itu menampilkan string secara berulangang-ulang, angka
dan fungsi method secara berulang-ulang. Untuk lebih jelasnya silahkan teman-
teman baca tutorial saya sebelumnya tentang perulangan for pada php.

Membuat Perulangan Dengan for pada javascript


Pada tutorial ini kita akan belajar membuat perulangan angka dan perulangan string
pada javascript. Silahkan teman-teman perhatikan contoh berikut ini.

for.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 11 : Perulangan For Pada Javascript</title>
5 </head>
6 <body>
7 <h1>Perulangan For Pada Javascript</h1>
8 <h2>www.malasngoding.com</h2>
9
10
11 <button onclick="perulangan()">TOMBOL</button>
12
13 <!-- id hasil -->
14 <div id="hasil"></div>
15
16 <script>
17 function perulangan() {
18 var text = "";
19 var x;
20 for (x = 0; x <= 10; x++) {
21 text += "Angka " + x + "<br>";
22 }
23 document.getElementById("hasil").innerHTML = text;
24 }
25 </script>
26 </body>
27 </html>

di sini kita membuat sebuah tombol yang jika di klik maka akan menjalankan
function perulangan(). Baca tutorial sebelumnya di malasngoding.com
tentang pengenalan event pada javascript.
perulangan for pada javascript sama cara penulisannya dengan membuat
perulangan for pada php. di sini kita membuat perulangan for dengan x sama
dengan 0, x lebih kecil sama dengan 10. jadi yang di tampilkan adalah angka 0
sampai 10.

1 var text = "";


2 var x;
3 for (x = 0; x <= 10; x++) {
4 text += "Angka " + x + "<br>";
5 }
6 document.getElementById("hasil").innerHTML = text;

perulangan for pada javascript

Nah akan muncul perulangan angka 0 sampai dengan angka 10.

oke sekian dulu teman-teman tutorial javascript part 11 ini. di Belajar Javascript
Part 11 : Perulangan For Pada Javascript ini kita telah membahas tentang cara
membuat for loop pada javascript.
Belajar Javascript Part 12 : Manipulasi String Pada Javascript
Manipulasi String Pada Javascript – Selamat datang kembali di
tutorial javascript dasar bagian 12 di www.malasngoding.com. Pada artikel kali ini
kita akan belajar tentang manipulasi string pada javascript. Pasti teman-teman
ada yang bertanya di dalam hati, manipulasi seperti apa yang di maksudkan di sini?
Maksud dari manipulasi string pada javascript ini adalah pengolahan tipe data
string yang bisa dilakukan dengan javascript.

Manipulasi String Pada Javascript


Javascript sudah menyediakan beberapa function yang dapat kita gunakan
untuk memanipulasi string. Adapun beberapa function javascript yang bisa kita
gunakan untuk memanipulasi string adalah:
indexOf(),
lastindexOf(),
search(),
slice(),
substring(),
substr(),
replace(),
toUpperCase(),
toLowerCase(),
concat(),
split() dan lainnya.

Contoh Manipulasi String Dengan Javascript


Berikut ini beberapa function javascript untuk memanipulasi string dengan
penjelasan dan kegunaannya masing-masing.

Nama Fungsi Kegunaan

length Menghitung jumlah karakter pada string

indexOf() Menemukan letak string dalam sebuah string (di urutan ke berapa)

Menemukan letak string dalam sebuah string (di urutan ke berapa). di


LastindexOf()
hitung dari akhir

search() Mencari string di dalam string


Nama Fungsi Kegunaan

slice() Menampilkan string dari karakter ke berapa sampai yang ke berapa

Menampilkan string dari karakter ke berapa sampai yang ke berapa (sama


substring()
seperti slice())

Menampilkan string dari karakter ke berapa sampai yang ke berapa (sama


substr()
seperti slice())

replace() Mengganti string

toUpperCase() Mengubah string menjadi huruf besar semua

toLowerCase() Mengubah string menjadi huruf kecil semua

concat() Menggabungkan string

split() Mengubah string menjadi array

Supaya tidak bingung, berikut saya sertakan juga contoh penggunaan dan
penulisan dari masing-masing fungsi yang sudah di sebutkan di atas.

Menghitung jumlah karakter pada string dengan length


Berikut adalah contoh cara menghitung jumlah karakter pada sebuah string dengan
menggunakan javascript.

1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4
5 <script>
6 var kalimat = "saya belajar javascript di www.malasngoding.com";
7 document.getElementById("contoh").innerHTML = kalimat.length;
8 </script>

di sini kita buat sebuah variabel ‘kalimat’ yang menyimpan sebuah string “saya
belajar javascript di www.malasngoding.com”. lalu kita hitung jumlah karakter dari
string tersebut dengan length.
1 document.getElementById("contoh").innerHTML = kalimat.length;

dan hasilnya :

Menemukan letak string yang di cari dengan indexOf() dan LastindexOf()


Untuk menemukan letak dari string yang di cari, kita bisa menggunakan fungsi yang
sudah di sediakan oleh javascript. yaitu indexOf() atau LastindexOf() jika ingin
menghitung urutannya dari akhir.
contoh :
1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4
5 <script>
6
7 var kalimat = "Selamat datang di tutorial string javascript";
8 var temukan = kalimat.indexOf("tutorial");
9 document.getElementById("contoh").innerHTML = temukan;
10
11 </script>

silahkan teman-teman tes juga dengan mengganti indexOf menjadi LastindexOf.


karena cara penulisannya sama saja.
Mencari string dengan search()

Manipulasi String Pada Javascript. Cara mencari string di dalam string kita bisa
menggunakan fungsi search(). contohnya:

1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4
5 <script>
6 var kalimat = "belajar javascript di www.malasngoding.com";
7 var cari = kalimat.search("javascript");
8 document.getElementById("contoh").innerHTML = cari;
9 </script>

Filter string dengan slice()


ada 2 parameter yang harus di isi pada fungsi slice(). yang pertama isikan dari
urutan ke berapa filter di mulai. dan parameter kedua sampai urutan ke berapa
batas filternya.
1 slice(mulai, batas akhir)

contohnya
1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4
5 <script>
6 var kalimat = "belajar javascript di www.malasngoding.com";
7 var filter = kalimat.slice(22, 42);
8 document.getElementById("contoh").innerHTML = filter;
9 </script>

dan hasilnya adalah “www.malasngoding.com”. karena kita memerintahkan untuk


menampilkan karakter ke 22 sampai 42. seperti yang dapat kita lihat pada contoh
di atas.
1 kalimat.slice(22, 42)
penggunaan substring() dan substr() juga sama. bisa teman-teman coba sendiri.

Mengganti string dengan replace()


cara pengguaan fungsi replace() pada javascript untuk mengganti string adalah
sebagai berikut.
1 replace('yang ingin di ganti','ganti nya')

jadi pada parameter pertama, kita masukkan misalnya kata yang ingin kita ganti.
dan pada parameter kedua nya kita masuk kan kata yang menjadi penggantinya.

1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4
5 <script>
6 var kalimat = "belajar javascript di www.malasngoding.com";
7 var ganti = kalimat.replace('javascript', 'pemrograman');
8 document.getElementById("contoh").innerHTML = ganti;
9 </script>

Maka yang sebelumnya isi variabel kalimat adalah “belajar javascript di


www.malasngoding.com”, maka berubah menjadi “belajar pemrograman di
www.malasngoding.com”.
karena di sini kita mengubah kata ‘javascript‘ menjadi ‘pemrograman‘ dengan
menggunakan fungsi replace di javascript.
Huruf besar kecil dengan toUpperCase() dan toLowerCase()
Jika kita ingin mengubah isi string dengan huruf besar semua atau huruf kecil
semua. kita bisa mengandalkan kedua fungsi ini. yaitu toUpperCase() untuk
mengubah string menjadi huruf besar atau huruf kapital.
dan toLowerCase() berguna untuk mengubah string menjadi huruf kecil
semua. Manipulasi String Pada Javascript

1 <h2>www.malasngoding.com</h2>
2
3 <p id="besar"></p>
4 <p id="kecil"></p>
5
6 <script>
7 var kalimat = "Belajar JAVASCRIPT di www.malasngoding.com";
8
9 // mengubah ke huruf besar
10 var a = kalimat.toUpperCase();
11
12 // mengubah ke huruf kecil
13 var b = kalimat.toLowerCase();
14
15 document.getElementById("besar").innerHTML = a;
16 document.getElementById("kecil").innerHTML = b;
17 </script>

Menggabungkan string dengan concat()


Untuk contoh kita akan mencoba menggabungkan 2 string. sebagai pengganti “+”
sebagai tanda penggabung string.

1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4
5 <script>
6 var a = "diki alfarabi";
7 var b = "hadi";
8
9 // menggabungkan string
10 var gabung = a.concat(" ",b);
11 document.getElementById("contoh").innerHTML = gabung;
12 </script>
pada contoh penggunaan concat() javascript ini, kita membuat sebuah variabel a
yang berisi “diki alfarabi”. dan variabel b berisi “hadi”. sebenarnya saat di tampilkan
bisa saja dengan cara a+” “+b. tapi degan javascript bisa lebih mudah, yaitu
menggunakan fungsi concat. yang hasilnya akan menjadi “diki alfarabi hadi”.

Convert string ke array dengan split()


di rekomendasikan kepada teman-teman yang belum mempelajari tentang array
untuk membaca tutorial www.malasgoding.com sebelumnya tentang tutorial array
javascript. agar lebih mudah memahami fungsi split ini. karena di sini kita akan
sedikit bermain dengan array pada javascript.

1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4
5 <script>
6 var huruf = "a,b,c";
7
8 // string jadi array
9 var convert = huruf.split(",");
10 document.getElementById("contoh").innerHTML = convert[0];
11 </script>

Pada contoh ini, kita membuat sebuah variabel bernama huruf. dan berisi ‘a,b,c’.
kemudian kita pecahkan string ini menjadi array dengan split(). dan menetapkan
tanda ‘,’ sebagai pemisah.

1 var convert = huruf.split(",");

nah, maka jadilah array yang tersimpan dalam variabel convert. dan menampilkan
array urutan pertama
1 document.getElementById("contoh").innerHTML = convert[0];

urutan pertama pada array (0) adalah huruf a. maka hasilnya :


Oke sekian dulu tutorial tentang manipulasi string pada javascript. semoga dapat
bermanfaat. jika ada yang kurang di mengerti, teman-teman bisa meninggalkan
komentar pada artikel ini.

Dan mari kita lanjutkan pada tutorial javascript selanjutnya. terima kasih.
Membuat Form Validasi dengan Javascript
Membuat Form Validasi dengan Javascript – Sebelumnya di
www.malasngoding.com, saya sudah membuat tutorial cara membuat form validasi
dengan PHP. dan juga sudah membuat form validasi dengan menggunakan
JQuery. tapi di tutorial ini kita akan belajar bagaimana cara paling mudah membuat
form validasi dengan javascript.

Di tutorial ini akan dijelaskan dengan sejelas-jelasnya cara membuat form


validasi dengan javascript dengan cepat dan sangat mudah.

Untuk teman-teman yang belum membaca tutorial form validasi lainnya di


www.malasngoding.com silahkan baca tutorial berikut ini.

 Form validasi dengan PHP


 Form validasi dengan JQuery

Oke yuk langsung simak apa saja yang kita butuhkan untuk membuat form validasi
dengan javascript. Silahkan teman-teman ikuti panduan dan penjelasan berikut ini
untuk membuat validasi pada form dengan mudah.

Validasi yang kita buat di tutorial ini adalah form validasi pendaftaran sederhana.
dimana nantinya teman-teman bisa mengembangkannya lagi sesuai dengan
kebutuhan aplikasi yang akan teman-teman ingin buat.

Pertama kali yang paling penting kita akan buat dulu sebuah form sederhana yaitu
form pendaftaran dimana pada form ini terdapat form input nama, email dan
alamat.

Buat sebuah file html atau php, dengan nama apa saja bebas terserah teman-
teman. Tapi pada tutorial ini saya akan membuat file html nama file daftar.html
(silahkan sesuaikan dengan keinginan).

daftar.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4
<title>Membuat Form Validasi dengan Javascript - WWW.MRTULUSN.BLOGSPOT.COM</title>
5
6 <link rel="stylesheet" type="text/css" href="style.css">
7 </head>
8 <body>
9 <center><h2>WWW. MRTULUSN.BLOGSPOT.COM</h2></center>
10 <div class="login">
11 <form action="#" method="POST" onSubmit="validasi()">
12 <div>
13 <label>Nama Lengkap:</label>
14 <input type="text" name="nama" id="nama" />
15 </div>
16 <div>
17 <label>Email:</label>
18 <input type="email" name="email" id="email" />
19 </div>
20 <div>
21 <label>Alamat:</label>
22 <textarea cols="40" rows="5" name="alamat" id="alamat"></textarea>
23 </div>
24 <div>
25 <input type="submit" value="Daftar" class="tombol">
26 </div>
27 </form>
28 </div>
29 </body>
30 <script type="text/javascript">
31 function validasi() {
32 var nama = document.getElementById("nama").value;
33 var email = document.getElementById("email").value;
34 var alamat = document.getElementById("alamat").value;
35 if (nama != "" && email!="" && alamat !="") {
36 return true;
37 }else{
38 alert('Anda harus mengisi data dengan lengkap !');
39 }
40 }
41 </script>
</html>

kemudian buat file dengan nama style.css. karena kita akan mendesign tampilan
form pendaftaran ini. agar lebih terlihat menarik.

silahkan teman-teman baca juga tutorial CSS di www.malasngoding.com.

style.css

1 body {
2 background: #3498db;
3 font-family: sans-serif;
4 }
5
6 h2 {
7 color: #fff;
8 }
9
10 .login {
11 padding: 1em;
12 margin: 2em auto;
13 width: 17em;
14 background: #fff;
15 border-radius: 3px;
16 }
17
18 label {
19 font-size: 10pt;
20 color: #555;
21 }
22
23 input[type="text"],
24 input[type="email"],
25 textarea {
26 padding: 8px;
27 width: 95%;
28 background: #efefef;
29 border: 0;
30 font-size: 10pt;
31 margin: 6px 0px;
32 }
33
34 .tombol {
35 background: #3498db;
36 color: #fff;
37 border: 0;
38 padding: 5px 8px;
39 }
sekarang coba akses daftar.html yang sudah kita buat untuk melihat hasil form
validasi pendaftaran dengan javascript.

membuat form validasi dengan javascript

dan coba klik tombol daftar tanpa mengisi form. maka akan muncul pemberitahuan
alert “Anda harus mengisi data dengan lengkap!“.
membuat validasi form pendaftaran dengan javascript
Dan pemberitahuan untuk mengisi form dengan lengkap pun berhasil di tampilkan.

Penjelasan
nah. coba teman-teman perhatikan pada form pendaftaran yang sudah kita buat.

Di sini kita memerintahkan untuk menjalankan function validasi() saat form di


submit. onSubmit=”validasi()”.

1 <form action="#" method="POST" onSubmit="validasi()">


2 <div>
3 <label>Nama Lengkap:</label>
4 <input type="text" name="nama" id="nama" />
5 </div>
6 <div>
7 <label>Email:</label>
8 <input type="email" name="email" id="email" />
9 </div>
10 <div>
11 <label>Alamat:</label>
12 <textarea cols="40" rows="5" name="alamat" id="alamat"></textarea>
13 </div>
14 <div>
15 <input type="submit" value="Daftar" class="tombol">
16 </div>
17 </form>
yang mana function validasi sudah kita buat untuk mengecek inputan.

1 function validasi() {
2 var nama = document.getElementById("nama").value;
3 var email = document.getElementById("email").value;
4 var alamat = document.getElementById("alamat").value;
5 if (nama != "" && email!="" && alamat !="") {
6 return true;
7 }else{
8 alert('Anda harus mengisi data dengan lengkap !');
9 }
10 }

kita menangkap nilai value dari form input. dan memasukkannya ke dalam variabel.

1 var nama = document.getElementById("nama").value;


2 var email = document.getElementById("email").value;
3 var alamat = document.getElementById("alamat").value;

dan kemudian mengecek masing-masing variabel.

1 if (nama != "" && email!="" && alamat !="") {


2 return true;
3 }else{
4 alert('Anda harus mengisi data dengan lengkap !');
5 }

jika nama, email dan alamat di isi. atau tidak kosong. maka akan di kembalikan nilai
TRUE pada form agar dapat di teruskan. jika tidak maka tampilkan pesan alert yang
menampilkan “Anda harus mengisi data dengan lengkap !”.

Oke sekian tutorial Membuat Form Validasi dengan Javascript. semoga dapat
bermanfaat.

Anda mungkin juga menyukai