[{PageViewPlugin}]
[Cytoscape], [OpenLayers], [Kibo Viewer|KiboFinder]
!!!Abstract
JavaScriptについての備忘録。比較的最近よく使う[プログラミング言語|Programming Language]です。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]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|https://qiita.com/Avocado] 2018年09月08日に更新, 数字のみを入力できるフォーム(テキストボックス)を作成する, [https://qiita.com/Avocado/items/2148d3af400823f91ea5]