CODE TO LIVE

Tuesday, 24 April 2012

js tags

The Script Tag and HTML

At the moment, we have our script between the two BODY tags. And it works perfectly well here. It's quite happy where it is. However, SCRIPTS are best kept in the HEAD section of your HTML. This is because any code in the HEAD section will be dealt with first by the browser. And besides, it's neater up there. You're not cluttering up your HTML code with lots of JavaScript.

So, cut your script out of the BODY section, and paste it into the HEAD section. Like this:

<HTML>
<HEAD>
<TITLE>A First Script</TITLE>

<SCRIPT LANGUAGE = JavaScript>

document.write("Hello World")

</SCRIPT>

</HEAD>

<BODY>

</BODY>
</HTML>

Save your work, and then view the results in your browser. Did it make a difference? No, it did not. But rest assured that your script was dealt with before anything in the BODY section.

You can also put your scripts into HTML tags. Here's the document.write() code inserted into a Form's Button code:

<BODY>
<INPUT TYPE = Button VALUE = "Click Me" OnClick = "document.write('Hello World')">
</BODY>

Looks a bit messy, but then scripting languages can get like that. Notice, however, that we've shifted the document code to our button:

OnClick = "document.write('Hello World')"
OnClick is an event that can be applied to buttons (amongst other things.) We'll get to Events later, but for now, note that the same code we wrote earlier then goes after an equals sign ( = ). Or is it the same code? Have you spotted the difference?

Yes, Hello World is now in single quotes! That's because we used up our double quotes surrounding the document.write() part. And JavaScript doesn't like you using two sets of double quotes in the same bit of code. There's a lot of things that JavaScript doesn't like. Get used to it.

So what have we learnt so far? We've learnt this:

    Scripting code is written between a pair of <SCRIPT> </SCRIPT> tags
    You can refer to the two BODY tags by using the word "document"
    You can use the write( ) method of document to insert stuff onto your web pages
    JavaScript is very picky about the way you spell things

The Pop-up message box

We've seen one way to display text - with the write() method of document. Another way to display text (and numbers) is with a little pop-up box. These are called Alert boxes in JavaScript, and they are ideal for nagging your users when they don't fill in your forms correctly. Here's a picture of one:

Internet Explorer Alert Box

The code for an Alert box is quite simple. It's this:

alert("That was not a proper email address")

Notice the cunning use of "alert" for an alert box? The message you want to get over to your users goes between the two brackets. Surround your text message with double quotes, or single quotes if you're putting it after an equals sign in a HTML element.

OnClick = "alert('That was not a proper email address')"

Javascript Introduction

Beginner's JavaScript Tutorials

Introduction and a First Script

Our quick javascript links
Background Colour
An Easy Rollover
Browser Check
if Statements
for loops
Javascript and Forms
Little Programmes
Colour Picker
Lottery
A simple calculator

Introduction

This course deals with Scripts. A Script is a segment of code that manipulates the browser and its contents in ways that is not possible with ordinary HTML or Cascading Style Sheets. By using a script in your web pages, you can gain more control of how the page looks and behaves: dates and times can be added to the page, form elements validated before the contents are sent, browser details checked, cookies set, even simple games can be added to a web page - all with a scripting language.

The learning curve for scripting is a lot a steeper than HTML and Style Sheets. But you can learn the basics, and use scripts on your own pages, without it causing you too much trouble. The scripting language covered in these pages is meant to get you started on the subject, and is not intended as an in-depth study.

We're going to study the JavaScript programming language, because it is a widely-used scripting language for web pages. All the scripts in these pages have been tested with modern versions of a wide variety of browsers. If you're ready, then, let's make a start.

A First Script

Let's jump right in with a bit of code. Fire up whatever HTML Editor you use (you can use our free Editor by clicking here: Download the free editor ). With your editor open, copy the following code. When you're done copying it, save your work and load it into your browser.

<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</HEAD>
<BODY>

<SCRIPT LANGUAGE = JavaScript>

document.write("Hello World")

</SCRIPT>

</BODY>
</HTML>

All right, how did you get on? All that typing should have gotten you this in the browser:

"Hello World"

Granted, that's a heck of a lot of trouble to go to just to write "Hello World". But it's a start. Let's explain what's going on.

When you're writing your scripts, you enclose them between two <SCRIPT> tags, an opening one and a closing one. The opening one should tell the browser what language the script is written in:

<SCRIPT LANGUAGE = JavaScript>

The closing Script tag is just the word SCRIPT in between two angle brackets with a forward slash:

</SCRIPT>

Most of your JavaScript will go between these two tags. So what's all that "document dot write" bit?

document.write("Hello World")

Document is part of something called the Document Object Model. Document refers to all the text and HTML elements between the two BODY tags. And that includes any attributes inside the BODY tag itself. Like BGCOLOR.

Write( ) is a method of Document. A method is a bit of code that actually does something. As opposed to a Property, which IS something. Methods are usually Verbs, and Properties usually Nouns. The Write( ) method writes text (and numbers as well) between the two BODY tags on your page.

For all you English language experts out there who might be protesting about the lack of capital letters, Document is spelt with a lowercase "d", and Write with a lowercase "w". Try changing your code to this and see what happens:

Document.Write("Hello World")

JavaScript is damned picky about capital letters - it doesn't like them at all!

The part or parts between the two brackets of write( ) are what will be written to your page. Direct text goes between two double quotes; Variables don't need any. Whoops, we haven't done variables yet. We'll get to them.

So the whole line reads "Write the text Hello World between the two BODY tags of the web page."

Monday, 23 April 2012

SVG Polyline

SVG Polyline - <polyline>

Example 1

The <polyline> element is used to create any shape that consists of only straight lines:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 2

Another example with only straight lines:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4"/>
</svg>

SVG polygon

SVG Polygon - <polygon>
Example 1

The <polygon> element is used to create a graphic that contains at least three sides.

Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).

Remark Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

The points attribute defines the x and y coordinates for each corner of the polygon

Example 2

The following example creates a polygon with four sides:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 3

Use the <polygon> element to create a star:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 4

Change the fill-rule property to "evenodd":

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
NEXT

SVG shapes

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

Example 4

Last example, create a rectangle with rounded corners:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The rx and the ry attributes rounds the corners of the rectangle
SVG Ellipse - <ellipse>
Example 1

The <ellipse> element is used to create an ellipse.

An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The cx attribute defines the x coordinate of the center of the ellipse
    The cy attribute defines the y coordinate of the center of the ellipse
    The rx attribute defines the horizontal radius
    The ry attribute defines the vertical radius

Example 2

The following example creates three ellipses on top of each other:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 3

The following example combines two ellipses (one yellow and one white):

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>
NEXT

Scalable vector Graphics

SVG Shapes

SVG has some predefined shape elements that can be used by developers:

    Rectangle <rect>
    Circle <circle>
    Ellipse <ellipse>
    Line <line>
    Polyline <polyline>
    Polygon <polygon>
    Path <path>

The following chapters will explain each element, starting with the rect element.
SVG Rectangle - <rect>
Example 1

The <rect> element is used to create a rectangle and variations of a rectangle shape:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

.

Code explanation:

    The width and height attributes of the rect element define the height and the width of the rectangle
    The style attribute is used to define CSS properties
    The CSS fill property defines the fill color of the rectangle
    The CSS stroke-width property defines the width of the border of the rectangle
    The CSS stroke property defines the color of the border of the rectangle

Example 2

Let's look at another example that contains some new attributes:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>

Code explanation:

    The x attribute defines the left position of the rectangle (e.g. x="50" places the rectangle 50 px from the left margin)
    The y attribute defines the top position of the rectangle (e.g. y="20" places the rectangle 20 px from the top margin)
    The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
    The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)

Example 3

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
NEXT

Sunday, 22 April 2012

php datatypes

PHP consists of 4 basic data types:
boolean - a boolean is actually much like an integer, but with only two possible values: 0 or 1, which is either false or true.

integer - a number with no decimals, e.g 3 or 42.

float (sometimes referred to as double) - a number that may include decimals, e.g. 42.3 or 10.9.

string - A number of characters, which combined makes a text string.

Besides that, there are a couple of more complex datatypes:

array - holds an array of items, e.g. several strings or several integers. An array may contain variables which are arrays which are arrays and so on.

object - a reference to an instance of a class. This is related to Object Oriented programming, which we will talk more about later on in this tutorial.

There are also a couple of special types:

resource - holds a reference to a special external resource. It may be a file resource, or perhaps an open database connection.
NULL - a value of null is nothing. It's not the same as 0 (zero), because that's actually a value. Null is truly nothing. Variables which have not yet been assigned a value, or which you have used the unset() method on, will carry the NULL value. This is useful if you wish to check whether or not a variable contains any value - you may compare it against the NULL constant.

In the next couple of chapters, we will look into working with both strings and numbers (integers and floats), and later on, we will look into both arrays and objects.

In this chapter, we will work with some numbers. As mentioned in a previous chapter, PHP have two different data types related to numbers: Integers and floats. Integers are whole numbers, without a decimal separator, while floats always carry a fractional part as well. In most cases, integers will be sufficient, and they are faster and simpler to work with.

Let's try some simple calculations, to show you how easy it is to do math with PHP. Here are a couple of examples.

<?php
$number1 = 6;
$number2 = 2;

echo "Addition: " . ($number1 + $number2);
echo "<br /><br />";
echo "Substraction: " . ($number1 - $number2);
echo "<br /><br />";
echo "Multiplication: " . ($number1 * $number2);
echo "<br /><br />";
echo "Division: " . ($number1 / $number2);
echo "<br /><br />";
?>

Now that's simple! Basic math with PHP, and it looks kinda like using a simple calculator. But what about numbers which comes from the outside world, e.g. from a submitted form? We will dig into in a later chapter, and one of the techniques we will be using, is checking if a variable holds a value that we can use for math. The is_numberic() function will help us with this. It checks whether a variable is an integer, or if it can be converted to one. For instance, "42" can be converted to 42, but "Hello World", well, that's a tough one. is_numberic will return true in the first case and false in the second case. Here is an example:

<?php
$number1 = "10";
$number2 = 20;

if((is_numeric($number1)) && (is_numeric($number2)))
echo "Result: " . ($number1 + $number2);
else
echo "Both variables have to be numbers!";
?>

Now, try changing "10" to a word or a sentence, e.g. "Hello world". You will see that the condition fails, and our warning will be printed. This comes in handy when validating user input, as we will see later on.

In some situations, you may need a real integer instead of a string that is numeric, like in the above example. Even though PHP is loosely typed, type casting does exist - you may cast one type to another. Have a look at this example:

<?php
$var = "30";
echo "The current datatype of var is: " . gettype($var) . "<br /><br />";
$var = (int)$var;
echo "The current datatype of var is: " . gettype($var);
?>

We use the int keyword, inside a set of parentheses, to define a new type for the variable. Obviously, it works the other way around as well - you may cast an integer to become a string and so on.
Floats
As mentioned, there are two different data types for working with numbers: Integers and floats. In the next example, I will try to show you the difference. Try running this piece of sample code:

<?php
$number1 = 10;
$number2 = 3;
$number3 = 5;

$result = $number1 / $number2;

echo "Result as a float: " . $result . "<br /><br />";
echo "Result as a float, rounded: " . round($result, 2) . "<br /><br />";
echo "Result as an integer: " . (int)$result . "<br /><br />";
echo "Multiplication as a float: " . ($result * $number3) . "<br /><br />";
echo "Multiplication as an integer: " . ((int)$result * $number3) . "<br /><br />";
?>

php functions

A function in PHP, and any other programming language, allows you to encapsulate a piece of code and call it from other parts of your code. This makes it possible to write code which can be re-used from different parts of your application, without actually writing the code over and over again. Here is an example of a simple PHP function:

<?php
function SayHello($to)
{
    echo "Hello, ".$to;
}
?>

A function should always start with the keyword function, followed by the name of the function you wish to declare. In this case, we name our function SayHello. It should be followed by a set of parentheses, which allows you to define parameters for the function. Parameters are not required, but if you don't have any, you should still write the parentheses, like SayHello(). With our function, we define the $to parameter. Since PHP is a typeless language, you don't have to define a type for the parameter, and you may send any kind of datatype through the function. The content of our function is between a set of curly braces, in this case a simple echo statement, where we use the $to parameter to send a greeting to a specific person or thing.

You use the function simply by writing the name and the required set of parameters, like this:

<?php
function SayHello($to)
{
    echo "Hello, ".$to;
}

SayHello("World");
?>

Functions may return values as well. In the first example we don't, since it's not required, but it is possible and very useful as well. If you have used other programming languages, you might be used to declaring whether or not a function should return anything, and if so, which type it will be. However, this is not needed with PHP. Let's change our function so it returns the required string instead of outputting it:

<?php
function SayHello($to)
{
    return "Hello, ".$to;
}

echo SayHello("World");
?>

As you can see, we simply have the function return the string instead of outputting it, and then we do the actual output once we call the function. This is normally how it's done, since outputting stuff directly from the string requires it to be positioned where we want the output, instead of in the top of our document or an include file.

A very important aspect of functions is the scope. Once you enter a function, you enter a new scope, and while functions and classes are automatically global, variables are not. This means that a variable declared outside a function is not automatically available inside it. Try this example to see it for your self:

<?php
$var = "test";

function SayHello()
{
    return "Current value of var: ".$var;
}

echo SayHello();
echo "<br /><br />";
echo "Current value of var: ".$var;
?>

The result will be that the first output won't have a value for $var, because it's simply not known within the function. You could declare it inside the function, and assign a value to it, but it would not be reflected outside the function. However, it is possible to get access to the outside variables within a function - you simply need to declare them as globals inside the scope of the function, like this:

<?php
$var = "test";
function SayHello()
{
    global $var;
    return "Current value of var: ".$var;
}
?>

When declaring a function, you may define one or several parameters to be optional. It's done by giving them a default value in the declaration. More than one parameter can be optional, but only the last X number of parameters can be optional - you can't have an optional parameter followed by a required parameter. In the next example, we define a couple of optional parameters to show you how it's done.

<?php
function GreetCoder($name, $msg = "Hello, coder!")
{
    echo "A message to " . $name . ": " . $msg;
}

GreetCoder("John Doe");
echo "<br /><br />";
GreetCoder("John Doe", "This is a custom message!");
?>

As you can see, we can call the function with only one parameter or with both parameters. The output is affected by what we do, but no matter what, $msg will have a value. It can come in handy in a lot of situations, which you will experience your self once you write more PHP.
Next

php abstract class

Abstract classes are special because they can never be instantiated. Instead, you typically inherit a set of base functionality from them in a new class. For that reason, they are commonly used as the base classes in a larger class hierarchy. In the chapter on inheritance, we created an Animal class and then a Dog class to inherit from the Animal class. In your project, you may very well decide that no one should be able to instantiate the Animal class, because it's too unspecific, but instead use a specific class inheriting from it. The Animal class will then serve as a base class for our own little collection of animals.

A method can be marked as abstract as well. As soon as you mark a class function as abstract, you have to define the class as abstract as well - only abstract classes can hold abstract functions. Another consequence is that you don't have to (and can't) write any code for the function - it's a declaration only. You would do this to force anyone inheriting from your abstract class to implement this function and write the proper code for it. If you don't, PHP will throw an error. However, abstract classes can also contain non-abstract methods, which allows you to implement basic functionality in the abstract class. Let's go on with an example. Here is the abstract class:

abstract class Animal
{
    public $name;
    public $age;

    public function Describe()
    {
        return $this->name . ", " . $this->age . " years old";
    }

    abstract public function Greet();
}
As you can see, it looks like a regular exception, but with a couple of differences. The first one is the abstract keyword, which is used to mark both the class it self and the last function as abstract. As mentioned, an abstract function can't contain any body (code), so it's simply ended with a semi-colon as you can see. Now let's create a class that can inherit our Animal class:

class Dog extends Animal
{
    public function Greet()
    {
        return "Woof!";
    }

    public function Describe()
    {
        return parent::Describe() . ", and I'm a dog!";
    }
}

As you can see, we implement the both functions from the Animal class. The Greet() function we are forced to implement, since it's marked as abstract - it simply returns a word/sound common to the type of animal we are creating. We are not forced to implement the Describe() function - it's already implemented on the Animal class, but we would like to extend the functionality of it a bit. Now, the cool part is that we can re-use the code implemented in the Animal class, and then add to it as we please. In this case, we use the parent keyword to reference the Animal class, and then we call Describe() function on it. We then add some extra text to the result, to clarify which type of animal we're dealing with. Now, let's try using this new class:

$animal = new Dog();
$animal->name = "Bob";
$animal->age = 7;
echo $animal->Describe();
echo $animal->Greet();
Next

connecting to mysql using php

Connecting to a MySQL database with PHP is very easy. It can be done using a single function from the nice array of MySQL related functions in PHP:

mysql_connect("localhost", "username", "password");

If default values have been configured in your configuration file, you can leave out these parameters, but otherwise you will need to specify a host and typically a username and a password for it. Both the username and password has been set by yourself or by your hosting company. If you host MySQL on your own machine, or if you run your PHP code on your hosting company's server, you can usually just specify localhost as the host value. If in doubt, ask your hosting company or check their support pages.

The mysql_connect() function returns a resource, a direct link to the database server, which should be used to access the database server each time you use one of the MySQL functions. However, if this resource is not specified, PHP will just use the last opened connection, allowing you to write less code. In most cases you will only need one MySQL connection per page, so this should work just fine for you.

To work with a database, you need to call one more function, the mysql_select_db() function. The name really tells it all - for a specific connection, it selects a database that you will be working with. It's very simple to use:

mysql_select_db("my_database");

This should be called after you have established the connection using mysql_connect(). It takes one or two parameters. The first should be the name of the database you wish to use. The second one is optional and allows you to specify which MySQL resource link the function should be performed on. Here is an example where we use these two essential functions together:

mysql_connect("localhost", "username", "password");
mysql_select_db("my_database");

And here is the same example, but where we get the resource link from mysql_connect() and use it. This is the way you should do it mainly if you need to connect to more than one database server on the same page:

$dbConnection = mysql_connect("localhost", "username", "password");
mysql_select_db("my_database", $dbConnection);

With this, we now have a connection to the database server and we have selected the desired database. In the next chapter, we will use this connection, but before we do so, we should talk a bit about closing the connection again. A connection to a database server is costly, so it should obviously be closed once we're done using it. However, PHP can and will do this for us automatically, if we choose not to do it, once the page is fully executed. If we for some reason want to close a MySQL connection before the page is done executing, we can do it by using the mysql_close() function:

mysql_close();

This will close the last opened connection. If we want to close a specific connection, just pass its link to the function:

mysql_close($dbConnection);

Subscribe to: Posts (Atom)

rTechIndia

RtechIndia->technology ahead

rtech

rtechindia

RtechIndia

Go rtechindia

RtechIndia

Tuesday, 24 April 2012

js tags

Javascript Introduction

Beginner's JavaScript Tutorials

The <rect> element is used to create a rectangle and variations of a rectangle shape:

mysql_connect("localhost", "username", "password");
mysql_select_db("my_database");

$dbConnection = mysql_connect("localhost", "username", "password");
mysql_select_db("my_database", $dbConnection);

Networks

Pages

Test

Tuesday, 24 April 2012

Monday, 23 April 2012

Sunday, 22 April 2012

RSS

Categories

Followers

Blog Archive

Tuesday, 24 April 2012

Monday, 23 April 2012

Sunday, 22 April 2012

Social Profiles

Popular Posts

Facebook

FACEBOOK FANS:

Archives

content search

Gadget News

Latest Tech News

Reviews

Blog Archive

About

NEWS

Labels