Vanilla JavaScript
I figured out that jumping in and using a JavaScript web framework to build a web application(app) was hard because I did not know the basics, and that was javascripting basics.I think this is the same for any other programming language. Take for example, you might jump in and start using the laravel framework but then what you would be doing is 'monkey says, monkey does', you would be doing exactly what the person in the video tutorial is doing or copy and pasting from someone else's tutorial without understanding the underlying concepts of the framework, that is,PHP, how the classes are built,how you can reuse them, how to build functions,instantiation,the data-types,etc so the the best option is to put your head down and start at Genesis(the beginning-basics).
In the article I will be building a simple bare bones web application that displays what is typed in the text-box. There are some moving parts to get the app working and it also illustrates the basic building blocks of using javascript in web app building,DOM manipulation,etc, these are some of the basics that the js web frameworks are built on top of.
HTML builds the structure of the app, CSS is the styling and javascript adds functionality to the app. You will notice that I have not added any css just to keep the app simple,default styles are applied by the web browser you use to open the app.
HTML-Below is the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Apps</title>
</head>
<body>
<h1>Vanilla JS App</h1>
<input type="text" value="Your name Please" id="n">
<h2 id="showOff">Message</h2>
<script>
var nameInputHandle=document.getElementById('n');
var textHandle=document.getElementById("showOff");
function displayText(){
var captureNameValue=nameInputHandle.value;
textHandle.innerText=captureNameValue;
};
nameInputHandle.addEventListener("input",displayText);
</script>
</body>
</html>
Notice the id in the input and h2 tags,they are used to uniquely identify the tags so we can make a reference to them in the JavaScript file or technically, grabbing them from the Document Object Model(DOM). The DOM is a treelike structure of the html and it is the representation of how the web browser sees the html elements.Just before the body closing tag is the javascript enclosed in script tags.
Next I will elaborate on what is happening in between the script tags.VAR is a keyword in that is used to make a container for holding values in memory.
var nameInputHandle=document.getElementById('n');
Above is a variable, called nameInputHandle and holds document.getElementById('n') which is the input box tag from the DOM,this is the same with the textHandle but for the h2 tag.DOCUMENT is a builtin object which has a method(getElementById) that requires an input, the id for the html tag.
nameInputHandle.addEventListener("input",displayText);
Above is the same variable created which is an object and by default has a method called addEventListener which requires two inputs. The first input is an event that is triggered when text is typed in the textbox and the second input is a function called displayText. The function is called when an event is fired.
function displayText(){
var captureNameValue=nameInputHandle.value;
textHandle.innerText=captureNameValue;
};
Above is the syntax of how the function is made starting with a function keyword followed by a name, then opening and closing brackets and ended with angle brackets. Into the angle brackets go the logic or code that is run when the function is called.In () goes the inputs that you want added when calling the function.This function is what gets that text displayed in the h2 tags when it is typed into the textbox. A function that doesn't require input is called an ANONYMOUS function. Look at the difference between the custom function and the builtin function we used earlier,addEventListner, this function is native or inbuilt into js and can't be changed, this can only be change if we go under the hood of js but there is a layer abstraction created, all we need to do is go through the documetantion and find out about it and how it is used and leverage what is there already.
You ca try out the app,
or copy the code above and open with a web browser.