What Javascript can do and can not do inside the web browser

We know that Javascript helps us create components like Tabs, Dropdown menus, etc.

But it also helps us add some really sophisticated improvements to our websites.

This brings up the question...

What specifically Javascript can do inside the Web Browser?

1. Javascript can increase the accessibility and usability of a particular page.

For example, it helps you improve the reading experience of the main content on the page by letting you increase the font size, changing the background color, etc.

None of the functionality shown in the above video is possible without Javascript.

2. Javascript can modify styles

If you re-watch the above video, you can see that the styling of the page changed after a few button clicks.

This means that Javascript is capable of modifying CSS styles.

3. Javascript can create and edit HTML on the fly

Yes, you heard it right, you can create HTML content with Javascript and insert it anywhere you want on the HTML page.

Without this feature, libraries like ReactJS don't even exist.

4. Javascript can help remember your visitor preferences for a particular website with the help of something called browser cookies and Local Storage.

For example, in the previous video, I changed my reading preferences on the Oreilly website while reading a book.

I came out of the book reading section and tried to go back in.

Oreilly remembered my reading preference (Dark mode with large text size), and it also remembered what chapter I was reading.

All this is possible with the help of cookies, local storage, and some internal communication with a server.

And Javascript helps you set these cookies, local storage, and communication with the backend server.

Powerful, isn't it?

5. Javascript can react to our actions

Google Maps in the browser is not possible without Javascript.

As you can see, you can write a script that can respond to mouse clicks, mouse pans, keyboard presses, pointer movements, etc.

6. Javascript can load content without refreshing the page

Ever heard of a single-page application(SPA)?

Gmail is the best example of a Single-page application(SPA).

You can navigate around the entire application without any page refresh.

Basically, Javascript can communicate with a web server by not making it obvious to pull and display the content.

This is only possible with the help of a technology called Ajax.

We will also build a SPA in a future lesson by learning Ajax.

And there are many other things that in-browser Javascript helps you accomplish.

Most of the features I mentioned so-far overlaps with each other and need one another to get the job done.

But at the end of the day, it is all Javascript, and it is awesome.

Now that we know the power of Javascript let's also understand its limitations.

What can Javascript not do inside the Web Browser?

1. It can not read/write files to the hard disk of the website visitor.

This is for security reasons because you don't want a random script from a random website to do file operations on your computer, right?

2. Javascript can not help you with protecting the content of your website.

People think disabling right-click will stop visitors from downloading images, videos, and text content from a web page.

But once you disable Javascript, the right-click is enabled automatically.

Also, disabling right-clicking is a bad user experience practice. You should never do that.

3. JavaScript in one tab can’t affect other tabs inside the web browser.

Browser tabs can not communicate with each other unless they both are rendering the same domain.

This is a security precaution.

Now, imagine you have visited yourbank.com on "Tab 1" and spammysite.com on "Tab 2".

If browser tabs can communicate with each other, then it is easier for the spammy site on "Tab 2" to hack into your bank website on "Tab 1" and steal your money.

Having said that, there is an important exception to this rule.

There is something called the "CORS Policy", short for Cross-Origin Resource policy.

Both websites can agree to communicate with each other to enable the CORS policy and share data.

For example, analytics.google.com can gather yourwebsite.com insights if you sign up for the Analytics service from google.com.

Anyway, that's all about the limitations for now.

In the next lesson, we will quickly discuss support for Javascript in web browsers.