JavaScript is a web programming language that is Client Side Programming Language. Client Side Programming Language is a type of programming language whose processing is performed by the client. The client application refers to web browsers such as Google Chrome and Mozilla Firefox.
Client Side programming language is different from Server Side programming languages like PHP, where for the server side the whole code of the program run on the server side.
To run JavaScript, we only need the application text editor and web browser. JavaScript features: high-level programming language, client-side, loosely tiped and object-oriented.
In javascript there is also the application of DOM (Document Object Model). DOM is a set of rules or a way for programmers to 'manipulate' anything that appears in a web page. DOM is not bound by JavaScript, and is not part of JavaScript. The same DOM can also be accessed with other client-side languages like JScript.
The tags or elements that are inside the HTML are organized inside the DOM. Using JavaScript, we can manipulate all these HTML tags. One example of DOM we have used is the document.getElementById function. The function of the ElementById document.get serves to search for an HTML tag based on the id. In addition to document.getElementById, in DOM also provided other functions such as document.getElementByName, document.getElementByClass, and others.
for more details, let's practice it!
Let’s immediately practice with the following program code below :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Test</title>
</head>
<body>
<h3>Example 1: Retrieves the span tag value</h3>
<p>Name: simpleawesome, Value: <span id="simpleawesome_value">80</span>
<br />Status: Single, Value: <span id="single_value">92</span></p>
<button id="p_button">Show the Value</button>
<br/>
<br/>
<h3>Example 2: Retrieves the input tag value</h3>
<form onsubmit="return false">
<label>simpleawesome2: </label>
<input type="text" id="input_form" value="90"/>
<button id="form_button">Show the Value</button>
</form>
<br/>
<br/>
<h2>Result: <span id="result"></span></h2>
</body>
<script>
document.getElementById("p_button").
addEventListener("click", show_p_value);
document.getElementById("form_button").
addEventListener("click", show_form_value);
function show_p_value() {
var simpleawesome_value=document.getElementById("simpleawesome_value").innerHTML;
var single_value=document.getElementById("single_value").innerHTML;
document.getElementById("result").innerHTML=
simpleawesome_value+" and "+single_value;
}
function show_form_value(){
var form_value=document.getElementById("input_form").value;
document.getElementById("result").innerHTML=form_value;
}
</script>
</html>
Here are the temporary results before being executed the button :
Here's an explanation of the program code we have created (before we click both buttons on the output above for see the result) :
<body>
<h3>Example 1: Retrieves the span tag value</h3>
<p>Name: simpleawesome, Value: <span id="simpleawesome_value">80</span>
<br />Status: Single, Value: <span id="single_value">92</span></p>
<button id="p_button">Show the Value</button>
<br/>
<br/>
<h3>Example 2: Retrieves the input tag value</h3>
<form onsubmit="return false">
<label>simpleawesome2: </label>
<input type="text" id="input_form" value="90"/>
<button id="form_button">Show the Value</button>
</form>
<br/>
<br/>
<h2>Result: <span id="result"></span></h2>
</body>
In the HTML code above, we create 2 samples. The first example is a paragraph containing the name/single and value of simpleawesome, the name/single is within the paragraph tag. Most importantly, however, the value is within the <span> tag with the id=simpleawesome_value and id=single_value attributes. The id attribute is what we will use to retrieve it with JavaScript. Then we add a button with the <button id="p_button"> tag. This button will be used as a trigger for scoring.
For the second example, we create a form that contains the <input type="text"> tag. This input can be changed its value when the HTML page has appeared, and we will try to retrieve the value from this input tag. Just like the example above, we use the button <button id="form_button"> as the trigger JavaScript, ie when this button is clicked, take the form value with JavaScript
If we notice, the <form> tag has the onsubmit="return false" attribute. This attribute is a JavaScript code that serves to stop the standard feature of the form when the submit button is pressed, the form will move to a certain page for the process (usually processed using PHP).
In other words, adding the onsubmit="return false" attribute to the form tag will turn off the submit function.
This we do because we will display the form with JavaScript, not with PHP as usual, so we do not need the default function. At the end of the HTML code, we add a span tag: <span id="result">, this is where the final value will be displayed.
For JavaScript code, we place it under the <body> tag instead of <head> :
<script>
document.getElementById("p_button").
addEventListener("click", show_p_value);
document.getElementById("form_button").
addEventListener("click", show_form_value);
function show_p_value() {
var simpleawesome_value=document.getElementById("simpleawesome_value").innerHTML;
var single_value=document.getElementById("single_value").innerHTML;
document.getElementById("result").innerHTML=
simpleawesome_value+" and "+single_value;
}
function show_form_value(){
var form_value=document.getElementById("input_form").value;
document.getElementById("result").innerHTML=form_value;
}
</script>
We have to put the above code after the <body> tag, and not in <head> because we will use a special method in javascript, ie addEventListener. addEventListener is a method (designation for functions in object programming) used to paste events to HTML tags.
If we usually use JavaScript events: onClick directly on the HTML, like: <button onclick = "show ()">, then we can replace it with addEventListener("click", show). By using addEventListener, HTML code can be free from JavaScript.
In the Javascript code above, we use 2 pieces of addEventListener method, for each button. To find this button in HTML, we use the JavaScript getElementById() method. Thus, the code is :
document.getElementById("p_button").
addEventListener("click", show_p_value);
Means : find an HTML tag that is id="p_button", then when clicked, run show_p_value function.
Next, we create the show_p_value function below it.Basically, the show_p_value function is useful for retrieving the value of the <span> tag with id="simpleawesome_value" and id="single_value", then merging the two, and displaying the result to the <span id="result"> tag.
var simpleawesome_value=document.getElementById("simpleawesome_value").innerHTML;
Means: Take the contents of the HTML tag with id="simpleawesome_value", then save it into the simpleawesome_value variable. innerHTML is a JavaScript object property that holds HTML content. Because in HTML code we create <span id="simpleawesome_value">80</ span>, then document.getElementById ("simpleawesome_value"). InnerHTML will return value: 80.
Next we also do the same with single_value, and the results are displayed into the tag <span id="result"></span> with the program code :
document.getElementById("result").innerHTML= simpleawesome_value+" and "+single_value;
For the second example that uses the form, we also use the same way, but since the value of the <input> tag is stored in the property value, then the way to access it is with the following code :
var form_value=document.getElementById("input_form").value;
Then the result will display in tag <span id="result"></span>.
So, here are the result when we click the ”Show the Value” button for example 1 :
And also the result for example 2 :
For example 2, we can change the value input with number and text like output below :
This is the first tutorial i’m contributing using Javascript.