Mungkin bagi sebagian sudah tidak asing dengan fitur yang sudah disediakan oleh jQuery UI ini. tapi saya akan mencoba membuat sebuah form multi select dan membaca inputan atas pilihan kita pada form tersebut.
form ini sangat berguna ketika kita ingin memilih banyak data, konsep kerja seperti dropdown, hanya saja dengan ini kita bisa memilih inputan lebih dari 1.
langsung saja berikut kodenya
index.html
<html>
<head>
<title>Multi Select</title>
<link rel="stylesheet" href="multiselect/docsupport/style.css">
<link rel="stylesheet" href="multiselect/docsupport/prism.css">
<link rel="stylesheet" href="multiselect/chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
<form method="post" action="proses.php">
<?php
$array = array("1"=>"deden","2"=>"rahmi");
echo form_multiselect('isi[] data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4"',$array);
?>
<input type="submit">
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="multiselect/chosen.jquery.js" type="text/javascript"></script>
<script src="multiselect/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</body>
</html>
untuk source plugin akan dilampirkan pada bagian akhir artikel ini.
lalu buat proses php untuk membaca inputannya
proses.php
<?php
foreach($_POST['isi'] as $row){
echo $row;
}
?>
selamat mencoba , semoga bermanfaat.
link download http://www.4shared.com/zip/5hjI1_28ba/multiselect.html
Showing posts with label JS. Show all posts
Showing posts with label JS. Show all posts
Sunday, January 12, 2014
Thursday, January 9, 2014
Upload File Ala Facebook
Mungkin saat kita memilih file untuk di upload tidak akan nampak gambar yang kita pilih sebelum di upload. nah pada artikel kali ini, saya akan mencoba membuat sebuah upload dimana ada thumbnailnya / tampilan sebelum kita upload . ini berguna untuk meminimalisir kesalahan dalam mengupload file. sangat sederhana sekali, dimana kita menggunakan proses upload pada php dan fungsi thumbnail pada javascript.
sebelum memulai, buat satu folder untuk menampung foto yang akan diupload, beri saja nama uploads.
berikut kode HTMLnya
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<style>
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
</style>
</head>
<body>
<div id="main">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload Files!</button>
<div id="response"></div>
<ul id="image-list">
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>
pastikan anda terhubung pada internet, karena pada contoh diatas kode
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> mengambil source dari link terkait.
lalu ini file php untuk proses pemindahan file ke server
upload.php
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}
echo "<h2>Successfully Uploaded Images</h2>";
lalu ini file js. untuk membuat thumbnailnya
upload.js
(function () {
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());
tampilan dibawah ini merupakan hasil dari kode diatas
sebelum memulai, buat satu folder untuk menampung foto yang akan diupload, beri saja nama uploads.
berikut kode HTMLnya
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<style>
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
</style>
</head>
<body>
<div id="main">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload Files!</button>
<div id="response"></div>
<ul id="image-list">
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>
pastikan anda terhubung pada internet, karena pada contoh diatas kode
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> mengambil source dari link terkait.
lalu ini file php untuk proses pemindahan file ke server
upload.php
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}
echo "<h2>Successfully Uploaded Images</h2>";
lalu ini file js. untuk membuat thumbnailnya
upload.js
(function () {
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());
tampilan dibawah ini merupakan hasil dari kode diatas
Tuesday, January 7, 2014
Membuat Peta Dengan Google Maps
sebenarnya sudah lama ingin memposting artikel mengenai ini, hanya saja.. ya biasa masalah deadline dan sebagainya yang menghambat untuk meluncurkan tulisan mengenai maps ini. mumpung waktunya pas semoga bisa bermanfaat :D
dengan adanya google maps, kita bisa memanfaatkan API yang sudah dengan baiknya google buat kita bisa menggunakannya secara free. sekarang kita akan coba membuat peta yang menampilkan kawasan Indonesia sebagai center view (pusat perhatian pada saat website di buka). berikut ini kodenya
peta.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Google Maps</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '1ag1g0AguWSczmuXhOudN1XMXTCys8_gwjiUIfg';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-6.327827980262304, 106.67339647284699),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:650px; height:450px"></div>
</body>
</html>
hasil dari kode diatas adalah
dengan adanya google maps, kita bisa memanfaatkan API yang sudah dengan baiknya google buat kita bisa menggunakannya secara free. sekarang kita akan coba membuat peta yang menampilkan kawasan Indonesia sebagai center view (pusat perhatian pada saat website di buka). berikut ini kodenya
peta.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Google Maps</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '1ag1g0AguWSczmuXhOudN1XMXTCys8_gwjiUIfg';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-6.327827980262304, 106.67339647284699),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:650px; height:450px"></div>
</body>
</html>
hasil dari kode diatas adalah
Apa Itu JSON ?
dari 2 artikel yang telah dibuat, mungkin anda bertanya-tanya belum tau apa itu JSON yang sesungguhnya, berikut kutipan (sumber http://id.wikipedia.org/wiki/JSON)
JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation (bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.
Walaupun JSON didasarkan pada subset bahasa pemrograman JavaScript (secara spesifik, edisi ketiga standar ECMA-262, Desember 1999 [1]) dan umumnya digunakan dengan bahasa tersebut, JSON dianggap sebagai format data yang tak tergantung pada suatu bahasa. Kode untuk pengolahan dan pembuatan data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs json.org menyediakan daftar komprehensif pengikatan JSON yang tersedia, disusun menurut bahasa.
JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation (bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.
Walaupun JSON didasarkan pada subset bahasa pemrograman JavaScript (secara spesifik, edisi ketiga standar ECMA-262, Desember 1999 [1]) dan umumnya digunakan dengan bahasa tersebut, JSON dianggap sebagai format data yang tak tergantung pada suatu bahasa. Kode untuk pengolahan dan pembuatan data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs json.org menyediakan daftar komprehensif pengikatan JSON yang tersedia, disusun menurut bahasa.
Mengambil data JSON dengan JQuery (JSON Part 2)
pada artikel sebelumnya telah dibahas mengenai parsing data dari array hasil query menjadi JSON. sekarang akan dibahas lebih lanjut agar data JSON tadi bisa tampil pada halaman website.
sebenarnya sama saja dengan code pada artikel sebelumnya, hanya saja sedikit dimodifikasi sesuai dengan data yang akan ditampilkan.
ambildata.php
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
lalu ini kode dari tampilannya
<html>
<head>
<title>json + jquery</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var i;
var from = new Array();
var to = new Array();
var sent = new Array();
function view() {
$.ajax({
url: 'ambildata.php',
dataType: 'json',
cache: false,
success: function(msg){
for(i=0;i<msg.data.length;i++){
from[i] = msg.data[i].from;
to[i] = msg.data[i].to;
sent[i] = msg.data[i].sent;
$('#hasil_json').html('<p> FROM: ' + from + '</p>');
$('#hasil_json').append('<p>TO : ' + to+ '</p>');
$('#hasil_json').append('<p> SENT: ' + sent+ '</p>');
}
}
});
}
view();
});
</script>
</head>
<body>
<div id='hasil_json'></div>
</body>
</html>
untuk plugin jquerynya bsa d download di http://jquery.com/download/
selamat mencoba semoga bermanfaat :D
sebenarnya sama saja dengan code pada artikel sebelumnya, hanya saja sedikit dimodifikasi sesuai dengan data yang akan ditampilkan.
ambildata.php
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
lalu ini kode dari tampilannya
<html>
<head>
<title>json + jquery</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var i;
var from = new Array();
var to = new Array();
var sent = new Array();
function view() {
$.ajax({
url: 'ambildata.php',
dataType: 'json',
cache: false,
success: function(msg){
for(i=0;i<msg.data.length;i++){
from[i] = msg.data[i].from;
to[i] = msg.data[i].to;
sent[i] = msg.data[i].sent;
$('#hasil_json').html('<p> FROM: ' + from + '</p>');
$('#hasil_json').append('<p>TO : ' + to+ '</p>');
$('#hasil_json').append('<p> SENT: ' + sent+ '</p>');
}
}
});
}
view();
});
</script>
</head>
<body>
<div id='hasil_json'></div>
</body>
</html>
untuk plugin jquerynya bsa d download di http://jquery.com/download/
selamat mencoba semoga bermanfaat :D
Parsing data menjadi JSON (Javascript Object Notation)
Salah satu yang penting dalam website yaitu JSON. kenapa harus JSON ? karena JSON merubah / parsing data menjadi lebih ringan. karena JSON sendiri merupakan bahasa yang bekerja pada sisi client sama halnya seperti AJAX. tidak langsung mengakses server tetapi ada penghubung, yakni javascript. Pada kasus kali ini saya akan membuat sebuah contoh merubah data yang diambil dari sebuah table.
berikut ini query table yang akan digunakan untuk latihan kali ini
CREATE TABLE IF NOT EXISTS `chat` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`from` varchar(255) NOT NULL DEFAULT '',
`to` varchar(255) NOT NULL DEFAULT '',
`message` text NOT NULL,
`sent` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`recd` int(10) unsigned NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=16 ;
INSERT INTO `chat` (`id`, `from`, `to`, `message`, `sent`, `recd`) VALUES
(1, 'johndoe', 'janedoe', 'dwdwdwdwdw', '2014-01-07 10:51:02', 1),
(2, 'janedoe', 'johndoe', 'dwdwdwdwdw', '2014-01-07 10:51:27', 1),
(3, 'janedoe', 'johndoe', 'hry', '2014-01-07 10:51:49', 1),
(4, 'janedoe', 'janedoe', 'efefefe', '2014-01-07 10:51:52', 1),
(5, 'janedoe', 'janedoe', 'fefefefe', '2014-01-07 10:52:08', 1),
(6, 'janedoe', 'johndoe', 'jon', '2014-01-07 10:52:44', 1),
(7, 'johndoe', 'janedoe', 'what', '2014-01-07 10:53:01', 1),
(8, 'janedoe', 'johndoe', 'nothing beb', '2014-01-07 10:53:08', 1),
(9, 'johndoe', 'janedoe', 'efegegegeg', '2014-01-07 11:23:06', 1),
(10, 'janedoe', 'johndoe', 'dwdwdwdw', '2014-01-07 11:23:16', 1),
(11, 'janedoe', 'johndoe', 'asasasa', '2014-01-07 11:23:20', 1),
(12, 'janedoe', 'johndoe', 'dedede', '2014-01-07 11:36:18', 1),
(13, 'johndoe', 'janedoe', 'wdlmwldmwld', '2014-01-07 11:43:24', 1),
(14, 'johndoe', 'janedoe', 'wdnwkdwnd', '2014-01-07 11:43:25', 1),
(15, 'johndoe', 'johndoe', 'wdwdwl', '2014-01-07 11:43:27', 1);
lalu ini kode untuk memparsing data menjadi JSON
ambildata.php
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"message":"'.strip_tags(trim($x['message'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
"recd":"'.strip_tags(trim($x['recd'])).'"
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$data = mysql_query("SELECT * from chat");
$json = '{"data":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id_chat":"'.$x['id'].'",
"from":"'.strip_tags(trim($x['from'])).'",
"to":"'.strip_tags(trim($x['to'])).'",
"message":"'.strip_tags(trim($x['message'])).'",
"sent":"'.strip_tags(trim($x['sent'])).'",
"recd":"'.strip_tags(trim($x['recd'])).'"
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
hasil dari kode diatas akan seperti pada gambar berikut
terlihat beberapa data seperti isi pada table. pada artikel selanjutnya akan dibahas bagaimana mengambil data tersebut menjadi sebuah tabulasi data. semoga bermanfaat
Saturday, January 4, 2014
Membuat Editor Seperti MS. Word
kali ini saya akan membahas tentang cara membuat editor seperti MS. Word, akan kita gunakan plugin CKEDITOR. silahkan download pada link yang tersedia dibawah artikel ini.
berikut kodenya
<html>
<head>
<title></title>
<link rel="stylesheet" href="ckeditor/contents.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script type="text/javascript" src="ckeditor/editor.js"></script>
</body>
</html>
http://www.4shared.com/zip/xYq5x45fce/ckeditor.html
berikut kodenya
<html>
<head>
<title></title>
<link rel="stylesheet" href="ckeditor/contents.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script type="text/javascript" src="ckeditor/editor.js"></script>
</body>
</html>
http://www.4shared.com/zip/xYq5x45fce/ckeditor.html
Thursday, March 1, 2012
Link With Ajax
Kemarin saya membahas tentang server side nya,nah untuk membuat web kita lebih interaktif saya coba sekarang buat artikel tentang client site nya.
Langsung aja ke script nya hehe :)
di masalah ini kita membutuhkan 2 file untuk melakukan uji coba script ini
buat file index.html
yang isinya sebagai berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arsen Lexdorf" />
<title>Link With Ajax</title>
<script type="text/javascript">
var xml;
//fungsi tersebut untuk pengecekkan browser apa yang kita gunakan
function index(){
//yang ini jika browser yang kita gunakan selain IE
if(window.XMLHttpRequest){
xml=new XMLHttpRequest();
}else{
//yang ini jika browser yang kita gunakan IE
xml=new ActiveXObject("Microsoft.XMLHTTP");
}
return xml;
}
var xmlhttp=index();
//fungi pindah ini digunakan untuk link ke halaman lain tanpa merubah url header di atas
function pindah(){
//yang ini untuk mengambil file pindah.html
xmlhttp.open('GET','pindah.html',true);
xmlhttp.onreadystatechange = function(){
//script ini untuk membuat text loading saat menunggu respon
document.getElementById("tengah").innerHTML="Loading";
if(xmlhttp.readyState==4){
//jika respon benar akan di ambilah file yang pindah.html tadi
document.getElementById("tengah").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
</head>
<body>
<div>
<a href="index.html">Home</a>
<a href="#" onclick="pindah()">Link Ajax</a>
</div>
<div id="tengah">Deydra</div>
</body>
</html>
nah selanjutnya buat file pindah.htmlnya isinya sebagai berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arsen Lexdorf" />
<title>Untitled 2</title>
</head>
<body>
Deden
</body>
</html>
nah coba sja anda klik yang link with ajax,content akan berubah dan url headernya tetap
selamat mencoba
Langsung aja ke script nya hehe :)
di masalah ini kita membutuhkan 2 file untuk melakukan uji coba script ini
buat file index.html
yang isinya sebagai berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arsen Lexdorf" />
<title>Link With Ajax</title>
<script type="text/javascript">
var xml;
//fungsi tersebut untuk pengecekkan browser apa yang kita gunakan
function index(){
//yang ini jika browser yang kita gunakan selain IE
if(window.XMLHttpRequest){
xml=new XMLHttpRequest();
}else{
//yang ini jika browser yang kita gunakan IE
xml=new ActiveXObject("Microsoft.XMLHTTP");
}
return xml;
}
var xmlhttp=index();
//fungi pindah ini digunakan untuk link ke halaman lain tanpa merubah url header di atas
function pindah(){
//yang ini untuk mengambil file pindah.html
xmlhttp.open('GET','pindah.html',true);
xmlhttp.onreadystatechange = function(){
//script ini untuk membuat text loading saat menunggu respon
document.getElementById("tengah").innerHTML="Loading";
if(xmlhttp.readyState==4){
//jika respon benar akan di ambilah file yang pindah.html tadi
document.getElementById("tengah").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
</head>
<body>
<div>
<a href="index.html">Home</a>
<a href="#" onclick="pindah()">Link Ajax</a>
</div>
<div id="tengah">Deydra</div>
</body>
</html>
nah selanjutnya buat file pindah.htmlnya isinya sebagai berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arsen Lexdorf" />
<title>Untitled 2</title>
</head>
<body>
Deden
</body>
</html>
nah coba sja anda klik yang link with ajax,content akan berubah dan url headernya tetap
selamat mencoba
Friday, August 5, 2011
Nebak Zodiak Orang
saya akan coba memberi pencerahan kepada sobat yg pengen bikin ramalan,tp saya cuma sempet nulis sampe zodiaknya (males si)hehe,saya hanya menggunakan pernyatan switch dan case saja,seperti inilah.
<title>Zodiak</title>
<script language="javascript">
function cek()
{
var tanggal=document.x.tanggal.selectedIndex;
var bulan=document.x.bulan.selectedIndex;
var tanggal=document.x.tanggal.selectedIndex;
var bulan=document.x.bulan.selectedIndex;
if (bulan==1 && tanggal <= 19)
{document.x.zodiak.value="Capricorn";}
if (bulan==1 && tanggal >= 20)
{document.x.zodiak.value="Aquarius";}
if (bulan==2 && tanggal <= 18)
{document.x.zodiak.value="Aquarius";}
if (bulan==2 && tanggal >= 19)
{document.x.zodiak.value="Pisces";}
if (bulan==3 && tanggal <= 20)
{document.x.zodiak.value="Pisces";}
if (bulan==3 && tanggal >= 21)
{document.x.zodiak.value="Aries";}
if (bulan==4 && tanggal <= 20)
{document.x.zodiak.value="Aries";}
if (bulan==4 && tanggal >= 21)
{document.x.zodiak.value="Taurus";}
if (bulan==5 && tanggal <= 20)
{document.x.zodiak.value="Taurus";}
if (bulan==5 && tanggal >= 21)
{document.x.zodiak.value="Gemini";}
if (bulan==6 && tanggal <= 21)
{document.x.zodiak.value="Gemini";}
if (bulan==6 && tanggal >= 21)
{document.x.zodiak.value="Cancer";}
if (bulan==7 && tanggal <= 21)
{document.x.zodiak.value="Cancer";}
if (bulan==7 && tanggal >= 22)
{document.x.zodiak.value="Leo";}
if (bulan==8 && tanggal <= 21)
{document.x.zodiak.value="Leo";}
if (bulan==8 && tanggal >= 22)
{document.x.zodiak.value="Virgo";}
if (bulan==9 && tanggal <= 21)
{document.x.zodiak.value="Virgo";}
if (bulan==9 && tanggal >= 22)
{document.x.zodiak.value="Libra";}
if (bulan==10 && tanggal <= 21)
{document.x.zodiak.value="Libra";}
if (bulan==10 && tanggal >= 22)
{document.x.zodiak.value="Scorpio";}
if (bulan==11 && tanggal <= 21)
{document.x.zodiak.value="Scorpio";}
if (bulan==11 && tanggal >= 22)
{document.x.zodiak.value="Sagitarius";}
if (bulan==12 && tanggal <= 20)
{document.x.zodiak.value="Sagitarius";}
if (bulan==12 && tanggal >= 21)
{document.x.zodiak.value="Capricorn";}
if (bulan==2 && tanggal > 29)
{
alert ("Februari Cuma 29 Hari");
return false;
}
if (bulan==4 && tanggal==31)
{
alert ("April Cuma 30 Hari");
return false;
}
if (bulan==6 && tanggal==31)
{
alert ("Juni Cuma 30 Hari");
return false;
}
if (bulan==9 && tanggal==31)
{
alert ("September Cuma 30 Hari");
return false;
}
if (bulan==11 && tanggal==31)
{
alert ("November cuma 30 Hari");
return false;
}
else
{
return true;
}
}
</script>
<form name="x">
<label>
<SELECT NAME="tanggal" >
<option value="t">Tanggal
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</SELECT>
<SELECT NAME="bulan">
<option value="b">Bulan
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
</SELECT>
<INPUT TYPE="text" NAME="zodiak">
<INPUT TYPE="button" value="Cek" onclick="cek()"><INPUT TYPE="reset">
</label>
</form>
nah segitu saja scriptnya,mudah-mudahn bermanfaat,follow me @arsenlexdorf
<title>Zodiak</title>
<script language="javascript">
function cek()
{
var tanggal=document.x.tanggal.selectedIndex;
var bulan=document.x.bulan.selectedIndex;
var tanggal=document.x.tanggal.selectedIndex;
var bulan=document.x.bulan.selectedIndex;
if (bulan==1 && tanggal <= 19)
{document.x.zodiak.value="Capricorn";}
if (bulan==1 && tanggal >= 20)
{document.x.zodiak.value="Aquarius";}
if (bulan==2 && tanggal <= 18)
{document.x.zodiak.value="Aquarius";}
if (bulan==2 && tanggal >= 19)
{document.x.zodiak.value="Pisces";}
if (bulan==3 && tanggal <= 20)
{document.x.zodiak.value="Pisces";}
if (bulan==3 && tanggal >= 21)
{document.x.zodiak.value="Aries";}
if (bulan==4 && tanggal <= 20)
{document.x.zodiak.value="Aries";}
if (bulan==4 && tanggal >= 21)
{document.x.zodiak.value="Taurus";}
if (bulan==5 && tanggal <= 20)
{document.x.zodiak.value="Taurus";}
if (bulan==5 && tanggal >= 21)
{document.x.zodiak.value="Gemini";}
if (bulan==6 && tanggal <= 21)
{document.x.zodiak.value="Gemini";}
if (bulan==6 && tanggal >= 21)
{document.x.zodiak.value="Cancer";}
if (bulan==7 && tanggal <= 21)
{document.x.zodiak.value="Cancer";}
if (bulan==7 && tanggal >= 22)
{document.x.zodiak.value="Leo";}
if (bulan==8 && tanggal <= 21)
{document.x.zodiak.value="Leo";}
if (bulan==8 && tanggal >= 22)
{document.x.zodiak.value="Virgo";}
if (bulan==9 && tanggal <= 21)
{document.x.zodiak.value="Virgo";}
if (bulan==9 && tanggal >= 22)
{document.x.zodiak.value="Libra";}
if (bulan==10 && tanggal <= 21)
{document.x.zodiak.value="Libra";}
if (bulan==10 && tanggal >= 22)
{document.x.zodiak.value="Scorpio";}
if (bulan==11 && tanggal <= 21)
{document.x.zodiak.value="Scorpio";}
if (bulan==11 && tanggal >= 22)
{document.x.zodiak.value="Sagitarius";}
if (bulan==12 && tanggal <= 20)
{document.x.zodiak.value="Sagitarius";}
if (bulan==12 && tanggal >= 21)
{document.x.zodiak.value="Capricorn";}
if (bulan==2 && tanggal > 29)
{
alert ("Februari Cuma 29 Hari");
return false;
}
if (bulan==4 && tanggal==31)
{
alert ("April Cuma 30 Hari");
return false;
}
if (bulan==6 && tanggal==31)
{
alert ("Juni Cuma 30 Hari");
return false;
}
if (bulan==9 && tanggal==31)
{
alert ("September Cuma 30 Hari");
return false;
}
if (bulan==11 && tanggal==31)
{
alert ("November cuma 30 Hari");
return false;
}
else
{
return true;
}
}
</script>
<form name="x">
<label>
<SELECT NAME="tanggal" >
<option value="t">Tanggal
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</SELECT>
<SELECT NAME="bulan">
<option value="b">Bulan
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
</SELECT>
<INPUT TYPE="text" NAME="zodiak">
<INPUT TYPE="button" value="Cek" onclick="cek()"><INPUT TYPE="reset">
</label>
</form>
nah segitu saja scriptnya,mudah-mudahn bermanfaat,follow me @arsenlexdorf
Monday, June 27, 2011
Pernyataan Switch
Nah sekarang penulis akan membahas tentang switch,
sederhana saja saya akan membahasa tentang sebuah penjualan alat sekolah,
biar ga pueng liat aja ascript nya
<title>Mini Market</title>
<script language="javascript">
function cek()
{
var nama=document.x.nama.value;
var jumlah=document.x.jumlah.value;
switch(nama)
{
case "pulpen":
document.x.harga.value=1000;
break;
case "pensil":
document.x.harga.value=2000;
break;
case "buku":
document.x.harga.value=3000;
break;
}
if (jumlah==0)
{
document.x.total.value="isi dulu jumlah";
}
else
{
document.x.total.value=document.x.harga.value * jumlah;
}
}
</script>
<form name="x">
<TABLE>
<TR>
<TD>Nama Barang</TD>
<TD>
<select NAME="nama" onchange="cek()">
<option value="">List</option>
<option value="pulpen">Pulpen</option>
<option value="pensil">Pensil</option>
<option value="buku">Buku</option>
</select>
</TD>
</TR>
<TR>
<TD>Harga Satuan</TD>
<TD><INPUT TYPE="text" NAME="harga" ></TD>
</TR>
<TR>
<TD>Jumlah Pembelian</TD>
<TD><INPUT TYPE="text" NAME="jumlah" onkeyup="cek()"></TD>
</TR>
<TR>
<TD>Total Harga</TD>
<TD><INPUT TYPE="text" NAME="total"></TD>
</TR>
</TABLE>
</form>
sederhana saja saya akan membahasa tentang sebuah penjualan alat sekolah,
biar ga pueng liat aja ascript nya
<title>Mini Market</title>
<script language="javascript">
function cek()
{
var nama=document.x.nama.value;
var jumlah=document.x.jumlah.value;
switch(nama)
{
case "pulpen":
document.x.harga.value=1000;
break;
case "pensil":
document.x.harga.value=2000;
break;
case "buku":
document.x.harga.value=3000;
break;
}
if (jumlah==0)
{
document.x.total.value="isi dulu jumlah";
}
else
{
document.x.total.value=document.x.harga.value * jumlah;
}
}
</script>
<form name="x">
<TABLE>
<TR>
<TD>Nama Barang</TD>
<TD>
<select NAME="nama" onchange="cek()">
<option value="">List</option>
<option value="pulpen">Pulpen</option>
<option value="pensil">Pensil</option>
<option value="buku">Buku</option>
</select>
</TD>
</TR>
<TR>
<TD>Harga Satuan</TD>
<TD><INPUT TYPE="text" NAME="harga" ></TD>
</TR>
<TR>
<TD>Jumlah Pembelian</TD>
<TD><INPUT TYPE="text" NAME="jumlah" onkeyup="cek()"></TD>
</TR>
<TR>
<TD>Total Harga</TD>
<TD><INPUT TYPE="text" NAME="total"></TD>
</TR>
</TABLE>
</form>
Pernyataan IF & ELSE
Sederhana saja,penulis hanya akan menggunakan 2 form ,textbox,dan button.
dalam kasus ini hanya akan mengetes jika nilai lebih kecil sama dengan 6,akan muncul alert tidak lulus sebaliknya akan muncul alert lulus..
ini scriptnya...
<HTML>
<HEAD>
<TITLE>Cek Kelulusan</TITLE>
</HEAD>
<script language="javascript">
function show()
{
var nilai = document.x.nilai.value;
if (isNaN(nilai))
{
alert ("Harus Angka");
}
else
{
if (nilai <= 60)
{
alert ("TIDAK LULUS");
}
else
{
alert ("LULUS");
}
}
}
</script>
<BODY>
<form name="x">
<TABLE>
<TR>
<TD>Masukan Nilai Anda</TD>
<TD><INPUT TYPE="text" NAME="nilai" maxlength=3></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT TYPE="button" value="Cek" onclick="show()"></TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
dalam kasus ini hanya akan mengetes jika nilai lebih kecil sama dengan 6,akan muncul alert tidak lulus sebaliknya akan muncul alert lulus..
ini scriptnya...
<HTML>
<HEAD>
<TITLE>Cek Kelulusan</TITLE>
</HEAD>
<script language="javascript">
function show()
{
var nilai = document.x.nilai.value;
if (isNaN(nilai))
{
alert ("Harus Angka");
}
else
{
if (nilai <= 60)
{
alert ("TIDAK LULUS");
}
else
{
alert ("LULUS");
}
}
}
</script>
<BODY>
<form name="x">
<TABLE>
<TR>
<TD>Masukan Nilai Anda</TD>
<TD><INPUT TYPE="text" NAME="nilai" maxlength=3></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT TYPE="button" value="Cek" onclick="show()"></TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
Sunday, May 29, 2011
Pengertian JavaScript dan Sejarahnya
Bagi Anda yang sering berkutat di dunia website, JavaScript tentu sudah tidak asing lagi. Mungkin Anda termasuk orang yang belum mengerti apa itu JavaScript. Berikut sejarah dan penjelasan JavaScript.
Sejarah JavaScript
JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.
Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.
javascript
Pengertian JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
Yang Harus Diperhatikan Dalam Penulisan JavaScript
Yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil. Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t.
Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dsb.
Kelebihan JavaScript
JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file jJvaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.
Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.
Contoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang divalidasi menggunakan JavaScript, anda mengetikkan data lalu mengetik submit, sebelum data dikirimkan ke server, data akan “dicek” terlebih dahulu pada browser menggunakan fungsi JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak valid, daripada membuang – buang waktu dengan mengirimkan data ke server baru di validasi di server dan lalu server mengirimkan respons balik mengenai ketidak validan input data anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan fungsi JavaScript.
Lebih Cepat dan Lebih Hemat
Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan.
Sejarah JavaScript
JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.
Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.
javascript
Pengertian JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
Yang Harus Diperhatikan Dalam Penulisan JavaScript
Yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil. Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t.
Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dsb.
Kelebihan JavaScript
JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file jJvaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.
Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.
Contoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang divalidasi menggunakan JavaScript, anda mengetikkan data lalu mengetik submit, sebelum data dikirimkan ke server, data akan “dicek” terlebih dahulu pada browser menggunakan fungsi JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak valid, daripada membuang – buang waktu dengan mengirimkan data ke server baru di validasi di server dan lalu server mengirimkan respons balik mengenai ketidak validan input data anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan fungsi JavaScript.
Lebih Cepat dan Lebih Hemat
Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan.
Subscribe to:
Posts (Atom)