PHP code is executed on the server side and output data are transmitted to Web browser.
JavaScript script code is executed by the browser on user's computer.
Combining these two web programming languages, JavaScript scripts can achieve dynamic results based on data received and processed by the server. Thus, the same web page can contain a JavaScript code for a user and other JS code for another user.

- There are two ways to combine PHP with JavaScript to achieve a dynamic and personalized result:

      1) By writing the entire JS script within PHP code and adding it to the web page with PHP function 'echo' (or 'print').
echo '<script> var str ="JS code"; </script>';
- The string returned by 'echo' must be a JS code with correct syntax.

      2) By adding in the JS script within the HTML document only the necessary data processed by PHP.
var var_js = '<?php echo $var_php; ?>';
• Both versions must be written into .php files that can be processed by the PHP module.

Alert window with the user name

For example, in a web page there is an authentication system that displays an alert window with the user name, after he logged in.
In this case we assume that the username is stored in a session variable ( $_SESSION['username'] ).
- Using the first method, we use the following PHP code:
// ... php code ...
echo "<script>alert('Welcome ". $_SESSION['username'] ."');</script>";

- Or the second way:
<?php session_start(); ?>
<!-- HTML code -->
alert('Welcome <?php echo $_SESSION["username"]; ?>');

Clock with server time

A clock made with JavaScript and added in a web page it displays the visitor's computer time. If you want to display the same time for all visitors, you can add and use the server time in the JS script, like in the following example:
<div id='tag_ora'></div>
// Clock script server-time,

// use php to get the server time
var dt_serv = new Date(<?php echo date('y,n,j,G,i,s'); ?>);

var ore = dt_serv.getHours(); //hour
var minute = dt_serv.getMinutes(); //minutes
var secunde = dt_serv.getSeconds(); //seconds

// function that process and display data
function jsClock(){
 secunde = 0;
 minute = 0;
 if(ore>23) ore = 0;

 var output ='<h4>Server time - '+ore+':'+minute+':'+secunde+'</h4>';
 document.getElementById('tag_ora').innerHTML = output;

//calls the function every second
setInterval('jsClock()', 1000);
- Test it yourself, in a .php file, on the server.

Displaying data from PHP with JavaScript, according to a URL

Maybe you have seen in sites for traffic or banner that is necessary to add a little JavaScript code in the page with a specific 'src' attribute.
They use the same principle, to combine PHP with JavaScript.
The URL in the JS code added in the web page calls a PHP script. The PHP script uses $_GET to get the parameters from the received URL. According to those parameters, the PHP processes data on the server and return a HTML and JavaScript code that can display in your page what they want, the traffic site, a banner, ....
To understand better, try the following example:

      1. Create a php file on your server (named 'phpjs_test.php') and add the following code:
$ids =[1=>'php-mysql', 2=>'javascript', 3=>'html'];

// gets the id from URL
 if($str = $ids[$_GET['id']]){

 //return a string with a JS instruction that will display a link
 echo 'document.write("<a href=\''. $str. '\'>Course '. $str. '</a>");';

      2. In the same folder on the server create a html file (ex. 'test_jsphp.html') where you add the fallowing code:
<script src='phpjs_test.php?id=2'></script>

- Call this html file on the server. The result will be a link (written by document.write()) defined in php script, based on the 'id' added in the URL in 'src' attribute.

Daily Test with Code Example

Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark></mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
JavaScript code and PHP

Last accessed pages

  1. Node.js Move and Copy file (12285)
  2. Convert XML to JSON in JavaScript (21274)
  3. innerHTML and outerHTML to Get and Replace HTML content (22099)
  4. Creating objects in ActionScript (8098)
  5. Insert, Select and Update NULL value in MySQL (44208)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1278)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1243)
  3. Tabs effect with CSS (1235)
  4. Contact page - CoursesWeb (1233)
  5. Insert, Select and Update NULL value in MySQL (730)