JavaScript
github.com devbridge/JQuery-Autocompleteを使って、Autocompleteを実装したときのメモ onSelectを使う suggestionsが以下のようになっていた場合 suggestions: {[ { value: "山田太郎 20歳", data: { name: "山田太郎", age: "20" } }, { value: "山田次郎…
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>
テキストエディタ(っぽいもの)を作ってて、バグってたから調べてみた結果、 文字列の数字同士を比較と危ないということがわかった なので、数値として扱いたいときには必ず数値に変換してから比較すること!! github.com 文字列同士の場合、以下のように、…
JavaScriptでの型変換をメモしておく 数値 → 文字列 String()を使う > String(1); < "1" >typeof String(1); < "string" 参考文献 初心者でも迷わない!JavaScriptの数値⇔文字列変換はコレだけ覚えよ! | 侍エンジニア塾ブログ | プログラミング入門者向け学…
typeofで取得できる > typeof "aa"; < "string" > typeof 1; < "number" 参考文献 JavaScriptの「型」の判定について - Qiita
要素を削除するには2通りあるらしい(今のところ知っている範囲だと) removeChild():親要素から子要素を削除する remove():自分自身を削除する 例)child1というidをもった要素を削除したいとき removeChild() 親要素を取得し、子要素である自分を削除する…
エディタのいろいろな設定 CodeMirror - JavaScript - TIL の続き www.youtube.com 自動補完機能はaddonを使うことで実装できる。でも、CSSとJavaScriptとHTMLだけなのかな? addonフォルダ内にアドオンは入っている。ダウンロードしたフォルダに入っているa…
シンタックスハイライトの設定 CodeMirror - JavaScript - TIL の続き www.youtube.com この動画を見て、実際にテーマの変更をしてみた すごい簡単にできてびっくりした themeフォルダにテーマ(.cssファイル)は格納されている 以下のようにthemeフォルダをコ…
それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript - TIL の続き www.youtube.com この動画でCodeMirrorのエディタのシンタックスハイライトの設定を学んだ フォルダ構造は以下のようになっている . ├── index.html ├── lib └── mode シンタ…
CodeMirrorって何!? JavaScriptで簡単にそれっぽいテキストエディタを生成できるライブラリ!GitHubやCodePenでも使われてる また、カスタマイズもできるらしく、面白そう!!!! 実装してみた 以下の動画を見るとわかるが、本当にすごい簡単に実装できる…
コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた CodeMirror まずは、http://codemirror.net/ にアクセスしてダ…
指定要素の前に要素を追加するにはelement.insertBefore()を使う element.insertBere(追加要素, 起点要素) elementの中にある「起点要素」の前の位置に「追加要素」を追加する っていう感じ 実際にやってみた sub2の前に要素(青い要素)を追加する See the Pe…
element.classListを使うことでclassの操作ができる GItHubのページでもclassListを使っていた add classの追加ができる element.add("class-name"); また、一度に複数追加することもできる element.add("class-name1", "class-name2"); remove classの削除…
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()で追加する element.addEventListener(イベント名, 呼び出す関数); イベント名はclickやkeyupなどたくさんある 例)ボタンをクリックしたときにア…
例えば、inputやtextarea内でtabキーを入力したとする。するとフォーカスが外れる もし、無効化したい場合、event.preventDefault()を使用すればいい const disableTab = (event) => { if (event.key === "Tab") { event.preventDefault(); } }; /* キー押下…
HTML5からはタグの中にdata-*属性といったような「独自データ属性」というものを定義できるらしい。data-*に遭遇したときには「自分で定義してる属性だー」って思えばいい JavaScriptからはHTMLElement.datasetプロパティでアクセスできる JavaScriptなどに…
変数に代入したA関数をB関数に渡すときには()はつけない!!! ()をつけると、関数の戻り値を渡すことになってしまうため、()はつけないこと 例)1秒ごとにhelloとコンソールに表示する const aa = () => { console.log('hello'); } setInterval(aa(), 1000)…
JavaScriptでの関数について、知ったこと 可変長引数 ファーストクラスファンクション アロー関数 コールバック関数と高級関数
XMLHttpRequestというオブジェクトを使うことによって、ページを更新しなくても、ページ内のデータを反映することができる ツイキャスのコメビュに使えそうだから、少し使ってみた 今回やったことは「ページ表示時にサーバーへリクエストし、サーバーでJSON…