Sunday 22 June 2014

PHP Operators

   

PHP Arithmetic Operators:-

Operator
Name
Example
Result
+
Addition
$x + $y
Sum of $x and $y
-
Subtraction
$x - $y
Difference of $x and $y
*
Multiplication
$x * $y
Product of $x and $y
/
Division
$x / $y
Quotient of $x and $y
%
Modulus
$x % $y
Remainder of $x divided by $y

PHP String Operators:-

Operator
Name
Example
Result
.
Concatenation
$txt1 = "Hello"
$txt2 = $txt1 . " world!"
Now $txt2 contains "Hello world!"

PHP Increment / Decrement Operators:-

Operator
Name
Description
++$x
Pre-increment
Increments $x by one, then returns $x
$x++
Post-increment
Returns $x, then increments $x by one
--$x
Pre-decrement
Decrements $x by one, then returns $x
$x--
Post-decrement
Returns $x, then decrements $x by one

PHP Logical Operators:-

Operator
Name
Example
Result
&&
And
$x && $y
True if both $x and $y are true
||
Or
$x || $y
True if either $x or $y is true
!
Not
!$x
True if $x is not true


PHP Variables

   
—  As with algebra, PHP variables can be used to hold values (x=5) or expressions (z=x+y).
—  A variable can have a short name (like x and y) or a more descriptive name (age,  car_name,  total, volume).
—  Rules for PHP variables:
—  A variable starts with the $ sign, followed by the name of the variable
—  A variable name must start with a letter or the underscore character
—  A variable name cannot start with a number
—  A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )
—  Variable names are case sensitive ($y and $Y are two different variables)


Example:-

          $name="john";

In the above example, $name is a Variable.

PHP echo

   
—  echo is a language construct, and can be used with or without parentheses: echo or echo().
—  There are some differences between echo and print:
                                echo - can output one or more strings
                                print - can only output one string, and returns always 1
Note: echo is marginally faster compared to print as echo does not return any value.


Example:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<?php
    echo "Hello World!";
?>
</body>
</html>

Introduction to PHP

   

PHP (Hypertext Preprocessor):

—  PHP is a server scripting language, and is a powerful tool for making dynamic and interactive Web pages quickly.
—  PHP code are executed on the server, and the result is returned to the browser as plain HTML
—  PHP files have extension ".php"

PHP Syntax:

—  A PHP script can be placed anywhere in the document.
—  A PHP script starts with <?php and ends with ?>:
                <?php
                // PHP code goes here
?>
—  The default file extension for PHP files is ".php".
—  A PHP file normally contains HTML tags, and some PHP scripting code.


JavaScript Popup Boxes

   
JavaScript has three kind of popup boxes:
—  Alert box
—  Confirm box
—  Prompt box.


Alert Box:

—  An alert box is often used if you want to make sure information comes through to the user.
—  When an alert box pops up, the user will have to click "OK" to proceed.
Syntax:-
                                window.alert("sometext");
Example:-

<html>
<body>
<p id="demo"></p>
<script>
alert("*****WARNING******");
</script>
</body>
</html>

Confirm Box:

—  A confirm box is often used if you want the user to verify or accept something.
—  When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
—  If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax:-
                                window.confirm("sometext");

 Example:-

<html>
<body>
<p id="demo"></p>
<script>
confirm("Are You Sure To Delete This Item?? ");
</script>
</body>
</html>

Prompt Box:

—  A prompt box is often used if you want the user to input a value before entering a page.
—  When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
—  If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax:-
                                window.prompt("sometext","defaultText");

Example:-

<html>
<body>
<script>
var x=parseInt(prompt("Enter First Number:"));
var y=parseInt(prompt("Enter Second Number:"));
var z= x+y;
document.write("Your Result: "+ z);
</script>
</body>
</html>

Javascript getElementById Method

   
—  The most common way to access an HTML element is to use the id of the element.
—  The “innerHTML” property is useful for getting or replacing the content of HTML elements.

Example:-

<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
document.getElementById("demo").style.backgroundColor = "red";
</script>
</body>
</html>

DOM (Document Object Model)

   

DOM(Document Object Model)


—  When a web page is loaded, the browser creates a Document Object Model of the page.


—  The HTML DOM is a standard object model and programming interface for HTML.
 It defines:
—  The HTML elements as objects.
—  The properties of all HTML elements.
—  The methods to access all HTML elements.
—  The events for all HTML elements.
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.



Introduction to Javascript

   
—  JavaScript is the most popular programming language in the world.
—  It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
JavaScript is:
—  JavaScript is a lightweight, interpreted programming language
—  Designed for creating network-centric applications
—  Complementary to and integrated with Java
—  Complementary to and integrated with HTML

—  Open and cross-platform

Advantages of JavaScript:

—  The merits of using JavaScript are:
—  Less server interaction: You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
—  Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something.
—  Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
—  Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

 Syntax of JavaScript:-

—  A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a web page.
—  You can place the <script> tag containing your JavaScript anywhere within you web page but it is preferred way to keep it within the <head> tags.
—  The <script> tag alert the browser program to begin interpreting all the text between these tags as a script. So simple syntax of your JavaScript will be as follows
SYNTAX:-
                                                <script ...> JavaScript code </script>

Attributes used in Javascript:-

The script tag takes two important attributes:
—  language: This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.
—  type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to “ text/javaScript ".
— 
                                <script language="javascript" type="text/javascript">
                                                                 JavaScript code
                                </script>


 Example:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JAVASCRIPT</title>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>
</body>
</html>

Tuesday 10 June 2014

Audio Tag, Video Tag, Label Tag, Span Tag

   

Audio tag:-

—  HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
—  Before HTML5, there was no standard for playing audio files on a web page.
BROWSER SUPPORT:-
—  Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> element.
—  Internet Explorer 8 and earlier versions, do not support the <audio> element.
Tag
Description
<audio>
Defines sound content
<source>
Defines multiple media resources for media elements, such as <video> and <audio>







Attributes of Audio Tag:

Attribute
Value
Description
Autoplay   
autoplay
Specifies that the audio will start playing as soon as it is ready
controls
controls
Specifies that audio controls should be displayed (such as a play/pause button etc)
loop
loop
Specifies that the audio will start over again, every time it is finished
muted
muted
Specifies that the audio output should be muted
preload
auto
metadata
none
Specifies if and how the author thinks the audio should be loaded when the page loads
src
URL
Specifies the URL of the audio file

Video Tag:

—  The <video> tag specifies video, such as a movie clip or other video streams.
—  Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg
Attribute
Value
Description
       autoplay
         autoplay            
         Specifies that the video will start playing as soon as it is ready
       Controls
      controls
         Specifies that video controls should be displayed (such as a play/pause button etc).
        Height
         pixels   
        Sets the height of the video player
          Loop
         loop
       Specifies that the video will start over again, every time it is finished
          Muted
        muted
        Specifies that the audio output of the video should be muted
        Poster
         URL
        Specifies an image to be shown while the video is downloading, or until the user hits the play button
       Preload
        auto
metadata
none
       Specifies if and how the author thinks the video should be loaded when the page loads
         Src
           URL
         Specifies the URL of the video file
          width
              pixels
             Sets the width of the video player

Label tag:

—  The <label> tag defines a label for an <input> element.
—  The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
—  The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
Attributes:

Attribute
Value
Description
for
element_id
Specifies which form element a label is bound to
Form
form_id
Specifies one or more forms the label belongs to

Span Tag:

—  The HTML <span> tag is used for grouping and applying styles to inline elements.
—  There is a difference between the span tag and the div tag. The span tag is used with inline elements whilst the div tag is used with block-level content.

Difference between label & span:

—  label is used for labeling form controls in html. It also has for attribute where you can set id of the control which this label related to. span used in case when you need to display some literal data.
—  A label is used when you have a form or input elements - the label is associated with an input element. Span is a general container for any inline content.


HTML DIV Tag

   
The HTML <div> tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS. The difference between the div tag and the span tag is that the div tag is used with block-level elements whilst the span tag is used with inline elements.

<div style="background-color:orange;text-align:center">
  <p>Navigation section</p>
</div>
<div style="border:1px solid black;text-align:right ">
  <p>Content section</p>
</div>

Attribute:-
Attributes
Value
Description
align
left
right
center
justify
Specifies the alignment of the content inside a <div> element