TIL

Today I Learned. 知ったこと、学んだことを書いていく

JavaScript

Chart.jsでグラフの表示 - JavaScript

https://github.com/chartjs/Chart.js/releases Chart.js.zip をダウンロードする 解凍したら、 Chart.min.js をプロジェクトに置く . ├js/ │ ├lib/Chart.min.js │ └graph.js └index.html index.html <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="js/lib/Chart.min.js"></script> </meta></head></html>

文字列の数字同士を比較する時は、数値に変換してから - JavaScript

テキストエディタ(っぽいもの)を作ってて、バグってたから調べてみた結果、 文字列の数字同士を比較と危ないということがわかった なので、数値として扱いたいときには必ず数値に変換してから比較すること!! github.com 文字列同士の場合、以下のように、…

型変換 - JavaScript

JavaScriptでの型変換をメモしておく 数値 → 文字列 String()を使う > String(1); < "1" >typeof String(1); < "string" 参考文献 初心者でも迷わない!JavaScriptの数値⇔文字列変換はコレだけ覚えよ! | 侍エンジニア塾ブログ | プログラミング入門者向け学…

型の取得 - JavaScript

typeofで取得できる > typeof "aa"; < "string" > typeof 1; < "number" 参考文献 JavaScriptの「型」の判定について - Qiita

要素の削除 - JavaScript

要素を削除するには2通りあるらしい(今のところ知っている範囲だと) removeChild():親要素から子要素を削除する remove():自分自身を削除する 例)child1というidをもった要素を削除したいとき removeChild() 親要素を取得し、子要素である自分を削除する…

自動補完(Autocomplete)の追加

エディタのいろいろな設定 CodeMirror - JavaScript - TIL の続き www.youtube.com 自動補完機能はaddonを使うことで実装できる。でも、CSSとJavaScriptとHTMLだけなのかな? addonフォルダ内にアドオンは入っている。ダウンロードしたフォルダに入っているa…

テーマの設定 CodeMirror - JavaScript

シンタックスハイライトの設定 CodeMirror - JavaScript - TIL の続き www.youtube.com この動画を見て、実際にテーマの変更をしてみた すごい簡単にできてびっくりした themeフォルダにテーマ(.cssファイル)は格納されている 以下のようにthemeフォルダをコ…

シンタックスハイライトの設定 CodeMirror - JavaScript

それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript - TIL の続き www.youtube.com この動画でCodeMirrorのエディタのシンタックスハイライトの設定を学んだ フォルダ構造は以下のようになっている . ├── index.html ├── lib └── mode シンタ…

それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript

CodeMirrorって何!? JavaScriptで簡単にそれっぽいテキストエディタを生成できるライブラリ!GitHubやCodePenでも使われてる また、カスタマイズもできるらしく、面白そう!!!! 実装してみた 以下の動画を見るとわかるが、本当にすごい簡単に実装できる…

CodeMirrorを使ってみた - JavaScript

コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた CodeMirror まずは、http://codemirror.net/ にアクセスしてダ…

ある要素の前に追加 insertBefore - JavaScript

指定要素の前に要素を追加するにはelement.insertBefore()を使う element.insertBere(追加要素, 起点要素) elementの中にある「起点要素」の前の位置に「追加要素」を追加する っていう感じ 実際にやってみた sub2の前に要素(青い要素)を追加する See the Pe…

classを操作 - JavaScript

element.classListを使うことでclassの操作ができる GItHubのページでもclassListを使っていた add classの追加ができる element.add("class-name"); また、一度に複数追加することもできる element.add("class-name1", "class-name2"); remove classの削除…

親要素の取得 - JavaScript

element.parentNodeを使う <div class="main"> main <div class="sub">sub</div> </div> const subElem = document.querySelector('.sub'); const mainElem = subElem.parentNode; alert(mainElem.innerText); 参考文献 【JavaScript】(基礎)親要素・子要素の取得まとめ② | unitopi - ユニトピ -

イベントの追加 addEventListener() - JavaScript

クリックしたときに何か処理をしたいときとかに使う イベントに対しての処理を追加するにはaddEventListener()で追加する element.addEventListener(イベント名, 呼び出す関数); イベント名はclickやkeyupなどたくさんある 例)ボタンをクリックしたときにア…

イベントのキャンセル event.preventDefault() - JavaScript

例えば、inputやtextarea内でtabキーを入力したとする。するとフォーカスが外れる もし、無効化したい場合、event.preventDefault()を使用すればいい const disableTab = (event) => { if (event.key === "Tab") { event.preventDefault(); } }; /* キー押下…

data-*属性 - HTML

HTML5からはタグの中にdata-*属性といったような「独自データ属性」というものを定義できるらしい。data-*に遭遇したときには「自分で定義してる属性だー」って思えばいい JavaScriptからはHTMLElement.datasetプロパティでアクセスできる JavaScriptなどに…

関数を渡すときには()はつけない! - JavaScript

変数に代入したA関数をB関数に渡すときには()はつけない!!! ()をつけると、関数の戻り値を渡すことになってしまうため、()はつけないこと 例)1秒ごとにhelloとコンソールに表示する const aa = () => { console.log('hello'); } setInterval(aa(), 1000)…

関数 - JavaScript

JavaScriptでの関数について、知ったこと 可変長引数 ファーストクラスファンクション アロー関数 コールバック関数と高級関数

XMLHttpRequestでデータの送受信 - JavaScript

XMLHttpRequestというオブジェクトを使うことによって、ページを更新しなくても、ページ内のデータを反映することができる ツイキャスのコメビュに使えそうだから、少し使ってみた 今回やったことは「ページ表示時にサーバーへリクエストし、サーバーでJSON…