Calculate Average Illuminance
Enter the following values to calculate the average illuminance.
Need a break?
Click the button below for a joke!
以下が実際のプログラムになります。JavaScriptのevalは使用していないため、セキュリティ脆弱性はありません。
```
<!DOCTYPE html>
<html>
<head>
<title>Calculate Average Illuminance</title>
<script type="text/javascript">
function calculateIlluminance() {
var area = parseFloat(document.getElementById("area").value);
var height = parseFloat(document.getElementById("height").value);
var luminousFlux = parseFloat(document.getElementById("luminousFlux").value);
if (area && height && luminousFlux) {
var illuminance = luminousFlux / (area * height);
document.getElementById("illuminanceResult").textContent = "The average illuminance is " + illuminance.toFixed(2) + " lux.";
} else {
document.getElementById("illuminanceResult").textContent = "Please enter valid values for area, height, and luminous flux.";
}
}
function tellJoke() {
var jokes = [
"Why don't scientists trust atoms? Because they make up everything.",
"What is the difference between a snowman and a snowwoman? Snowballs.",
"I'm reading a book about anti-gravity. It's impossible to put down!"
];
var randomJoke = jokes[Math.floor(Math.random() * jokes.length)];
document.getElementById("jokeResult").textContent = randomJoke;
}
</script>
</head>
<body>
<h1>Calculate Average Illuminance</h1>
<p>Enter the following values to calculate the average illuminance.</p>
<form>
<label for="area">Area (in square meters): </label>
<input type="number" id="area" name="area" step="0.01" required><br><br>
<label for="height">Ceiling Height (in meters): </label>
<input type="number" id="height" name="height" step="0.01" required><br><br>
<label for="luminousFlux">Luminous Flux (in lumens): </label>
<input type="number" id="luminousFlux" name="luminousFlux" step="0.01" required><br><br>
<input type="button" value="Calculate" onclick="calculateIlluminance()">
</form>
<br>
<div id="illuminanceResult"></div>
<br>
<h2>Need a break?</h2>
<p>Click the button below for a joke!</p>
<input type="button" value="Tell me a joke" onclick="tellJoke()">
<br>
<div id="jokeResult"></div>
</body>
</html>
```
注釈: 上記のコードでは、ボタンを2つ設定しています。1つは指定された値で平均照度を計算するためのもので、もう1つはジョークをランダムに表示するためのものです。ジョークは、コード中の配列`jokes`に格納されています。