Category: JavaScript

<script>
	function zenkaku2Hankaku(str){
		return str.replace(/[A-Za-z0-9]/g, function(s){
			return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
		});
	}

	console.log(zenkaku2Hankaku("123abC"));
</script>

JSで書く場合も基本はスクリプトの中に辞書を持って変換しているのね。
仕組みを理解した。

ブロックチェーン上に上げるために、ファイル名とファイルの中身を取得したい。

html

				<div class="control">
					<input id="file" name="file" type="file" />
				</div>
				// 省略
		<p>Please press the button.</p>
		<input type="submit" class="button is-link" id="btn" value="authorize" onclick="OnButtonClick();">

view: buttonを押すと処理を実行するように書いている(onChangeではない)

reader.readAsTextとした後に、reader.onload(ファイルの読み込み完了) 後に処理をする。

		let reader = new FileReader();
		let input = ""

		function OnButtonClick() {
			input = document.getElementById("file").files[0]
			reader.readAsText(input, 'UTF-8')
			reader.onload = ()=> {
	            main();	
	        };
						
		}
		async function main() {
			console.log(input.name)
			console.log(reader.result);
		}

なるほどー、割と簡単にできたなー

ページ離脱時にポップアップ表示
formのsubmitの際はポップアップ非表示

<h1>商品ページ</h1>
	<form action="/" method="get" id="form" class="form-example">
	  <div class="form-example">
	    <label for="name">商品名: </label>
	    <input type="text" name="name" id="name" value="チョコレート">
	  </div>
	  <div class="form-example">
	    <label for="name">購入者名: </label>
	    <input type="text" name="name" id="name">
	  </div>
	  <div class="form-example">
	    <label for="email">個数: </label>
	    <input type="number" name="number" value="1">
	  </div>
	  <div class="form-example">
	    <input type="submit" value="今すぐ購入">
	  </div>
	</form>
	<br><br>
	<a href="/">リンク</a>
	<script>

		var onBeforeunloadHandler = function(e) {
    		e.returnValue = 'ページから離れます。よろしいでしょうか？';
		};
		window.addEventListener('beforeunload', onBeforeunloadHandler, false);

		const path = location.pathname;

		var cookies = document.cookie; 
		var cookiesArray = cookies.split(';'); 

		for(var c of cookiesArray){ 
		    var cArray = c.split('='); 
		    if( cArray[0] == 'page' && cArray[1] == path){ 
		        window.removeEventListener('beforeunload', onBeforeunloadHandler, false);
		    }
		}		

		const form = document.getElementById('form');
		form.addEventListener('submit', function(e) {
		    window.removeEventListener('beforeunload', onBeforeunloadHandler, false);
		}, false);

		var date1,date2;
		var kigen = 1;
		date1 = new Date();
		date1.setTime(date1.getTime() + kigen*24*60*60*1000);
		date2 = date1.toGMTString();

		document.cookie = "page=" + path+";expires=" + date2;
	</script>

<h1>Webカメラの映像表示</h1>
	<div>
		<video id="video" width="600px" height="400px"></video>
	</div>
	<script>
		const video = document.getElementById("video")
		navigator.mediaDevices.getUserMedia({
			video: true,
			audio: false,
		}).then(stream => {
			video.srcObject = stream;
			video.play()
		}).catch(e => {
			console.log(e)
		})
	</script>

このファイルが次の許可を求めていますと表示される。

OK これでjsのopenCVを使いたい

class=”lazyload”とし、画像はdata-srcで読み込む。
lazyloadはcdnで読み込み、scriptでlazyload();とする。

	<img class="lazyload" data-src="img/1.jpg" width="300" height="200"><br><br><br><br>
	<img class="lazyload" data-src="img/2.jpg" width="300" height="200"><br><br><br><br>
	<img class="lazyload" data-src="img/3.jpg" width="300" height="200">
	<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
	<script>
    lazyload();
	</script>

Googleのdevtoolで確認すると、3枚あるのが2枚しか読み込まれていないことがわかる。

なかなかやりおる

タブメニューで、URLのパスに応じてメニューのis-activeをつけたい時
L ulのli要素にclassで”is-active”をつけたい
html

<div class="tabs">
      	<ul id="mylist">
      		<li><a href="/btc">BTC</a></li>
      		<li><a href="/eth">ETH</a></li>
      		<li><a href="/xrp">EXP</a></li>
      		<li><a href="/xlm">XLM</a></li>
      		<li><a href="/mona">MONA</a></li>
      	</ul>
      </div>

javascript側
L location.pathnameでURLを取得する
　　L querySelectorAllでli要素を全て取得する
　　L classList.addでclassを付与する

const pathname = location.pathname;
  	var i;
  	switch(pathname){
  		case '/btc':
  			i = 0;break;
  		case '/eth':
  			i = 1;break;
  		case '/xrp':
  			i = 2;break;
  		case '/xlm':
  			i = 3;break;
  		case '/mona':
  			i = 4;break;
  	}
  	var cols = document.querySelectorAll('#mylist li');
  	cols[i].classList.add('is-active');

OK
やりたいことの7割くらいまでは出来た

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
  <select id="sel">
      <option> --場所を選ぶ-- </option>
      <option value="kyoto">京都</option>
      <option value="osaka">大阪</option>
      <option value="kobe">神戸</option>
  </select>

  <div id="mes">
    集合場所は<span id="pos"></span>
    集合時刻は<span id="time"></span>
  </div>
    <script>
      const url = "ajax_getData.php";
      let selid = document.getElementById('sel');

      selid.addEventListener('change', function(){
        let optval = selid.options[selid.selectedIndex].value;
        let param = new URLSearchParams();
        param.append("opt",optval);

        fetch(url, {
          method: "post",
          body: param,
        }).then(response => {
            if(response.ok){
              let promise = response.json();
              promise.then(data =>{
                document.getElementById('pos').innerHTML = data.position;
                document.getElementById('time').innerHTML = data.ap_time;
              })
            } else {
              alert("request failed");
            }
        })
      })
    </script>
</body>
</html>

なるほど。。。
ajaxの取得をtime intervalで数秒ごとに取るようにして表示すれば良いのか。
ほぼほぼロジックも出来たので背景処理のところだな

Output(翻訳結果)をボタン一つでコピーしたい。
L aタグでjsの関数を実行させる
　　L getElementsByTagName(“textarea”)[0]でtextareaのtextを取得し、*.select でコピーします。

<div class="card-footer ">
                {!! Form::label('dest', '英語(翻訳結果)') !!}
                {!! Form::textarea('dest', $output, ['class' => 'form-control' ]) !!}
                <a href="javascript:OnLinkClick();">コピー</a>
              </div>

<script>
function OnLinkClick(){
    var text = document.getElementsByTagName("textarea")[1];
    text.select();
}
</script>

おおおおおおおおおおおおお
ええやんか