We Keep Coding

Confusion on how to execute javascript server-side vs client-side

I'm unsure if I'm asking the right question here. I apologize in advance for my ignorance, I'm only a year into teaching myself full stack JS and web app architecture and I'm trying to understand this on a granular level. Previous attempts to ask this question seem to offend some devs, so maybe it's a dumb question.
I'm trying to understand how to, or if its possible to, explicitly designate or assign a specific file or block of javascript to process/run/execute on a server vs on the client/browser.
Writing some javascript in a an app.js file and running node app.js seems to still expose that script to the browser, viewable in the Sources tab in Dev Tools.
PHP is interpreted by a server and then sends static HTML to the client. Is this "pre-processing", the equivalent of Server Side Rendering with Javascript App frameworks? Or Is writing a .php file inline with HTML server-side (like you'd see in Wordpress) more equivalent to inline javascript client side? And there is a different method to have JS interpreted server-side?
I've been reading about GENERATE_SOURCEMAP, but that seems more like it's used to hide client-side JS modules.
Other possible wordings of this question
How to not expose server side Javascript to the client?
How to run/execute Javascript on a server vs in browser?
I am NOT ASKING for the definition of server-side vs client-side JS, or for suggestions of server side application frameworks.
Again, I think i've confused myself or missing something very basic. Maybe the only answer is to segment your private web application from your client application and access via API. Thank you for any help.

Summary: Your JavaScript executed by the node daemon on the server side is not visible on the client side, the only thing visible is the output of your JS.
When you create a file with the .php extension you need an executable that executes this file, to return the result to the client to render it.
For example :
create a php file index.php with the following syntax:
<?php
echo '<script>console.log("HelloWorled")</script>'
?>
to run this file, you need the PHP daemon (the php interpreter) to run the file to get this output <script>console.log("HelloWorled")</script>
next; the output will be returned to the client to be execute on client browser;
In the case of PHP this operation is managed directly by the http server such as nginx via this configuration:
server{
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php<version>-fpm.sock;
}
}
which you will find inside the /etc/nginx/sites-available/default file
This rule simply tells nginx to make all files with the .php extension go through the php proxy to be executed and then return only the result of the execution to the client.
You have to imagine the exact same thing with nodejs.
I created an index.js file with the following syntax :
....
process.write( '<script>console.log("HelloWorled")</script>');
....
running the file with node index.js you will just get the output <script>console.log("HelloWorled")</script> which your server (e.g. expressJS) will send back to the client to run it client side to get los same result of the php code.
NOTES :
YOU DON'T NEED TO EXPOSE YOUR JS CODE, YOU NEED ONLY A PROXY TO SERVER IT Like PHP WITH NGINX (read more about expressJS and the other nodejs servers frameworks).
IF you need to expose a client side scripts,images,styles, you need to specify it in your proxy configuration

A question about how web applications work and how server-client is implemented

This is kind of a weird question I think to ask, but I have browsing about for the past some time and cannot find a clear definite answer.
I understand that a client connects to its own server and communicates with the web-server through sockets and I kind of see how that works in php (I have never used php but have used sockets before so I understand the concept).
The issue is I'm trying to get a real view of this.
The question is, do websites generally use sockets and contact a web-server to fetch data or the actual html? Or is it a rare choice made in some areas?
If it is generally used, then is the "real" js usually in the server? or is it client-side (for performance sake)?
Context:
Let me explain a bit where I'm coming from, I'm not a web expert, but I am a computer engineering student so most concepts are easy to understand. A "real"-er view of this would be very helpful.
Now, onto why I'm asking this. I'm developing a web-app as part of a project and have done a fair bit of progress on it but everything was done on a local dev server (so basically a client?)
I've started wondering about this because I wanted to use a database for my website and since I want to connect to something, I will need to connect to a web-server first (for security sake).
My question's intent is to guide me on how and most importantly, where, to setup this server.
I don't think showing any code would be of help here, but assume I have my client running on localhost:1234, my database on localhost:3306, I think I should have a web-server on another port so I can establish this communication, but I want to do it in a clean and legitimate way so all of my current solutions can be ported online with little to no changes (except the obvious)

There's a bunch to unpack here.
First of all, servers can be distant or local. Usually they are distant, local server are mostly used for development purposes.
Even if your server is on your local machine, it still isn't the client. The client is the part that is connecting to your server. For web development it is usually the user browser.
Javascript is a language that can be used server-side, with a NodeJS server, but more often client-side, in your user browser.
Your website, or web application, communicate with your server through various means. Most common one is the HTTP protocol, used to make server requests such as data request to populate your page (in case of an API server, REST or otherwise), or simply request the actual page to display in the browser. The HTTP protocol works by resolving URLs, and making requests to your server registered to this url using special methods such as GET, POST, DELETE, etc...
Sockets are used to create a persistent connection with your server that works both ways. It is mostly used for realtime updates, such as a live chat, as it allows you to push updates from the server instead of having the client request everything.
In most cases the database can be found on the same server as the one serving the website or application, as it is a lot easier to handle, and often faster without the extra networks requests to get the data. However it can be placed on another server, with it's own API to get the data (not necessarily web related)
Ports such as 1234 or 3306 are often used for local development, however once your move your project to a host service, this is usually replace by urls. And the host service will provide you with a config to access the associated database. Or if you are building your own server you might still use ports. It is heavily dependent on your server config.
Hope this clear some things up.

In addition to #Morphyish answer, in the simplest case, a web browser (the client) requests an URL from a server. The URL contains the domain name of the server and some parameters. The server responds with HTML code. The browser interprets the code and renders the webpage.
The browser and the server communicates using HTTP protocol. HTTP is stateless and closes the connection after each request.
The server can respond with static HTML, e.g. by serving a static HTML file. Or, by serving dynamic HTML. Serving dynamic HTML requires some kind of server language (e.g. nodejs, PHP, python) that essentially concatenates strings to build the HTML code. Usually, the HTML is created by filling templates with data from the database (e.g. MySQL, Postgres).
There are countless languages, frameworks, libraries that help to achieve this.
In addition to HTML, the server can also serve javascript that is interpreted in the browser and adds dynamics to the webpage. However, there could be 2 types of javascript that should not be mixed. NodeJS runs on the server and formats the server response, client javascript runs on the browser. Remember, client and server are completely isolated and can communicate only through an HTTP connection.
That said, there ways to make persistent connections between client and server with WebSockets, and add all kinds of exotic solutions. The core principle remains the same.
It does not matter if server software (e.g apache, nginx) is running on your local machine or anywhere else. The browser makes a request to an address, the DNS and network stack figures out how to reach the server and makes it work.

How to call java methods in a .jar file from javascript?

I know there are many similar questions on the internet but none of them could solve my doubt. So pardon me. About my project. I have a java file or program that takes a string , encrypts it and then returns the encrypted string to me.
I want to include or keep this java file (.jar file) on the webpage or the client-side. Now I know that we can upload this java program on server side and then easily communicate with it instead of calling keeping it on client-side which most people consider a bad practice.
But my purpose of keeping this jar file on the client side is that JavaScript code for encryption can be easily seen if we inspect element, so compared to it .jar file is more secure and one cannot see underlying encryption code and also if in case the there is network loss then instead of typing the entire string again and getting it encrypted again from the server, I want to save that string in such situation, get it encrypted from the jar file on the client-side so that once network problem is solved I don't need to retype whole message again and then I can directly send the message or the string to the other end or to other user on the network.
So for this I need help regarding how can I store my .jar file on webpage or client-side and then how to call methods from the .jar file using JavaScript. I know applets are deprecated, chrome does not support java. I have also seen some examples on internet like https://docs.oracle.com/javase/tutorial/deployment/applet/invokingAppletMethodsFromJavaScript.html but Its not working properly for me.
So I am in search of some ideal method by which I can first of all include or upload .jar file on client-side and then a method by which I can call java methods from .jar file using JavaScript. Please help... My earnest request...!

JavaScript code for encryption can be easily seen if we inspect element
I'm assuming you mean embedded Javascript here. Because you can refer to an external JS files which are located on the web server, not the client machine.
The browser may cache your script file somewhere locally but if one were bothered enough to dig it up, he might as well decompile your jar file which is much more easier.

Java can easily be decompiled. A jar file on the client will not be more secure than client-side JavaScript.
An encryption method that is compromised by looking at its code is not secure.

You seem to have many misconceptions... here are some facts for you to consider:
A JAR file (as either an application, WebStart or applet) running on client-side is NOT secure. If it runs on my computer, I can do anything I want. I can download the JAR file and decompile it. It's no better than JavaScript in this regard, it just takes slightly more effort and knowledge.
To protect data between client and server, you can simply use HTTPS and POST the data from web page to your server.
If client is encrypting data to you, there should be nothing to hide about the encryption process. The client generates a session key to encrypt the data, then wrap that session key by your server's public key. Then client send both encrypted data and wrapped session key to your server. Read more about Public Key Infrastructure (PKI): https://en.wikipedia.org/wiki/Public_key_infrastructure
By default a Java applet/WebStart is not granted access to disk. You must sign it to write data to disk, and user/security policies can still deny granting those access rights. (Applet - Unable to write file)
As you are aware of it, applet/WebStart is dying because of browsers rejecting plugins. There's Web Cryptography API (it's not mature, and there's no hardware support), you can try that instead. https://www.w3.org/TR/WebCryptoAPI/

how to read xml from FTP server in javascript

I am new to Javascript. Please tell me that how to retrieve and read XML file which is placed on ftp server in Javascript. Javascript only speaks HTTP and WebSockets (on newer browsers), and not FTP

If you are restricted to using client-side JS, it's not possible. It is possible with NodeJS, though.

If you are speaking about client side Javascript (the one that is in the browser), then this is not possible (it can understand only HTTP protocol and with the rise of HTML5 also WebSockets). FTP is completely another protocol and hence this is not possible.
Think about it this way: your JS is stored in your browser. So the whole code that will connect to your FTP and do something there is exposed to everyone. In order to connect to FTP you need to provide your credentials (your username and password). This means that everyone who wants to get them can get them. This is not nice :-).
As I understand, the thing you want to achieve - user does something on your site (click a button) and he can download the file from the ftp. In this case I would do something like this. On click I will make an ajax call or some sort of redirect ( window.open('http://yourserver/getFile.php'); ) And the script in getFile.php (php does not matter here - this is any server side script python, asp, ...) connects to your FTP server and does whatever you want.

Execute a Application On The Server Using JavaScript

I have an application on my server that is called leaf.exe, that haves two arguments needed to run, they are: inputfile and outputfile, that will be like this example:
pnote.exe input.pnt output.txt
They are all on the same directory as my home page file(the executable and the input file). But I need that a JavaScript could run the application like that, then I want to know how could I do this.
I'm using just Apache, I don't have any language for web installed on it. My goal is to do a site using just JavaScript, without the help of anyother language than it, HTML and CSS.

You would need to make an Ajax request to the server - the server would then have a handler that would then invoke the executable with the appropriate parameters.
Without know which web server technology you are using, it's harder to give a more concrete answer (ex: ASP.NET, PHP, Ruby, etc).
EDIT: If you're talking about doing this without any kind of server side resources, then this is impossible, and for good reason. Think of the security exploits!

Any other way to this without using other languages that need to be installed on the server?
No, but you almost certainly already have languages on the server. If it's a Linux, BSD or OSX server you've got shell script; if it's a Windows server you've got JScript and VBScript via Windows Scripting Host (using a cscript.exe hashbang).

JavaScript is for Client Side of a web application, so you won't be able to directly use javaScript to access server side files. As mentioned by Tejs, you should use Ajax to make a call to server side and then use appropriate server side routine to do the task.
Even at client side, most browsers don't allow accessing of any resource( e.g files) by javaScript code.

For server side javascript in Apache you could use Sun ONE Active Server Pages, formerly known as Chili!Soft ASP. For an IIS server, javascript is plainly available as asp-language.

Look into Rhino and node.js. I dont know a lot about this, but thats a route you can use for serverside javascript.