#12 Intermediate Web | Web Programming Tutorial

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, mengapa tidak lagi bereada di level begginer? karena mulai sekrang kita akan mulai untuk memasuki materi CSS. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Untuk penjelasannya, saya akan menjelaskan materi tentang CSS dari paling dasar, Yang pada postingan ini saya akan menjelaskan seluk beluk tentang css multimeda. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 5 bab yang akan kita pelajari, yaitu:

1. Sejarah dan Pengertian Javascript
2. Perbedaan JS dan Java
3. Penulisan code di JS
4. Variabel dan Tipe Data
5. Quiz

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Sejarah dan Pengertian Javascript
Penjelasannya...

Sejarah awal mula javascript dimulai pada tahun 1994, pada saat itu perkembangan internet dan website sedang mengalami perkembangan yang sangat pesat, dan pembuatan website pada saat itu umumnya menggunakan bahasa pemrograman PERL. Pemrograman PERL termasuk kedalam bahasa pemrograman Server Side, dimana semua proses hanya bisa dilakukan di web server.

Karena pada saat itu rata-rata koneksi internet yang terbatas, dan setiap instruksi dari user harus dikirim terlebih dahulu kepada web server, kemudian baru ditampilkan lagi ke dalam web browser. Hal tersebut dipandang kurang efesien, karena cukup memakan waktu.

Hingga pada tahun 1995, Seorang programmer Netscape yang bernama Brendan Eich, mulai mengembangkan sebuah bahasa pemrograman script yang bernama Mocha. Pada saat itu Netscape merupakan sebuah perusahaan software yang ternama yang mengembangkan web browser Netscape Navigator.

Bahasa pemrograman Mocha pada saat itu bisa digunakan dalam 2 sisi, yaitu disisi client (Client Side) dan Server (Server Side). Perkembangan selanjutnya nama Mocha dirubah menjadi Livescript dan Liveware, dimana Livescript merupakan bahasa pemrograman untuk Client Side, sedangkan Liverware untuk Server Side. Ketika bahasa pemrograman tersebut akan dirilis bersamaan dengan web browser Netscape Navigator 2. Netscape melakukan sebuah kerjasama dengan Sun Microsystems untuk melakukan kerjasama dalam pengembangan Livescript. Kemudian Netscape merubah nama Livescript menjadi Javascript 1.0.

Lalu apasih JS?

Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website bersifat opsional, artinya tidak harus selalu ada. Namun, website-website maupun blog modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.

---

Perbedaan JS dan Java
Penjelasannya...

Perbdeaan Antara Javascript dan Java

• Javascript biasanya dalam penggunaanya digabungkan dengan HTML, tujuannya adalah memperkaya HTML supaya bisa lebih interaktif, oleh karena itu java script sangat tergantung dengan browser yang digunakan. Jika browser tidak mengijikan(disable) untuk menggunakan javascript makan aplikasi yang menggunakan javascript tidak maksimal, bahkan bisa saja error. Java adalah bahasa pemogramam berorientasi object(OOP) dimana aplikasi yang dibuat bisa langsung di eksekusi, tentu saja dengan melakukan compiler terlebih dahulu. Bahasa java mirip dengan .Net nya Microsoft, namun java bersifat terbuka, berbeda dengan .Net yang penggunaanya membutuhkan lisensi.


• JavaSript hanya merupakan bahasa scripting, sedangkan Java bahasa pemrograman yang multifungsi dan platform independent. Java bisa digunakan untuk membuat aplikasi desktop dan juga server (SDK dan EE) ada juga untuk pemrograman mobile (ME), sedangkan JavaSript berbasis client side hanya bisa dijalakan dengan browser dan dieksekusi di komputer klien. Selain itu Java juga bisa digunakan untuk membuat aplikasi desktop yang dijalankan di Browser dengan menggunakan Applet, sedangkan JavaScript hanya bisa berjalan bila dikombinasikan dengan HTML.


• JavaScript adalah suatu script (text) yg dibaca oleh browser, kemudian diterjemahkan menjadi sekumpulan perintah. Kemudian perintah itu dijalankan di browser. JavaScript (umumnya) disisipkan dlm HTML. Java adalah suatu program yg dihasilkan (dicompile) di server, kemudian dijalankan di browser (kalo dia Java Applet) atau dijalankan di server (kalo dia Java Server Pages). Baru hasilnya ditampilkan di browser. Program Java harus diambil dari server.


• Perbedaan utama antara Jaca Script dengan Java adalah cara suatu program dieksekusi. Dengan java sendiri penggunakaannya bisa lebih luas, JME –> untuk pengembangan aplikasi pada handphone, JDK –> pengembangan aplikasi pada desktop dan JEE –> untuk pengembangan aplikasi yang besar (enterprise)

---

Penulisan Code JS di HTML
Penjelasannya...

Tag <script>

untuk isi dari tag scriptnya sendiri merupakan dibawah ini :

alert("Hello ini penerapan javascript by Angga Ganteng...");

HTML :

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> </head> <body> <script type="text/javascript"> alert("Ini merupakan contoh penerapan javascript by Angga Ganteng"); </script> </body> </html>

Hasil Dari Pengerjaan Javascript1

File Eksternal

untuk file JSnya kita inputkan href file yang bernama "index.js" pada tag <script> yang disediakan.

<script type="text/javascript" src="index.js"></script>

HTML :

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> </head> <body> <script type="text/javascript" src="index.js"></script> </body> </html>

Hasil Dari Pengerjaan Javascript2

Attribute Event

Cara yang ketiga ini sering digunakan untuk memanggil fungsi pada event terentu. Misalnya ketika suatu elemen diklik, maka jalankan fungsi Javascript. Contohnya:

HTML :

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <script type="text/javascript"> alert("Bu maaf saya baru bisa ngumpulin karena saya sakit 1 minggu..."); </script> <div class="tulisan"> <h1 id="id1">Tulisan ini akan berubah warna</h1> </div> <button type="button" class="button1" onclick="document.getElementById('id1').style.color = 'salmon'">Change!!</button> <button type="button" class="button2" ondblclick="document.getElementById('id1').style.color = '#000'">Change It back</button> </body> </html>

CSS :

.tulisan { width: 130%; margin-left: -10%; } h1 { margin-left: 30px; font-family: arial; text-transform: uppercase; } body { position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); } .button1 { padding: 10px 40px; cursor: pointer; transition: .5s; border: none; display: flex; text-transform: uppercase; margin-left: 90px; border-radius: 20px; box-shadow: 0 5px 10px rgba(0,0,0,.5); } .button1:hover { background: salmon; color: #fff; box-shadow: none; } .button2 { padding: 5px 40px; cursor: pointer; transition: .5s; border: none; position: absolute; top: 85%; left: 50%; transform: translate(-50%, -50%); text-transform: uppercase; margin-left: 140px; border-radius: 20px; box-shadow: 0 5px 10px rgba(0,0,0,.5); } .button2:hover { background: salmon; color: #fff; box-shadow: none; }

Hasil Dari Pengerjaan Attribute Event

---

Variabel dan Tipe Data
Penjelasannya...

Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya.

Kalian mungkin sudah mempelajari berbagai macam tipe data di bahasa pemrograman lain, seperti C++, java, dan lain sebagainya. Nah, di javascript juga kita menggunakan tipe data - tipe data yang biasa kita gunakan. Sedangkan untuk yang belum mengetahui tentang tipe data. Pengertian dari tipe data itu sendiri adalah suatu memori pada komputer yang digunakan untuk menyimpan. Menyimpan apa? yaitu menyimpan jenis nilai dari suatu variabel.

Contoh Penggunaan dari variabel dan tipe data itu aendiri :

Variabel On javascript 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Angga Gemilang</title> </head> <body> <h1>Javascript Variable</h1> <p>pada contoh ini x,y, & z adalah variable</p> <p id="demo"></p> <script type="text/javascript"> var x = 5; var y = 6; var z = x + y; document.getElementById('demo').innerHTML = z; </script> </body> </html>

Hasil Dari Pengerjaan Variable on javascrip 1

Variable on javascript 2 :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Angga Gemilang</title> </head> <body> <h1>Javascript Variable</h1> <p>pada contoh ini x,y, & z adalah variable</p> <p id="demo"></p> <script type="text/javascript"> var price1 = 5; var price2 = 6; var total = price1 + price2; document.getElementById('demo').innerHTML ="Totalnya adalah "+ total; document.getElementById('demo').innerHTML ="Totalnya adalah "+ total; </script> </body> </html>

Hasil Dari Pengerjaan Javascript2

Variable On Javascript With data Type:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Angga Gemilang</title> </head> <body> <h1>Javascript Variable dengan tipe data</h1> <p>deklarasi string harus disertai tanda kutip</p> <p>deklarasi angka tidak perlu disertai kutip</p> <p>Cobalah dengan tanda komentar //</p> <p id="demo"></p> <script> var pi = 3.14; var person = "john doe"; var answer = 'yes i am' //document.getElementById('demo').innerHTML = pi; document.getElementById('demo').innerHTML = person; //document.getElementById('demo').innerHTML = answer; </script> </body> </html>

Hasil Dari Pengerjaan ExtCSSonButton :

---

Quiz
Penjelasannya...

Nah, pada bab ketujuh alias bab terakhir ini, menjelaskan tentang pembuatan sebuah form yang saya buat sendiri, lumayan modern, colorful dan menarik. form ini dibuat dengan menggunakan tag <fieldset> dan tag <legend> yang digunakan untuk membuat border dengan sedikit tambahan fitur jika dibandingkan dengan border biasa.

untuk file CSSnya kita inputkan href file yang bernama "cssonform2.css" pada tag <link> yang disediakan.

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

HTML :

<!DOCTYPE html> <html> <head> <title>Angga Gemilang</title> <link rel="stylesheet" type="text/css" href="quiz.css"> </head> <body> <div class="separator"> <fieldset> <legend>Formulir Pendaftaran Calon Peserta</legend> <form method="get" class="form1" name="form1"> <table align="center"> <tr> <td><label>Nama</label></td> <td><span style="font-size: 20pt;">: </span><input type="text" name="Nama"></td> </tr> <tr> <td><label>No. Induk Penduduk</label></td> <td><span style="font-size: 20pt;">: </span><input type="text" name="No. Induk Penduduk"></td> </tr> <tr> <td><label>Kelamin</label></td> <td><span style="font-size: 20pt;">: </span><label class="container" class="lbl">Laki - Laki <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label> <label class="container" class="lbl">Perempuan <input type="radio" name="radio"> <span class="checkmark"></span> </label></td> </tr> <tr> <td><label class="ttl">Tempat Tanggal Lahir</label></td> <td><span style="font-size: 20pt;">: </span><input type="text" name="ttl" class="Ttl"></td> </tr> <tr> <td><label>Agama</label></td> <td><span style="font-size: 20pt;">: </span><select> <option>Agama</option> <option>Islam</option> <option>Kristen</option> <option>Buddha</option> <option>Hindu</option> <option>Konghucu</option> </select></td> </tr> <tr> <td><label>Status</label></td> <td><span style="font-size: 20pt;">: </span><select> <option>Status</option> <option>Kawin</option> <option>Jomblo</option> </select></td> </tr> </table> <table align="center"> <tr> <td><input type="submit" name="Browse" value="Browse" class="sbmt1"></td> <td><input type="submit" name="Submit" value="Submit" class="sbmt2"></td> </tr> </table> </form> </fieldset> </div> </body> </html>

CSS :

body { background: #33bcdc; } .separator { width: 60%; height: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid #33bcdc; } fieldset { border-top: 3px dashed green; border-bottom: 2px dashed blue; border-left: 3px dashed blue; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.8); border-radius: 10px; border-right: 2px dashed green; } legend { padding: 15px 25px; font-weight: bold; font-family: arial; background: #046f88; font-size: 13pt; text-transform: uppercase; color: #fff; border-radius: 10px; } table{ width: 100%; } input[type="text"] { border: 2px solid green; width: 60%; padding: 3px 10px; border: none; border-bottom: 2px solid #ababab; height: 25px; font-size: 20pt; background: #fff; transition: .5s; } input[type="text"]:focus { border-bottom: 2px solid #000; } label { font-size: 18pt; text-transform: uppercase; } table tr td { padding: 15px; } table tr td:first-child { padding-left: 15%; width: 50%; } table tr td:last-child { width: 50%; } input[type="submit"] { margin-left: 20%; padding: 5px 10px; text-align: center; align-items: center; align-content: center; } .container { position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; user-select: none; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } .container:hover input ~ .checkmark { background-color: #ccc; } .container input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; } select { border: 2px solid #5299d3; background: #5299d3; cursor: pointer; font-size: 12pt; color: #fff; width: 30%; text-transform: uppercase; padding: 10px 20px; } option { background: #90bee3; color: #000; } input[type="submit"] { padding: 10px 15px; background: #046f88; cursor: pointer; color: #fff; font-weight: bold; border-radius: 10px; transition: .5s; text-transform: uppercase; font-size: 13pt; margin-top: 3%; } input.sbmt1 { margin-left: 70%; } input.sbmt2 { margin-left: 2%; margin-top: 14px; } input[type="submit"]:hover { background: #5299d3; color: #000; }

Hasil Dari Pengerjaan Quiz :

"Quiz Part Will Be Updated Soon...!"

---

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #3 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb