Develop Reference

How to include Javascript files in a hugo project

I am currently starting to work with hugo SSG. My goal is to have a reliable, yet uncomplicated application to centralize some components in otherwise vanilla html,css,js website projects. I want to utilize hugo to maintain head, header and footer for me.
Now I migrated all of the html and css of my current project to hugo, which worked fine. It's average Landing Pages with header/footer and a couple of sections. However I seem to be unable to include my Javascript files.
I have started with two first scripts to try out the setup, one navBar.js and one headerShadow.js (simple UI tricks).
I have included those two files in {projectName}/themes/{themeName}/layouts/partials into the footer.html with the following tags:
<script defer language="javascript" type="text/javascript" src="{{ "/js/navBar.js" | urlize | relURL }}"></script>
<script defer language="javascript" type="text/javascript" src="{{ "/js/headerShadow.js" | urlize | relURL }}"></script>
First question: Is that even the best practice? I found this on another post on stackoverflow, which I'm unable to reproduce.
Second question: My visual studio code already flags exactly the part /js/navBar.js" in both tags as faulty. What am I doing wrong here?
I tried:
connecting as "usual" <script src="js/headerShadow.js"></script>
I would be very thankful for advice from someone more experienced with hugo!
Thanks alot in advance :)

I would suggest using hugo pipes and assets as a best practices.
In the docs under:
ASSET MANAGEMENT
JavaScript Building
https://gohugo.io/hugo-pipes/js/
It gives the exact syntax and what to do so I won't bother copy pasting it here. This includes Tree Shaking, minify, etc. etc. Things which are "best practices".
I would suggest of the options (like importing from your node_modules or etc.) that you just keep your JS in the assets folder for simplicity and use that option in the above docs.
Specifically: https://gohugo.io/hugo-pipes/js/#import-js-code-from-assets
This would be, in my opinion, for a simple site, best practice.

If you don't want to use Hugo Pipes (it's a bit advanced for what you need), here's a simple way to approach it that worked fine in my project.
<script src="{{ .Site.BaseURL }}js/navBar.js"></script>
In development (hugo server command), .Site.BaseURL will be overridden to http://localhost:1313/. In production (hugo command) it will be the value of baseURL in config.toml, such as https://www.example.com/.
Files in the static directory are built to your site root, so the file would be located at http://localhost:1313/js/navBar.js. That's why I believe the relative path isn't working.
If that doesn't work, there's likely some other issue in your project that needs addressing, or try clearing your browser cache.

Java-script nodejs in webbrowser

First of all I'm not skilled with JavaScript, I know basics but JS nowadays gets really confusing and for someone that is not in "JS loop" finding correct info is hard.
The question is:
I want to use google protocol buffers in web browser. The problem is that I can't load it into browser due to issue with:
ReferenceError: Can't find variable: require Global Code — js_pb.js:11
As far as I know this is nodejs function.
js_pb.js is generated class from proto file by protoc using commonjs --js_out=import_style=commonjs,binary.
So I googled and it seams like systemjs or requirejs is the way to go (to load nodejs javascript into web browser).
Added this to the html:
<!-- Load system js -->
<script src="./system.js"></script>
<script src="./extras/named-register.js"></script>
<script src="./extras/amd.js"></script>
<script src="./extras/use-default.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"google-protobuf": "./google-protobuf.js"
}
}
</script>
<script type="systemjs-module" src="./js_pb.js"></script>
<script>
<!-- var message = new proto.poc.MsgPoc(); -->
<!-- import {proto.poc.MsgPoc} from './js_poc_pb.js'; -->
Unfortunately <script type="systemjs-module" src="./js_pb.js"></script> also return issue with required missing.
My question is:
How to properly use systemjs to load that java script into web browsers without need of packaging or bundling JS ?
or more general question
How to load java-script that contains nodejs functions (require etc.) into web-browser without packaging all dependences into single JS (bundle like webpack)?
Thanks for reply in advance
Regards

How can I access and use multiple javascript libraries?

I am new to javascript and programming in general. I have been working on a web app that solves simple algebraic equations. I am using two libraries, algebra.js and katex.js. How do I use both libraries in my script? I would like to keep this as a client-side application.
I have looked at node.js but my understanding is that node is for server-side development. I have looked at RequireJS but that doesn't seem to handle directories well. Recently I found Enderjs which seems to use npm and allow for client-side development and still make use of require().
What should I use to make a web app like this? Please let me know if there is anymore information that is needed.

The most basic way to do this is to include multiple script tags at the top of your html file. So:
<head>
<script src="path/to/library1.js"></script>
<script src="path/to/library2.js"></script>
<script src="path/to/my/javascript.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
This will load more than one onto the page. The order might matter - be wary of which dependencies your chosen libraries have. For example, some will depend on jQuery, so you should load jQuery first then those that depend on it. Order is top down.
In my example, if we pretend library2 depends on library1, then the example would work. However if library1 depended on library2, it would not.

The simplest way is to include the script tags directly in your html file like so (this assumes that you have the algebra.js file in the same folder as your html file):
<script src="algebra.js"></script>
If you are loading the library from the internet you have to use the full web path in the src attribute, for example loading the jQuery library from a cdn (content distribution network):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

separate files (HTML5,CSS & JS)

I have recently developed my first mobile web application using HTML5, CSS3, JavaScript and a bit of jQuery. At this stage I want to separate codes for HTML, CSS & JS in 3 different files and using a web server to establish connection between those files. Any solution?

Just declare references to your CSS & JS from within your HTML. For performance reasons, it's good to put the CSS reference in the head, and the JS reference at the end of the file just before closing out the tag. That way, your page will load and will look correct right off the bat and won't be blocked downloading the JavaScript. The JS will be the last thing to load. Here's an example of the HTML markup:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>
<body>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

I would recommend looking into builders like
Apache Ant
HTML5 Boilerplate Build Script
Grunt (based on node.js)
Make or Rake files
this allows you to separate all of your files and then lint the files. This also allows you to then combine and minify the files. As for the different css, html and javascript. Those should all remain in separate files. But minifying your files and combining them into single files will definitely reduce page load time.
A good reading and look through would be HTML5 Boilerplate. They spend a lot of time on performance and the developer process.

Compress Javascript Files

I have a little situation here and in-spite of searching a lot - am not getting to a solution.
I am loading Javascript Files in the footer of my page as below
<script type='text/javascript' src='/scripts/jScrollPane.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/common.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/preload.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/scroller.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/easing.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/jquery.backgroundPosition.js?ver=1.0'></script>
All I want to do is instead of including the above files - just include one compressed file which is made by compressing all the above files.
<script type='text/javascript' src='/scripts/one.js'></script>
I have tried a lot of options and each time there is an error in the file generated.
Is there a solution where I upload all files - get one compressed file and it works without an error?
Is is possible that these files themselves are missing ending ;'s - the reason why there are errors?
What can I do to come to an alternative here.
Cheers!

I would start of by running my code through JSLint http://www.jslint.com/ for instance, so that you can identify and solve any JS-errors.

I suggest something like Minify: http://code.google.com/p/minify/
Minify is a PHP5 app that helps you follow several of Yahoo!'s Rules
for High Performance Web Sites.
It combines multiple CSS or Javascript files, removes unnecessary
whitespace and comments, and serves them with gzip encoding and
optimal client-side cache headers.

Is there a solution where I upload all files - get one compressed file and it works without an error?
Yes, assuming that your files are setup correctly.
Is is possible that these files themselves are missing ending ;'s - the reason why there are errors?
Exactly, the files you minify must support the removing of line breaks. Missing semicolons are the biggest problem.

Paste each file into the Closure Compiler Service. Keep the optimization level at "Simple".
Correct any error you might get. Watch out for missing semicolons at the end of the file, as these do not trigger an error.
Concatenate the results in one file.
Done.