Find Position of Left most Vowel: JavaScript

Develop and demonstrate a xhtml file which uses javascript program to find the first occurrence or the left most vowel in the user entered string.
Input: A String.
Output: Position of the left most or first occurrence of the vowel in the user entered string.

Video Explaining The JavaScript Code:

YouTube Link: http://www.youtube.com/watch?v=ni3diSb5Y40 [Watch the Video In Full Screen.]


Work Flow:
Step 1: Prompt the user to enter a string, store the user entered string in a variable called str.

Step 2: Convert the string in str to upper case using toUpperCase function. Now the original value of str is lost and its equivalent upper case string has been stored.
Ex: str = str.toUpperCase();

Step 3: Now find the length of the entered string using length function. i.e., variableName.length; Ex: str.length;

Step 4: Using for loop, loop through the string from 0 to the string length(which is calculated in Step 3).

Step 5: Using chatAt function fetch one character at a time from str and store it in variable chr. Ex: chr = str.charAt(i);

Step 6: Now compare the value in chr with upper case vowels: A, E, I, O, U.

Step 7: If chr matches any vowel then break out of for loop.

Step 8: If the value of i after coming out of the for loop, is less than string length then print the value of i which is the position of the left most occurrence of the vowel. If the value of i is greater than or equal to string length, then Vowel not found in the entered string.

Javascrip coding explained in above video:

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
31
 
<html>
 <head><title>Finding Left most Vowel in the Input String</title></head>
 <body>
	<script type="text/javascript">
	<!--
		var chr = "";
		var str = prompt("Enter the string","");
 
		str = str.toUpperCase();
 
		for(var i = 0; i < str.length; i++)
		{
			chr = str.charAt(i);
 
			if(chr == 'A' || chr == 'E' || chr == 'I' 
                                             || chr == 'O' || chr == 'U')
				break;
		}
 
		if( i < str.length )
			document.write("The position of the
                                           left most vowel is "+(i+1)+"<br />");
		else
			document.write("No vowel found in the entered string");
 
	// -->
	</script>
 
 </body>
</html>

Input/Output:
If Microsoft is the input string, then the position of the first occurrence of vowel is 2. i.e., i.
For Oracle, O is a vowel, so the position is 1.
For Technotip, e is the first vowel, so the position is 2.
For any input which do not have a vowel in it, the above javascript program outputs this statement: No vowel found in the entered string

Roots of Quadratic Equation: JavaScript

Quadratic Equations are of the form ax2 + bx + c = 0. To find roots(root1 and root2) of such an equation, we need to use the formula

quadratic-equation


Video Explaining The JavaScript Code To Find Roots of a Quadratic Equation:


YouTube Link: http://www.youtube.com/watch?v=Td6QViKdbZU [Watch the Video In Full Screen.]




To calculate the roots of a quadratic equation using a computer program, we need to break down the formula and calculate smaller parts of it and then combine to get the actual solution.

So lets calculate square root of b2 – 4 * a * c and store it in variable root_part. Also store 2 * a in variable denom. Now calculate ( – b + root_part ) / denom and store it in root1 and ( – b – root_part ) / denom in root2.
Output the values of root1 and root2 to the browser using document.write statement.

Javascript Coding Explained In Above Video:

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
 
<html>
 <head><title>Quadratic Equation</title></head>
 <body>
 
	<script type="text/javascript">
	<!--
		var a = prompt("Enter value of a","1");
		var b = prompt("Enter value of b","4");
		var c = prompt("Enter value of c","4");
 
		var root_part = Math.sqrt(b * b - 4 * a * c);
		var denom = 2 * a;
 
		var root1 = ( -b + root_part ) / denom;
		var root2 = ( -b - root_part ) / denom;
 
		document.write("1st root: "+root1+"<br />");
		document.write("2nd root: "+root2+"<br />");
 
	// -->
	</script>
 
 </body>
</html>

Usually people will make mistake in this line

var root_part = Math.sqrt(b * b - 4 * a * c);

Be sure that, you write capital letter M in Math.sqrt.

Work Space:
Quadratic Equation: ax2 + bx + c = 0
Let,
a = 1
b = 4
c = 4
i.e., 1x2 + 4x + 4 =0
=> 1x2 + 2x + 2x + 4 = 0
=> x ( x + 2 ) + 2 ( x + 2 ) = 0
=> ( x + 2 ) + ( x + 2 ) = 0
=> x + 2 = 0 AND x + 2 = 0
=> x = -2 AND x = -2

Generating Fibonacci Series using JavaScript

Today lets see how to generate Fibonacci Series using JavaScript programming.

First Thing First: What Is Fibonacci Series ?
Fibonacci Series is a series of numbers where the first two Fibonacci numbers are 0 and 1, and each subsequent number is the sum of the previous two. Its recurrence relation is given by Fn = Fn-1 + Fn-2.

Below are a series of Fibonacci numbers(10 numbers):
0
1
1
2
3
5
8
13
21
34

How Its Formed:
0 <-- First Number 1 <-- Second Number 1 <-- = 1 + 0 2 <-- = 1 + 1 3 <-- = 2 + 1 5 <-- = 3 + 2 8 <-- = 5 + 3 13 <-- = 8 + 5 21 <-- = 13 + 8 34 <-- = 21 + 13

Video Explaining The JavaScript Code To Generate Fibonacci Series:


Some points to keep in mind:
1. In Javascript, it is not mandatory to declare a variable before using it. But still its a good practice to declare it before using.
2. Using html comments inside javascript code ensures that, the old browsers which do not support javascript will ignore all the code written inside the script tags.
3. If we give a very large number while entering the limit, then the loop start executing and the browser memory will soon exhaust and the browser may stop responding.
4. You can use any valid html coding inside document.write statement, as the output will be then processed by a html browser.

JavaScript Code Shown In Above Video:

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
<html>
 <head><title>Fibonacci Series</title></head>
 <body>
	<script type="text/javascript">
	<!--
 
		var var1 = 0;
		var var2 = 1;
		var var3;
 
		var num = prompt("Enter the limit to generate fibonacci no",0);
 
		document.write(var1+"<br />");
		document.write(var2+"<br />");
 
		for(var i=3; i <= num;i++)
		{
			var3 = var1 + var2;
			var1 = var2;
			var2 = var3;
 
			document.write(var3+"<br />");
		}
 
	// -->
	</script>
 
 </body>
</html>

In JavaScript:
Variable declaration is done using var keyword, followed by the variable name.
document.write is the output statement.
prompt is used to get the input from the user.

Even though the above program is easy, you may forget the logic when it is needed. So don’t forget to actually pullout a text editor and try it out yourself.

CSS Hover Over Effect ( CSS pseudo class )

There are many small simple tweaks in CSS that can highly enhance the over all design of a web page. CSS Hover Over Effect is one of them.

The CSS pseudo class which is used to accomplish hover over effect is:

 :hover

Note: CSS pseudo classes doesn’t work on Internet Explorer. So while learning this, make sure you are using Chrome or Mozilla Firefox or Apple’s Safari.

We can apply hover over effect to almost any valid html element. Like: anchor tag, tables, lists etc.

Below is the coding for the example discussed in the above video:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 <head><title>Hover Over Effect In CSS2</title>
  <style type="text/css">
 
	li:hover {
		background-color: pink;
		width: 100px;
	}
 
  </style>
 </head>
 <body>
 
   <ul>
	<li>  Microsoft</li>
	<li>  Apple</li>
	<li>  Oracle</li>
   </ul>
 
 </body>
</html>

In the above example, we are applying hover over effect to a unordered list of elements. And we have changed the background color of the list item when the mouse hovers over the list item elements.

Make sure you try this :hover pseudo class with other html elements too. You can really create very good user interface with the help of hover over effect.

PHP Comments, String Concatenation, Addition of Numbers & Hello World

Today lets see these 4 basic things:
1. The classic “Hello World” program.
2. Comment system in PHP.
3. Concatenation of Strings.
4. Addition of Numbers.



Classic “Hello World” program
Program to output simple string

1
2
3
<?php
          echo "Hello World";
?>

Comments:

1
// This is single line comment
1
# This is also a single line comment
1
2
3
/* This is how multi-line comments
    are written.
*/

Anything following a double forward slash or a hash( # ) symbol will be ignored by your parser. Comments are very important and are often ignored by programmers. Comments come handy when we come back to the codes and want to make some changes to the coding. So its always a good practice to write comments wherever appropriate.

Concatenation of Strings
Concatination is joining of two or more strings end to end. Ex: if we concatenate Micro and soft, it will become Microsoft.
In PHP, we use .[DOT] operator for concatenation. Below is an example:

1
2
3
4
<?php 
         echo "Micro" . "soft";
         echo "<br />Oracle, " . "Sun Microsystems";
?>

The output for the above php code is:

1
2
Microsoft
Oracle, Sun Microsystems

Addition of Numbers
We can use variables for addition of numbers or we can simply make use of echo or print for addition of numbers.

1
2
3
<?php
         echo 10+20;
?>

This gives 30 as the output.

1
2
3
<?php
         echo "5"+10;
?>

This gives 15 as output. The string “5” will be implicitly converted into number and will be added to the actual number 10.

First PHP program & Worst Practices To Avoid

We can embed php inside html tags and html tags inside php codes, but whatever it is – your php file name must end with a .php extension, so that the parser can identify that the file contains php code and it must also look for

<?php and ?>

codes inorder to recognise the codes as PHP codes and execute them.

Note: The output of PHP code is html.

Some Worst Practices to avoid:
Some people may use

<? 
    some_php_codes(); 
?>

OR

<?= 
    some_php_codes(); 
?>

OR ASP style( Active Server Pages – from Microsoft Inc )

<% 
    some_php_codes(); 
%>

OR

<%= 
    some_php_codes(); 
%>

and whole lot of other things.

All these or atleast some of these styles may even work on your computer, and that’s because of the way your php.ini file is configured. The same file may not work on other web servers.
So the best practice is to stick with using

<?php 
    your_php_code; 
?>

Also note that, white space isn’t significant in PHP. i.e., you can introduce any number of spaces, tabs, and new line characters in between your PHP codes.
But there must be atleast a single space after

<?php



Our First PHP program:

<?php
          phpinfo();
?>

Make sure you have saved the file with ( filename.php ) .php extension. Now open the saved file in your web browser.
If your server is working, then you must see a screen that gives information about your web server and PHP.
Output Screenshot:
phpinfo

Don’t make this file available on your server for general public, as it gives a lot of information about your server. Its a handy tool to quickly scan your server configuration.

Accessing localhost Web-server on Mac and PC

Make sure that you turn on the Wamp if you are on a PC and Mamp if you are on Mac.

PC users can access their web files using the URL http://localhost/

Mac users can access their web files using the URL http://localhost/~yourUserDirectory

yourUserDirectory is the user account name of your Mac computer using which you have logged in.

On my Mac, I have a user directory by name Satish. So I can access my web files using http://localhost/~Satish

On Mac, once you enter http://localhost/~yourUserDirectory it automatically changes the URL – but don’t worry about it, its working fine and that’s how it works!



Let non of these small things make you not use the web server. I am writing this because, some times small things like this suck a lot of time and some people may even start feeling this as something very much technical and complicated and may leave the idea of learning altogether.

If you successfully accessed your web files from your localhost web server, then congratulations. Continue your exploration. We have a lot of simple PHP examples on this website that you may want to try. All the Best.

Named Anchors In HTML – For Internal Linking

Often times we spend a lot of time and end up preparing a lengthy document thinking it will be helpful, but as a matter of fact people can’t scroll up and down to find what they are looking for – instead they will goto Google and search for some other sites.

In this situation “Named Anchors” are very helpful. This simple technique will make your miles long document more usable.

Here is a working example of Named Anchor: Clicking on Take Me To The End Of This Article will take you to the end of this article.

Here is how it works:
Imagine that you have a premium software and you have written a manual for Windows, Apple and Unix users on a single page:

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
<html>
<head><title>My Software Manual</title>
</head>
<body>
 
<i>Index</i>
<a href="#microsoft">Windows 7 Manual</a>
<a href="#apple">Macintosh OS X Manual</a>
<a href="#unix">Unix/Linux Manual</a>
 
 
<i>Content</i>
1. <a name="microsoft">Windows 7</a>:  
Here you may write about the system requirement
for your software to work on Windows 7. 
And the amount of resources that your application 
is going to consume. Some tips and tricks. 
    Imagine its about 50 lines.
 
 
2. <a name="apple">Macintosh OS X</a>:  
Imagine there is about 500 lines of documentation 
about using your application on a Apple Macintosh.
 
3. <a name="unix">Unix/Linux</a>:   
Imagine there is about 1000 lines of documentation 
about using your application on a Apple Macintosh.
 
</body>
</html>

These lines of code(from about spinet) act as index.

1
2
3
<a href="#microsoft">Windows 7 Manual</a>
<a href="#apple">Macintosh OS X Manual</a>
<a href="#unix">Unix/Linux Manual</a>

When people click on Windows 7 Manual link in the index section, it takes them directly to the 1. Windows 7 paragraph(in the content section) without even reloading the page – as all the information present in that page has already been loaded.



Make sure you check this working example:
You can find a link at the top of this article – “Take Me To The End Of This Article”, clicking which you will end up here!

Links For Installing WAMP, MAMP, XAMPP

These are the official websites and your goto place if you want to know anything about these technologies. They have a detailed documentation and large community of users who are always willing to help.

Note: Full Form of PHP
Earlier PHP was called “Personal Home Page”. Now PHP is “PHP: Hypertext Preprocessor”.

server
Apache: httpd.apache.org
PHP: php.net
MySQL: dev.mysql.com

Links to install All-In-One package:

For Macintosh:
Starting from Mac OS 10, Apple started including Apache, PHP and Safari(web browser) as a package when you purchase the OS. But its good idea to check and upgrade to latest versions of Apache, PHP and MySQL(which doesn’t yet come along with the OS).

MAMP is a all-in-one package – it stands for Macintosh, Apache, MySQL, PHP.
http://www.mamp.info/en/index.php

XAMPP: http://www.apachefriends.org/en/xampp-macosx.html

For Windows:
WAMP: Windows, Apache, MySQL, PHP
http://www.wampserver.com/en/index.php
XAMPP: http://www.apachefriends.org/en/xampp-windows.html

Full form of XAMPPX (any of four different operating systems), Apache, MySQL, PHP and Perl.
If you visit XAMPP website you can find all-in-one package for Linux, Windows, Mac OS X, Solaris. So its a all-in-one package available for all the major operating systems.

I have just listed the links for the all-in-one installers because the installation process is easy and there is nothing but following the steps that the installer gives while installing.
If you run into trouble or if you have any question regarding installation then you can ask me in the comment section below or in the forum.

All these above packages are opensource and hence free of cost..(I am talking about WAMP, MAMP, XAMPP and not about Mac and PC!!)