Cytoscape, OpenLayers, Kibo Viewer
Abstract#
JavaScriptについての備忘録。比較的最近よく使うプログラミング言語です。callbackな感覚を身につけないと、なかなかしっくりこない。精進します。ちなみにJavaとは、全然違います。Topics#
| 興味あります。いろいろアプローチがありそうですが、私はCode Connectionというツールを使うと、Makecodeという選択肢があり、そこを選ぶとJavaScriptをグラフィカルに作れる環境がでてきます。いろいろ調べたいと思います。 |
- 数字をインプットするテキストボックス
| [8]を参考にしました。 |
<input type="number" name="sample" id="sample1"/> <input type="tel" name="sample" id="sample2"/>
- 配列
| Javascriptでは配列を私はよく使います。配列に結構機能がついていて、最初は慣れないけど、なれると結構便利です。foreachとかsomeとかこのあたりは反復メソッドと呼ぶようですが[6]、このメソッドの引数は関数Functionです。なのでよくこんな形になります。 |
an_array.foreach(function(element, index, array){
***;
return;
});
| functionの引数のelementはan_arrayのindex番目の要素です。なので、element と array[index]は同じはず。。。でもarrayって使ったことない。 |
- 配列への追加・削除
| 追加するときはpush()をすると末尾に追加されます。pop()すると末尾が削除されます。インデックスを指定して直接の代入はできませんでした。 |
- 関数の引数の値の変更
| 関数の引数にある変数をいれて、関数内でその値を変更したい場合、引き渡し方によっては、関数の中でしかアップデートできず、意図と違う動きをする。参照元を渡すのか、値だけをコピーして渡すのかの違いと理解[7]。説明方法としてあっているのかな。。。 |
- 開発時のCross domain問題回避
| どうもローカルでの開発には限界があるっぽい[1]。ローカルでHTTPサーバを動かしてつくるのが早いような。VS CODEでできないかな。LiveServer[3]というVisual Studio Codeのプラグインを使ってみる。 |
| OSM Pluginにも使っているこのOpenLayers。すばらしいJavaScriptライブラリです。 |
- Import
| OpenLayersのIconのサンプル[4]を見るとimportが使われている。importを使うには、type="module"を指定する[2]をあるが、HTMLからJavaScriptを呼び出すときにその指定をやるのかな。Script タブのTypeをModuleにしてみたら、動かなくなった。ここ[5]に従い、olパッケージのインストールをしてみたが、だめだった。type="text/javascript"に戻すことにしたが、いつか使えるようにしたい。 |
Referece#
- [#1]Misaki0714, 2017/08/28 , ローカル環境でのHTMLインクルード方法, https://teratail.com/questions/90124
- [#2]Mozilla Contributors , 2018/08/29, Import, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
- [#3] Ritwick Dey ,2018年11月28日, Live Server, https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
- [#4] OpenLayers Contributors, Icon Symbolizer, https://openlayers.org/en/latest/examples/icon.html
- [#5] OpenLayers Contributors, OpenLayers Introduction, http://openlayers.org/en/latest/doc/tutorials/bundle.html
- [#6] Mozilla Contributors, 2018/12/24, Array, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
- [#7] @makotoo2, 2016年09月24日, 引数の渡し方を理解しよう, https://qiita.com/makotoo2/items/50c6ee98c18f35688b17
- [#8]@Avocado 2018年09月08日に更新, 数字のみを入力できるフォーム(テキストボックス)を作成する, https://qiita.com/Avocado/items/2148d3af400823f91ea5
