自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

JavaScript

  • 【Django】sympyで計算した結果をLatex記法でHTML上に出力、mathjaxを使って数式を表示
    Pythonには高度な計算を行う事ができるライブラリが充実している。 それを、端末を問わずに利用できるようにするには、Pythonをウェブアプリとして動作させる必要がある。つまり、Djangoを使うことになる。 だが、指数や対数、平方根などを、通常の文字列だけでHTML上に表現するには限界がある。 そこで、Latexの文字列を数式として表現できるmathjaxを使うことにした。 Djangoはいつもの40 ...
    続きを読む

  • jQueryのオブジェクトをfor~of文でループするとJavaScriptになる問題の対処
    for~of文を使ってjQueryのオブジェクトをループすると、JavaScriptのオブジェクトになる。 その対策をまとめておく。 jQueryループ時の問題 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="test">1</div> <div class="test">2</div> <div class="test">3</div> <div class="test">4</div> <script> let elems = $(".test"); //この時点ではjQueryのオブジェクトになっている。 console.log(elems); for (let elem of elems){ //for of文で取り出すと、JavaScriptのオブジェクトになっている。 console.log(elem); //jQueryのオブジェクトだと思ってjQ ...
    続きを読む

  • JavaScriptで文字数をカウントする【サロゲートペアと改行コードに注意】
    JavaScriptで文字数をカウントするシーンはよくある。 例えば、テキストエリアに入力した時、入力された文字数を表示させたりする。 これで、最大文字数まであとどれだけ入力できるのかわかる。 ソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </head> <body> <textarea id="textarea"></textarea> <div><span id="counter"></span>文字入力</div> </body> </html> JavaScript window.addEventListener("load" , function (){ $("#textarea").on("input", function(){ //改行は1文字に含まない ...
    続きを読む

  • EasyTimer.jsを使ってストップウォッチとタイマーを作る
    以前、下記記事でストップウォッチとタイマーを作ったが、 JavaScript(jQuery)でストップウォッチとタイマーを作る【勉強や運動の記録などに】 使いにくい。 だから、タイマーとストップウォッチのライブラリを実装する。 かなり軽量で、イベントのセットもできるEasyTimer.jsを使う。 ストップウォッチの実装 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ストップウォッチ</title&g ...
    続きを読む

  • 【Chart.js】棒グラフと折れ線グラフの複合型で、左右の横軸にタイトルと目盛を表示
    注意 Chart.jsには後方互換性が無い。 本記事で解説しているChart.jsのバージョンは3.7.1であり、それ以前のバージョン、もしくはそれ以降のバージョンでは正常に動作しない場合があるのであしからず。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!--chart.jsのCDN--> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script> <script src="script.js"></script> </head> <body> <h1 class="bg-primary text-white">Chart.jsのサンプルコード</h1 ...
    続きを読む

  • Tempermonkeyを使ってGitHubのリポジトリ削除を簡単にする。
    GitHubのリポジトリを作りすぎた。 順次消していこう。 そういう時、こういうダイアログが出てくる。 この確認の入力作業がめんどくさい。 確認するまでもなく、すぐにリポジトリを削除したい時、Tempermonkeyを使ってこの入力作業をスキップしていく。 コード // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://github.com/[ここにGitHubのユーザー名を]/* // @icon https://www.google.com/s2/favicons?sz=64&domain=github.com // @grant none // @require http://code.jquery.com/jquery-3.4.1.min.js ...
    続きを読む

  • 【JavaScript】動的に要素が変化した時に何か処理をさせたいならMutationObserverを使う
    例えば、特定の要素内のHTMLがJavaScriptの処理によって変わった時。 こんな時に何か処理を実行したい場合、MutationObserverを使うと良い。 ソースコード //特定の要素が動的に変化した時、何らかの発動させる let body = document.getElementsByTagName('body')[0]; let target = new MutationObserver(function(){ detail_sortable() }); target.observe(body, { "childList":true,"subtree":true }); 結論 例えば、Ajaxが発動して、ページがレンダリングされた時に何かを発動させることができる。(Ajaxのdoneの時に処理を書くという方法もあるが ...
    続きを読む

  • JavaScriptで並び替えをするならSortable.js【jQuery不要のライブラリ】
    CDN <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> </head> <body> <div class="sort_area"> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">1</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">2</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">3</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">4</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">5</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">6</div> </div> <script> const sort_areas = document.querySelectorAll(".sort_area"); for (let area of sort_areas ){ new Sortable(area, { animation: 150, ghostClass: 'dragging', onEnd: function(){ console.log("ソート完了") }, }); } </script> </body> </html> 動かすとこうなる 結論 ソート終了時、onEndで何か処理を実行する事ができる。例えば、Ajaxとか。 ドラッグ中にクラスを割り当てる事ができるので、色を変えるとか色々できると思う。 詳細は公式にて。 https://sortablejs.github.io/Sortable/ ...

  • 【VanillaJS】Djangoで素のJavaScriptのXMLHttpRequest(Ajax)を使ってリクエストを送信【jQuery不使用】
    POSTメソッドを送信する 前項で取得したCSRFトークンをリクエストヘッダにセットして送信する。 window.addEventListener("load" , () => { const submit = document.querySelector("#submit"); submit.addEventListener( "click", () => { send(); }); }); const send = () => { const form_elem = "#form_area"; const form = document.querySelector(form_elem); const data = new FormData( form ); const url = form.getAttribute("action"); const method = form.getAttribute("method"); // formタグ内のデータを確認。 for (let v of data ){ console.log(v); } const request = new XMLHttpRequest(); //送信先とメソッドの指定 request.open(method,url); // formタグ内にcsrf_tokenが含まれているため不要。 //console.log(csrftoken); //request.setRequestHeader("X-CSRFToken", csrftoken); //送信(内容) request.send(data); //成功時の処理 request.onreadystatechange = () => { if( request.readyState === 4 && request.status === ...
    続きを読む

  • JavaScript(jQuery)でストップウォッチとタイマーを作る【勉強や運動の記録などに】
    記録系のウェブアプリに欠かせないストップウォッチとタイマー これをJavaScript(jQuery)で再現する。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="script.js"></script> </head> <body> <div class="p-2 my-2"> <h2>タイマー</h2> <label><input id="timer_hour" type="number" min="0" max="99" value="0">時間</label> <label><input id="timer_minute" type="number" min="0" max="59" value="0">分</label> <label><input id="timer_second" ...
    続きを読む