Cytoscape, OpenLayers, Kibo Viewer

Abstract#

JavaScriptについての備忘録。比較的最近よく使うプログラミング言語です。callbackな感覚を身につけないと、なかなかしっくりこない。精進します。ちなみにJavaとは、全然違います。

Topics#

• Minecraft Programming

興味あります。いろいろアプローチがありそうですが、私は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のプラグインを使ってみる。

• OpenLayers

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. [#1]Misaki0714, 2017/08/28 , ローカル環境でのHTMLインクルード方法, https://teratail.com/questions/90124
2. [#2]Mozilla Contributors , 2018/08/29, Import, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
3. [#3] Ritwick Dey ,2018年11月28日, Live Server, https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
4. [#4] OpenLayers Contributors, Icon Symbolizer, https://openlayers.org/en/latest/examples/icon.html
5. [#5] OpenLayers Contributors, OpenLayers Introduction, http://openlayers.org/en/latest/doc/tutorials/bundle.html
6. [#6] Mozilla Contributors, 2018/12/24, Array, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
7. [#7] @makotoo2, 2016年09月24日, 引数の渡し方を理解しよう, https://qiita.com/makotoo2/items/50c6ee98c18f35688b17
8. [#8]@Avocado 2018年09月08日に更新, 数字のみを入力できるフォーム(テキストボックス)を作成する, https://qiita.com/Avocado/items/2148d3af400823f91ea5