Javascript Course

Base64-encoded data takes about 33% more space than the original data, but it is useful when you want to transfer compact and encrypted data from an aplication to another (for example from cliend side /browser to a script on server and vice versa).
In this page it is presented a JavaScript object that can be used to encode / decode data with MIME base64 . This object is fully compatible with UTF-8 encoding.
- Source code of Base64 object, from http://www.webtoolkit.info/javascript-base64.html.
/**
*  Base64 encode / decode
*  http://www.webtoolkit.info/
**/
 
var Base64 = { 
  // private property
  _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
 
  // public method for encoding
  encode : function (input) {
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
 
    input = Base64._utf8_encode(input);
 
    while (i < input.length) {
      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);
 
      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;
 
      if (isNaN(chr2)) {
        enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
        enc4 = 64;
      }
 
      output = output +
      this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
      this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
    }
 
    return output;
  },
 
  // public method for decoding
  decode : function (input) {
    var output = "";
    var chr1, chr2, chr3;
    var enc1, enc2, enc3, enc4;
    var i = 0;
 
    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
 
    while (i < input.length) {
      enc1 = this._keyStr.indexOf(input.charAt(i++));
      enc2 = this._keyStr.indexOf(input.charAt(i++));
      enc3 = this._keyStr.indexOf(input.charAt(i++));
      enc4 = this._keyStr.indexOf(input.charAt(i++));
 
      chr1 = (enc1 << 2) | (enc2 >> 4);
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
      chr3 = ((enc3 & 3) << 6) | enc4;
 
      output = output + String.fromCharCode(chr1);
 
      if (enc3 != 64) {
        output = output + String.fromCharCode(chr2);
      }
      if (enc4 != 64) {
        output = output + String.fromCharCode(chr3);
      }
    }
 
    output = Base64._utf8_decode(output);
 
    return output;
  },

  // private method for UTF-8 encoding
  _utf8_encode : function (string) {
    string = string.replace(/\r\n/g,"\n");
    var utftext = "";
 
    for (var n = 0; n < string.length; n++) {
      var c = string.charCodeAt(n);
 
      if (c < 128) {
        utftext += String.fromCharCode(c);
      }
      else if((c > 127) && (c < 2048)) {
        utftext += String.fromCharCode((c >> 6) | 192);
        utftext += String.fromCharCode((c & 63) | 128);
      }
      else {
        utftext += String.fromCharCode((c >> 12) | 224);
        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
        utftext += String.fromCharCode((c & 63) | 128);
      }
    }
 
    return utftext;
  },

  // private method for UTF-8 decoding
  _utf8_decode : function (utftext) {
    var string = "";
    var i = 0;
    var c = c1 = c2 = 0;
 
    while ( i < utftext.length ) { 
      c = utftext.charCodeAt(i);
 
      if (c < 128) {
        string += String.fromCharCode(c);
        i++;
      }
      else if((c > 191) && (c < 224)) {
        c2 = utftext.charCodeAt(i+1);
        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
        i += 2;
      }
      else {
        c2 = utftext.charCodeAt(i+1);
        c3 = utftext.charCodeAt(i+2);
        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
        i += 3;
      }
    }
 
    return string;
  }
}
- Usage:
1. Copy the Base64 object into your JavaScript script.
2. To encode a string, calls the encode() method:   Base64.encode('string'); .
3. To decode a base64-encoded string, calls the decode() method:   Base64.decode('base64-string'); .

- Example. The text added into a textarea will be encoded with base64, and added into an input form field. The base64-encoded string added in that input field can be decoded and displayed into an Alert window.
<form action="#" method="post">
 Enter a text:<br/>
 <textarea name="txtstr" id="txtstr" cols="26" rows="5"></textarea> <button id="btnencode64">Encode</button><br/><br/>
 Base64 encoded data:<br/>
 <input type="text" name="str64" id="str64" size="34" /> <button id="btndecode64">Decode</button>
</form>
<script type="text/javascript">
// Here add the code of Base64 object

// register onclick events for encode button
document.getElementById('btnencode64').onclick = function() {
  var txt_string = document.getElementById('txtstr').value;      // gets data from textarea

  // encode data and adds it in #str64 element
  document.getElementById('str64').value = Base64.encode(txt_string);
  return false;
}

// register onclick events for decode button
document.getElementById('btndecode64').onclick = function() {
  // decode data from input text field and display it into an alert window
  var str64 = Base64.decode(document.getElementById('str64').value);
  alert(str64);
  return false;
}
</script>
Demo:
Enter a text:


Base64 encoded data:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
JavaScript base64 encode decode

Last accessed pages

  1. For and Foreach Loops (1733)
  2. Recursive Functions in PHP (233)
  3. Properties and Methods of the Form elements (249)
  4. Display data from PHP Array, or MySQL in HTML table (22152)
  5. Triangles with CSS (3201)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (519)
  2. PHP Unzipper - Extract Zip, Rar Archives (421)
  3. SHA256 Encrypt hash in JavaScript (402)
  4. Read Excel file data in PHP - PhpExcelReader (360)
  5. Create simple Website with PHP (332)