Creating a Barebones Calendar

by Javascript Specialist August 18, 2014 04:07
<table><caption><< <span>August 2014</span> >></caption><thead>
      <tr><th >Mo</th><th >Tu</th><th >We</th><th >Th</th><th >Fr</th><th >Sa</th><th >Su</th></tr>
    </thead><tbody>
        <tr><td>1</td><td >2</td><td >3</td><td >4</td><td >5</td><td >6</td><td >7</td></tr>
      <tr><td >8</td><td >9</td><td>10</td><td >11</td><td >12</td><td >13</td><td >14</td></tr>
      <tr><td >15</td><td >16</td><td >17</td><td >18</td><td >19</td><td >20</td><td >21</td></tr>
      <tr><td >22</td><td >23</td><td >24</td><td >25</td><td >26</td><td >27</td><td >28</td></tr>
      <tr><td >29</td><td >30</td><td >1</td><td >2</td><td >3</td><td >4</td><td >5</td></tr>
    </tbody></table>

If you copy and paste the HTML code above, you should get the calendar table layout below:

<< August 2014 >>
Mo Tu We Th Fr Sa Su
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 1 2 3 4 5

HTML | JavaScript | Tutorial

Automatically saving edited data

by Javascript Specialist August 21, 2014 23:52

Whenever you create a blog, article or email online, you would want the form to automatically saved so that you do not constantly have to press the save button. Below is an example code where there will be a timer that will wait for 3 seconds of inactivity and then count down to save in 5 seconds. At any point, if there is user activity, the timer will restart.

A couple of things to note is that:
1. setTimer and setInterval are not JavaScript standards even though they exist in all browsers.
2. The function inside the setTimer cannot return a value.

<input onkeyup='openTimer()' type='text' /><span id='timer'></span>
<script>
var count,openTime, counter;
function openTimer() {
clearTimeout(openTime);
clearInterval(counter);
count=6;
document.getElementById("timer").innerHTML='';
openTime=setTimeout(startTimer(),3000);
}
function startTimer() {
counter=setInterval(timer, 1000);
}
function timer() {
count=count-1;
if (count <= 0) {
document.getElementById("timer").innerHTML='Data Saved';
clearInterval(counter);

// execute save function
return;
}
document.getElementById("timer").innerHTML='Saving in '+count;
}
</script>

JavaScript | References | Tutorial

Creating reusable JavaScript class Library Functions

by Javascript Specialist August 15, 2014 23:03

1. So you know how to create data validation to input only Integers.
2. You also know how to add event listener on class names.
3. Now, by adding the two ideas, you can create reusable JavaScript class library functions.

Below is an example of reusable class library function where every time you want to ensure your input is an integer, just add the class='IsInt' on to the input element.

<input type='text' class='IsInt' />
function IsInt() {
    var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
    if (chCode >= 48 && chCode <= 57) {
        return true;
    }
    else {
            alert('Numbers only');
        return false;
     }
 var classname = document.getElementsByClassName("IsInt");
    for(var i=0;i<classname.length;i++){
        if (classname[i].addEventListener)
        classname[i].onkeypress=function() {return IsInt(););

Input Validation | JavaScript | References | Tutorial

Adding Event Listener by Class attribute

by Javascript Specialist August 14, 2014 01:07
 var classname = document.getElementsByClassName("classname");
    var myFunction = function() {
        alert('Event Added');
    };
    for(var i=0;i<classname.length;i++){
        if (classname[i].addEventListener)
        classname[i].addEventListener('click', myFunction, false);
        else
                classname[i].attachEvent('onclick', myFunction);
    }

JavaScript | References | Tutorial