Why is JavaScript the Best Language for Web Design Despite Compatibility Issues?

[kolleamm]

After doing some research I came to the conclusion that JavaScript is the best language to learn for web design. However now I'm seeing that some browsers do not support it. I'm confused then on why it's the best web design language as opposed to HTML if there are compatibility issues.

Thanks in advance

 

[phinds]

After doing some research I came to the conclusion that JavaScript is the best language to learn for web design. However now I'm seeing that some browsers do not support it. I'm confused then on why it's the best web design language as opposed to HTML if there are compatibility issues.

Thanks in advance

JavaScript is an actual programming language whereas HTML is a markup language. They are entirely different beasts. HTML is supported (although not always in exactly the same ways) by ALL browsers since it is the BASIS for all browsers. JavaScript is one of several programming languages that can be embedded in HTML files for some browsers. It is certainly arguable whether or not it is the best such.

 

[JorisL]

JavaScript is one of several programming languages that can be embedded in HTML files for some browsers.

Unless you count languages that are compiled¹ to javascript there is only the one. And it still needs a buttload of work if you ask me. But it's getting better. The same is true in a way for CSS which is about ready to get rid of complicated structures to achieve responsiveness² with flexboxes and what not.
Finally HTML5 is great, more semantic tags (you no longer need IDs in a lot of cases) and support for cool stuff like SVG.

To get back to the real question phinds is completely right. Javascript is a tool that can manipulate the structure of your HTML page and bring interactivity.
When you click reply on this post, it's not the whole page that reloads as you'll see. Quoting the post is done with javascript.

About compatibility, about every functionality you'll likely use will be supported by all browsers (that haven't disabled javascript).

¹: Transpiled is used as well, I think it's more appropriate in most cases. TypeScript comes to mind (javascript with statically typed variables)
²: Making sure a website looks great on desktop, tablet, mobile and everything else I'm forgetting is all but trivial. If you open physicsforums on a smartphone you'll see an icon instead of the menu, this is part of a responsive solution for the navigation. It's called a hamburger menu/navigation.

 

[phinds]

Unless you count languages that are compiled¹ to javascript there is only the one

People who use PHP are going to be very surprised to hear that.

 

[kolleamm]

If I understood correctly web pages are read by the browser in HTML and JavaScript edits that HTML code? Does JavaScript refresh the page as well?

 

[phinds]

If I understood correctly web pages are read by the browser in HTML and JavaScript edits that HTML code? Does JavaScript refresh the page as well?

No, it doesn't need to. There might be a JavaScript refresh command but there would be little use for it normally if such does exist. I've never had to do a page refresh due to JavaScript.

In case you are not clear, JavaScript changes the HTML before the browser interprets it to paint the page. It also allows for interaction with the user. Oh. DUH ! You already said you know that.

 

[JorisL]

People who use PHP are going to be very surprised to hear that.

I was under the impression we were talking client-side. Since the OP was about browser compatibility. The browser doesn't care about the origin of the HTML/CSS/JS sent by the server.

The back-end is a whole other story next to PHP there's node.js, Python even .net based languages.
In principle it could be any language that can listen to a port and send messages to an IP although some are obviously not very useful in your average application.

 

[jack action]

There is only one language for the web and it is HTML. You can do everything with it.

When it comes to styling, using CSS is a plus (that quickly becomes a must with complexity). A browser may or may not support CSS. A user may disabled CSS support on his/her browser.

With HTML, the only way you can interact with a user is with a form. The user fills a form, click the submit button which send a request to the server with the user's input. On the server, you use a program, such as PHP, to manipulate the input and send back a new web page to the user based on the user's input.

An alternative is to include in your HTML some script, that will do the manipulation of the user's input directly on his/her machine based on his/her action. This way there are no requests to your server and results are faster and more user-friendly. It may or may no be what you want/need. The script has to be interpreted by the browser. A browser may or may not support script. A user may disabled script support on his/her browser. The most popular client-side script is Javascript (I don't know of any other supported by mainstream browsers).

It is consider good practice to design a website that can function without Javascript and even without CSS. It is called progressive enhancement.

 

[phinds]

There is only one language for the web and it is HTML. You can do everything with it.

If that were true there would never have been any need for JavaScript. HTML can NOT do what JavaScript can do.

 

[phinds]

I was under the impression we were talking client-side. Since the OP was about browser compatibility. The browser doesn't care about the origin of the HTML/CSS/JS sent by the server

Fair enough.

 

[jack action]

HTML can NOT do what JavaScript can do.

HTML is the end. Its role is to present information. Javascript (and CSS) can only help make more efficient the production of HTML documents. Whatever Javascript does, in the end, it builds or modifies an HTML document, which could have been «manually» written that way in the first place.

Although, certain action wouldn't make sense to do without Javascript or CSS, like sliding menus for example. But in theory, you could request a succession of HTML documents, each with a different style attribute for the menu, hence seeing a sliding menu (on a very fast computer and connection, that is ). You could also do a calculator where you create a series of HTML documents, each with the answer for every possible math equation that exists. But it is a lot more efficient to use Javascript to do the calculations and put the results in an HTML template.

 

[phinds]

HTML is the end. Its role is to present information. Javascript (and CSS) can only help make more efficient the production of HTML documents.

OK, technically, you are correct and my statement was wrong, but as you point out, it would hardly make any sense to do with HTML some of the things that you can do with JavaScript, so saying that only HTML is needed is technically correct but VERY misleading.

 

[DaveC426913]

HTML is the end. Its role is to present information. Javascript (and CSS) can only help make more efficient the production of HTML documents. Whatever Javascript does, in the end, it builds or modifies an HTML document, which could have been «manually» written that way in the first place.

Here in the 21st century, interactive web design is required.

No interactive site of any sort worthy of 21st century can refresh the page every time a user rolls over a button.

What you are suggesting is tantamount to suggesting a mechanic could learn to build a modern car, using only a wood-fired steam boiler and an iron foundry. Technically, it's possible, but you will make a fool of yourself.

The OP wants to learn to build a website, not take a trip down a technology memory lane.

 

[DaveC426913]

...some browsers do not support it.

All browsers support Javascript. They just don't all support it exactly the same way.*
A required skill in website creation is cross-browser compatibility.

* Jack is correct that users can turn Javascript off. (But those users are essentially requesting a Stanley Steamer made of wrought iron.)

BTW, that's why "Vanilla JS" (as basic Javascript is nicked) is falling by the wayside. There are standard libraries that build on top of vanillaJS that will virtually eliminate cross-browser issues. (But not completely. Part of your job is to test across common browsers.) To be efficient, you will have to take advantage of these libraries.

 

[phinds]

... Part of your job is to test across common browsers ...

Oh, it can be a lot worse that just that. I had a web building team working for me several years back and the site had to be accessible for not just every browser but several of the most recent versions of every browser, and versions mattered since they differed in some details of implementation of HTML. My poor test guy spent his life testing the same damn web pages over and over on different browers and different versions of each of those browsers. We had to embed JavaScript into the HTML for each page so that it could detect what browser and what version it was running on and even that was non-trivial since some browsers and some versions were not very helpful in letting you figure out what they were and if you got it wrong, the page could have some messy presentations, with things showing up in the wrong place, wrong size, wrong whatever ...

 

[jack action]

Here in the 21st century, interactive web design is required.

No as much as people use it. Especially when it is done with Javascript (A lot can be done with CSS).

All browsers support Javascript.

Lynx doesn't.

The only thing you can assume is that all browsers support HTML.

Part of your job is to test across common browsers.

When you understand the concept of progressive enhancement, testing with all browsers becomes almost irrelevant.

A document written in HTML should be accessible in the same fashion to anyone who requests it, i.e. all users will get the exact same information just by reading the HTML. Most governments tend to go in that direction by applying accessibility policies, especially in the public sector.

This means that if you hide some information into an image, a script or CSS, your document is badly designed.

If, for aesthetic or practical reasons you wish to do so, you MUST have an HTML fallback to present the same information.

The misleading information that transpire from this thread is that somehow Javascript is the most important thing to learn if you want to make a web page. IMHO it is dead last on the list. Not saying it is unnecessary, just don't start with that.

Here what is my list of what one should master before attempting making a web page:

1. HTML5

If you master the HTML5 semantic, 75% of your work is done for writing a web page. Using the correct element (as opposed to using 'div' everywhere) will tell any user agent about the content of your document. As I said earlier, 'form' is the only interactive element of HTML and such, should be the base of any interactive feature of your web page (even if it is wrap inside a 'noscript' element).

2. Structured data

Structured data, especially Schema.org because it is the best effort from the community to standardize it, will complete HTML5 to indicate more precisely to search engines what is the content of your web page. What good does it do to offer a web page if nobody finds it?

I prefer the RDFa lite notation (because it is a natural extension of HTML), but I know JSON-LD is popular.

3. WAI-ARIA

If you've written your document with the correct HTML5 semantic, there won't be a lot to do here. Still, users with disabilities often need extra information to fully identify the content of the document. WAI-ARIA is an extension of HTML5 that offers this possibility.

4. CSS

CSS is for styling your document. It shouldn't bring any new information to the document (Like some do by putting critical information into the 'content' attribute of a pseudo-element like ':before' or ':after'). But as the CSS specifications evolve, you can do a lot of interactive action with CSS. And if you can do it with CSS, it should be the preferred way over scripting.

5. Javascript

Finally, there is scripting. When everything else's failed you or didn't satisfied your need (there are less and less of those possibilities as the specifications evolve), you rely on scripting, most probably Javascript. Just like CSS, it shouldn't bring new information to document.

By extension, using the JQuery library is often a plus for writing Javascript.

What I like to do is use Javascript to replace the 'noscript' elements with other elements containing the same information. This way, users with Javascript gets the 'upgraded' version and the other still gets the info (without the need to even bothering checking which browser sees what). The 'noscript' elements might contain unstyled data, but at least the information is accessible and user agents that access this content usually don't care about styling.

The only exception would be if you wrote an app in Javascript (or an other language) that is meant to be used as is on the client's computer (a game, for example).

Conclusion

The real test to determine if a web document is nicely designed is by reading the sent HTML document like you read a book. If it doesn't make sense to you, it's badly designed:

• If you can't 'see' an image because there is not a descriptive 'alt' attribute, it's bad;
• If you can't 'see' a menu because it is not wrap into a 'nav' element, it's bad;
• If you see a 'div' without a 'role' attribute, it's bad;
• If you don't see any 'typeof' and 'property' attributes in your document (i.e. structured data), it's most likely bad;
• If you have Javascript that will alter the document with new information (or no reference to it with a link or a form in a scriptless format), it's really really bad.

 

[phinds]

When you understand the concept of progressive enhancement, testing with all browsers becomes almost irrelevant.

Since I haven't been active in web page work for years I can't say for sure about today, but I guarantee you that 10 years ago that statement would have been just silly.

 

[DaveC426913]

Lynx doesn't.

As I said, designing cars for users who own Stanley Steamers might not get the OP a lot of jobs in the 21st century.

The only thing you can assume is that all browsers support HTML.

You can definitely assume that no company you work for in the 21st century will require compatibility with Lynx.The rest of your post is technically correct, I'm just not sure how helpful it will be to the OP at this stage in his learning. As with the issue of browsers that predate the www, I'm not sure it's a good indicator of what the learning priorities might be for the OP.

 

[DaveC426913]

Finally, there is scripting. When everything else's failed you or didn't satisfied your need (there are less and less of those possibilities as the specifications evolve), you rely on scripting, most probably Javascript. Just like CSS, it shouldn't bring new information to document.

This is outdated thinking. Many applications today are SPAs (single page applications) with a high degree of interactivity. It would be folly to send an HTML document everytime the user wanted to sort their table of data.

One reason why this would be folly is that it's not scalable. You would rapidly overload your data servers with tens of thousands of hits requesting entire documents that are virtually identical. Not to mention no user these days will tolerate a one or two seocnd delay that refreshes their page.

This idea of HTML-only web interaction is very bad practical design.

 

[DaveC426913]

After doing some research I came to the conclusion that JavaScript is the best language to learn for web design.

kolleamm, it might be a good time to tell us why you want to learn web design. Do you want to use it to earn a living?

There is a difference between theoretical and practical knowledge, between being correct and being productive.

 

[jack action]

It would be folly to send an HTML document everytime the user wanted to sort their table of data.

There is a difference between:

1) sending ALL relevant data on a single web page (structure) and use Javascript to sort it out at the client's will, on his/her machine (interactivity)

and:

2) fetching data at the client's will with AJAX which build a different web page on every request.

In the second case, you web page is unclassifiable. This can only be usable for personal communications, i.e. social media, or for displaying the results on a search page.

If you used that method with PF, the site popularity would go down quickly as search engines wouldn't be able to link people searches to info found on this site. Also, good luck trying to make an accessible page for everyone with that way of thinking.

This idea of HTML-only web interaction is very bad practical design.

I never said only, I said must be available by default because it is the only method guaranteed to work with every user agent.

You would rapidly overload your data servers with tens of thousands of hits requesting entire documents that are virtually identical.

Thus the importance of structured data. A website should be a set of indexes (which not many knows how to properly build) that points quickly to the info a person is looking for. This way, any web page is very small and contains only pertinent information. But it is an art to build proper indexes and internal links (Not just making a useless sitemap on a single page). Now we are not even discussing well structured web pages, but well structured websites. This blog and this blog explain really well the basis of good website structure. The following info is particularly relevant to this thread:

3.[/PLAIN] Create your site navigation in HTML or CSS.
When you create your navigation, keep the coding simple. HTML and CSS are your safest approach. Coding in JavaScript, Flash, and Ajax will limit the crawler’s ability to cover your site’s well-thought out navigation and hierarchy.

Links[/PLAIN] in Submission-Required Forms

Forms can include elements as basic as a drop–down menu or elements as complex as a full–blown survey. In either case, search spiders will not attempt to "submit" forms and thus, any content or links that would be accessible via a form are invisible to the engines.

Links Only Accessible Through Internal Search Boxes

Spiders will not attempt to perform searches to find content, and thus, it's estimated that millions of pages are hidden behind completely inaccessible internal search box walls.

Links in Un-Parseable Javascript

Links built using Javascript may either be uncrawlable or devalued in weight depending on their implementation. For this reason, it is recommended that standard HTML links should be used instead of Javascript based links on any page where search engine referred traffic is important.

Links in Flash, Java, or Other Plug-Ins

Any links embedded inside Flash, Java applets, and other plug-ins are usually inaccessible to search engines.

I'm not opposing well structured documents with interactivity. I'm just saying that you must master the first one before the second. Interactivity is useless if you have nothing to show. If you write a book, you should learn how to structure sentences, paragraphs, chapters, page numbering and indexes (i.e. structure) before thinking of offering a little wet sponge to help the reader turning the pages (interactivity).

On a personal note, I'm also tired of these websites that send me pages filled with Javascript and that deploys their web pages on my computer. These web developers (who probably know only Javascript and think it is the end of all means) think that because they sent me their files fast, that I don't mind waiting for Javascript to insert all kind of widgets that change my page layout for seconds after the page is loaded. It's more annoying than waiting for a download. I finally gave up and install Adblock Plus, not to get rid of the ads that did not bother me at all, but to limits those annoying scripts that are changing my page layout as I begun reading or - worst - just before I click on a link (hitting another one ). I don't care if this is the practice du jour in web development, it is really really bad, it won't last and if people bother learning proper techniques, things would be easier on all of us (search engines, people with disabilities, poor people with slow computers, far away people with slow connections and, in the end, the average joe as well).

I also live in the 21st century and I say: «Death to coolness»

That felt good!

 

[JorisL]

If you used that method with PF, the site popularity would go down quickly as search engines wouldn't be able to link people searches to info found on this site. Also, good luck trying to make an accessible page for everyone with that way of thinking.

That's becoming less relevant as search engines like google now are able to index these pages as well. Accessibility is another story though.
With regards to progressive enhancement, sometimes the term graceful degradation is used interchangeably.

In my opinion they lead to the same result if done right.

 

[DaveC426913]

Yeah, I think we are overwhelming the OP with advanced web design theory.

The top three hard skills he'll need to learn to build a modern 21st century site are:
HTML, CSS, Javascript.

 

[DaveC426913]

In the second case, you web page is unclassifiable. This can only be usable for personal communications, i.e. social media, or for displaying the results on a search page.

This is presuming clients care about SEO. I can't remember the last time I built a website where the clients asked for any kind of search optimization. Certainly not since the close of the last millenium.

Public-facing sites that want public attention are only one facet of a large set of applications that fall under web design. SEO is a thing unto itself, and definitely on the 'next steps' list of learning.

 

[kolleamm]

kolleamm, it might be a good time to tell us why you want to learn web design. Do you want to use it to earn a living?

There is a difference between theoretical and practical knowledge, between being correct and being productive.

I would very much like to make a living designing/programming websites. So far I've been able to understand the basics of HTML and CSS, and maybe a little Javascript.
I have a good understanding of C++,C#, and Java, however web development appears to be an entirely different beast.
I really want to learn the right things in the right order for this so that I use my time efficiently.
Since I first started this thread I do understand though that the foundation for web pages is html, with Javascript using the forms in the HTML to make it interactive.

 

[jack action]

Since I first started this thread I do understand though that the foundation for web pages is html, with Javascript using the forms in the HTML to make it interactive.

That is not what I said. To make a website interactive with HTML alone, the only way is with forms. And the only thing you can be sure of is that ALL user agent understand HTML.

That being said, MOST of the user agents in used today understand Javascript and Javascript offers a brand new world of tools for interactivity (even without forms). You could do the same thing with HTML alone by requesting a new HTML document every time a user needs to interact with your website, although for some possibilities Javascript offer, it would make your website completely inefficient and unusable.

I have a good understanding of C++,C#, and Java, however web development appears to be an entirely different beast.

On the server-side you build HTML documents with PHP, Python and the like, which are much closer to the programs you already know. But there is a trend to use Javascript frameworks on server-side now.