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();

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.

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

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.

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.

<a  (0)" >
– Deteksi enter javascript jquery
Fungsi ini berguna untuk mendeteksi user pencet enter di keyboardnya saat ada di form.
 
$("#formpage input").keypress(function(a) {
    var b=(a.which)?a.which:a.keyCode;
    if(b==13) {
        submitData();
    }
});
 
– Fungsi isset di javascript
 
if (typeof obj.foo !== 'undefined') {
  // your code here
}
 
– javascript, mendapatkan teks dalam tanda kurung / brackets/parenthesis
 
var x = "This is (mydad) simple (oke) text".match(/\(([^)]+)\)/)[1];
document.getElementById("demo").innerHTML=x;//hasilnya mydad
 
– Javascript, mencari posisi teks dalam string
 
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
 
var harga='',pos_kg='',b='',c='';
 
– Javascript, substr seperti di php
 
var str = "Hello world!";
var res = str.substr(1,4);//hasil ello

 
– javascript, mengambil angka saja dalam string
 
var thestring = '100,000 IDR';
var thenum = thestring.replace(/[^0-9]/g,'');

 
– cek string saja
 
textnya.match(/^[a-zA-Z]+$/)
 
– cek wajib angka saja
 
!textnya.match(/^[0-9]+$/)

 
– cek string saja + spasi
 
textnya.match(/^[-\sa-zA-Z]+$/)
 
– jquery, select index ke 2 dari selector pake eq
 
misal .rgMasterTable:eq(2), class yang ke 3

 
– javascript iterasi array key value
 
for (var k in target){
  if (target.hasOwnProperty(k)) {
    alert("Key is " + k + ", value is" + target[k]);
  }
}

 
– javascript number format ribuan dengan koma
 
x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
 
– javascript multidimensional array
 
solusi set array dalam array
 
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
 
$(location).attr('href','dashboard.php?m=module&p=page');
location.href="?m=module&p=page";
 
– jquery set attr checked gagal
 
$( elem ).attr( "checked",true ) = gagal
$( elem ).prop( "checked", true ) = oke prop = property
 
– jquery jika pada filter atribut start with tidak jalan pakai bintang depannya
 
$("tr[class^='startclassname']").hide();
diganti
$("*[class^='startclassname']").hide();
 
– jquery mencari index dari selector
 
$('table').find('tr').eq(2).html();

 
– javascript cek input angka saja
 
<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
 
$('#element').parents().eq(0); // "Father".
$('#element').parents().eq(2); // "Great-grandfather".
$('#element').parents().eq(2); = $('#element').parent().parent();

 
– javascript / jquery refresh work all browser
 
location.reload();
//window.location.href = 'http://example.com';
window.location.reload();

 
– javascript trim
 
function trim(str) {
    return str.replace(/^\s*|\s*$/g,"");
}
 
– javascript selisih detik
 
contoh digunakan saat ada alert
 
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
 
data: "user_email="+encodeURIComponent(user_email),
 
– jquery unwrap
 
A nice house was found in <b>Toronto</b>.
$('b').contents().unwrap();

 
– javascript unwrap
 
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
 
todolist = todolist.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
– javascript protect iframe
 
<script>if(self != top) { top.location = self.location; }</script>

 
– js jquery setelah dokumen di load
 
<script type="text/javascript">
$(document).ready(function() {
});
</script>

 
– jquery post ajax post
 
$.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
 
$(window).keypress(function(ev){
    if(ev.charCode == 99) {
        $.loader('close');
    }
});
 
– javascript settimeout
 
setTimeout(function(){
    fungsix(a, b);
}, 1000);
 
– javascript trim, karena fungsi trim tida support disemua browser
 
function myTrim(x) {
    return x.replace(/^\s+|\s+$/gm,'');
}
 
– javascript sleep
 
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
 
str.substr(start, length)
str.substring(start, finish)

 
– javascript strpos
 
str.indexOf("welcome",start);

 
– javascript detect ssl
 
('https:' == document.location.protocol ? 'https:' : 'http:')

 
– cek is json valid dengan jquery
 
try {
    var obj = $.parseJSON(rsp);
} catch(e) {
    $("#response_data").prepend(rsp);
    return false;
}
 
– javascript ucwords
 
var str = $(this).html();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
 
– Simpan file dengan alamat absolute dan relative
 
//relative
fs.write('./subfolder/namafile.txt', 'isi file', 'w');
//absolute
fs.write('C:/folder/subfolder/namafile.txt', 'isi file', 'w');
 
– Jquery live onready terbaru
 
//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
 
function IsJsonValid(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}
 
– Menambahkan koma untuk angka besar (ribuan, jutaan, dst)
 
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
 
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
 
var txt = txt.replace(/["\']/g, "");
 
– Strip tags di javascript
 
//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
 
<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.
 
        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)
 
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
 
<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
 
<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
 
<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=""/>
 
Demikian beberapa fungsi yang berguna yang biasa digunakan programmer untuk keperluan ngoding.
 
Baca Juga:  HTML dan Javascript ternyata hubungannya mudah dipahami (part 5)
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