Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Javascript Compatibilty issue

  1. Dec 26, 2016 #1
    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
     
  2. jcsd
  3. Dec 26, 2016 #2

    phinds

    User Avatar
    Gold Member
    2016 Award

    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.
     
  4. Dec 26, 2016 #3
    Unless you count languages that are compiled1 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 responsiveness2 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).

    1: Transpiled is used as well, I think it's more appropriate in most cases. TypeScript comes to mind (javascript with statically typed variables)
    2: 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.
     
  5. Dec 26, 2016 #4

    phinds

    User Avatar
    Gold Member
    2016 Award

    People who use PHP are going to be very surprised to hear that.
     
  6. Dec 26, 2016 #5
    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?
     
  7. Dec 26, 2016 #6

    phinds

    User Avatar
    Gold Member
    2016 Award

    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.
     
  8. Dec 26, 2016 #7
    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.
     
  9. Dec 26, 2016 #8

    jack action

    User Avatar
    Science Advisor
    Gold Member

    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.
     
  10. Dec 26, 2016 #9

    phinds

    User Avatar
    Gold Member
    2016 Award

    If that were true there would never have been any need for JavaScript. HTML can NOT do what JavaScript can do.
     
  11. Dec 26, 2016 #10

    phinds

    User Avatar
    Gold Member
    2016 Award

    Fair enough.
     
  12. Dec 26, 2016 #11

    jack action

    User Avatar
    Science Advisor
    Gold Member

    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 o0)). 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.
     
  13. Dec 26, 2016 #12

    phinds

    User Avatar
    Gold Member
    2016 Award

    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.
     
  14. Dec 26, 2016 #13

    DaveC426913

    User Avatar
    Gold Member

    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. :cool:
     
    Last edited: Dec 26, 2016
  15. Dec 26, 2016 #14

    DaveC426913

    User Avatar
    Gold Member

    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.
     
    Last edited: Dec 26, 2016
  16. Dec 27, 2016 #15

    phinds

    User Avatar
    Gold Member
    2016 Award

    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 ...
     
    Last edited: Dec 27, 2016
  17. Dec 27, 2016 #16

    jack action

    User Avatar
    Science Advisor
    Gold Member

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

    The only thing you can assume is that all browsers support HTML.
    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.
     
  18. Dec 27, 2016 #17

    phinds

    User Avatar
    Gold Member
    2016 Award

    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.
     
  19. Dec 27, 2016 #18

    DaveC426913

    User Avatar
    Gold Member

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

    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.
     
  20. Dec 27, 2016 #19

    DaveC426913

    User Avatar
    Gold Member

    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.
     
    Last edited: Dec 27, 2016
  21. Dec 27, 2016 #20

    DaveC426913

    User Avatar
    Gold Member

    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.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted



Similar Discussions: Javascript Compatibilty issue
  1. Javascript Help (Replies: 4)

  2. Frontpage JavaScript (Replies: 3)

  3. Javascript problem (Replies: 6)

Loading...