Fungsi Javascript berguna yang sering dipakai programmer

Bismillaahirrohmaanirrohiim…

Di bawah ini adalah fungsi yang berguna di Javascript dan sering dipakai oleh para programmer.

– Mencari string dalam teks menggunakan fungsi string.match()

Untuk mendapatkan informasi suatu string apakah terdapat pada text, dalam javascript menggunakan fungsi string.match();

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function matchString() {
var text = "Saya AKAN mulai makan!";
var findme = text.match(/akan/);
return findme;
}
function matchString() { var text = "Saya AKAN mulai makan!"; var findme = text.match(/akan/); return findme; }
function matchString() { 
  var text = "Saya AKAN mulai makan!"; 
  var findme = text.match(/akan/); 
    return findme;
}

Keterangan

var findme = text.match(/akan/);
findme = akan
fungsi ini mencari dan mendapatkan teks yang sama persis case-sensitive. jika sudah dapat satu saja dia akan berhenti.

var findme = text.match(/akan/i);
findme = AKAN
ada tambahan “i”, fungsi ini mencari dan mendapatkan teks yang case-insensitive, huruf besar dan kecil semua dicari. jika sudah dapat satu saja dia akan berhenti.

var findme = text.match(/akan/g);
findme = akan
ada tambahan “g”, maksudnya dia akan mencari semua kata “akan” di dalam teks yang sama persis case-sensitive.

var findme = text.match(/akan/gi);
findme = AKAN,akan
ada tambahan “gi”, maksudnya dia akan mencari semua kata “akan” di dalam teks yang tidak sama persis / case-insensitive, huruf besar dan kecil dicari semuanya.

– Mencari / search string di javascript dengan text.search()

Hampir mirip dengan string.match(), tapi return bukan teks, tapi angka / posisi string.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var str = "Namaku Budi ini ibu budi!";
var n = str.search("Budi");
var n = str.search(/Budi/i);
var str = "Namaku Budi ini ibu budi!"; var n = str.search("Budi"); var n = str.search(/Budi/i);
var str = "Namaku Budi ini ibu budi!";
var n = str.search("Budi");
var n = str.search(/Budi/i);

n menghasilkan angka/posisi teks “Budi” atau -1 jika “Budi” tidak ditemukan.
tanda “i” menandakan pencarian mode case-insensitive
Teks menggunakan ‘|||’ tidak bisa disearch

– Validasi email dengan javascript
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);//false or true
}
function validateEmail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email);//false or true }
function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);//false or true
}
– Javascript in array

Untuk mengecek apakah string ada di dalam array.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var array = new Array("118", "67", "190", "43", "135", "520");
if (array.indexOf("118") != -1) {
//teks ada dalam array
} else {
//teks tidak ada dalam array
}
var array = new Array("118", "67", "190", "43", "135", "520"); if (array.indexOf("118") != -1) { //teks ada dalam array } else { //teks tidak ada dalam array }
var array = new Array("118", "67", "190", "43", "135", "520");
if (array.indexOf("118") != -1) {
    //teks ada dalam array
} else {
    //teks tidak ada dalam array
}
– Open new window dengan ID

jika ingin membuka link ke new window sesuai id halaman, karena jika tidak diberi ID, biasanya setiap link keluar selalu ke halaman yang sama menimpa halaman yang dibuka sebelumnya.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<a href="javascript:void(0)" onclick="window.open('welcome.html','idhalaman')">Open a new window</a>
<a href="javascript:void(0)" onclick="window.open('welcome.html','idhalaman')">Open a new window</a>
<a href="javascript:void(0)" onclick="window.open('welcome.html','idhalaman')">Open a new window</a>
– Deteksi enter javascript jquery

Fungsi ini berguna untuk mendeteksi user pencet enter di keyboardnya saat ada di form.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$("#formpage input").keypress(function(a) {
var b=(a.which)?a.which:a.keyCode;
if(b==13) {
submitData();
}
});
$("#formpage input").keypress(function(a) { var b=(a.which)?a.which:a.keyCode; if(b==13) { submitData(); } });
$("#formpage input").keypress(function(a) {
    var b=(a.which)?a.which:a.keyCode;
    if(b==13) {
        submitData();
    }
});
– Fungsi isset di javascript
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
if (typeof obj.foo !== 'undefined') {
// your code here
}
if (typeof obj.foo !== 'undefined') { // your code here }
if (typeof obj.foo !== 'undefined') {
  // your code here
}
– javascript, mendapatkan teks dalam tanda kurung / brackets/parenthesis
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var x = "This is (mydad) simple (oke) text".match(/\(([^)]+)\)/)[1];
document.getElementById("demo").innerHTML=x;//hasilnya mydad
var x = "This is (mydad) simple (oke) text".match(/\(([^)]+)\)/)[1]; document.getElementById("demo").innerHTML=x;//hasilnya mydad
var x = "This is (mydad) simple (oke) text".match(/\(([^)]+)\)/)[1];
document.getElementById("demo").innerHTML=x;//hasilnya mydad
– Javascript, mencari posisi teks dalam string
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var str="Hello world, welcome to the universe.";
var n=str.indexOf("o");//hasilnya 4
var n=str.indexOf("o",5);//hasilnya 7, karena mulai pencarian pada string ke 5
var str="Hello world, welcome to the universe."; var n=str.indexOf("o");//hasilnya 4 var n=str.indexOf("o",5);//hasilnya 7, karena mulai pencarian pada string ke 5
var str="Hello world, welcome to the universe.";
var n=str.indexOf("o");//hasilnya 4
var n=str.indexOf("o",5);//hasilnya 7, karena mulai pencarian pada string ke 5
– javascript deklarasi multi variabel
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var harga='',pos_kg='',b='',c='';
var harga='',pos_kg='',b='',c='';
var harga='',pos_kg='',b='',c='';
– Javascript, substr seperti di php
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var str = "Hello world!";
var res = str.substr(1,4);//hasil ello
var str = "Hello world!"; var res = str.substr(1,4);//hasil ello
var str = "Hello world!";
var res = str.substr(1,4);//hasil ello

– javascript, mengambil angka saja dalam string
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var thestring = '100,000 IDR';
var thenum = thestring.replace(/[^0-9]/g,'');
var thestring = '100,000 IDR'; var thenum = thestring.replace(/[^0-9]/g,'');
var thestring = '100,000 IDR';
var thenum = thestring.replace(/[^0-9]/g,'');

– cek string saja
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
textnya.match(/^[a-zA-Z]+$/)
textnya.match(/^[a-zA-Z]+$/)
textnya.match(/^[a-zA-Z]+$/)
– cek wajib angka saja
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
!textnya.match(/^[0-9]+$/)
!textnya.match(/^[0-9]+$/)
!textnya.match(/^[0-9]+$/)

– cek string saja + spasi
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
textnya.match(/^[-\sa-zA-Z]+$/)
textnya.match(/^[-\sa-zA-Z]+$/)
textnya.match(/^[-\sa-zA-Z]+$/)
– jquery, select index ke 2 dari selector pake eq
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
misal .rgMasterTable:eq(2), class yang ke 3
misal .rgMasterTable:eq(2), class yang ke 3
misal .rgMasterTable:eq(2), class yang ke 3

– javascript iterasi array key value
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
for (var k in target){
if (target.hasOwnProperty(k)) {
alert("Key is " + k + ", value is" + target[k]);
}
}
for (var k in target){ if (target.hasOwnProperty(k)) { alert("Key is " + k + ", value is" + target[k]); } }
for (var k in target){
  if (target.hasOwnProperty(k)) {
    alert("Key is " + k + ", value is" + target[k]);
  }
}

– javascript number format ribuan dengan koma
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
– javascript multidimensional array

solusi set array dalam array

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var iMax = 20;
var jMax = 10;
var f = new Array();
for (i=0;i<iMax;i++) {
f[i]=new Array();
for (j=0;j<jMax;j++) {
f[i][j]=0;
}
}
atau set dengan array_data[index] = no_keyarray_valuearray lalu dipecah2
var iMax = 20; var jMax = 10; var f = new Array(); for (i=0;i<iMax;i++) { f[i]=new Array(); for (j=0;j<jMax;j++) { f[i][j]=0; } } atau set dengan array_data[index] = no_keyarray_valuearray lalu dipecah2
var iMax = 20;
var jMax = 10;
var f = new Array();

for (i=0;i<iMax;i++) {
    f[i]=new Array();
    for (j=0;j<jMax;j++) {
        f[i][j]=0;
    }
}
atau set dengan array_data[index] = no_keyarray_valuearray lalu dipecah2
– jquery go to url
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(location).attr('href','dashboard.php?m=module&p=page');
location.href="?m=module&p=page";
$(location).attr('href','dashboard.php?m=module&p=page'); location.href="?m=module&p=page";
$(location).attr('href','dashboard.php?m=module&p=page');
location.href="?m=module&p=page";
– jquery set attr checked gagal
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$( elem ).attr( "checked",true ) = gagal
$( elem ).prop( "checked", true ) = oke prop = property
$( elem ).attr( "checked",true ) = gagal $( elem ).prop( "checked", true ) = oke prop = property
$( elem ).attr( "checked",true ) = gagal
$( elem ).prop( "checked", true ) = oke prop = property
– jquery jika pada filter atribut start with tidak jalan pakai bintang depannya
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$("tr[class^='startclassname']").hide();
diganti
$("*[class^='startclassname']").hide();
$("tr[class^='startclassname']").hide(); diganti $("*[class^='startclassname']").hide();
$("tr[class^='startclassname']").hide();
diganti
$("*[class^='startclassname']").hide();
– jquery mencari index dari selector
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$('table').find('tr').eq(2).html();
$('table').find('tr').eq(2).html();
$('table').find('tr').eq(2).html();

– javascript cek input angka saja
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="text" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
ga jalan di ff / firefox,
solusi gunakan fungsi onkeypress="return numbersonly(event)"
function numbersonly(e){
//used <input type="text" onkeypress="return numbersonly(event)">
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode!=8){ //if the key isn't the backspace key (which we should allow)
if (unicode<48||unicode>57) //if not a number
return false //disable key press
}
}
<input type="text" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;" ga jalan di ff / firefox, solusi gunakan fungsi onkeypress="return numbersonly(event)" function numbersonly(e){ //used <input type="text" onkeypress="return numbersonly(event)"> var unicode=e.charCode? e.charCode : e.keyCode if (unicode!=8){ //if the key isn't the backspace key (which we should allow) if (unicode<48||unicode>57) //if not a number return false //disable key press } }
<input type="text" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
ga jalan di ff / firefox,

solusi gunakan fungsi onkeypress="return numbersonly(event)"

function numbersonly(e){
    //used <input type="text" onkeypress="return numbersonly(event)">
    var unicode=e.charCode? e.charCode : e.keyCode
    if (unicode!=8){ //if the key isn't the backspace key (which we should allow)
        if (unicode<48||unicode>57) //if not a number
        return false //disable key press
    }
}
– jquery cari parents dengan index banyak
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$('#element').parents().eq(0); // "Father".
$('#element').parents().eq(2); // "Great-grandfather".
$('#element').parents().eq(2); = $('#element').parent().parent();
$('#element').parents().eq(0); // "Father". $('#element').parents().eq(2); // "Great-grandfather". $('#element').parents().eq(2); = $('#element').parent().parent();
$('#element').parents().eq(0); // "Father".
$('#element').parents().eq(2); // "Great-grandfather".
$('#element').parents().eq(2); = $('#element').parent().parent();

– javascript / jquery refresh work all browser
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
location.reload();
//window.location.href = 'http://example.com';
window.location.reload();
location.reload(); //window.location.href = 'http://example.com'; window.location.reload();
location.reload();
//window.location.href = 'http://example.com';
window.location.reload();

– javascript trim
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function trim(str) {
return str.replace(/^\s*|\s*$/g,"");
}
function trim(str) { return str.replace(/^\s*|\s*$/g,""); }
function trim(str) {
    return str.replace(/^\s*|\s*$/g,"");
}
– javascript selisih detik

contoh digunakan saat ada alert

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var a = new Date().getTime();
alert("Waktu pada step ini tinggal sebentar lagi.\nSegera selesaikan untuk menuju form berikutnya.");
var b = new Date().getTime();
var slshab = b-a;///millisecond
slshab = Math.floor((slshab / 1000));
var a = new Date().getTime(); alert("Waktu pada step ini tinggal sebentar lagi.\nSegera selesaikan untuk menuju form berikutnya."); var b = new Date().getTime(); var slshab = b-a;///millisecond slshab = Math.floor((slshab / 1000));
var a = new Date().getTime();
alert("Waktu pada step ini tinggal sebentar lagi.\nSegera selesaikan untuk menuju form berikutnya.");
var b = new Date().getTime();
var slshab = b-a;///millisecond
slshab = Math.floor((slshab / 1000));

– jquery ajax problem parameternya jika tidak di encode
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
data: "user_email="+encodeURIComponent(user_email),
data: "user_email="+encodeURIComponent(user_email),
data: "user_email="+encodeURIComponent(user_email),
– jquery unwrap
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
A nice house was found in <b>Toronto</b>.
$('b').contents().unwrap();
A nice house was found in <b>Toronto</b>. $('b').contents().unwrap();
A nice house was found in <b>Toronto</b>.
$('b').contents().unwrap();

– javascript unwrap
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var b = document.getElementsByTagName('b');
while(b.length) {
var parent = b[ 0 ].parentNode;
while( b[ 0 ].firstChild ) {
parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] );
}
parent.removeChild( b[ 0 ] );
}
var b = document.getElementsByTagName('b'); while(b.length) { var parent = b[ 0 ].parentNode; while( b[ 0 ].firstChild ) { parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] ); } parent.removeChild( b[ 0 ] ); }
var b = document.getElementsByTagName('b');

while(b.length) {
    var parent = b[ 0 ].parentNode;
    while( b[ 0 ].firstChild ) {
        parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] );
    }
    parent.removeChild( b[ 0 ] );
}
– javascript htmlentities
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
todolist = todolist.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
todolist = todolist.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
todolist = todolist.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
– javascript protect iframe
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script>if(self != top) { top.location = self.location; }</script>
<script>if(self != top) { top.location = self.location; }</script>
<script>if(self != top) { top.location = self.location; }</script>

– js jquery setelah dokumen di load
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script type="text/javascript">
$(document).ready(function() {
});
</script>
<script type="text/javascript"> $(document).ready(function() { }); </script>
<script type="text/javascript">
$(document).ready(function() {
});
</script>

– jquery post ajax post
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$.ajax({
type: "POST",
url: "dashboard.php?m=module&p=page&c=no",
data: "prefix="+el.val(),
success: function(rsp){
$('#area_div').html(rsp);
}, beforeSend : function(a) {
//showloader
}, complete : function(a) {
//hideloader
}, error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
}
});
$.ajax({ type: "POST", url: "dashboard.php?m=module&p=page&c=no", data: "prefix="+el.val(), success: function(rsp){ $('#area_div').html(rsp); }, beforeSend : function(a) { //showloader }, complete : function(a) { //hideloader }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.responseText); } });
$.ajax({
    type: "POST",
    url: "dashboard.php?m=module&p=page&c=no",
    data: "prefix="+el.val(),
    success: function(rsp){
        $('#area_div').html(rsp);
    }, beforeSend : function(a) {
        //showloader
    }, complete : function(a) {
        //hideloader
    }, error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText);
    }
});
– javascript detect keyboard di window

ini adalah untuk mendeteksi pencetan keyboard di whole halaman web

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(window).keypress(function(ev){
if(ev.charCode == 99) {
$.loader('close');
}
});
$(window).keypress(function(ev){ if(ev.charCode == 99) { $.loader('close'); } });
$(window).keypress(function(ev){
    if(ev.charCode == 99) {
        $.loader('close');
    }
});
– javascript settimeout
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
setTimeout(function(){
fungsix(a, b);
}, 1000);
setTimeout(function(){ fungsix(a, b); }, 1000);
setTimeout(function(){
    fungsix(a, b);
}, 1000);
– javascript trim, karena fungsi trim tida support disemua browser
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function myTrim(x) {
return x.replace(/^\s+|\s+$/gm,'');
}
function myTrim(x) { return x.replace(/^\s+|\s+$/gm,''); }
function myTrim(x) {
    return x.replace(/^\s+|\s+$/gm,'');
}
– javascript sleep
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
setTimeout(function(){ waitandsleep(); }, 3000);
waitandsleep() {}<br>atau<br><br>const sleepNow = (delay) => new Promise((resolve) => setTimeout(resolve, delay))<br>async function contohFungsi(1000) {<br> //eksekusi<br> await sleepNow(1000);//sleep 1 detik<br> contohFungsi(1000);//panggil fungsi lagi/yg lain<br>}<br>
setTimeout(function(){ waitandsleep(); }, 3000); waitandsleep() {}<br>atau<br><br>const sleepNow = (delay) => new Promise((resolve) => setTimeout(resolve, delay))<br>async function contohFungsi(1000) {<br> //eksekusi<br> await sleepNow(1000);//sleep 1 detik<br> contohFungsi(1000);//panggil fungsi lagi/yg lain<br>}<br>
setTimeout(function(){ waitandsleep(); }, 3000);
waitandsleep() {}
atau

const sleepNow = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
async function contohFungsi(1000) {
//eksekusi
await sleepNow(1000);//sleep 1 detik
contohFungsi(1000);//panggil fungsi lagi/yg lain
}
– javascript substr
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
str.substr(start, length)
str.substring(start, finish)
str.substr(start, length) str.substring(start, finish)
str.substr(start, length)
str.substring(start, finish)

– javascript strpos
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
str.indexOf("welcome",start);
str.indexOf("welcome",start);
str.indexOf("welcome",start);

– javascript detect ssl
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
('https:' == document.location.protocol ? 'https:' : 'http:')
('https:' == document.location.protocol ? 'https:' : 'http:')
('https:' == document.location.protocol ? 'https:' : 'http:')

– cek is json valid dengan jquery
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
try {
var obj = $.parseJSON(rsp);
} catch(e) {
$("#response_data").prepend(rsp);
return false;
}
try { var obj = $.parseJSON(rsp); } catch(e) { $("#response_data").prepend(rsp); return false; }
try {
    var obj = $.parseJSON(rsp);
} catch(e) {
    $("#response_data").prepend(rsp);
    return false;
}
– javascript ucwords
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var str = $(this).html();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
var str = $(this).html(); str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) { return letter.toUpperCase(); });
var str = $(this).html();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
– Simpan file dengan alamat absolute dan relative
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//relative
fs.write('./subfolder/namafile.txt', 'isi file', 'w');
//absolute
fs.write('C:/folder/subfolder/namafile.txt', 'isi file', 'w');
//relative fs.write('./subfolder/namafile.txt', 'isi file', 'w'); //absolute fs.write('C:/folder/subfolder/namafile.txt', 'isi file', 'w');
//relative
fs.write('./subfolder/namafile.txt', 'isi file', 'w');
//absolute
fs.write('C:/folder/subfolder/namafile.txt', 'isi file', 'w');
– Jquery live onready terbaru
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//dulu
$(".selector").live("click", function() {...});
$(".selector").on("click", function() {...});
//sekarang harus
$(document).on("click", ".selector", function() {...});<br>//atau<br> $(document ).delegate(".selector","keyup mouseup", function() {<br>
//dulu $(".selector").live("click", function() {...}); $(".selector").on("click", function() {...}); //sekarang harus $(document).on("click", ".selector", function() {...});<br>//atau<br> $(document ).delegate(".selector","keyup mouseup", function() {<br>
//dulu
$(".selector").live("click", function() {...});
$(".selector").on("click", function() {...});
//sekarang harus
$(document).on("click", ".selector", function() {...});
//atau
$(document ).delegate(".selector","keyup mouseup", function() {
– Javascript cek JSON valid atau tidak
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function IsJsonValid(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
function IsJsonValid(str) { try { JSON.parse(str); } catch (e) { return false; } return true; }
function IsJsonValid(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}
– Menambahkan koma untuk angka besar (ribuan, jutaan, dst)
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function addCommas(nStr)
{
nStr += \'\';
x = nStr.split(\'.\');
x1 = x[0];
x2 = x.length > 1 ? \'.\' + x[1] : \'\';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, \'$1\' + \',\' + \'$2\');
}
return x1 + x2;
}
function addCommas(nStr) { nStr += \'\'; x = nStr.split(\'.\'); x1 = x[0]; x2 = x.length > 1 ? \'.\' + x[1] : \'\'; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, \'$1\' + \',\' + \'$2\'); } return x1 + x2; }
function addCommas(nStr)
{
    nStr += \'\';
    x = nStr.split(\'.\');
    x1 = x[0];
    x2 = x.length > 1 ? \'.\' + x[1] : \'\';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, \'$1\' + \',\' + \'$2\');
    }
    return x1 + x2;
}
– Format angka besar menjadi k, M, B untuk ribuan jutaan, dst
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function nFormatter(num, digits) {
const lookup = [
{ value: 1, symbol: "" },
{ value: 1e3, symbol: "k" },
{ value: 1e6, symbol: "M" },
{ value: 1e9, symbol: "G" },
{ value: 1e12, symbol: "T" },
{ value: 1e15, symbol: "P" },
{ value: 1e18, symbol: "E" }
];
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
var item = lookup.slice().reverse().find(function(item) {
return num >= item.value;
});
return item ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol : "0";
}
function nFormatter(num, digits) { const lookup = [ { value: 1, symbol: "" }, { value: 1e3, symbol: "k" }, { value: 1e6, symbol: "M" }, { value: 1e9, symbol: "G" }, { value: 1e12, symbol: "T" }, { value: 1e15, symbol: "P" }, { value: 1e18, symbol: "E" } ]; const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; var item = lookup.slice().reverse().find(function(item) { return num >= item.value; }); return item ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol : "0"; }
function nFormatter(num, digits) {
  const lookup = [
    { value: 1, symbol: "" },
    { value: 1e3, symbol: "k" },
    { value: 1e6, symbol: "M" },
    { value: 1e9, symbol: "G" },
    { value: 1e12, symbol: "T" },
    { value: 1e15, symbol: "P" },
    { value: 1e18, symbol: "E" }
  ];
  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  var item = lookup.slice().reverse().find(function(item) {
    return num >= item.value;
  });
  return item ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol : "0";
}
– mereplace string yang berisi ‘ dan ” petik satu atau petik dua
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var txt = txt.replace(/["\']/g, "");
var txt = txt.replace(/["\']/g, "");
var txt = txt.replace(/["\']/g, "");
– Strip tags di javascript
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//Strip tags kecuali <br /> dan <br>
html = html.replace(/<(?!br\s*\/?)[^>]+>/g, '');
//strip tags semua html tag
html = html.replace(/(<([^>]+)>)/gi, "");
//Strip tags kecuali <br /> dan <br> html = html.replace(/<(?!br\s*\/?)[^>]+>/g, ''); //strip tags semua html tag html = html.replace(/(<([^>]+)>)/gi, "");
//Strip tags kecuali <br /> dan <br>
html = html.replace(/<(?!br\s*\/?)[^>]+>/g, '');

//strip tags semua html tag
html = html.replace(/(<([^>]+)>)/gi, "");
– Membuat qr code dari url google
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img id="qrimg" src="https://chart.googleapis.com/chart?cht=qr&chl=https%3A%2F%2Fwww.domain.com&chs=180x180&choe=UTF-8&chld=L|2" />
//jika gagal gunakan yang ini:
https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https%3A%2F%2Fwww.domain.com
//baca QR code dan barcode dengan js
https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/
<img id="qrimg" src="https://chart.googleapis.com/chart?cht=qr&chl=https%3A%2F%2Fwww.domain.com&chs=180x180&choe=UTF-8&chld=L|2" /> //jika gagal gunakan yang ini: https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https%3A%2F%2Fwww.domain.com //baca QR code dan barcode dengan js https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/
<img id="qrimg" src="https://chart.googleapis.com/chart?cht=qr&chl=https%3A%2F%2Fwww.domain.com&chs=180x180&choe=UTF-8&chld=L|2" />
//jika gagal gunakan yang ini:
https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https%3A%2F%2Fwww.domain.com

//baca QR code dan barcode dengan js
https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/
– Ajax synchronous

Biasanya digunakan untuk mendapatkan hasil atau return pada fungsi.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function getToken() {
var strReturn = "";
$.ajax({
url: "http://localhost/url-to/token.php",
success: function(html) {
strReturn = html;
},
async:false
});
return strReturn;
}
function getToken() { var strReturn = ""; $.ajax({ url: "http://localhost/url-to/token.php", success: function(html) { strReturn = html; }, async:false }); return strReturn; }
        function getToken() {
            var strReturn = "";
            $.ajax({
              url: "http://localhost/url-to/token.php",
              success: function(html) {
                strReturn = html;
              },
              async:false
            });
            return strReturn;
        }
– Memperpendek angka atau menyingkat angka menjadi ribuan jutaan dst (K, M, B, etc)
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function singkatAngka(value) {
var newValue = value;
if (value >= 1000) {
var suffixes = ["", "Rb", "Jt", "Mly","T"];
var suffixNum = Math.floor( (""+value).length/3 );
var shortValue = '';
for (var precision = 2; precision >= 1; precision--) {
shortValue = parseFloat( (suffixNum != 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
if (dotLessShortValue.length <= 2) { break; }
}
if (shortValue % 1 != 0) shortValue = shortValue.toFixed(1);
newValue = shortValue+suffixes[suffixNum];
}
return newValue;
}
function singkatAngka(value) { var newValue = value; if (value >= 1000) { var suffixes = ["", "Rb", "Jt", "Mly","T"]; var suffixNum = Math.floor( (""+value).length/3 ); var shortValue = ''; for (var precision = 2; precision >= 1; precision--) { shortValue = parseFloat( (suffixNum != 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision)); var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,''); if (dotLessShortValue.length <= 2) { break; } } if (shortValue % 1 != 0) shortValue = shortValue.toFixed(1); newValue = shortValue+suffixes[suffixNum]; } return newValue; }
function singkatAngka(value) {
    var newValue = value;
    if (value >= 1000) {
        var suffixes = ["", "Rb", "Jt", "Mly","T"];
        var suffixNum = Math.floor( (""+value).length/3 );
        var shortValue = '';
        for (var precision = 2; precision >= 1; precision--) {
            shortValue = parseFloat( (suffixNum != 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
            var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
            if (dotLessShortValue.length <= 2) { break; }
        }
        if (shortValue % 1 != 0)  shortValue = shortValue.toFixed(1);
        newValue = shortValue+suffixes[suffixNum];
    }
    return newValue;
}
– maxlength pada input type number
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
<input name="somename" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type = "number" maxlength = "6" />
<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />
– Desimal pada input type number
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="number" step="any" min="0" name="angkapersen" id="angkapersen" class="form-control " value="0" />
<input type="number" step="any" min="0" name="angkapersen" id="angkapersen" class="form-control " value="0" />
<input type="number" step="any" min="0" name="angkapersen" id="angkapersen" class="form-control " value="0" />
– input type text dengan pattern time format 24 jam
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="text" name="jam" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]" required=""/>
<input type="text" name="jam" pattern="([01]?[0-9]{1}|2[0-3]{1}):[0-5]{1}[0-9]{1}" required=""/>
<input type="text" name="jam" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]" required=""/> <input type="text" name="jam" pattern="([01]?[0-9]{1}|2[0-3]{1}):[0-5]{1}[0-9]{1}" required=""/>
<input type="text" name="jam" pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]" required=""/>
<input type="text" name="jam" pattern="([01]?[0-9]{1}|2[0-3]{1}):[0-5]{1}[0-9]{1}" required=""/>
– Fungsi untuk mengambil teks diantara dua teks

Fungsi ini juga bisa digunakan untuk gettextintags atau mengambil string dalam sebuah tag.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function string_between_strings(startStr, endStr, str) {
let io_start = str.indexOf(startStr);
let io_end = str.indexOf(endStr);
if (io_start==-1 || io_end==-1) return '';
if (io_start >= io_end) return '';
let posx = io_start + startStr.length;
return str.substring(posx, str.indexOf(endStr, posx));
}
let str = "<id_penjualan>142342342343241</id_penjualan>";
let start = "<id_penjualan>";
let end = "</id_penjualan>";
let between = string_between_strings(start, end, str);
//output: 142342342343241
function string_between_strings(startStr, endStr, str) { let io_start = str.indexOf(startStr); let io_end = str.indexOf(endStr); if (io_start==-1 || io_end==-1) return ''; if (io_start >= io_end) return ''; let posx = io_start + startStr.length; return str.substring(posx, str.indexOf(endStr, posx)); } let str = "<id_penjualan>142342342343241</id_penjualan>"; let start = "<id_penjualan>"; let end = "</id_penjualan>"; let between = string_between_strings(start, end, str); //output: 142342342343241
function string_between_strings(startStr, endStr, str) {
    let io_start = str.indexOf(startStr);
    let io_end = str.indexOf(endStr);
    if (io_start==-1 || io_end==-1) return '';
    if (io_start >= io_end) return '';

    let posx = io_start + startStr.length;
    return str.substring(posx, str.indexOf(endStr, posx));
}
let str = "<id_penjualan>142342342343241</id_penjualan>";
let start = "<id_penjualan>";
let end = "</id_penjualan>";

let between = string_between_strings(start, end, str);
//output: 142342342343241
Onkeyup pada input angka, tapi dalam form input type text
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function thisValNum(el) {
let this_val = el.val().replace(/[^0-9\-\.]/g, "");
let converttonumb = true;
if (el.val().includes(".")) {
converttonumb = false;
if (countInstances(this_val, ".") > 1) {
converttonumb = true;
this_val = this_val.replace(/[^0-9]/g, "");
}
}
if (el.val().includes("-")) {
converttonumb = false;
if (this_val.charAt(0)=="0" && this_val.charAt(1)=="-") {
this_val = "-";
}
if (this_val.charAt(0)!="-" || countInstances(this_val, "-") > 1) {
converttonumb = true;
this_val = this_val.replace(/[^0-9]/g, "");
}
}
if (converttonumb) {
this_val = this_val*1;
}
el.val(this_val);
return this_val;
}
//bisa pakai tanda minus, atau titik untuk pemisah desimal
function thisValNum(el) { let this_val = el.val().replace(/[^0-9\-\.]/g, ""); let converttonumb = true; if (el.val().includes(".")) { converttonumb = false; if (countInstances(this_val, ".") > 1) { converttonumb = true; this_val = this_val.replace(/[^0-9]/g, ""); } } if (el.val().includes("-")) { converttonumb = false; if (this_val.charAt(0)=="0" && this_val.charAt(1)=="-") { this_val = "-"; } if (this_val.charAt(0)!="-" || countInstances(this_val, "-") > 1) { converttonumb = true; this_val = this_val.replace(/[^0-9]/g, ""); } } if (converttonumb) { this_val = this_val*1; } el.val(this_val); return this_val; } //bisa pakai tanda minus, atau titik untuk pemisah desimal
function thisValNum(el) {
  let this_val = el.val().replace(/[^0-9\-\.]/g, "");
  let converttonumb = true;

  if (el.val().includes(".")) {
     converttonumb = false;
     if (countInstances(this_val, ".") > 1) {
         converttonumb = true;
         this_val = this_val.replace(/[^0-9]/g, "");
     }
  }

  if (el.val().includes("-")) {
     converttonumb = false;
     if (this_val.charAt(0)=="0" && this_val.charAt(1)=="-") {
         this_val = "-";
     }
     if (this_val.charAt(0)!="-" || countInstances(this_val, "-") > 1) {
         converttonumb = true;
         this_val = this_val.replace(/[^0-9]/g, "");
     }
  }

  if (converttonumb) {
     this_val = this_val*1;
  }
  el.val(this_val);
  return this_val;
}
//bisa pakai tanda minus, atau titik untuk pemisah desimal
fungsi seperti substr_count, menghitung karakter pada teks
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function countInstances(string, word) {
//spt substr_count
return string.split(word).length - 1;
}
function countInstances(string, word) { //spt substr_count return string.split(word).length - 1; }
function countInstances(string, word) {
  //spt substr_count
   return string.split(word).length - 1;
}
input mask format jam dengan javascript only
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function maskJam(el) {
let el_val = el.val();
if (!/^[0-9:]+$/.test(el_val)) {
el_val = el_val.replace(/[^0-9:]/g, \'\');
el.val(el_val);
}
if (el_val.length > 2 && el_val.indexOf(\':\') == -1) {
el_val = el_val.substring(0, 2) + \':\' + el_val.substring(2, 4);
el.val(el_val);
}
const isValid = /^([01]\d|2[0-3]):([0-5]\d)$/.test(el_val);
if (!isValid) {
el.parent().find(".mask-jam-info").show().css("color", "red").html("Format jam tidak valid. Contoh: 00:00 atau 23:59");
} else {
el.parent().find(".mask-jam-info").hide();
}
}
//htmlnya
<div class="form-group">
<label for="mulai_jam">Mulai Jam*</label>
<input type="text" name="mulai_jam" id="mulai_jam" onfocus="this.select()" onkeyup="maskJam($(this))" class="form-control " value="" required="" autocomplete="off" maxlength="5" placeholder="HH:MM" />
<small class="mask-jam-info">Format: HH:MM</small>
</div>
function maskJam(el) { let el_val = el.val(); if (!/^[0-9:]+$/.test(el_val)) { el_val = el_val.replace(/[^0-9:]/g, \'\'); el.val(el_val); } if (el_val.length > 2 && el_val.indexOf(\':\') == -1) { el_val = el_val.substring(0, 2) + \':\' + el_val.substring(2, 4); el.val(el_val); } const isValid = /^([01]\d|2[0-3]):([0-5]\d)$/.test(el_val); if (!isValid) { el.parent().find(".mask-jam-info").show().css("color", "red").html("Format jam tidak valid. Contoh: 00:00 atau 23:59"); } else { el.parent().find(".mask-jam-info").hide(); } } //htmlnya <div class="form-group"> <label for="mulai_jam">Mulai Jam*</label> <input type="text" name="mulai_jam" id="mulai_jam" onfocus="this.select()" onkeyup="maskJam($(this))" class="form-control " value="" required="" autocomplete="off" maxlength="5" placeholder="HH:MM" /> <small class="mask-jam-info">Format: HH:MM</small> </div>
    function maskJam(el) {
        let el_val = el.val();
        if (!/^[0-9:]+$/.test(el_val)) {
            el_val = el_val.replace(/[^0-9:]/g, \'\');
            el.val(el_val);
        }
        if (el_val.length > 2 && el_val.indexOf(\':\') == -1) {
            el_val = el_val.substring(0, 2) + \':\' + el_val.substring(2, 4);
            el.val(el_val);
        }
        const isValid = /^([01]\d|2[0-3]):([0-5]\d)$/.test(el_val);
        if (!isValid) {
            el.parent().find(".mask-jam-info").show().css("color", "red").html("Format jam tidak valid. Contoh: 00:00 atau 23:59");
        } else {
            el.parent().find(".mask-jam-info").hide();
        }
    }
//htmlnya

        <div class="form-group">
            <label for="mulai_jam">Mulai Jam*</label>
            <input type="text" name="mulai_jam" id="mulai_jam" onfocus="this.select()" onkeyup="maskJam($(this))" class="form-control " value="" required="" autocomplete="off" maxlength="5" placeholder="HH:MM" />
            <small class="mask-jam-info">Format: HH:MM</small>
        </div>

Demikian beberapa fungsi yang berguna yang biasa digunakan programmer untuk keperluan ngoding.

Baca Juga:   Tombol back tutup modal bootstrap tanpa kembali ke halaman sebelumnya

Halaman ini akan terus diupdate jika nantinya ada fungsi lain yang perlu diposting.

Monggo jika ada yang ingin menambahkan fungsi berguna atau ingin bertanya tentang membuat fungsi javascript lainnya dapat berkomentar di bawah ini.

Semoga bermanfaat…

Bagikan

You May Also Like

About the Author: rasupe

Leave a Reply

Discover more from Rasupe

Subscribe now to keep reading and get access to the full archive.

Continue reading