Friday, 29 November 2013

XML-The language of Creativity

The language that gives rise to creativity and freedom for a developer. It lets the developer design their own set of language tags that we generally oserve in a markup language. And at the end we get a markup language dtd based on XML.

The XML has built new range of platforms like Android interface development and Windows 8 interface development under XAML.

Imagine you are working with a website which deals with electronics products.What if you had your own language to which you can define your own rules.No more syntax bindings that were defined by others, no more limits of certain type of data not getting accepted into the forms. You get the leash to command the power of your own dtd.

Wouldn't that be great?

Let us have a look how that can be possible.

XML makes it possible. The famous Extensible Markup Language by which the most used applications in Android and Windows 8 apps are designed makes one reach dreams that were more tedious to reach and sometimes forgotten due to slower rate of milestone coverage.

What can be done?
Now let me see I can write my own set of tags such as <p></p>,<div></div> to make up a topic such as cuisines,cars,bikes,cartoons,trees,plants,animals,electronics anything you could imagine.

Why do I need custom DTD?
Custom DTD make it easier to navigate across one's program. For instance,consider a situation you read a program written by someone else defining variables like a,b,c,d for numbers, and aa,bb,cc,dd for strings.
When you as a developer try to extend it further it wastes time. But what if you can sensibly name those tags as <number></number> and <string></string> and then split into further classification such as <natural></natural>,<fibonacci></fibonacci> and strings into <alphabetical></alphabetical>,<alphanumerical></alphanumerical>.
How cool would that be?

It also provides a way to present the data using the XSLT type of Stylesheets.They are similar to the CSS stylesheets but mostly used in the XML programs.

JavaScript Variables-Storage & Declaration


Now we have understood how simple scripting in JavaScript is written.

Let us take in some input from the user using the prompt(); function.
  • prompt(); function:
The prompt function prompts the user to input data into it by providing a textbox.You also get two buttons to input your reaction.Hence the interactivity.

Now the website has asked the input data, now let it process it and act upon it.

You have entered the data asked by the webpage prompt, now let us store it in a variable.

STORING OF VARIABLES USING prompt();
Storing the data directly upon entering is done using the variable declaration along with the prompt input function separated by a "=" sign.
var num = prompt("Enter a number");

DECLARING OF VARIABLES
In JavaScript variables are declared using the "var" keyword. Any variable can be created using this keyword, irrespective of the type of data it stores viz.textual,numerical,symbolical,patterns.

Sample variable declaration
var num;
var name;
var pattern;

The above three declarations can be further assigned specific values by the user.
Sample variable assignment
num=10;
name="JavaScript"
pattern="/[1-9]/;
  1. The first assignment assigns a numerical value of 10 to the variable num.
  2. The second assignment assigns a textual value of Javascript to the varialble name.
  3. The third assignment is a bit peculiar in nature, as the name of the variable suggests it is a pattern, it can intelligently identify the digits between 0 to 9 including 0 and 9 both.
    In general it is called a 'REGULAR EXPRESSIONS'.
    Using such regular expressions one can design their own intelligent variables.
    Let us revisit this in more depth in a while after we visit functions.

    I would suggest you to have a look at what Regular Expressions are here before we approach them, as it would be helpful to have a more intelligent and creative session with them.

    The sample program below showcases the declaration and storage of variables.



1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
3:  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
4:  <html xmlns = "http://www.w3.org/1999/xhtml">   
5:  <head>  
6:  <title>JavaScript </title>  
7:  </head>  
8:  <body>  
9:  <script>  
10:  var num = prompt("Enter a numbe r");  
11:  var name = "JavaScript";  
12:  alert("The number you entered now was" +num);  
13:  document.write("I am "+name);  
14:  </script>  
15:  </body>  
16:  </html>  

Thursday, 28 November 2013

Simple Javascript

JavaScript
Why is JavaScript special?

JavaScript generates DYNAMIC content.

JavaScript gives life to your content by animating certain parts and adds interactivity to it.Weren't the hyperlinks enough,why do I need more interactivity?

Let us map this to the concept of writing in a book once again.

It is pretty hard to imagine interactivity so let us take an example we are aware of i.e. cartoons we see animating in the television.

Imagine one day you open your book and suddenly the objects start animating like the cartoons from your favorite bestselling television series.

Similarly, JavaScript does the same thing to the content.

This is just the beginning, it gets more deeper and denser by allowing you to have complete control of your page content with Server Side Scripting.

In this post we have just begun with some simple functional interactivity.

We have some simple functions in JavaScript like:
1.     alert();
2.     document.write();

The alert() function in JavaScript alerts the user by displaying a message with a small window.You also get a small button to input your reaction.Hence the interactivity.

The document.write() function in JavaScript prints the content on the webpage.The document.write can also take multiple line content using the "\n".

The program below showcases the functionality delivered by the alert() and document.write() functions in a simple JavaScript program.


The declaration of variables in the JavaScript is much simpler than compared to other languages. We shall look at the variable -creation and assignment along with the prompt() function in the next post.

1:  <?xml version = "1.0" encoding="utf-8"?>
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3:  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
4:  <html xmlns="http://www.w3.org/1999/xhtml">  
5:  <head>  
6:  <title>Simple Javascript</title>  
7:  </head>  
8:  <body>  
9:  <script>  
10:  alert("This website belongs to me");  
11:  alert("Hello I am Javascript, Let us begin a dynamic journey");  
12:  document.write("I can write on the webpage");</script>  
13:  </body>  
14:  </html>  


The JavaScript uses the DOM model to provide such flexibility for the designer pick up specific tags i.e. components on the web page and design them dynamically. In the above simple JavaScript program the DOM is not completely shown as the script tag is used and the JavaScript is written as a part of the HTML document itself.The JavaScript document can be written separately as well and referenced by the link tag as the src attribute in the head section of the HTML document.

The code if written separately using the JavaScript and the HTML document would be as below.

The HTML code firstly would be as follows:
Here the link tag with the src attribute in HTML is demonstrated.
1:  <?xml version = "1.0" encoding="utf-8"?>
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3:  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
4:  <html xmlns="http://www.w3.org/1999/xhtml">  
5:  <head>  
6:  <title>Simple Javascript</title>  
7:  </head>  
8:  <body>  
9:  </body>  
10:  </html>  

The above file is to be saved separately as a .html extension file.

The next file is to be written containing the JavaScript function exclusively.One can also notice that this file does not have the script tag, The name of the file is the most important thing in this method along with the saved extension type which is .js type file extension.


In the above link tag one may also notice that this tag does not have a closing tag such as </link>. Everything is enclosed in a single tag from <link ....>.



Tuesday, 26 November 2013

CSS Font Variant

Next we have font variant.

The font variant does two things mainly like.
  1. It changes the smaller case letters to upper case.
  2. It adjusts the upper case letter in the previous case to adjust the size of all the letters.

Here is a showcase of font variant property in CSS.
1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:  <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p class="red">  
9:  Red  
10:  </p>  
11:  <p class="blue">  
12:  Blue  
13:  </p>  
14:  <p class="green">  
15:  Green  
16:  </p>  
17:  <style>  
18:  p.red  
19:  {  
20:  color:red;  
21:  font-size:20px;  
22:  font-weight:normal;  
23:  font-family:cursive;  
24:  font-variant:normal;  
25:  }  
26:  p.blue  
27:  {  
28:  color:blue;  
29:  font-size:40px;  
30:  font-style:italic;  
31:  font-family:Lucida Console;  
32:  font-variant:small-caps;  
33:  }  
34:  p.green  
35:  {  
36:  color:green;  
37:  font-size:60px;  
38:  font-weight:bolder;  
39:  font-family:Arial;  
40:  font-variant:small-caps;  
41:  }  
42:  </body>  
43:  </html>  

CSS Font Family

We observe many different font types in word editors, email texts, web pages etc.

We can achieve the different font types using the font-family attribute in CSS.

Font-Family
The font-family names can be classified into two types:
  1. Generic family
  2. Font family
1. Generic family
     The generic family is the default fonts installed in the machine.

Why use generic?
They can be used as backup, if the font used by one is not installed in a particular machine.

2. Font Family
     These font family is all the rest of the fonts which can be used to design the font types in a webpage.


Here is a sample program showcasing the font-family attribute.

1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:  <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p class="red">  
9:  Red  
10:  </p>  
11:  <p class="blue">  
12:  Blue  
13:  </p>  
14:  <p class="green">  
15:  Green  
16:  </p>  
17:  <style>  
18:  p.red  
19:  {  
20:  color:red;  
21:  font-size:20px;  
22:  font-weight:normal;  
23:  font-family:cursive;  
24:  }  
25:  p.blue  
26:  {  
27:  color:blue;  
28:  font-size:40px;  
29:  font-style:italic;  
30:  font-family:Lucida Console;  
31:  }  
32:  p.green  
33:  {  
34:  color:green;  
35:  font-size:60px;  
36:  font-weight:bolder;  
37:  font-family:Arial  
38:  }  
39:  </body>  
40:  </html>  

CSS Font Weight

In the earlier post, we looked at the font-style attribute.
It gives some styles like italic,normal,oblique. But what about the bold.

The bold style is defined under the font-weight attribute.

The font weight attribute can be defined in many different ways, let us have a look at some basic ways like normal,bold,bolder,lighter.


1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:  <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p class="red">  
9:  Red  
10:  </p>  
11:  <p class="blue">  
12:  Blue  
13:  </p>  
14:  <p class="green">  
15:  Green  
16:  </p>  
17:  <style>  
18:  p.red  
19:  {  
20:  color:red;  
21:  font-size:20px;  
22:  font-weight:normal;  
23:  }  
24:  p.blue  
25:  {  
26:  color:blue;  
27:  font-size:40px;  
28:  font-weight:bold;  
29:  }  
30:  p.green  
31:  {  
32:  color:green;  
33:  font-size:60px;  
34:  font-weight:bolder;  
35:  }  
36:  </body>  
37:  </html>  

CSS Font Styles

Next let us have a look at font styles.

All of us know everybody has different styles of writing, some writing slanting whereas some straight aligned.

Similarly in CSS and XHTML one can write in normal, italic, oblique styles of writing.

Here is a sample showcasing the font-style attribute in CSS.

1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:  <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p class="red">  
9:  Red  
10:  </p>  
11:  <p class="blue">  
12:  Blue  
13:  </p>  
14:  <p class="green">  
15:  Green  
16:  </p>  
17:  <style>  
18:  p.red  
19:  {  
20:  color:red;  
21:  font-size:20px;  
22:  font-style:normal;  
23:  }  
24:  p.blue  
25:  {  
26:  color:blue;  
27:  font-size:40px;  
28:  font-style:italic;  
29:  }  
30:  p.green  
31:  {  
32:  color:green;  
33:  font-size:60px;  
34:  font-style:oblique;  
35:  }  
36:  </body>  
37:  </html>  
For more in depth knowledge check the reference section beside.

CSS Colors and Font Sizes

Let us take small steps and then create complex pages.

The font sizes can be altered using the font-size attribute. The font-size attribute can be defined in various forms. The simplest is using pixels in short px.

Here is an example showcasing the font-size using px.


1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:  <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p class="red">  
9:  Red  
10:  </p>  
11:  <p class="blue">  
12:  Blue  
13:  </p>  
14:  <p class="green">  
15:  Green  
16:  </p>  
17:  <style>  
18:  p.red  
19:  {  
20:  color:red;  
21:  font-size:20px;  
22:  }  
23:  p.blue  
24:  {  
25:  color:blue;  
26:  font-size:40px;  
27:  }  
28:  p.green  
29:  {  
30:  color:green;  
31:  font-size:60px;  
32:  }  
33:  </body>  
34:  </html>  

CSS Simple Program -Color with class

The program earlier had only one color even though there was all three defined.
It can be fixed using the class concept.

If you would like to color different set of similar tags with different properties.
If classes are not used all the properties of the latest declaration of properties are assigned to all the tags.

Here is an example showcasing the class and CSS .


1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:  <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p class="red">  
9:  Red  
10:  </p>  
11:  <p class="blue">  
12:  Blue  
13:  </p>  
14:  <p class="green">  
15:  Green  
16:  </p>  
17:  <style>  
18:  p.red  
19:  {  
20:  color:red;  
21:  }  
22:  p.blue  
23:  {  
24:  color:blue;  
25:  }  
26:  p.green  
27:  {  
28:  color:green;  
29:  }  
30:  </body>  
31:  </html>  

Saturday, 16 November 2013

CSS Simple program-Color

Designing the webpage for different styles of colors is done using CSS(Cascading Style Sheet)

It is just like push of button the things are automated by a process.

In the program below we observe that the color are not properly colored why does that happen and how can it be fixed will be looked up in the next post

1:  <?xml version = "1.0" encoding="utf-8"?>   
2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
3:  <html xmlns = "http://www.w3.org/1999/xhtml">   
4:   <head>  
5:  <title>CSS Styling</title>  
6:  </head>  
7:  <body>  
8:  <p>  
9:  Red  
10:  </p>  
11:  <p>  
12:  Blue  
13:  </p>  
14:  <p>  
15:  Green  
16:  </p>  
17:  <style>  
18:  p  
19:  {  
20:  color:red;  
21:  }  
22:  p  
23:  {  
24:  color:blue;  
25:  }  
26:  p  
27:  {  
28:  color:green;  
29:  }  
30:  </body>  
31:  </html>