We Keep Coding

How to add javascript to all pages in silverstripe cms via a module?

I am trying to create a module for silverstripe. I am going through https://docs.silverstripe.org/en/4/developer_guides/templates/requirements/#requirements to understand how to add javascript and css files to the front end pages.
What I am not able to figure out is how to add a javascript file to all cms pages when the user installs my module. Is there a class I can extend and specify there? Or can it be done using the config somehow?

Create a class that subclasses SilverStripe\Core\Extension, and then apply it to \PageController using a config YML file
Your Extension class can then implement onAfterInit() to use the Requirements API

We can do this by adding the following to a .yml file:
SilverStripe\Admin\LeftAndMain:
extra_requirements_javascript:
- your-namespace/your-module-name:javascript/file.js

Both 3dgoo's and alt's answers are correct, depending on your use-case.
If you are wanting to add Javascript to all your front-facing "Pages" (What visitors see when navigating to your website *in most cases), then you will want to follow ant's example.
Otherwise if you are wanting to add the Javascript to your /admin section of your website,
so that CMS Administrators are impacted by your script, then you will want to follow 3dgoo's example.

javascript alternative to php include

What is the javascript equivalent to PHP's include(file.html) specifically without needing to place it in a div like $("#div").load("file.html");? I'd like to get away from using PHP and find out how to do this in Javascript without using a div placeholder and just loading it into webcode to use with things like bootstrap modals or buttons.

in this case, php acts as a preprocessor - it sees that include line, fetches the html and then drops the contents of the file in-place. Javascript can't really do that in the same way because it only lives on the browser.
You have some options
Do you an http request to a resource that will return the html, and then render that html string to a location (html id tag of some sort)
Use a different preprocessor. There's loads and it depends on what runtime you're on. NodeJS? Ruby? Go? Java? Python? All of them use something different - but they'll give you a one-to-one alternative for the directives you want to use inside your html files. Here's a great article that gives an overview of a number of different options: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

naturally, when you want to load a resource from js (when it is possible and do not try to access a resource that triggers a cross domain origin problem) you use AJAX
a simple implementation using jQuery:
$.get('file.html', function(file) {
console.dir(file);
});

Paths in Dynamic Page Replacing Content

For dynamic page changes without having to reload the whole content, I have found this very simple working solution:
Tutorial: http://css-tricks.com/rethinking-dynamic-page-replacing-content/
Demo: sudojesse.github.io/dynamic-page/
However, this solution only works if you're linking to something like "sitename.html". Is it possible to do the same with folder paths?
Example:
Like it is above:
[sudojesse.github.io/dynamic-page/about.html][1]
Like I want it:
[sudojesse.github.io/dynamic-page/more/about/][2]
I have tried it but it doesn't really work!
http://sudojesse.github.io/dynamic-page/about.html
http://sudojesse.github.io/dynamic-page/more/about/

If you want it to work, you would have to rename the file to "index".
The reason for this is because the Web server looks after a specific resource when the client requests a directory. This resource is often by default set to "index"(dot)"something".

Same sidebar across webpages

I'm pretty new to web development. What is the best practice in keeping the same sidebar and other elements across web pages on one's site? Do you store the sidebar html and call that? If so, how would one go about doing something like that?

There're many options to handle this problem but I've found easy one using jQuery. Use this if it suits your requirements.
Add the jQuery CDN in your HTML file.
Create a JS file as sidebar.js.
Copy all your HTML code of the sidebar and store as a string variable in a function of the JS file. as
function loadNavbarDiv() {
String navbar_code_str = '<nav><div>...</div></nav>
$('body').append(navbar_code_str);
}
Then in the HTML file, you want to add navigation bar, add folowing code in your <head>
<script src="sidebar.js"></script>
<script>
$(document).ready(function(){
loadNavDiv();
});
</script>
It's working fine for me.
Happy coding!

Here's one way to do it: use "include" files. No JavaScript required. The server does the work, instead of requiring the client to add the content.
SSI, or Server Side Includes, were first developed to allow Web
developers to "include" HTML documents inside other pages. If your Web
server supports SSI, it's easy to create templates for your Web site.
Save the HTML for the common elements of your site as separate files.
For example, your navigation section might be saved as navigation.html
or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
That page also describes some other approaches. But if you know this is called using include files, you can search for it more easily. For example, this article describes includes and how to call them from JavaScript if you must.

As long as you're only coding in html, you will need to copy your html into every page. You can store the css for the sidebar in one and the same file and call that on every page though.
Other scripting languages and frameworks might contain templates (php) or master pages (asp.net) for example which make it possible to use the same code in different pages.

Wordpress and javascript .load() function

I have problem to get .load() function working in Wordpress. Initially I was using 3.0.5 version of WP, wanted to get some content from external page (same domain), so I used this code
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".someclass").load("http://www.mydomain.com #someid");
});
...and it worked. However, after update of Wordpress to latest version (and installation of plugins /some use jquery or mootools/, this piece of code isnt pulling any content anymore. I tried to write different code for noConflict mode but also without success (but JS is working if I change line to some alert func). I also deactivated all plugins, removed other js (like for menu), but still no content was displayed. If I use same code in a separate file (in the same directory where WP theme is) - it works.
I would be thankful if someone have advice what to try next or where to look for potential problem. Or maybe to suggest some other approach how to get content from external page (and specific div). If I put that separate file into iframe and call it within sidebar, it's working but then there's a problem of iframe links opening within iframe box.

Your problem is the same origin policy, which in lamens terms means you can't do ajax requests to different domains (even subdomains) as it is security risk, you browser simply won't let you do it. Specifically in your case you are attempting to load www.infostar.rs from inforstar.rs.
You will need to come up with another idea, personally I would just do it in PHP with:
echo file_get_contents('http://domain.com');
Alternatively would could look into forcing non-www in htaccess.