{"id":203,"date":"2012-05-13T11:38:33","date_gmt":"2012-05-13T03:38:33","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=203"},"modified":"2018-09-03T22:08:41","modified_gmt":"2018-09-03T14:08:41","slug":"handy-javascript-code-segments","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/handy-javascript-code-segments\/","title":{"rendered":"Handy Javascript code segments"},"content":{"rendered":"

The augmentation of Javascript to CSS and HTML is beautiful. While trying out jQuery<\/a> to create my own tic tac toe game<\/a>, I realised that there are Javascript\/jQuery code segments that could be helpful to me when building web applications.<\/p>\n

In this post, I collate Javascript and jQuery code segments that I had utilized in my web projects for ease of future references.<\/p>\n

DOM manipulation<\/h3>\n

Get a jQuery reference for manipulating a DOM element<\/h4>\n

Suppose we have a html input text field<\/p>\n

\r\n<input id="nameTextField" name="name" type="text"\/>\r\n<\/pre>\n
The following will get a jQuery reference that allow us to act on the input text field. <\/p>\n
\r\n$nameTextField = $('#nameTextField');\r\n<\/pre>\n
Check whether a DOM element exists<\/h4>\n
\r\n\/\/ Get a jQuery reference with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\n\/\/ If jQuery contains no results\r\nif ($nameTextField.length == 0) {\r\n    alert('nameTextField does not exists.');\r\n} \r\nelse {\r\n    alert('nameTextField exists.');\r\n} \/\/ end if\r\n<\/pre>\n
Hide a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference to a DOM element with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\n\/\/ Hide the DOM element\r\n$nameTextField.hide();\r\n<\/pre>\n
Show a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference to a DOM element with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\n\/\/ Show the DOM element\r\n$nameTextField.show();\r\n<\/pre>\n
Set the HTML contents of a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference to a DOM element with id\r\n\/\/ as firstParagraph\r\n$firstParagraph= $('#firstParagraph');\r\n$firstParagraph.html('New contents');\r\n<\/pre>\n
Add a DOM element as a sibling to another DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference to a DOM element with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\n\/\/ Add a paragraph as a sibling right \r\n\/\/ after nameTextField\r\n$nameTextField.after('<p>A paragraph after nameTextField.<\/p>');\r\n\r\n\/\/ Add a paragraph as a sibling \r\n\/\/ before nameTextField\r\n$nameTextField.before('<p>A paragraph before nameTextField.<\/p>');\r\n<\/pre>\n
Remove a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\n\/\/ Remove the DOM element with id as nameTextField\r\n$nameTextField.remove();\r\n<\/pre>\n
Check whether there is a sibling element after a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\nif ($nameTextField.next().length == 0) {\r\n    alert('There is no sibling element after nameTextField');\r\n}\r\nelse {\r\n    alert('There is a sibling element after nameTextField');\r\n} \/\/ end if\r\n\r\n<\/pre>\n
Check whether there is a sibling element before a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\nif ($nameTextField.prev().length == 0) {\r\n    alert('There is no sibling element before nameTextField');\r\n}\r\nelse {\r\n    alert('There is a sibling element before nameTextField');\r\n} \/\/ end if\r\n<\/pre>\n
Add a CSS style class to a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\n\/\/ Add the style class errorField to \r\n\/\/ nameTextField\r\n$nameTextField.addClass('errorField');\r\n<\/pre>\n
Remove a CSS style class from a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\n\/\/ Remove the style class errorField to \r\n\/\/ nameTextField\r\n$nameTextField.removeClass('errorField');\r\n<\/pre>\n
Detect clicks on a DOM element<\/h4>\n
\r\n\/\/ Get a jQuery reference with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\n\/\/ Add a function callback to the click\r\n\/\/ event for nameTextField\r\n$nameTextField.click(\r\n    function(event) {\r\n        alert('You had clicked on nameTextField.');\r\n    } \/\/ end function(event)\r\n);\r\n<\/pre>\n
Detect form submission<\/h4>\n
\r\n$contactMeForm = $('#contactMeForm');\r\n$contactMeForm.submit(\r\n    function(event) {\r\n        alert('Form had been submitted');\r\n    } \/\/ end function\r\n);\r\n<\/pre>\n
Returning a false value inside the callback function can prevent the form from submitting the input contents to the server end. This is useful for form validation.<\/p>\n
Field inputs and string value checking<\/h3>\n
Get value of input text fields<\/h4>\n
\r\n\/\/ Get a jQuery reference with id\r\n\/\/ as nameTextField\r\n$nameTextField = $('#nameTextField');\r\nname = $nameTextField.val();\r\n<\/pre>\n
Check whether a checkbox is checked<\/h4>\n
\r\n\/\/ Get a jQuery reference with id as \r\n\/\/ milkOptionCheckbox\r\n$milkOptionCheckBox = $('#milkOptionCheckbox');\r\nif ($milkOptionCheckBox.is(':checked')) {\r\n    alert('You have indicated that you like to drink milk.');\r\n}\r\nelse {\r\n    alert('You have indicated that you do not like to drink milk.');\r\n} \/\/ end if\r\n\r\n<\/pre>\n
Get the length of a string<\/h4>\n
\r\nstr = 'Hello there!';\r\nalert('Length of str: ' + str.length);\r\n<\/pre>\n
Remove leading and trailing whitespaces<\/h4>\n
\r\nvalue = '   some value.  ';\r\ntrimmedValue = $.trim(value);\r\n<\/pre>\n
Check whether a string value contains only numbers<\/h4>\n
\r\nnumberRegEx = \/^[0-9]+$\/;\r\nvalue = '$1234567';\r\n\r\n\/\/ If value contains only numbers\r\nif (numberRegEx.test(value)) {\r\n\talert('Value contains only numbers');\r\n}\r\nelse  {\r\n\talert('Value contains other non-numeric characters');\r\n} \/\/ end if (numberRegEx.test(value))\r\n<\/pre>\n
Because of the dollar sign ($) in the value<\/code> variable, the example code will display a dialog box with the message \"Value contains other non-numeric characters\".<\/p>\n
Note the importance of the ^ and $ characters in numberRegEx. They specify that the regular expression matching spans from the start<\/strong> to the end<\/strong> of the test value. The + character indicates that there should be at least 1 number.<\/p>\n
Without these two characters, the example code will display a dialog box with the message \"Value contains only numbers\". <\/p>\n
Check whether a string value contains specific number of numbers<\/h4>\n
\r\nsevenNumbersAfterSixRegEx = \/^[6][0-9]{7}$\/;\r\nvalue = '12345678';\r\n\r\nif (sevenNumbersAfterSixRegEx.test(value)) {\r\n    alert('Value contains a 6 followed by exactly 7 other digits.');\r\n}\r\nelse {\r\n    alert('Value is not of the format that we desire.');\r\n} \/\/ end if\r\n<\/pre>\n
Because the number contained in value<\/code> does not start with a 6, the example code will display a dialog box with the message \"Value is not of the format that we desire.\".<\/p>\n
As with the previous example, the ^ and $ characters specify that the regular expression matching spans from the start<\/strong> to the end<\/strong> of the test value.<\/p>\n
Within the ^ and $ characters, the matching consists of two main parts. <\/p>\n
    \n
  1. [6]<\/code> matches the number 6.<\/li>\n
  2. [0-9]{7}<\/code> matches any digit from 0 to 9, appearing for exactly 7 times.<\/li>\n<\/ol>\n
    Check whether a string value contains a decimal value to 2 decimal places and less than 100<\/h4>\n
    \r\ndecimalsLessThan100RegEx = \/^([0-9]{1,2}\\.)?[0-9]{1,2}$\/;\r\nvalue = '56.78';\r\n\r\nif (decimalsLessThan100RegEx.test(value)) {\r\n    alert('Value contains a decimal value to 2 decimal places and less than 100.');\r\n}\r\nelse {\r\n    alert('Value is not of the format that we desire.');\r\n} \/\/ end if\r\n<\/pre>\n
    Check whether a string value contains only words and spaces<\/h4>\n
    \r\nonlyWordsAndSpacesRegEx = \/^[a-zA-Z\\s]+$\/;\r\nvalue = "I contain some signs";\r\nif (onlyWordsAndSpacesRegEx.test(value)) {\r\n\talert('Value contains only words and spaces.');\r\n}\r\nelse {\r\n\talert('Value contains other unwanted characters.');\r\n} \/\/ end if\r\n<\/pre>\n
    Check whether email is valid<\/h4>\n
    \r\n\r\nemailRegEx = \/^[_A-Za-z0-9-]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$\/;\r\nvalue = 'techcoil@example.com';\r\n\r\nif (emailRegEx.test(value)) {\r\n    alert('Email is in a valid form.');\r\n} \r\nelse {\r\n    alert('Email is not in a valid form.');\r\n} \/\/ end \r\n<\/pre>\n
    Regular expression pattern taken from mkyong.com<\/a>.<\/p>\n
    Related posts<\/h3>\n