SlideShare a Scribd company logo
PERTEMUAN JS
Belajar Javascript Part 2 : Cara
Penulisan Dan Penggunaan
Javascript
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 di letakkan 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 menginclude nya pada halaman HTML. agar lebih spesifik
akan kita bahas satu persatu.
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 javascript nya 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.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title>
</head>
<body>
<h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1>
<h2>www.malasngoding.com</h2>
<div id="nama"></div>
<script>
document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";
</script>
</body>
</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.
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 si perhatikan ya teman-teman besar kecil
nya. 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.
document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";
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.
belajar.html
<script type="text/javascript" src="belajar.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title>
</head>
<body>
<h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1>
<h2>www.malasngoding.com</h2>
<div id="nama"></div>
</body>
<script type="text/javascript" src="belajar.js"></script>
</html>
belajar.js
dan jika di jalankan maka hasilnya akan sama.
document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";

More Related Content

What's hot

membuat hello world
membuat hello worldmembuat hello world
membuat hello world
citamaulani
 
Pemrograman Web - Manipulasi DOM dengna Javascript
Pemrograman Web - Manipulasi DOM dengna JavascriptPemrograman Web - Manipulasi DOM dengna Javascript
Pemrograman Web - Manipulasi DOM dengna Javascript
KuliahKita
 
Ajax tutorial 1
Ajax tutorial 1Ajax tutorial 1
Ajax tutorial 1
Fajar Baskoro
 
Panduan lengkap php ajax j query
Panduan lengkap php ajax j queryPanduan lengkap php ajax j query
Panduan lengkap php ajax j query
apriatin
 
5 pemrograman internet css
5 pemrograman internet   css5 pemrograman internet   css
5 pemrograman internet css
Toni Tegar Sahidi
 
Bahaya xss | Ngoceh IT V.2
Bahaya xss | Ngoceh IT V.2Bahaya xss | Ngoceh IT V.2
Bahaya xss | Ngoceh IT V.2
MuhamadHidayat46
 
membuat Hello world dengan menggunakan JQuery
membuat Hello world dengan menggunakan JQuerymembuat Hello world dengan menggunakan JQuery
membuat Hello world dengan menggunakan JQuery
Akhmad Anseve
 
Source code url shortener 2 versi
Source code url shortener 2 versiSource code url shortener 2 versi
Source code url shortener 2 versiGiyan Potgieter
 

What's hot (9)

membuat hello world
membuat hello worldmembuat hello world
membuat hello world
 
Lecture06 javascript1
Lecture06 javascript1Lecture06 javascript1
Lecture06 javascript1
 
Pemrograman Web - Manipulasi DOM dengna Javascript
Pemrograman Web - Manipulasi DOM dengna JavascriptPemrograman Web - Manipulasi DOM dengna Javascript
Pemrograman Web - Manipulasi DOM dengna Javascript
 
Ajax tutorial 1
Ajax tutorial 1Ajax tutorial 1
Ajax tutorial 1
 
Panduan lengkap php ajax j query
Panduan lengkap php ajax j queryPanduan lengkap php ajax j query
Panduan lengkap php ajax j query
 
5 pemrograman internet css
5 pemrograman internet   css5 pemrograman internet   css
5 pemrograman internet css
 
Bahaya xss | Ngoceh IT V.2
Bahaya xss | Ngoceh IT V.2Bahaya xss | Ngoceh IT V.2
Bahaya xss | Ngoceh IT V.2
 
membuat Hello world dengan menggunakan JQuery
membuat Hello world dengan menggunakan JQuerymembuat Hello world dengan menggunakan JQuery
membuat Hello world dengan menggunakan JQuery
 
Source code url shortener 2 versi
Source code url shortener 2 versiSource code url shortener 2 versi
Source code url shortener 2 versi
 

Similar to Pertemuan java script 2

Javascript Minggu10 (1).pptx
Javascript Minggu10 (1).pptxJavascript Minggu10 (1).pptx
Javascript Minggu10 (1).pptx
RyhnPsh
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
Henry Santoso
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
Kernel Linux
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
Rian Affan
 
Praktikum javascript
Praktikum javascriptPraktikum javascript
Praktikum javascript
Yunia Ikawati
 
Javascript
JavascriptJavascript
Javascript
Fahrizal Nuansa
 
Mengenal javascript
Mengenal javascriptMengenal javascript
Mengenal javascriptSundari92
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)Toni Tegar Sahidi
 
Dasar javascript
Dasar javascriptDasar javascript
Dasar javascript
andika668538
 
Dasar-dasar javascript
Dasar-dasar javascriptDasar-dasar javascript
Dasar-dasar javascriptHaidarNayo
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
T Ghazali
 
7-Javascript.pdf
7-Javascript.pdf7-Javascript.pdf
7-Javascript.pdf
YogiekIndraKurniawan
 
Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247
Jansen Wijaya
 
Jeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar JspJeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar Jsp
Individual Consultants
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasar
edy sinaga
 
Mengamankan Aplikasi Java EE 6
Mengamankan Aplikasi Java EE 6Mengamankan Aplikasi Java EE 6
Mengamankan Aplikasi Java EE 6
Bowo Prasetyo
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
eghha
 
Pocket book window builder eclipse
Pocket book window builder eclipsePocket book window builder eclipse
Pocket book window builder eclipse
resarahadian
 
Mengenal script html 2
Mengenal script html 2Mengenal script html 2
Mengenal script html 2
Ali Muntaha
 
Java script modul
Java script modul Java script modul
Java script modul
andika668538
 

Similar to Pertemuan java script 2 (20)

Javascript Minggu10 (1).pptx
Javascript Minggu10 (1).pptxJavascript Minggu10 (1).pptx
Javascript Minggu10 (1).pptx
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
 
Praktikum javascript
Praktikum javascriptPraktikum javascript
Praktikum javascript
 
Javascript
JavascriptJavascript
Javascript
 
Mengenal javascript
Mengenal javascriptMengenal javascript
Mengenal javascript
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
 
Dasar javascript
Dasar javascriptDasar javascript
Dasar javascript
 
Dasar-dasar javascript
Dasar-dasar javascriptDasar-dasar javascript
Dasar-dasar javascript
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
7-Javascript.pdf
7-Javascript.pdf7-Javascript.pdf
7-Javascript.pdf
 
Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247Tugas 2 0916 jansen_1512510247
Tugas 2 0916 jansen_1512510247
 
Jeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar JspJeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar Jsp
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasar
 
Mengamankan Aplikasi Java EE 6
Mengamankan Aplikasi Java EE 6Mengamankan Aplikasi Java EE 6
Mengamankan Aplikasi Java EE 6
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
 
Pocket book window builder eclipse
Pocket book window builder eclipsePocket book window builder eclipse
Pocket book window builder eclipse
 
Mengenal script html 2
Mengenal script html 2Mengenal script html 2
Mengenal script html 2
 
Java script modul
Java script modul Java script modul
Java script modul
 

More from f fr

Pertemuan java script 1
Pertemuan java script 1Pertemuan java script 1
Pertemuan java script 1
f fr
 
Pertemuan 8 b
Pertemuan 8 bPertemuan 8 b
Pertemuan 8 b
f fr
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
f fr
 
Pertemuan 7+++
Pertemuan 7+++Pertemuan 7+++
Pertemuan 7+++
f fr
 
Pertemuan 7++
Pertemuan 7++Pertemuan 7++
Pertemuan 7++
f fr
 
Pertemuan 7+
Pertemuan 7+Pertemuan 7+
Pertemuan 7+
f fr
 
Pertemuan 6 7
Pertemuan 6 7Pertemuan 6 7
Pertemuan 6 7
f fr
 
Pertemuan 5
Pertemuan 5Pertemuan 5
Pertemuan 5
f fr
 
Pertemuan 4 c
Pertemuan 4 cPertemuan 4 c
Pertemuan 4 c
f fr
 
Pertemuan 3 b
Pertemuan 3 bPertemuan 3 b
Pertemuan 3 b
f fr
 
Pertemuan 3 a
Pertemuan 3 aPertemuan 3 a
Pertemuan 3 a
f fr
 
Pertemuan 2 b
Pertemuan 2 bPertemuan 2 b
Pertemuan 2 b
f fr
 
Pertemuan 2 a
Pertemuan 2 aPertemuan 2 a
Pertemuan 2 a
f fr
 
Pertemuan 1 b
Pertemuan 1 bPertemuan 1 b
Pertemuan 1 b
f fr
 
Pertemuan 1 a
Pertemuan 1 aPertemuan 1 a
Pertemuan 1 a
f fr
 
Pertemuan 1 a
Pertemuan 1 aPertemuan 1 a
Pertemuan 1 a
f fr
 
Pertemuan 1 a
Pertemuan 1 aPertemuan 1 a
Pertemuan 1 a
f fr
 

More from f fr (17)

Pertemuan java script 1
Pertemuan java script 1Pertemuan java script 1
Pertemuan java script 1
 
Pertemuan 8 b
Pertemuan 8 bPertemuan 8 b
Pertemuan 8 b
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
Pertemuan 7+++
Pertemuan 7+++Pertemuan 7+++
Pertemuan 7+++
 
Pertemuan 7++
Pertemuan 7++Pertemuan 7++
Pertemuan 7++
 
Pertemuan 7+
Pertemuan 7+Pertemuan 7+
Pertemuan 7+
 
Pertemuan 6 7
Pertemuan 6 7Pertemuan 6 7
Pertemuan 6 7
 
Pertemuan 5
Pertemuan 5Pertemuan 5
Pertemuan 5
 
Pertemuan 4 c
Pertemuan 4 cPertemuan 4 c
Pertemuan 4 c
 
Pertemuan 3 b
Pertemuan 3 bPertemuan 3 b
Pertemuan 3 b
 
Pertemuan 3 a
Pertemuan 3 aPertemuan 3 a
Pertemuan 3 a
 
Pertemuan 2 b
Pertemuan 2 bPertemuan 2 b
Pertemuan 2 b
 
Pertemuan 2 a
Pertemuan 2 aPertemuan 2 a
Pertemuan 2 a
 
Pertemuan 1 b
Pertemuan 1 bPertemuan 1 b
Pertemuan 1 b
 
Pertemuan 1 a
Pertemuan 1 aPertemuan 1 a
Pertemuan 1 a
 
Pertemuan 1 a
Pertemuan 1 aPertemuan 1 a
Pertemuan 1 a
 
Pertemuan 1 a
Pertemuan 1 aPertemuan 1 a
Pertemuan 1 a
 

Pertemuan java script 2

  • 1. PERTEMUAN JS Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript
  • 2. 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 di letakkan 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 menginclude nya pada halaman HTML. agar lebih spesifik akan kita bahas satu persatu.
  • 3. 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 javascript nya 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.
  • 4. <!DOCTYPE html> <html> <head> <title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title> </head> <body> <h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1> <h2>www.malasngoding.com</h2> <div id="nama"></div> <script> document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding"; </script> </body> </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. 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 si perhatikan ya teman-teman besar kecil nya. 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. document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";
  • 5. 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. belajar.html <script type="text/javascript" src="belajar.js"></script>
  • 6. <!DOCTYPE html> <html> <head> <title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title> </head> <body> <h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1> <h2>www.malasngoding.com</h2> <div id="nama"></div> </body> <script type="text/javascript" src="belajar.js"></script> </html> belajar.js dan jika di jalankan maka hasilnya akan sama. document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";