Introduction

JavaScript is a scripting language that runs in a web browser.
The web browser has a JavaScript engine.
But because the engine is not the same, you should test your JavaScript code in a typical web browser.
Ecma International is responsible for standardizing the JavaScript engine.

JavaScript Usages

  1. Validation
  2. Event handler
  3. Create dynamic menu
  4. Change CSS properties dynamically
  5. Add web page content

1. Validation

signUp.html is the subscription form page.
This is an example of checking that the value entered by the user is valid before sending the parameters to the server.

signUp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript Example</title>
<script type="text/javascript">
function check() {
	var form = document.getElementById("signUpForm");
	var id = form.id.value;
	id = trim(id);
	if (id.length == 0) {
		alert("Invalid ID");
		return false;
	}
	var pass = form.passwd.value;
	pass = trim(pass);
	if (pass.length == 0) {
		alert("Invalid Password");
		return false;
	}
	var name = form.name.value;
	name = trim(name);
	if (name.length == 0) {
		alert("Invalid Name");
		return false;
	}
	var email = form.email.value;
	var chk = emailCheck(email);
	if (chk == false) {
		alert("Invalid Email");
		return false;
	}
	var mobile = form.mobile.value;
	mobile = trim(mobile);
	if (mobile.length == 0) {
		alert("Invalid Mobile");
		return false;
	}
	chk = beAllowStr(mobile,"0123456789-");
	if (chk == false) {
		alert("Invalid Mobile");
		return false;
	}
	
	return true;
}
function trim(str) {
	for (var i = str.length - 1; i >= 0; i--) {
		if (str[i] == " ") {
			str = str.substring(0, i);
		} else {
			break;
		}
	}
	for (var i = 0; i < str.length; i++) {
		if (str[i] == " ") {
			str = str.substring(i+1, str.length);
		}	
	}
	return str;
}
function beAllowStr(str, allowStr) {
	for (var i = 0;i < str.length; i++) {
		var ch = str.charAt(i);
		if (allowStr.indexOf(ch) < 0) {
			return false;
		}
	}
	return true;
}
function emailCheck(email) {
	var allowStr = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz@.-_";
	if (beAllowStr(email, allowStr) == false) {
		return false;
	}
	var golbang = 0;
	var dot = 0;
	if (email.length < 5) {
		return false;
	}
	if (email.indexOf("@") == -1) {
		return false;
	}
	if (email.indexOf(".") == -1) {
		return false;
	}
	if (email.indexOf(" ") != -1) {
		return false;
	}
	for (var i = 0;i < email.length; i++) {
		if (email.charAt(i) == "@") {
			golbang++;
		}
		if (email.charAt(i) == ".") {
			dot++;
		}
	}
	if (golbang != 1 || dot > 3) {
		return false;
	}
	if (email.indexOf("@") > email.indexOf(".")) {
		return false;
	}
	if (email.indexOf("@") == 0  || email.indexOf(".") == email.length - 1) {
		return false;
	}
	return true;
}
</script>
</head>
<body>
<h1>Sign Up</h1>
<form id="signUpForm" action="signUp_proc.jsp" method="post" onsubmit="return check();">
ID: <input type="text" name="id" value="heist" /><br />
Password: <input type="password" name="passwd" value="1440" /><br />
Name: <input type="text" name="name" value="John Doe" /><br />
Email: <input type="text" name="email" /><br />
Mobile: <input type="text" name="mobile" /><br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>

Run the example
The above code is old JavaScript code.
It is desirable to use regular expressions for functions that check whether an email is valid.
Modify the emailCheck() and trim() functions to use regular expressions.

function emailCheck(email) { 
	var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	return re.test(email);
}
function trim(str) {
	return str.replace(/(^\s*)|(\s*$)/gi, "");
}

Create the function to validate the mobile number as shown below.

function mobileCheck(mobile) {
	var re = /\d+-\d+-\d+/;
	return re.test(mobile);
}

Create signUp2.html to validate using the above three functions.
Run the example
SignUp.html and signUp2.html differ in mobile validation criteria.
signUp.html determines that the string consisting of numbers and dashes is a valid mobile number.
The mobileCheck() function in signUp2.html determines that the format 'one or more numbers - one or more numbers - one or more numbers' is a valid mobile number.
For reference, there are several sites that provide regular expressions.

2. Event handler


The code for this button is:

<input type="button" value="Button" onclick="alert('Click Button!');" />

When you click the button, the alert() function is executed.
You can place a user-defined function in place of alert().
The user-defined function used here is called an event handler.

Links, summit buttons, and reset buttons have default behavior for events.
In other words, links, summit buttons, and reset buttons work without JavaScript.

But for a button, it does not do anything without an event handler.

In the subscription example, the check() function works before performing the basic operation of the Summit button.(<form .. onsubmit="return check();">)
The check() function must be implemented to return a boolean value.
Returning true will do the default for sending parameters to the server, returning false will disable the default behavior, so after the check() function, the summit button will not do anything.

3. Create dynamic menu

Visit the link below to experience the dTree JavaScript menu in the Example at the bottom of the page.
dTree
Dynamic means moving in response to a user.

4. Change CSS properties dynamically

JavaScript allows you to change the CSS properties of an element when an event occurs.
Open the signUp2.html.
Add the following JavaScript function under <script type="text/javascript"> and create the signUp3.html file using the Save As menu.

function testCss() {
	var inputs = document.getElementsByTagName("input");
	for (var i = 0; i < inputs.length; i++) {
		inputs[i].style.background="yellow";
	}
}

Add the onload attribute to the body element.
The onload event of the body element occurs when all elements of the document are downloaded and available.

<body onload="testCss()">

Run the example

5. Add web page content

Facebook comments are a good example of adding web page content using JavaScript.
facebook comments

References