→JavaScript
→JavaScript関連ツール
→JavaScriptの基礎
→AJAX関連
一般 †
言語仕様解説系 †
- メンバに集計したい値を持つオブジェクトの配列で reduce を使って合計を出すサンプル
chargedAmountsTotal() {
return this.chargedAmounts.amounts.reduce(
(accumulator, currentValue) => {
accumulator.amount += currentValue.amount;
return accumulator;
}, {amount:0}
).amount ;
},
- ページはいつ更新されるか
- 現在のブラウザーの実装は、以下のようになっているようである。「ようである」というのは、仕様書で確認したわけではないからだ。
イベント発生 → 関数の実行 → ページの再描画
- 上記の例で意図したように、カウンターが動いた都度表示させたいと思ったら、その都度関数の実行を完了しなければならない。しかしカウンターを動かすという行為そのものに関数の実行が必要である。どうしたらよいか?
- その答えが、setTimeout()というわけだ。
thisの理解 †
ES6 †
class †
カリー化 †
アロー関数 †
非同期処理 †
- JSの非同期処理を初めてES6のPromiseを使ったものに書き換えてみた 2018.10
- promiseに渡した非同期処理はすぐに実行されるため、「非同期処理がすぐに終わったらどうなるの？thenを呼ぶ前に終わったらどうなるの？怖い」と最初は思いがちだが実行結果を保持して待つため問題ない。例の場合だとpromiseにAを渡してにthenでB,Cを渡してやると、thenを呼んだ際にAが終わっていようが終わっていまいが、必ずAが終わった後にBかCが呼び出されることになる。
オブジェクト指向 †
Web画面制御系 †
文字列処理 †
日付処理 †
画像 †
通信 †
アニメーション、ゲーム †
- 女の子が降ってくるスクリプト(http://q.hatena.ne.jp/1231366704の31番)
javascript:(
function(){
scroll(0,0);
H='http://hamachiya.com/';
D=document;
F=Math.floor;
R=Math.random;
Q=new Image;
Q.src=H+'g1.gif';
L=function(){
var X=F(R()*vw);
var Y=0;
var r=F(R()*9)+3;
var V=Z(X,Y);
D.body.appendChild(V);
var f=function(){
if(Y+r<vh){
V.style.top=(Y+=r)+'px'
}else{
V.style.top=vh+'px';
V.src=H+'g2.gif';
setTimeout(function(){V.src=H+'g3.gif'},550);
clearInterval(t);
}
};
var t=setInterval(f,40)
};
Z=function(x){
var e=D.createElement('img');
e.src=Q.src;
var s=e.style;
s.position='absolute';
s.left=x+'px';
s.top=0;
return e;
};
var vw,vh;
Q.onload=function(){
vw=(self.innerWidth||
D.documentElement.clientWidth||D.body.clientWidth)
-Q.width;
vh=(self.innerHeight||
D.documentElement.clientHeight||D.body.clientHeight)
-Q.height;
setInterval(L,800);
Q.onload={}
}
}
)()
開発技法 †
ブックマークレット †
- ブックマークレットとは
- Bookmarklet。ウェブブラウザで作動するJavaScriptプログラムの一種。
- 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行されてちょっとした機能が実現できる。そのようなものをブックマークレットと言う。
- インストールはそのコードをブックマークするだけで行える。
- 「ブックマークを選ぶ」という操作だけで機能を実行できる点が手軽であり、ブラウザの簡便な追加機能として様々な種類のものが広く配布されている。
|
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
