Cara Membuat Live Scripting Menggunakan jQuery

Hai balik lagi di tutorial pemrograman Dumet School, teman teman masih semangat yah belajar pemrograman di Dumet School, nah pada kasus kali ini kita akan membahas tentang Bagaimana Cara Membuat Live Scripting Menggunakan jQuery, oke pada kali ini kita akan bermain main dengan scripting pada html jadi idenya itu kita akan membuat sebuah script html dengan hasil yang ditampilakn secara real time atau secara langsung, tanpa kita mengetikan didalam texteditor melainkan mengetikan didalam tampilannya layaknya kita membuat sebuah CMS secara online

oke mungkin ideNya akan seperti itu, penasaran bagaimana caranya membuatny, caranya sangat simple yah kita cukup menuliskan beberapa fungsi saja, langsung saja yu kita mulai, coba teman teman buatkan file baru bernama index.html atau bisa bebas terserah teman teman, jika sudah coba tambahkan script berikut :

<style type="text/css">
			.box { float: left; width: 48%; border:1px solid #ccc; padding:10px; max-height: 250px;}
			.live { width: 98%; border:1px solid red; min-height: 400px }
			iframe { width: 100%; border:.5px solid blue; min-height: 400px }
		</style>
<div class="container">
			<div id="box">
				<textarea class="box html" placeholder="Enter HTML here"></textarea>
				<textarea class="box css" placeholder="Enter CSS here"></textarea>
				<div class="box live">
					<iframe id="live_update">
						<!DOCTYPE html>
						<html lang="en">
							<head><meta charset="UTF-8"></head>
							<body></body>
						</html>
					</iframe>
				</div>
			</div>
		</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
			$(function(){
				function showHtml(){

					var html = $(".html").val();
					return html;
				}

				function showCss () {

					var css = $(".css").val();
					return css;
				}

				$(".box").on("keyup", function(){

					var target = $("#live_update")[0].contentWindow.document;
					target.open();
					target.close();

					var html = showHtml();
					var css = showCss();

					$("body", target).append(html);
					$("head", target).append("<style>" + css + "</style>");
				});
			});
		</script>

Jika semua sudah diketikan teman teman save dan jalankan dibrowsernya, coba teman teman masukkan script html atau css didalam tampilannya, maka dengan langsung tampilan yang teman teman ketikan akan ditampilkan dibawahnya, oke cukup mudah bukan, sekian tutorial tentang Bagaimana Cara Membuat Live Scripting Menggunakan jQuery. Sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA