プログラム – ページ 3

Web Storage の試作プログラム

Web Storageを用いれば、Webを閉じた後も、各種データを保存しておけます。例えば、Webアプリの「学習システム」を考えた場合、Web Storageに「学習履歴」を保存することが可能になります。今回、「学習

Promiseを用いて、JavaScriptの非同期関数を同期的に動かします。本記事は、記事「setTimeoutを用いて、非同期関数を同期的に動かす」の続きになります。基本はsetTimeoutですが、setTim

JavaScriptやjQueryでプログラミングしていると、非同期関数を使用する箇所で、自分が意図しているのとは違う動きになることがあります。その際、非同期関数を同期的に動かすことができれば、問題は解決します。 &n

Scalable Vector Graphics（SVG）を用いて、「タイマー」を作りました。長方形（バー）が縮むことで、時間経過が見えるタイマーです。記事「1

Scalable Vector Graphics（SVG）を用いて、「長方形」を描画するプログラムを作ります。そして、描いた「長方形」を移動させます。（注）SVG（Scalable Vector Grap

時間の経過が見えるタイマーを作りました。棒（バー）の長さが縮んでいくことで、時間経過を表現します。以前、記事「１分タイマーの作り方」で、１分のカウントダウンタイマーをプログラミングしました

高い解像度の写真を、サイトの背景画像にするプログラムを作りました。写真を自動でクリッピングすることで、写真を縮小することなくサイトの背景画像にします。（注）クリッピング：写真の一部を切り取ることこの部分はifram

ページを開けると、１分のカウントダウンが始まる、１分タイマーを作ります。下図は、１分タイマーのフローチャートです。とても簡単なフローチャートです。文章にすると、以下の手順となります。

ページ上にJavaScriptを用いて点を描画します。ここでも、やはり、Canvasを使用します。（注）Canvasの詳しい説明は、記事「Canvasに長方形を描く」をご参照ください。点の描画は、以下

前回記事「Canvasに長方形を描く」の続きです。ボタン操作で、Canvas上の長方形を描画し、また、消去します。前回のプログラム <!DOCTYPE html> <html> <hea