PHP and JavaScript
Basic PHP
II.1.1 Introduction
PHP is a server side open source scripting language. As server side code, PHP scripts use the server's processor to execute, not the client's. The packages and source code for PHP are available from the home page for the PHP development team: php.net. This site also contains exensive documentation on using PHP.
PHP scripts can be activated using the web browser.
An example of a simple PHP script is:
<!DOCTYPE HTML>
<html>
<body>
<?php
echo "Hello World from PHP!";
?>
</body>
</html>
which can be saved to a file "testphp.php" in the directory "/var/www/".
Typing "http://testphp.php" into the browser's navigation bar will use PHP to display the message, "Hello World from PHP!" in the browser.
II.1.2 Prerequisites
A basic knowlege of object orientied programming languages, such as c++, is expected. The PHP software package must be installed (See: Installing PHP); and the server software, such as Apache, must be installed and active (See: Installing Apache).
II.1.3 Elementary Code Elements
The format of source files for PHP code is as follows.
PHP code is written between the brackets "<?" and "?>".
The file is typically saved with a ".php" extension.
A PHP source file can be embedded in HTML as in the "testphp.php" example.
A PHP source file can also be included from another PHP source file using the command:
include 'includedfile.php';
For PHP:
- variables are defined by putting a
$char in front of a text name. The type (char, int, float, etc.) of variable is automatically determined. - scope for variables is determined by the location where the variable is defined. Variables at the beginning of a PHP file generally are global in scope. Variables inside of a function have local scope within the function.
- basic math operators are the same as for C++ and most common languages.
- strings and string variables can be combined with the "
." operator:$astr = "Hello"; echo $astr." "."World!";dumps:Hello World!. - the comparison operators (most common) are as follows: less-than, "
<"; less-than or equal, "<="; equal to, "=="; greater than, ">"; greater than or equal to, ">="; not equal, "!=". - "For-loops" are created by the command sequences such as:
for ($varname = 0; $varname < 100; $varname++){…}where0and10can be replace by arbitrary numbers (or numeric variables). The less-than sign could also be replaced by and arbitrary comparison operator. - "While-loops" have the syntax:
while($varname <=100){…}and do-while have the syntax:do {...}while($varname <100);. Again the number100is arbitrary and the comparison operator could be replaced by another. - functions are defined with the syntax:
function foo(){…}. The "function" keyword is required. - functions are called by writing the function name and brackets in the calling code,
for example: "
foo();", calls the function "foo" - functions accept variables when they are defined with the syntax:
function foofie($var_in1, $var_in2, … ,$var_inN){...}. - function are called with input values by the following:
foofie($varpassed1, $varpassed2, … , $varpassedN);. - functions return and input value by adding the "
return" statement at the end of the function before the closing brace in the function's definition:function foo(){…return $retvariable; }. - functions which return a value are called by the following syntax:
$retvalue = foo(). Here "$retvalue" is either a newly defined variable or an previously defined variable which will be filled with the value returned by the function, "foo".
II.1.4 Printing Values
The PHP commands that print variables are of special interest since these commands will be employed later
to return values from PHP scripts to other code.
Values can be returned from PHP scripts to the screen or other programs which called the PHP
via the echo, print and printf commands.
As an example take a variable "$numVar" which is set to "3".
For this example the command:
echo "Hello World! ".$numVar, returns: "Hello World! 3"print "Hello World! ".$numVar, returns: "Hello World! 3"printf("Hello %04d %s ", $numVar, $strVar), returns: "Hello 0003 of Worlds!", where$strVar = "of Worlds!";.
II.1.5 Arrays
PHP arrays are of special interest since they will appear later when MySQL queries are used to return values from the database.
A PHP array in which each value has a named reference is created by the following line:
"$test_arr" is the, arbitrary, name of the array.
The array keyword "array" is used to declare the array.
There are three data values in this array, each with its own label.
The symbol, "=>", marks the relationship between a label and a data value.
A value from the array can be retrieved by its label using the following syntax:
This line echoes the value, "40", assigned to "height" in the array: "$test_arr".
The following is a brief script which creates an array and prints some of its values:
This script can be saved as "arrayDemo.php" and run by entering its URL in the browser address bar.
It will print the "name" and "height" fields of the its array.
For more information on PHP arrays see: "Arrays" from php.net.
For information on additional functionality of the PHP language see the links section below:
- The PHP Language in General is covered by: "Manual" from php.net
- Variable definition and scope is covered by: "PHP Variables" from w3schools.com
- The comparison operators are covered by: "Comparison Operators" from php.net
- For loops, while loops and do-while loops are covered by: "PHP Looping" from w3schools.com
- PHP functions are covered by:"Functions" from php.net
- PHP printf methods are covered by: "The Printf Function" from php.net
Basic JavaScript
II.2.1 Introduction
JavaScript is typically a client side scripting language which is interpreted by the web browser on the client's machine.
It is not necessary to install a specific package to run JavaScript apart from the web browser itself and associated updates.
As a client side language that is interpreted by the web browser JavaScript resembles HTML.
An example of an elementary JavaScript program embedded in a HTML page is as follows:
<!DOCTYPE html>
<html>
<body>
<p> Hello World from HTML </p>
<p id="JSIn"></p>
</body>
<script type="text/javascript">
function test_hello(){
return "Hello World from JavaScript^_^!";
}
document.getElementById("JSIn").innerHTML=test_hello();
</script>
</html>
The above can be saved as: "/var/www/test_java.html".
Typing: "http://localhost/test_java.html" or "file:///var/www/test_java.html" in the browser's navigation bar will activate this script,
displaying the message, "Hello World from JavaScript^_^!".
II.2.2 Prerequisites
A basic knowlege of object orientied programming languages, such as c++, is expected. A browser which is capable of running JavaScript such as Chrome must be installed. Server software does not need to be installed since JavaScript routines can be run from the browser. However to run the routines using the "localhost" URL, a local server, such as Apache, must be installed and active (See: Installing Apache).
II.2.3 Elementary Code Elements
The format for JavaScript source files is as follows.
For JavaScript embedded in a HTML script, where the script is saved as a ".html" file,
the JavaScript begins with: "<script type="text/javascript">" and ends with "</script>".
JavaScript blocks are placed before the closing "</html>" bracket and can be placed either inside or outside the "<body>" brackets of the file.
For JavaScript code saved in a JavaScript file, the ".js" extension is used.
The opening and closing sequences "<script type="text/javascript">" and "</script>"
are NOT used.
JavaScript files can be included in HTML scripts using the line: "<script type="text/javascript" src="theJavaScriptFile.js"></script>"
where "theJavaScriptFile.js" is the name of the JavaScript file being included.
This line is typically placed in the "head" block at the top of the HTML file.
The functions defined in the included ".js" file are typically called from a short JavaScript block placed later in the HTML file.
For JavaScript:
- variables are defined by putting the "
var" keyword in front of a variable name, for instance, "var fnum=2.3;" and "var tstring="hello world";" define JavaScript number and string variables respectively. - scope for variables is determined by the location in the script where the variable is defined. Variables declared outside of the functions are global in scope; while variables declared inside the functions are local in scope to the function that they are declared in.
- basic math operators are essentially the same as for C++, PHP and most common languages.
- strings and string variables can be combined with the "
+" operator:var astr=”Hello”; var newstr = astr + " "+"World!";fills the variable "newstr" with the string: "Hello World!". - "For-loops" are created by command sequences such as: "
for ( i = 0; i< num; i++){...}" where "i" and "num" are numeric variables that have already been defined. The less-than sign could be replaced by an arbitrary comparison operator. - "While-loops" have the syntax: "
while(somevar<=num){...}" and do-while loops have the syntax: "do {...} while (somevar<=num);". Again the numeric variable, "num", is arbitrary and could be replaced by another variable or constant; and the comparison operator could be replaced by another. - functions are defined with the syntax: "
function foo(){...}". The "function" keyword is required. - functions are called by writing the function name and following brackets in the calling code, for example: "
foo();" calls the function "foo". - functions can be defined to accept passed values with the syntax: "
function foofi(var_in1, var_in2, … , var_inN){...}", where "var_in1", "var_in2", through "var_inN” are the names of the passed variables as they will be used within the function. It is not necessary to define the types of the variables passed. - functions are called with input values by the following: "
function foofi(varpassed1, varpassed2, …, varpassedN);", where "varpassed1", "varpassed2", through "varpassedN" are the names of the variables passed. - functions can be set to return values by adding the "
return" statement at the end of the function before the closing brace in the function's definition: "function foo(){... return retvalue; }", where "retvalue" is a variable or constant defined inside the function, the value of which will be returned by the function. - functions which return a value are called by the following syntax: "
fretval = foo();". Here "fretval" is either a newly defined, or a previously defined variable which will be filled with the value returned by the function, "foo". - ouput can be dumped by using the function: "
alert(messageStr)", which creates an "alert" box in the browser with the messages specified by the string, "messageStr".
II.2.4 JavaScript Objects and JSON
JavaScript objects are of special interest since they will be used later to store arrays of data,
such as those arrays necessary to hold the data returned by a database query.
An object is declared with the "var" keyword, for instance: "var log_obj".
An object can be filled with data either by setting it equal to an array in its definition,
or using a function such as "JSON.parse".
To define an simple object containing an array, the following syntax is used:
A variable from an array in an existing object can be retrieved, or set, using the following syntax:
The first line "var testvar=test_obj.var1" sets "testvar" to "Hello"
and the second line sets "var2" of the array "test_obj" to the string, "Earth".
The function JSON.parse converts a JavaScript Object Notation(JSON) string into an JavaScript Object.
"JSON.parse" takes a properly formated string as an input variable and returns an object.
For instance the following is an alternate way to create the object "test_obj" defined previously:
To define an object containing a two dimensional array using the "JSON.parse" function,
the following syntax is used:
where "hi_planets" is an arbitrary name for the table.
To retrieve data from an object with a named two dimensional array, such as the one created above, the following syntax is used:
The above fills the variable "planet" with the string: "Venus".
Note that the index used to determine the "row" retrieved from the 2D array begins with "0", not "1".
A second reference name to an existing object can be created by the following syntax: "var new_obj_ref = test_obj;",
where "test_obj" is an object such as the one defined above.
If a variable is reset using "new_obj_ref", for instance "new_obj_ref.Wnum=4;",
the original object will also be modified; "test_obj.Wnum" is now "4", not "3".
There are other ways to define and manipulate JavaScript objects; see the links section below for details:
- Variable scope is discussed by: msdn.microsoft.com
- Alert boxes are covered by: "JavaScript" from w3schools.com
- Defining Objects is discussed by: "Object Definition" from w3schoos.com