Posts Tagged ‘javascript
format email untuk textbox
hai hai…
kali ini saya akan membagikan sedikit pengetahuan tentang bagaimana membuat textbox yang ada pada web sesuai dengan format email. Jadi jika para pengguna / user memasukkan email dengan format yang tidak benar (tidak xxx@xxx.xx) maka akan muncul peringatan, langsung saja
/*
by khuclukz
*/
<HTML>
<HEAD>
<TITLE>Format Email untuk textbox</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function cekEmail() {
var email = document.getElementById('text_email');
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!filter.test(email.value))
{
alert('silahkan masukkan Email yang benar');
email.focus
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Format Email</H1>
<HR>
Email : <input name="text_email" type="text" id="text_email" onchange="cekEmail()" />
</BODY>
</HTML>
kali ini kita menggunakan regex (regular expression) yang bisa dipelajari sendiri (*kapan2 akan coba saya tulis tentang belajar regex – regular expression)
pada
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
/^[a-zA-Z0-9._-]+ : menandakan bahwa email itu dimulai dengan karakter alfa-numerik (baik huruf kecil dan karakter huruf besar yang diizinkan). juga boleh ada titik, garis bawah (underscore), dan tanda hubung (dash).
@ : Harus ada ‘@’ setelah karakter di awal tadi
[a-zA-Z0-9.-]+ : Setelah ‘@’ tanda harus ada beberapa karakter alfa-numerik. Hal ini juga dapat berisi (‘.’) titik dan tanda hubung (‘-’)
\. : Setelah bagian kedua yang tadi, harus ada titik(‘.’). Hal ini adalah untuk memisahkan domain dan nama subdomain.
[a-zA-Z]{2,4}$/ : terakhir, alamat email harus diakhiri dengan 2-4 huruf. az dan AZ berarti bahwa huruf kecil dan huruf besar yang dibolehkan. {2,4} menunjukkan jumlah minimum dan maksimum karakter, untuk penamaan domain dengan 2, 3 dan 4 karakter misalnya ; info,us, org, com, net).
onchange pada texbox berfungsi ketika cursor meninggalkan textbox itu akan memberikan alert kalo format email yang kita masukkan belum benar.
selamat mencoba
number only in textbox
Pernah berpikiran gimana meng set textbox pada halaman website yang khusus untuk ditulisi dengan angka, huruf tidak bisa dituliskan di textbox ini.
hemm.. langsung sajah deh, ini ada source, bagaimana bermain-main dengan javascript, sehingga textbox hanya bisa ditulisi dengan huruf
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Letting Only Numbers Pass to a Form Field</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function checkIt(evt) {
evt = (evt) ? evt : window.event
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
status = "This field accepts numbers only."
return false
}
status = ""
return true
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Letting Only Numbers Pass to a Form Field</H1>
<HR>
<FORM onSubmit="return false">
Enter any positive integer: <INPUT TYPE="text" NAME="numeric"
onKeyPress="return checkIt(event)">
</FORM>
</BODY>
</HTML>
gak percaya.. silahkan dicoba disini
membuat toko musik dengan wordpress
setelah sedikit ulasan bagaimana membuat toko musik dan toko film pada psotingan yang lalu, Sekarang bagaimana memanfaatkan blog atau website anda yang sudah terinstall CMS WordPress agar bisa di pakai jualan musik (mp3) juga tanpa pakai modal. tanpa harus mengulang postingan yang lalu (tetang toko musik) karena prisipnya masih sama, yaitu menggunakan affiliasi dari amazon.
cukup mudah sebenarnya, cukup mengganti beberapa tag/script pada template wordpress anda dan menambahi costum field pada postingan di wordpress
setelah menambah costum field seperti diatas tambahi juga pada file single.php, atau di index.php atau juga bisa di buatkan query sendiri pada category tertentu (semisal category product). Bisa di tambahi script seperti dibawah ini
</p>
<p><script type='text/javascript'><br />
var amzn_wdgt={widget:'MP3Clips'};<br />
amzn_wdgt.tag='freetutorifre-20';<br />
amzn_wdgt.widgetType='SearchAndAdd';<br />
amzn_wdgt.title='<?php bloginfo('name'); ?> Music Player';<br />
amzn_wdgt.keywords='<?php echo get_post_meta($post->ID, 'songArtist', true); ?> - <?php echo get_post_meta($post->ID, 'songTitle', true); ?> - <?php echo get_post_meta($post->ID, 'songAlbum', true); ?>';<br />
amzn_wdgt.width='250';<br />
amzn_wdgt.height='250';<br />
amzn_wdgt.shuffleTracks='False';<br />
amzn_wdgt.maxResults='1';<br />
amzn_wdgt.marketPlace='US';<br />
</script><br />
<script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js'></p>
<p>
jangan lupa di ganti untuk affiliasinya. udah bukan!..
Sudah kah anda membuat website toko musik
membuat website toko musik dan toko film
Tidak perlu mahir PHP atau pemrograman untuk membuat webuah website itu, apa lagi sekarang ini banyak CMS (content management system) yang berkeliaran, tinggal klik sini klik sana jadi deh. pada kesempatan kali ini sedikit dibahas bagaimana membuat website toko musik dan juga toko film tanpa harus menguasai bahasa pemrograman (PHP atau ASP). cukup sedikit belajar tag-tag HTML dan sedikit belajar CSS untuk mepercantik website. tentunya nanti website toko musik dan toko film yang anda bangun bisa menghasilkan uang (lumayan buat tambahan uang saku).
Cukup dengan modal email dan domain hosting tentunya, website anda bisa di sulap sebagai website toko musik dan toko film. Dengan memanfaatkan affiliasi (program affiliasi) dari amazon, anda bisa memperoleh komisi dari hasil penjualan. Pastikan anda terdaftar dulu di amazon untuk mendapat id affiliasi trackingnya (punya saya “freetutorifre-20“).
Prinsipnya gini, pertamanya kita cari musik (mp3) dan film yang akan kita jual di widget, trus nanti dari widget itu kita embeed pada website toko musik atau toko film kita. dengan memasukkan javascript seperti dibawah ini
<script type='text/javascript'>
var amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='freetutorifre-20';
amzn_wdgt.widgetType='SearchAndAdd';
amzn_wdgt.title='My Music Blog';
amzn_wdgt.keywords='Lil Jon - Get Low - Part II';
amzn_wdgt.width='250';
amzn_wdgt.height='250';
amzn_wdgt.shuffleTracks='False';
amzn_wdgt.maxResults='1';
amzn_wdgt.marketPlace='US';
</script>
<script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js'>
</script>
kalau pingin lapak daganannya banyak, ya embeed javascriptnya di banyakin juga. untuk affiliasi masing-masing bisa dirubah pada “amzn_wdgt.tag=’freetutorifre-20‘;” dirubah sesuai affiliasinya. mudah bukan
Bagaimana kalau kita sudah terlanjur pake CMS wordpress ? ikuti postingan selanjutnya
Sudahkah anda belajar membuat website toko musik
Membuat focus cursor pada textbox
pernahkah kita menjumpai di internet, ketika kita akan melakukan login atau sedang mendaftar untuk login, ketika kita buka halaman website itu, cursor kita langsung ditempatkan pada field/textbox yang akan kita isi
seperti pada gambar diatas, gambar yang pertama merupakan bentuk dari penempatan cursor pada textbox ketika halaman itu dipanggil, sedangkan pada gambar kedua nampak cursor tidak ada pada textbox. Hal kecil semacam ini membantu para pengguna/user untuk dapat secara fokus mengisi textbox yang disediakan di halaman itu. tertarik untuk mencobanya, silahkan contoh kode dibawah ini (anggep aja sudah menulis sintak html defaultnya)
<form method="post" name="namaform"> <input type="text" name="namatextbox" /> </form>
untuk memberikan setingan focus cursor, bisa ditambahai script (javascript) pada body (tag : body)
<body onload="document.namaform.namatextbox.focus()">
mudah bukan!
selamat belajar membuat website
Inserting the Copyright Symbol in HTML pages
HTML supports special symbols that are not on your keyboard. The special symbol code for the copyright symbol © on HTML is ©. The code is defined by starting with a & (ampersand) and finishing with a ; (semicolon). An example code using the special symbol name would be as follows.
<p> © 2009 website tutorial</p>
However, to ensure that there are no mishaps and you ALWAYS get the proper read from HTML documents, you should try to always use the number code instead of the symbol code. The number is © An example code using the special symbol number would be as follows.
<p> © 2009 website design </p>
membuat aplikasi chat untuk website
satu lagi persembahan dari nettuts, yaitu membuat aplikasi chat sederhana pada website dengan PHP dan jQuery. Sudah termasuk sistem login dan logout. aplikasi yang manis layak untuk dicoba
Requirements: jQuery Framework
Demo: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple…
License: License Free
mari kita mencoba membuat aplikasi chat pada website
Dapatkan Ebook membuat aplikasi chat untuk website dalam bentuk bahasa Indonesia disini
Menampilkan Tanggal pada website menggunakan javascript
Seringkali kita melihat website atau blog pribadi yang di pasang informasi tanggal. Sebenarnya untuk membuat tampilan tanggal pada website tidak sesulit yang dikira, kita tinggal memasukkan beberapa script (javascript) di tempat yang akan dipasangi tanggal. Jadi deh bisa dilihat tanggal berapa sekarang. Biasanya tanggal tersebut mengambil data sesuai yang ada di tanggal komputer anda, lebih tepatnya di bios. Coba saja merubah setingan tanggal pada komputer anda, maka tanggal yang di pasang akan ikut berubah juga. Tertarik untuk mencoba silahkan di coba javascript tanggal berikut ini, tinggal copy paste saja
untuk tampilan dengan format dd/mm/yy (contoh : 01/02/2009)
<script type="text/javascript"><!-- var date = new Date(); var d = date.getDate(); var day = (d < 10) ? '0' + d : d; var m = date.getMonth() + 1; var month = (m < 10) ? '0' + m : m; var yy = date.getYear(); var year = (yy < 1000) ? yy + 1900 : yy; document.write(day + "/" + month + "/" + year); //--></script>
Sedangkan untuk format date/month/year (contoh: 1 januari 2009)
<script type="text/javascript"><!--
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
var months = new makeArray('Januari','Februari','Maret','April','Mei',
'Juni','Juli','Augustus','September','Oktober','November','Desember');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + " " + months[month] + " " + year);
//--></script>
mudah bukan….
Selamat belajar javascript
menambah html/javascript pada joomla module
Menambah html pada module joomla yang dimaksud adalah bagaimana jika kita ingin menambahkan tag html pada joomla tanpa membuat module terlebih dulu. Misalkan anda ingin menambahkan shoutbox atau shoutmix pada joomla, atau juga ingin menambahkan youtube pada joomla, tanpa melaui ribet ribet mencari module-module yang freeware itu. Karena shoutmix atau embeed youtube bisa dikatakan kategori html/javascript maka keduanya bisa dimasukkan di module joomla sesuai yang di inginkan.
Untuk prosesnya cukup menambah module specialhtml, adapun cara untuk menambahkan shoutbox atau shoutmix di joomla dan menambahkan youtube di joomla adalah sebagi berikut :
- Download terlebih dulu module specialhtml
- Upload module special html di menu administrator joomla
- Aktifkan module specialhtml yang sudah di upload pada module yang di inginkan
- Isi parameter html/javascript sesuai yang akan dimasukkan
- Simpan module tersebut
- preview website joomla anda
** Selamat belajar Joomla **
transparacy png pada IE5 dan IE6
Ketika kita menggunakan gambar Transparan dengan format PNG di browser IE5 dan IE6 biasanya sering muncul warna lain yang tidak sesuai dengan keinginan kita, hal seperti itu bisa disiasati dengan menggunakan bantuan javascript. Adapun bantuan yang di maksud adalah sebagai berikut :
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
