Week 1: Installation and Purpose
The Why of JavaScript
Some Background
Before and during the early 1990's, a new technology was on the rise. Servers were popping up supplying documents consumed by a new type of computer application... the 'Web Browser.' The documents were written in a new language called Hyper-Text Markup Language (HTML) and the protocol used to transfer the data in the document to the web browser was called http. This combination of server, document type, and protocol was revolutionary, but there was a problem. No matter how nice you made the HTML 'pages', they were static. They were useful for displaying information like the contents of books and advertising, but not usable for much more. A way was needed to make the pages act for and react to the user.
In 1995, Netscape Communications, the first company to produce a marketed web browser, created the forerunner to what most people know today as JavaScript to help solve this problem. They initially called it Mocha. Today, if you are creating a website, you use JavaScript, the name most people use instead of the language's actual name, ECMA Script. Today, it is not uncommon to write both the server code producing the HTML for the web browser as well as code that lets the web browser be active in JavaScript.
Python and JavaScript are Cousins
Take a look at Figure 1. It shows the ancestery of both JavaScript and Python. Since C is an ancestor of both languages you can expect to see some things in Javacript that remind you of what you learned about coding in Python. C is not Python's only ancester. A very strong contributor to Python is the Modula language. Because of this ancestry, modules exist in Python but not in JavaScript. Modulo's ranges are an important part of Python. Other language users see that power and want it too. Because of this, you can find JavaScript libraries to use in your apps that add in Modules, ranges, and other types of behaviors.
Installations
The IDE
The Integrated Development Environment (IDE) selected for this course is Visual Studio Code. Go to the site for Visual Studio Code download the installer for your operating system. When you start the download you will be taken to a page that will help you get started. This video will help you install and get started. Since you will be working in JavaScript, this page of hints may be of help to you. It's OK if you don't understand everything about VSCode right off the bat. You'll gradually learn as you run into a need.
The web browser you'll be using in the class is Google Chrome. If you don't have it installed, go to the download page for Chrome and install it.
Extensions
Most good editors allow for customization by it's users. VS Code is no exception. Programmers can extend the functionality of the editor by creating Extensions. There are a couple that you should install right now.
They are installed through the editor itself. If you are unsure how to install an extension visit this link to the instructions on the VS Code site.
- Required: Live Server by Ritwick Dey -- Launches your pages in the browser for preview with live reload. (Automatically refreshes the page in the browser when you save your changes in VS Code)
- Optional: Prettier -- Formats your code to keep it more readable.
After installing the Live Server extension, you may need to do a small amount of configuration. If Chrome is not set as your system default browser, we can set Live Server to use it anyway. Do the following to set a custom browser for Live Server to use:
- Click on the Gear icon in the bottom left corner of the VS Code application window, then select 'Settings'.
- In the Search settings box at the top of the new tab that opened type "custom browser"
- Find the setting "Live Server > Settings: Custom Browser". In the drop down below that select "Chrome"
Test Your Tools
Download and unzip this directory that contains two files you can use to test VSCode and Chrome applications you installed on your machine. After going to where you downloaded the file, select it and unzip it.
How to Unzip
Testing Your Browser
After the folder is unzipped, right or control click the hello.html file in the stepwise-debugging directory and select 'Open with' and Chrome. You will see this in the browser.
Follow the directions on the screen. You should now see this.
What you see on the right-hand side are called the developer tools. The tool we are most interested in, for now, is the console. Click the word 'Console' at the top of the developer tools and you should see this which includes the current date and time.
When you reach this point, you know your browser is setup correctly and you now know how you will use the browser's console to see the results of computing using JavaScript.
Testing Your IDE
Run Visual Studio Code. If this is the first time you've run it you should see this.
Now it is time to open the files in the stepwise-debugging directory in VS Code. To do this select File->Open from the VS Code pull down menus. You will now need to navigate to where you stored the stepwise-debugging directory on your computer's hard drive. Then select stepwise-debugging and click the Open button in the Open dialog box. You should now see this.
To see your code, first click stepwise-debugging and then click learning.js. You should now see the JavaScript that was run to write the date and time to your browsers console. It should look like this.
