Web Science/Part1: Foundations of the web/Dynamic Web Content/Client side JavaScript

Client side JavaScript

Learning goals

  1. understand how javascript was supposed to support people to fill out web forms
  2. understand the issues and disadvantages that arise with javascript

Video

Script

index.html

<html>
<head><title>Registration Form</title></head>
<body>
<script>
	function validator(){
		var name = document.getElementById("userinput").value;
		if( name.length<3){
			document.getElementById("warning").innerHTML = "User name is too short. Please enter at least 3 characters.";
		}
	}
</script>
<h1>Registration Form for the Web Science MOOC</h1>

<form action="servlet" method="POST">
<label for="userinput">Enter User:</label>
<input name="username" id="userinput" type ="text" onchange="validator()"/><span id="warning" style="color:red"></span>
<br>
<label for="emailinput">Enter email</label>
<input name="email" id="emailinput" type ="text" />
<br>
<input name="submit" id="submitbutton" type="submit" value="register"/>
</form>

</body>
</html>

Quiz

1 How can JavaScript help while filling out a web form?

The format of the input data can be verified and direct user feedback is possible without putting pressure on the internet or the web server
There is nothing JavaScript can do while filling out a web form
Without JavaScript passwords would be shown in clear text when entered

2 What problems come along with JavaScript?

Most browsers have different implementations of the W3C Standard that specifies JavaScript
Most browsers have different implementations since JavaScript has never been standardized
With the use of JavaScript arbitrary cookies can be accessed and transferred
Web sites have to be optimized for JavaScript versions of various browsers.

Further reading

no further reading defined
You can define further reading here.
In general you can use the edit button in the upper right corner of a section to edit its content.

Discussion