Ultimate Programming Tutorials: javascript

Home » Posts filed under javascript

Top Reasons To Use Grunt - A Leading JavaScript Task Runner

in javascript, Web - By Mohamed Shimran - on 6/26/2015 - 8 comments

Though web development has evolved into one of the most promising fields of career, the majority of mundane work associated with the same has often refrained students from choosing the same. Fortunately, we can rely on a good task runner which can automate the tasks(for eg: compilation, liniting, minification, unit testing etc.) which need to be performed on a repetitive basis. So, if you're a JavaScript developer who's in a fuss about the effective execution of multiple tasks which need to be performed repetitively, then using the popular Javascript task runner called Grunt can work for you. Keep on reading the paragraphs that follow in this post to get a bigger picture of Grunt and reasons behind using the same as an individual and/or a team.

Convert Strings to Upper Case in JavaScript

in javascript, snippet, tutorial - By Mohamed Shimran - on 12/13/2014 - 3 comments

This will teach you the way to convert strings to upper case in javascript. we will use these if we've a text field needs to capitalized all inputted text or simply the 1st letter of the word.

Source :

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 function changeEach(el){
  var text = document.getElementById(el).value; 
  var capital = text.toUpperCase();
  
  document.getElementById(el).value = capital;
 }
 function capitalize(e) {
  var t = '"@.,â€/!?%^&*=+<>|`~-_(){}[]#;:â€œ0123456789';
  var n = "";
  var r = 0;
  e: for (var i = 0; i < e.length; i++) {
   for (var s = 0; s < t.length; s++) {
    var o = e.charCodeAt(i);
    if (o >= 65 && o <= 90 || o >= 97 && o <= 122) {
     r = i;
     break e;
    }
   }
  }
  if (r == 0) {
   n = e.charAt(0).toUpperCase() + e.substring(1, e.length);
  } else {
   n = e.substring(0, r) + e.charAt(r).toUpperCase() + e.substring(r + 1, e.length - r + 1);
  }
  return n;
 }
 function firstLetter(id) {
  var e = document.getElementById(id).value;
  var t = "";
  var n = "";
  for (var r = 0; r < e.length; r++) {
  var i = e.charCodeAt(r);
   if (i == 32 || i == 10) {
    if (n != "") {
     t += capitalize(n) + (i == 10 ? "<br/><br/>" : " ");
     n = "";
     continue;
    }
   n = "";
   } else {
    if (n == "") {
     n += e.charAt(r).toUpperCase();
    } else {
    n += e.charAt(r).toLowerCase();
    }
   }
  }
  t += capitalize(n) + " ";
  document.getElementById(id).value = t;
  }

</script>
<title>Automatically Change Text to Upper Case</title>
</head>
<body>
 <div id="container">
     <table>
            <form name="change_text" method="post" action="#">
<tr>
             <td colspan="3" align="center"><h1>
Change Each Letter to Upper Case</h1>
</td>
            </tr>
<tr>
             <td><input id="efname" type="text" name="efname" onChange="changeEach(this.id);" placeholder="First Name..."></td>
                <td><input id="elname" type="text" name="elname" onChange="changeEach(this.id);" placeholder="Last Name..."></td>
                <td><input id="emname" type="text" name="emname" onChange="changeEach(this.id);" placeholder="Middle Name..."></td>
            </tr>
<tr>
             <td colspan="3" align="center"><h1>
Change First Letter of Each Word to Upper Case</h1>
</td>
            </tr>
<tr>
             <td><input id="ffname" type="text" name="ffname" onChange="firstLetter(this.id);" placeholder="First Name..."></td>
                <td><input id="flname" type="text" name="flname" onChange="firstLetter(this.id);" placeholder="Last Name..."></td>
                <td><input id="fmname" type="text" name="fmname" onChange="firstLetter(this.id);" placeholder="Middle Name..."></td>
            </tr>
</form>
</table>
</div>
</body>
</html>

Hope you learn from this

How to Validate Email in JavaScript with Regular Expression

in asp, css, email, email check, emails, hotmail, html, javascript, my email, php editor, regex, regular expression, send email, smtp, sun microsystems, tutorial, validate email, validation - By Mohamed Shimran - on 2/06/2014 - 2 comments

We have seen many Regular Expression tutorials in VB.NET and C-sharp, this is our first JavaScript tutorial on Regular Expressions. So today we’ll see how to validate an email address that's being entered to a textbox. We have a textbox and a button, when you enter something into the textbox and click on the “validate” button it’ll tell if It’s an email address or not(being noob GRRR!).

Add our JavaScript first(make sure you add it to the head) :

Next add the input box and the validate button :

That’s all. You can use this for some kind of subscription button or register/login forms. I hope this little snippet is helpful for you.

Snippet : Javascript onmouseover and onmouseout

in javascript, snippet, snippets - By Mohamed Shimran - on 9/08/2013 - 3 comments

This snippet helps you to make buttons etc.. I have been using this for Download Buttons.

Widget to share photos,text & page

in blogger, html, html/php, javascript, tutorial - By Mohamed Shimran - on 7/30/2013 - 2 comments

The best way to get traffic for your blog is from search engines and social media. Today I found a social media sharing service very impressive and attractive. Let me introduce to the service, there's a website called markely.com that promotes your blog visitors to share your blog articles in three ways.

1 : Page Sharing

2 : Image Sharing

3 : Text Sharing

To install this service on your blog go to http://www.markerly.com/onboarding

Choose Social Media services + Sharing Types + Icon Color

Get your code

Put the code at </body> or somewhere in your template

Verify your installation

They have a dashboard where you can see the sharing stats & etc, I hope this is helpful. Have a great day.

How To Add A Top Bar To Blogger

in blogger, javascript, tutorial - By Mohamed Shimran - on 7/20/2013 - 2 comments

We are going to use a service a popular one it's called AddThis . AddThis provide many services such as sharing widgets and recommended posts widget etc and we are going to use Welcome Bar . Go to addthis.com and create a new account or if you already have an account log on to your account.

Now go to https://www.addthis.com/get/welcome#.UemQQ9JgdeY and create your Welcome Bar . Design the bar as well

Finally get the code right after that designing place , this is my code(don't use this code)

Place that javascript below head or between body tags then as you have settled your Welcome Bar , it will appear. Thanks For Reading .

How To Put HTML,CSS,JAVASCRIPT Codes In Your Blogger Articles

in javascript, syntax highlighter, tutorial - By Mohamed Shimran - on 7/08/2013 - 4 comments

Yes this is my second blogger tutorial , actually this is something i had to do to solve a problem . i use alexgorbatchev.com/SyntaxHighlighter but it seems that if i use anything similar to class in any language then some span tags cover them so the code goes wrong so i was looking for something that will fix my big problem then i found prism.js so i tried it and it's really great those span tags were not there so i wanted to share this with you .

Details of the script


/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

So to use it in your blogger blog or normal website , just add these under your head tag

Usage :

replace markup with your language name :).

by the way they also provide themes and plugins also you can select the languages , just go to prismjs.com and then go to download there you will be able to select the languages and plugins finally download the css and js.

Hope you like this tutorial , peace.

How To Make A Simple Digital Clock Using Javascript

in javascript, time, tutorial - By Mohamed Shimran - on 4/16/2013 - 5 comments

i remember i have written a tutorial on making a clock using javascript before but i know that it was not explained and that codes were not clean so i thought make it again with nice codes . first we need to create a html document to make a the javascript codes work or make the javascript functions work so go ahead and create a new html document and type the regular html tags and under head tag add these codes

now close the head tag and start the body tag now put these codes there

now close the body tag and check your html page boom ! a small digital clock in javascript ! you can also use some awesome css and some other things to make this beautiful !

How To Count Number Of Characters Using html and Javascript

in html, javascript, php, tutorial - By Mohamed Shimran - on 3/26/2013 - 1 comment

hello guys , i have had an idea to make something what the title says so on i am here with a small tutorial on making what the title says . we will be using html and javascript by the waythe whole code is just 20 lines including html tags ok now open your favorite text editor and create the html tags (html,head,body) after that go under head tag and we will use a function so put these

alright now go under body tag and put these


Insert text to You want to count:

ok now save it as you want dont forget to give the extension to php or html , i recommend php

here is a preview of what you created

How To Display Time In Javascript

in javascript, time, tutorial - By Mohamed Shimran - on 1/06/2013 - 1 comment

ok this is a simple clock i mean its a digital one but its real time , the javascript is down here

How To Display Date In Javascript

in display date, javascript, tutorial - By Mohamed Shimran - on 1/06/2013 - 1 comment

i am making this as very small because i have many things to post oj here is the code

you can place any where in your html page easily

How To Make A Simple Stopwatch In Javascript

in javascript, stopwatch create, tutorial - By Mohamed Shimran - on 12/31/2012 - 15 comments

this is the look of the stopwatch

the script add it below head

function clearALL() {
clearTimeout(clocktimer);
h=1;m=1;tm=1;s=0;ts=0;ms=0;
init=0;show=true;
readout='00:00:00.00';
document.clockform.clock.value=readout;
var CF = document.clockform;
for (ij=0;ij<=9;ij++) { CF[mPLUS[ij]].value = ''; }
ii = 0;}

function addMEM() {
if (init>0) {var CF = document.clockform;
CF[mPLUS[ii]].value = readout;
if (ii==9) { ii = 0; } else { ii++; }}}

function startTIME() { 
var cdateObj = new Date();
var t = (cdateObj.getTime() - dateObj.getTime())-(s*1000);

if (t>999) { s++; }

if (s>=(m*base)) {ts=0;
m++;} else {ts=parseInt((ms/100)+s);
if(ts>=base) { ts=ts-((m-1)*base); }}

if (m>(h*base)) {tm=1;
h++;} else {tm=parseInt((ms/100)+m);
if(tm>=base) { tm=tm-((h-1)*base); }}

ms = Math.round(t/10);
if (ms>99) {ms=0;}
if (ms==0) {ms='00';}
if (ms>0&&ms<=9) { ms = '0'+ms; }

if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; }
dm=tm-1;
if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; }
dh=h-1;
if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; }

readout = dh + ':' + dm + ':' + ds + '.' + ms;
if (show==true) { document.clockform.clock.value = readout; }

clocktimer = setTimeout("startTIME()",1);}

function findTIME() {
if (init==0) {dateObj = new Date();
startTIME();
init=1;} else {if(show==true) {show=false;} else {show=true;}}}
</script>

this is the form code

thanks for reading

Javascript Popup Message Box

in javascript, messagepo, tutorial - By Mohamed Shimran - on 12/31/2012 - 1 comment

this is something very simple and it seems like this

just add this somewhere else in you html

Ultimate Programming Tutorials