忍者ブログ
日々の研究生活のメモ書きなど
javascriptでユーザーの操作に呼応して(トリガーされて)、何かアクションを起こすことをイベントハンドラというらしい
わかりやすい一覧があったのでメモしておく

■ 参考 : JavaScriptのイベントハンドラ一覧




一番よく使われるのは onLoadかonClickやと思う

onLoadはページの読み込みが終わったことにトリガーされて、なにか関数を呼び出したりできる
onClickはボタンをwebページに置いといて、ユーザーがそれをクリックするとなにか関数を呼び出したりできる


今回やろうと思ってたのが
webページ上にリストがあって、そのリストがユーザーの入力した時間に基づいて内容が変化するというもの
リストにはデフォルトの内容があって、毎回ページを更新するとそのデフォルトのものに戻るようにしたい
ただ、ユーザーが一度リストの内容を変えるとそれをどうやってデフォルトの内容に戻すのか全然アイデアが出なかった・・・

結局、このユーザーの入力した時刻に基づいてリストを更新するのはやめて別の方法でか解決
(これまでのすべてのデータの和集合を取るようにしたので、リストを手で変更する必要をなくした
和集合自体は1時間に1回差分を見て追加があったら追記するようにcrontabが動いてる
たぶんできる限りユーザーの負担を減らしたほうが良い気がしたのでこの案でGO)





どこかで使えるかな?と思ったイベントハンドラに
ユーザーが画面を閉じる直前に処理をするonbeforeunloadってのがあった

■ 参考 : ブラウザの閉じるボタンに割り込む #JavaScript #JQuery


なにかに使えるかもしれないので、一応メモ








PR

選択肢が2400個とかあって、スクロールして目的のものを探すのが大変
なので、選択肢のプルダウンに検索機能を付けてみる

例は↓のような感じ

■ 参考 : Basic usage - select2





使い方はinstallationのページにあるようにライブラリを読み込む

■ 参考 : Using Select2 from a CDN - select2
$(document).ready(function() {
$('.js-example-basic-single').select2();
});

みたいにjavascriptのタブの中に書いておく
js-example-basic-singleはclass名を書く
ほかはいじらなくてOK





■ 他の使えそうなオプション

■ 参考 : jQuery + Select2 : ドロップダウンリストの幅を調整する

■ 参考 : jQuery: プラグインSelect2で






■ javascriptの配列を外部ファイルからselect2で読み込む

■ 参考 : 【Javascript】セレクトボックスの選択肢を外部ファイルにしておく

↑の記事では外部ファイルからリスト形式にして、それをselectタブに流し込んでいた

実はselect2を使うと、こんな関数を書かなくても大丈夫


■ 参考 : 4-1.動的にoptionタグを生成する

ただし、注意しないといけないのは、配列の要素にidとtext が必要(txtではない)
valとtxtではないことに注意






便利そうなオプションがあったらさらに追記する








基本的に↓に書いてあるとおり

■ 参考 : セレクトボックス(プルダウン)を外部ファイルから作成+リストのデータを取得(JavaScript)


プルダウンの選択肢を事前に分けて、list.jsという名前で保存しておく
list.jsをhtmlソースコードの上の方で読み込む
<script type="text/javascript" src="js/list.js"></script>


bodyの下の方でscriptタグを用意して
その中に、データを読み込む関数を書く
function readFirst(){
for(var i=0;i<list.length;i++){
let opt = document.createElement("option");
opt.value = list[i].val; //value値
opt.text = list[i].txt; //テキスト値
document.getElementById("PullDownList").appendChild(opt);
}
};

listという配列はlist.jsの中に用意しておく
必要な要素は
{val:"1", txt:"P1"},
こんな感じ
txtは選択肢として表示される名前
valは選択されたときに渡される値
これがlistの個数だけ繰り返される


あとはこの関数をhtmlの読み込み完了後に実行すれば良い

元記事ではbodyタグにonloadを実行させて、読み込もうとしているが自分のところではうまくいかなかった
代わりに
window.onload = readFirst();
とbodyの下の方のjavascriptに書いたら動いた
なぜbodyのonloadではだめなのかは不明

どこまでjavascriptが動いているかをテストしたかったら
console.log('Hello1');
とか書けば、動いているのかわかる










■ 参考 : 【Javascript】追記:input="date"に現在の日付(今日の日付)を設定


■ 参考 : テキストフィールドに現在の時刻を表示する
var date = new Date(); // 現在時刻を取得

var yyyy = date.getFullYear(); // 年だけを取得 getYear()よりもこっちの方がいいらしい
var mm = ("0"+(date.getMonth()+1)).slice(-2);
var dd = ("0"+date.getDate()).slice(-2);

var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();

// こっちでも動くのかもしれないけど、未テスト
// document.getElementById("today").value=yyyy+'-'+mm+'-'+dd;

document.form1.date_beg.value = yyyy+'-'+mm+'-'+dd;
document.form1.hour_beg.value = hour;
document.form1.min_beg.value = min;
document.form1.sec_beg.value = sec;

new Date()で現在時刻を取得
そっから必要な要素だけ抜き出してくる
最後にdocument.form1.xxx.value = yyy
でxxxというフォームにyyyという値を代入している






次はこれを現在時刻じゃなくて、3分前の時刻でやってみる
めんどくさいのは
現在時刻が13:02とかだと単純にmin-3をするだけではだめなこと
なので、ちゃんとDateの決まりに従ってやっていく


■ 参考 : [javascript]5分前の日時を取得する

によると、
var now = new Date();
var unix1 = now.getTime() - 5*60*000; // [ms]
var date1 = new Date(uni1);
このあとは上のコードと合流するので省略
みたいな感じ
(単位がミリ秒なので、1000掛ける必要がある)








↓にやりたいことがすべて書いてあった

■ 参考 : GET送信によるパラメータの受け渡し
<script type="text/javascript">
function getdata(){
if(window.location.search){
/* URLの「?」以降のパラメータを変数nに代入 */
var n=window.location.search.substring(1,window.location.search.length);
/* テキストボックスにパラメータを表示 */
document.form3.elements["getpram"].value=n;
}
}
/* オンロード時に実行 */
window.onload=getdata;


取得したパラメータ:


URLの?以下をそのまま全部取ってきてしまうので注意

name="getparam"

name="form3"
を自分の環境に置き換えればそのままで使えるはず

URLから複数のパラメーターを取り出したい場合は、もうちょっと他のこともしないといけないっっぽい





そのうち使うかもしれないのでメモ

■ 参考 : PythonのURLとクエリパラメータのパースまとめ










webブラウザのブックマークバーにブックマークを置く代わりに、URLの部分にJavascriptを書くことをブックマークレットというらしい
むかし、同期が活用しているのを傍目に見ていたが、そのときの自分にはブックマークレットを便利に活用するポイントが思いつかなかった・・・

確か、同期はニコニコで動画ページにアクセスしなくてもそれをマイリストに追加するブックマークレットを作っていた気がする・・・






今回、何のブックマークレットを作りたいかというと、
「アルクという辞書のwebページで指定した英単語/単語を検索」するブックマークレットが欲しい
要するに、あるページにアクセスするんだけど、そのついでに指定した英単語/単語で検索して作業時間の短縮を計るってことですな・・・

現在やってる作業で、毎回毎回単語をgoogle検索していたんでは効率が悪いので・・・
というか実際かなりロスしてる・・・

別に英和/和英辞書になるwebページなら基本的にどこでもいいけど、
「xxx(なんか英単語) 英語」
でググって出てくるページだと

weblio -> 重い、広告うざい
goo辞書 -> 広告うざい
英辞郎 on the WEB:アルク -> 現状不満はない

ということになる・・・
google翻訳で単語を変換する作業をしても、入力に対して出力が毎回1つなので発展性がない・・・(線形性がうれしくないときが来るとは・・・・)





で、戻ってブックマークレットについて

今回の使用ブラウザはchrome

まずはhello worldのブックマークレット
javascript:(function(){window.alert('Hello!');})();


blog

そのページのスタイルをすべて削除して、すっきりさせる
javascript:(function(s,i){s=document.querySelectorAll(‘style,link[rel=stylesheet]’);for(i=0;i<s.length;i++){s[i].parentNode.removeChild(s[i])}s=document.querySelectorAll(‘[style]’);for(i=0;i<s.length;i++){s[i].setAttribute(‘style’,”)}})()
次は目的と関係ないけど、ググってたら出てきたのでメモしておく
■ 参考 : 右クリックと文字列選択を禁止する方法とそれを無効にするブックマークレット

稀にエロサイトとか、曲の歌詞をまとめたページで
右クリックや範囲指定ができなくなってるときがある
歌詞ページに関しては年に1回くらいしか使うことがないので困ることがなかったけど、主に前者がね・・・・
javascript:(function(){obs=document.all;for(i=0;i<obs.length;i++){obs[i].oncontextmenu='return true;';obs[i].onselectstart='return true;';}})()

あと、これも便利そう・・・

■ 参考 : すべてチェックを入れるブックマークレット

アンケートのページとか、なんかの応募のときに色々と捗りそう
javascript:(function(){a=document.getElementsByTagName('input');for(i=0;i<a.length;i++){if(a[i].type=='checkbox'){a[i].checked='checked'}}})()
■ 参考 : ブックマークレットで目的のウェブサイトを開く方法

同じウィンドウで開く場合
javascript:(function(){document.location.href=なんかURL})()
新しいウィンドウで開く場合
javascript:(function(){window.open(なんかURL)})()

なんやかんや調べてたら範囲指定した文章をアルクで検索するブックマークレットはできた
javascript:var%20d=document; var%20word=d.selection?d.selection.createRange().text:d.getSelection(); var%20subw=window.open('http://eow.alc.co.jp/search?q='+word).document;
けど自分がやりたいのはその場で入力する版なんだよなぁ〜・・・
まぁこれでもいいけど・・・・


これのURLをarXivに置き換えて、範囲指定した文章でarXiv検索するブックマークレットも作った
ただし、"hoge foo"みたいにスペースが入っている場合はダメ・・・(要するにゴミ)
そういうのもきちんと処理するにはスペースで区切って+を入れないといけないっぽい
これがやりたいわけではないので放置
javascript:var%20d=document; var%20word=d.selection?d.selection.createRange().text:d.getSelection(); var%20subw=window.open('https://arxiv.org/find/all/1/all:'+word).document;
指定した範囲の文字を取得する関数はブラウザによって異なるっぽいので動かない場合は適時置き換えてください・・・





さらに色々と調べてたらできた
javascript:void((function(){var%20w=window.prompt("「この単語はなんだ?」って聞きたそうな表情してんで検索させてもらうがよ おれぁ おせっかい焼きのスピードワゴン! ロンドンの貧困街からジョースターさんが心配なんでくっついてきたぜ?", "");if(w!=null)window.open("http://eow.alc.co.jp/search?q="+encodeURIComponent(w),"_blank");})())

blog1 ↓


blog2 ↓


jojo





(2017/04/26 追記)

上記のやつの改変で、英英辞典も検索できるようにした
javascript:void((function(){var w=window.prompt("「死んだお袋とこいつ(英英辞典)だけには迷惑をかけたってかまわねえのさ。」", "");if(w!=null)window.open("http://www.dictionary.com/misspelling?term="+encodeURIComponent(w),"_blank");})())
台詞は麻雀放浪記の上野の健より借りた
(大好きなんすよ、あの小説も映画も)


ブックマークレット




(2020/03/30 追記)

最近、彗星のように現れたDeepL翻訳というのがある
日本語の方言とかにも対応してたり、翻訳した後の文章が元の意味をきちんと捉えていたりとgoogle翻訳よりも優れていると噂

なので、翻訳したい文章をDeepL翻訳にわたすブックマークレットも用意しておく


と言っても↑の例のアドレスをちょこっと変更すればいいだけの話
javascript:void((function(){var%20w=window.prompt("「この単語はなんだ?」って聞きたそうな表情してんで検索させてもらうがよ おれぁ おせっかい焼きのスピードワゴン! ロンドンの貧困街からジョースターさんが心配なんでくっついてきたぜ?", "");if(w!=null)window.open("https://www.deepl.com/translator#en/ja/"+encodeURIComponent(w),"_blank");})())
















1次元配列の宣言は
var dataset = [];
としておいて、あとで
dataset.push(1);
とかしてデータを追加していくことができる。

例えば、配列のサイズを10個固定
後からどんどん値を追加しつつ最古のデータを削除して行きたい場合は・・・
上に書いたdataset.push()とdataset.shift()を活用すれば良いだろう





今回困ったのは2次元配列の場合

javascriptはやったことがないので、場当たり的に解決していく段階・・・

■ 参考
[JavaScript] 配列の宣言と作成

//2次元配列のサイズを初期化
var datasize = 20;
var randmax = svgWidth;
var dataset = new Array(datasize);


for(var i=0; i< datasize; i++){
dataset[i] = new Array(datasize)
var dataset[i][0] = Math.floor(Math.random() * randmax);
var dataset[i][1] = Math.floor(Math.random() * randmax);
}

重要なのは赤色の部分

わかってみれば特に難しくなくて、C言語と同じように配列を2重に宣言すれば良いだけ











easeというメソッドは、transitionなどを使って動くアニメーションを使ったときの動き方を指定することができる

どのような動き方があるかは、次のページを見て実際に触ってもらうのが理解が早いだろう


■ 参考
D3.js Easing Checker

(ちなみに作者の方のページ)











かなり簡単に追加できる。
これのある、なしでグラフの見栄えがけっこう変わると思うので重要

私は、gnuplotでもいつもset gridの設定をいれてました .gnuplotに

■ 参考
D3.jsの折れ線グラフにグリッド線を追加する

Line Chart with Grid [D3]



.tick line{
opacity: 0.2;
}
opacityは透明度の設定
これをCSSに書いておく

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(10);

var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);

色の付いてる部分が重要。

tickPaddingの引数は、軸と値表記の間の広さ
grid線の数をどうやって調整するのかわからない・・・・









最近、d3.jsというplotツールを使った開発を行っている
d3.jsは拡張子を見てわかるとおり、javascriptで書かれている・・・

■ 参考
D3.js - 日本語ドキュメント


今までjavascriptなんて触ったことはないが、頑張る・・・
ブログのカテゴリーにもないが、とりあえずHTMLにぶち込んでおく。
記事がいっぱい出来てきたら独立させるかも




タイトルの指定の桁数以上を表示したくないときは、toFixedを使うとよさげ
d.toFixed(2)
これでdという数字を小数点以下5桁表示する

四捨五入が問題になるかも、という見出しをどこかで見たが
今回は細かいことを気にしないということで・・・

■ 参考
toFixed メソッド (Number) (JavaScript)




桁数制限なし↓


桁数制限あり↓












HOME |
プロフィール
HN:coffee
職業:物理屋(自称)
趣味:映画鑑賞、登山
出身:大阪府の南の田舎
自己紹介:
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST

print "生きてます"
print "コロナのせいで15万くらい損失出してますが、生きてます"

# 最終更新 2020/03/15
カウンター
カウンター カウンター
ブログ内検索
ツイートするボタン
リンク
相互リンク募集中です (Twitterにてお知らせください)

Demo scripts for gnuplot version 5
(gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)

gnuplotスクリプトの解説
(米澤進吾さんの個人ページ、gnuplotと言えばこのかた)

gnuplot のページ
(Takeno Lab、うちのブログがリンクされていたのでリンク返し)

とある物理の院生日誌~院生は社会へ旅立った~
(研究室の先輩の個人ブログ)

英語例文を見て自然に英語・英会話を学ぶ
(楠本慶ニさんの個人ページ、様々な情報の密度の高さに感動)

Twitterから映画の評価が分かる & 映画の鑑賞記録が残せる coco
(映画の感想をまとめられるサイト、いつもお世話になっています)

Astronomy Picture of the Day Archive
(天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)

今日のほしぞら
(任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)

GNUPLOTとアニメーション
(応用の項目の「見せてあげよう!ラピュタの雷を!!」あたりからすごすぎる)

読書メーター
(読んだ本をリストできる便利なサイト)

flickr難民の写真置き場
(20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)

教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定
(阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)

英語論文執筆用の例文検索サービス
(とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から,例文を検索するための検索エンジン)


Template "simple02" by Emile*Emilie
忍者ブログ [PR]