jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-20 21:57:10 +03:00
parent e4db23fa56
commit 4ae129054e
8 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

0
2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.md Normal file
View file

112
2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/solution.view/index.html Normal file
View file

@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
td select,
td input {
width: 150px;
}
#diagram td {
vertical-align: bottom;
text-align: center;
padding: 10px;
}
#diagram div {
margin: auto;
}
</style>
</head>
<body>
Deposit calculator.
<form name="calculator">
<table>
<tr>
<td>Initial deposit</td>
<td>
<input name="money" type="number" value="10000" required>
</td>
</tr>
<tr>
<td>How many months?</td>
<td>
<select name="months">
<option value="3">3 (minimum)</option>
<option value="6">6 (half-year)</option>
<option value="12" selected>12 (one year)</option>
<option value="18">18 (1.5 years)</option>
<option value="24">24 (2 years)</option>
<option value="30">30 (2.5 years)</option>
<option value="36">36 (3 years)</option>
<option value="60">60 (5 years)</option>
</select>
</td>
</tr>
<tr>
<td>Interest per year?</td>
<td>
<input name="interest" type="number" value="5" required>
</td>
</tr>
</table>
</form>
<table id="diagram">
<tr>
<th>Was:</th>
<th>Becomes:</th>
</tr>
<tr>
<th id="money-before"></th>
<th id="money-after"></th>
</tr>
<td>
<div style="background: red;width:40px;height:100px"></div>
</td>
<td>
<div style="background: green;width:40px;height:0" id="height-after"></div>
</td>
</table>
<script>
let form = document.forms.calculator;
form.money.oninput = calculate;
form.months.onchange = calculate;
form.interest.oninput = calculate;
function calculate() {
let initial = +form.money.value;
if (!initial) return;
let interest = form.interest.value * 0.01;
if (!interest) return;
let years = form.months.value / 12;
if (!years) return;
let result = Math.round(initial * (1 + interest * years));
let height = result / form.money.value * 100 + 'px';
document.getElementById('height-after').style.height = height;
document.getElementById('money-before').innerHTML = form.money.value;
document.getElementById('money-after').innerHTML = result;
}
calculate();
</script>
</body>
</html>

89
2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
td select,
td input {
width: 150px;
}
#diagram td {
vertical-align: bottom;
text-align: center;
padding: 10px;
}
#diagram div {
margin: auto;
}
</style>
</head>
<body>
Deposit calculator.
<form name="calculator">
<table>
<tr>
<td>Initial deposit</td>
<td>
<input name="money" type="number" value="10000" required>
</td>
</tr>
<tr>
<td>How many months?</td>
<td>
<select name="months">
<option value="3">3 (minimum)</option>
<option value="6">6 (half-year)</option>
<option value="12" selected>12 (one year)</option>
<option value="18">18 (1.5 years)</option>
<option value="24">24 (2 years)</option>
<option value="30">30 (2.5 years)</option>
<option value="36">36 (3 years)</option>
<option value="60">60 (5 years)</option>
</select>
</td>
</tr>
<tr>
<td>Interest per year?</td>
<td>
<input name="interest" type="number" value="5" required>
</td>
</tr>
</table>
</form>
<table id="diagram">
<tr>
<th>Was:</th>
<th>Becomes:</th>
</tr>
<tr>
<th id="money-before"></th>
<th id="money-after"></th>
</tr>
<td>
<div style="background: red;width:40px;height:100px"></div>
</td>
<td>
<div style="background: green;width:40px;height:0" id="height-after"></div>
</td>
</table>
<script>
let form = document.forms.calculator;
// your code
</script>
</body>
</html>

21
2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md Normal file
View file

@ -0,0 +1,21 @@
importance: 5
---
# Deposit calculator
Create an interface that allows to enter a sum of bank deposit and percentage, then calculates how much it will be after given periods of time.
Here's the demo:
[iframe src="solution" height="350" border="1"]
Any input change should be processed immediately.
The formula is:
```js
// initial: the initial money sum
// interest: e.g. 0.05 means 5% per year
// years: how many years to wait
let result = Math.round(initial * (1 + interest * years));
```

79
2-ui/4-forms-controls/3-events-change-input/article.md Normal file
View file

@ -0,0 +1,79 @@
# Handling change, input, cut, copy, paste
Let's discuss various events that accompany data updates.
## Event: change
The [change](http://www.w3.org/TR/html5/forms.html#event-input-change) event triggers when the element has finished changing.
For text inputs that means that the event occurs when it looses focus.
For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event:
```html autorun height=40 run
<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">
```
For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes.
## Event: input
The `input` event triggers every time a value is modified.
For instance:
```html autorun height=40 run
<input type="text" id="input"> oninput: <span id="result"></span>
<script>
input.oninput = function() {
result.innerHTML = input.value;
};
</script>
```
If we want to handle every modification of an `<input>` then this event is the best choice.
Unlike keyboard events it works on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
```smart header="Can't prevent anything in `oninput`"
The `input` event occurs after the value is modified.
So we can't use `event.preventDefault()` there -- it's just too late, there would be no effect.
```
## Events: cut, copy, paste
These events occur on cutting/copying/pasting a value.
They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
We also can use `event.preventDefault()` to abort the action.
For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
```html autorun height=40 run
<input type="text" id="input">
<script>
input.oncut = input.oncopy = input.onpaste = function(event) {
alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
return false;
};
</script>
```
Technically, we can copy/paste everything. For instance, we can copy and file in the OS file manager, and paste it.
There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) to work with different data types, read/write to the clipboard.
But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety. Also it is forbidden to create "custom" clipboard events in all browsers except Firefox.
## Summary
Data change events:
| Event | Description | Specials |
|---------|----------|-------------|
| `change`| A value was changed. | For text inputs triggers on focus loss. |
| `input` | For text inputs on every change. | Triggers immediately unlike `change`. |
| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipbordData` property gives read/write access to the clipboard. |