Faid's Blog™: 2015

Friday, April 24, 2015

Know HTML for Beginner

In this post, i'll show you how to know HTML, as you can see, the HTML is just a markup (non-programming language). It's so easy to read HTML for example the most common HTML structure:

<html>
	<head>
		<title>The HTML Title</title>
	</head>
	<body>
		<div>CONTENT</div>
	</body>
</html>

Did you know the result of that HTML code? okay i'll explain that code, the first <html> tag is for declare if that's a HTML, the second line is <head> is the first line executed, it being executed when the page initializing, you can add <style> for CSS and <script> for javascript code or other required HTML elements (<meta>, <link>, etc..), then the <body> tag is contains the entire HTML content, all HTML tag have a closing tag.

The closing tag always have same name with the tag, example <input type='text'></input> or if there's no contents in the middle of the tag, you can close the tag immediatly <input type='text'/>.

Thursday, April 23, 2015

ASCII to Binary (8-bit) Converter

This converter can convert ASCII to 8-bit binary code with the formula to count it, i made this application from VB6, you can download it here.

- Note: to know HOW to count binary, you can learn it here.

Download Here!

Penghitung Jarak & Waktu VB6

Disini saya membuat program VB6 sederhana yang bisa sangat membantu, untuk menghitung jarak masukkan kecepatan dan waktu sedangkan untuk menghitung waktu masukkan jarak dan kecepatan, aplikasi VB6 bisa didownload disini

Wednesday, April 1, 2015

Permainan Angka HTML Javascript

Ini adalah contoh aplikasi WEB permainan angka dengan logika yang lumayan banyak agar jawaban benar ditaruh di tombol berbeda, setiap jawaban dapat mengeluarkan angka yang mirip dengan jawaban yang sama dan tidak ada tombol jawaban yang berisi angka yang sama.
Penilaian dalam permainan ini adalah jika benar skor + 2 dan jika salah skor - 1.

0	+	0	=


WAKTU		SKOR
60		0

Source code:

<html>
	<head>
		<title>Permainan Angka</title>
		<style>
			td, input {
				width: 50px;
				text-align: center;
				font-family: courier;
				font-weight: bold;
				font-size: 30px;
			}
			
			input {
				width: 100%;
				height: 50px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<table border='0' cellSpacing='4' cellPadding='0'>
			<tr>
				<td id='angka1'>0</td>
				<td id='simbol'>+</td>
				<td id='angka2'>0</td>
				<td>=</td>
			</tr>
			<tr>
				<td colSpan='2'>
					<input type='button' id='jawaban1' value='0' disabled='true' onClick='cekJawaban(this.value);'/>
				</td>
				<td colSpan='2'>
					<input type='button' id='jawaban2' value='0' disabled='true' onClick='cekJawaban(this.value);'/>
				</td>
			</tr>
			<tr>
				<td colSpan='2'>
					<input type='button' id='jawaban3' value='0' disabled='true' onClick='cekJawaban(this.value);'/>
				</td>
				<td colSpan='2'>
					<input type='button' id='jawaban4' value='0' disabled='true' onClick='cekJawaban(this.value);'/>
				</td>
			</tr>
			<tr>
				<td colSpan='2'>WAKTU</td>
				<td colSpan='2'>SKOR</td>
			</tr>
			<tr>
				<td colSpan='2' id='waktu'>60</td>
				<td colSpan='2' id='skor'>0</td>
			</tr>
			<tr>
				<td colSPan='2'><input type='button' id='mulaiBtn' style='font-size: 14px;' value='Mulai Baru' onClick='mulaiBaru();'/></td>
				<td colSpan='2'><input type='button' id='stopBtn' style='font-size: 14px;' value='Menyerah' onClick='hentikanPermainan();' disabled='true'/></td>
			</tr>
		</table>
	</body>
	<script>
		var sym = ["+", "-", ":", "x"];
		var dvd = [1, 212, 31, 412, 51, 6123, 71, 8124, 913]; //pembagian perlu angka khusus, arti isinya misal 9, bisa dibagi dengan 1, 3, dan 9, maka ditulis 913
		var hitMundurInterval, jawaban, rndSym, rndTmp;
		function mulaiBaru() { //mulai permainan
			clearInterval(hitMundurInterval);
			fungsiTombol("disabled", false); //enable semua tombol jawaban
			waktu.innerHTML = 60; //waktu dalam permainan, disini 60 detik
			skor.innerHTML = 0; //skor kembali ke 0 tiap mulai baru
			acakAngka(); //megacak angka
			mulaiBtn.disabled = true;
			stopBtn.disabled = false;
			hitMundurInterval = setInterval("hitungMundur();", 1000); //hitung mundur dengan kecepeatan 1000ms (1 detik)
		}
		function hitungMundur() { //hitung mundur
			if (waktu.innerHTML == "0") { //jika waktu habis
				hentikanPermainan();
				alert("Waktu habis!\nSkor: " + skor.innerHTML);
				mulaiBtn.disabled = false;
				stopBtn.disabled = true;
				return false;
			}
			waktu.innerHTML = parseInt(waktu.innerHTML) - 1; //kurangi 1 tiap detik
		}
		function hentikanPermainan() { //untuk tombol 'menyerah' atau saat waktu habis
			clearInterval(hitMundurInterval); //hentikan pewaktu
			fungsiTombol("disabled", true); //disable semua tombol jawaban
			mulaiBtn.disabled = false;
			stopBtn.disabled = true;
		}
		function acakAngka() {
			fungsiTombol("value", "?");
			angka1.innerHTML = Math.floor(Math.random() * 9);
			simbol.innerHTML = sym[Math.floor(Math.random() * 4)];
			angka2.innerHTML = Math.floor(Math.random() * 9);
			if (simbol.innerHTML == ":") { //jika pembagian
				rndTmp = dvd[Math.floor(Math.random() * 9)]; //ambil dari array dvd (divide)
				angka1.innerHTML = rndTmp.toString().substr(0, 1);
				angka2.innerHTML = rndTmp.toString().substr(Math.floor(Math.random() * rndTmp.toString().length), 1);
			}
			if (simbol.innerHTML == "-" && (parseInt(angka1.innerHTML) < parseInt(angka2.innerHTML))) { //jika minus (-) dan angka1 lebih kecil
				jawaban = parseInt(angka1.innerHTML);
				angka1.innerHTML = angka2.innerHTML;
				angka2.innerHTML = jawaban;
			}
			jawaban = hitungString(parseInt(angka1.innerHTML), simbol.innerHTML, parseInt(angka2.innerHTML));
			document.getElementById("jawaban" + (Math.floor(Math.random() * 3) + 1)).value = jawaban; //megacak tombol yang benar
			for (var i = 1; i <= 4; i++) {
				if (document.getElementById("jawaban" + i).value == "?") { //mengisi semua tombol jawaban
					if (i > jawaban) { //simbol + atau -, jika i > jawaban maka simbol +
						rndSym = "+";
					} else {
						rndSym = sym[Math.floor(Math.random() * 2)]; //simbol random antara - atau +
					}
					document.getElementById("jawaban" + i).value = hitungString(jawaban, rndSym, i);
				}
			}
		}
		function cekJawaban(elmVal) {
			if (parseInt(elmVal) == jawaban) {
				skor.innerHTML = parseInt(skor.innerHTML) + 2; //benar
			} else {
				skor.innerHTML = parseInt(skor.innerHTML) - 1; //salah
			}
			acakAngka(); //acak
		}
		function hitungString(nA, sY, nB) { //menghitung dari 3 sring (angka1, simbol, angka2)
			if  (sY == "+") {
				return nA + nB;
			} else if  (sY == "-") {
				return nA - nB;
			} else if  (sY == ":") {
				return nA / nB;
			} else {
				return nA * nB;
			}
		}
		function fungsiTombol(act, val) { //fungsi tombol, disabled atau value, dengan isi (val) = true / false / "string"
			jawaban1[act] = val;
			jawaban2[act] = val;
			jawaban3[act] = val;
			jawaban4[act] = val;
		}
	</script>
</html>

Wednesday, March 25, 2015

Kode Warna HTML

Assalamualaikum Wr. Wb. Kali ini saya akan menjelaskan tentang Warna di HTML, tentu kita sudah banyak melihat warna di HTML tetapi mungkin kita belum tahu bagaimana mewarnai HTML, sebenarnya warna HTML menggunakan kode CSS background-color: [warna] untuk warna background dan color: [warna] untuk warna dalam (biasanya teks dalam elemen), nah diisi apa [warna] tersebut? disini [warna] bisa diisi dengan red, green, blue, yellow, dll..., tetapi ada juga warna yang tidak bisa ditulis nama warnanya, kita gantikan dengan kode #RRGGBB, contoh warna biru berarti ditulis #0000FF, kode tersebut menggunakan angka 0-255 yang ditulis dalam bentuk hexadesimal 00-FF yang berarti intensitas warnanya, semakin besar angka(hex) semakin terang(jelas) warnanya, baris pertama mewakili RED #RR----, kedua mewakili GREEN #--GG-- dan ketiga mewakili blue #----BB.

Disini berarti warna dibuat dengan kombinasi warna, misal warna kuning ditulis #FFFF00, kenapa? karena kuning adalah campuran merah dengan hijau, jadi kita buat birunya menjadi 00 sehingga ditulis #FFFF00, FF bisa diganti dengan jumlah berapa saja asalkan dalam bentuk hexa desimal (FF = 255, FE = 254, FD = 253, dst --- 00 = 0).

Nah, bagaimana dengan warna yang transparan? Tentu tidak bisa menggunakan warna transparan dengan kode warna diatas (sebenarnya bisa tetapi kita perlu menambahkan opacity: [jumlah] di CSS tetapi mempengaruhi semua isi elemen), kita perlu kode [warna] yang ditulis dengan rgba([R], [G], [B], [A]) dengan aturan depan yg sama yaitu background-color: [warna] untuk warna background dan color: [warna] untuk warna dalam (biasanya teks dalam elemen), nah diisi apa [warna], tetapi apa itu [A]? [A] adalah Alpha atau transparannya, bisa diisi dengan angka desimal 0-1, hah, cuma 0 dan 1? Tidak 0-1 artinya bisa diisi dengan 0.0-1.0, semakin kecil nilainya semakin transparan, misal rgba(126, 126, 126, 0.5). kenapa RGB-nya diisi dengan desimal biasa? Karena kita menggunakan kode rgba maka cara penulisannya berbeda, dengan kode biasa (#) memang ditulis hexadesimal, tetapi dengan rgba ini kita menulisnya desimal biasa yaitu antara 0-255, dan aturannya sama, semakin besar angka semakin tampak warnanya.

Disini saya membuat demo warna sederhana yang akan membuat kita mengetahui warna dengan cepat:

R
G
B
A

RGB:
RGBA:

Anda bisa membuat warna sesuka Anda dengan menarik Slider diatas, warna dan kode akan langsung berubah sesuai dengan nilai yang diberikan. mungkin ada yang membutuhkan HTML diatas untuk digunakan secara offline, saya berikan source codenya.

Source, simpan dengan ekstensi "*.HTML":

<!DOCTYPE html>
<html>
	<head>
		<title>Kode Warna HTML</title>
		<style>
			div.kodeWarnaDiv {
				font-face: arial;
				font-size: 14px;
				font-weight: bold;
				width: 60px;
			}
			#sampleKodeWarna {
				width: 100%;
				height: 100%;
				background-color: #000000;
			}
		</style>
	</head>
	<center>
	<body>
		<table border='0' cellSpacing='3' cellPadding='0'>
			<tr>
				<td width='60px' height='16px'>
					<div class='kodeWarnaDiv'>R</div>
				</td>
				<td width='200px' height='16px' align='center'>
					<input type='range' min='0' max='255' style='width: 180px;' id='sliderWarnaRed' value='0' onInput='changeValue(this.id);' onChange='changeValue(this.id);'/>
				</td>
				<td width='30px' height='16px' align='right'>
					<input type='text' style='width: 30px; text-align: center;' readOnly='true' id='kode1WarnaRed' value='00'/>
				</td>
				<td width='30px' height='16px' align='right'>
					<input type='text' style='width: 30px; text-align: center;' readOnly='true' id='kode2WarnaRed' value='0'/>
				</td>
			</tr>
			<tr>
				<td width='60px' height='16px'>
					<div class='kodeWarnaDiv'>G</div>
				</td>
				<td width='200px' height='16px' align='center'>
					<input type='range' min='0' max='255' style='width: 180px;' id='sliderWarnaGreen' value='0' onInput='changeValue(this.id);' onChange='changeValue(this.id);'/>
				</td>
				<td width='30px' height='16px' align='right'>
					<input type='text' style='width: 30px; text-align: center;' readOnly='true' id='kode1WarnaGreen' value='00'/>
				</td>
				<td width='30px' height='16px' align='right'>
					<input type='text' style='width: 30px; text-align: center;' readOnly='true' id='kode2WarnaGreen' value='0'/>
				</td>
			</tr>
			<tr>
				<td width='60px' height='16px'>
					<div class='kodeWarnaDiv'>B</div>
				</td>
				<td width='200px' height='16px' align='center'>
					<input type='range' min='0' max='255' style='width: 180px;' id='sliderWarnaBlue' value='0' onInput='changeValue(this.id);' onChange='changeValue(this.id);'/>
				</td>
				<td width='30px' height='16px' align='right'>
					<input type='text' style='width: 30px; text-align: center;' readOnly='true' id='kode1WarnaBlue' value='00'/>
				</td>
				<td width='30px' height='16px' align='right'>
					<input type='text' style='width: 30px; text-align: center;' readOnly='true' id='kode2WarnaBlue' value='0'/>
				</td>
			</tr>
			<tr>
				<td width='60px' height='16px'>
					<div class='kodeWarnaDiv'>A</div>
				</td>
				<td width='200px' height='16px' align='center'>
					<input type='range' min='0' max='100' style='width: 180px;' id='sliderWarnaAlpha' value='100' onInput='changeValue(this.id);' onChange='changeValue(this.id);'/>
				</td>
				<td width='68px' height='16px' align='right' colSpan='2'>
					<input type='text' style='width: 68px; text-align: center;' readOnly='true' id='kodeWarnaAlpha' value='1.0'/>
				</td>
			</tr>
			<tr>
				<td colSpan='4' height='60px' align='center'>
					<div id='sampleKodeWarna'></div>
				</td>
			</tr>
			<tr>
				<td width='60px' height='16px'>
					<div class='kodeWarnaDiv'>RGB:</div>
				</td>
				<td colSpan='3' width='280px' height='30px' align='right'>
					<input type='text' style='width: 280px; text-align: center;' readOnly='true' id='outputKodeWarnaRGB' value='#000000'/>
				</td>
			</tr>
			<tr>
				<td width='60px' height='16px'>
					<div class='kodeWarnaDiv'>RGBA:</div>
				</td>
				<td colSpan='3' width='280px' height='30px' align='right'>
					<input type='text' style='width: 280px; text-align: center;' readOnly='true' id='outputKodeWarnaRGBA' value='rgba(0, 0, 0, 1.0)'/>
				</td>
			</tr>
		</table>
	</body>
	</center>
	<script>
		function changeValue(elmId) {
			if (elmId.substring(11, elmId.length) != 'Alpha') {
				var hexKodeWarna = parseInt(document.getElementById(elmId).value).toString(16);
				if (hexKodeWarna.length == 1) {
					hexKodeWarna = '0' + hexKodeWarna;
				}
				document.getElementById('kode1' + elmId.substring(6, elmId.length)).value = hexKodeWarna.toUpperCase();
				document.getElementById('kode2' + elmId.substring(6, elmId.length)).value = document.getElementById(elmId).value;
				outputKodeWarnaRGB.value = '#' + kode1WarnaRed.value + kode1WarnaGreen.value + kode1WarnaBlue.value;
			} else {
				kodeWarnaAlpha.value = parseInt(document.getElementById(elmId).value) / 100;
				if (kodeWarnaAlpha.value == '1') {
					kodeWarnaAlpha.value = kodeWarnaAlpha.value + '.0';
				} else if (kodeWarnaAlpha.value == '0') {
					kodeWarnaAlpha.value = '0.' + kodeWarnaAlpha.value;
				}
			}
			outputKodeWarnaRGBA.value = 'rgba(' + sliderWarnaRed.value + ', ' + sliderWarnaGreen.value + ', ' + sliderWarnaBlue.value + ', ' + kodeWarnaAlpha.value + ')';
			sampleKodeWarna.style.backgroundColor = outputKodeWarnaRGBA.value;
		}
	</script>
</html>

Friday, March 20, 2015

Efek Transisi CSS (Transition Effect CSS)

Assalamualaikum Wr. Wb. Disini saya akan menjelaskan cara termudah untuk mendapatkan efek transisi, yaitu dengan menggunakan kode transition-duration:[waktu][s][ms]; pada CSS, sehingga waktu kita mengubah lokasi, bentuk atau memutar elemen, maka akan ada efek sebelum elemen berubah / berpindah, misalnya:

MUTER
transisi:			ms
putaran:			deg

Pada contoh diatas kita dapat langsug melihat hasil transisi setelah mengubah nilainya dengan menyeret kursor ke dalam lingkran diatas.
Contoh nilai transisi diatas adalah 500ms maka ditulis transition-duration:500ms; jika dalam hitungan milidetik(ms) atau transition-duration:0.5s; jika dalam hitungan detik(s).

Disini saya memberikan contoh menu sederhana yang akan terlihat profesional dengan efek transisi

Dengan Efek Transisi:

Tanpa Efek Transisi:

Bisa dilihat perbedaan yang sangat jelas, padahal kedua contoh menggunakan HTML dan JS yang sama hanya berbeda pada efek transisinya saja.

Adapun efek transisi yang menggunakan transition:[animasikan] [waktu] [mode];, animasikan berarti apa yang dianimasikan (diberi efek transisi), bisa diisi dengan all, width, height, opacity, dll... tetapi kebanyakan dan biasanya diisi dengan all, untuk waktu diisi sama dengan transition-duration: diatas, dan untuk mode bisa diisi dengan ease (efek default), ease-in (pelan disaat mulai animasi dan akan terus bertambah cepat), ease-out (melambat diakhir animasi), ease-in-out (pelan saat mulai dan akhir), linear [waktu] (pelan menurut waktu linear atau akan seperti ease jika tanpa waktu), contoh transition:all 500ms ease-in-out;

Jam Analog Tanpa Gambar (Analog Clock Without Image) HTML

Daripada nganggur bikin ginian aja, karena males bikin script lagi untuk gerakan jam dan logika pasaran (hari jawa) kopas dari Post Lama Saya dengan sedikit penambahan.

WARNING: Tidak bekerja di IE, untuk IE pake aja Raphaël—JavaScript Library

Source Code

<!DOCTYPE html>
<html>
	<head>
		<title>Jam Analog</title>
		<style>
			.circleBase {
				border-radius: 50%; /* lingkaran */
				width: 20px;
				height: 20px;
				background: #ff0000;
			}
			.clockBody {
				width: 400px;
				height: 400px;
				background: #dcdcff;
				border: 16px solid #00afff;
			}
			.clockLine {
				width: 4px;
				height: 20px;
				background: #00afff;
				position: absolute;
				transform-origin: 50% 100%;
			}
			.clockFont {
				font-family: arial;
				font-size: 40px;
				font-weight: bold;
				width: 280px;
				background: #dcdcff;
				color: #00afff;
				position: absolute;
			}
			.hourHand {
				width: 12px;
				height: 156px;
				background: #0000ff;
				position: absolute;
				margin-top: 44px;
				margin-left: 194px;
				transform-origin: 50% 136px;
				border-radius: 50% 50% 0 0; /* setengah lingkaran */
				outline: 1px solid transparent;
			}
			.minHand {
				width: 8px;
				height: 188px;
				background: #00cc00;
				position: absolute;
				margin-top: 24px;
				margin-left: 196px;
				transform-origin: 50% 156px;
				border-radius: 50% 50% 0 0; /* setengah lingkaran */
				outline: 1px solid transparent;
			}
			.secHand {
				width: 4px;
				height: 216px;
				background: #ff0000;
				position: absolute;
				margin-top: 4px;
				margin-left: 198px;
				transform-origin: 50% 176px;
				border-radius: 50% 50% 0 0; /* setengah lingkaran */
				outline: 1px solid transparent;
				transition-duration: 100ms;
			}
		</style>
	</head>
	<body>
		<div class="circleBase clockBody"> <!-- elemen utama (lingkaran jam) -->
			<center>
			<!-- elemen didalam jam -->
					<div class="clockLine" style='position: relative;'></div>
					<div class="clockLine" style='margin: 4px 288px; transform: rotate(30deg);'></div>
					<div class="clockLine" style='margin: 70px 354px; transform: rotate(60deg);'></div>
					<div class="clockLine" style='margin: 160px 378px; transform: rotate(90deg);'></div>
					<div class="clockLine" style='margin: 250px 354px; transform: rotate(120deg);'></div>
					<div class="clockLine" style='margin: 316px 288px; transform: rotate(150deg);'></div>
					<div class="clockLine" style='margin: 360px 198px;'></div>
					<div class="clockLine" style='margin: 316px 108px; transform: rotate(210deg);'></div>
					<div class="clockLine" style='margin: 250px 42px; transform: rotate(240deg);'></div>
					<div class="clockLine" style='margin: 160px 18px; transform: rotate(270deg);'></div>
					<div class="clockLine" style='margin: 70px 42px; transform: rotate(300deg);'></div>
					<div class="clockLine" style='margin: 4px 108px; transform: rotate(330deg);'></div>
					<div class="clockFont" id='digiDate' style='margin: 40px 60px; font-size: 24px;'></div>
					<div class="clockFont" style='margin: 108px 60px; font-size: 20px;'>
						<a href='http://faid-alfarisi.blogspot.com' target='_blank' style='color: #00afff;'>
							&copy; 2015 Faid Alfarisi
						</a>
					</div>
					<div class="clockFont" id='digiClock' style='margin: 264px 60px;'></div>
					<div class="hourHand" id='hrHnd'></div>
					<div class="minHand" id='mnHnd'></div>
					<div class="secHand" id='scHnd'></div>
					<div class="circleBase" style='position: absolute; margin: 170px 190px;'></div>
					<!-- elemen didalam jam -->
			</center>	
		</div>
	</body>
	<script>
		var dN = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu"]; //hari
		var mN = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nop", "Des"]; //bulan
		var pN = ["Legi", "Pahing", "Pon", "Wage", "Kliwon"]; //pasaran (hari jawa)

		function refreshClock() {
			//ambil waktu saat ini
			dtCl = new Date(); //fungsi Date()
			hrCl = dtCl.getHours(); //jam
			mnCl = dtCl.getMinutes(); //menit
			scCl = dtCl.getSeconds(); //detik
			dyCl = dtCl.getDate(); //tanggal
			mtCl = dtCl.getMonth(); //bulan
			yrCl = dtCl.getFullYear(); //tahun
			//ambil waktu saat ini

			//putar elemen menit dan jam
			hrHnd.style.transform = "rotate(" + ((30 * hrCl) + (mnCl / 2)) + "deg)";
			mnHnd.style.transform = "rotate(" + ((6 * mnCl) + (scCl / 10)) + "deg)";
			//putar elemen menit dan jam

			//putar dan haluskan gerakan detik
			if (scCl == 0) {
				if (scHnd.style.transform != "rotate(0deg)") {
					scHnd.style.transform = "rotate(360deg)";
					setTimeout(function() {
						scHnd.style.transitionDuration = "0ms";
						scHnd.style.transform = "rotate(0deg)";
					}, 100);
				}
			} else {
				if (scHnd.style.transitionDuration != "100ms") {
					scHnd.style.transitionDuration = "100ms";
				}
				scHnd.style.transform = "rotate(" + (6 * scCl) + "deg)";
			}
			//putar dan haluskan gerakan detik

			//penambahan 0 didepan bila angka < 10 (mis. 9 menjadi 09)
			if (dyCl < 10) {
				dyCl = "0" + dyCl;
			}
			if (hrCl < 10) {
				hrCl = "0" + hrCl;
			}
			if (mnCl < 10) {
				mnCl = "0" + mnCl;
			}
			if (scCl < 10) {
				scCl = "0" + scCl;
			}
			//penambahan 0 didepan bila angka < 10 (mis. 9 menjadi 09)

			//tampilan jam dan tanggal digital
			pScL = (((new Date(yrCl, mtCl, dyCl).getTime() - new Date(100, 0, 1).getTime()) / (24 * 60 * 60 * 1000)) % 5); //hitung pasaran
			digiClock.innerHTML = hrCl + ":" + mnCl + ":" + scCl; //jam digital
			digiDate.innerHTML = dyCl + "&nbsp;" + mN[mtCl] + "&nbsp;" + yrCl + "<br/>" + dN[dtCl.getDay()] + "&nbsp;" + pN[Math.ceil(pScL)]; //tanggal + pasaran
			//tampilan jam dan tanggal digital

			setTimeout("refreshClock();", 250); //panggil fungsi (untuk hasil terbaik buat waktu timeout < 1000ms dan > 100ms)
		}

		refreshClock(); //panggil fungsi
	</script>
</html>

Thursday, March 12, 2015

Offline Javascript Obfuscator

Hmm, back from busy life, i search for Offline JS Obfuscator (javanese people said: 'niku gara2 kuota mung dibatesi jam') with the same method as www.javascriptobfuscator.com but found nothing, so i learn how they obfuscate the JS and try to make it myself, i did it but NOT COMPLETED at all, i just make it to obfuscate string-only and maybe you still face some error here, this is alpha version, because i just take a hour to code this.

function() { var a="ABC"; var b="DEF"; alert(a+b); }

you have to select string quotes type (" or ') in order to use this (i said this is alpha version, no automatic decide), for example if u frequently use var a='ABC' u should use '%string%' option.

this is the source for reference and i hope someone will continue this before me, i'm busy about task u know!! :))

Save as "*.HTA" extension

<html>
	<head>
	<title>JS String Obfuscator</title>
		<script type='text/javascript'>
			// -- THIS IS JUST TO SET THE HTA WINDOW SIZE -- //
			sW = screen.width;
			sH = screen.height;
			window.moveTo(sW, sH);
			window.resizeTo(854, 374);
			// -- THIS IS JUST TO SET THE HTA WINDOW SIZE -- //
		</script>
		<!-- just HTA app settings -->
		<hta:application
			applicationName="JSObfuscator"
			border="thin"
			id="050100101001001111"
			innerBorder="no"
			maximizeButton="no"
			scroll="no"
			singleInstance="yes"
			version="0.5"/>
		<!-- just HTA app settings -->
		<meta http-equiv='MSThemeCompatible' content='yes'/>
	</head>
	<body topMargin='0' leftMargin='0'>
		<table width='854px' height='374px' border='1' borderColor='#808080' cellSpacing='0' cellPadding='0'>
			<tr height='344px'>
				<td align='center'>
					<textarea id='inp' cols='50' rows='20' wrap="off">function() {
	var a="ABC";
	var b="DEF";
	alert(a+b);
}</textarea>
				</td>
				<td align='center'>
					<textarea id='out' cols='50' rows='21' readOnly='true'></textarea>
				</td>
			</tr>
			<tr>
				<td align='center'>
					<input type='button' onClick='obfuscateJS();' style='width:100%;height=100%;' value='Obfuscate JS'/>
				</td>
				<td align='center'>
					<select id='sel' style='width:100%;height=100%;'>
						<option>--[select string quotes type]--</option>
						<option>" %string% "</option>
						<option>' %string% '</option>
					</select>
				</td>
			</tr>
		</table>
	</body>
	<script type='text/javascript'>
		// -- THIS IS JUST TO SET THE HTA WINDOW SIZE -- //
		iW = (854 + (854 - document.body.offsetWidth));
		iH = (374 + (374 - document.body.offsetHeight));
		window.resizeTo(iW, iH);
		window.moveTo(((sW - iW) / 2), ((sH - iH) / 2));
		// -- THIS IS JUST TO SET THE HTA WINDOW SIZE -- //

		sel.selectedIndex = 1;

		function obfuscateJS() {
			if (sel.selectedIndex == 0) { //set the quotes
				alert("select string quotes!");
				return;
			} else if (sel.selectedIndex == 1) {
				qts = '"';
			} else {
				qts = "'";
			}
			var txt = inp.value;
			var tmp = txt;
			var vrb = "_0xf41d=[" //create an array for obfuscate
			var arr = new Array(); //new unlimited array
			var nmb = 0; //this is array number in obfscated JS
			while (tmp.search(qts) != -1) { //if found any quotes
				if (sel.selectedIndex == 1) {
					arr[nmb] = tmp.match(/"([^"]+)"/)[1]; //get string inside ""
				} else {
					arr[nmb] = tmp.match(/'([^']+)'/)[1]; //get string inside ''
				}
				for (var i = 0; i <= 1; i++) { //replace only 2 quotes
					tmp = tmp.replace(qts, '');
				}
				txt = txt.replace(qts + arr[nmb] + qts, '_0xf41d[' + nmb + "]"); //replace string as array call _0xf41d[ArrNum]
				nmb += 1;
			}
			for (var i = 0; i < arr.length; i++) {
				vrb += '"' + toHex(arr[i]) + '",'; //convert a char to hex
			}
			vrb = vrb.substr(0, vrb.length - 1) + "];";
			out.value = (vrb + txt).replace(/(?:\r\n|\r|\n)/g, ';').replace(/(?:\r\t|\r|\t)/g, '').replace('_0xf41d=];', ''); //replace enter, tab, and incomplete array _0xf41d=];
			out.value = out.value.replace(/;;|{;|};/g, function(x){return x.substring(0, 1);}); //replace {; }; ;; wtih that first substring(0,1)
		}

		function toHex(str) { //convert to hex with \xHEX return
			var hex = "";
			for (var i = 0; i < str.length; i++) {
			hex += '\\x' + str.charCodeAt(i).toString(16);
			}
			return hex;
		}
	</script>
</html>

My Blog Menu