import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu } from '/scripts/import.js';
import { local_menu } from '/scripts/webdev.js';

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("Learning the JavaScript Language"));
heading.append(addParagraph("Joe Chellman - LinkedIn Learning - May 2023"));
heading.append(addParagraph("Getting Started"));

main.append(addHeader("Using node to Run JavaScript"));
main.append(addParagraph("There are a few ways in which you can execute some JavaScript code including by running it in a browser.  For instance, this website mostly consists of web pages with almost no HTML and where the individual pages are created using JavaScript."));
main.append(addParagraph("That means that I will generally test the JavaScript by loading a page and seeing if there are any errors being generated.  It's usually pretty clear if there are because the web page will not display or will partially display and errors can be checked in the Web Developer tools console."));
main.append(addParagraph("It's maybe overkill to do that when you are testing a line of code to see how it works which we will do a lot in this course, but fortunately there are several very easy ways to do test JavaScript without having it server up in a web page so let's just quickly look at those."));
main.append(addParagraph("The simplest way is probably to open up the web developer tools in whichever browser you are using and then going to the console and you can then just go ahead and type in your JavaScript at the command prompt.  An example of this is shown below."));
main.append(addImageWithCaption("./images/console.png", "Using the JavaScript console to experiment with JS."));
main.append(addParagraph("Don't worry too much about what is shown in the console there, this shows some logging I have added to the JS for this page that I haven't ever gotten round to removing.  I also showed some typical experimentation where I tried getting a value for name (just by typing it, pressing return and seeing what, if anything, is returned by the console.  Out of interest, it is the empty string which may seem inconsequential but I didn't define it and you can see that when I do the same thing with a variable called myName I get undefined returned so that tells us that name is defined in JavaScript but doesn't have a value but we can assign it one if we want to."));
main.append(addParagraph("Another interesting point about the console is that it provides pretty good JavaScript auto-completion which can be handy if you can't remember exactly what a built-in method is called because you can type the start of the name.  If you want to to know what methods can be applied to a string you can just type a string followed by a dot.  That can be any string, if you don't have one you can just type the empty string so"));
main.append(addSyntax("\"\"."));
main.append(addParagraph("is enough to call up this list.  The console is easily accessible in any browser so it can be useful to play around with it because it is also building up your familiarity with the browser's web dev tools."));
main.append(addParagraph("By default, the console only really allows you to type one-liners doesn't it?  Actually, although that is obviously true to anyone who has used the console, it is actually false.  You can create extra lines by pressing shift and enter.  Also, if you type something that the console can see is incomplete such as an object definition which we will later see if enclosed in curly braces, it will generate additional lines for you until you have completed the definition."));
main.append(addParagraph("Note that you can usually open the web developer tools by right clicking anywhere in the browser viewport and selecting Inspect or you can select Web Developer Tools from the Tools menu.  In Firefox, there is also an option to select the Browser Console but this is not what you want (which is the JavaScript console)."));
main.append(addParagraph("If Chrome/Edge is displaying the menu bar (which looks like it has been removed completely) you can select the JavaScript Browser in the Tools menu.  If not, right clicking and selecting Inspect may be your only option."));
main.append(addParagraph("Don't forget that node.js allows you to execute JavaScript on a client machine and you can use it to test JavaScript in a terminal.  If you type node and return in the terminal, it will open up a JavaScript REPL (Read, Evaluate, Print Loop) which allows you to type in a JavaScript command and when you press return, it will be evaluated and the result printed out.  The terminal will then wait for you to enter another command."));
main.append(addParagraph("The image below shows a terminal on the Raspberry Pi I use for development work where I have created the bird object and then output it using its name."));
main.append(addImageWithCaption("./images/terminal.png", "Executing JavaScript commands in a terminal with node."));
main.append(addParagraph("The node REPL won't evaluate your statement until it is complete so if you press return, you will see three dots at the start of the next line indicating that this is a continuation of your JavaScript statement so it's not going to execute until you complete the statement and then press return again."));
main.append(addParagraph("You can exit from node by pressing control + D or by typing the command"));
main.append(addSyntax(".exit"));
main.append(addParagraph("and pressing return."));
main.append(addParagraph("If you are interested, you can find out more about the node REPL and how to use it in a page on the node.org site called <a href=' https://nodejs.org/en/learn/command-line/how-to-use-the-nodejs-repl'>How to use the Node.js REPL</a>."));
main.append(addParagraph("There are several sites on the Internet where you can experiment with JavaScript such as <a href=' https://codepen.io/'>codepen.io</a> but the most convenient is probably Codespaces on GitHub which can be accessed as follows:"));
main.append(addInsetBulletList(["Click the Overview tab on the course in LinkedIn Learning.", "Click the Open link next to GitHub Codespaces (it will open in a new tab).", "Click the big green Create codespace on main button."]));
main.append(addParagraph("You should then see a page that looks like this"));
main.append(addImageWithCaption("./images/codespaces.png", "The Codespaces page for this course."));
main.append(addParagraph("If you are not familiar with GitHub Codespaces, this is essentially opening up an online version of VS Code and it also includes a terminal so you can write your code in the VS Code panel or you can open up a node REPL in the terminal."));
main.append(addParagraph("Since this is the Codespaces page specifically for this course, you also have access to the exercise files here.  In many cases, these are transcripts of the code as it is executed in a terminal rather than executable JavaScript files."));
main.append(addParagraph("If you have an account already with GitHub and already have some Codespaces, you may need to select the appropriate space for the course and while the Terminal is normally open by default, you may need to open it yourself by clicking on the three vertical lines at the top of the menu in the left panel and you can select the Terminal menu from there and then New Terminal to open it up."));
main.append(addParagraph("Note that you can also do all of this in VS Code on your local machine rather than in Codespaces.  You can download the exercise files from the GitHub repository and then open the folder containing them in VS Code and that gives you more or less exactly the same as you will get in Codespaces.  The big advantage of doing this in Codespaces is that this space (and essentially, this version of VS Code) has been set up specifically for the course so it has node installed, for example as well as LiveServer and I would assume any other VS Code extensions you might need."));

addSidebar("webdev");