Some basic JavaScript
Introduction to JavaScript
Simple JavaScript page
The main goal I have in the JavaScript lessons is to share what I have learned about plain vanilla JavaScript. The emphasis will be to show some ideas that will lead to creating simple web applications.
Simple HTML document
Let’s create a simple HTML document that shows a very basic usage of JavaScript. Here is the HTML document, "test.html"
<!DOCTYPE html>
<html>
<head>
<script>
addEventListener('DOMContentLoaded', init);
function init() {
console.log('init started');
}
</script>
</head>
<body>
<h1>Simple Page</h1>
</body>
</html>Line 1 specifies that HTML5 is used by the browser. Lines 3-12 form the head section of the document. Lines 13-15 form the body section of the document. It is a good idea to place all your JavaScript code inside <script> elements within the <head> element. The <body> element is where the HTML markup goes. This will keep the code separate from the markup in your document and keep things more organized.
Line 5 is a very important line as it makes it so that your page will respond to the DOMContentLoaded event, by calling the init() function. The DOMContentLoaded event occurs when the HTML markup in the <body> completes loading. This means that the init() function is only called after the markup has been loaded. Doing things in this manner, allows you to keep all your code inside the <head> section, instead of at the end of the <body> element.
Viewing the page
It is easier to use the Chrome (or Chromium) browser for JavaScript programming. When, you open "test.html" in Chrome, hit the F12 button to open up the DevTools JavaScript console. When you are using JavaScript, using the JavaScript console is very useful for debugging.
Since ReactJS uses JavaScript, using the JavaScript console can be very valueable for debugging ReactJS applications.
Here is a screenshot showing "test.html" loaded in Chromium. The page is being served out using the NodeJS application, http-server. Note that the Console shows the message "init started". The DevTools console has been opened by hitting the F12 key.
Note that the DevTools (JavaScript) console has been located at the bottom of the window using the kabob for that window as shown here:
Line 8 inside the init() function causes the message "init started" to be displayed in the console. The console.log() function is quite powerful and can be used to display JavaScript objects instead of just strings. So, using console.log() is a good way to help debug your programs.
Making use of a button
If you place a HTML <button> in your markup, you can use JavaScript to allow clicking on the button to produce some action. Clicking on the button generates a 'click' event that can be responded to with JavaScript code. Here is a modified version of "test.html" that shows a simple way to do this:
<!DOCTYPE html>
<html>
<head>
<script>
addEventListener('DOMContentLoaded', init);
function init() {
let add_button = document.getElementById('add_button');
add_button.addEventListener('click', handleAdd);
}
function handleAdd() {
console.log('handleAdd called');
}
</script>
</head>
<body>
<h1>Simple Page</h1>
<button id="add_button">Add</button>
</body>
</html>The new lines are lines 8-9, lines 12-14 and line 19. Line 19 shows the HTML <button> element with an id=add_button attribute. It is common practice to use id attribute to make it straightforward to select that element with JavaScript. Line 8 selects that button by using the document.getElementById() function. Line 9 makes it so that the handleAdd() function will be called when the add_button is clicked on.
Note on line 5, that we did not put an element before the call to addEventListener(). This is equivalent to adding the event listener to the window.
Lines 12-14 define the handleAdd() function. All this function does right now is write the message 'handleAdd called' to the console. The following screen shot shows the page after the add button has been clicked.
Using input elements
Let’s add to our HTML markup and add some <input> elements. We want to use some text input elements so the attributes we use will be type="text". We will also give our <input> elements id attributes so that we can select them with JavaScript.
We can modify our handleAdd() function so that it will take the input from two of our <input> elements and store the sum of them in a third <input> element. Here is the new version of "test.html":
<!DOCTYPE html>
<html>
<head>
<script>
addEventListener('DOMContentLoaded', init);
function init() {
let add_button = document.getElementById('add_button');
add_button.addEventListener('click', handleAdd);
}
function handleAdd() {
let num1_text = document.getElementById('num1');
let num2_text = document.getElementById('num2');
let num1 = Number(num1_text.value);
let num2 = Number(num2_text.value);
let result_text = document.getElementById('result');
result_text.value = num1 + num2;
}
</script>
</head>
<body>
<h1>Simple Page</h1>
num1 <input type="text" id="num1">
num2 <input type="text" id="num2">
<button id="add_button">Add</button><br><br>
result <input type="text" id="result">
</body>
</html>The new or modified lines are lines 13-18 and lines 24-27. Lines 24, 25 and 27 use some plain text as labels along with <input> elements that are of type="text". Those input elements are given id attributes to make them easy to select with JavaScript. Line 26 is modified to add two <br> elements to place a blank line between The text elements used for user input and the text element used to display the result.
Lines 13 and 14 obtain references to the input elements that will be used to gather the user input. Lines 15 and 16, will convert the user input into numbers using the Number() function. Note that JavaScript makes no distinction between integers and real numbers. Line 17 obtains a reference to the input element that will be used to display the result of adding the user input together. Line 18 stores the sum of the user input numbers in the result_text text box. Here is a screen shot that shows the result of adding two numbers:
