Placing a javascript code into a perl script

Question

I am attempting to place some JavaScript into a Perl script (extension .pl). The JavaScript is for interactive social media buttons, however they don't appear on the page. Here is the code that I placed in the Perl script:

<div class="sb-Container"></div>
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

<script src="..js/shareButtons.min.js"></script>

<script>
    $(function () {
        $(document).shareButtons({

            // Main Settings
            url: 'URL', // URL to share
            buttonSize: '50px', // Size of the share buttons. Min: 25px
            buttonsAlign: 'horizontal', // Buttons layout: horizontal, vertical
            spaceBetweenButtons: '3px', // Space between the buttons
            radius: '5px', // Buttons corner radius

            // Icons Settings
            iconSize: '20px', // Size of the social networks icons. Min: 15px
            iconColor: '#fff', // Color of the social networks icons
            iconColorOnHover: '#222', // Color of the social networks icons on hover

            // Facebook Button Settings
            showFacebookBtn: 'show',  // Display button: show, hide
            facebookBgr: '#4a6ea9', // Button background color
            facebookBgrOnHover: '#385a97', // Button background color on hover

            // Twitter Button Settings
            showTwitterBtn: 'show', // Display button: show, hide
            tweetMessage: 'Your message goes here', // Default tweet message (URL is added to the message automatically)
            twitterBgr: '#2aaae0', // Button background color
            twitterBgrOnHover: '#197bbd', // Button background color on hover 

            // Pinterest Button Settings
            showPinterestBtn: 'show', // Display button: show, hide
            pinterestBgr: '#e30b2c', // Button background color
            pinterestBgrOnHover: '#d3132a', // Button background color on hover

            // LinkedIn Button Settings
            showLinkedinBtn: 'show', // Display button: show, hide
            linkedinBgr: '#007bb6', // Button background color
            linkedinBgrOnHover: '#0e67b0', // Button background color on hover

            // VKontakte Button Settings
            showVkBtn: 'hide', // Display button: show, hide
            vkBgr: '#5b88bd', // Button background color
            vkBgrOnHover: '#688fb2', // Button background color on hover

            // WhatsApp Button Settings (this button works on mobile devices only)
            showWaBtn: 'show', // Display button: show, hide
            waBgr: '#37d350', // Button background color
            waBgrOnHover: '#25e47a', // Button background color on hover

            // Viber Button Settings (this button works on mobile devices only)
            showViberBtn: 'show', // Display button: show, hide
            viberBgr: '#665eaa', // Button background color
            viberBgrOnHover: '#675fa7', // Button background color on hover

            // Email Button Settings
            showEmailBtn: 'show', // Display button: show, hide
            emailBgr: '#888888', // Button background color
            emailBgrOnHover: '#7a7a7a', // Button background color on hover

            // Print Button Settings
            showPrintBtn: 'show', // Display button: show, hide
            printBgr: '#888888', // Button background color
            printBgrOnHover: '#7a7a7a', // Button background color on hover
        })
    });
</script>

The HTML shows:

1009 1009function () {
1009 1009document).shareButtons({

in place of:

$(function () {
    $(document).shareButtons({

Should I be placing anything within special characters?

Thanks for your help

Georg Mavridis · Answer 1 · 2020-06-23T15:20:25.373

3

Assuming you add your code in some "here-Doc" like

print <<EOT;
<div class="sb-Container"></div>
                            <script
                            src="https://code.jquery.com/jquery-3.3.1.min.js"
                            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                            crossorigin="anonymous"></script>
                        
...
EOT

you have to change the initial <<EOT; to <<'EOT'; indicating that you don't want special Elements (Variables, etc) to be escaped.

Be aware that despite that \\ and \' will be printed as \ and ', so you might have to "fix" that.

edited Jun 23 '20 at 15:20

answered Jun 23 '20 at 14:09

Georg Mavridis

2,312
1
15
23

Thanks for your response. I searched the perl document for '<<' and' EOT', but could not find anything. Would it be possible to add any code directly to the two lines in question, in order to ensure that nothing there is escaped? – Netrunner21 Jun 23 '20 at 15:26
Look for the first "perl" statement Before the code you added. It is difficult to guess what it is, – Georg Mavridis Jun 23 '20 at 15:48
if e.g. there was a `$html = qq( ..` you cannot easily change this to the equivalent of `$html = q( ..`, as you would have edit your code to escape the `)`. – Georg Mavridis Jun 23 '20 at 15:51
The first perl statement before the added code is 'my $content = qq{', and the next line is HTML. my $content = qq{ is on one line. The very next line is
. I did not understand your last comment.
– Netrunner21 Jun 23 '20 at 16:20
`my $content = qq{` will take all the content UPTO the closing `}`, if this is many lines below. The closing curly braces of your JS-code would be a syntax error. – Georg Mavridis Jun 23 '20 at 16:40
Anyway, you can close the perl statement with a `};` before your code, add a `$content = $content . <<'EOT';` add your code followed by the EOT in a bare line and then the rest. – Georg Mavridis Jun 23 '20 at 16:43
I did not have much success with various attempts. Please explain more clearly your last comment, as I may have misunderstood some things. First I close 'my $content = qq{' by adding '};' on a bare line. Then I place '$content = $content . <<'EOT';' on a bare line. Then I add the code exactly as it shows in my original question. Then I place EOT on a bare line. – Netrunner21 Jul 01 '20 at 09:26
And after that you would have to place `$content = $content . qq{` before the rest of the generated content. – Georg Mavridis Jul 01 '20 at 09:50

Placing a javascript code into a perl script

1 Answers1