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.

Advertisements

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!!)