SlideShare una empresa de Scribd logo
1 de 76
Descargar para leer sin conexión
Fahrizal Nuansa – 113040246
    Yosua Bachtiar – 113040250
Getha Azam Ceterio - 113040158
Javascript adalah bahasa Scripting, bukan bahasa pemrograman.

Javascript biasanya embedded secara langsung pada HTML pages.

Javascript adalah interpreted language (artinya bahwa scripts
dijalankan tanpa di kompile terlebih dahulu).

Apakah Java dan Javascript sama?, Tidak, Java dan JavaScript
adalah dua bahasa yang berbeda baik dari sisi konsep maupun
dari sisi desain.

JavaScript bersifat Case Sensitive, artinya huruf besar dan kecil
dibedakan.
Nama resmi JavaScript : ECMAScript.

ECMAScript dikembangkan oleh ECMA Organization.

Diciptakan oleh Brendan Eich. Muncul pertama kali di
semua browser Netscape dan Microsoft pada tahun
1996.

Disetujui sebagai standar internasional pada tahun 1998.
JavaScript dapat bereaksi terhadap events - JavaScript dapat di-set untuk
menjalankan saat terjadi sesuatu, seperti sebuah page telah selesai dipanggil
atau saat seorang user meng-klik pada HTML element.

JavaScript dapat membaca dan menulis HTML elements - JavaScript dapat
membaca dan mengubah isi dari HTML element

JavaScript dapat digunakan untuk mem-validasi data - JavaScript dapat
digunakan untuk mem-validasi form data sebelum di-submitted ke server.

JavaScript dapat digunakan untuk mendeteksi browser pengunjung -
JavaScript dapat digunakan untuk mendeteksi browser pengunjung.

JavaScript dapat digunakan untuk membuat cookies - JavaScript dapat
digunakan untuk menyimpan dan memanggil informasi di komputer
pengunjung
Script tidak terenkripsi - Karena javascript bersifat client side,
maka script yang kita buat di text editor dan telah dijadikan web
di server, ketika user merequest web dari server tersebut maka
sintak javascript akan langsung ditampilkan di browser. User bisa
melihat dan menirunya dari sourcenya.

Kemampuan terbatas - Walaupun javascript mampu membuat
bentuk web menjadi interaktif dan dinamis, namun javascript
tidak mampu membuat program aplikasi sendiri seperti java.
Program JavaScript dituliskan pada file HTML (.html atau .htm)
menggunakan tag <SCRIPT>


 Contoh :

            <script type=“text/javascript”>

                  //kode Javascript

            </script>
Ditempatkan pada tag <head>

Ditempatkan pada tag <body>

Sebagai file external.
Dengan menempatkan sintax JavaScript pada tag head, tidak akan
mengganggu isi dari halaman web karena semua script disatukan
pada satu tempat.
 Contoh :

            <html>
                      <head>
                                <script type="teks/javascript">
                                          //kode Javascript
                                </script>
                      </head>
            </html>
Script ini dieksekusi ketika halaman di-load sampai di bagian
<body>. Ketika menempatkan script pada bagian <body> berarti
antara isi dan JavaScript dijadikan satu bagian.
 Contoh :

            <html>
                      <head>
                      </head>
                      <body>
                                <script type="teks/javascript">
                                          //kode Javascript
                                </script>
                      </body>
            </html>
Terkadang ada yang menginginkan menjalankan JavaScript
yang sama dalam beberapa kali pada halaman yang berbeda,
tetapi tidak mau disibukkan jika harus menulis ulang script yang
diinginkan di setiap halaman. Maka JavaScript dapat ditulis di
file secara eksternal. Jadi, antara dokumen HTML dan
JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari
dokument HTML. Berkas JavaScript tersebut disimpan dengan
ekstensi .js.
. Contoh namaFile.js :

           document.write("pesan ini tampil ketika halaman diload");



Untuk menggunakan eksternal JavaScript (.js) dipakai
atribut "src" pada tag <script> pada halaman HTML-nya.
 Contoh cobaExternal.html :
                                       Hasil :
 <html>
 <head></head>
 <body>
 <script src="namaFile.js"></script>
 <p>Script di atas berada di berkas “namaFile.js" (eksternal) >/p>
 </body>
 </html>
Mendeklarasikan variabel pada javascript dengan menggunakan kata
kunci var.
 Var userName;
 userName = “RedWhite”;
Aturan penamaan variabel :
   - Nama variabel bersifat Case Sensitive
      var Kota;
      //berbeda dengan..
      var kota;

   - Harus dimulai dengan huruf atau karakter underscore.
      Penulisan Var yang salah   Penulisan Var yang benar
      var @Kota;                 var Kota;
      var 1993kota;              var _kota;
   - Nama variabel tidak boleh mengandung spasi.
      Penulisan Var yang salah   Penulisan Var yang benar
                                 var Nama_Mahasiswa;
      var Nama Mahasiswa;        //atau
                                 var NamaMahasiswa;
Contoh :                                    Hasil :
 <body>
           <script language="Javascript">

           var x = 100;

           document.writeln('variabel x
 bernilai =' + x + '<br>');

           var user = 'fahrizal nuansa';

 document.writeln('Selamat datang
 '+user+'<br>');

           </script>
 </body>
Macam-macam Operator Aritmatika pada JavaScript :
Contoh :                                    Hasil :
 <body>
           <script language="Javascript">
           var x = 100;
           var y = 200;

           var hasil = x + y;

           document.writeln('Hasil
 penjumlahan dari '+ x + ' + ' + y + '=
 '+hasil);

           </script>
 </body>
Digunakan untuk memberikan nilai operan yang terletak di sebelah
kanan ke operan di sebelah kiri dan disimbolkan dengan tanda '=‘.

Macam-macam operator Assigment pada JavaScript :
Contoh :




Hasil :
Digunakan untuk membandingkan dua buah operan. Operan yang
dikenal operator ini dapat bertipe string, numeric, maupun ekspresi lain.
Hasil perbandinga berupa keadan true dan false
Macam - macam operator pembanding :
Contoh :




Hasil :
Digunakan untuk menghubungkan ungkapan pembanding (relasi).
Operator logika membandingkan operan-operannya dan
mengembalikan nilai logik yang nilainya bergantung pada hasil
perbandingan tersebut.
Macam - macam operator logika :
Contoh :




Hasil :
Pada Javascript terdapat beberapa macam pengkondisian :
    if (kondisi)
     Gunakan statement ini untuk mengeksekusi source code hanya jika satu kondisi
     bernilai true.

    if (kondisi1) else (kondisi2)
     Gunakan statement ini untuk mengeksekusi soure code jika satu kondisi bernilai
     true, dan kondisi lain bernilai false.


    if (kondisi1) else if (kondisi2) else (kondisi3)
     Gunakan statement ini untuk memilih satu dari banyak kondisi.


    switch
     Gunakan statement ini untuk memilih satu dari banyak kondisi.
Sintaks :              Hasil
 if (kondisi)
        {
                aksi
            }

Contoh :
Sintaks :                 Contoh :
 if (kondisi)
 {
            aksi
 }
 else
            {
                   aksi
            }


Hasil :
Sintaks :
 if (kondisi1)
            {
                 dieksekusi jika kondisi1 bernilai true
            }
 else if (kondisi2)
            {
                 dieksekusi jika kondisi1 false dan kondisi2
 true
            }
 else
            {
                 dieksekusi jika kondisi1 dan kondisi2 false
            }
Contoh :




Hasil :
Sintaks :
    - a adalah variabel.
    - break berfungsi untuk mencegah case berikutnya tereksekusi ..
    otomatis.

 switch (a)
 {
         case 1 : { aksi 1 } break;
         case 2 : { aksi 2 } break;
         case 3 : { aksi 2 } break;
         case 4 : { aksi 2 } break;
         …………………………………………………………………
         default : { aksi default }
 }
Contoh :




Hasil :
Prinsip kerja operator ternary adalah menyederhanakan bentuk "if..else"
dimana setiap blok dari "if..else" hanya mempunyai 1 perintah, dan melakukan
evaluasi ekspresi tersebut.
Bentuk operator Ternary -> "?"
Sintaks :
 namaVariabel = (kondisi)? Nilai1 : Nilai2;
Contoh :




Hasil :
Pada Javascript terdapat beberapa macam pengulangan :
    for
     pengulangan sebanyak jumlah yang ditentukan.


    while
     pengulangan sampai bertemu kondisi “true”.
Sintaks :
 for (var=startValue; var<=endValue; var=var+increment)
 {
        source code
 }

Contoh :                                  Hasil
Sintaks For...In melakukan pengulangan sebanyak elemen array atau
sebanyak properti dari suatu objek.

Contoh :
                                               Hasil
Perintah break akan menghentikan pengulangan dan akan
mengeksekusi sintaks berikutnya setelah pengulangan.

Contoh :
                                             Hasil
Perintah continue akan melewati value pengulangan yang ditentukan,
kemudian melanjutkan ke value berikutnya.

Contoh :
                                               Hasil
Sintaks :
 var=startValue;
 while (var<=endValue)
 {
        source code
 }

Contoh :                 Hasil
Pada Javascript terdapat beberapa macam PopUp Box :
    Alert Box
     Biasanya digunakan untuk memberikan informasi ke pengguna.


    Confirm Box
     Biasanya digunakan apabila aplikasi membutuhkan verifikasi atau persetujuan dari
     pengguna.


    Prompt Box
     Biasanya digunakan apabila aplikasi ingin pengguna memasukkan dahulu suatu nilai
     sebelum memasuki suatu halaman.
Contoh :
           Hasil
Penjelasan :
 var r = confirm();
 Jika tombol “OK” yang ditekan, maka confirm akan mengisikan nilai “true” ke
 variabel konfirmasi, sebaliknya “false” jika tombol “Cancel” yang ditekan.


Contoh :                                            Hasil
Sintaks :
 prompt(“msg”,”nilaiDefault”);

Contoh :                         Hasil
Sebuah fungsi berisi source code yang akan dieksekusi
ketika dipanggil.
Sebuah fungsi akan dieksekusi jika dipanggil nama
fungsinya atau dieksekusi oleh suatu event.
Sisipkan source code ke dalam fungsi untuk mencegah
suatu source code langsung tereksekusi saat halaman
terbuka.
Fungsi dapat dipanggil dari mana saja di suatu halaman
bahkan dari file JavaScript yang berbeda (external
javascript), jika pada halaman tersebut file-file javascript
sudah disisipkan.
Fungsi bisa mengembalikan nilai ke pemanggilnya.
Sintaks :
 function namaFungsi(parameter1, parameter2, ... parameterN)
 {
            ......
 }


Contoh :                                      Hasil
Contoh :
           Hasil
Event adalah aksi yang dilakukan user terhadap
elemen HTML yang dapat dideteksi oleh
JavaScript.
Setiap elemen di halaman web memiliki event
tertentu yang dapat memicu JavaScript.
Event didefinisikan dalam atribut tag HTML.
Event digunakan dalam kombinasi dengan fungsi,
dan fungsi tersebut tidak akan tereksekusi sebelum
event tersebut terjadi.
onLoad :
    - Event yang terjadi saat memasuki suatu halaman.

Contoh :                                              Hasil :
 <body onLoad=“alert(‘Coba onLoad’)”>
 </body>



onUnload
   - Event yang terjadi saat keluar dari suatu halaman.

Contoh :                                              Hasil :
 <body onUnload="alert('Coba onUnLoad')">
 </body>
Contoh :
           Hasil
JavaScript dapat digunakan untuk memvalidasi data dari form sebelum
dikirimkan ke server.
Contoh valid.js :
Contoh FormValidation.html:




Hasil :
Pada bahasa pemrograman Javascript, terdapat object yang dapat digunakan
untuk merepresentasikan tanggal dan waktu, yaitu objek date. Untuk
‘menghidupkan’ sebuah instance date sintaks yang digunakan adalah sebagai
berikut:
 var waktu = new Date();

Pada objek date, ada berbagai method yang dapat kita gunakan, yaitu sebagai
berikut :
Contoh jam.js :
Contoh jam.html :                                     Hasil :




Penjelasan Script :
 setTimout(“namaFungsi()”, delay);

 Fungsi setTimeout akan memanggil namaFungsi()
 bila waktu delay sudah terpenuhi.
 Satuan waktu delay : milisecond.
 1000ms = 1s


 document.getElementById('jam').innerHTML="Hari "+x+", Pukul "+h+":"+m+":"+s;

 Berfungsi untuk mengakses element dengan Id = jam, dan menuliskan hari, jam, menit,
 detik kedalam element yang ber Id = jam.
Selesai

Más contenido relacionado

La actualidad más candente

JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...Edureka!
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced JavascriptAdieu
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack IntroductionAnjali Chawla
 
Javascript operators
Javascript operatorsJavascript operators
Javascript operatorsMohit Rana
 
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...Edureka!
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous JavascriptGarrett Welson
 
JavaScript Tutorial
JavaScript  TutorialJavaScript  Tutorial
JavaScript TutorialBui Kiet
 
An Introduction to Gradle for Java Developers
An Introduction to Gradle for Java DevelopersAn Introduction to Gradle for Java Developers
An Introduction to Gradle for Java DevelopersKostas Saidis
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom ManipulationMohammed Arif
 

La actualidad más candente (20)

JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
 
Java script
Java scriptJava script
Java script
 
Jquery
JqueryJquery
Jquery
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Javascript
JavascriptJavascript
Javascript
 
An Intro into webpack
An Intro into webpackAn Intro into webpack
An Intro into webpack
 
Introduction to gradle
Introduction to gradleIntroduction to gradle
Introduction to gradle
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
 
Javascript operators
Javascript operatorsJavascript operators
Javascript operators
 
Html basics
Html basicsHtml basics
Html basics
 
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
 
JavaScript Basics
JavaScript BasicsJavaScript Basics
JavaScript Basics
 
JavaScript Tutorial
JavaScript  TutorialJavaScript  Tutorial
JavaScript Tutorial
 
TypeScript - An Introduction
TypeScript - An IntroductionTypeScript - An Introduction
TypeScript - An Introduction
 
Javascript
JavascriptJavascript
Javascript
 
Local storage
Local storageLocal storage
Local storage
 
An Introduction to Gradle for Java Developers
An Introduction to Gradle for Java DevelopersAn Introduction to Gradle for Java Developers
An Introduction to Gradle for Java Developers
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 

Similar a Javascript

Similar a Javascript (20)

Dasar-dasar javascript
Dasar-dasar javascriptDasar-dasar javascript
Dasar-dasar javascript
 
Dasar javascript
Dasar javascriptDasar javascript
Dasar javascript
 
Javascript guide
Javascript guideJavascript guide
Javascript guide
 
Panduan javascript
Panduan javascriptPanduan javascript
Panduan javascript
 
Pengantar java script
Pengantar java scriptPengantar java script
Pengantar java script
 
Javascript Minggu10 (1).pptx
Javascript Minggu10 (1).pptxJavascript Minggu10 (1).pptx
Javascript Minggu10 (1).pptx
 
Java script modul
Java script modul Java script modul
Java script modul
 
7-Javascript.pdf
7-Javascript.pdf7-Javascript.pdf
7-Javascript.pdf
 
Praktikum javascript
Praktikum javascriptPraktikum javascript
Praktikum javascript
 
Belajar Java dasar
Belajar Java dasarBelajar Java dasar
Belajar Java dasar
 
Kelompok 15
Kelompok 15Kelompok 15
Kelompok 15
 
Kelompok 15
Kelompok 15Kelompok 15
Kelompok 15
 
Kelompok 15
Kelompok 15Kelompok 15
Kelompok 15
 
Php 1
Php 1Php 1
Php 1
 
Lecture06 javascript1
Lecture06 javascript1Lecture06 javascript1
Lecture06 javascript1
 
Mengenal javascript
Mengenal javascriptMengenal javascript
Mengenal javascript
 
Java sfb
Java sfbJava sfb
Java sfb
 
Javascript function
Javascript   functionJavascript   function
Javascript function
 
Modul praktikum javascript
Modul praktikum javascriptModul praktikum javascript
Modul praktikum javascript
 
Basic PHP Syntax
Basic PHP SyntaxBasic PHP Syntax
Basic PHP Syntax
 

Último

RPP 1 Lembar Prakarya Kelas 8 Semester 2 (gurusekali.com).docx
RPP 1 Lembar Prakarya Kelas 8 Semester 2 (gurusekali.com).docxRPP 1 Lembar Prakarya Kelas 8 Semester 2 (gurusekali.com).docx
RPP 1 Lembar Prakarya Kelas 8 Semester 2 (gurusekali.com).docxRahmiRauf
 
PPT TUGAS DISKUSI KELOMPOK 3 KELAS 224 MODUL 1.4.pdf
PPT TUGAS DISKUSI KELOMPOK 3 KELAS 224 MODUL 1.4.pdfPPT TUGAS DISKUSI KELOMPOK 3 KELAS 224 MODUL 1.4.pdf
PPT TUGAS DISKUSI KELOMPOK 3 KELAS 224 MODUL 1.4.pdfssuser8410f71
 
Materi Kimfar Asam,Basa,Buffer dan Garam
Materi Kimfar Asam,Basa,Buffer dan GaramMateri Kimfar Asam,Basa,Buffer dan Garam
Materi Kimfar Asam,Basa,Buffer dan GaramTitaniaUtami
 
MODUL AJAR BAHASA INGGRIS KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 4 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INGGRIS KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 4 KURIKULUM MERDEKA.pdfAndiCoc
 
Materi: Mengapa tidak memanfaatkan Media ?
Materi: Mengapa tidak memanfaatkan Media ?Materi: Mengapa tidak memanfaatkan Media ?
Materi: Mengapa tidak memanfaatkan Media ?AdePutraTunggali
 
PELAKSANAAN + Link2 MATERI Training_ "AUDIT INTERNAL + SISTEM MANAJEMEN MUTU ...
PELAKSANAAN + Link2 MATERI Training_ "AUDIT INTERNAL + SISTEM MANAJEMEN MUTU ...PELAKSANAAN + Link2 MATERI Training_ "AUDIT INTERNAL + SISTEM MANAJEMEN MUTU ...
PELAKSANAAN + Link2 MATERI Training_ "AUDIT INTERNAL + SISTEM MANAJEMEN MUTU ...Kanaidi ken
 
MODUL AJAR BAHASA INDONESIA KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 4 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INDONESIA KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 4 KURIKULUM MERDEKA.pdfAndiCoc
 
Lokakarya Kepemimpinan Sekolah 1_Mei 2024.pptx
Lokakarya Kepemimpinan Sekolah 1_Mei 2024.pptxLokakarya Kepemimpinan Sekolah 1_Mei 2024.pptx
Lokakarya Kepemimpinan Sekolah 1_Mei 2024.pptxHermawati Dwi Susari
 
MODUL AJAR MATEMATIKA KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 4 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 4 KURIKULUM MERDEKA.pdfAndiCoc
 
MODUL AJAR SENI RUPA KELAS 2 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 2 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 2 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 2 KURIKULUM MERDEKA.pdfAndiCoc
 
Revisi Kumpulan LK Workshop perdirjen 7327.pptx
Revisi Kumpulan LK Workshop perdirjen 7327.pptxRevisi Kumpulan LK Workshop perdirjen 7327.pptx
Revisi Kumpulan LK Workshop perdirjen 7327.pptxRazefZulkarnain1
 
KISI KISI SAS GENAP-PAI 7- KUMER-2023.doc
KISI KISI SAS GENAP-PAI 7- KUMER-2023.docKISI KISI SAS GENAP-PAI 7- KUMER-2023.doc
KISI KISI SAS GENAP-PAI 7- KUMER-2023.docriska190321
 
Informatika Latihan Soal Kelas Tujuh.pptx
Informatika Latihan Soal Kelas Tujuh.pptxInformatika Latihan Soal Kelas Tujuh.pptx
Informatika Latihan Soal Kelas Tujuh.pptxMateriSMPTDarulFalah
 
LAPORAN SATUAN PENDIDIKAN 211 sabadolok.docx
LAPORAN SATUAN PENDIDIKAN 211 sabadolok.docxLAPORAN SATUAN PENDIDIKAN 211 sabadolok.docx
LAPORAN SATUAN PENDIDIKAN 211 sabadolok.docxSriHandayaniLubisSpd
 
AKUNTANSI INVESTASI PD SEKURITAS UTANG.pptx
AKUNTANSI INVESTASI PD SEKURITAS UTANG.pptxAKUNTANSI INVESTASI PD SEKURITAS UTANG.pptx
AKUNTANSI INVESTASI PD SEKURITAS UTANG.pptxFipkiAdrianSarandi
 
MODUL AJAR SENI MUSIK KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI MUSIK KELAS 5 KURIKULUM MERDEKA.pdfMODUL AJAR SENI MUSIK KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI MUSIK KELAS 5 KURIKULUM MERDEKA.pdfAndiCoc
 
Laporan Guru Piket Bukti Dukung PMM - www.kherysuryawan.id (1) (1).pdf
Laporan Guru Piket Bukti Dukung PMM - www.kherysuryawan.id (1) (1).pdfLaporan Guru Piket Bukti Dukung PMM - www.kherysuryawan.id (1) (1).pdf
Laporan Guru Piket Bukti Dukung PMM - www.kherysuryawan.id (1) (1).pdfSriHandayaniLubisSpd
 
Presentasi-ruang-kolaborasi-modul-1.4.doc
Presentasi-ruang-kolaborasi-modul-1.4.docPresentasi-ruang-kolaborasi-modul-1.4.doc
Presentasi-ruang-kolaborasi-modul-1.4.docLeoRahmanBoyanese
 
Aksi Nyata Pendidikan inklusi-Kompres.pdf
Aksi Nyata Pendidikan inklusi-Kompres.pdfAksi Nyata Pendidikan inklusi-Kompres.pdf
Aksi Nyata Pendidikan inklusi-Kompres.pdfRahayanaDjaila2
 
#05 SOSIALISASI JUKNIS BOK 2024 Canva_124438.pptx
#05 SOSIALISASI JUKNIS BOK 2024 Canva_124438.pptx#05 SOSIALISASI JUKNIS BOK 2024 Canva_124438.pptx
#05 SOSIALISASI JUKNIS BOK 2024 Canva_124438.pptxyeniyoramapalimdam
 

Último (20)

RPP 1 Lembar Prakarya Kelas 8 Semester 2 (gurusekali.com).docx
RPP 1 Lembar Prakarya Kelas 8 Semester 2 (gurusekali.com).docxRPP 1 Lembar Prakarya Kelas 8 Semester 2 (gurusekali.com).docx
RPP 1 Lembar Prakarya Kelas 8 Semester 2 (gurusekali.com).docx
 
PPT TUGAS DISKUSI KELOMPOK 3 KELAS 224 MODUL 1.4.pdf
PPT TUGAS DISKUSI KELOMPOK 3 KELAS 224 MODUL 1.4.pdfPPT TUGAS DISKUSI KELOMPOK 3 KELAS 224 MODUL 1.4.pdf
PPT TUGAS DISKUSI KELOMPOK 3 KELAS 224 MODUL 1.4.pdf
 
Materi Kimfar Asam,Basa,Buffer dan Garam
Materi Kimfar Asam,Basa,Buffer dan GaramMateri Kimfar Asam,Basa,Buffer dan Garam
Materi Kimfar Asam,Basa,Buffer dan Garam
 
MODUL AJAR BAHASA INGGRIS KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 4 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INGGRIS KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INGGRIS KELAS 4 KURIKULUM MERDEKA.pdf
 
Materi: Mengapa tidak memanfaatkan Media ?
Materi: Mengapa tidak memanfaatkan Media ?Materi: Mengapa tidak memanfaatkan Media ?
Materi: Mengapa tidak memanfaatkan Media ?
 
PELAKSANAAN + Link2 MATERI Training_ "AUDIT INTERNAL + SISTEM MANAJEMEN MUTU ...
PELAKSANAAN + Link2 MATERI Training_ "AUDIT INTERNAL + SISTEM MANAJEMEN MUTU ...PELAKSANAAN + Link2 MATERI Training_ "AUDIT INTERNAL + SISTEM MANAJEMEN MUTU ...
PELAKSANAAN + Link2 MATERI Training_ "AUDIT INTERNAL + SISTEM MANAJEMEN MUTU ...
 
MODUL AJAR BAHASA INDONESIA KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 4 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INDONESIA KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 4 KURIKULUM MERDEKA.pdf
 
Lokakarya Kepemimpinan Sekolah 1_Mei 2024.pptx
Lokakarya Kepemimpinan Sekolah 1_Mei 2024.pptxLokakarya Kepemimpinan Sekolah 1_Mei 2024.pptx
Lokakarya Kepemimpinan Sekolah 1_Mei 2024.pptx
 
MODUL AJAR MATEMATIKA KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 4 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 4 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 4 KURIKULUM MERDEKA.pdf
 
MODUL AJAR SENI RUPA KELAS 2 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 2 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 2 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 2 KURIKULUM MERDEKA.pdf
 
Revisi Kumpulan LK Workshop perdirjen 7327.pptx
Revisi Kumpulan LK Workshop perdirjen 7327.pptxRevisi Kumpulan LK Workshop perdirjen 7327.pptx
Revisi Kumpulan LK Workshop perdirjen 7327.pptx
 
KISI KISI SAS GENAP-PAI 7- KUMER-2023.doc
KISI KISI SAS GENAP-PAI 7- KUMER-2023.docKISI KISI SAS GENAP-PAI 7- KUMER-2023.doc
KISI KISI SAS GENAP-PAI 7- KUMER-2023.doc
 
Informatika Latihan Soal Kelas Tujuh.pptx
Informatika Latihan Soal Kelas Tujuh.pptxInformatika Latihan Soal Kelas Tujuh.pptx
Informatika Latihan Soal Kelas Tujuh.pptx
 
LAPORAN SATUAN PENDIDIKAN 211 sabadolok.docx
LAPORAN SATUAN PENDIDIKAN 211 sabadolok.docxLAPORAN SATUAN PENDIDIKAN 211 sabadolok.docx
LAPORAN SATUAN PENDIDIKAN 211 sabadolok.docx
 
AKUNTANSI INVESTASI PD SEKURITAS UTANG.pptx
AKUNTANSI INVESTASI PD SEKURITAS UTANG.pptxAKUNTANSI INVESTASI PD SEKURITAS UTANG.pptx
AKUNTANSI INVESTASI PD SEKURITAS UTANG.pptx
 
MODUL AJAR SENI MUSIK KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI MUSIK KELAS 5 KURIKULUM MERDEKA.pdfMODUL AJAR SENI MUSIK KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI MUSIK KELAS 5 KURIKULUM MERDEKA.pdf
 
Laporan Guru Piket Bukti Dukung PMM - www.kherysuryawan.id (1) (1).pdf
Laporan Guru Piket Bukti Dukung PMM - www.kherysuryawan.id (1) (1).pdfLaporan Guru Piket Bukti Dukung PMM - www.kherysuryawan.id (1) (1).pdf
Laporan Guru Piket Bukti Dukung PMM - www.kherysuryawan.id (1) (1).pdf
 
Presentasi-ruang-kolaborasi-modul-1.4.doc
Presentasi-ruang-kolaborasi-modul-1.4.docPresentasi-ruang-kolaborasi-modul-1.4.doc
Presentasi-ruang-kolaborasi-modul-1.4.doc
 
Aksi Nyata Pendidikan inklusi-Kompres.pdf
Aksi Nyata Pendidikan inklusi-Kompres.pdfAksi Nyata Pendidikan inklusi-Kompres.pdf
Aksi Nyata Pendidikan inklusi-Kompres.pdf
 
#05 SOSIALISASI JUKNIS BOK 2024 Canva_124438.pptx
#05 SOSIALISASI JUKNIS BOK 2024 Canva_124438.pptx#05 SOSIALISASI JUKNIS BOK 2024 Canva_124438.pptx
#05 SOSIALISASI JUKNIS BOK 2024 Canva_124438.pptx
 

Javascript

  • 1. Fahrizal Nuansa – 113040246 Yosua Bachtiar – 113040250 Getha Azam Ceterio - 113040158
  • 2.
  • 3. Javascript adalah bahasa Scripting, bukan bahasa pemrograman. Javascript biasanya embedded secara langsung pada HTML pages. Javascript adalah interpreted language (artinya bahwa scripts dijalankan tanpa di kompile terlebih dahulu). Apakah Java dan Javascript sama?, Tidak, Java dan JavaScript adalah dua bahasa yang berbeda baik dari sisi konsep maupun dari sisi desain. JavaScript bersifat Case Sensitive, artinya huruf besar dan kecil dibedakan.
  • 4. Nama resmi JavaScript : ECMAScript. ECMAScript dikembangkan oleh ECMA Organization. Diciptakan oleh Brendan Eich. Muncul pertama kali di semua browser Netscape dan Microsoft pada tahun 1996. Disetujui sebagai standar internasional pada tahun 1998.
  • 5.
  • 6. JavaScript dapat bereaksi terhadap events - JavaScript dapat di-set untuk menjalankan saat terjadi sesuatu, seperti sebuah page telah selesai dipanggil atau saat seorang user meng-klik pada HTML element. JavaScript dapat membaca dan menulis HTML elements - JavaScript dapat membaca dan mengubah isi dari HTML element JavaScript dapat digunakan untuk mem-validasi data - JavaScript dapat digunakan untuk mem-validasi form data sebelum di-submitted ke server. JavaScript dapat digunakan untuk mendeteksi browser pengunjung - JavaScript dapat digunakan untuk mendeteksi browser pengunjung. JavaScript dapat digunakan untuk membuat cookies - JavaScript dapat digunakan untuk menyimpan dan memanggil informasi di komputer pengunjung
  • 7. Script tidak terenkripsi - Karena javascript bersifat client side, maka script yang kita buat di text editor dan telah dijadikan web di server, ketika user merequest web dari server tersebut maka sintak javascript akan langsung ditampilkan di browser. User bisa melihat dan menirunya dari sourcenya. Kemampuan terbatas - Walaupun javascript mampu membuat bentuk web menjadi interaktif dan dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java.
  • 8.
  • 9. Program JavaScript dituliskan pada file HTML (.html atau .htm) menggunakan tag <SCRIPT> Contoh : <script type=“text/javascript”> //kode Javascript </script>
  • 10.
  • 11. Ditempatkan pada tag <head> Ditempatkan pada tag <body> Sebagai file external.
  • 12.
  • 13. Dengan menempatkan sintax JavaScript pada tag head, tidak akan mengganggu isi dari halaman web karena semua script disatukan pada satu tempat. Contoh : <html> <head> <script type="teks/javascript"> //kode Javascript </script> </head> </html>
  • 14.
  • 15. Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian. Contoh : <html> <head> </head> <body> <script type="teks/javascript"> //kode Javascript </script> </body> </html>
  • 16.
  • 17. Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
  • 18. . Contoh namaFile.js : document.write("pesan ini tampil ketika halaman diload"); Untuk menggunakan eksternal JavaScript (.js) dipakai atribut "src" pada tag <script> pada halaman HTML-nya. Contoh cobaExternal.html : Hasil : <html> <head></head> <body> <script src="namaFile.js"></script> <p>Script di atas berada di berkas “namaFile.js" (eksternal) >/p> </body> </html>
  • 19.
  • 20. Mendeklarasikan variabel pada javascript dengan menggunakan kata kunci var. Var userName; userName = “RedWhite”; Aturan penamaan variabel : - Nama variabel bersifat Case Sensitive var Kota; //berbeda dengan.. var kota; - Harus dimulai dengan huruf atau karakter underscore. Penulisan Var yang salah Penulisan Var yang benar var @Kota; var Kota; var 1993kota; var _kota; - Nama variabel tidak boleh mengandung spasi. Penulisan Var yang salah Penulisan Var yang benar var Nama_Mahasiswa; var Nama Mahasiswa; //atau var NamaMahasiswa;
  • 21. Contoh : Hasil : <body> <script language="Javascript"> var x = 100; document.writeln('variabel x bernilai =' + x + '<br>'); var user = 'fahrizal nuansa'; document.writeln('Selamat datang '+user+'<br>'); </script> </body>
  • 22.
  • 23. Macam-macam Operator Aritmatika pada JavaScript :
  • 24. Contoh : Hasil : <body> <script language="Javascript"> var x = 100; var y = 200; var hasil = x + y; document.writeln('Hasil penjumlahan dari '+ x + ' + ' + y + '= '+hasil); </script> </body>
  • 25.
  • 26. Digunakan untuk memberikan nilai operan yang terletak di sebelah kanan ke operan di sebelah kiri dan disimbolkan dengan tanda '=‘. Macam-macam operator Assigment pada JavaScript :
  • 28.
  • 29. Digunakan untuk membandingkan dua buah operan. Operan yang dikenal operator ini dapat bertipe string, numeric, maupun ekspresi lain. Hasil perbandinga berupa keadan true dan false Macam - macam operator pembanding :
  • 31.
  • 32. Digunakan untuk menghubungkan ungkapan pembanding (relasi). Operator logika membandingkan operan-operannya dan mengembalikan nilai logik yang nilainya bergantung pada hasil perbandingan tersebut. Macam - macam operator logika :
  • 34.
  • 35. Pada Javascript terdapat beberapa macam pengkondisian : if (kondisi) Gunakan statement ini untuk mengeksekusi source code hanya jika satu kondisi bernilai true. if (kondisi1) else (kondisi2) Gunakan statement ini untuk mengeksekusi soure code jika satu kondisi bernilai true, dan kondisi lain bernilai false. if (kondisi1) else if (kondisi2) else (kondisi3) Gunakan statement ini untuk memilih satu dari banyak kondisi. switch Gunakan statement ini untuk memilih satu dari banyak kondisi.
  • 36. Sintaks : Hasil if (kondisi) { aksi } Contoh :
  • 37. Sintaks : Contoh : if (kondisi) { aksi } else { aksi } Hasil :
  • 38. Sintaks : if (kondisi1) { dieksekusi jika kondisi1 bernilai true } else if (kondisi2) { dieksekusi jika kondisi1 false dan kondisi2 true } else { dieksekusi jika kondisi1 dan kondisi2 false }
  • 40. Sintaks : - a adalah variabel. - break berfungsi untuk mencegah case berikutnya tereksekusi .. otomatis. switch (a) { case 1 : { aksi 1 } break; case 2 : { aksi 2 } break; case 3 : { aksi 2 } break; case 4 : { aksi 2 } break; ………………………………………………………………… default : { aksi default } }
  • 42.
  • 43. Prinsip kerja operator ternary adalah menyederhanakan bentuk "if..else" dimana setiap blok dari "if..else" hanya mempunyai 1 perintah, dan melakukan evaluasi ekspresi tersebut. Bentuk operator Ternary -> "?" Sintaks : namaVariabel = (kondisi)? Nilai1 : Nilai2; Contoh : Hasil :
  • 44.
  • 45. Pada Javascript terdapat beberapa macam pengulangan : for pengulangan sebanyak jumlah yang ditentukan. while pengulangan sampai bertemu kondisi “true”.
  • 46. Sintaks : for (var=startValue; var<=endValue; var=var+increment) { source code } Contoh : Hasil
  • 47. Sintaks For...In melakukan pengulangan sebanyak elemen array atau sebanyak properti dari suatu objek. Contoh : Hasil
  • 48. Perintah break akan menghentikan pengulangan dan akan mengeksekusi sintaks berikutnya setelah pengulangan. Contoh : Hasil
  • 49. Perintah continue akan melewati value pengulangan yang ditentukan, kemudian melanjutkan ke value berikutnya. Contoh : Hasil
  • 50. Sintaks : var=startValue; while (var<=endValue) { source code } Contoh : Hasil
  • 51.
  • 52. Pada Javascript terdapat beberapa macam PopUp Box : Alert Box Biasanya digunakan untuk memberikan informasi ke pengguna. Confirm Box Biasanya digunakan apabila aplikasi membutuhkan verifikasi atau persetujuan dari pengguna. Prompt Box Biasanya digunakan apabila aplikasi ingin pengguna memasukkan dahulu suatu nilai sebelum memasuki suatu halaman.
  • 53. Contoh : Hasil
  • 54. Penjelasan : var r = confirm(); Jika tombol “OK” yang ditekan, maka confirm akan mengisikan nilai “true” ke variabel konfirmasi, sebaliknya “false” jika tombol “Cancel” yang ditekan. Contoh : Hasil
  • 56.
  • 57. Sebuah fungsi berisi source code yang akan dieksekusi ketika dipanggil. Sebuah fungsi akan dieksekusi jika dipanggil nama fungsinya atau dieksekusi oleh suatu event. Sisipkan source code ke dalam fungsi untuk mencegah suatu source code langsung tereksekusi saat halaman terbuka. Fungsi dapat dipanggil dari mana saja di suatu halaman bahkan dari file JavaScript yang berbeda (external javascript), jika pada halaman tersebut file-file javascript sudah disisipkan. Fungsi bisa mengembalikan nilai ke pemanggilnya.
  • 58. Sintaks : function namaFungsi(parameter1, parameter2, ... parameterN) { ...... } Contoh : Hasil
  • 59. Contoh : Hasil
  • 60.
  • 61. Event adalah aksi yang dilakukan user terhadap elemen HTML yang dapat dideteksi oleh JavaScript. Setiap elemen di halaman web memiliki event tertentu yang dapat memicu JavaScript. Event didefinisikan dalam atribut tag HTML. Event digunakan dalam kombinasi dengan fungsi, dan fungsi tersebut tidak akan tereksekusi sebelum event tersebut terjadi.
  • 62.
  • 63.
  • 64. onLoad : - Event yang terjadi saat memasuki suatu halaman. Contoh : Hasil : <body onLoad=“alert(‘Coba onLoad’)”> </body> onUnload - Event yang terjadi saat keluar dari suatu halaman. Contoh : Hasil : <body onUnload="alert('Coba onUnLoad')"> </body>
  • 65. Contoh : Hasil
  • 66.
  • 67. JavaScript dapat digunakan untuk memvalidasi data dari form sebelum dikirimkan ke server. Contoh valid.js :
  • 69.
  • 70. Pada bahasa pemrograman Javascript, terdapat object yang dapat digunakan untuk merepresentasikan tanggal dan waktu, yaitu objek date. Untuk ‘menghidupkan’ sebuah instance date sintaks yang digunakan adalah sebagai berikut: var waktu = new Date(); Pada objek date, ada berbagai method yang dapat kita gunakan, yaitu sebagai berikut :
  • 71.
  • 72.
  • 73.
  • 75. Contoh jam.html : Hasil : Penjelasan Script : setTimout(“namaFungsi()”, delay); Fungsi setTimeout akan memanggil namaFungsi() bila waktu delay sudah terpenuhi. Satuan waktu delay : milisecond. 1000ms = 1s document.getElementById('jam').innerHTML="Hari "+x+", Pukul "+h+":"+m+":"+s; Berfungsi untuk mengakses element dengan Id = jam, dan menuliskan hari, jam, menit, detik kedalam element yang ber Id = jam.