JavaScript関連
JavaScript JSによるゲーム制作-(神経衰弱2023ver)
トランプ画像を使って神経衰弱ゲームを作ってみよう。これは以前の記事を2023年版としてhtml,css,jsを書き直したものだ。以前はtableタグを使ってトランプを並べていたが、今回はgridを使ってトランプを配置している
...
JavaScript 午後のJS（フルーツリスト作成)
JavaScriptを使って以下の処理を作成してみよう。
仕様
実行すると以下のように表示される
フルーツの名前と価格を入れ登録ボタンを押す
下部にリストが表示され、入力欄が空になる
...
JavaScript JSによるゲーム制作-(PanelPazzle)
おなじみの15パズルを作成してみよう。
完成イメージ
スタート画面
完成図が表示されている。このように1~15まで連続で並べられれば完成だ。
スタートボタンでスタート
スタートボタンを押すとシャッフル...
JavaScript Canvas入門
JSのお絵かきツールCanvasの基本を学ぼう。
Canvas下地づくり
任意のフォルダ(desktopなど)にcanvasフォルダを作成し、その中にindex.htmlを以下のように作成する
<!DOCTYPE ...
JavaScript テトリスを作ろう3
では前回の続きを作っていこう。
落下後、ボードに書き込む
落下したテトリミノをボード配列に書き込む処理を以下のように追記する。
//動きが止まったtetをボード座標に書き写す
const fix...
JavaScript テトリスを作ろう2
では前回の続きを作っていこう。
ボードの作成
テトリスは落下し終わったテトリミノは下部に積み上がっていく。この盤面に保存されているテトリミノの管理をするボードを作成しよう。以下のようにハイライト部を追記修正する。
<...
JavaScript テトリスを作ろう1
jsで定番ゲームテトリスを作ってみよう。
準備
tetris.htmlを任意の場所(desktop)に作成し、以下のように記述する。
<!DOCTYPE html>
<html>
<head...
JavaScript webAPIを叩いてみよう！
webAPIが何かを説明する前に実際に以下のURLを叩いてみよう。
これは国際宇宙ステーション(ISS)のリアルタイム座標をjsonで返却してくれるサービスだ。このようにURLを叩くことによって何らかの情報をレスポン...
JavaScript JavaScriptで英単語学習アプリを作成しよう。
英単語が学習できるWebアプリケーションを作成してみよう。10種類の動物が日本語が表示されるので英単語入力すると正解が表示される。10問終わると結果が出力される。
実行例
○実行すると以下のように表示される。
○...
JavaScript JSで単語帳を作ろう(後編)
JavaScriptで作成する単語帳の後編です。ローカルストレージを使ってデータの永続化をします。
JavaScript JSで単語帳を作ろう(前編)
JavaScriptを使って単語帳を作成してみましょう。前編ではフォームから入力された値で動的にテーブルを作成する作業を行います。
JavaScript JavaScriptでじゃんけんゲームを作ろう！
JavaScriptでじゃんけんゲームを作成します。CSSを使って見た目もかわいくしていきます。
JavaScript 午後のJS（九九表作成)
午後のひととき、サクッとJSで遊びましょう。
for文の練習でよく出てくる九九表に今回は見出しが付いています。
html,css,jsを使ってコーディングしてみてください。
○JS以外が書き込まれたところからやりたい人はこ...
JavaScript JSONP(郵便番号APIとの連携)
前回はproxyを設置してAjaxにて通信を行った。これはAjaxからでは直接外部ドメインにアクセスできないという制約のためだ。
zipcloudはjsonp(json with padding)にも対応しているので今回はそれを利用し...
JavaScript Ajax通信(郵便番号APIとの連携)
Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。
郵便番号APIに接続し郵便番号を入れると住所が自動入力されるようにする。
今回はzipcloudというサービスを利用させてい...
JavaScript bootstrap4
cssを１から書いてもよいが汎用的に使えるスタイルをまとめてくれているcssフレームワークというものが存在する。
今回はそのcssフレームワークの代表格bootstrapを使ってみよう。なおbootstrapのバージョンは４.0を使う。
...
JavaScript Ajax通信
Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。
今回サーバーサイドはJavaを利用する。
●エクリプス新規動的プロジェクトからajaxlessonを作成する。
●新規...
JavaScript JSによるゲーム制作-(神経衰弱)
トランプ画像を使って神経衰弱を作ってみよう。
2023作成の最新版があります
1.まずは以下をダウンロードし、デスクトップに展開する。
2.以下のようなフォルダ構成になっている。imagesフォルダにはトランプの画...
JavaScript JSによるゲーム制作-(PanelPazzle)
パネルをスライドさせてもとの配置に戻すゲームを作成してみよう。
記事を新しくしました。こちらを参照してください。
スタート画面
スタートボタンを押すとシャッフルされる。
15パズルの要領で移動させていく、動かせるパネルを...
JavaScript Webサイト制作-(カラーシュミレータ)
JSを使ってカラーシミュレーターを作ってみよう。
上部に色とカラーコード、下部にrgb成分を設定するスライダーが表示されている。
スライダーを設定すると色とカラーコードが表示される。
●index.ht...