How to get query string values in JavaScript

Hi, Getting query string value in Php is easy you can use global variable like $_GET, $_POST, $_REQUEST. But in case of JavaScript. How you can get it. Here is a simple method you can use to get the value of a query string with JavaScript:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}


Use

// query string like : http://www.xyz.com/?location=lorem&city=&ipsum
  var location = getParameterByName('location'); // "lorem"

How to create a html block in java-script variable

JavaScript is a client-side and dynamic scripting language. JavaScript allows you to build interactivity into static HTML pages. It makes pages more dynamic and interactive. Some time you need to use a large block of HTML code into JavaScript variable.

How you can create it ? First of all create HTML block you want display and assigned to a java script variable whichever wrapping in single quotes. You need a backslash at the end for string that span multiple lines and some quotes to encapsulate it overall, like this:
Example:

var html='<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row">Field Name</th>
<td>
<input type="text" autofocus="autofocus" class="regular-text required" id="formtitle" name="formtitle" />
<span id="formtitleerr" class="err"></span>
</td>
</tr>
<tr valign="top">
<th scope="row">Field Type</th>
<td>
<select id="fieldtype">
<option value="Text">Text</option>
<option value="Textarea">Textarea</option>
<option value="RadioBox">RadioBox</option>
<option value="CheckBox">CheckBox</option>
<option value="Number">Number</option>
<option value="Email">Email</option>
</select>
<span id="formtitleerr" class="err"></span>
</td>
</tr>
</tbody>
</table>';

Here is a handy tool for creating java script HTML block easily.
Click Here
It automatically creates a list of html tags, keeping the indentation.

Learn animation basics through JavaScript

This tutorial provides a basic understanding of how to create animation using JavaScript.

JavaScript can be used to move a number of DOM elements (img,divor any other HTML element) around the page according to some sort of pattern determined by a logical equation or function.

Here are some example of JavaScript animation:

http://visionmedia.github.io/move.js

http://greensock.com/

http://Velocity.js

http://paperjs.org/

http://three.js – Javascript 3D library

Block Alphabet in text field using JavaScript

In this article, I will demonstrate how to allow user to input only numeric characters in a TextBox field by using Javascript. The program prevents user from copying and pasting invalid characters into the TextBox.


function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46)
return false;
return true;
}

Block Number in text field using JavaScript

In this article, I will demonstrate how to allow user to input block numeric characters in a TextBox field by using Javascript. The program prevents user from copying and pasting numerical characters into the TextBox.

// Restrict user input in a text field
// create as many regular expressions here as you need:
var digitsOnly = /[1234567890]/g;
var integerOnly = /[0-9.]/g;
var alphaOnly = /[A-Za-z]/g;
var usernameOnly = /[0-9A-Za-z._-]/g;

function restrictInput(myfield, e, restrictionType, checkdot){
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);

// if user pressed esc… remove focus from field…
if (code==27) { this.blur(); return false; }

// ignore if the user presses other keys
// strange because code: 39 is the down key AND ‘ key…
// and DEL also equals .
if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character==”‘”)) && code!=40) {
if (character.match(restrictionType)) {
if(checkdot == “checkdot”){
return !isNaN(myfield.value.toString() + character);
} else {
return true;
}
} else {
return false;
}
}
}

 

AngularJS

AngularJS, commonly referred to as Angular, is an open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications.

The library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Those attributes are interpreted as directives telling Angular to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

Features

  • AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).

  • AngulajJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.

  • Application written in AngularJS is cross-browser compliant. AngularJS automatically handles javascript code suitable for each browser.

  • AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

Overall, AngularJS is a framework to build large scale and high performance web appliation while keeping them as easy-to-maintain.

Advantages of AngularJS

  • AngularJS provides capability to create Single Page Application in a very clean and maintainable way.

  • AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience

  • AngularJS code is unit testable.

  • AngularJS uses dependency injection and make use of sepearation of concerens.

  • AngularJS provides reusable components.

  • With AngularJS, developer write less code and get more functionality.

  • In AngularJS, views are pure html pages, and controllers written in javascript do the business processing.

On top of everything, AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

Disadvantages of AngulaJS

Though AngularJS comes with lots of plus points but same time we should consider the following points:

  • Not Secure : Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.

  • Not degradable: If your application user disables Javascript then user will just see the basic page and nothing more.

The AngularJS Components

The AngularJS framework can be divided into following three major parts:

  • ng-app : This directive defines and links an AngularJS application to HTML.

  • ng-model : This directive binds the values of AngularJS application data to HTML input controls.

  • ng-bind : This directive bins the AngularJS Application data to HTML tags.

Basic Example:

<!DOCTYPE html> <html>

<head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head>

<body>

<div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p>{{name}}</p> </div>

</body> </html>

Another Example

Cost calculation

<!DOCTYPE html> <html>

<head> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head>

<body>

<div data-ng-app="" data-ng-init="quantity=1;price=5">

<h2>Cost Calculator</h2>

Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">

<p><b>Total in dollar:</b> {{quantity * price}}</p>

</div>

</body> </html>

Out Put Capture

When you open the link https://angularjs.org/, you will see there are two options to download AngularJS library.

Countdown timer with buzzing sound

This tutorial will help you, how to create Countdown Timer using Javascript and HTML and play sound after times up.My primary caution for you is to understand JavaScript handled on the client side and has a dependency on the user’s computer speed. However, countdown timers are still effective for encourgaging your users to quickly perform a particular task.

In our example, we want an easy little time to countdown from one minute. Let’s build our first JavaScript countdown display:


var seconds = 1*60;
function secondPassed() {
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
  //  document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
	
	document.getElementById('dmin').innerHTML=minutes;

    document.getElementById('dsec').innerHTML=remainingSeconds;

    if (seconds == 0) {
        clearInterval(countdownTimer);
       // document.getElementById('countdown').innerHTML = "Buzz Buzz";
	  //location.reload();
	  myalarm(); 
	  
    } else {
        seconds--;
    }
}
 
var countdownTimer = setInterval('secondPassed()', 1000);

In our myalarm function we included a mp3 file using "soundmanager2.js" library.SoundManager 2 makes it easier to play audio using JavaScript.

Here our example:


function myalarm() {


  setTimeout(function() {

    loadScript('soundmanager2.js', function() {

     
      window.setTimeout(function() {

        soundManager.setup({

          onready: function() {

            soundManager.createSound({
              id:'foo',
              url:'alarm-clock-01.mp3'
            }).play();


          },

          ontimeout: function() {

            msg('Loaded OK, but unable to start: unsupported/flash blocked, etc.');

          }

        });

        // ensure start-up in case document.readyState and/or DOMContentLoaded are unavailable
        soundManager.beginDelayedInit();

      }, 1000);

    });

  },1000);

}

Download