Javascript: Ultimate Guide to Javascript Programming (2016)
Chapter 3. Building and Running JavaScript
Learning variables was fun, was it not? However, no one wants to code JavaScript language in a console. In this chapter, you will learn how to build JavaScript files. You will also learn how to run these files inside HTML. So let us begin.
Creating Source Files
Writing JavaScript codes in the console alone will not print out what we want to convey to our user’s web browsers. Hence, we need to find a way to bring what we want to the users. In order to do that, we need to create JavaScript source files and run these files in an HTML file.Here is an example of the most common HTML file known as index.html.
|
<html> <head> <script src="greetings.js"></script> </head> <body> <h1>WELCOME TO JAVASCRIPT!</h1> … </body> </html> |
As you can see, we have the <script>tag in this file. This tag commands this HTML file to load a specific JavaScript source file so that the web browser of your visitors will let them see your website in the way you want them to see it. Notice that we have the “src” keyword inside the <script>tag. This is a command to the HTML file which directs it where to load the JavaScript source file.
In this example, we are commanding the index.html file to load all variables and values within saved inside greetings.js.
In order to create this .js file, all you need to do is open any text editor like Notepad or Text Edit. Write all your JavaScript codes inside and save the file in .js format. Inside this file, we assert all the JavaScript codes we want our visitor’s web browser to execute as soon as they access our website.
Where To Place The Source File?
When browsing your website’s file manager, you will never miss seeing a folder named “root/”. This is where we can find everything inside our website. This is also the default location of your website’s index.html as well.
Basing from the index.html file we have above, we are directing it to find the JavaScript source file within the same location folder – that is, the root/ folder. Hence, we should place our greetings.js in the same location.
|
+ root/ - index.html - greetings.js |
There are websites, however, that place all their JavaScript source files in a subfolder. The most common directory for their source files is under scripts/ folder. Here is how they look like in your website’s directory.
|
+ root/ - index.html + scripts/ - greetings.js |
If this is how you want to organize your source files, then we need to alter the <script> tag in our sample index.html. This is how your HTML codes should look like.
|
<html> <head> <script src="scripts/greetings.js"></script> </head> <body> <h1>WELCOME TO JAVASCRIPT!</h1> … </body> </html> |
Notice that in this code, we are instructing the index.html to load the greetings.js from the scripts/ subfolder.
Writing Codes in the Source File
Writing console-style expressions inside the greetings.js as they are will only end up in error. Let us try to write these following lines inside our source file for example.
|
var hello = "Welcome to my website! " var enjoy = "Please enjoy your visit!" hello + enjoy |
Once we open our index.html and go to our browser’s console, we will see nothing but error. This is because web browser got confused on what you really intend to show. The error comes from our JavaScript source file. Unlike the console, we need to assert our JavaScript codes differently in the source files. We do this by adding a semicolon ( ; ) every after a statement. Hence, we should write our JavaScript codes like this.
|
var hello = "Welcome to my website! "; var enjoy = "Please enjoy your visit!"; hello + enjoy; |
With our codes written with semicolons, you will no longer see an error when trying to access the console. However, you will not see anything in the console. This means that our code is not yet being delivered to the browser’s console. The execution of the JavaScript codes only happens within the source file itself. In order to fix this, we need to use the console.log( ) method.
What we want to do here is to show the string coming from the concatenation of the variables hello and enjoy. Here is how we are going to that.
|
var hello = "Welcome to my website! "; var enjoy = "Please enjoy your visit!"; console.log(hello + enjoy); |
By using the console.log( ) method, you will be able to see now the string inside the console. In other words, we now have a working JavaScript programming language being run by our index.html file.
Conclusion
At this point, you now know how to write values in JavaScript language. You just learned how JavaScript interprets numbers and flat texts, as well as how to transform texts into string values. You also learned how to manipulate these values into expressions and statements with the use of operators and comparators.
In the second chapter, you were introduced to variables. You learned how to store values into variables and the concatenation method where you learned how to process values quickly in the form of variables. A couple of methods were also introduced such as the charAt( ) method and .length property – tools that can help you analyze values efficiently.
In the third chapter, you learned how to create your own JavaScript source file. Take note that you need to assert JavaScript codes differently in source files compared to the console. You also got to know the console.log( ) method which allows you to print values in the browser’s console. However, this is not yet the most efficient way to deliver JavaScript codes. Imagine if you are going to deliver hundreds of values into the browser? That would mean repetitive programming and too much hassle.
In the next part of the JavaScript in Simple Words series, we will bring you to the loops of JavaScript where you will learn how to manage repetitive coding efficiently.Several topics will also be discussed on the second part of the book series including, but not limited to, the use of conditions and the creation of dialog boxes.