Dasar Javasript (Variable, condition, looping. document objeck model)

Kembali lagi diblog kesayangan kita, tentu saja dengan topik yang berbeda. langsung saja kita bahas ya-!

JavaScript adalah "bahasa pemrograman sisi klien (dibalik layar) yang paling umum digunakan, hampir semua halaman HTML modern sudah banyak menggunakan JavaScript untuk menambahkan lebih banyak fungsi, pengalaman para pengguna atau pemakai menjadi lebih baik, cepat dan lebih interaktif".

Dengan bantuan JavaScript, semua dapat melakukan apa saja di sisi klien seperti mengubah konten HTML, mengubah gaya elemen, dan lain-lain. maka semua dapat menggunakan javascript secara internal atau eksternal. Sintaks JavaScript Internal JavaScript dapat ditempatkan di bagian <head> pada halaman HTML. Dan kode JavaScript harus disisipkan dalam tag <script> dan diakhiri </script>

Contoh JavaScript (JS):

<html>
<head>
<script> document.write("Hallo gaes ini merupakan contoh penulisan JavaScript");
</script>
</head>
<body>
<p> Contoh kalimat atau This is paragraph 1 </p>
<p> Contoh kalimat atau This is paragraph 2 </p>
<p> Contoh kalimat atau This is paragraph 3 </p>
<p> Contoh kalimat atau This is paragraph 4 </p>
</body> </html>

Maka hasilnya seperti yang berada di bawah ini :

Hallo gaes ini merupakan contoh penulisan JavaScript

Contoh kalimat atau This is paragraph 1

Contoh kalimat atau This is paragraph 2

Contoh kalimat atau This is paragraph 3

Contoh kalimat atau This is paragraph 4

Adapun Sintaks JavaScript Eksternal dapat menggunakan Javascript dengan mendefinisikan semua kode dalam file terpisah dan menyimpan file dengan type atau ekstensi .js dan kemudian menambahkan file itu di halaman web atau situs bahkan aplikasi yang akan anda gunakan atau yang sedang anda buat Contoh Javascript Eksternal

/*This is fileanda.js file*/
document.write("Hello This is the Example of JavaScript");


<html>
<script src="fileanda.js"></script>

<body>

<p>Contoh kalimat atau This is paragraph 1 </p>
<p>Contoh kalimat atau This is paragraph 2 </p>
<p>Contoh kalimat atau This is paragraph 3 </p>
<p>Contoh kalimat atau This is paragraph 4 </p>

</body>
</html>

Para pengguna atau developer dapat menempatkan file javascript eksternal di "tag head atau di badan( body) antara tittle dan head".

Javascript Browser

Semua bisa mendapatkan properti browser yang berbeda dari objek javascript yang berbeda

Di tulis kembali oleh Elfiansyah Elham

Objek Jendela (Window Object)

Dengan objek jendela bantuan Para Programmer bisa mendapatkan properti jendela yang berbeda.

window.innerHeight ini digunakan untuk memberikan tinggi bagian dalam jendela browser

window.innerWidth digunakan untuk memberikan lebar bagian dalam jendela browser

window.open () digunakan untuk membuka jendela baru

window.close () digunakan untuk menutup jendela saat ini

window.moveTo () digunakan untuk memindahkan jendela saat ini

window.resizeTo () digunakan untuk mengubah ukuran jendela saat ini

Contoh Objek Jendela

var v = window.innerHeight; document.write (v);

Dalam hal ini tentu para programmer wajib mempraktekkannya dengan mencoba serta memahami pola kinerja script yang ditulis ini.

Objek Layar (Screen Object)

Dengan objek layar bantuan Para Programmer bisa mendapatkan properti layar yang berbeda.

screen.width digunakan untuk memberikan lebar layar.

screen.height itu digunakan untuk memberikan ketinggian layar.

screen.availWidth digunakan untuk memberikan lebar layar yang tersedia.

screen.availHeight digunakan untuk memberikan lebar layar yang tersedia.

screen.colorDepth digunakan untuk memberikan kedalaman warna pada layar.

screen.pixelDepth digunakan untuk memberikan kedalaman piksel layar.

Contoh Objek Layar

var v = screen.width; document.write (v);

Jangan lupa untuk mempraktekkannya dengan mencoba serta memahami pola kinerja script yang ditulis ini.

Objek Lokasi (Location Object)

Dengan objek lokasi bantuan Para Programmer bisa mendapatkan properti lokasi dan pengguna yang berbeda.

window.location.href mengembalikan URL dari halaman saat ini

window.location.hostname mengembalikan nama domain dari web host

window.location.pathname mengembalikan jalur dan nama file dari halaman saat ini

window.location.protocol mengembalikan protokol web yang digunakan seperti http atau https

window.location.assign itu memuat dokumen baru

Contoh Objek Lokasi

var v = window.location.href; document.write (v);

Objek Riwayat Browser (Browser History Object)

Dengan bantuan objek riwayat browser Para Programmer bisa maju dan mundur url dari daftar riwayat.

history.back () memberikan url sebelumnya dari daftar sejarah

history.forward () memberikan url berikutnya dari daftar riwayat

Contoh Objek Lokasi

var v = history.forward ();
document.write (v);

atau

window.history.forward (); // Ini mengarahkan pengguna ke halaman berikutnya.

Adapun contoh yang lebih lengkap seperti dibawah ini :

Demikian script javascript yang tentu sangat bermanfaat bagi para programmer dalam membuat suatu projek, sehingga dapat mengembangkan script yang sederhana diatas menjadi full power.

Cookie Javascript (Cookies)

Cookies digunakan untuk menyimpan informasi di perangkat pengguna seperti komputer, ponsel, dll. Para Programmer dapat menyimpan cookie yang dibuat, mengakses cookie, dan menghapus cookie.

Para Programmer dapat mengatur Cookie sebanyak yang Para Programmer inginkan. Para Programmer juga dapat mengatur cookie dengan bantuan PHP.

Buat Cookies
Adapun penulisan Sintaksisnya sebagai berikut :

document.cookie = "key1 = nilai1; key2 = nilai2; key3 = nilai3; kedaluwarsa = tanggal / waktu";

Contoh Membuat Cookies

document.cookie = "name =Elfiansyah; course = XFLASH; expires = Thu, 10 Des 2020 12:00:00 UTC";

Baca Cookies
var allcookies = document.cookie; document.write (allcookies);

Pernyataan document.cookie akan memberikan semua cookie ke variabel allcookies.

Kemudian Ini menampilkan semua cookie seperti ini name = Elfiansyah; kursus = XFLASH;

Hapus Cookies

Para Programmer dapat menghapus cookie dengan menyetel nama kunci itu dan menyetel nilai kedaluwarsa ke tanggal yang telah lewat.

document.cookie = "name =Elfiansyah; course = XFLASH; expires = Thu, 10 Des 2020 12:00:00 UTC";

Ini akan menghapus cookie nama dan cookie kursus.

Pengambilan Keputusan Javascript (Decision Making)

Pernyataan Pengambilan Keputusan adalah if, else, elseif dan switch pernyataan ini digunakan dalam membuat keputusan.

if..else pernyataan
if..else statement digunakan di mana Anda ingin mengeksekusi sekumpulan kode ketika kondisi benar dan lain jika kondisi tidak benar

Sintaksis nya sebagai berikut :

if (condition)

{ kode untuk dieksekusi jika kondisinya benar

 }  else

 { kode untuk dieksekusi jika kondisinya salah

Contoh if..else sebagai berikut :

var a=10;

if (a==10)

{ echo "Ya ini nilai 10"; }

else

{ echo "tidak ini bukan nilai 10"; }

Pernyataan elseif

Pernyataan elseif digunakan di mana Anda ingin menjalankan beberapa kode jika salah satu dari beberapa kondisi benar, gunakan pernyataan elseif

Sintaksisnya sebagai berikut :

if (condition)  {kode untuk dieksekusi jika kondisinya benar

 }  elseif (condition)  {kode untuk dieksekusi jika kondisinya benar

;}  else  {kode untuk dieksekusi jika kondisinya salah

Contoh elseif sebagai berikut :

var a=30;

if (a==40)
{ echo "Ya ini adalah hasil value 40"; }
elseif(a==30)
{ echo "Ya ini adalah hasil value 30"; }
else
{ echo "Tidak, Kamu salah"; }

Pernyataan saklar atau Switch Statements

Pernyataan switch digunakan di mana Anda ingin mengeksekusi satu blok kode dari banyak. Sintaksisnya sebagai berikut :

switch (value)
{
case value1:
code to be executed if value = value1;
break;

case value2:
code to be executed if value = value2;
break;

default:
code to be executed
if value is different
from both value1 and value2;
}

Contohnya switch sebagai berikut :

var a=10;

switch ( a )

{ case 30: kode yang akan dijalankan jika var a=30;  break;

case 40: kode yang akan dijalankan jika var a=40;  break;

default: kode yang akan dijalankan jika nilai berbeda dari nilai1 dan nilai2; }

Tanggal dan Waktu Javascript (Date and Time)

Anda bisa mendapatkan objek tanggal untuk mendapatkan dan mengatur tanggal dan waktu. Objek tanggal dibuat dengan tanggal baru () seperti yang ditunjukkan di bawah ini.

Sintaks untuk Membuat objek Tanggal

var variableName = new Date ();
var variableName = Tanggal baru (milidetik);
var variableName = Tanggal baru (dateString);
var variableName = Tanggal baru (tahun, bulan, hari, jam, menit, detik, milidetik);

Contoh Tanggal

var todaydate = new Date ();
alert (todaydate);

Beberapa Metode Tanggal Umum

Nama	Fungsi
Date ():	Mengembalikan tanggal dan waktu hari ini.
getDate ():	Mengembalikan hari dalam sebulan untuk tanggal yang ditentukan sesuai dengan waktu lokal.
getDay ():	Mengembalikan hari dalam seminggu untuk tanggal yang ditentukan menurut waktu lokal.
getFullYear ():	Mengembalikan tahun dari tanggal yang ditentukan menurut waktu lokal.
getHours ():	Mengembalikan jam pada tanggal yang ditentukan menurut waktu setempat.
getMilliseconds ():	Mengembalikan milidetik pada tanggal yang ditentukan sesuai dengan waktu lokal.
getMinutes ():	Mengembalikan menit pada tanggal yang ditentukan sesuai dengan waktu lokal.
getMonth ():	Mengembalikan bulan pada tanggal yang ditentukan menurut waktu setempat.
getSeconds ():	Mengembalikan detik pada tanggal yang ditentukan sesuai dengan waktu lokal.
setDate ():	Menyetel hari dalam sebulan untuk tanggal tertentu menurut waktu setempat.
setHours ():	Menyetel jam untuk tanggal tertentu menurut waktu setempat.
setMilliseconds ():	Menyetel milidetik untuk tanggal tertentu menurut waktu setempat.
setMinutes ():	Menyetel menit untuk tanggal tertentu menurut waktu setempat.
setMonth ():	Mengatur bulan untuk tanggal tertentu menurut waktu setempat.
setSeconds ():	Menyetel detik untuk tanggal tertentu menurut waktu setempat.

Acara-acara Javascript (Events)

Browser web menghasilkan Event atau acara setiap kali sesuatu yang menarik terjadi pada dokumen atau browser atau pada beberapa elemen atau bagian yang penting atau objek yang terkait dengannya. Misalnya. Browser web menghasilkan peristiwa ketika pengguna mengarahkan kursor ke elemen atau mengklik elemen atau mengirimkan formulir, dan lain-lain.

function demo() {
alert("Hallo semua yang menggunakan Javascript");
}

</script>
</head>
<body>
<input type="button" onclick="demo()" value="Klik disini" />
</body>
</html>

Hasil Dari Contoh Di Atas dapat di klik tombol dibawah ini :

Peristiwa Javascript pada umumnya atau javascript bersifat umum

onchange: Script dijalankan ketika elemen berubah

onsubmit: Skrip berjalan saat formulir dikirim

onreset: Script dijalankan ketika form di-reset

onselect: Skrip dijalankan ketika elemen dipilih

onblur: Skrip berjalan saat elemen kehilangan fokus

onfocus: Skrip berjalan saat elemen mendapatkan fokus

onkey: Skrip berjalan saat tombol ditekan

onkeypress: Skrip berjalan saat tombol ditekan dan dilepaskan

onkeyup: Skrip berjalan saat kunci dilepaskan atau saat form inputan di isi

onclick: Skrip berjalan saat mouse diklik

ondblclick: Skrip dijalankan saat mouse diklik dua kali

onmousedown: Skrip berjalan saat tombol mouse ditekan

onmousemove: Skrip berjalan saat penunjuk mouse bergerak

onmouseout: Skrip berjalan ketika penunjuk mouse bergerak keluar dari sebuah elemen

onmouseover: Skrip berjalan saat penunjuk mouse bergerak di atas sebuah elemen

onmouseup: Skrip berjalan saat tombol mouse dilepaskan

Semoga bermanfaat dan mudah dalam memahami script diatas.

DOM HTML Javascript (HTML DOM)

Dengan bantuan Javascript para programmer dapat menambahkan, menghapus atau memodifikasi elemen HTML, atribut, nilai dan isinya dengan sangat amat mudah.

DOM adalah singkatan dari Document Object Model ini mewakili dokumen HTML lengkap yang ditampilkan di jendela browser.

Dapatkan Elemen HTML

Para programmer bisa mendapatkan elemen HTML melalui cara berikut

document.getElementById () digunakan untuk menemukan elemen atau bagian sederhana dengan id-nya

document.getElementsByTagName () digunakan untuk menemukan elemen (bagian sederhana tapi penting) dengan nama tag

document.getElementsByClassName () digunakan untuk menemukan elemen (bagian sederhana tapi penting) berdasarkan nama kelas

Contoh Dapatkan Elemen (bagian yang penting) HTML

document.getElementById ("demo");

Ubah Elemen HTML

para programmer dapat mengubah elemen HTML melalui cara berikut :

element.innerHTML = digunakan untuk mengubah HTML bagian dalam dari sebuah elemen

element.attribute = digunakan untuk mengubah atribut elemen HTML

element.setAttribute (atribut, nilai) = digunakan untuk mengubah atribut elemen HTML

Contoh Perubahan Elemen HTML

document.getElementById ("demo"). innerHTML = "Hallo Javascript";
document.getElementById ("img1"). src = "demonstrasi.jpg";

Tambahkan atau Hapus Elemen HTML

Para programmer dapat menambah atau menghapus elemen HTML melalui cara berikut :

document.createElement () digunakan untuk membuat elemen HTML.

document.removeChild () digunakan untuk menghapus elemen HTML.

document.appendChild () digunakan untuk menambahkan elemen HTML.

document.replaceChild () digunakan untuk mengganti elemen HTML.

document.write (teks) digunakan untuk menulis ke dalam aliran keluaran HTML.

Tentu dalam hal ini harus dipraktekkan untuk mempercepat dalam kepemahaman atas script diatas.

Cari Blog Ini

nanaimah