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 · Accepted Answer · 2020-06-23 15:20:25Z

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, 2020 at 15:20

answered Jun 23, 2020 at 14:09

Georg Mavridis

2,3511 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Netrunner21 Over a year ago

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?

Georg Mavridis Over a year ago

Look for the first "perl" statement Before the code you added. It is difficult to guess what it is,

Georg Mavridis Over a year ago

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 ).

Netrunner21 Over a year ago

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 <div class="row">. I did not understand your last comment.

Georg Mavridis Over a year ago

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.

|

Collectives™ on Stack Overflow

Placing a javascript code into a perl script

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related