1. Never put script elements in the body, they belong as children elements of the head element.
2. Use defer="true" to emulate what everyone who doesn't understand the first point are complaining about.
3. You need to define the media type of JavaScript so use
<script defer="true" type="application/javascript">.
4. You need to escape CDATA in script elements especially if you want to really learn code.
5. Use a Gecko browser (e.g. Waterfox Classic or Firefox) and save your file as test.xhtml. That will force the page to use the XML parser which is stricter. If you learn strict code you'll learn a ton more that you wouldn't using the lazy and wildly irresponsibly tolerant HTML parser plus strict mode will tell you what you did wrong while relaxed modes won't tell you that your yard is covered with drug addicts. Also using the XML parser does not mean you're not or can't use HTML5 which is not a
parser, it's a
language.
6. Don't splatter
addEventListener everywhere in your code. People will advocate that you use it religiously though from the experience vantage of someone who has built an entire web platform from scratch using no third party code: event handlers are an absolute mess - so! It is up to you to organize them properly. Either use an XML/HTML attribute such as
onclick="my_function(parameter_1, parameter_2);" in the XML/HTML or in a global event handler once you're repeatedly doing something.
7. Don't use
camelCase, that should be reserved for standards bodies, "experienced" people who use it will find themselves completely buried in pointless maintenance so avoid using camelCase at all costs to save yourself tons of pointless wasted time.
8. When you want to manipulate the DOM (Document Object Model) you need to understand Element specific functions. In example
element.getAttribute('attribute'); and
element.setAttribute('attribute','value');. Keep in mind that
element.href will return an absolute URL where as
element.getAttribute('href') will get the actual value of that element. When using
setAttribute it will overwrite the existing attribute if it already exists.
9. Absolutely never use
innerHTML as it's not only a proprietary (and Microsoft specific) piece of code it also isn't reliable and I'm just not going to go in to registering of ids, what browser engines are, etc. You'll want to use the read/write property
textContent instead. I'll include an XML function to add code to the DOM.
10. Research how the base element is combined with relative URLs from links to form absolute URLs for browser and search engines. #hiddenmagic
11. Keep HTML attributes defined in alphabetical order and look up Advanced Find and Replace. #XP
12. Do not use single words, especially generic words like 'button' as browsers will literally confuse button elements with a button
object and your code will have you hating the week especially this early on. Use at minimum two words and use underscores to separate those words. In example function names I use would be
admin_post_cms_create: the module/section, the action (HTTP POST method), the primary functionality (CMS) and the specific functionality (creating a page). It might look a little long-winded but you'll be
very non-aware of the wasted time that wasn't wasted on low XP mistakes.
There are tons of other things but if you avoid third party code like libraries and frameworks and really push you'll be able to do amazing things that other people, even those who make six figures a year, are not only incapable of doing though are clueless to even the possibilities. We all only get one short life: make it count! Good luck!
John
example.xhtml, save using Notepad++ to avoid M$ adding BOM (Byte Order Mark).
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Page Title</title>
<base href="" />
<script defer="true" type="application/javascript">
//<![CDATA[
var oop = {};//Define any globals you need at the top of your code.
//Your custom functions AFTER globals and BEFORE global even handlers such as window.onclick.
function id_(id)
{
var r = false;
if (typeof id != 'string') {console.log('Error: id parameter is not a string.');}
else if (id.length == 0) {console.log('Error: id parameter is zero length.');}
else if (document.getElementById(id)) {r = document.getElementById(id);}
return r;
}
window.onclick = function(event)
{
console.log(event);//Explore object structure in browser developer tools.
console.log(event.target);
id_('link_1').setAttribute('href', 'https://www.duckduckgo.com/');
}
document.addEventListener('DOMContentLoaded', function (e) {oop.onload = true; window_onload(e);},false);//Faster than window.onload
window.onload = function(e) {if (!oop.onload) {window_onload(e);}}//For browsers that do not support DOMContentLoaded.
//]]>
</script>
</head>
<body>
<h1>Never have more than a single h1 per page</h1>
<main>Menus should be at the bottom of the code and content at the top, adjust layout using CSS.</main>
<p>An <a id="link_1" href="https://www.example.com/">example link</a>.</p>
<nav><ul></ul></nav>
</body>
</html>
