Javascript - an intro

What :
       Javascript is a programming language which can exist on its own and it can interact with the DOM elements. It goes well with HTML and CSS to give so many good things in the web page. These are all facts about the language. Now we can see about some working in that language.

To declare any variable in this language we can use the "var" keyword.

• var name="prem"; // String type has double quotes( "" )
• var age=15;// Numeric type don't have double quotes.
• var nothing; //undefined type
• var something=null; // null type

To create and call a function.

var add = function(a,b) // function definition

{

       return a+b;

};

add(10,15);  // invoking the function

The most used output function is,
 document.write("something");
To print the output onto the console we use

 console.log( add(10,15) );

To print the output onto the screen as a pop-up
 confirm( add(10,15) ); // here the return will be a boolean
To output without the use of a return value we can use alert box

  alert( add(10,15) );

To get inputs directly from the user we use the prompt(); function.
It takes two parameter first is the text you need to appear on the screen and the second is the default value in case user doesn't enter anything.
var name=("type your name","prem");

The conditional statements and the looping statements will work in the same way as in C language.
Note : There is a difference between operators "==" and "===".
      E.g;
       5=="5" and 5==5 will return true
       but
        5==="5" returns false while 5===5 returns true. i.e, here both the value and type are checked.

Objects:
      Javascript supports objects. An object have properties and methods.
      For example for a string,
      "prem".length // is a property
      and
      "prem" .toUpperCase() // is a method.
       Method is doing something over the given object while properties are the attributes associated with an object.
        Date  is an object in the JS(shorthand for JavaScript) and the date object can be obtained by,

          var today = new Date ();

           Now, to have the seperate date, hours, minutes and second we can use the code below,
          var date=today.getDate();
          var month=today.getMonth();
          var h=today.getHours();
          var m=today.getMinutes();
          var s=today.getSeconds();

TDD-Test Driven Development

TDD
       So before beginning this we shall see about the usual manner in which we code. When we are given the problem description we will start to code. End up with a solution. Then give test cases to check if the code works well. But in TDD,

• We take a requirement and write a test case that matches it.
• Run the test so that it fails.
• Modify the existing code so that the test passes.
• Refactor the code so that the code is more efficient and manageable.

       The diagram below explains the working of the TDD.

Scenario:
        So lets consider a scenario where you are asked to write a code to play music using a music player.
        music_player()
        {
        }

        Test 1: should play a song.
        The above test will fail as there is no option to play the song.
        The code is changed to,
          music_player()
          {
                 play_audio(); // it will contain the code to play a particular file
           }

           Test 2: Should allow user to select a song.
            The above code will fail for this test. So we will need to add a new piece of code to choose a file.
           music_player()
          {
                int song_id = select(); //to select a song from the list of songs
                 play_audio( song_id );

           }

           Test 3: Should not list non audio/video files.
           The code will fail as there is such an option is not created.
           music_player()
           {
                show_list();  // list only audio/video files.
                int song_id = select();

                play_audio( song_id );

            }


           Test 4: Should not play a deleted song.
           The code will fail as there is no option to check if the given song id is in the list.
           music_player()
           {
                show_list();
                int song_id = select();
                if( check_updates(song_id) ) // This will check if the song is still in the list
                {
                        play_audio( song_id );
                 }
            }

            Test 5: Should play videos for video songs.
            The code fails as there is no special provision for playing videos. Then we have to change the code as,
            music_player()
           {
                show_list();
                int song_id = select();
                if( check_updates(song_id) )
               {
                     int type = get_type(song_id);
                     play( type, song_id ); //generic play function
                }
            }
            play( type , song_id )
            {
                   switch(type)
                   {
                             case AUDIO: play_audio(song_id);
                             case VIDEO: play_video(song_id); 
                   }
            }

            Here we assume that select(), play(), play_audio() and play_video() are already tested units so we need not check their functionality again. We are concentrating only on the music player().
 
Advantages:
            The good thing about this is if a new programmer wants to add some other features such as categorize() the music files. He will write a test case for it and add the feature and run the entire test cases on the music_player().

            So if there is a problem he can know due to which test case there is a failure and overcome the problem. This gives the programmers some assurance over the code.

              NEGATIVE TEST CASES: These test cases are here to handle situations when the test cases are outside what is defined for the system. For the above music_player() scenario providing non audio/video files and selecting id's of deleted files.
  
             POSITIVE TEST CASES: These test cases are to know how system should react to proper inputs. For the above music_player() giving files to play and selecting files are examples of positive test cases.

CSS

CSS, an abbreviation of Cascading Style Sheet.

Why ?
       CSS came to existence to solve the problem of overloading the HTML contents with all the formatting options. When all the formatting options came into use there was a problem of mentioning the options in each and every tag. This lead to having a big HTML document which is not a good method for a programmer. Hence people came up with the idea for separating the formatting style options into a separate file. Thus came the CSS.

Like is said in my previous blogs the css can be included,

1. Inline(within each tags). 
2. In the style tag of the head section.
3. From an external CSS file.

 The last one is the preferred way. If multiple styles are set to a particular selector then the style will be inherited with number three having the highest priority and the priority decreases as we move up in the above mentioned list.

CSS styling includes adding attributes to background, text, font, links, list tables.

• In Background we can specify either a color or a picture. We can specify the position of the image. There is also an interesting property called as attachment. This specifies if the image should scroll with the rest of the page or if it should be fixed on the screen.
• In Text section we can specify the space between the letters, lines, words. Indentation of the words. Text decoration( underline,blink, etc.,).
• In  Font section we can format the fonts we want. There are options for specifying the font size, family, weight(degree of boldness).
• In the Links section there are four categories link-normal unvisited link, visited-any visited link, hover- when the user mouses over the link, active- the moment the link is clicked. We can give properties depending on the links.
• In Table we can set attributes such as border format(type, color, width, collapse), we can also use the above mentioned options within the table contents as it can contain those elements too.

The Box model:

          The box model consists of four elements. They are given in the above diagram. The Margin and the padding are transparent elements. The former is to specify clarity between the element and adjacent elements while the latter is to have some space between the border and the contents.
         The margin and padding will take the amount of space in all the four directions. The Border will have style and width attribute.

Fluid design :
          Before you start to design any website there is a need to know on which device the web page will be accessed. The normal desktop monitor has a resolution of about 1024 * 768 pixels. But for a smart phone it will not be the same. So if you have specified the dimensions in pixels it wont have the proper in the phone. So the concept of fluid came into picture. Here the dimensions are given as percentage corresponding to the browser. This helps the page to be displayed properly in case it is getting accessed by a hand held device.

Selectors :
       We can select HTML elements from CSS using their id, class or the name of the tags.
         To select a particular element belonging to a particular class we can use
 element_name.class_name. The same cannot be applied over an id as an id will be unique to an element. We can have the same style for more than one selector using ',' operator. E.g,   
        #style_one , #style_two

       {

         color:black;

       }

      If you need to select a particular element like "<p>"which is inside a class "some_class" of element like <div> which in-turn is inside a id "some_id". Then we can select the element using the following way,
        #some_id div.some_class p

        {

             text-align: right;

         }

OOPS CSS:
         OOPS CSS is combining the OOPS concepts into the CSS. CSS doesn't support the OOPS concepts like other languages. But they are still applied in the CSS. How is this possible and why is this necessary..?
       The need to go for such a concept is that you should not duplicate the same css code.
        For example, There are different types of boxes in a HTML file. One can be round, Rectangle. These can further be classified as narrow and wide. So inseted of having classes like,
       .box_round_narrow{...}

       .box_round_wide{...}

       .box_rectangle_narrow{...}

       .box_rectangle_wide{...}

       The above mentioned option can be done but we will unnecessarily using the same "box"  code four times and code for the "rectangle", "round", "narrow", "wide" two times each. This is not a good way right.
      So lets apply some OOPS here. Split each into different classes.
       .box{...}

       .round{...}

       .rectangle{...}

       .narrow{}

       So if we need a box of type "narrow round ". We can include it in the HTML by giving the class in the following manner.
       <tag_name class=" box narrow round"> some code</tag_name>
        I didn't say that the number of classes will be reduced all i am saying is that unnecessary repetition of codes will be reduced.

        We can also apply the OOPS concept when we need to
1) Separate structure and skin :
          Skin is the appearance of the HTML element i.e, color, font attributes, border color, style etc., This can be same for both the table and a paragraph even if they are not within a single parent container. Thus the skin can be a class and it can be reused over different elements.
         I have a doubt about the structures so i will explain about that to you people later.

2)Separate container and content

         Here the container is the base container and the content is the content the container holds. For E.g, in case where  

<div class="some"><img src=url('www.x.html')> </img></div>.

     The CSS can have .some{border-color:black;border-style:bold;}. Instead of the above design we should alter it as

<div><img src=url('www.x.html') class="bordered"> </img></div>

and in the CSS file we can have,.bordered{border-color:black;border-style:bold;}.

  The use of the above is that we can have another image within the <div>  which doesn't require the border and we can also have a bordered image in any part of the HTML file.

SPRITES 

   Sprites are image sprites which can be used to create animations of moving objects by moving the image quickly over the screen. For example the image at http://www.google.co.in/logos/2011/gumby11-gumby.jpg can be used to create an animation. 

        This can be done if you could enlarge the above picture we will see an animated image which changes itself as you scroll through the image. All we need to do now is to create a viewable portion of the image in the screen and change its position by setting the intervals. We can do this using CSS.