CONAN CLUB: Javasripct dan CSS

Javascript merupakan bahasa pemrograman web yang sangat luas dan sudah dangat berkembang pada saat ini dalam dunia web development atau pengembangan website, membuat interaksi yang sangat user friendly, membuat fiturfitur tambahan pada halaman statis html.

Javascript merupakan bahasa pemrograman yang berguna untuk membuat interaksi pada website. sehingga website terlihat lebih hidup. seperti misalnya membuat efek-efek pada website.

Contoh salah satu website yang menggunakan javascript untuk membuat website mereka lebih interaktif atau lebih hidup adalah facebook, twittter, google dan lainnya. pada halaman facebook terdapat kotak chatting yang dapat anda buka dan tutup. form chat dapat terbuka dan tertutup jika di klik karena menggunakan bantuan javascript. kemudian lagi jika anda pernah memesan atau memeriksa ongkos tiket pesawat melalui situs-situs penyedia layanan tiket pesawat, setelah anda memilih kota sekarang dan memilih kota tujuan anda maka akan muncul maskapai pesawat yang tersedia tanpa me-reload halaman. hal ini terjadi karena menggunakan teknik ajax yang di buat dengan javascript.

Cara Penulisan Dan Penggunaan Javascript

cara penulisan syntax javascript yang baik dan benar. dan adapun pengetahuan dasar yang harus kita ketahui dari javascript adalah sebagai berikut.

· Di simpan dengan ekstensi .js.

· Syntax javascript yang di sisipkan pada halaman HTML di tulis di dalam tag<SCRIPT>

· Syntax javascript bisa di letakkan di bagian element tag<head> atau tag<body>

· Javascript bersifat case sensitive.

· Di setiap akhir baris harus di tutup dengan titik koma/semicolon ( ; ).

syntax javascript bisa di gunakan dengan 2 cara, yaitu dengan cara di sisipkan pada halaman HTML langsung, dan 1 lagi dengan cara menyimpan file javascript dengan ekstensi .js. dan kemudian menginclude nya pada halaman HTML.

Menggunakan Javascript Secara Internal

Penulisan javascript secara internal adalah dengan cara menyisipkan langsung syntax javascript di dalam HTML. jika temanteman menggunakan cara ini maka syntax javascript nya harus teman-teman letakkan di antara tag <script> pembuka dan tag </script> penutup. dan meletakkannya bisa di dalam tag <head>, bisa juga di dalam tag <body>. buat sebuah file HTML untuk membuat contoh penggunaan Javascript secara internal. bisa file html bisa juga php. karena javascript mampu berjalan di antara keduanya. di sini saya hanya membuat file html saja sebagai contoh. buat sebuah file html dengan nama belajar.html.

contoh penulisan

<!DOCTYPE html>

<html>

<head>

<title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title>

</head>

<body>

<h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1>

<h2>www.malasngoding.com</h2>

document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";

</script>

</body>

</html>

Menggunakan Javascript Secara External

Setelah membahas cara penulisan javascript secara internal, atau dengan cara menyisipkan langsung syntax javascript pada html, maka di sini kita akan membahas cara lainnya untuk menggunakan javascript, yaitu dengan cara menggunakan javascript secara external. caranya buat lah dua buah file, yaitu :

· belajar.html

· belajar.js

di file belajar.html kita akan menuliskan syntax HTML nya saja. dan pada belajar.js kita akan menuliskan syntax javascript nya pada file belajar.js. dan cara agar kedua file ini terhubung adalah dengan cara menghubungkannya dengan syntax berikut. Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript.

belajar.html :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title>

</head>

<body>

<h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1>

<h2>www.malasngoding.com</h2>

</body>

</html>

belajar.js

document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";

dan jika di jalankan maka hasilnya akan sama.

Oke teman-teman sekian lah tutorial Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript. pada tutorial ini kita telah belajar tentang bagaimana penulisan javascript dan bagaimana cara menggunakannya.

Mengenal Variabel Pada Javascript

Yang harus di perhatikan di dalam membuat variabel di javascript adalah, semua penulisan variabel pada javascript tidak boleh mengandung spasi, harus memperhatikan penulisan huruf besar kecil. lebih lengkap nya perhatikan poin-poin cara penulisan variabel pada javascript yang benar.

Cara penulisan variabel di javascript:

· Penulisan nama variabel bisa menggunakan huruf, angka, tanda underscore dan tanda dollar.

· Penulisan nama variabel harus di awali dengan huruf.

· Penulisan nama variabel javascript harus memperhatikan huruf besar kecil (case sensitive).

· Nama variabel tidak boleh mengandung spasi.

· penulisan variabel javascript di awali dengan syntax “var“.

contoh membuat variabel dengan javascript

<!DOCTYPE html>

<html>

<head>

<title>Belajar Javascript Part 3 : Mengenal Variabel Pada Javascript</title>

</head>

<body>

<h1>Belajar Javascript Part 3 : Mengenal Variabel Pada Javascript</h1>

<h2>www.malasngoding.com</h2>

var nama = "Malas Ngoding";

var alamat = "Jakarta";

document.getElementById("nama").innerHTML = nama;

document.getElementById("alamat").innerHTML = alamat;

</script>

</body>

</html>

dibuat dua buah variabel javascript. dengan nama “nama” dan “alamat”.

var nama = "Malas Ngoding";

var alamat = "Jakarta";

dan kemudian saya menampilkan isi dari variabel ini ke dalam element nama dan alamat.

document.getElementById("nama").innerHTML = nama;

document.getElementById("alamat").innerHTML = alamat;

hasilnya:

contoh penulisan javascript beserta contohnya

JavaScript Statements

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>Program JavaScript adalah daftar pernyataan yang harus dijalankan oleh komputer.</p>
<p id="demo"></p>
<script>
var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById("demo").innerHTML =
"nilai dari z adalah " + z + ".";
</script>
</body>
</html>

hasilnya adalah:

CSS

Pengertian CSS

Pada dasarnya CSS atau Cascading Style Sheet juga sama seperti HTML, PHP ataupun Javascript yakni suatu Bahasa pemrograman yang dibuat untuk menunjang fungsi website, namun masing – masing mereka memiliki porsi atau tugas yang berbeda.

Pada CSS (Cascading Style Sheets) Bahasa atau instruksi yang diberikan lebih ditujukan pada desain atau style dari halaman website yang anda buat. Dalam hal peletakan script juga bisa dengan 2 cara yakni dijadikan satu dengan halaman induk HTML (berekstensi .html) anda atau dibuatkan file khusus (berekstensi .css). Namun dalam dunia developer web lebih sering meletakkan file CSS secara terpisah untuk menghemat ukuran serta kosakata dari Bahasa CSS sendiri yang juga cukup luas.

Desain tampilan yang dimaksud dari CSS ini adalah meliputi banyak hal, mulai dari font (teks), background (latar belakang), margin halaman, spacing (jarak), button (tombol), tata – letak (sistem grid) dan masih banyak lagi. Demi menunjang tampilan website yang indah dan berkelas seorang programmer web harus memperhatikan semua aspek tersebut. Pada umumnya file CSS yang tersimpan dalam satu server hanya ada satu namun mencakup semua halaman agar lebih efektif dan biasanya juga diberi nama style.css.

Fungsi CSS

Fungsi dari adanya file CSS dalam setiap website kami rasa cukup penting. Sebelumnya juga sudah sempat dibahas bahwa dengan adanya CSS anda dapat membedakan konten atau style dengan dokumen atau file website itu sendiri. Bisa dibilang salah satu tolak ukur dari kualitas halaman website yang dibuat adalah dari style yang digunakan, dan disini CSS berperan sangat vital.

Keuntungan lain dari penggunaan file CSS adalah seakan – akan dapat dibuat menjadi library style yang bisa digunakan lagi sewaktu – waktu, tergantung dari anda untuk mengkreasikannya agar bentuk tampilan antar website yang dibuat tidak sama. Selain itu dengan adanya CSS seorang programmer web juga diberi kebebasan untuk berinovasi serta berkreasi seindah mungkin karena tidak ada batasan – batasan dari penggunaan kode CSS itu sendiri.

Cara Kerja CSS

Berbeda dari pembelajaran HTML, PHP atau Javascript yang memiliki rumus atau metode tersendiri pada CSS cara kerja penulisan kode bisa dibilang paling mudah. Seorang programmer hanya perlu menambah wawasan mengenai instruksi atau perintah untuk mendesain web secara menyeluruh. Pada CSS anda hanya perlu menulis stylenya saja yang terdiri atas selector id dan class. Contohnya jika anda berfokus pada background atau latar belakang anda dapat mengatur penggunaan image atau warna solid sebagai background, serta mensetting ukuran secara fixed atau sesuai ukuran asli dan lain sebagainya.

Jika penulisan kode CSS dijadikan satu dengan file HTML maka biasanya dapat ditulis di bagian Head, beda halnya dengan file Javascript yang diletakan pada Body di bagian terakhir. Sedangkan jika penulisan file CSS di halaman tersendiri maka tidak ada patokan khusus, namun perlu diperhatikan pada dokumen yang menggunakan CSS haruslah ada instruksi untuk pemanggilan file CSS beserta class – classnya.

Untuk mengetahui macam – macam kode atau script dari CSS anda dapat mencari di internet baik secara utuh maupun dalam bentuk tutorial satu – persatu. Tergantung dari anda sendiri lebih cocok menggunakan metode apa dalam pembelajaran.

untuk berbagai operasi dan cara penulisan baik javasript maupun css bisa dilihat di https://www.w3schools.com

REFERENSI:

https://www.malasngoding.com/belajar-javascript-pengertian-dan-pengenalan-javascript/

https://www.w3schools.com/