0

What happens behind in the browser level that allows making changes on the fly on HTML files, for example using javascript to add a class to an element, or even inserting a whole structure of elements? Does it refresh the page? Is it a language level or is it the browser saving some parameters and loading then when reloading the page? I have this doubt because after adding something, it doesn't reboot the other javascript modifications I've made, while for example, using django framework, when I load the same page again, all modifications made with js are gone.

Alexandre Cabral
  • 23
  • 1
  • 7
  • Please read this and supplemental info. It will answer your questions. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction; if that doesn't help, then start at the beginning with: https://developer.mozilla.org/en-US/docs/Learn – Randy Casburn Jan 21 '19 at 00:34

1 Answers1

0

If I understand correctly, you want the user to make changes to the page and preserve those changes, perhaps for future users?

First, javascript can make changes to the HTML (actually, to the DOM) which are seen immediately.

When the page is refreshed, those changes made by javascript are lost, because what is redisplayed is the HTML that is stored on the webserver (if you are doing this locally, via xampp or mamp or flask/django/etc, then imagine that you are accessing the site online via a webhost).

To make changes "stick", you must somehow modify the back-end code. Impossible? Not really.

You can program the site from the get-go to fetch certain data for display on the webpage (for example, the default order of table rows... or the default contents of a textarea or DIV -- those things your javascript allows the user to modify) from a stored location (e.g. from a MariaDB/MySQL database - or even from a text file on the webserver). Then, when a user interacts with the web page and changes one of these things, part of your design is for the javascript to preserve the new data/changes by saving the mods back to the place where the original data was stored (replacing what was there). Then, the next time the page is refreshed, the changed data will be displayed instead of the original data.

This requires your web-page (javascript running in the client's browser) to actively communicate with the back-end webserver, send the user's modifications back to the webserver, and the webserver must know how to receive the data and store it.

But the javascript you wrote only runs client-side - how does it make changes to the server files? The most popular answer is: AJAX - which is actually a LOT easier to use than you might think.

So you write both HTML and javascript. The javascript allows the user to make some changes to the page. (Pretend there is a SAVE button) When the save button is clicked, javascript code will get the changed data and use AJAX to send that to the back-end webserver. So, the webserver must also be programmed to expect such a communication and to receive the data, then it must store the data in the right place. To do that, additional code must be written server-side using a server-side language. Most commonly this was PHP or ASP.NET, but it can also be javascript (if Node.js is installed on the server), or Python, Erlang, Haskell, Java, Rust, Ruby, etc. But PHP, ASP.NET, Python and now javascript are the most popular.

cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • 1
    I think this question is off–topic and can't reasonably be answered here, e.g. "javascript only runs client-side" isn't quite correct, it is increasingly running on servers. Storing changes (state) on the server doesn't require modifying server code, and AJAX is increasingly a misnomer, particularly the "X" part. :-) – RobG Jan 21 '19 at 00:56
  • It's kind of only a couple of steps away from "how does the internet work?" – Asher Jan 21 '19 at 01:04
  • Excellent points. I just tailor an answer to the question/questioner. In this case, Alexandre asked how javascript (he specifies "running in the browser") can permanently modify a web page. Pretty clear that Node.js is not on his radar - but technically, right-you-are: javascript (via Node.js) now runs on the server, too. But bringing that into the answer is more likely to muddy the waters than to provide additional understanding. However, with your comment, that point is now clear to all future readers. As for answering this question at all - I've been where he is and remember how it felt. – cssyphus Jan 21 '19 at 01:07