Photo by
medetaico
基本的な関数を使ったJavaScriptとhtml
例1)
<!doctype html>
<html lang="ja">
<head>
<title>テスト</title>
<script type="text/javascript">
// JavaScriptはHTML文書が完全に読み込まれてから実行するために window.onload イベントを使用する
window.onload = function() {
// submitBtnボタンがクリックされたらsubmitForm関数を実行する
document.getElementById('submitBtn').addEventListener('click', function() {
submitForm();
});
}
// addEventListenerの方が柔軟性と機能性が高い
// ddEventListenerは同じ要素に複数のイベントハンドラを追加できるが、onclickは一つの要素に一つのハンドラしか設定できない
function submitForm() {
var input1 = document.getElementById('input1').value;
var input2 = document.getElementById('input2').value;
document.getElementById('errorMessage').innerHTML = "";
document.getElementById('result').innerHTML = "";
if (input1 == '' || input2 == '') {
document.getElementById('errorMessage').textContent = "未入力の項目があります";
} else {
document.getElementById('result').textContent = "入力1: " + input1 + " 入力2: " + input2;
}
}
</script>
</head>
<body>
<h1>テスト</h1>
<div>
<label for="input1">入力1</label>
<input type="text" id="input1">
<label for="input2">入力2</label>
<input type="text" id="input2">
<button id="submitBtn">送信</button>
</div>
<span id="errorMessage" style="color: red;"></span>
<span id="result"></span>
</body>
</html>例2)
<!doctype html>
<html lang="ja">
<head>
<title>テスト</title>
<script type="text/javascript">
window.onload = function() {
var submitBtn = document.getElementById('submitBtn');
// submitBtnボタンがクリックされたらsubmitForm関数を実行する
submitBtn.addEventListener('click', function() {
submitForm();
});
// submitBtnボタンの上にマウスが移動したらボタンの背景色を黄色に変更
submitBtn.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});
}
function submitForm() {
var input1 = document.getElementById('input1').value;
var input2 = document.getElementById('input2').value;
document.getElementById('errorMessage').innerHTML = "";
document.getElementById('result').innerHTML = "";
if (input1 == '' || input2 == '') {
document.getElementById('errorMessage').textContent = "未入力の項目があります";
} else {
document.getElementById('result').textContent = "入力1: " + input1 + " 入力2: " + input2;
}
}
</script>
</head>
<body>
<h1>テスト</h1>
<div>
<label for="input1">入力1</label>
<input type="text" id="input1">
<label for="input2">入力2</label>
<input type="text" id="input2">
<button id="submitBtn">送信</button>
</div>
<span id="errorMessage" style="color: red;"></span>
<span id="result"></span>
</body>
</html>上記をChatGPTに書き直させた
条件:
・オブジェクト生成、コンストラクタ、関数名、無名関数、即時実行関数を使う
・複数のeventListenerを使う
・複数のinputとボタンを使う
・コメントで処理の内容を書いて
即時実行関数（IIFE） を使用して、グローバルスコープを汚染しないようにする
FormHandlerコンストラクタ は、ボタンやメッセージ表示用の要素を取得し、イベントリスナーを初期化
initializeメソッド は、ボタンにクリックおよびマウスオーバー/マウスアウトのイベントリスナーを追加
handleSubmitメソッド は、指定された2つの入力フィールドの値を検証し、結果またはエラーメッセージを表示
複数のeventListener を使用して、複数のボタンと入力フィールドに対してイベントを処理
<!doctype html>
<html lang="ja">
<head>
<title>テスト</title>
<script type="text/javascript">
// 即時実行関数 (IIFE) を使用してグローバルスコープを汚染しないようにする
(function() {
// FormHandler コンストラクタ関数
function FormHandler() {
// ボタンとメッセージ表示用の要素を取得
this.submitBtn = document.getElementById('submitBtn');
this.submitBtn2 = document.getElementById('submitBtn2');
this.errorMessage = document.getElementById('errorMessage');
this.result = document.getElementById('result');
// イベントリスナーの初期化
this.initialize();
}
// initialize メソッドでイベントリスナーを設定
FormHandler.prototype.initialize = function() {
var self = this;
// submitBtn にクリックイベントリスナーを追加
this.submitBtn.addEventListener('click', function() {
self.handleSubmit('input1', 'input2');
});
// submitBtn にマウスオーバーイベントリスナーを追加
this.submitBtn.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});
// submitBtn にマウスアウトイベントリスナーを追加
this.submitBtn.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});
// submitBtn2 にクリックイベントリスナーを追加
this.submitBtn2.addEventListener('click', function() {
self.handleSubmit('input3', 'input4');
});
// submitBtn2 にマウスオーバーイベントリスナーを追加
this.submitBtn2.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});
// submitBtn2 にマウスアウトイベントリスナーを追加
this.submitBtn2.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});
};
// handleSubmit メソッドで入力値の検証と結果表示
FormHandler.prototype.handleSubmit = function(inputId1, inputId2) {
var input1 = document.getElementById(inputId1).value;
var input2 = document.getElementById(inputId2).value;
// エラーメッセージと結果表示をクリア
this.errorMessage.innerHTML = "";
this.result.innerHTML = "";
// 入力値の検証
if (input1 === '' || input2 === '') {
this.errorMessage.textContent = "未入力の項目があります";
} else {
this.result.textContent = "入力1: " + input1 + " 入力2: " + input2;
}
};
// FormHandler オブジェクトの生成
new FormHandler();
})();
</script>
</head>
<body>
<h1>テスト</h1>
<div>
<label for="input1">入力1</label>
<input type="text" id="input1">
<label for="input2">入力2</label>
<input type="text" id="input2">
<button id="submitBtn">送信</button>
</div>
<div>
<label for="input3">入力3</label>
<input type="text" id="input3">
<label for="input4">入力4</label>
<input type="text" id="input4">
<button id="submitBtn2">送信2</button>
</div>
<span id="errorMessage" style="color: red;"></span>
<span id="result"></span>
</body>
</html>
HTMLとJavascriptでモック画面を作成
画面の内容
・検索ボタンを押下したら、検索結果が表示される
画面項目
・ID(テキストボックス)
・名前(テキストボックス)
・検索ボタン
・Excelダウンロードボタン
条件:
・検索ボタンを押下したら画面に検索結果が表示される
・検索結果は、テーブルで20個表示
・10個以上データがあれば、次へボタン(ページング)が表示される
・Excelダウンロードボタンを押下したら、検索結果をExcelでダウンロードする
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>検索モック画面</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
#results {
margin-top: 20px;
}
#resultTable {
width: 100%;
border-collapse: collapse;
}
#resultTable th, #resultTable td {
border: 1px solid #ddd ;
padding: 8px;
}
#pagination {
margin-top: 10px;
}
#pagination button {
display: none; /* 初期状態では非表示 */
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const searchBtn = document.getElementById('searchBtn');
const downloadBtn = document.getElementById('downloadBtn');
const nextBtn = document.getElementById('nextBtn');
const resultTableBody = document.querySelector('#resultTable tbody');
let currentPage = 0;
const pageSize = 10;
let searchData = []; // 検索結果を格納する配列
// ダミーデータを生成する関数
function generateMockData(count) {
let data = [];
for(let i = 1; i <= count; i++) {
// IDは1から始まる連番、名前は「名前1」、「名前2」...という形式で生成
// 配列にオブジェクトを追加
data.push({'id': i, 'name': '名前' + i});
}
return data;
}
// データを表示する関数
function displayData(page) {
// 表示されているテーブルの内容をクリアする。
resultTableBody.innerHTML = '';
// ページ番号に基づいて表示するデータの開始インデックスと終了インデックスを計算する
const start = page * pageSize;
const end = start + pageSize;
// データの一部を抽出する
const pageData = searchData.slice(start, end);
// 抽出したデータをテーブルに追加する
pageData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
resultTableBody.appendChild(row);
});
// 次のページが存在するかどうかをチェックし、「次へ」ボタンの表示を制御する
nextBtn.style.display = searchData.length > end ? 'block' : 'none';
}
// 検索ボタンのクリックイベントリスナー
searchBtn.addEventListener('click', function() {
// ここでサーバーからデータを取得する処理を行う
// ダミーデータを使用しているため、generateMockData関数を呼び出す
searchData = generateMockData(20); // 20個のダミーデータを生成
currentPage = 0;
displayData(currentPage);
});
// 次へボタンのクリックイベントリスナー
nextBtn.addEventListener('click', function() {
currentPage++;
displayData(currentPage);
});
// Excelダウンロードボタンのクリックイベントリスナー
downloadBtn.addEventListener('click', function() {
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += "ID,名前\n"; // ヘッダー
searchData.forEach(item => {
csvContent += `${item.id},${item.name}\n`;
});
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "search_results.csv");
document.body.appendChild(link); // Firefox対応
link.click();
document.body.removeChild(link); // リンクを削除
});
});
</script>
</head>
<body>
<h1>検索モック画面</h1>
<div>
<label for="searchId">ID:</label>
<input type="text" id="searchId">
<label for="searchName">名前:</label>
<input type="text" id="searchName">
<button id="searchBtn">検索</button>
<button id="downloadBtn">Excelダウンロード</button>
</div>
<div id="results">
<table id="resultTable">
<thead>
<tr>
<th>ID</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<!-- 検索結果がここに表示されます -->
</tbody>
</table>
</div>
<div id="pagination">
<button id="nextBtn">次へ</button>
</div>
<script src="script.js"></script>
</body>
</html>
検索ボタン (#searchBtn)
searchBtn.addEventListener('click', function() {
// ここでサーバーからデータを取得する処理を行う
// ダミーデータを使用しているため、generateMockData関数を呼び出す
searchData = generateMockData(20); // 20個のダミーデータを生成
currentPage = 0;
displayData(currentPage);
});
説明:
検索ボタンがクリックされると、click イベントが発生し、無名関数が実行される
通常はサーバーからデータを取得する処理がここで行われる(generateMockData 関数)
generateMockData 関数は20個のダミーデータを生成し、それを searchData 配列に格納する
currentPage を 0 に設定し、displayData 関数を呼び出して、現在のページのデータを表示する
次へボタン (#nextBtn)
nextBtn.addEventListener('click', function() {
currentPage++;
displayData(currentPage);
});
説明:
次へボタンがクリックされると、click イベントが発生し、無名関数が実行される
currentPage の値を1つ増やす
displayData 関数を呼び出して、次のページのデータを表示する
Excelダウンロードボタン (#downloadBtn)
downloadBtn.addEventListener('click', function() {
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += "ID,名前\n"; // ヘッダー
searchData.forEach(item => {
csvContent += `${item.id},${item.name}\n`;
});
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "search_results.csv");
document.body.appendChild(link); // Firefox対応
link.click();
document.body.removeChild(link); // リンクを削除
});
説明:
Excelダウンロードボタンがクリックされると、click イベントが発生し、無名関数が実行される
csvContent 変数に CSV ファイルの内容を作成する
まずヘッダー行として "ID,名前" を追加するsearchData 配列内の各データをループし、それぞれの id と name を CSV フォーマットで csvContent に追加する
CSV コンテンツを encodeURI 関数でエンコードし、
データ URI を作成する新しいリンク (<a> 要素) を作成し、その href 属性にエンコードされた URI を設定し、download 属性にファイル名を設定する。
作成したリンクをドキュメントに追加し、
クリックしてダウンロードを開始するダウンロードが開始された後、リンクをドキュメントから削除する
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>検索モック画面</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
#results {
margin-top: 20px;
}
#resultTable {
width: 100%;
border-collapse: collapse;
}
#resultTable th, #resultTable td {
border: 1px solid #ddd ;
padding: 8px;
}
#pagination {
margin-top: 10px;
}
#pagination button {
display: none; /* 初期状態では非表示 */
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const searchBtn = document.getElementById('searchBtn');
const downloadBtn = document.getElementById('downloadBtn');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
const goToPageBtn = document.getElementById('goToPageBtn');
const pageInput = document.getElementById('pageInput');
const resultTableBody = document.querySelector('#resultTable tbody');
let currentPage = 0;
const pageSize = 10;
let searchData = []; // 検索結果を格納する配列
// ダミーデータを生成する関数
function generateMockData(count) {
let data = [];
for (let i = 1; i <= count; i++) {
data.push({'id': i, 'name': '名前' + i});
}
return data;
}
// データを表示する関数
function displayData(page) {
resultTableBody.innerHTML = '';
const start = page * pageSize;
const end = start + pageSize;
const pageData = searchData.slice(start, end);
pageData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
resultTableBody.appendChild(row);
});
nextBtn.style.display = searchData.length > end ? 'block' : 'none';
prevBtn.style.display = currentPage > 0 ? 'block' : 'none';
}
// 検索ボタンのクリックイベントリスナー
searchBtn.addEventListener('click', function() {
searchData = generateMockData(50); // 50個のダミーデータを生成
currentPage = 0;
displayData(currentPage);
});
// 次へボタンのクリックイベントリスナー
nextBtn.addEventListener('click', function() {
currentPage++;
displayData(currentPage);
});
// 戻るボタンのクリックイベントリスナー
prevBtn.addEventListener('click', function() {
currentPage--;
displayData(currentPage);
});
// ページ遷移ボタンのクリックイベントリスナー
goToPageBtn.addEventListener('click', function() {
const page = parseInt(pageInput.value, 10);
if (!isNaN(page) && page >= 0 && page < Math.ceil(searchData.length / pageSize)) {
currentPage = page;
displayData(currentPage);
} else {
alert('無効なページ番号です。');
}
});
// Excelダウンロードボタンのクリックイベントリスナー
downloadBtn.addEventListener('click', function() {
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += "ID,名前\n"; // ヘッダー
searchData.forEach(item => {
csvContent += `${item.id},${item.name}\n`;
});
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "search_results.csv");
document.body.appendChild(link); // Firefox対応
link.click();
document.body.removeChild(link); // リンクを削除
});
});
</script>
</head>
<body>
<h1>検索モック画面</h1>
<div>
<label for="searchId">ID:</label>
<input type="text" id="searchId">
<label for="searchName">名前:</label>
<input type="text" id="searchName">
<button id="searchBtn">検索</button>
<button id="downloadBtn">Excelダウンロード</button>
</div>
<div id="results">
<table id="resultTable">
<thead>
<tr>
<th>ID</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<!-- 検索結果がここに表示されます -->
</tbody>
</table>
</div>
<div id="pagination">
<button id="prevBtn">戻る</button>
<input type="text" id="pageInput" placeholder="ページ番号">
<button id="goToPageBtn">移動</button>
<button id="nextBtn">次へ</button>
</div>
</body>
</html>HTMLとJavascriptでモック画面を作成 改良版
tabpage1の検索項目: ID,名前
tabpage2の検索項目: ID,品番,住所
tabpage3の検索項目: ID,伝票番号
tabpage1の検索結果項目: ID,名前
tabpage2の検索結果項目: ID,品番,住所
tabpage3の検索結果項目: ID,伝票番号
Excelダウンロードも文字化けしないようにした
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>在庫管理システム</title>
<style type="text/css">
.search_title {
background-color: #b9faf8 ;
color: #1100ff ;
font-size: 15pt;
font-family: MSゴシック;
}
#tabcontrol a {
display: inline-block;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: black;
border-radius: 0.75em 0.75em 0 0;
padding: 0.75em 1em;
text-decoration: none;
color: black;
background-color: white;
font-weight: bold;
position: relative;
}
#tabcontrol a:hover {
text-decoration: underline;
}
#tabbody div {
border: 1px solid black;
margin-top: -1px;
padding: 1em;
background-color: white;
position: relative;
z-index: 0;
}
#tabcontrol a:nth-child(1),
#tabbody div:nth-child(1) {
background-color: #ffffdd ;
}
#tabcontrol a:nth-child(2),
#tabbody div:nth-child(2) {
background-color: #ddffdd ;
}
#tabcontrol a:nth-child(3),
#tabbody div:nth-child(3) {
background-color: #ddddff ;
}
.tab-wrap {
display: flex;
flex-wrap: wrap;
}
.tab-label {
color: White;
background: LightGray;
margin-right: 5px;
padding: 3px 12px;
order: -1;
}
.tab-content {
width: 100%;
display: none;
padding: 10px 20px;
background-color: #eee ;
border: 1px solid #ccc ;
}
.tab-switch:checked+.tab-label {
background: rgb(231, 85, 1);
}
.tab-switch:checked+.tab-label+.tab-content {
display: block;
}
.tab-switch {
display: none;
}
.list_box_trn {
width: 1000px;
border: none;
border-collapse: collapse;
}
.list_box_trn td {
border: 1px #000000 solid;
padding: 3px;
}
#prevBtn ,
#pageInput ,
#goToPageBtn ,
#nextBtn ,
#goToTop ,
#goToLast {
display: none;
}
#prevBtn ,
#goToPageBtn ,
#nextBtn ,
#goToTop ,
#goToLast ,
#pageLinks {
text-decoration: underline;
}
#prevBtn :hover,
#goToPageBtn :hover,
#nextBtn :hover,
#goToTop :hover,
#goToLast :hover,
#pageLinks >span:hover {
color: blue;
}
</style>
</head>
<body>
<p class="search_title" id="tabcontrol">
在庫管理システム 情報照会機能
<a href="#tabpage1">入荷状況</a>
<a href="#tabpage2">出荷状況</a>
<a href="#tabpage3">在庫状況</a>
荷主名・倉庫名
<button id="searchBtn">検索</button>
<button id="downloadBtn">Excelダウンロード</button>
</p>
<div class="mainbox">
<div class="mainin">
<table class="main_table">
<tr>
<td>
<table class="item_title">
<tr>
<td>抽出条件指定</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="tabbody">
<div id="tabpage1">
<!-- タブ1の中身: 入荷状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="name">名前</label>
<input type="text" id="name" maxlength="20">
</div>
<div id="tabpage2">
<!-- タブ2の中身: 出荷状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="item">品番</label>
<input type="text" id="item" maxlength="20">
<label for="address">住所</label>
<input type="text" id="address" maxlength="50">
</div>
<div id="tabpage3">
<!-- タブ3の中身: 在庫状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="receiptNo">伝票番号</label>
<input type="text" id="receiptNo" maxlength="20">
</div>
</div>
</td>
</tr>
<tr>
<td>
<table class="item_title">
<tr>
<td>抽出結果一覧</td>
</tr>
<tr>
<td><input type="text" id="pageInput" placeholder="ページ番号"></td>
<td><span id="goToPageBtn">移動</span></td>
<td>
<div id="pageLinks"></div>
</td>
<td><span id="goToTop"><<先頭</span></td>
<td><span id="prevBtn"><前へ</span></td>
<td></td>
<td><span id="nextBtn">次へ></span></td>
<td><span id="goToLast">最後>></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="list_box_trn">
<thead></thead>
<tbody>
<!-- ここに検索結果が表示される -->
</tbody>
</table>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const searchBtn = document.getElementById('searchBtn');
const downloadBtn = document.getElementById('downloadBtn');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
const goToTop = document.getElementById('goToTop');
const goToLast = document.getElementById('goToLast');
const goToPageBtn = document.getElementById('goToPageBtn');
const pageInput = document.getElementById('pageInput');
const resultHeader = document.querySelector('.list_box_trn thead');
const resultBody = document.querySelector('.list_box_trn tbody');
const pageLinksDiv = document.getElementById('pageLinks');
var tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
var pages = document.getElementById('tabbody').getElementsByTagName('div');
var presentTargetId = "tabpage1";
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = changeTab;
}
tabs[0].onclick();
let currentPage = 0;
const pageSize = 10;
let searchData = [];
function changeTab() {
var targetid = this.href.substring(this.href.indexOf('#') + 1, this.href.length);
for (var i = 0; i < pages.length; i++) {
if (pages[i].id != targetid) {
pages[i].style.display = "none";
} else {
pages[i].style.display = "block";
}
}
for (var i = 0; i < tabs.length; i++) {
tabs[i].style.zIndex = "0";
}
this.style.zIndex = "10";
presentTargetId = targetid;
return false;
}
function generateMockData(count) {
let data = [];
if (presentTargetId == "tabpage1") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'name': '名前' + i });
}
} else if (presentTargetId == "tabpage2") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'item': '品番' + i, 'address': '住所' + i });
}
} else if (presentTargetId == "tabpage3") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'receiptNo': '伝票番号' + i });
}
}
return data;
}
function displayData(page) {
resultHeader.innerHTML = '';
resultBody.innerHTML = '';
const start = page * pageSize;
const end = start + pageSize;
const pageData = searchData.slice(start, end);
if (presentTargetId == "tabpage1") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>名前</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
resultBody.appendChild(row);
});
} else if (presentTargetId == "tabpage2") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>品番</td><td>住所</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.item}</td><td>${item.address}</td>`;
resultBody.appendChild(row);
});
} else if (presentTargetId == "tabpage3") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>伝票番号</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.receiptNo}</td>`;
resultBody.appendChild(row);
});
}
nextBtn.style.display = searchData.length > end ? 'block' : 'none';
prevBtn.style.display = currentPage > 0 ? 'block' : 'none';
pageInput.style.display = searchData.length > end ? 'block' : 'none';
goToPageBtn.style.display = searchData.length > end ? 'block' : 'none';
goToTop.style.display = currentPage > 0 ? 'block' : 'none';
goToLast.style.display = searchData.length > end ? 'block' : 'none';
generatePageLinks();
}
function generatePageLinks() {
pageLinksDiv.innerHTML = '';
const totalPages = Math.ceil(searchData.length / pageSize);
for (let i = 0; i < totalPages; i++) {
const pageLink = document.createElement('span');
pageLink.textContent = i + 1 + ' ';
pageLink.className = 'page-link';
pageLink.addEventListener('click', function() {
currentPage = i;
displayData(currentPage);
});
pageLinksDiv.appendChild(pageLink);
}
}
searchBtn.addEventListener('click', function() {
searchData = generateMockData(50);
currentPage = 0;
displayData(currentPage);
});
nextBtn.addEventListener('click', function() {
currentPage++;
displayData(currentPage);
});
prevBtn.addEventListener('click', function() {
currentPage--;
displayData(currentPage);
});
goToTop.addEventListener('click', function() {
displayData(0);
});
goToLast.addEventListener('click', function() {
currentPage = Math.floor(searchData.length / pageSize) - 1;
displayData(currentPage);
});
goToPageBtn.addEventListener('click', function() {
const page = parseInt(pageInput.value - 1, 10);
if (!isNaN(page) && page >= 0 && page < Math.ceil(searchData.length / pageSize)) {
currentPage = page;
displayData(currentPage);
} else {
alert('無効なページ番号です。');
}
});
downloadBtn.addEventListener('click', function() {
let csvContent = "\uFEFF";
if (presentTargetId == "tabpage1") {
csvContent += "ID,名前\n";
searchData.forEach(item => {
csvContent += `${item.id},${item.name}\n`;
});
} else if (presentTargetId == "tabpage2") {
csvContent += "ID,品番,住所\n";
searchData.forEach(item => {
csvContent += `${item.id},${item.item},${item.address}\n`;
});
} else if (presentTargetId == "tabpage3") {
csvContent += "ID,伝票番号\n";
searchData.forEach(item => {
csvContent += `${item.id},${item.receiptNo}\n`;
});
}
const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "search_results.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
});
</script>
</body>
</html>
下記の改善点をさらに追加
Object、Date、JSON、Array、Math、Error、RegExp の使用：
Dateオブジェクトで現在の日付を取得。
JSONオブジェクトでデータをJSON文字列に変換。
RegExpオブジェクトで正規表現を使用。
Mathオブジェクトで乱数を生成。
カスタムエラーを作成。
NaN判定。
演算子の使用：
typeof演算子でオブジェクトの型を確認。
in演算子でオブジェクトにプロパティが存在するか確認。
delete演算子でオブジェクトのプロパティを削除。
void演算子で無名関数を即時実行。
条件式の使用：
switch文でタブIDに応じた処理を実行。
for、while、do-whileループを使用
関数のパターン：
無名関数を即時実行。
名前付き関数を定義。
クロージャを使用。
Function.call()の使用：
関数をFunction.call()で呼び出し。
コンストラクタ関数とnewの使用：
Productというコンストラクタ関数を定義し、newキーワードでインスタンスを作成。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>在庫管理システム</title>
<style type="text/css">
.search_title {
background-color: #b9faf8 ;
color: #1100ff ;
font-size: 15pt;
font-family: MSゴシック;
}
#tabcontrol a {
display: inline-block;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: black;
border-radius: 0.75em 0.75em 0 0;
padding: 0.75em 1em;
text-decoration: none;
color: black;
background-color: white;
font-weight: bold;
position: relative;
}
#tabcontrol a:hover {
text-decoration: underline;
}
#tabbody div {
border: 1px solid black;
margin-top: -1px;
padding: 1em;
background-color: white;
position: relative;
z-index: 0;
}
#tabcontrol a:nth-child(1),
#tabbody div:nth-child(1) {
background-color: #ffffdd ;
}
#tabcontrol a:nth-child(2),
#tabbody div:nth-child(2) {
background-color: #ddffdd ;
}
#tabcontrol a:nth-child(3),
#tabbody div:nth-child(3) {
background-color: #ddddff ;
}
.tab-wrap {
display: flex;
flex-wrap: wrap;
}
.tab-label {
color: White;
background: LightGray;
margin-right: 5px;
padding: 3px 12px;
order: -1;
}
.tab-content {
width: 100%;
display: none;
padding: 10px 20px;
background-color: #eee ;
border: 1px solid #ccc ;
}
.tab-switch:checked+.tab-label {
background: rgb(231, 85, 1);
}
.tab-switch:checked+.tab-label+.tab-content {
display: block;
}
.tab-switch {
display: none;
}
.list_box_trn {
width: 1000px;
border: none;
border-collapse: collapse;
}
.list_box_trn td {
border: 1px #000000 solid;
padding: 3px;
}
#prevBtn ,
#pageInput ,
#goToPageBtn ,
#nextBtn ,
#goToTop ,
#goToLast {
display: none;
}
#prevBtn ,
#goToPageBtn ,
#nextBtn ,
#goToTop ,
#goToLast ,
#pageLinks {
text-decoration: underline;
}
#prevBtn :hover,
#goToPageBtn :hover,
#nextBtn :hover,
#goToTop :hover,
#goToLast :hover,
#pageLinks >span:hover {
color: blue;
}
</style>
</head>
<body>
<p class="search_title" id="tabcontrol">
在庫管理システム 情報照会機能
<a href="#tabpage1">入荷状況</a>
<a href="#tabpage2">出荷状況</a>
<a href="#tabpage3">在庫状況</a>
荷主名・倉庫名
<button id="searchBtn">検索</button>
<button id="downloadBtn">Excelダウンロード</button>
</p>
<div class="mainbox">
<div class="mainin">
<table class="main_table">
<tr>
<td>
<table class="item_title">
<tr>
<td>抽出条件指定</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="tabbody">
<div id="tabpage1">
<!-- タブ1の中身: 入荷状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="name">名前</label>
<input type="text" id="name" maxlength="20">
</div>
<div id="tabpage2">
<!-- タブ2の中身: 出荷状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="item">品番</label>
<input type="text" id="item" maxlength="20">
<label for="address">住所</label>
<input type="text" id="address" maxlength="50">
</div>
<div id="tabpage3">
<!-- タブ3の中身: 在庫状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="receiptNo">伝票番号</label>
<input type="text" id="receiptNo" maxlength="20">
</div>
</div>
</td>
</tr>
<tr>
<td>
<table class="item_title">
<tr>
<td>抽出結果一覧</td>
</tr>
<tr>
<td><input type="text" id="pageInput" placeholder="ページ番号"></td>
<td><span id="goToPageBtn">移動</span></td>
<td>
<div id="pageLinks"></div>
</td>
<td><span id="goToTop"><<先頭</span></td>
<td><span id="prevBtn"><前へ</span></td>
<td></td>
<td><span id="nextBtn">次へ></span></td>
<td><span id="goToLast">最後>></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="list_box_trn">
<thead></thead>
<tbody>
<!-- ここに検索結果が表示される -->
</tbody>
</table>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
(function () {
document.addEventListener('DOMContentLoaded', function () {
// 各種ボタンとHTML要素を取得
const searchBtn = document.getElementById('searchBtn');
const downloadBtn = document.getElementById('downloadBtn');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
const goToTop = document.getElementById('goToTop');
const goToLast = document.getElementById('goToLast');
const goToPageBtn = document.getElementById('goToPageBtn');
const pageInput = document.getElementById('pageInput');
const resultHeader = document.querySelector('.list_box_trn thead');
const resultBody = document.querySelector('.list_box_trn tbody');
const pageLinksDiv = document.getElementById('pageLinks');
const tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
const pages = document.getElementById('tabbody').getElementsByTagName('div');
let presentTargetId = "tabpage1";
// タブのクリックイベントを設定
for (let i = 0; i < tabs.length; i++) {
tabs[i].onclick = changeTab;
}
tabs[0].onclick();
let currentPage = 0;
const pageSize = 10;
let searchData = [];
// タブ切り替え関数
function changeTab() {
const targetid = this.href.substring(this.href.indexOf('#') + 1, this.href.length);
for (let i = 0; i < pages.length; i++) {
if (pages[i].id != targetid) {
pages[i].style.display = "none";
} else {
pages[i].style.display = "block";
}
}
for (let i = 0; i < tabs.length; i++) {
tabs[i].style.zIndex = "0";
}
this.style.zIndex = "10";
presentTargetId = targetid;
return false;
}
// モックデータ生成関数
function generateMockData(count) {
let data = [];
if (presentTargetId === "tabpage1") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'name': '名前' + i });
}
} else if (presentTargetId === "tabpage2") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'item': '品番' + i, 'address': '住所' + i });
}
} else if (presentTargetId === "tabpage3") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'receiptNo': '伝票番号' + i });
}
}
return data;
}
// データ表示関数
function displayData(page) {
resultHeader.innerHTML = '';
resultBody.innerHTML = '';
const start = page * pageSize;
const end = start + pageSize;
const pageData = searchData.slice(start, end);
if (presentTargetId === "tabpage1") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>名前</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(function (item) {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
resultBody.appendChild(row);
});
} else if (presentTargetId === "tabpage2") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>品番</td><td>住所</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(function (item) {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.item}</td><td>${item.address}</td>`;
resultBody.appendChild(row);
});
} else if (presentTargetId === "tabpage3") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>伝票番号</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(function (item) {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.receiptNo}</td>`;
resultBody.appendChild(row);
});
}
nextBtn.style.display = searchData.length > end ? 'block' : 'none';
prevBtn.style.display = currentPage > 0 ? 'block' : 'none';
pageInput.style.display = searchData.length > end ? 'block' : 'none';
goToPageBtn.style.display = searchData.length > end ? 'block' : 'none';
goToTop.style.display = currentPage > 0 ? 'block' : 'none';
goToLast.style.display = searchData.length > end ? 'block' : 'none';
generatePageLinks();
}
// ページリンク生成関数
function generatePageLinks() {
pageLinksDiv.innerHTML = '';
const totalPages = Math.ceil(searchData.length / pageSize);
for (let i = 0; i < totalPages; i++) {
const pageLink = document.createElement('span');
pageLink.textContent = i + 1 + ' ';
pageLink.className = 'page-link';
pageLink.addEventListener('click', function () {
currentPage = i;
displayData(currentPage);
});
pageLinksDiv.appendChild(pageLink);
}
}
// 検索ボタンクリックイベント
searchBtn.addEventListener('click', function () {
searchData = generateMockData(50);
currentPage = 0;
displayData(currentPage);
});
// 次へボタンクリックイベント
nextBtn.addEventListener('click', function () {
currentPage++;
displayData(currentPage);
});
// 前へボタンクリックイベント
prevBtn.addEventListener('click', function () {
currentPage--;
displayData(currentPage);
});
// 先頭ボタンクリックイベント
goToTop.addEventListener('click', function () {
displayData(0);
});
// 最後ボタンクリックイベント
goToLast.addEventListener('click', function () {
currentPage = Math.floor(searchData.length / pageSize) - 1;
displayData(currentPage);
});
// ページ移動ボタンクリックイベント
goToPageBtn.addEventListener('click', function () {
const page = parseInt(pageInput.value - 1, 10);
if (!isNaN(page) && page >= 0 && page < Math.ceil(searchData.length / pageSize)) {
currentPage = page;
displayData(currentPage);
} else {
alert('無効なページ番号です。');
}
});
// ダウンロードボタンクリックイベント
downloadBtn.addEventListener('click', function () {
let csvContent = "\uFEFF";
if (presentTargetId === "tabpage1") {
csvContent += "ID,名前\n";
searchData.forEach(function (item) {
csvContent += `${item.id},${item.name}\n`;
});
} else if (presentTargetId === "tabpage2") {
csvContent += "ID,品番,住所\n";
searchData.forEach(function (item) {
csvContent += `${item.id},${item.item},${item.address}\n`;
});
} else if (presentTargetId === "tabpage3") {
csvContent += "ID,伝票番号\n";
searchData.forEach(function (item) {
csvContent += `${item.id},${item.receiptNo}\n`;
});
}
const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "search_results.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// with文の使用例
with (Math) {
console.log(`Random number: ${random()}`);
}
// カスタムエラーの作成
function CustomError(message) {
Error.call(this, message);
this.name = "CustomError";
}
CustomError.prototype = Object.create(Error.prototype);
// 在庫管理クラスの定義
function StockManager() {
this.tabs = tabs;
this.pages = pages;
}
// 在庫管理クラスのメソッド定義
StockManager.prototype.showTab = function (index) {
if (index < 0 || index >= this.tabs.length) throw new CustomError("Index out of bounds");
this.tabs[index].click();
}
// 在庫管理インスタンスの生成とメソッドの使用
const manager = new StockManager();
manager.showTab(1);
// クロージャの使用例
const createAdder = function (x) {
return function (y) {
return x + y;
};
};
const add5 = createAdder(5);
console.log(add5(10)); // 15
// Dateオブジェクトの使用例
const currentDate = new Date();
console.log(`Current Date: ${currentDate}`);
// JSONオブジェクトの使用例
const jsonData = JSON.stringify(searchData);
console.log(`JSON Data: ${jsonData}`);
// RegExpオブジェクトの使用例
const regExp = new RegExp('名前');
console.log(`RegExp Test: ${regExp.test('名前1')}`);
// NaNの判定例
const notANumber = parseInt('abc');
if (isNaN(notANumber)) {
console.log('This is NaN');
}
// typeofの使用例
if (typeof searchBtn === 'object') {
console.log('searchBtn is an object');
}
// in演算子の使用例
if ('length' in searchData) {
console.log('searchData has length property');
}
// delete演算子の使用例
delete searchData[0];
console.log(searchData);
// void演算子の使用例
void function () {
console.log('This is void');
}();
// forループの使用例
for (let i = 0; i < 5; i++) {
console.log(`For loop iteration: ${i}`);
}
// whileループの使用例
let j = 0;
while (j < 5) {
console.log(`While loop iteration: ${j}`);
j++;
}
// do-whileループの使用例
let k = 0;
do {
console.log(`Do-while loop iteration: ${k}`);
k++;
} while (k < 5);
// switch文の使用例
const tabId = 'tabpage1';
switch (tabId) {
case 'tabpage1':
console.log('Tab 1 selected');
break;
case 'tabpage2':
console.log('Tab 2 selected');
break;
case 'tabpage3':
console.log('Tab 3 selected');
break;
default:
console.log('Unknown tab');
}
// Function.call()の使用例
function greet(message) {
console.log(message);
}
greet.call(this, 'Hello from Function.call()');
// コンストラクタ関数とnewの使用例
function Product(name, price) {
this.name = name;
this.price = price;
}
const product = new Product('Laptop', 1500);
console.log(`Product Name: ${product.name}, Price: ${product.price}`);
});
})();
</script>
</body>
</html>
演算子、オブジェクトを複数使うページ
条件:
・以下のグローバルオブジェクトのプロパティとメソッドを使う
Object
Date
JSON
Array
Math
Error
RegExp
・NaN、Identify、undefined 、の判定を使う
・下記の演算子を使う
in
instanceof
<<
>>
delete
typeof
void
・下記の条件式を使う
switch / if / for / while / do-while
・下記の3つのパターンの関数を使う
無名関数:
名前付き関数
即時実行関数
・Function.call()を使う
・コンストラクタ関数とnewを使う
・スコープチェーンを使う
・クロージャを使う
・Withを使う
<!--
グローバルオブジェクトのプロパティとメソッドの使用：
Dateオブジェクトを使って現在の日付を表示。
JSONオブジェクトを使ってデータをJSON形式に変換。
RegExpオブジェクトを使って文字列のパターンマッチングを実行。
Mathオブジェクトを使って乱数を生成。
カスタムエラーを作成するためにErrorオブジェクトを使用。
NaN、Identify、undefined の判定を使用：
isNaNを使ってNaNの判定。
typeofを使ってオブジェクトの型を判定。
in演算子を使ってオブジェクトにプロパティが存在するか確認。
演算子の使用：
typeof、in、delete、void演算子の使用例を追加。
条件式の使用：
switch文の使用例を追加。
for、while、do-whileループの使用例を追加。
関数のパターン：
無名関数を即時実行。
名前付き関数を定義。
クロージャを使用。
Function.call()の使用：
Function.call()を使って関数を呼び出し。
コンストラクタ関数とnewの使用：
Productというコンストラクタ関数を定義し、newキーワードでインスタンスを作成。
スコープチェーンの使用：
関数内でのスコープチェーンを示すために変数を宣言。
クロージャの使用：
クロージャを使った関数の例を追加。
withの使用：
with文の使用例を追加。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<style>
.title {
background-color: #b9faf8 ;
color: #1100ff ;
font-size: 15pt;
font-family: MSゴシック;
}
.content {
margin: 20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1 class="title">サンプルページ</h1>
<div class="content">
<p id="currentDate"></p>
<p id="jsonOutput"></p>
<p id="regExpResult"></p>
<button id="generateDataBtn">データ生成</button>
<div id="dataContainer" class="hidden">
<h2>生成されたデータ</h2>
<ul id="dataList"></ul>
</div>
</div>
<script type="text/javascript">
(function() {
document.addEventListener('DOMContentLoaded', function() {
const generateDataBtn = document.getElementById('generateDataBtn');
const dataContainer = document.getElementById('dataContainer');
const dataList = document.getElementById('dataList');
const currentDateElem = document.getElementById('currentDate');
const jsonOutputElem = document.getElementById('jsonOutput');
const regExpResultElem = document.getElementById('regExpResult');
// Dateオブジェクトの使用
const currentDate = new Date();
currentDateElem.textContent = `Current Date: ${currentDate}`;
// JSONオブジェクトの使用
const sampleData = { id: 1, name: "Sample Data" };
const jsonData = JSON.stringify(sampleData);
jsonOutputElem.textContent = `JSON Data: ${jsonData}`;
// RegExpオブジェクトの使用
const regExp = new RegExp('Sample');
const regExpTestResult = regExp.test(sampleData.name);
regExpResultElem.textContent = `RegExp Test Result: ${regExpTestResult}`;
// データ生成関数
function generateData(count) {
let data = [];
for (let i = 0; i < count; i++) {
data.push({ id: i + 1, name: 'データ' + (i + 1) });
}
return data;
}
// 関数のパターン（無名関数）
generateDataBtn.addEventListener('click', function() {
const data = generateData(10);
dataList.innerHTML = '';
data.forEach(function(item) {
const listItem = document.createElement('li');
listItem.textContent = `ID: ${item.id}, Name: ${item.name}`;
dataList.appendChild(listItem);
});
dataContainer.classList.remove('hidden');
// JSON.stringify()の使用
const jsonData = JSON.stringify(data);
console.log(`Generated JSON Data: ${jsonData}`);
});
// with文の使用
with (Math) {
console.log(`Random number: ${random()}`);
}
// クロージャの使用例
const createAdder = function(x) {
return function(y) {
return x + y;
};
};
const add5 = createAdder(5);
console.log(add5(10)); // 15
// カスタムエラーの作成
function CustomError(message) {
Error.call(this, message);
this.name = "CustomError";
}
CustomError.prototype = Object.create(Error.prototype);
// コンストラクタ関数とnewの使用例
function Product(name, price) {
this.name = name;
this.price = price;
}
const product = new Product('Laptop', 1500);
console.log(`Product Name: ${product.name}, Price: ${product.price}`);
// NaN判定の例
const notANumber = parseInt('abc');
if (isNaN(notANumber)) {
console.log('This is NaN');
}
// typeof演算子の使用例
if (typeof generateDataBtn === 'object') {
console.log('generateDataBtn is an object');
}
// in演算子の使用例
if ('length' in sampleData) {
console.log('sampleData has length property');
} else {
console.log('sampleData does not have length property');
}
// delete演算子の使用例
delete sampleData.name;
console.log(sampleData);
// void演算子の使用例
void function() {
console.log('This is void');
}();
// forループの使用例
for (let i = 0; i < 5; i++) {
console.log(`For loop iteration: ${i}`);
}
// whileループの使用例
let j = 0;
while (j < 5) {
console.log(`While loop iteration: ${j}`);
j++;
}
// do-whileループの使用例
let k = 0;
do {
console.log(`Do-while loop iteration: ${k}`);
k++;
} while (k < 5);
// switch文の使用例
const tabId = 'tabpage1';
switch (tabId) {
case 'tabpage1':
console.log('Tab 1 selected');
break;
case 'tabpage2':
console.log('Tab 2 selected');
break;
case 'tabpage3':
console.log('Tab 3 selected');
break;
default:
console.log('Unknown tab');
}
// Function.call()の使用例
function greet(message) {
console.log(message);
}
greet.call(this, 'Hello from Function.call()');
});
})();
</script>
</body>
</html>
イベントを追加したページ
<!--
フォームに関するイベントの追加：
blur、change、contextmenu、focus、input、invalid、select、submit、formchange、forminputイベントをフォーム要素に追加。
キーボード操作のイベントの追加：
keydown、keypress、keyupイベントをドキュメントに追加。
マウス操作のイベントの追加:
click、dblclick、drag、dragend、dragenter、dragleave、dragover、dragstart、drop、mousedown、mousemove、mouseout、mouseover、mouseup、mousewheelイベントをドキュメントに追加。
loadイベントの追加：
loadイベントをウィンドウに追加。
with文の使用：
with文を使用してMathオブジェクトのメソッドを呼び出し。
カスタムエラーの作成：
CustomErrorを作成し、StockManagerクラスで使用。
クロージャの使用例：
createAdder関数でクロージャを作成し、例を追加。
Dateオブジェクトの使用例：
Dateオブジェクトを使用して現在の日付を表示。
JSONオブジェクトの使用例：
JSONオブジェクトを使用してデータをJSON形式に変換。
RegExpオブジェクトの使用例：
RegExpオブジェクトを使用して文字列のパターンマッチングを実行。
NaN判定の例：
isNaNを使用してNaNの判定を行う例を追加。
typeofの使用例:
typeof演算子を使用してオブジェクトの型を判定。
in演算子の使用例：
in演算子を使用してオブジェクトにプロパティが存在するか確認。
delete演算子の使用例：
delete演算子を使用してオブジェクトのプロパティを削除。
void演算子の使用例：
void演算子を使用して無名関数を即時実行。
forループの使用例：
forループの使用例を追加。
whileループの使用例：
whileループの使用例を追加。
do-whileループの使用例：
do-whileループの使用例を追加。
switch文の使用例：
switch文の使用例を追加。
Function.call()の使用例：
Function.call()を使用して関数を呼び出し。
コンストラクタ関数とnewの使用例：
Productというコンストラクタ関数を定義し、newキーワードでインスタンスを作成。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>在庫管理システム</title>
<style type="text/css">
.search_title {
background-color: #b9faf8 ;
color: #1100ff ;
font-size: 15pt;
font-family: MSゴシック;
}
#tabcontrol a {
display: inline-block;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: black;
border-radius: 0.75em 0.75em 0 0;
padding: 0.75em 1em;
text-decoration: none;
color: black;
background-color: white;
font-weight: bold;
position: relative;
}
#tabcontrol a:hover {
text-decoration: underline;
}
#tabbody div {
border: 1px solid black;
margin-top: -1px;
padding: 1em;
background-color: white;
position: relative;
z-index: 0;
}
#tabcontrol a:nth-child(1),
#tabbody div:nth-child(1) {
background-color: #ffffdd ;
}
#tabcontrol a:nth-child(2),
#tabbody div:nth-child(2) {
background-color: #ddffdd ;
}
#tabcontrol a:nth-child(3),
#tabbody div:nth-child(3) {
background-color: #ddddff ;
}
.tab-wrap {
display: flex;
flex-wrap: wrap;
}
.tab-label {
color: White;
background: LightGray;
margin-right: 5px;
padding: 3px 12px;
order: -1;
}
.tab-content {
width: 100%;
display: none;
padding: 10px 20px;
background-color: #eee ;
border: 1px solid #ccc ;
}
.tab-switch:checked+.tab-label {
background: rgb(231, 85, 1);
}
.tab-switch:checked+.tab-label+.tab-content {
display: block;
}
.tab-switch {
display: none;
}
.list_box_trn {
width: 1000px;
border: none;
border-collapse: collapse;
}
.list_box_trn td {
border: 1px #000000 solid;
padding: 3px;
}
#prevBtn ,
#pageInput ,
#goToPageBtn ,
#nextBtn ,
#goToTop ,
#goToLast {
display: none;
}
#prevBtn ,
#goToPageBtn ,
#nextBtn ,
#goToTop ,
#goToLast ,
#pageLinks {
text-decoration: underline;
}
#prevBtn :hover,
#goToPageBtn :hover,
#nextBtn :hover,
#goToTop :hover,
#goToLast :hover,
#pageLinks >span:hover {
color: blue;
}
</style>
</head>
<body>
<p class="search_title" id="tabcontrol">
在庫管理システム 情報照会機能
<a href="#tabpage1">入荷状況</a>
<a href="#tabpage2">出荷状況</a>
<a href="#tabpage3">在庫状況</a>
荷主名・倉庫名
<button id="searchBtn">検索</button>
<button id="downloadBtn">Excelダウンロード</button>
</p>
<div class="mainbox">
<div class="mainin">
<table class="main_table">
<tr>
<td>
<table class="item_title">
<tr>
<td>抽出条件指定</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="tabbody">
<div id="tabpage1">
<!-- タブ1の中身: 入荷状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="name">名前</label>
<input type="text" id="name" maxlength="20">
</div>
<div id="tabpage2">
<!-- タブ2の中身: 出荷状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="item">品番</label>
<input type="text" id="item" maxlength="20">
<label for="address">住所</label>
<input type="text" id="address" maxlength="50">
</div>
<div id="tabpage3">
<!-- タブ3の中身: 在庫状況 -->
<label for="id">ID</label>
<input type="text" id="id" maxlength="10">
<label for="receiptNo">伝票番号</label>
<input type="text" id="receiptNo" maxlength="20">
</div>
</div>
</td>
</tr>
<tr>
<td>
<table class="item_title">
<tr>
<td>抽出結果一覧</td>
</tr>
<tr>
<td><input type="text" id="pageInput" placeholder="ページ番号"></td>
<td><span id="goToPageBtn">移動</span></td>
<td>
<div id="pageLinks"></div>
</td>
<td><span id="goToTop"><<先頭</span></td>
<td><span id="prevBtn"><前へ</span></td>
<td></td>
<td><span id="nextBtn">次へ></span></td>
<td><span id="goToLast">最後>></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="list_box_trn">
<thead></thead>
<tbody>
<!-- ここに検索結果が表示される -->
</tbody>
</table>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
(function() {
document.addEventListener('DOMContentLoaded', function() {
const searchBtn = document.getElementById('searchBtn');
const downloadBtn = document.getElementById('downloadBtn');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
const goToTop = document.getElementById('goToTop');
const goToLast = document.getElementById('goToLast');
const goToPageBtn = document.getElementById('goToPageBtn');
const pageInput = document.getElementById('pageInput');
const resultHeader = document.querySelector('.list_box_trn thead');
const resultBody = document.querySelector('.list_box_trn tbody');
const pageLinksDiv = document.getElementById('pageLinks');
const tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
const pages = document.getElementById('tabbody').getElementsByTagName('div');
let presentTargetId = "tabpage1";
for (let i = 0; i < tabs.length; i++) {
tabs[i].onclick = changeTab;
}
tabs[0].onclick();
let currentPage = 0;
const pageSize = 10;
let searchData = [];
function changeTab() {
const targetid = this.href.substring(this.href.indexOf('#') + 1, this.href.length);
for (let i = 0; i < pages.length; i++) {
if (pages[i].id != targetid) {
pages[i].style.display = "none";
} else {
pages[i].style.display = "block";
}
}
for (let i = 0; i < tabs.length; i++) {
tabs[i].style.zIndex = "0";
}
this.style.zIndex = "10";
presentTargetId = targetid;
return false;
}
function generateMockData(count) {
let data = [];
if (presentTargetId === "tabpage1") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'name': '名前' + i });
}
} else if (presentTargetId === "tabpage2") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'item': '品番' + i, 'address': '住所' + i });
}
} else if (presentTargetId === "tabpage3") {
for (let i = 1; i <= count; i++) {
data.push({ 'id': i, 'receiptNo': '伝票番号' + i });
}
}
return data;
}
function displayData(page) {
resultHeader.innerHTML = '';
resultBody.innerHTML = '';
const start = page * pageSize;
const end = start + pageSize;
const pageData = searchData.slice(start, end);
if (presentTargetId === "tabpage1") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>名前</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(function(item) {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.name}</td>`;
resultBody.appendChild(row);
});
} else if (presentTargetId === "tabpage2") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>品番</td><td>住所</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(function(item) {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.item}</td><td>${item.address}</td>`;
resultBody.appendChild(row);
});
} else if (presentTargetId === "tabpage3") {
const headerRow = document.createElement('tr');
headerRow.innerHTML = `<td>ID</td><td>伝票番号</td>`;
resultHeader.appendChild(headerRow);
pageData.forEach(function(item) {
const row = document.createElement('tr');
row.innerHTML = `<td>${item.id}</td><td>${item.receiptNo}</td>`;
resultBody.appendChild(row);
});
}
nextBtn.style.display = searchData.length > end ? 'block' : 'none';
prevBtn.style.display = currentPage > 0 ? 'block' : 'none';
pageInput.style.display = searchData.length > end ? 'block' : 'none';
goToPageBtn.style.display = searchData.length > end ? 'block' : 'none';
goToTop.style.display = currentPage > 0 ? 'block' : 'none';
goToLast.style.display = searchData.length > end ? 'block' : 'none';
generatePageLinks();
}
function generatePageLinks() {
pageLinksDiv.innerHTML = '';
const totalPages = Math.ceil(searchData.length / pageSize);
for (let i = 0; i < totalPages; i++) {
const pageLink = document.createElement('span');
pageLink.textContent = i + 1 + ' ';
pageLink.className = 'page-link';
pageLink.addEventListener('click', function() {
currentPage = i;
displayData(currentPage);
});
pageLinksDiv.appendChild(pageLink);
}
}
searchBtn.addEventListener('click', function() {
searchData = generateMockData(50);
currentPage = 0;
displayData(currentPage);
});
nextBtn.addEventListener('click', function() {
currentPage++;
displayData(currentPage);
});
prevBtn.addEventListener('click', function() {
currentPage--;
displayData(currentPage);
});
goToTop.addEventListener('click', function() {
displayData(0);
});
goToLast.addEventListener('click', function() {
currentPage = Math.floor(searchData.length / pageSize) - 1;
displayData(currentPage);
});
goToPageBtn.addEventListener('click', function() {
const page = parseInt(pageInput.value - 1, 10);
if (!isNaN(page) && page >= 0 && page < Math.ceil(searchData.length / pageSize)) {
currentPage = page;
displayData(currentPage);
} else {
alert('無効なページ番号です。');
}
});
downloadBtn.addEventListener('click', function() {
let csvContent = "\uFEFF";
if (presentTargetId === "tabpage1") {
csvContent += "ID,名前\n";
searchData.forEach(function(item) {
csvContent += `${item.id},${item.name}\n`;
});
} else if (presentTargetId === "tabpage2") {
csvContent += "ID,品番,住所\n";
searchData.forEach(function(item) {
csvContent += `${item.id},${item.item},${item.address}\n`;
});
} else if (presentTargetId === "tabpage3") {
csvContent += "ID,伝票番号\n";
searchData.forEach(function(item) {
csvContent += `${item.id},${item.receiptNo}\n`;
});
}
const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "search_results.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// フォームに関するイベント
const formInputs = document.querySelectorAll('input');
formInputs.forEach(input => {
input.addEventListener('blur', function() { console.log('blur event'); });
input.addEventListener('change', function() { console.log('change event'); });
input.addEventListener('contextmenu', function(e) { e.preventDefault(); console.log('contextmenu event'); });
input.addEventListener('focus', function() { console.log('focus event'); });
input.addEventListener('input', function() { console.log('input event'); });
input.addEventListener('invalid', function() { console.log('invalid event'); });
input.addEventListener('select', function() { console.log('select event'); });
});
const form = document.createElement('form');
form.addEventListener('submit', function(e) { e.preventDefault(); console.log('submit event'); });
form.addEventListener('formchange', function() { console.log('formchange event'); });
form.addEventListener('forminput', function() { console.log('forminput event'); });
document.body.appendChild(form);
// キーボード操作のイベント
document.addEventListener('keydown', function() { console.log('keydown event'); });
document.addEventListener('keypress', function() { console.log('keypress event'); });
document.addEventListener('keyup', function() { console.log('keyup event'); });
// マウス操作のイベント
document.addEventListener('click', function() { console.log('click event'); });
document.addEventListener('dblclick', function() { console.log('dblclick event'); });
document.addEventListener('drag', function() { console.log('drag event'); });
document.addEventListener('dragend', function() { console.log('dragend event'); });
document.addEventListener('dragenter', function() { console.log('dragenter event'); });
document.addEventListener('dragleave', function() { console.log('dragleave event'); });
document.addEventListener('dragover', function() { console.log('dragover event'); });
document.addEventListener('dragstart', function() { console.log('dragstart event'); });
document.addEventListener('drop', function() { console.log('drop event'); });
document.addEventListener('mousedown', function() { console.log('mousedown event'); });
document.addEventListener('mousemove', function() { console.log('mousemove event'); });
document.addEventListener('mouseout', function() { console.log('mouseout event'); });
document.addEventListener('mouseover', function() { console.log('mouseover event'); });
document.addEventListener('mouseup', function() { console.log('mouseup event'); });
document.addEventListener('mousewheel', function() { console.log('mousewheel event'); });
window.addEventListener('scroll', function() { console.log('scroll event'); });
// loadイベント
window.addEventListener('load', function() { console.log('load event'); });
// with文の使用例
with (Math) {
console.log(`Random number: ${random()}`);
}
// カスタムエラーの作成
function CustomError(message) {
Error.call(this, message);
this.name = "CustomError";
}
CustomError.prototype = Object.create(Error.prototype);
// 在庫管理クラスの定義
function StockManager() {
this.tabs = tabs;
this.pages = pages;
}
// 在庫管理クラスのメソッド定義
StockManager.prototype.showTab = function(index) {
if (index < 0 || index >= this.tabs.length) throw new CustomError("Index out of bounds");
this.tabs[index].click();
}
// 在庫管理インスタンスの生成とメソッドの使用
const manager = new StockManager();
manager.showTab(1);
// クロージャの使用例
const createAdder = function(x) {
return function(y) {
return x + y;
};
};
const add5 = createAdder(5);
console.log(add5(10)); // 15
// Dateオブジェクトの使用例
const currentDate = new Date();
console.log(`Current Date: ${currentDate}`);
// JSONオブジェクトの使用例
const jsonData = JSON.stringify(searchData);
console.log(`JSON Data: ${jsonData}`);
// RegExpオブジェクトの使用例
const regExp = new RegExp('名前');
console.log(`RegExp Test: ${regExp.test('名前1')}`);
// NaNの判定例
const notANumber = parseInt('abc');
if (isNaN(notANumber)) {
console.log('This is NaN');
}
// typeofの使用例
if (typeof searchBtn === 'object') {
console.log('searchBtn is an object');
}
// in演算子の使用例
if ('length' in searchData) {
console.log('searchData has length property');
}
// delete演算子の使用例
delete searchData[0];
console.log(searchData);
// void演算子の使用例
void function() {
console.log('This is void');
}();
// forループの使用例
for (let i = 0; i < 5; i++) {
console.log(`For loop iteration: ${i}`);
}
// whileループの使用例
let j = 0;
while (j < 5) {
console.log(`While loop iteration: ${j}`);
j++;
}
// do-whileループの使用例
let k = 0;
do {
console.log(`Do-while loop iteration: ${k}`);
k++;
} while (k < 5);
// switch文の使用例
const tabId = 'tabpage1';
switch (tabId) {
case 'tabpage1':
console.log('Tab 1 selected');
break;
case 'tabpage2':
console.log('Tab 2 selected');
break;
case 'tabpage3':
console.log('Tab 3 selected');
break;
default:
console.log('Unknown tab');
}
// Function.call()の使用例
function greet(message) {
console.log(message);
}
greet.call(this, 'Hello from Function.call()');
// コンストラクタ関数とnewの使用例
function Product(name, price) {
this.name = name;
this.price = price;
}
const product = new Product('Laptop', 1500);
console.log(`Product Name: ${product.name}, Price: ${product.price}`);
});
})();
</script>
</body>
</html>
キャンバス描画、SVGの使用、タイミング制御、メディア要素、Webストレージ、IndexedDB、ファイルAPIを使ったページ
Canvas 2D API: キャンバス上に緑の四角を描画
SVG: SVGエレメントで赤い円を描画
Media Element API: ビデオエレメントの再生、停止、ポーズ、および状態のイベントを扱う
Web Storage API: ローカルストレージへのデータの保存、読み取り、クリアを行う
File API: ユーザが選択したファイルを読み込み、内容を表示
Timing control for script-based animations: requestAnimationFrameを使用してキャンバス上のアニメーションを制御
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>APIデモページ</title>
<style>
.canvas-container {
border: 1px solid #000 ;
}
.svg-container {
border: 1px solid #000 ;
}
</style>
</head>
<body>
<h1>APIデモページ</h1>
<section>
<h2>Canvas 2D</h2>
<div class="canvas-container">
<canvas id="canvas" width="300" height="300"></canvas>
</div>
</section>
<section>
<h2>SVG</h2>
<div class="svg-container">
<svg id="svg" width="300" height="300">
<circle cx="150" cy="150" r="50" fill="red" />
</svg>
</div>
</section>
<section>
<h2>Media Element</h2>
<video id="video" width="320" height="240" controls preload="metadata">
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>
</div>
</section>
<section>
<h2>Web Storage</h2>
<button onclick="saveToLocalStorage()">Save to Local Storage</button>
<button onclick="readFromLocalStorage()">Read from Local Storage</button>
<button onclick="clearLocalStorage()">Clear Local Storage</button>
</section>
<section>
<h2>File API</h2>
<input type="file" id="fileInput">
<pre id="fileContent"></pre>
</section>
<script>
// Canvas API
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
// Media Element API
const video = document.getElementById('video');
video.onplay = function() { console.log('Video is playing'); };
video.onpause = function() { console.log('Video is paused'); };
video.onended = function() { console.log('Video ended'); };
video.ontimeupdate = function() { console.log('Current time: ' + video.currentTime); };
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function stopVideo() {
video.pause();
video.currentTime = 0;
}
// Web Storage API
function saveToLocalStorage() {
localStorage.setItem('sampleKey', 'This is a sample data');
console.log('Data saved to local storage');
}
function readFromLocalStorage() {
const data = localStorage.getItem('sampleKey');
console.log('Data read from local storage: ' + data);
}
function clearLocalStorage() {
localStorage.clear();
console.log('Local storage cleared');
}
// File API
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('fileContent').textContent = e.target.result;
};
reader.onerror = function(e) {
console.error('File reading error:', e);
};
reader.readAsText(file);
});
// Timing control for script-based animations
let start;
function step(timestamp) {
if (start === undefined) start = timestamp;
const elapsed = timestamp - start;
// Draw something every frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'green';
ctx.fillRect(10 + (elapsed / 10), 10, 150, 100);
if (elapsed < 2000) { // Stop after 2 seconds
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
</script>
</body>
</html>
この記事が気に入ったらサポートをしてみませんか？