HTML,CSS,Javascript,Bootstrap,JQuery,AJAX | s4camptech.

com | coding center

1. Pengertian JavaScript

JavaScript adalah bahasa pemrograman web yang bersifat Client

Side Programming Language. Client Side Programming Language adalah
tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client.
Aplikasi client yang dimaksud merujuk kepada web browser seperti
Google Chrome dan Mozilla Firefox.

Bahasa pemrograman Client Side berbeda dengan bahasa pemrograman

Server Side seperti PHP, dimana untuk server side seluruh kode
program dijalankan di sisi server.

Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi

text editor dan web browser. JavaScript memiliki fitur: high-level
programming language, client-side, loosely tiped dan berorientasi
objek.

2. Sejarah Penamaan JavaScript

Sejarah JavaScript dimulai sekitar tahun 1994, ketika internet

dan website sedang mengalami perkembangan yang pesat. Website pada
saat itu umumnya dibuat menggunakan bahasa pemograman PERL yang
pemrosesannya hanya bisa dilakukan di sisi web server.
 Kelemahan pemrosesan di sisi web server adalah, setiap instruksi
dari user harus dikirim terlebih dahulu kepada web server, baru
kemudian ditampilkan lagi di dalam web browser. Karena kecepatan
rata-rata koneksi internet yang terbatas, hal ini dipandang tidak
efisien. Programmer web membutuhkan bahasa pemograman client-side
yang bisa berjalan di web browser tanpa harus dikirim ke server.

Pada tahun 1995, Brendan Eich seorang programmer dari Netscape

mulai mengembangkan sebuah bahasa pemograman script yang dinamakan
Mocha. Netscape pada saat itu merupakan perusahaan software ternama
yang memiliki web broser Netscape Navigator.

Bahasa script Mocha ini ditujukan untuk client-side dan juga

server-side. Dalam perkembangan selanjutnya, nama Mocha diubah
menjadi LiveScript untuk versi client-side, dan LiveWire untuk versi
server-side.

Pada saat bahasa pemograman tersebut akan

dirilis, Netscape mengadakan kerjasama dengan
Sun Microsystems untuk mengembangkan
LiveScript, dan tepat ketika Netscape Navigator
2 dirilis, Netscape merubah nama LiveScript
menjadi JavaScript dengan tujuan bahasa baru
ini akan populer seperti bahasa Java yang saat
itu sedang booming di kalangan programmer.
Versi JavaScript ini dinamakan dengan
JavaScript 1.0.

3. Liberary Javascript

a. React

React adalah library JavaScript yang dibangun oleh para

pengembang Facebook dan Instagram. React terpilih sebagai teknologi
yang paling dicintai di kalangan pengembang, menurut Stack Overflow
Survey 2017. React juga memegang kredit karena menjadi proyek
JavaScript paling populer berdasarkan jumlah bintang GitHub.

b. jQuery

jQuery adalah sebuah library yang dibangun dengan menggunakan

JavaScript untuk mengautomasi dan menyederhanakan perintah-perintah
umum. Meskipun ada banyak library lain semacamnya, namun jQuery
jauh lebih populer karena kemampuannya untuk menjalankan perintah

Page 2
pada peramban lama. jQuery berjalan pada browser bersamaan dengan
JavaScript biasa. Ia terutama dipergunakan untuk animasi dan AJAX,
yang cukup sulit untuk diprogramkan dengan vanilla JavaScript,
namun bisa diketik dalam beberapa baris singkat dengan jQuery.

c. D3: Data-Driven Documents

D3 (atau D3.js) adalah library JavaScript yang bagus untuk

menghasilkan visualisasi interaktif dengan menggunakan standar web
seperti SVG, HTML, dan CSS. Tidak seperti library visualisasi
lainnya, D3 menawarkan kontrol yang lebih baik terhadap hasil
visual akhir.

Page 3
 d. AJAX

AJAX, singkatan dari “Asynchronous JavaScript and XML“,

merupakan metode suatu laman web menggunakan JavaScript untuk
mengirim dan menerima data dari server tanpa harus menyegarkan
(refresh) laman itu. XML adalah sejenis markup language – seperti
HTML, yang kerap dipakai untuk mengirimkan data melalui internet.

e. AngularJS

AngularJS adalah sebuah framework MVC full frontend untuk

aplikasi web JavaScript. Ia dibangun di Google dan menyediakan
sebuah metode cepat untuk membangun aplikasi web laman tunggal.
Seperti jQuery, ia dimasukkan dala sebuah laman webd engan
menggunakan tag <script>, dan ditulis dalam JavaScript. Namun,
berbeda dengan jQuery, ia dimaksudkan sebagai sebuah framework
untuk membangun sebuah aplikasi web utuh. Selain itu, AngularJS
juga mengandung sebuah versi minimal jQuery secara default.

f. Node.js

Anda tentu ingat bahwa JavaScript berjalan pada browser dengan

satu pengecualian? Nah, pengecualian tersebut ialah Node.js. Ia
adalah sebuah tool command-line untuk menjalankan JavaScript pada
sebuah mesin tanpa harus menjalankannya pada peramban. Hal ini
dimampukan dengan adanya suatu versi Chrome’s V8 Engine, yakni
engine JavaScript yang berjalan dalam Google Chrome.

4. Dasar-Dasar Java Script

 Variabel
Variables merupakan wadah yang dapat beri nilai. Variable di
deklarasikan dengan keyword var, diikuti nama Variable yang di
butuhkan:

#> var myVariable; Catatan:

Semua baris di JS
harus diakhiri
Catatan: dengan semi-colon
Semua Variable di (;), untuk
Javascript memiliki menandakan akhir
Tipe Data. baris kode.

Page 4
 Type Data

Pengertian Tipe Data (Data Type) adalah jenis nilai yang

dapat ditampung suatu variabel. Misalnya dapat menampung
bilangan bulat, pecahan/ berkoma, karakter huruf tunggal hingga
simbol dan huruf yang membentuk barisan karakter.

Variabel Penjelasan Contoh

Teks String.
var myVariable = 'Coding
Untuk menandakan
Center';
String bahwa variabel var myVariable2 = “Coding
adalah sebuah Center”;
string (teks).
Angka/number.
Untuk menandakan
Number bahwa variabel var myVariable = 10;
adalah sebuah
Angka.
Nilai
True/False.
Boolean Booelan hanya var myVariable = true;
memiliki 2 value
yaitu true/flase.
Struktur yang
memungkinkan
untuk menyimpan var myVariable =
Array lebih dari satu [1,'Ron','Weasly',10];
nilai dalam myVariable[0], myVariable[1];
sebuah
reference.
Pada dasarnya,
semua. Semuanya
di javascript var myVariable =
Object adalah sebuah document.getElementByID(‘myId’);
objek, dan dapat
disimpan dalam
variabel.

Catatan:
c = a + b;
a dan b disebut operand;
symbol + disebut operator
c = a + b disebut ekspresi

Page 5
 Operator
Operator adalah karakter khusus yang berupa symbol atau
tanda yang digunakan untuk mengoperasikan (memproses) dua
operand atau lebih untuk mendapatkan hasil. Sama seperti pada
bahasa pemograman lain ada tiga jenis operator pada java script
yaitu aritmatika, assigment dan pembanding.

Operator Aritmatika
Operator Pengertian Contoh

+ Addition (penjumlahan) 5 + 3;

- Subtraction (pengurangan) 5 - 3;

* Multiplication (perkalian) 5 * 3;

/ Division (pembagi) 5 / 3;

% Modulus/Remainder (sisa 5 % 3;
Bagi)
++ Increment (penjumlahan var b = 0;
beruntun satu) b++;
-- Decrement (pengurangan Var c = 0;
beruntun satu) c++;

Operator Assigment

Operator Pengertian Contoh

= Operator pemberi nilai x = y

+= Operator Penjumlah x += y
berlangsung
-= Operator Pengurang x -= y
berlangsung
*= Operator Perkalian x *= y
berlangsung
/= Operator Pembagi x /= y
berlangsung
%= Operator Sisa Bagi x %= y
berlangsung

Page 6
Operator Pembanding

Operator Pengertian Contoh

== Sama dengan (Q == 115)

=== Sama dengan (W === “my World”)

(String)
!= Tidak Sama Dengan (E != 9)

!== Tidak Sama Dengan (R !== “Sembilan”)

(String)
> Lebih Dari (T > 10)

< Kurang Dari (Y < 100)

>= Lenih Dari Sama (U >= 40)

Dengan
<= Kurang Dari Sama (I <= 89)
Dengan
? Operato ternary (9 > 4)?

Operator Logika

Operator Pengertian Contoh

&& Operator AND (Dan) (c > 0 && c <100)
|| Operator OR (Atau) (c > 0 || c <100)
! Operator NOT (Tidak) !(c > 0 || c <100)

Page 7
5. Struktur Javascript

Cara penulisan ini dimana Kode JavaScript ditulis di dalam tag

<script></script> dan diletakan di dalam tag <head></head>

<!DOCTYPE html>
<html>
<head>
<title>S4camptech Javascript</title>
<script type="text/javascript">
//deklarasi code untuk menjalankan javascript
alert(“Anda Sedang Belajar JavaScript di S4camptech-
coding-center”);
</script>
</head>
<body> Catatan:
//Body Content Penulisan file Javascript bisa
</body> di tulis dimanapun dalam tag
</html> HTML.
a. Struktur Penulisan Javascript

 Penulisan Javascript Internal OnHead

OnHead merupakan cara penulisan Javascript kedalam file HTML
per halaman ( Page ) dan penulisan file Javascript dalam tag <head>

<!DOCTYPE html>
<html>
<head>
<title>S4camptech Javascript</title>
<script type="text/javascript">
//deklarasi code untuk menjalankan javascript
</script>
</head>
<body>
//Body Content
</body>
</html> Catatan:
Penulisan file Javascript biasa di tulis
dalam tag <head>, namun memiliki kekurangan
yaitu file javascript akan di eksekusi
terlebih dahulu sebelum tag utama(body).

Page 8
  Penulisan Javascript Internal OnBody
OnBody merupakan cara penulisan Javascript kedalam file HTML
per halaman ( Page ) dan penulisan file Javascript dalam tag <body>

<!DOCTYPE html>
<html>
<head>
<title>S4camptech Javascript</title>
</head>
<body>
<script type="text/javascript">
//deklarasi code untuk menjalankan javascript
</script>
Catatan:
//Body Content Beberapa programmer membuat script
</body>
javascript dalam tag <body> ataupun
</html>
di bawah tag </body>;

 Penulisan Javascript External

Penulisan Javascript External merupakan cara penulisan
Javascript kedalam file HTML secara terpisah atau berada di luar
file HTML.

<!DOCTYPE html>
<html>
<head>
<title>S4camptech Javascript</title>
<script src="s4Script.js" type="text/javascript"></script>
</head>
<body>
<!-- Body Content -->
<h1>S4camptech</h1>
<h2 id=”demo”> </h2>
</body>
</html>

Catatan:
Penulisan file Javascript External Di Simpan Dalam bentuk
File .js (namaFile.js),kemudian dipanggil dalam file HTML
mrnggunakan perintah <script src=..

Page 9
s4Script.js

window.onload = function() {

//deklarasi variable
var myVariable = "Anda Sedang Belajar Java Script S4Camptech";

//deklarasi variable yang berisi object berdasarkan id

var codings = document.getElementById('demo');

//deklarasi variable codings di isi dengan myVariable

codings.innerHTML = myVariable;

 Atribut Event Catatan:

Penulisan Javascript dalam element html Contoh Event :
onchange
onclick
<!DOCTYPE html>
<html> onmouseover
<head> onmouseout
<title>S4camptech Javascript</title> onkeydown
</head> onload
<body>
<button onclick="alert('Semangat Belajar JavaScript,
S4Camptech')">Klik Di Sini</button>
</body>
</html>

 Url
Javascript dapat di panggil langsung melalui link url (href)

<!DOCTYPE html>
<html>
<head>
<title>S4camptech Javascript</title>
</head>
<body>
<a href="javascript:alert('Semangat Belajar JavaScript,
S4Camptech')">Klik Di Sini</a>
</body>
</html>

Page 10
 6. Javascript Methode
a. String
 Methode String merupakan fungsi yang sudah di sediakan
dalam javascript yg di gunakan untuk mengolah data
(String).

<script>
var kalimat = "Pemrograman javascrips S4camptech 2018";
var label = kalimat.substr(23,10);

document.write(label);
</script>

b. Number
 Methode Number merupakan fungsi yang sudah di sediakan
dalam javascript yg di gunakan untuk mengolah data
(Number).

<script>
var num = 9.656;
var label = num.toFixed(2);
</script>

c. Contoh Methods

String Contoh Methods Number Contoh Methods

var str = "Ini
Var num = 49;
Samudera”;
substring(); toString(); var res =
var res = str.
num.toString();
substring(4, 12);
var str = "Ini
var num = 9.656;
Samudera"; toExponential(
substr(); num.toExponential(2
var res = );
);
str.substr(4,9);
var str = "Ini
var x = 9.656;
Samudera";
x.toFixed(0);// 10
replace(); var res = toFixed();
x.toFixed(2);
str.replace("Samudera
//9.66
", "Anugerah");
toUpperCase( var res = parseInt("10
parseInt();
); str.toUpperCase(); Th");// 10
var str = "Ini
Samudera"; var x = 9.656;
charAt(); valueOf()
var res = x.valueOf();
str.charAt(0);

Page 11
7. Javascript Function
a. Stuktur Function
Functions merupakan cara encapsulasi fungsi yang ingin anda
gunakan kembali, jadi anda dapat memanggil dengan hanya sebuah nama
fungsi, dan tidak harus menulis semua kodenya lagi setiap kali anda
ingin menggunakannya kembali.
Fungsi JavaScript didefinisikan dengan kata kunci fungsi,
diikuti oleh nama, diikuti oleh tanda kurung ().Nama fungsi dapat
berisi huruf, angka, setrip bawah, dan tanda dolar (aturan yang sama
dengan variabel).
Contoh : Catatan:
Function yang sudah dibuat
<script dapat dipanggil berulang
function nama_function(){ kali;
//code
}

</script>

Dalam Javascript function dapat berisi beberapa

parameter,parameter yang selanjutnya akan di gunakan dalam function.
Contoh :

<script
function nama_function(parameter1,parameter2,parametern3){
Catatan:
}
Dalam javascript untuk
</script> mengembalikan sebuah nilai
dari function menggunakan
b. Pemanggilan Function perintah return;
Function yang sudah di buat dapat di panggil dalam
function lain atau dalam suatu proses.
Contoh :
Catatan:
<script
function nama_function(a,b,c){ Dalam javascript banyak
function yang sudah
return a + b - c; tersedia, missal: alert();
}
var x = 6;
var y = 10;
var z = 12;
var hasil = nama_function(x,y,z);
//hasil = 4
</script>

Page 12
Page 13
 Daftar Pustaka

https://www.duniailkom.com/tutorial-belajar-javascript-sejarah-
dan-perkembangan-versi-javascript/

https://www.duniailkom.com/tutorial-belajar-javascript-
pengertian-dan-fungsi-javascript-dalam-pemograman-web/

Page 14