<h1class="episodetitle">JavaScript: A Brief Introduction</h1>
</div>
<article>
<h2class="sectiontitle">JavaScript: First Contact</h2>
<p>JavaScript is probably the most important tool for web development at the moment, but it is a rapidly evolving field, so keeping up to date with modern JavaScript and JavaScript tooling is very important.</p>
<p>The course is based on a top down approach which begins by taking an overview of JS and then breaking it down into smaller chunks to figure out how it works.</p>
<p>JavaScript itself is the basis for a lot of frameworks and other tools such as JSX (an extension of JavaScript used in React), so in learning JavaScript, you should then be able to pick up these other topics fairly quickly and you should be able to make sense of things like JSX, even if you are not familiar with either it or React.</p>
<h2class="sectiontitle">Navigating the JS Landscape</h2>
<p>There are a lot of technologies currently associated with JavaScript and I will list some of them here.</p>
<preclass="inset">
• vanilla JS - this is just basic JavaScript
• ECMA Script - this is the specification for JavaScript, web browsers implement JavaScript and they do so in such a way that it does what the specification says that it should. Versions include ES6, ES2015, ES2017 and ES2020.
• Typescript - this is an extended version of JavaScript and it is used a lot in JavaScript frameworks. Other examples of this include CoffeeScript.
• React (or ReactJS) - this is a JavaScript framework, the technology behind most modern web apps.
• Babel - a transpiler used to convert ECMAScript Code to backwards compatible JavaScript.
• npm - a JavaScript package manager for node.js.
• WebPack - a module bundler, mainly used to bundle JavaScript files to be used in a web browser.
• Grunt - a build task manager built on top of node, similar to Ant in Java.
• Gulp - a task runner that allows you to automate many development tasks.
• React - a JavaScript framework for building user interfaces.
• Angular - a platform and framework for building single-page applications using HTML and Typescript, Angular was written in Typescript.
• Vue - an MVM front end JavaScript framework for building user interfaces and single page applications.
• node - a runtime environment that allows JavaScript to execute outside of a browser.</pre>
<p>All of these technologies are based on JavaScript, so learning JavaScript will give you a good foundation for learning them.</p>
<h2class="inset">Tools for Working with JavaScript</h2>
<p>For testing purposes, it is a good idea to have a number of browsers for testing purposes. As well as the browsers I already have installed which are Firefox, Chrome, Edge and Internet Explorer, I have also installed a few additional browsers.</p>
<preclass="inset">
• Brave
• Vivaldi
• Opera
• Maxthon</pre>
<p>As a development environment, I primarily use Dreamweaver, but Visual Studio Code is also quite commonly used in JavaScript Development so it is probably worthwhile to learn it. I don't really need a live server in the code editor since I can easily copy files over to my web server for testing, but again, it's a handy tool, so we will look at the process for adding it to VS Code. In Visual Code, click on the Extensions icon on the left edge of VS (it looks like 4 squares with one detached), then search for Live Server. This should appear first in the search results and you just need to click on the Install button and that's it done.</p>
<p>Back in VS, notice that there is a blue bar along the bottom of the screen and on the right end of that you should see the words 'Go Live'. If you click, this will open a browser with your project or file displayed in it as if you were viewing it on the Internet.</p>
<p>For the purpose of this course, I have copied all of the exercises into a folder called Essential Training in my code folder. In VS, I can then go to File and select Open Folder and that gives me easy access to all these files. For instance, I can select one of the individual exercise folders in the left-hand pane, open up an HTML file and click Go Live to see that HTML document in a browser.</p>
<h2class="sectiontitle">Linting and Formatting</h2>
<p>The code editor has some useful tools to help edit code, including syntax highlighting and auto-completion. There are other tools you can add and we will do that by adding the extensions ESLint and Prettier. ESLint will check your code for conventions and standards and will make sure you are following them. Prettier will make your code look a little nicer by ensuring that you have the correct indentation and so on. Both of these can help to ensure that your code is consistent and where applicable, that it adheres to any pre-defined standards which may be applied in a professional environment.</p>
<p>In order for these to work, we will need to install some dependencies with node. Node isn't usually installed by default on a Windows machine but I have installed it previously. We can install these from the terminal in Visual Code which can be accessed via the View menu or by pressing Control and the back-tick character ('). We want to install these for the exercise files so we need to open the folder containing them so that we have the individual exercise folders on the left hand side and then type</p>
<preclass="inset">npm install</pre>
<p>in the terminal. When I did this, I saw several warnings so it may be helpful to run</p>
<preclass="inset">npm init</pre>
<p>first. I believe this generates the package.json file and you can run it with the -y option to reduce the number of interventions required. On my system, when I tested this I am definitely seeing prettier work but I'm not so sure about ESLint. Certainly, I am seeing the code being tidied up when I click save but I can't see any evidence of error correction.</p>
<p>Actually, I think the problem was that I was using the exercise files from the deprecated version of the course. The exercise files on GitHub are the correct files and they include a package.json file as shown below</p>
"description": "Repository for exercise files used in the LinkedIn Learning course `JavaScript Essential Training` instructed by Morten Rand-Hendriksen and published 2020.",
"main": "index.html",
"author": "Morten Rand-Hendriksen",
"license": "SEE LICENSE IN LICENSE",
"devDependencies": {
"eslint": "^7.11.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"prettier": "^2.1.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": []
}</pre>
<p>From this, I assume that the package.json file lists the dependencies and is used by npm to determine what packages need to be installed so I guess that its been set up in advance to install the dependencies for ESLint and Prettier for the purposes of this course. For now, I mention it as a matter of interest only. The subject would likely be covered in more detail in a course on React or Node.</p>
<h2class="sectiontitle">Get to Know the Browser Console</h2>
<p>With HTML and particularly with CSS, we can experiment with the code in the browser developer tools and see the effect straight away without changing the actual code files. We can do the same with JavaScript by using the console. To give an example of this, we can open up the HTML file for exercise 05_01 in a browser (using the live server in VS). This is a very simple HTML page but it is displaying the data by making use of an object in JavaScript. If we open up the console, we can type in the following and hit enter.</p>
<preclass="inset">backpack</pre>
<p>You might notice that the name is being recognised in the console so we don't have to type in the whole thing. We get the following returned</p>
newStrapLength: function newStrapLength(lengthLeft, lengthRight)
arguments: null
caller: null
length: 2
name: "newStrapLength"
prototype: Object { … }
constructor: function newStrapLength(lengthLeft, lengthRight)
<prototype>: Object { … }
<prototype>: function ()
pocketNum: 15
strapLength: Object { left: 26, right: 26 }
left: 26
right: 26
<prototype>: Object { … }
toggleLid: function toggleLid(lidStatus)
arguments: null
caller: null
length: 1
name: "toggleLid"
prototype: Object { … }
<prototype>: function ()
volume: 30
<prototype>: Object { … }
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
__proto__:
constructor: function Object()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
propertyIsEnumerable: function propertyIsEnumerable()
toLocaleString: function toLocaleString()
toString: function toString()
valueOf: function valueOf()
<get __proto__()>: function __proto__()
<set __proto__()>: function __proto__()</pre>
<p>This is a JavaScript object and we can tell something about the JS code by looking at this, such as what its attributes are, what methods it can respond to and so on. For instance, we can see that there is a togglelid function. If we type</p>
<p>so that suggests that the function takes an argument which is the status of the lid. If we provide the function with a status of open, like this</p>
<preclass="inset">backpack.togglelid(open)</pre>
<p>and press return, we see a message telling us that the lid status has changed and we can also see that the top lid shows as open in the HTML, previously it had shown a value of closed. We can also see that if we inspect the backback object again. You might notice in the object data shown above that this shows</p>
<preclass="ins">lidOpen: false</pre>
<p>As an experiment, I tried to pass it a status that I thought might not be valid</p>
<p>and this does in fact generate an uncaught reference error reporting that broken is not defined. The important point, however, is that we have been able to learn something about the backpack object and its methods without looking at the JavaScript code. The fact that lidopen shows a boolean value implies that it can only have two values so presumably passing it open as an argument causes this value to be set to true and closed would set it to false. By experimenting, I can see that we can also pass it a value of either true or false and that works as well.</p>
<p>As a matter of interest, the JS code for this function is</p>
<preclass="inset">
toggleLid: function (lidStatus) {
this.lidOpen = lidStatus;
updateBackpack(`Lid status changed.`);
},</pre>
<p>I don't fully understand the code. It does seem simple enough, it is accepting a lidstatus value and setting the value of lidopen to whatever that status is. The lidopen variable has a boolean value - that is, it was given a value of false and JavaScript usually infers the variable type so it would create lidopen as a boolean variable. The function then updates the value of backpack. I'm not quite clear on how it translates a status of open to true and closed to false, although it does make sense, logically speaking.</p>
<p>In any case, the main point of this section is to become familiar with the console and to be aware of the fact that we can use it for debugging purposes, hopefully the JavaScript will become a little bit clearer in time!</p>
<h2class="sectiontitle">JavaScript Language Basics</h2>
<p>JavaScript is interpreted from top to bottom so it is very important to define your variables and functions (or whatever) before you use them so you know that the browser is going to recognise it when you call it.</p>
<p>You can add Java-like comments to your code, so that is line or inline comments that start with two forward slash characters and block comments that start with /* and end with */. There are examples of both of these in the JavaScript file for exercise 01_05. VS Code has a pretty cool feature that allows you to add a verbose comment. To see how this works, we want to find this line in the JavaScript code</p>
<p>which should be on line 10. We want to place the cursor in the line before that (which would be line 9 but instead I have pressed enter first to move everything below line 9 down a line to make space so that I can add a comment and still have a blank line between it and the comment above it.</p>
<p>The blank line before the function is now on line 10 and we want to type</p>
<preclass="inset">/**</pre>
<p>and press return and we see the following comment appear.</p>
<preclass="inset">
/**
*
* @param {*} update
*/</pre>
<p>This auto-generated comment recognises the fact that the function takes one argument and we can replace the asterisk in the curly braces with the argument type which is string. We can add a little more info such as the function name and its output (which is HTML) so the comment would look like this.</p>
<preclass="inset">
/**
* function updateBackpack()
* outputs HTML
* @param {string} update
*/</pre>
<p>It may be worth pointing out here that most of these asterisks are just for readability purposes. Everything between the opening /* and the closing */ is going to be ignored by the browser so it wouldn't make any difference to the browser if the comment was any less structured. For a human reader, they can easily read this comment and see that the function updateBackpack outputs some HTML and accepts a single string argument.</p>
<p>As with most programming languages, comments are often used for debugging purposes in JavaScript by commenting out lines or blocks of code. For example, if you think that some bit of code is breaking things, you could comment it out and then see how the code runs so this can be useful for detecting errors. You should be careful with this though. For example, if you comment out a function or variable definition that is called elsewhere in the code, you may cause more errors but it can be a useful technique if applied correctly. This is easy to do in Visual Studio Code, you just need to select the line or lines of code in the IDE and press control and forward slash and that will comment out the selected line(s). Actually, it would be more accurate to say that it acts as a toggle so it will comment out the code assuming it is not already commented out. If it is, it will remove the comment, thereby enabling the code.</p>
<p>Some aspects of JavaScript are conventional such as using white space, indenting blocks of code, using either spaces or tabs for the indenatation, putting a semi-colon at the end of variable declarations. That is, the browser doesn't care about these things and they won't affect how the code runs. They just happen to make the code easier for humans to read and there is usually a good reason for these conventions existing so it is best to follow them. However, this is made easier if you are using prettier which will enforce many of these standard for you. In general, I think that these standards are normally second-nature once you have done a significant amount of coding and in any case, they are often enforced by the IDE (which will automatically indent code, for example) so it is easier to follow the convention than not to.</p>
<p>In some cases, there are competing standards. For example, you can enclose strings in single or double quotes and again, the browser doesn't care which are used, but you may be following a standard that dictates that you use one or the other.</p>
<p>The main point is that whatever standards you are following, these should be applied conistently and it is helpful to use tools like ESLint and prettifier to ensure that happens.</p>
<p>I mentioned before that the course takes a top down approach to teaching JavaScript, starting out with more advanced topics and then adding the details in later. This approach is designed to give you a context so that when you do learn about the finer details, you know where these fit in to JavaScript as a whole and I think that this is a good idea because JavaScript can be such a wide-ranging subject that it is often hard to understand the relevance of some of these finer details until you have seen where they fit in the bigger picture.</p>
<p>The course also includes a number of practice assignments which should be really useful for getting some real-world experience in the subject. It also includes plenty of links to the MDN Web Docs to help you become accustomed to looking these up as part of the development process.</p>
