jQuery | nujonoa_blog https://nujonoa.com 人生に役立つデータ集 Mon, 04 Apr 2022 14:04:28 +0000 ja hourly 1 https://wordpress.org/?v=6.8.3 https://nujonoa.com/wp-content/uploads/2019/04/cropped-DSC00976-e1554456145409-32x32.jpg jQuery | nujonoa_blog https://nujonoa.com 32 32 【GAS_Webアプリ集】java-scriptを使う https://nujonoa.com/gas_web-application-collection/ https://nujonoa.com/gas_web-application-collection/#respond Mon, 04 Apr 2022 14:04:27 +0000 http://nujonoa.com/?p=10486
  1. 【GAS_Webアプリ集】java-scriptを動かす
  2. ①javascriptでhtmlに文字を挿入
  3. ②ボタンのクリック
  4. ③文字の入力の反映
  5. ④htmlの中身を確認、フィードバック
  6. ⑤掛け算を行う
  7. ⑥チェックボタン、ラジオボタンの使い方
  8. ⑦チェックボタンでの分岐
  9. ⑧送料無料などの分岐
  10. ⑨時間での分岐
  11. ⑩工事中・・・
  12. ⑪マウスオーバーでコメント
  13. ⑫テキストファイルの読み込み
  14. ⑬写真の添付
  15. ⑭文字列のソート

【GAS_Webアプリ集】java-scriptを動かす

①javascriptでhtmlに文字を挿入

javascriptでページに文字を挿入します。
↓の「がんばれ」はjavascriptにて挿入された文字になります。

②ボタンのクリック

ボタンをクリックすると、htmlを操作する動作をjavascriptにて作成します。

③文字の入力の反映

文字を入力、ボタンを押すことで、入力を行います。

④htmlの中身を確認、フィードバック

⑤掛け算を行う

⑥チェックボタン、ラジオボタンの使い方

⑦チェックボタンでの分岐

⑧送料無料などの分岐

⑨時間での分岐

⑩工事中・・・

⑪マウスオーバーでコメント

⑫テキストファイルの読み込み

⑬写真の添付

⑭文字列のソート

]]> https://nujonoa.com/gas_web-application-collection/feed/ 0 【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う https://nujonoa.com/gas_webapplication_6_checkbutton/ https://nujonoa.com/gas_webapplication_6_checkbutton/#respond Fri, 11 Feb 2022 14:18:46 +0000 http://nujonoa.com/?p=10450
  1. 【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う
  2. コード
    1. コード.js
    2. index.html
    3. js1.html
    4. CSS
    5. 出力結果
  3. サンプル

【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う

今回は、GASのwebアプリでcheckボタン、radioボタンを使っていきたいと思います。

コード

コード.js

まずは、ウェブアプリを立ち上げるためのおまじないです。

function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

次は、htmlです。

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
></script>
<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

　で、jQueryを呼び出し、js1の読み込み、cssの読み込みを行っています。

今回は、チェックボタンと、ラジオボタンを設置し、連動するようにします。

<!--/*%_skip_start_%*/-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Check radio</title>
	<script
	  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
	></script>
    <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
　  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<!--/*%_skip_end_%*/-->
<div>
	チェックボックスを連動させる
	<input type="checkbox" id="check1">
	→
	<input type="checkbox" id="check2">
</div>
<div>
	ラジオボタンを連動させる
	<input type="radio" name="radio1" value="1">
	<input type="radio" name="radio1" value="2">
	→
	<input type="radio" name="radio2" value="1">
	<input type="radio" name="radio2" value="2">
</div>
<!--/*%_skip_start_%*/-->
</body>
</html>
<!--/*%_skip_end_%*/-->

js1.html

javascriptは下記のとおりです。

チェックボタン、ラジオボタンの値を取得して、
結果を反映させます。

<!DOCTYPE html>

<script>

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// 1つ目のチェックボックスを押した時の処理を設定
	$("#check1").click(function() {
		// チェックボックスの値を取得
		var check1 = $("#check1").prop("checked");
		console.log(check1);	// コンソールに出力

		// 取得した値をチェックボックスに設定
		$("#check2").prop("checked", check1);
	});

	// 1つ目のラジオボタンを押した時の処理を設定
	$("input[name=radio1]").click(function() {
		// ラジオボタンの値を取得
		var radio1 = $("input[name=radio1]:checked").val();
		console.log(radio1);	// コンソールに出力

		// 取得した値をラジオボタンに設定
		$("input[name=radio2]").val([radio1]);
	});
});

//ここに記述↑↑↑

</script>

CSS

<style>

div.viewarea {
	background: #ffa;
	border: solid 1px #aa6;
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}

textarea {
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}




</style>

出力結果

サンプル

サンプルを置いておきますので、コピーしてお使いください。

サンプルをコピー

「デプロイ」→「デプロイをテスト」→「URLをクリック」
で簡単にウェブアプリをテストすることが可能です。

]]> https://nujonoa.com/gas_webapplication_6_checkbutton/feed/ 0 【GAS_Webアプリ⑤】java-scriptでかけ算をする https://nujonoa.com/gas_webapplication_5_calculation/ https://nujonoa.com/gas_webapplication_5_calculation/#respond Thu, 27 Jan 2022 05:47:16 +0000 http://nujonoa.com/?p=10447
  1. 【GAS_Webアプリ①】java-scriptを動かす
  2. コード
    1. コード.js
    2. index.html
    3. js1.html
    4. CSS
    5. 出力結果
  3. サンプル

【GAS_Webアプリ①】java-scriptを動かす

今回は、GASのウェブアプリ上で、javascriptを用いて、かけ算をしていきたいと思います。

サンプルは下記のとおりです。

商品と、個数を選択し、計算ボタンを押すことで計算がかけられます。

コード

コード.js

まずは、webアプリを起動するためのおまじないです。

function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

次は、htmlです。

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
></script>
<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

で、jQueryを呼び出し、js1の読み込み、cssの読み込みを行っています。

ボディは、
・商品の選択項目、個数の選択と
・結果の表示欄
を作成しています。

<!--/*%_skip_start_%*/-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Get list val</title>
	<script
	  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
	></script>
    <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
　  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<!--/*%_skip_end_%*/-->
<div>
	商品
	<select id="item">
		<option value="100" selected>鉛筆 (100円)</option>
		<option value="200">シャーペン (200円)</option>
		<option value="500">ノートセット (500円)</option>
	</select>
	個数
	<select id="num">
		<option value="1" selected>1個</option>
		<option value="2">2個</option>
		<option value="3">3個</option>
	</select>
	<input type="button" id="calcButton" value="計算">
</div>
<div class="viewarea">
	単価「<span id="itemSel"></span>」円、
	個数「<span id="numSel"></span>」個で、
	合計「<span id="result"></span>」円。
</div>
<!--/*%_skip_start_%*/-->
</body>
</html>
<!--/*%_skip_end_%*/-->

js1.html

javascriptは下記の通り、

・リストの値を取得
・値を入れ込む
・かけ算をする
・切り捨て
・結果を表示

としております。

<!DOCTYPE html>

<script>

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// ［計算］ボタンを押した時の処理を設定
	$("#calcButton").click(function() {
		// リストの値を取得
		var itemValue = $("#item option:selected").val();
		var numValue = $("#num option:selected").val();

		// リストの値を表示
		$("#itemSel").text(itemValue);
		$("#numSel").text(numValue);

		// 計算（掛け算）を行う
		var result = itemValue * numValue;

		// 切り捨て
		result = Math.floor(result);

		// 計算結果を表示
		$("#result").text(result);
	});

	// 初回表示用にプログラムからクリック
	$("#calcButton").click();
});

//ここに記述↑↑↑

</script>

CSS

cssは下記のとおりです。色などは自由に変更ください。

<style>

div.viewarea {
	background: #ffa;
	border: solid 1px #aa6;
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}

textarea {
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}
</style>

出力結果

出力結果は下記のとおりです。

サンプル

サンプルを置いておきますので、コピーしてお使いください。

サンプルをコピー

「デプロイ」→「デプロイをテスト」→「URLをクリック」
で簡単にウェブアプリをテストすることが可能です。

]]> https://nujonoa.com/gas_webapplication_5_calculation/feed/ 0