JavaScript - Data Types

It is not necessary to define the data type when initializing the variables in Javascript. It automatically gets the data type of the variable according to the value stored in the variable. That is calling Dynamic Type Variables. Therefore Same  variable can be used to store following kind of data in JavaScript
1. String
    A set of characters can be stored by putting between the Double Quotes or Single Quote
    Syntax:
    var <variable name> = '<Value>' OR
    var <variable name> = "<Value>"

    Ex:
    var student = "John"; // OR
    var student = 'John';   

    var Relationship= "John's car"; // Can put single Quotes within Double Quotes 
    var car = 'John has "Toyota" car'; // Can put Double Quotes within Single Quotes

2. Number
    Numbers in the can be written with or without decimal places.
    var no1 = 50;
    var no1 = 53.25;

Javascript - Comments


We are using comments to make Javascript more readable and comments are not executed by JavaScript. That can be used to explain the coding. In JavaScript, there are two types of comments can be used,
01. Single Line Comments
      Single Line Comments begins with 02 forward slashes and there is no ending, its 
      applicable to the whole line which it puts.
      Syntax:
      // <Comment>

      Ex:
      // This is a single line Comment
      var no = 0; // This is Number type variable

02. Multi Line Comments
      Multi Line Comments begins with a /* and ends with */. 
      Syntax:
      /* <Comment> */

      Ex:
      /* This is a Multi line Comment
          Purpose of this comment is explain 
          the code with more than one line */

Javascript - Variables

Javascript variables uses to contain information. 

Syntax: 
var <name> = <value>

Ex: 
var No1 = 5;
var No2 = 10;
var total = No1 + No2;

Javascript Variable names;
1. must begins with a letter
2. can begins with $ or _
3. are case sensitive

How to define a Javascript Variable

1. Method 01
    var carName = "Toyota"

2. Method 02
    var carName;
    carName = "Toyota";


Web Programing for Beginners

Is this blog helpful for you? Can you recommend for someone?

I much appreciate your kind suggestions and comment to improve the contents & writing method of this blog. Because you are the actual reader of this site and strive to sharpen your web programming knowledge.

You may knowing further more about the discussed topics or have articles, links related to the topics please put it in your comment. Those comments more helpful others as well as me.

--
Best regards,
Priyal

PHP - Print the Processed data


It is the way to see the processed php data by sending it to the browser as an out put. You can display the contents within the browser to see the users. There are several ways allows in php to send out put to the browser. I'm discussed here most important & common methods here.
  • echo() statement
    This is the most common out put generation method in php. echo() statement accept multiple arguments.
    syntax:
    echo (string arg1[, string arg2, ...]);

PHP - Arrays

There are two types of array namely,
  • Single Dimensional Array
  • Multi Dimensional Array 
Arrays can store multiple information in a single variable. If you are using variables to store 4 values then you need to the followings.
  $bookName = "Sample Book";
  $bookAuthor = "Author\'s Name";
  $bookPublished = "April 02, 2013"; 
  $bookPublisher = "Sample Book Publisher";
But you can store above all values to a single array. 
  • Single Dimensional Arrays
    Ex:
    $book = array(
         "Sample Book",
         "Author's Name",
         "April 02, 2013",
         "Sample Book Publisher"
         ) //use a book array to store above values
    echo "Book Name : " . $book[0]; // Print 1st element of the array

PHP - Numbers

There are two types of Numbers can be declared with php.
  • Whole Numbers
    Integer data type uses to store positive or negative whole Numbers (without decimal points). It is not required to define integers because php is a loosely typed language. You are define a whole number without double quotes then it automatically evaluate as an integer value. But you can force the value store as integer by using casting. 
    Ex:
    1, -50
    $num = 50 // Numbers are define without double or single quotes
    $num = (int) 50 // This is a casting example. Here force to store the value as integer.
    $num = (int) "5years" // Taken the value as 5

    $num = (int) "age10" // Taken the value as 0
     

  • Real Numbers
    Double and Float data type uses to store positive or negative whole Numbers (with decimal points). 
    Ex:
    15.3325, -5.586240
    $num = 50.5589// Real Numbers are define without double or single quotes
    $num = (double) 50.569 // This is a casting example. Here force to store the value as real number.
    $num = (double) "5.85Km" // Taken the value as 5
    .85
    $num = (double) "age10.6" // Taken the value as 0

    $num = (float) "10.53yards" // Taken the value as10.53

PHP - String

String Variables are used to store set of characters enclosed with single (') or double (") quotes. In this post covering general operations and operations of string.
Ex:
  <?php
      $str = "PHP programing with String"; // Assign characters to string variable
      echo $str; // Print the string
  ?>

Out put: 
PHP programing with String


  • String Concatenation
    You can put two or more strings together with (.) operator.
    Ex: 
      <?php
        $str1 = "PHP Programing";
        $str2 = " with String";
        echo $str1 . $str2;
      ?>

    Out put: 
    PHP programing with String

PHP - Arithmetic Operations


  • Addition (+)
    Addition is performed with the "+" symbol.
    Ex:
    $total = 5 + 6;
    Here 5 add to 6 and assign to the total variable 
     
  • Subtract (-)
    Subtract is performed with the "-" symbol. 
    Ex:
    $answer = 8 - 6; 
      
  • Multiplication (*)
    Multiplication is performed with the "*" symbol. 
    Ex:
    $answer = 5 * 6; 
     

PHP - Variables and Data types

What is a Variable?

Variables are used to store values into the system's memory. Variables allows to perform set of actions and can be re-use within the code. You can change the out put of the program by changing the variable values rather changing the script.

Data Types

String    : used for character values such as sentences, names stc
Integer  : used to store numeric values of whole numbers
Float      : used to store numeric values of real numbers
Boolean: used to store either true or false or 1 or 0
Object   : used to store collection of values (data) or methods

Important: PHP is loosely typed language, that means your script determines the data type of the variable. 

Ex: 
$val = "PHP Programming" // This is considering as String Value
$val = 50 // This is considering as Integer Value

$val = "100" //This is considering as String value
$val =  $val * 5 // This is considering as Integer value
$val = $val * 1.25 //This is considering as float value

PHP - Embeded HTML

This post desribe about the PHP scripting, html coding and embedded php scripts.

I'll explain those with an example.

<html>
  <head>
    <title>Embedded php</title>
  </head>
  <body>
    <hr />
    <h3>Embedded php</h3>
    <p>This is a regular HTML paragraph</p>
    <?php
      echo "<p>This is a php paragraph</p>";
    ?>
    <hr />
  </body>
</html>

You can see the text inside the php script and out side it. Text inside the php script (comes with echo statement) handled as a script and rest of the text rendered as regular HTML. We can include any no of php blocks inside the html document like java script and any html tag to embedded the code.

Above code displays following  output.

Embedded php

This is a regular HTML paragraph
This is a php paragraph.

PHP - Install a Web Server

  • Wamp Server
    This video instruct you how to install wamp server

  • Xampp server
    This video instruct you how to setup xampp server on linux (Fedora)

PHP - My First PHP Program

This is a basic php embeded HTML program.

<?php
    echo "<h3>Hello This is my First PHP Program </h3>";
?>

<?php
    print ("<h3>Hello This is my First PHP Program </h3>");
?>

According to the above program you can appear Following out put

Hello This is my First PHP Program


  • echo and print statements are use to write something in the browser. Within the echo statement we can use html tags to format the text.

PHP - Comments

There are 02 comments used with PHP scripts.

  1. Single line Comment
    Single line comments can be specified by //
    Ex:

    <?php
    // This script print Hello World in the browser

         echo "Hello World"
    ?>
  2. Multiple line Comment
    Multiple Line Comment begins with "/*" and ends with */.
    Ex:

    <?php 
    /* This is a multiple line comment You can comment
    any no of lines within this block
    */

         echo "Hello World"
    ?>

PHP - How to create php files

Normally PHP script block starts with <?php and ends ?> and it can be embedded with HTML. PHP block can be placed anywhere in the document either with html tags or not.

HTML Embeded php code
<html>
  <head>
    <title>This is my First PHP Program</title>
  </head>
  <body>
    <?php
      echo "This is my First PHP Program";
    ?>
  </body>
</html>

Pure PHP Code

<?php
      echo "This is my First PHP Program";
?>

Shorthand PHP Code

Following code executed when the shorthand mood enabled in the server.

<? echo "This is my First PHP Program"; ?>

It is necessary to specify extention of the php file name as ".php" other wise php scrip does not execute.
Ex: Hello.php


PHP

Today onward I'm starting to teach all of you about the server side programming with php. I think these posts are much more interesting for you and hope you enjoy programming with php. Your comments highly appreciate.

Best Wishes,
Priyal

PHP - How to Execute Script

PHP scripts are unable to execute as normal html web pages thus php scripts are run only on the web servers. Therefore before executing the scripts, you should run your web server. All the php pages should be located inside the web server folder.

  • Through Wamp Server 
    Running wamp server and put it online before doing the execution. You can see a folder named "www" inside the wamp folder located in your C drive. PHP script pages should be located within that folder. It is better to create a folder and save all the documents there.
    PHP files cannot access with its full path like html (Ex: C:/wamp/www/php/hello.php). That www folder act as your local web server stored location and therefore you can call the above path "http://localhost/php/hello.php".
    localhost or 127.0.0.1 : this is the dns address of your web server located in your machine.
    php : php folder created in www folder.

    I think now you are familiar with storing php script pages.
  • See how to run php files with wamp server

PHP - Introduction

  • What is PHP?

    PHP is stand for PHP Hypertext Preprocessor. PHP is a widely used open source general purpose serverside scripting language for web developing and can be embeded into HTML. PHP originally created by Rasmus Lerdorf and now it is produced by PHP group. Initially it stood as Personal Home Page but now stand for this way. This is an successful free alternative to other web competitors such as Microsoft Asp. Currently php 5.5.0 version released and available from 21st March 2013.

    In this note set I'm going to discuss about php and how to execute scripts on your server.
    • PHP supports many Databases
    • PHP is an open source Software
    • PHP is a free Software
    • PHP is a server side scripting language and executed on the server

  • Why PHP
    PHP is open source solution and runs on every platform such as Windows, Linux, Unix and etc. and compatible with all web servers such as Apache, IIS & Etc

  • Before you start PHP programming needed to install php in your machine. It is better to download wampserver for windows and xamp server for linux. This includes Apache, php, Mysql and other technologies required for web programming.
  • Links for Downloads

HTML Drop Down List


  • Select tag
    This tag defines a drop down list to select chices
    Syntax:
    <select>
          <option>Choice 1</option>
          <option>Choice 2 </option>
    </select>
    • Option tag uses to define the choices of the list. This should be within the select tag.

      Ex:

      Code:
      <form>
        
      Designation:
      <select>
             <option>Mr. </option>
             <option>Mrs. </option>
             <option>Ms. </option>
             <option>Dr. </option>
             <option>Rev. </option>
             <option>Prof. </option>       <option>Other. </option></select>


      Output :
      Designation:

CSS - Background

CSS - background properties are used to specify the background effects of the element. 
  • background-color
    This property specify the background color of the element.
    Ex:
    body{
    background-color : yellow;
    }

  • background-image
    This property specify an image to use as background of the element. By default image is repeated to cover the whole document.
    Ex:
    body{
    background-image : url(background.jpg);
    }

  • background-position
    This property specify the position of the background image of the element.
    Ex:
    body{
    background-position: right top;
    }

  • background-repeat
    By default images are repeated both vertically & horizontally. This property specify the background color of the element.
    Ex:
    body{
    background-repeat : repeat-x; // repeated horizontally
    }

    p{
    background-repeat : repeat-y; // repeated vertically
    }

CSS - Class & ID Selectors

You can define your own selectors in the form of Class & ID selectors. Benefit of the Class & ID Selectors are allows to present same HTML element with different styles. 
  • CSS - Class
    Class selector uses the HTML Class attribute and preceded by ".". The class selector is used to specify styles for group of elements. Class selector can be used for several elements.
    Ex:
    CSS part :
       .color{
          color : red;
       }

    HTML Part:
       <p class = "color">This is a styled paragraph</p>

  • CSS - ID
    The ID selector is used to specify a style for single, unique element. ID selector uses the HTML ID attribute and preceded by "#".
    Ex:
    #top{
       background-color: yellow;
       color : red;
    }

    HTML part:
    <div id = "top">
       <h2> ----- </h2>
       <p>----</p>
    </div>

CSS - Grouping

CSS Grouping used to apply styles for same property of several selectors to avoid repeating the same. This way minimize the coding.
Separate each selector with a comma.

Ex: same font color using for paragraph & hyperlinks we can define it as a group by avoiding repeating the same.
   Normal way
      P{
         color : red;
      }

      a{
         color : red;
      }

   CSS Grouping
      p, a {
         color : red;
   }

How to use External JavaScript

JavaScript can also be put as an external files like as CSS files. JavaScript files saved with the extention of ".js". 
When using an External script, you can't use the <script>...</script> tags. Use src attribute of the <Script> tag to specify the .js external javascriptfile.

<html>
   <head>
      <script type = "text/javascript" src = "test.js" > </script>
   </head>
</html>

Javascript - How to write 1st Javascript

This example displays how to use javascript to write something in the HTML Document

<html>
   <body>
      <script type = "text/javascript">
         document.write ("Hello!.. This is my 1st Javascript program");
      </script>
   </body>
</html>

Following example displays how to use HTML elements within the javascript

<html>
   <body>
      <script type = "text/javascript">
         document.write ("<h2>Hello!.. This is my 1st Javascript program</h2>");
      </script>
   </body>
</html>


How to Put JavaScript into HTML Document

Where to put javaScript
  • Within the Header Segment
  • Within the Body Segment
 
This is the syntax of javascript using in HTML Documents
<html>
   <head>
     <title>JavaScript implement in HTML Doc</title>
     <script type = "text/javascript" >
        ............
     </script>
   </head>

   <body>
     <script type = "text/javascript" >
        ............
     </script>
   </body>
</html>