RT Cunningham

Plain JavaScript vs. Every JavaScript Library Out There

plain JavaScript You don’t need a sledgehammer to kill a fly, or something like that. You don’t need a huge JavaScript library like jQuery to use a few functions. Plain JavaScript, also called vanilla JavaScript, will sometimes do the trick quite nicely.

I dislike using jQuery in my projects because I rarely use more than a few functions. Of course, my projects tend to be simpler than most because programming is merely a hobby for me.

A Sidebar in Plain JavaScript

I spent a lot of wasted hours looking for an off-canvas sidebar that would work on all devices. Instead of a canvas, all I really had to do was think about the width of the sidebar.

Here’s a simple navigation menu using my own website as an example:

<div id="sidemenu">
<span id="btn-menu-close" onclick="CloseMenu()"><i class="fa fa-times fa-lg" aria-hidden="true"></i></span>
<ul id="menu">
<li><a href="https://www.rtcx.net/">Home</a></li>
<li><a href="https://www.rtcx.net/contact">Contact</a></li>
<li><a href="https://www.rtcx.net/article-list">Article List</a></li>
<li><a href="https://www.rtcx.net/all-categories-list">Category List</a></li>
</ul>
</div>

The width is initially set to 0 for mobile devices in the stylesheet, which is in the head of the document in my case. A click invokes a JavaScript function to make it wider and then another click makes it 0 again:

function OpenMenu() {
document.getElementById("sidemenu").style.width = "250px";
}
function CloseMenu() {
document.getElementById("sidemenu").style.width = "0";
}

Plain JavaScript for Password Visibility

You don’t want someone looking over your shoulder and seeing a password in plain sight. I use this plain JavaScript routine with my homegrown CMS. You can click on a link to make the password visible or hidden. I use it for logging in as well as changing passwords:

<input type="checkbox" onclick="ShowHidePw()"> Show Password

function ShowHidePw() {
var x = document.getElementById("password");
var y = document.getElementById("password2");
if (x.type === "password") {
x.type = "text";
y.type = "text";
} else {
x.type = "password";
y.type = "password";
}
}

Plain JavaScript for HTML Link Targets

Web developers and wannabe web developers tend to argue over link targets. One camp says external links should open in another tab or window. The other camp says leave the links alone. I look at it this way: Most web browser users are naive about the link functions. They don’t know they can open a link in a new tab using the context menu.

Causing external links to open in new tabs or windows means the original page remains in one window or tab. I would hate to click a few references and then have to find my way back like I did in the old days. The really old days, before web browser tabs existed.

Contrary to popular belief, HTML5 supports the link target attribute. Well, at least according to the browsing context in the HTML 5.3 W3C Working Draft of 18 October 2018. It’s the latest draft. Perhaps the target attribute was deprecated in an earlier draft. Nevertheless, some sources need to update their information. Yes, I’m looking at you, W3Schools.

Instead of including target=”_blank” in every external link, it’s much easier to manipulate all the external links on a page at the same time. You can easily remove it just in case it becomes a no-no in the future or something:

for (var c = document.getElementsByTagName("a"), a = 0; a < c.length;a++) {
  var b = c[a];
  b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank")
}

The best place to include it is in the foot of the page, after all the other JavaScript routines have finished. It does not need to be wrapped in a function.

More Plain JavaScript

There’s a website called Vanilla JS and it’s more tongue-in-cheek than you might expect. When it talks about their team and their framework, they’re really talking about the JavaScript code that comes with almost every web browser out there.

I mean, if you want to get the contents of an element ID, you can’t get any simpler than this:

document.getElementById('test-table'); 

In fact, some plain JavaScript routines are shorter than their JavaScript library counterparts.

Share:    

RT Cunningham
January 11, 2019 3:21 pm
Web Development