ボタン押下時に挙動を変える

<html>
<head>
	<title>二重送信を防ぐ</title>
	<style>
		.btn-wrap {
			width: 300px;
			margin: 0 auto;
			text-align: center;
		}
		.loading {
			display:none;
		}
	</style>
</head>
<body>
	<div class="btn-wrap">
		<button class="btn">送信</button>
		<div class="loading">
			<img src="loading.gif">
		</div>
	</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
	$('.btn').on('click', function(){
		$('.btn').hide();
		$('.loading').show();
	});
});
</script>
</body>
</html>

多重クリック防止

<html>
<head>
	<title>二重送信を防ぐ</title>
<script>
var flag = false;
function send(){
	if(flag){
		alert("送信済みです");
		return false;
		flag = true;
	}
}
</script>
</head>
<body>
	<a href="javascript:send()">データを送信</a>
</body>
</html>

あれ、上手くいかない。。

書き方を変えます。

<html>
<head>
	<title>二重送信を防ぐ</title>
<script>
var set=0:
function double(){
	if(set==0){
		set=1;
	} else{
		alert("只今処理中です。\nそのままおまちください");
		return false;
	}
}
</script>
</head>
<body>
	<form action="" method="post">
		<input type="submit" name="go" class="test" value="送信" onClick="javascript:double(this)">
	</form>
</body>
</html>

うーんちょっと違うようです。

<body>
	<form action="" method="post">
		<input type="submit" name="go" id="login_submit" class="" value="送信">
	</form>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
$('#login_a').on('click', function(){
	if($(this).hasClass('double_click')){
		return false;
	}
	$(this).text("送信中...");
	$(this).addClass('double_click');
});
</script>
</body>

あれーーーーーーーーー

ボタンを押すとjsでテキストが変わる

innerTextで指定します。

<body>
	<button id="toggleMenuButton">ボタン</button>
	<div id="toggleMenu">
		<ul>
			<li>menu1</li>
			<li>menu2</li>
			<li>menu3</li>
		</ul>
	</div>
</body>
<script>
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init(){
		_toggleMenu.style.height='auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click', function(){
			change();
			clickToggle();
			
		},false);
	}
	function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
	function change(){
		document.getElementById('toggleMenuButton').innerText="閉じる";
	}
})(window,document);
</script>

いいけど、これ、ボタンが一度押されると、ずっと閉じるになるなー

あ、値が「閉じる」だったら、「ボタン」に変更すればよいのか。

function change(){
		document.getElementById('toggleMenuButton').innerText =( document.getElementById('toggleMenuButton').innerText ==　"ボタン") ? "閉じる"　: "ボタン";
	}

これでどーだ^^

あ、まとめられますね。

function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
		_toggleMenuButton.innerText =( _toggleMenuButton.innerText ==　"ボタン") ? "閉じる"　: "ボタン";
	}

OKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK

JSでアコーディオン

<!DOCTYPE html>
<html lang="ja">
<head>
	<style>
		#toggleMenu{
			overflow:hidden;
			transition:all 0.5s;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<button id="toggleMenuButton">ボタン</button>
	<div id="toggleMenu">
		<ul>
			<li>menu1</li>
			<li>menu2</li>
			<li>menu3</li>
		</ul>
	</div>
</body>
<script>
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init(){
		_toggleMenu.style.height='auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click', function(){clickToggle();},false);
	}
	function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
})(window,document);
</script>
</html>

あー、これこれ、やりたかったの♪

mermaid.js シーケンス図のif文

<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant user as user
			participant screen as 画面

			Note over user,screen: 共通フィルター参照
			screen ->>+ app : 1 : ID
			app ->> app : 存在をチェック

			alt 該当なし
				app ->> screen: Topにリダイレクト
			else　該当者
				app　->> app: 情報セット
			end

	</div>

なるほどー。画面遷移図とは異なり、画面処理を入れられるから、いいかも。

ちなみにaltとはalternativeの意味。
htmlのaltと勘違いしていた。。

シーケンス図を書いていく

<!Doctype html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant screen as 画面

			screen ->>+ app : 1:ID

	</div>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
	<script>
		mermaid.initialize({
			startOnLoad:true
		});
	</script>
</body>
</html>

表現が足らんぞ。
ドキュメントを見ます
https://mermaidjs.github.io/sequenceDiagram.html

<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant user as user
			participant screen as 画面

			Note over user,screen: 共通フィルター参照
			screen ->>+ app : 1:ID

	</div>

おおおおおおおおお、ええやんけ。これ、実践で使いたい。

Cloud term what does SaaS mean?

What is SaaS?

SaaS is an abbreviation of “Software as a Service”.

Refers to software provided in the cloud. Instead of installing the software on the user side, the vendor (provider) side runs the software, and the user leverages the functionality of the software via the network. Can think of what has been sold as packaged products up to now as available via the Internet.

Examples include email services such as Gmail, blog services, and services such as Salesforce. It is is useful in the sense that you can achieve the purpose immediately, but if you have low degrees of freedom and you want to use your own program, you need to use PaaS or IaaS as described.