User talk:The Transhumanist/hdedit.js
- This is an auxiliary support page for the script hdedit.js which is by User:The Evil IP address. This page's purpose is to provide alternative documentation, especially about the source code itself. Please post discussion threads below the section titled Discussions. Thank you. By the way, the various scripts I have written or developed are listed at the bottom of the page.[1]
- The script version covered by this page is https://wiki.riteme.site/w/index.php?title=User:The_Evil_IP_address/hdedit.js&oldid=809009432, and has been provided on the adjoining user page for convenience.
hdedit.js is a user script by User:The Evil IP address. This page is an attempt to explain that script, so that the reader (including me) can understand what it does and how it does it.
Script's workshop
[edit]- This is the work area for developing documentation about the script. The talk page portion of this page starts at #Discussions, below.
Description / instruction manual for hdedit.js
[edit]hdedit.js is a user script. Once installed and the user is logged in, it allows the user to click on a heading while viewing a Wikipedia page. That action brings forth a little edit box with the heading in it for the user to edit. There are buttons provided to save or cancel.
How to install the script
[edit]To install the script, add this line to your common.js or your vector.js page:
importScript("User:The Evil IP address/hdedit.js");
Save the page and bypass your cache to make sure the changes take effect. By the way, only logged-in users can install scripts.
Explanatory notes (source code walk-through)
[edit]This section explains the source code, in detail.
The source code looks like Greek to me, even though I've written several user scripts. And so, below, I shall pick apart the script statement-by-statement and expression-by-expression, explaining them as I go.
My intention is threefold:
- to thoroughly document the script so that even relatively new JavaScript beginners can understand what it means and what each piece of it does.
- to refresh my memory of exactly how the script works, in case I don't look at the source code for weeks or months.
- to facilitate understanding of the underlying programming conventions used in the script, for skill improvement. Once learned, they can be used again and again elsewhere. Therefore, the explanatory notes include examples, and links to relevant documentation pages, tutorials, etc.
In addition to plain vanilla JavaScript code, the script relies heavily on the jQuery library.
General approach
[edit]The script uses the <form>, <input>, and <button> HTML elements to create an on-the-fly editor for headings.
More specifically, starting at the beginning...
What's missing? And why...
[edit]Note that the script does not include a ready() event listener/handler (which makes the script wait until the DOM is loaded into the browser). That's because it doesn't need one. The script works on headings, and the user can't click on one until it is displayed, and so the script is forced to wait by default.
The script also does not include a bodyguard function to protect its aliases. The script uses two aliases: "$" and "mw" (more about those below).
window.hdedit =
[edit]var
[edit]This is the reserved word var, which is used to declare variables. A variable is a container you can put a value in. To declare the variable portletlink, write this:
var portletlink
A declared variable has no value, until you assign it one, such as like this:
portletlink = "yo mama";
You can combine declaration and assignment in the same statement, like this:
var portletlink = mw.util.addPortletLink('p-tb', '#', 'Remove red links');
Caveat: if you assign a value to a variable that does not exist, the variable will be created automatically. If it is created outside of a function, it will have global scope. For user scripts used on Wikipedia, having a variable of global scope means the variable may affect other scripts that are running, as the scripts are technically part of the same program, being called via import from a .js page (.js pages are programs). So, be careful. Here are some scope-related resources:
Task list
[edit]Bug reports
[edit]Desired features
[edit]Script dependencies
[edit]Discussions
[edit]- This is where the actual talk page starts. Please post your discussion threads below...