[kwlug-disc] Learning Javascript

Sun Mar 14 05:19:58 EDT 2021

Some thoughts from a non-expert.

On Sat, Mar 13, 2021 at 01:12:16PM -0500, Paul Nijjar via kwlug-disc wrote:
> - How does JavaScript want me to think?

If you're talking about the browser, think Document Object Model (DOM),
and the events that trigger from it.  Javascript runs single-threaded.

The initial DOM is created from the HTML file.

The javascript within that HTML file, or included from it, can update
the DOM programmatically.  The DOM itself can have events that link
back into the code, such as onclick="" attributes in the HTML
which call javascript functions on user input.

Example of non-event style javascript:

	<!DOCTYPE html>
	<html> <head> <meta charset="utf-8"> </head>
	<body> </body>
	<script>

	function print(msg) {
	        document.write("<p><b>Print:</b> " + msg + "</p>");
	}

	print("Hello world");

	</script>
	</html>

Here, the DOM starts with a blank body.  The embedded javascript defines
a print() function.  Then calls it once, which updates the body
with more HTML elements, such as <p>, <b>, etc.  You'll see the
end result if you use your browser's Inspect feature.

You can use javascript to search the DOM, add, edit, and remove
elements of the webpage on the fly, or as a result of events.
The webpage becomes a dynamic, interactive UI this way.

Rob Gilson said: "Don't learn jQuery if you can avoid it."  I think
you won't be able to avoid it in the long run, but in my opinion,
the reason to avoid jQuery is that it will usually invert the
framework way of thinking.

Frameworks abstract the heavy lifting of DOM updates.  They do an
amazing job of it, with techniques that are not immediately obvious.
Without them, you either use vanilla javascript to manipulate the
DOM using C-like code, or you use jQuery which introduces its
own mechanisms to speed up such manipulations.  But either way,
you're still in the mode of a programmer poking and peeking at the
DOM and trying to keep the whole thing organized manually.
Frameworks break you out of that mode.

For example:

1) Vanilla HTML:
	<p id="status"></p>
	<button id="save-btn">Save</button>

2) Vanilla javascript:
	JS:
	// attach a handler for the button, so when clicked, it updates
	// the status field
	document.getElementById('save-btn').onclick = function onSave() {
		document.getElementById('status').innerHTML = "Saving...";
		...
	}

3) jQuery:
	JS:
	// same thing, using jQuery
	$("#save-btn").click(function() {
		$("#status").html("Saving...");
		...
	})

As you can see, jQuery is basically syntactic sugar overtop of
what you would normally write in vanilla javascript.  But it doesn't
give you a structure to work with.

A framework would encourage you to put different screens
in different files, and make entire sections of your screen potentially
reusable.  It would also give you special variables that once
they are bound to UI elements, they update themselves, so there's no
manual get/set labour.  It would also give you a way to manage
dependencies between javascript modules, similar to how Python
supports import, so you can reuse entire modules, and start treating
them like classes or singletons.

It's good to play with vanilla javascript a bit to get the hang of it,
in my opinion, but don't wait too long before trying out a framework.

> Some overview articles would be good to start, followed by some
> hands-on tutorials that illustrate language features step by step. I
> do not think I want to commit to some six month course right now, but
> if you know of good ones then pass them along. 

All I have to share right now is my own personal notes on javascript
prototypes and inheritance.  It is very complex, but it *is* step by step.
Not really beginner friendly tho, so maybe save it for later.  It does
show how to arrange an HTML file for programmatic JS experiments.

To use it, load file:///tmp/jsproto.html in your browser,
then read the source at each step to understand what it does.

- Chris

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://kwlug.org/pipermail/kwlug-disc_kwlug.org/attachments/20210314/c52f2705/attachment.html>