Add JavaScript in head

Question

I understand that good practice is to add the .js files in head of HTML.

My problem is that one of my .js files (or code+script) also has a beginning function, and it looks something like this (and all this is now in head):

<?php 
// Countdown timer
function timer($date, $id){ ?>

    <script>
        (function()
        { 
        // random stuff
        }
    </script>

// end function timer
<?php } ?>

How should I include/require or <script> src=" x "</script> this kind of file in the head of my HTML? I have hard time figuring out how to add this file in the proper way because of the beginning function.

It's actually not good practice in the head, but rather in the footer as the script load slows down page load. — Darren, May 26 '16 at 03:13
@Darren You can load JS files asynchronously from the head. You can also tell the JS not to trigger until the window is finished loading (i.e. the jQuery function `$().ready();`) — Machavity, May 26 '16 at 03:15
You are going to want to [understand this posting.](http://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load) — zipzit, May 26 '16 at 03:16
@Machavity Er, what's that funny $ doing there? What's poor Hans going to do with that? — zipzit, May 26 '16 at 03:17
good practice is adding them at the end of the html file, that way the document gets generated and then the JavaScript loads. Instead of waiting for the Javascript to load and then generating the page. — ArtisticPhoenix, May 26 '16 at 03:22

score 0 · Accepted Answer · answered May 26 '16 at 04:58

First of all, replace this:

<script> src=" x "</script>

with this:

<script src=" x "></script>

Now if I understand it correctly you want to include a .php file into the HTML header of your page, and this .php file should include a js script.

Something like:

index.html

<head>
    <title>My Weird App</title>
    <?php include "myphpfile.php" ?>
</head>

myphpfile.php

<?php
some_func() { ?>
<script src="myjsfile.js"></script>
<?php } ?>

myjsfile.js

function some_other_function() {
//do stuff
}

If you want to execute some javascript code when your php function gets called. This would do, but if you're hoping to be able to use some value returned from php on javascript, or the other way around, then it won't work as you expected. The preferred method of client/server communication is AJAX.

If you want to include the .js file based on a condition, this is done better by:

myphpfile.php

<?php
    some_func(some_params) {
        if(some_cond) {
            return "<script src="myjsfile.php"></script>\n"
        } else {
            return "";
        }
    }
?>

then on index.html

<head>
    <title>My not so weird app</title>
    <?php
    include 'myphpfile.php';
    echo some_func(some_arguments);
    ?>
</head>

Well, I hope that helps, if I didn't get it, please comment, (or make your question clearer).

my function is helping to countdown each second. So I guess that is value returned from php on javascript as you say ? And therefore I should use AJAX. — Hans Pede, May 26 '16 at 15:06
Yup, if you have a reason for not doing this entirely on javascript _(or php, for that matter)_, you should go with AJAX. — Jenny T-Type, May 27 '16 at 09:54

Add JavaScript in head

1 Answers1