• Karena ...

    Cukup ubah diri kamu sendiri dengan kreatifitasmu, dengan sendirinya hal itu akan mengubah orang disekitarmu.

  • Hidup ...

    "Kekayaan terbesar sebuah bangsa adalah manusianya, bukan sumber daya alamnya” - Anies Baswedan.

  • Baiknya ...

    "Masa depan itu milik orang yang percaya akan mimpinya dan bekerja sepenuh hati untuk mewujudkannya" - Wishnutama.

  • Saling ...

    "Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat" - Winston Chuchill.

  • Berbagi ...

    "Hidup adalah lelucon yang baru saja dimulai" - W.S. Gilbert.
Tampilkan postingan dengan label javascript. Tampilkan semua postingan
Tampilkan postingan dengan label javascript. Tampilkan semua postingan

Minggu, 13 Agustus 2017

Cara Install Xampp di Windows

  23.28   , , ,   No comments   Edit


Untuk Teman teman yang baru belajar membuat website apalagi menggunakan pemrograman PHP namun kalian belum punya domain dan hosting berbayar, jangan manyerah dulu. Karena masih ada cara lain.
Hal ini membuat kita bisa tetap membuat project website di PC/ laptop, dengan membuat PC kita sebagai servernya.
Caranya adalah dengan menginstal aplikasi server localhost di PC kita. Salah satu aplikasi server localhost  yang paling sering digunakan  di kalangan web developer saat ini adalah XAMPP.
Nah, karena saya menggunakan Windows, maka cara ini diperuntukkan bagi pengguna PC Windows walaupun sebenarnya untuk OS yang tidak jauh berbeda cara installnya. 
  1. Download  XAMPP terbaru -->, klik disini.
  2. nah setelah di download, langsung saja di install, nanti selanjutnya akan muncul jendela seperti di bawah ini:
  3. instal xampp, xampp localhost
  4. Klik OK.
  5. klik OK dan YES.
    2-instal-xampp
    3-instal-xamp
  6. klik tombol Next.
    4-instal-xampp
  7. Centang semua dan klik tombol Next.
    5-instal-xampp
  8. Secara default akan diarahkan ke lokasi c:\xampp.  Jika sudah selesai, lanjutkan dan klik tombol Install.
    6-instal-xampp
  9. Tunggu beberapa menit hingga proses intalasi selesai. klik tombol Finish untuk menyelesaikannya.
    7-instal-xampp

Cara Menjalankan Aplikasi XAMPP

  1. Silahkan buka XAMPP, bisa melalui Start Menu atau Desktop, 
  2. Setelah terbuka, silahkan klik tombol Start pada kolom Action sehingga tombol tersebut berubah menjadi Stop. Biasanya yang di start hanyalah aplikasi Apache dan MySQL, karena kita belum memerlukan aplikasi seperti Filezilla, etc.
    9-instal-xampp
    10-instal-xampp
  3. Sekarang silahkan buka browser, dan ketikkan http://localhost/xampp di address bar. Jika muncul tampilan seperti ini, maka instalasi telah berhasil.
    11-instal-xampp
Sekarang komputer Anda sudah berfungsi seperti server dan bisa menjalankan aplikasi-aplikasi berbasis Serverside.

Sabtu, 12 Agustus 2017

Bagian 6 - JavaScript If...Else Statements

  19.25      No comments   Edit

Sangat sering ketika Anda menulis kode, Anda ingin melakukan tindakan yang berbeda untuk keputusan yang berbeda.
Anda dapat menggunakan pernyataan kondisional dalam kode Anda untuk melakukan hal ini.
Dalam JavaScript kita memiliki pernyataan bersyarat berikut:
  • Gunakan if untuk menentukan blok kode yang akan dieksekusi, jika kondisi yang ditentukan benar
  • Gunakan else untuk menentukan blok kode yang akan dieksekusi, jika kondisi yang sama palsu
  • Gunakan else if untuk menentukan kondisi baru untuk menguji, jika kondisi pertama adalah palsu
  • Gunakan switch untuk menentukan banyak blok alternatif kode yang akan dieksekusi

Contoh

Membuat "Good day" salam jika jam kurang dari 18:00:

<!DOCTYPE html>
<html>
<body>

<p>Menampikan Selamat Siang jika jam kurang dari pukul 16.00:</p>

<p id="aksi">Good Evening!</p>

<script>
if (new Date().getHours() < 20) {
    document.getElementById("aksi").innerHTML = "Selamat Siang!";
}
else {
    document.getElementById("aksi").innerHTML = "Selamat Malam!";
}
</script>

</body>
</html>

Output : 
Menampikan Selamat Siang jika jam kurang dari pukul 16.00:
Selamat Siang!


nah contoh di atas menggunakan 2 kondisi.

sekian dari kami

Salam harian AnSI








Bagian 5 - JavaScript Date Methods

  09.34      No comments   Edit

Javascript Date Method memugkin kita untuk mendapatkan, dan menetapkan nilai serta tanggal

Beberpa Get Date Method yang biasa digunakan dalam javascript

MethodDescription
getDate()Get the day as a number (1-31)
getDay()Get the weekday as a number (0-6)
getFullYear()Get the four digit year (yyyy)
getHours()Get the hour (0-23)
getMilliseconds()Get the milliseconds (0-999)
getMinutes()Get the minutes (0-59)
getMonth()Get the month (0-11)
getSeconds()Get the seconds (0-59)
getTime()Get the time (milliseconds since January 1, 1970)

Contoh Penggunaan Date Method di javascript

<!DOCTYPE html>
<html>
<body>

<p>The getFullYear() method :</p>

<p id="aksi"></p>

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>

</body>
</html>

output :

The getFullYear() method :
2017

Contoh kedua

<!DOCTYPE html>
<html>
<body>

<p>Menggunakan Array untuk menentukan Hari ini</p>

<p id="aksi"></p>

<script>
var d = new Date();
var days = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","sabtu"];
document.getElementById("aksi").innerHTML = days[d.getDay()];
</script>

</body>
</html>

output : 

Menggunakan Array untuk menentukan Hari ini
Minggu


Contoh ketiga setfullyear

<!DOCTYPE html>
<html>
<body>

<p>The setFullYear() method Menetapkan objek tanggal ke tanggal khusus.</p>

<p id="aksi"></p>

<script>
var d = new Date();
d.setFullYear(1995, 2, 25);
document.getElementById("aksi").innerHTML = d;
</script>

</body>
</html>

output : 

The setFullYear() method Menetapkan objek tanggal ke tanggal khusus.
Sat Mar 25 1995 00:32:14 GMT+0800 (Malay Peninsula Standard Time)


yah masih banyak lagi metode yang silahkan kembangkan 

salam harian AnSI

Jumat, 11 Agustus 2017

Bagian 4 - Mengenal Event pada javascript

  22.38      No comments   Edit

Ketika Javascript digunakan di halaman HTML, Javascript dapat bereaksi terhadap sebuah Event
Dalam Contoh berikut, Event OnClick ditambahkan ke elemen tombol.

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('aksi').innerHTML=Date()">The time is?</button>

<p id="aksi"></p>

</body>
</html>

Output :


Sat Aug 12 2017 13:26:33 GMT+0800 

pada contoh diatas, kode javascript akan mengubah isi elemen dengan id="aksi"

untuk contoh selanjutnya, kode akan mengubah isi elemennya sendiri menggunakan innerHTML

<!DOCTYPE html>
<html>
<body>

<button onclick="this.innerHTML='Terima Kasih'">Click</button>

</body>
</html>

Output :



Event HTML yang sering digunakan

1. OnClick
2. OnChange
3. Onmouseover
4. Onmouseout
5. Onkeydown
6. Onload

itu lah sekilah materi tentang Event HTML yang bisa digunakan untuk menjalankan function Javascript


Salam SeniKoding




Bagian 3 - Objek JavaScript

  09.09      No comments   Edit


 Anda telah mengetahui bahwa variabel javascript adalah kontainer untuk nilai data

Contoh kode 

Var x = "Kamu";

Objk juga sebuah varibel tapi bisa menapung banyak nilai , contohnya :

<!DOCTYPE html>
<html>
<body>

<p>Belajar Javascript</p>

<p id="contoh"></p>

<script>
var x = {nama:"Saya", Domisili:"mana saja", Kulit:"Putih"};
document.getElementById("contoh").innerHTML = x.nama;
</script>

</body>
</html>

hasil : 

Belajar Javascript
Saya


Bisa juga seperti ini

<!DOCTYPE html>
<html>
<body>

<p>Belajar javascript.</p>

<p id="aksi"></p>

<script>
var maba = {
    Nama : "ACO",
    NamaLengkap  : "ACO dg. KULLE",
    Domisili       : "Makassar",
    Warnamata  : "blue"
};

document.getElementById("aksi").innerHTML =
maba.NamaLengkap + " adalah orang " + maba.Domisili + " nama panggilan " + maba.Nama;
</script>

</body>
</html>

jadinya :

Belajar javascript.
ACO dg. KULLE adalah orang Makassar nama panggilan ACO

dan cara lain mengambil data dari proerty

<!DOCTYPE html>
<html>
<body>

<p>Anda Bisa menggunakan x.Nama atau x["property"]</p>

<p id="aksi"></p>

<script>
var maba = {
    nama: "TES",
    namalengkap : "Tes untuk belajar",
    id       :  9999
};
document.getElementById("aksi").innerHTML =
maba["nama"] + " " + maba["namalengkap"];
</script>

</body>
</html>

jadinya:

Anda Bisa menggunakan x.Nama atau x["property"]
TES Tes untuk belajar


Terima kasih salam seni koding

Jumat, 21 Juli 2017

Bagian 2 - membuat output javascript

  16.47      No comments   Edit


JavaScript dapat "menampilkan" data dengan berbagai cara:

1. Menulis ke elemen HTML, menggunakan innerHTML.
2. Menulis ke dalam output HTML menggunakan document.write ().
3. Menulis ke kotak peringatan, menggunakan window.alert ().
4. Menulis ke konsol browser, menggunakan console.log ().
5. Menggunakan innerHTML

Untuk mengakses elemen HTML, JavaScript dapat menggunakan metode document.getElementById (id).

Atribut id mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML:

Berikut Contohnya:
1. Mengubah properti innerHTML dari elemen HTML adalah cara yang umum untuk menampilkan data dalam HTML.

<!DOCTYPE html>
<html>
<body>

<h1>Halaman Pertama Javascript</h1>
<p>Halaman Pertama Javascript</p>

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

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

<script>
document.write(5 + 6);</script>

<script>
window.alert(5 + 6);</script>

<script>
console.log(5 + 6);</script>

<button onclick="document.write(10 - 4)">Try it</button>

</body>
</html>


















Minggu, 16 Juli 2017

Bagian 1 - JavaScript Dapat Mengubah Konten HTML

  20.33      No comments   Edit




JavaScript Dapat Mengubah Konten HTML



Salah satu dari banyak metode JavaScript HTML adalah getElementById (). Contoh ini menggunakan metode untuk "menemukan" elemen HTML (dengan id = "demo") dan mengubah konten elemen (innerHTML) menjadi "Halo JavaScript"


<!DOCTYPE html> <html> <body> <h2>Bagian 1 Javascript</h2> <p id="demo">Javascript dapat mengubah content HTML.</p> <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Klik Ini!</button> <button type="button" onclick='document.getElementById("demo").innerHTML = "Javascript dapat mengubah content HTML"'>Kembali!</button> </body> </html>





Langganan: Postingan (Atom)