Jumat, 06 Desember 2019

By sulaiman al hisyam Desember 06, 2019 No comments

MODUL HTML,CSS,DAN JAVASCRIPT

by : sulaiman al hisyam

.DAFTAR ISI.

1.HTML.

pengenalan html…………………………………………...1.

html basic………………………………………………….2.

struktur html dan penjelasannya…………………..……....3.

pegertian html……………………………………………..4.

2.CSS.

pengenalan css……………………………………………...1.

css basic…………………………………………………….2.

struktur css dan penjelasannya...…..………………………..3.

pegertian css………………………………………………...4.

3.JAVASCRIPT.

pengenalan javascript………………………………………..1.

javascript basic………………………………………………2.

struktur javascript dan penjelasannya..……………………....3.

pengertian javascript…………………………………………4.

PENGENALAN HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman webdengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).[1]

HTML BASIC

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

dan ini adalah html basicnya untuk membuat website.

dan juga untuk belajar seperti kalian yang belum bisa membuat dari sublime text.

jadi kalian bisa membuat website yang bagus dan keren.

STRUKTUR HTML DAN PENJELASANNYA

Struktur dasar HTML ini biasanya selalu ada dalam setiap file HTML. Penulisan struktur dasar HTML dasar juga harus berurutan atau mengikuti standar struktur HTML yang ada. Struktur dasar HTML terdiri beberapa tag-tag HTML, setiap tag HTML bisa memiliki tag pembuka dan penutup, tapi ada juga yang tidak memiliki tag penutup.

Contohnya tag yang memiliki tag pembuka dan penutup misalnya tag title, dibuka dengan <title>, dan di tutup dengan </title>. Perbedaannya antara tag pembuka dan tag penutup yaitu terdapat tanda “/” pada tag penutup (tanpa tanda kutip). Sedangakan contoh tag yang tidak memiliki tag penutup misalnya tag img yang ditulis dengan <img src=”gamabr.jpg”>. Tentunya kamu tidak perlu pusing terlebih dahulu apa kegunaan tag img tersebut, karena poinnya disini saya hanya ingin menyampaikan bahwa tag html bisa memiliki tag pembuka dan tag penutup, serta ada yang tidak memiliki tag penutup. Untuk penulisan lengkapnya dapat kamu lihat pada contoh struktur dasar HTML pada latihan di bawah.

Menulis Struktur dasar HTML

Untuk menulis kode-kode atau struktur dasar HTML kamu memerlukan sebuah aplikasi yaitu text editor, pada seri persiapan menulis HTML kita sudah menginstall Notepad++. Sekarang silakan buka Notepad++ tersebut, bagi yang belum mengetahui caranya silakan klik Windows (lihat gambar di bawah, terutama bagian yang ditandai kotak merah).

Kemudia ketik Notepad++ pada kolom pencarian. Setelah Notepad++ ketemu silakan diklik untuk membukanya, dan Notepad++ akan terbuka.

Sekarang coba tulis struktur dasar HTML berikut ini pada Notepad++ :

Latihan Menulis Struktur Dasar HTML

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<head>

<title>Cara Kode - Ini tampil di tabs bar / title bar</title>

</head>

<body>

Selamat belajar HTML, ini bagian yang tampil dalam browser

</body>

</html>

Setelah kamu selesai menulisnya jangan lupa untuk menyimpan latihan tersebut, dengan cara klik ikon disket (save) lebih tepatnya pada bagian yang saya tandai kotak merah pada gambar dibawah.

Kemudian simpan di dalam folder yang mudah kamu ingat, dan pada bagian file name silakan diisi sesuka kamu. Yang paling penting adalah pada bagian Save as type, silakan pilih Hyper Text Markup Language(*.html). Untuk lebih jelasnya kamu bisa lihat gambar dibawah ini :

Setelah file latihan disimpan silakan buka file tersebut pada browser, dengan cara klik Run > Launch in Chrome (karena saya menggunakan browser Chrome). Kamu bisa memilih browser yang lainnya sesuai keinginan kamu, namun yang perlu di ingat browser yang kamu pilih harus sudah terinstall di PC atau Laptop kamu.

Dan Ini adalah tampilan dari file latihan struktur dasar HTML yang kita buat.

Selain itu untuk membuka file latihan HTML ada beberapa cara, salah satunya adalah dengan cara klik ganda pada file latihan HTML tersebut.

Penjelasan Struktur Dasar HTML

Pada baris pertama yaitu <!DOCTYPE html> fungsinya untuk memberi tahu browser bahwa file tesebut adalah file HTML, atau untuk mendeklarasi dari dokument HTML.

Pada baris nomor 3 terdapat tag pembuka HTML yaitu <html>, dan pada baris nomor 9 terdapat tag penutup HTML yaitu </html>. Tag ini menjadi wadah dari semua tag-tag HTML yang akan ditulis, atau ketika kamu akan menulis tag HTML lain harus berada didalam tag HTML ini.

Pada baris ke 3 terdapat tag header yaitu <head>, dan penutupnya terdapat pada baris ke 5 yaitu </head>. Tag head menjadi tempat untuk menempatan informasi-informasi yang ada atau digunakan didalam file html tersebut, misalnya seperti title, meta, script, dan lain sebagainya.

Pada baris nomor 4 terdapat tag title yaitu <title>Cara Kode – Ini tampil di tab bar / title bar</title>. Tag title ini akan tampil pada bagian tab bar atau title bar pada browser, contohnya seperti gambar dibawah ini pada bagian yang ditandai kotak merah :

Pada baris ke 6 terdapat tag body yaitu <body>, dan penutupnya terletak pada baris ke 8 yaitu </body>. Dalam tag body ini dapat digambarkan sebagai tubuh dalam HTML, dalam tag body ini akan ditampilkan dalam halaman browser.

Dan pada baris nomor 7 terdapat tulisan “Selamat belajar HTML, ini bagian yang tampil dalam browser”, ini merupakan tulisan bisa (tanpa tag) dan tampil di browser sebagai text biasa juga.

Jika diperhatikan dari file latihan HTML tersebut dapat dilihat setiap sepasang tag yang ada di dalamnya agak menjorok ke kanan, itu bertujuan supaya kode HTML kita terlihat lebih rapi dan mudah dibaca

PENGERTIAN HTML

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.

HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML).

Sekarang ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di Jenewa)

HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke web browser. Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web.

Fungsi HTML (HyperText Markup Language)

HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

Membuat halaman web.

Menampilkan berbagai informasi di dalam sebuah browser Internet.

Membuat link men

PENGENALAN CSS

CSS singkatan dari Cascading Style Sheets. Secara bahasa berarti lembaran gaya yang mengalir ke bawah. Kamu akan kebayang dengan istilah ini setelah nanti tau penggunaan dan bentuknya. Secara istilah, CSS adalah bahasa penulisan yang digunakan untuk mendeskripsikan penampilan sebuah dokumen markup.CSS selalu digunakan bersamaan dengan HTML, meskipun kita dapat juga menggunakannya untuk mengatur style dokumen markup lain seperti XML, SVG dan XUL. Agar lebih terbayang, coba perhatikan tiga dokumen HTML di bawah ini dan lihat perbedaan tampilannya.

Dokumen #1:

Dokumen #2:

Dokumen #3:

Ketiga dokumen HTML di atas isinya sama. Tapi dokumen yang kedua dan ketiga dilengkapi dengan CSS sedangkan yang pertama hanya dokumen HTML saja (tanpa CSS). Untuk melihat bagaimana tampilan penulisan CSS, klik tab CSS yang ada di bagian atas dokumen kedua dan ketiga.

Mengapa Harus Menggunakan CSS?

HTML dirancang tidak ditujukan untuk mendesain sebuah halaman web, tapi hanya untuk menampilkan konten saja. Pada saat HTML beranjak ke versi 3.2, diperkenalkan tag <font> yang digunakan untuk mengatur tampilan sebuah teks, seperti jenis font yang digunakan, warna, dan ukuran. Tapi dengan adanya tag ini, malah jadi menyulitkan proses development, karena tag ini mesti disematkan di banyak halaman untuk mendapatkan hasil style yang sama. Bayangkan ketika kita sudah memiliki banyak halaman web, belasan atau puluhan, lalu kemudian hendak mengedit beberapa style saja misalkan ukuran font dan ingin semua halaman mendapatkan perubahan yang konsisten. Maka kita harus memperbaharui tag tersebut di setiap halaman satu per satu!

Untuk itu, dibuatlah CSS, yang memisahkan style dari halaman web, sehingga antara konten pada HTML dan desain tampilan pada dokumen CSS dapat dikerjakan di dua tempat berbeda. Dengan kata lain, dokumen HTML cukup berisi konten saja, dan satu dokumen CSS dapat disematkan pada setiap dokumen HTML agar semuanya menampilkan style yang sama dan konsisten.

Penerapan CSS Pada HTML

CSS biasanya disimpan di dalam sebuah file berekstensi .css dan disematkan di dalam dokumen HTML untuk memberikan style pada halaman tersebut. Meski demikian, kita tetap dapat menambahkan sintaks CSS langsung di dalam dokumen HTML, di dalam tag <style></style> untuk mengakomodir penerapan style yang hanya digunakan di dalam dokumen tersebut. Kita juga dapat menyematkan sintaks CSS langsung di dalam atribut style pada suatu tag HTML untuk menerapkan style yang hanya digunakan pada tag itu saja. Berikut adalah contoh penerapan ketiga mode tersebut:

Dokumen yang disematkan file style.css:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

<body>

    <h1>Selamat Datang, Programmer!</h1>

    <p>Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

Dokumen dengan CSS di dalamnya:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <style>

            h1 { text-align: center; color: lightsteelblue; }

        </style>

    </head>

<body>

    <h1>Selamat Datang, Programmer!</h1>

    <p>Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

Dokumen dengan CSS pada tag:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

    </head>

<body>

    <h1 style="text-align:center;color:lightsteelblue;">Selamat Datang, Programmer!</h1>

    <p>Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

Sintaks CSS

Sekarang mari kita perhatikan sintaks penulisan kode CSS:

h1 { text-align: center; color: red; }

Pada contoh kode di atas:

h1 -> selector

{ text-align: center; color: red; } -> deklarasi style

text-align -> property

center -> value

color -> property

red-> value

Selector adalah bagian CSS untuk merujuk elemen HTML yang ingin dikenakan style. Ada beberapa jenis selector yang dapat kita gunakan untuk memudahkan pekerjaan styling kita pada CSS, seperti selector element, selector class, dan selector id.

Pada kode di atas elemen yang dirujuk oleh kode CSS kita adalah <h1>. Elemen <h1> ini kita buat supaya tulisannya rata tengah, maka kita beri property text-align dengan value center. Property dan value CSS dipisahkan dengan tanda titik dua (:). Kita dapat memberikan lebih dari satu property style dengan memisahkan antar property dengan tanda titik koma (;). property dan value disimpan di dalam kurung kurawal { dan }.

Selector Element

Selector ini mengacu elemen HTML berdasarkan nama elemennya. Pada contoh berikut:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <style>

            h1 { color: red; }

            p { color: blue; }

        </style>

    </head>

<body>

    <h1>Welcome</h1>

    <h1>Selamat Datang, Programmer!</h1>

    <p>Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

itu berarti kita menerapkan style color:red pada semua elemen <h1> yang ada di dokumen dan menerapkan style color:blue pada semua elemen <p>.

Selector class

Selector ini mengacu elemen berdasarkan nama classnya. Nama class pada elemen diacu dengan nilai atribut class diawali oleh tanda titik (.). Pada contoh berikut:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <style>

            .merah { color: red; }

        </style>

    </head>

<body>

    <h1>Welcome</h1>

    <h1 class="merah">Selamat Datang, Programmer!</h1>

    <p class="merah">Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

pada dokumen di atas semua elemen yang memiliki atribut class merah yakni elemen <h1> yang kedua dan <p> akan berwarna merah. Elemen <h1> yang pertama tidak dikenai style karena tidak memiliki atribut class="merah".

Contoh lain:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <style>

            h1.merah { color:red; }

        </style>

    </head>

<body>

    <h1>Welcome!</h1>

    <h1 class="merah">Selamat Datang, Programmer!</h1>

    <p class="merah">Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

pada dokumen di atas, elemen yang teksnya berwarna merah hanyalah elemen <h1> yang kedua karena selector h1.merah berarti hanya memilih elemen <h1>yang memiliki atribut class="merah" saja. Elemen <p> juga tidak dikenai style meskipun memiliki atribut class merah.

Bandingkan contoh di atas dengan contoh di bawah ini:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <style>

            h1 .merah { color:red; }

        </style>

    </head>

<body>

    <h1>Welcome!</h1>

    <h1 class="merah">Selamat Datang, <span class="merah">Programmer</span> !</h1>

    <p class="merah">Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

Pada contoh terakhir ini, teks yang berwarna merah hanya yang bertuliskan Programmer saja. Perhatikan selector pada CSS di atas, terdapat spasi antara h1dan .merah. Spasi antar selector berarti mengacu pada elemen turunannya. h1 .merah berarti memilih elemen berclass merah yang ada di dalam elemen h1.

Selector id

Selector ini mengacu elemen berdasarkan nama idnya. Nama id pada elemen diacu dengan nilai atribut id diawali oleh tanda pagar (#). Pada contoh berikut:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <style>

            #judul-utama { color:red; }

            #subjudul { color:blue; }

        </style>

    </head>

<body>

    <h1 id="judul-utama">Welcome!</h1>

    <h2 id="subjudul">Selamat Datang, Programmer!</h2>

    <p>Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

elemen <h1> akan berwarna merah dan <h2> akan berwarna biru.

Perhatikan lagi contoh ini:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <style>

            #hijau { color:green; }

        </style>

    </head>

<body>

    <h1 id="hijau">Welcome!</h1>

    <h1 id="hijau">Selamat Datang, Programmer!</h1>

    <p id="hijau">Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

Pada contoh di atas, hanya elemen <h1> yang pertama saja yang berwarna hijau. Berbeda dengan selector class, selector id bersifat unik, artinya mesti hanya ada satu id spesifik dalam sebuah dokumen. Apabila ada dua atau lebih elemen yang ber-id sama seperti contoh di atas, maka hanya elemen yang ditemukan pertama kali (dari atas) pada dokumen saja yang dikenai style.

Untuk mengenakan style ke banyak elemen, gunakanlah class.

Menggabung Selector

Kita dapat mengenakan style yang sama kepada berbagai elemen, dengan memisah antar selector dengan tanda koma (,).

<!DOCTYPE html>

<html>

    <head>

        <title>HTML dengan CSS</title>

        <style>

            h1, p { color:#333; text-align:center; }

        </style>

    </head>

<body>

    <h1>Selamat Datang, Programmer!</h1>

    <p>Selamat belajar pemrograman di CodePolitan</p>

</body>

</html>

Pada contoh di atas, semua elemen <h1> dan <p> pada dokumen akan dikenai style yang sama.

CSS BASIC

CSS (Cascading Style Sheets) adalah apa yang membuat halaman web terlihat bagus dan rapi. Ini adalah bagian penting dari pengembangan web modern, dan keterampilan yang harus dimiliki untuk setiap perancang dan pengembang web.

Di artikel ini, saya akan memberi Anda pengantar cepat untuk membantu Anda memulai dengan CSS.

Saya berasumsi bahwa Anda memiliki pemahaman dasar tentang HTML, tetapi selain itu tidak ada prasyarat untuk tutorial ini.

Mulai

Mari kita mulai dengan mempelajari bagaimana kita dapat memasukkan CSS ke dalam proyek kita. Biasanya ada tiga cara kita melakukan itu.

1. CSS sebaris

Pertama, kami dapat memasukkan CSS secara langsung ke elemen HTML kami. Untuk ini, kami menggunakan atribut style dan kemudian kami menyediakan properti untuk itu.

<h1 style = "color: blue"> Halo dunia! </h1>

Di sini kami memberikannya properti warna, dan mengatur nilainya menjadi biru, yang menghasilkan sebagai berikut:

Kami juga dapat mengatur beberapa properti di dalam tag gaya jika kami mau. Namun, saya tidak ingin melanjutkan jalan ini, karena segala sesuatunya mulai berantakan jika HTML kita berantakan dengan banyak CSS di dalamnya.

Inilah mengapa metode kedua untuk memasukkan CSS diperkenalkan.

2. CSS internal

Cara lain untuk memasukkan CSS adalah menggunakan elemen style di bagian kepala dokumen HTML. Ini disebut styling internal.

<head>

   <style>

       h1 {

           color: blue;

       }

   </style>

</head>

Dalam elemen style, kami dapat memberikan gaya ke elemen HTML kami dengan memilih elemen dan memberikan atribut gaya. Sama seperti kita menerapkan properti perkebunan ke elemen h1 di atas.

3. CSS eksternal

Cara ketiga dan yang paling direkomendasikan untuk memasukkan CSS adalah menggunakan stylesheet eksternal. Kami membuat stylesheet dengan ekstensi .css dan menyertakan tautannya dalam dokumen HTML, seperti ini:

<head>

   <link rel="stylesheet" href="style.css">

</head>

Dalam kode di atas, kami telah menyertakan tautan file style.css menggunakan tautan. Kami kemudian menulis semua CSS kami dalam stylesheet terpisah yang disebut style.css sehingga mudah dikelola.

//style.css

h1 {

  color: blue;

}

Lembar gaya ini juga dapat diimpor ke file HTML lain, jadi ini bagus untuk digunakan kembali.

Pemilih CSS

Seperti yang kita bahas sebelumnya, CSS adalah bahasa desain yang digunakan untuk menata elemen HTML. Dan untuk elemen gaya, pertama-tama Anda harus memilihnya. Anda telah melihat sekilas tentang bagaimana ini bekerja, tetapi mari selami lebih dalam pada pemilih CSS, dan lihat tiga cara berbeda Anda dapat memilih elemen HTML.

1. Elemen

Cara pertama untuk memilih elemen HTML adalah dengan hanya menggunakan nama, yang kami lakukan di atas. Mari kita lihat cara kerjanya:

h1 {

   font-size: 20px;

}

p {

   color: green;

}

div {

   margin: 10px;

}

Contoh di atas hampir jelas. Kami memilih elemen yang berbeda seperti h1, p, div dan memberi mereka atribut gaya yang berbeda. Ukuran font mengontrol ukuran teks, warna mengatur warna teks, dan spasi margin di sekitar elemen.

2. Kelas

Cara lain untuk memilih elemen HTML adalah dengan menggunakan atribut class. Dalam HTML, kita dapat menetapkan kelas yang berbeda untuk elemen kita. Setiap elemen dapat memiliki beberapa kelas, dan setiap kelas juga dapat diterapkan ke beberapa elemen juga.

Mari kita lihat dalam aksi:

<div class='container'>

   <h1> This is heading </h1>

</div>

...

.container {

   margin: 10px;

}

Dalam kode di atas, kami telah menetapkan kelas kontainer ke elemen div. Dalam stylesheet, kami memilih kelas kami menggunakan format .className dan memberinya margin 10px.

3. ID

Seperti kelas, kami juga dapat menggunakan ID untuk memilih elemen HTML dan menerapkan gaya pada mereka. Satu-satunya perbedaan antara kelas dan ID adalah bahwa satu ID dapat ditetapkan hanya untuk satu elemen HTML.

<div>

   <p id='para1'> This is a paragraph </p>

</div>

...

#para1 {

   color: green;

   font-size: 16px;

}

Contoh di atas menampilkan bagaimana kami menetapkan ID ke elemen paragraf dan kemudian menggunakan pemilih ID di stylesheet untuk memilih paragraf dan menerapkan gaya itu.

Fon & Warna

CSS memberi kami ratusan opsi untuk bermain-main dengan font dan warna dan membuat elemen HTML kami terlihat cantik. Kami dapat memilih dari dua jenis nama keluarga font:

1. Generic Family: sekelompok font font dengan tampilan yang mirip (seperti 'Serif' atau 'Monospace')

2. Keluarga Font: keluarga font tertentu (seperti ‘Times New Roman’ atau ‘Arial’)

Untuk warna, kita dapat menggunakan nama warna yang telah ditentukan, atau nilai RGB, HEX, HSL, RGBA, HSLA.

<div class='container'>

   <h1 class='heading1'>

       CSS is Coooooool!!!!

   </h1>

</div>

.............

.container {

   width: 500px;

   height: 100px;

   background-color: lightcyan;

   text-align: center;

}

.heading1 {

   font-family: 'Courier New';

   color: tomato;

}

Seperti yang Anda lihat pada contoh di atas, kami memiliki elemen div dengan kelas wadah. Di dalam div ini, ada tag h1 dengan beberapa teks di dalamnya.

Dalam stylesheet, kami memilih kelas wadah dan mengatur lebar, tinggi, warna latar belakang, dan perataan teks.

Akhirnya kita memilih kelas .heading1 - yang diterapkan pada tag h1 - dan memberikannya atribut font-family dan warna.

STRUKTUR CSS DAN PENJELASANNYA

Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

image source: www.cs1893.com

baca juga:

Pengertian Sinkronisasi Pada Sistem Operasi Komputer

Baca juga:

Pengertian, Tipe, dan Fungsi CSS Beserta Contoh

Cara Instal XAMPP Server di Windows 32 dan 64 bit Terbaru

Dengan begitu CSS dapat disimpulkan sebagai berikut:

Suatu style yang digunakan untuk menampilkan elemen HTML.

Dapat mengatur dan mengontrol tampilan halaman web serta memisahkan antara tampilan dan konten halaman web.

Bukanlah suatu keharusan dalam membuat web, akan tetapi menggunakan CSS akan membuat tampilan web menjadi lebih menarik.

Struktur CSS

Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan blue adalah value.

Perintah CSS terdiri atas 2 komponen, yakni Selector & Declaration.

Selector berfungsi untuk memberi tahu browser bahwa pada elemen mana rule CSS diterapkan.

Selector dapat berupa elemen HTML, selector class atau selector id.

Declaration merupakan aturan CSS yang diterapkan, terdiri atas property dan value.

Metode Penulisan CSS

Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.

Contoh penulisan CSS dengan metode Inline Style Sheet:

Embedded Style Sheet (Internal)

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh penggunaan CSS dengan metode Embedded Style Sheet internal :

Embedded Style Sheet (Eksternal)

CSS didefinisikan terlebih dalam sebuah file (.css). Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya nama file di panggil dengan syntax html pada file HTML.

Contoh penggunaan CSS dengan metode Embedded Style Sheet eksternal :

Syntax CSS

Basic

CSS Syntax Standard
body {color:black}

Jika value lebih dari satu kata gunakan tanda kutip ""
p {font-family:"sans serif"}

Jika lebih dari satu properti untuk sebuah selektor
p {text-align:center;color:red}

atau, agar lebih mudah dilihat bisa ditulis seperti ini:
p { text-align:center; color:black; font-family:arial }

Grouping

Untuk mempersingkat penulisan, CSS juga memungkinkan untuk melakukan grouping pada selector‐selector yang memiliki property yang sama. contoh:

h1 { color:green; }

h3 { color:green; }

h5 { color:green; }

p { color:green; }

Di Group menjadi:

h1,h3,h5,p { color:green; }

CSS Class Selector

Berfungsi untuk memberikan style yang berbeda pada sebuah elemen HTML

Diawali dengan menambahkan tanda '.' (titik) pada file css

Pada file HTML ditambahkan property 'class' untuk memanggil selector tersebut.

Satu elemen HTML dapat memanggil lebih dari satu class

contoh:

style.css

.merah {color:red;}

.right {text-align:right;}

.left {text-align:left;}

contoh.html

CSS ID Selector

Berfungsi juga untuk memberikan style yang berbeda pada sebuah elemen HTML

Diawali dengan menambahkan tanda ‘#’ pada file css

Pada file HTML ditambahkan property ‘id‘ untuk memanggil selector tersebut.

Penulisan id tidak boleh diawali dengan angka

Satu elemen HTML hanya boleh menggunakan satu id

contoh:

style.css

#merah {color:red;}

#right {text-align:right;}

#left {text-align:left;}

contoh.html

Selector CSS popular

CSS Dimension

Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML.

Contoh:

Nilai/ value:

CSS Box Model

Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak.

Digunakan pada saat kita akan merancang tampilan sebuah website.

Pada dasarnya berfungsi sebagai tempat yang membungkusisidarielemen‐elemen HTML.

Tag yang biasanya digunakan untuk merancang tampilan adalah <div>, walaupun tag lain juga bisa menerapkan box model.

Terdiriatas4 bagian: Margin, Border, Padding, Content.

Contoh margin:

Contoh padding:

CSS Float

Berfungsi untuk memaksa sebuah elemen menjadi berada di kiri atau dikanan halaman.

Elemen yang berada setelah elemen yang diberi float akan terpengaruh fungsi float tersebut.

Elemen yang berada sebelum elemen yang diberi float tidak akan terpengaruh.

Property:
float:left;
float:right;

Untuk me‐nonaktifkan fungsi float gunakan:
clear:both;

Biasanya digunakan untuk membuat gallery.

LATIHAN CSS

1. STYLE DALAM TAG TUNGGAL

2. STYLE DALAM 1 DOKUMEN HTML

3. STYLE DALAM FILE EKSTERNAL

4. LATIHAN: Buat form menggunakan CSS sehingga memiliki tampilan seperti berikut:

PENGERTIAN CSS*

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.

CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.

Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

PENGENALAN JAVASCRIPT

JavaScript adalah bahasa pemograman yang sangat matang dan dapat dikolaborasikan dengan dokumen HTML dan digunakan untuk membuat website yang interaktif. JavaScript diciptakan oleh Brendan Eich yang juga co-founder dari Mozilla project, Mozilla Foundation dan Mozilla Corporation.

Anda dapat melakukan banyak hal dengan JavaScript. Anda akan memulai dari fitur sederhana seperti menentukan layout, membuat respon ketika mengklik button, caousels, dan gallery gambar. Namun pada akhirnya ketika anda sudah mendapat banyak pengetahuan anda juga akan dapat membuat game, animasi 2D dan 3D, aplikasi yang berhubungan dengan database, dan masih banyak lagi.

JavaScript sendiri adalah bahasa yang cukup komplek namun sangat fleksibel, dan banyak Developer (Programmer) telah menyediakan tool yang berdiri diatas core JavaScript agar anda dapat menggunakan fungsi - fungsi ekstra, tool tersebut sebagai berikut :

Application Programming Interfaces (APIs) dibangun pada web browser agar memungkinkan anda melakukan apapun dari dinamik dokumen HTML dan set CSS yang anda buat, untuk menangkap dan memodifikasi video dari web cam, atau membuat animasi 3D dan sampel audio.

API pihak ketiga menyediakan akses bagi Developer untuk menghubungkan aplikasi mereka pada website atau aplikasi lain layaknya facebook dan twitter. Pernahkan anda login soundcloud dengan facebook ? itu API pihak ketiga.

Frameworks pihak ketiga dan libraries dapat digabungkan pada HTML sehingga memungkinkan Developer membangun website atau aplikasi dengan cepat.

JAVASCRIPT BASIC

ini codingngannya

ini tampilannya yang belum di tekan

BEFORE

AFTER

jadi ini adalah javascript kalian bisa membuat ini di website atau di applikasi.

STRUKTUR JAVASCRIPT DAN PENJALASANNYA

1. Menampilkan data pada kotak dialog menggunakan fungsi window.alert()

Fungsi window.alert() pada JavaScript berfungsi menampilkan data dalam bentuk “peringatan” (alert) berupa kotak dialog yang akan muncul pada web browser, tampilan kotak dialog biasanya berbeda pada tiap-tiap web browser, beberapa web browser juga secara default memblokir fungsi JavaScript karena berbagai alasan terutama alasan keamanan (misalnya web browser Internet Explorer).

Contoh penggunaan:

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <script>

05. window.alert('Selamat Datang di DosenIT.');

06. </script>

07. </body>

08. </html>

2. Menampilkan data pada halaman web menggunakan fungsi document.write()

Fungsi document.write() pada JavaScript berfungsi menampilkan data langsung pada halaman web (bukan pada kotak dialog layaknya fungsi window.alert()), fungsi ini dapat di gunakan untuk menampilkan data langsung saat halaman web selesai di muat (loaded) atau di eksekusi pada event tertentu misalnya saat tombol di klik.

Contoh penggunaan:

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <script>

05. document.write('Selamat Datang di DosenIT.');

06. </script>

07. </body>

08. </html>

Kode di bawah ini akan menampilkan tombol dengan label “Selamat Datang”, ketika di klik maka akan tampil teks “Selamat Datang di DosenIT.”.

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <button onclick="document.write('Selamat Datang di DosenIT.')">Selamat Datang</button>

05. </body>

06. </html>

3. Menampilkan data pada elemen menggunakan fungsi innerHTML

Fungsi innerHTML pada JavaScript berfungsi untuk mendefinisikan konten HTML, untuk menampilkan data pada elemen tertentu berdasarkan “id” elemen terebut, innerHTML menggunakan (salah satunya) metode “document.getElementById(id)”, sehingga dapat dapat di tampilkan pada elemen berdasarkan “id” sebagai salah satu pengenalnya, JavaScript akan mencari elemen pada suatu dokumen atau suatu halaman web berdasarkan “id” sebagai parameter pencarian.

Contoh penggunaan:

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <p id="demo"></p>

05. <script>

06. document.getElementById("demo").innerHTML = 'Selamat Datang di DosenIT.';

07. </script>

08. </body>

09. </html>

4. Menampilkan data pada console menggunakan fungsi console.log()

Fungsi console.log() pada JavaScript berfungsi untuk menampilkan data pada console, data tidak akan tampil pada kotak dialog, pada halaman web, atau pada elemen melainkan pada fitur console di web browser, console adalah salah satu developer tool yang terdapat pada semua web browser (kecuali web browser tertentu) yang di sediakan untuk tujuan debugging, tekan F12 untuk membuka fitur console pada web browser yang Anda gunakan.

Contoh penggunaan:

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <script>

05. console.log('Selamat Datang di DosenIT.');

06. </script>

07. </body>

08. </html>

5. Mendeklarasikan variabel dalam JavaScript

Variabel adalah sebuah ‘wadah’ untuk menampung ‘nilai’ baik berupa nilai yang di masukkan oleh Pengguna atau nilai hasil pemrosesan, aturan pembuatan (pendeklarasian) variabel pada JavaScript sebenarnya hampir sama dengan aturan pembuatan variabel pada bahasa pemrograman lain, untuk lebih jelasnya berikut Saya sajikan aturan penulisan variabel pada JavaScript.

Nama variabel bisa berupa huruf, angka, garis bawah ( underscore, _ ), dan tanda dollar ( $ ).

Nama variabel harus di awali dengan huruf, tanda dollar atau garis bawah, tidak boleh diawali dengan angka.

Nama variabel bersifat case sensitive ( variabel ‘DosenIT’ dengan ‘dosenit’ di anggap variabel yang berbeda ).

Nama variabel tidak boleh sama dengan keyword ( salah satunya ‘break’, ‘continue’, ‘var’ dan lain sebagainya ).

Contoh penggunaan:

Kode di bawah ini memuat nilai dari variabel ‘harga1’ dan nilai dari variabel ‘harga2’ kemudian menjumlahkan kedua nilai tersebut ( dengan operator aritmatika ‘penambahan’ atau ‘penjumlahan’ + ) dan menyimpan nilai hasil penjumlahan tersebut ke dalam variabel ‘total’, terakhir menampilkan nilai dari variabel ‘total’ sebagai ‘alert’ (lihat penjelasan mengenai fungsi ‘window.alert()’).

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <script>

05. var harga1 = 1000;

06. var harga2 = 2000;

07. var total = harga1 + harga2;

08. window.alert(total);

09. </script>

10. </body>

11. </html>

6. Menentukan kapan JavaScript harus ‘bereaksi’ dengan event.

Pada bagian atas ( poin 2, penggunaan fungsi document.write() ) telah Saya berikan sedikit contoh penggunaan event ‘onClick’ pada elemen ‘button’, dengan begitu statement JavaScript baru akan di proses atau di eksekusi saat tombol di klik, perhatikan potongan kode berikut ( Saya ambil dari contoh penggunaan fungsi windows.write() pada poin 2 ).

<button onclick="document.write('Selamat Datang di DosenIT.')">Selamat Datang</button>

onkeydown

Event JavaScript ‘onkeydown’ dapat di gunakan untuk menjalankan statement JavaScript saat pengguna menekan tombol (apapun) pada keyboard, cocok di terapkan pada element input teks pada form untuk validasi input, penggunaan event ‘onkeydown’ secara sederhana Saya contohkan dalam baris kode berikut.

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <p id='teks_output'></p>

05. <input id='teks_input' type='text' onkeydown="document.getElementById('teks_output').innerHTML = document.getElementById('teks_input').value">

06. </body>

07. </html>

onload

Event JavaScript ‘onload’ dapat di gunakan untuk menjalankan statement JavaScript saat halaman web selesai di muat ( loaded ) oleh web browser, jadi apabila halaman web masih dalam kondisi memuat ( loading ) konten, statement JavaScript tidak akan di proses, contoh sederhananya adalah sebagai berikut.

01. <!DOCTYPE html>

02. <html>

03. <body onload="document.write('Selamat Datang di DosenIT.')">

04.

05. </body>

06. </html>

onclick

Event JavaScript ‘onclick’ dapat di gunakan untuk menjalankan statement JavaScript saat pengguna mengklik suatu elemen HTML, event ini cocok di implementasikan pada tombol untuk menjalankan statement tertentu, contoh penggunaan event ‘onclick’ pada elemen ‘button’ dapat di lihat pada poin 2 di atas ( bagian fungsi document.write() ).

onchange

Event JavaScript ‘onchange’ dapat di gunakan untuk menjalankan statement JavaScript saat suatu elemen HTML berubah, event ini cocok di gunakan pada elemen ‘select – option’ yang memiliki banyak nilai ( ‘value’ ), contoh sederhana penggunaan event ‘onchange’ pada elemen ‘select – option’ adalah sebagai berikut.

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <p id='teks_output'></p>

05. <select id='teks_input' onchange="document.getElementById('teks_output').innerHTML = document.getElementById('teks_input').value">

06. <option>Ahad</option>

07. <option>Senin</option>

08. <option>Selasa</option>

09. <option>Rabu</option>

10. <option>Kamis</option>

11. <option>Jumat</option>

12. <option>Sabtu</option>

13. </select>

14. </body>

15. </html>

7. Memanipulasi teks dengan variabel bertipe data string

Variabel dengan tipe data string di gunakan untuk menyimpan data berupa nilai teks, semua bahasa pemrograman mendukung tipe data string hanya saja aturan pendeklarasian variabel sedikit berbeda untuk beberapa bahasa pemrograman, pendeklarasian variabel dengan tipe data string pada JavaScript mengikuti aturan berikut.

Nilai di tulis dengan di apit dengan tanda kutip ( ” ) atau tanpa petik ( ‘ )

var domain = ” DosenIT “;

var domain = ‘ DosenIT ‘;

Sepasang tanda petik ( ‘…’ ) atau sepasang tanda kutip ( “…” ) dalam nilai string

var hari = ” Hari Miggu disebut juga hari ‘Ahad’ “;

var hari = ‘ Hari Miggu disebut juga hari “Ahad” ‘;

Penggunaan karakter khusus

Karena string harus di tulis di antara dua tanpa kutip ( atau petik ), maka penulisan string seperti di bawah ini akan salah di mengerti oleh JavaScript:

var hari = " Hari Miggu disebut juga hari "Ahad" ";

String di atas akan terpotong hanya sampai ” Hari Miggu disebut juga hari ” saja, untuk mengatasi hal tersebut maka JavaScript menyediakan kode yang mewakili karakter khusus tersebut, untuk contoh string di atas di konversi menjadi:

var hari = " Hari Miggu disebut juga hari \"Ahad\" ";

Untuk lebih lengkapnya, berikut adalah daftar kode JavaScript yang mewakili karakter khusus:

Kode

Karakter yang di wakili

\'

Tanda petik ( ‘ )

\”

Tanda kutip ( ” )

\\

Garis miring terbalik ( \ )

\n

Baris baru ( new line )

\r

Carriage return

\t

Tab

\b

Backspace

\f

Form feed

Memotong string dan mendapatkan bagian tertentu dengan metode slice()

Fungsi slice() dapat digunakan untuk mengekstrak bagian dari string dan mengembalikan bagian yang di ekstraksi tersebut ke dalam string baru. Metode ini mengambil 2 parameter yaitu indeks posisi awal dan index posisi akhir, berikut adalah baris kode sederhana penggunaan fungsi slice().

01. <!DOCTYPE html>

02. <html>

03. <body>

05. <button onclick="myFunction()">Klik</button>

06. <p id="demo"></p>

07. <script>

08. function myFunction() {

09. var str = "Jeruk, Pisang, Apel";

10. var res = str.slice(7,13);

11. document.getElementById("demo").innerHTML = res;

12. }

13. </script>

14. </body>

15. </html>

Baris kode di atas akan menampilkan sebuah tombol dengan label “Klik”, tombol tersebut di atur agar menjalankan fungsi “myFunction()” saat di klik ( baris ke – 5 ), variabel “str” dan “res” di deklarasikan dalam fungsi “myFunction()” (baris ke – 9 dan ke – 10), variabel “res” berisi nilai yang di potong dari variabel “str” dari posisi indeks ke – 7 ( huruf “P” ) hingga posisi indeks ke – 13 ( karakter “,”, artinya hanya sampai huruf “g” ), sehingga akan muncul string “Pisang”.

Mengganti kata dalam string dengan metode replace()

Fungsi replace() dapat digunakan untuk mengganti kata dalam string dengan kata yang lain, fungsi ini cocok di gunakan untuk filter kata-kata yang di larang dengan menentukan kata yang akan di cari serta menentukan kata untuk mengganti kata tersebut, berikut adalah baris kode sederhana penggunaan fungsi replace().

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <p>Mengganti kata "terlarang" dengan kata "" pada paragraf di bawah:</p>

05. <button onclick="myFunction()">Klik</button>

06. <p id="demo">Paragraf ini berisi kata terlarang!</p>

07. <script>

08. function myFunction() {

09. var str = document.getElementById("demo").innerHTML;

10. var txt = str.replace("terlarang","");

11. document.getElementById("demo").innerHTML = txt;

12. }

13. </script>

14. </body>

15. </html>

Mengubah string menjadi huruf kapital atau huruf kecil dengan fungsi toUpperCase() atau toLowerCase().

Fungsi toUpperCase() dan toLowerCase() di gunakan untuk mengkonversi string menjadi huruf kapital semua atau huruf kecil semua, berguna untuk penyeragaman data, misalnya data ‘nama’ di konversi menjadi huruf kapital semua agar semua data yang di input seragam, hal tersebut guna mengantisipasi kecenderungan pengguna yang menginputkan string tanpa standar, contoh baris kode sederhananya adalah sebagai berikut.

01. <!DOCTYPE html>

02. <html>

03. <body>

04. <p>Mengubah string menjadi huruf kapital:</p>

05. <button onclick="myFunction()">Klik</button>

06. <p id="demo">Selamat Datang di DosenIT.</p>

07. <script>

08. function myFunction() {

09. var text = document.getElementById("demo").innerHTML;

10. document.getElementById("demo").innerHTML = text.toUpperCase();

11. }

12. </script>

13. </body>

14. </html>

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.

Fungsi JavaScript Dalam Pemograman Web

JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server.

Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web, lalu men-klik tombol submit, menunggu sekitar 20 detik untuk website memproses isian form tersebut, dan mendapati halaman yang menyatakan bahwa terdapat kolom form yang masih belum diisi.

Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk mengecek apakah seluruh form telah terisi atau tidak, bisa dipindahkan dari web server ke dalam web browser.

Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form, namun untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan JavaScript.

Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web browser yang digunakan oleh pengunjung situs, user sepenuhnya dapat mengontrol eksekusi JavaScript. Hampir semua web browser menyediakan fasilitas untuk mematikan JavaScript, atau bahkan mengubah kode JavaScript yang ada. Sehingga kita tidak bisa bergantung sepenuhnya kepada JavaScript.

kata pengantar

semoga yang baca mandapatkan hidayah yang liebih baik dari yang lain

terimakaih sudah membaca modul saya terakhir kata

wassalamualaikum warohmatullahi wabarokatu.