Java Reference
In-Depth Information
To start, create a folder called MVC and save the following as list.htm:
list.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MVC List</title>
</head>
<body>
<form id="input">
<label for="name">Name:</label>
<input type="text" name="name" autofocus required >
<button type="submit">Submit</button>
</form>
<ul id="list"></ul>
<script src="js/scripts.js"></script>
</body>
</html>
This is a basic HTML5 web page containing a form with a single input field for entering a
list item. It also contains an empty
<ul>
element in which to place the list items. Now we
need to create the JavaScript file. Create a file called scripts.js inside a folder called js.
In JavaScript, a model is often represented by a constructor function that can create new
instances of an object. This will keep track of any properties the list item has, as well as
any methods. In this example, we'll create an
Item()
constructor function that only has
a
name
property provided as an argument to the constructor function. Add this code to
scripts.js:
js/scripts.js
(excerpt)
"use strict"
function Item(name) {
this.name = name;
}
Each new list item that is created will be an instance of this constructor function.
