We are going to need a text editor to work with the files. If you are on Windows, you can use Notepad. If you are on MacOS you can use TextEdit, the fundamentals are the same. Alternatively you can download and use Notepad++, which will have some nicer features than the basic notepads. Notepad and Notepad++ are what I started my programming adventure with. If you want to get real fancy or are bold, try out Atom; a more professional grade text editor. For now, Notepad or TextEdit will work just fine!
Open up your editor and go to File > Save As. Once you have opened up the save dialog, you can create a folder
myjs. Then inside of that folder we will save the file we are editing as
index.html. Before saving, make sure to select the All Files for the Save as Type field, your screen might look something like this:
If you accidentally created a
.txt file, don’t worry you can always override and eventually get the
.html extension. When working with files there is usually a name then a
.something is the file extension; a way of specifying the file type. Now that we have created our HTML file copy paste the following code section into the text editor and save.
HTML is the structural language for web pages. When the browser opens a website, it reads the HTML and then displays it on the screen in a form we are used to. The
<script> tag loads in the
index.html file in your
myjs folder, and open it, it should load with your default browser. and should look something like this if you are using Google Chrome.
If we open up our console we will see an error:
GET file:///C:/myjs/myscript.js net::ERR_FILE_NOT_FOUND
Copy, the code below and paste it into the text editor and save
Now that we have saved the myscript.js file we can reload our index.html and it should look something like this:
The document.write code adds the extra text to the browser this time, showing that our file has indeed loaded!
Getting the basic set up is honestly one of the hardest parts, so great job! In part two we will start getting into some fun stuff!