Combining HTML, Javascript, and PHP

Surfing around today I came across the topic of combining different scripting languages in web design. Let’s keep this simple and talk only about HTML, Javascript, and PHP.

HTML, Javascript, and PHP:

  • HTML: not actually a scripting language, but a markup language. HTML is a client-side technology.
  • Javascript: a client-side scripting language.
  • PHP:server-side scripting language.

Client-side vs. server-side:

  • Client-side: the code you write is executed by the user’s web browser. That means if the user has Javascript disabled, for example, s/he won’t get that awesome Javascript experience you created.
  • Server-side: the code you write is executed by your server, which is probably in Utah or something, and you probably don’t have access to it. That means that if you have any PHP code on your page, it will work for all of your visitors as long as the server hosting your site has PHP installed. Most of them do, but if your code is not working maybe you should get in touch with your hosting provider. Server-side scripts are executed before they are sent to the client-side. Keep that in mind.

Alright, now that’s out of the way let’s get to the meat and potatoes of this!  You can actually create HTML (.htm, .html), Javascript (.js), and PHP (.php) files. Each one will of course support code written in its respective namesake, but some will also support other codes. So here’s another list for you, to make it easy (or maybe confuse you more):

  • HTML (.htm, .html) files: in here you can write both HTML and Javascript scripts, no problem! The user’s browser will read everything at the same time. To begin writing in Javascript, make sure to open the code with <script type=”text/javascript”> and close it with, you guessed it </script>. Normally you cannot have PHP code in an HTML file. There are ways if you google around, but if you know you’re gonna be using PHP code, it’s much better to do it in a .php file.
  • Javascript (.js) files: sorry, but you can only write Javascript code in here and if you open it with a browser it will just show you a bunch of code. So what’s it good for? Well, here you can write scripts that you want to use on multiple pages. Reference this file from the HTML or PHP file which actually contains all your content.
  • PHP  (.php) files: inside PHP files you can have it all! HTML, Javascript, and PHP, everything will work. In fact you can think of a .php file as a sort of beefed-up .html file. That is, if you’re using .php files as your main site files (where all the content is), it will work just like a .html file in regards to how you write your HTML and javascript: even though the extension is .php, that doesn’t mean you have to embed the HTML or anything like that. Just write your code as if it was a plain ol’ .html file. Again, Javascript code has to be inside the Javascript script tags. It is actually only if you wanted to use PHP that you would have to embed it first by using <?php in front of the code and ?> at the end. The cool thing about it is that you can place this PHP code anywhere, even inside HTML tags or within Javascript scripts, but always remember that PHP is server-side so it is executed before Javascript. That means by the time the Javascript comes around all it finds is the plain text resulting from the PHP execution.

Alright, let’s look at some examples of combining PHP, HTML, and Javascript:

PHP embeded in HTML (in a .php page)

<form>
      <?php $name = “Enter name”; ?>
      <input type=”text” value=”<?php echo $name ?>“>
</form>

The example above is written in a .php file. Everything in bold is PHP and everything else is plain HTML. The result will be an input box with “Enter name” pre-written into it.

PHP EMBEDED IN JAVASCRIPT (in a .php page)

<script type=”text/javascript”>
function bacon() {
alert(“This was written in Javascript”);
alert(“<?php echo “This was written in PHP”; ?>“);
}

bacon();
</script>

Again, in the example above the PHP is in bold. Everything else within the <script> tags is Javascript. The result will be two popups on page load: “This was written in Javascript”, followed by “This was written in PHP”.

So now you can see that PHP can be embeded anywhere within a PHP file. But be careful combining Javascript and PHP. Again, remember that since PHP is server-side it will be executed first. That means by the time the Javascript comes around all it finds is the plain text resulting from the PHP execution.

JAVASCRIPT EMBEDED IN PHP (in a .php page)

<?php
     echo ‘<script type=”text/javascript”>; alert(“hey”); </script>
?>

The example above shows how to embed Javascript within PHP. Again, the PHP code is in bold. To embed Javascript in HTML, we use echo and then insert everything inside quotes. I used single quotes here and then double quotes inside the Javascript code, wherever it was necessary. I could also switch those single and double quotes around if I wanted. If I wanted to embed HTML in PHP I would follow the same procedure:

HTML EMBED IN PHP (in a .php page)

<?php
     echo ‘<a href=”http://frugihoyi.wordpress.com/”>my website</a>‘;
?>

That would output “my website“. The PHP code was in bold.

And that’s about it. I’ve already explained above how to embed Javascript in an HTML page. It’s pretty straight forward and if you know Javascript, you should know that already. As opposed to PHP you cannot have Javascript code actually INSIDE of an HTML tag, like in our first example, but you can of course use Javascript commands like onClick and onHover. As for embedding HTML within Javascript code, I can give you a last example.

HTML EMBEDED IN JAVASCRIPT

<script type=”text/javascript”>
document.write(“<font color=’red’>textextext</font>”);
</script>

The above will of course output textextext in red.

Well this turned out much longer than I expected, but I hope it was informative. I’m not sure what the next topic will be, but maybe AJAX so stay tuned!