correct way to include javascript

nkhine commented 11 years ago

i have this code in my scripts.blade file:

script(type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js")
//script(window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>'))

i tried:

 :javascript
      window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')

but does not work!

it returns:

  <script type="text/javascript">
    window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"></script>
   "');
   "

how do i make the second line work correctly?

bminer commented 11 years ago

I cannot replicate this bug. Please try upgrading to the latest version of Blade (3.0.0beta7). If the problem persists, please let me know. Closing this issue for now...

nkhine commented 11 years ago

I have the latest Blade version, and i have pushed it onto AppFog http://blade.eu01.aws.af.cm/

you can see there two '); ');

and if you inspect the code you have two errors in the console

Uncaught SyntaxError: Unexpected token ILLEGAL blade.eu01.aws.af.cm:2 Uncaught SyntaxError: Unexpected token ILLEGAL

here is the AppFog log:

☺  af logs blade                                                                                                                                              * master 95a1be0 ✗""
====> /logs/staging.log <====

# Logfile created on 2013-01-21 23:38:56 +0000 by logger.rb/25413
Installing dependencies. Node version 0.8.14
Installing express@3.0.6 from local path
Installing connect@2.7.2 from local path
Installing qs@0.5.1 from local path
Installing formidable@1.0.11 from local path
Installing bytes@0.1.0 from local path
Installing pause@0.0.1 from local path
Installing commander@0.6.1 from local path
Installing range-parser@0.0.4 from local path
Installing mkdirp@0.3.3 from local path
Installing cookie@0.0.5 from local path
Installing buffer-crc32@0.1.1 from local path
Installing fresh@0.1.0 from local path
Installing methods@0.0.1 from local path
Installing send@0.1.0 from local path
Installing mime@1.2.6 from local path
Installing cookie-signature@0.0.1 from local path
Installing debug@0.7.0 from local path
Installing blade@3.0.0beta7 from local path
Installing commander@1.1.1 from local path
Installing keypress@0.1.0 from local path
Installing uglify-js@2.2.3 from local path
Installing source-map@0.1.8 from local path
Installing amdefine@0.0.4 from local path
Installing optimist@0.3.5 from local path
Installing wordwrap@0.0.2 from local path

bminer commented 11 years ago

Ah! I see. Yes, Blade appears to be rendering the template properly, but I believe your problem is that your <script> tags are in the <body> instead of the <head>. All JavaScript should be in your <head> tag. Try that, and let me know if it works. Thanks!

bminer commented 11 years ago

Actually... maybe I am mistaken... your problem might be that the browser finds the </script> and thinks that the script tag is done. You should consider wrapping your code in an HTML comment. Like this...

script(type="text/javascript")
    //
        |!
            window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>');
            //any other code might go here...

~~I will reopen this issue and fix the :javascript filter, so that resulting JavaScript is wrapped in an HTML comment.~~ I will investigate this further. It appears that wrapping JavaScript with an HTML comment is no longer an acceptable programming practice.

bminer commented 11 years ago

OK, after some preliminary research, I've determined the following:

You are trying to write </script> inside your JavaScript, which is tricking the browser's parsing engine. See http://stackoverflow.com/questions/5838652/make-javascript-document-write-with-script-tag-block
Although wrapping your JavaScript in an HTML comment might solve this problem, it is still not recommended.
If you want to document.write a <script> tag, try this solution: http://stackoverflow.com/a/5838685/360539
Using document.write is generally a bad practice... here's why: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice Instead, consider the DOM manipulation functions like document.createElement("script"); and so on.... An example of this is actually in the Blade runtime

Closing this issue for now...

nkhine commented 11 years ago

and as per the comment: http://stackoverflow.com/a/7354319/477340 and it is for this reason i was using it, was based on the https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L28

when i tried:

 script(type="text/javascript")
         //
         |
        window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>');
        //any other code might go here...

it did not work, it should return:

   <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>

instead it returns:

     <script type="text/javascript"><window class="jQuery">|| document.write('&lt;script src=&quot;js/vendor/jquery-1.8.3.min.js&quot;&gt;&lt;\/script&gt;');</window></script>

bminer commented 11 years ago

Whoops! It should have been this (I also corrected my comment above):

script(type="text/javascript")
    //
        |!
            window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>');
            //any other code might go here...

The exclamation point means "don't escape" (i.e. don't use htmlspecialchars or similar escaping) Alternatively, there is another workaround to writing </script> in your code

nkhine commented 11 years ago

thanks for this.

bminer commented 11 years ago

Not a problem. Glad you got this one figured out.

bminer / node-blade

correct way to include javascript #125