JavaScript関連
Webサイト制作-(郵便番号検索)
郵便番号APIを利用して、郵便番号から住所を検索するアプリを作成してみよう。
作るもの
郵便番号を入れるフォームがあるので、調べたい郵便番号を入れて送信ボタンをおす。
結果が表示される
一つの郵便番...
JSによるゲーム制作-(PanelPazzle 2024版)
JavaScriptでシンプルな15パズルゲームを作成!完成イメージからコーディング手順、スタイリング、シャッフル処理まで徹底解説します。初心者でもわかりやすい具体的なコード例付き。
Webサイト制作-(カラーシュミレータ2024版)
JSを使ってカラーシミュレーターを作成してみよう。(この記事は以前に作成したものを2024年版としてリニューアルしたものです。)
作るもの
上部に色とカラーコード、下部にrgb成分を設定するスライダーと直接カラーコードを入力で...
JSによるゲーム制作-(gridバージョン)
このチュートリアルでは、JavaScriptとCSSを使って神経衰弱ゲームを作成する方法を解説。初心者にも分かりやすく、ステップバイステップで進めるハンズオン形式のガイドです。
午後のJS(フルーツリスト作成)
JavaScriptを使って以下の処理を作成してみよう。
仕様
実行すると以下のように表示される
フルーツの名前と価格を入れ登録ボタンを押す
下部にリストが表示され、入力欄が空になる
...
Canvas入門
JavaScriptのCanvasで四角形やライン、円の描画方法を基礎から学ぶ入門ガイド。罫線や画像の追加、キャンバスの回転やパックマンの描画方法も紹介。初心者でもわかりやすく、実践的なサンプルコード付きで解説します。
テトリスを作ろう3
テトリス完成までの手順を初心者にもわかりやすく解説!ブロック落下処理、ライン消去、7種類のブロック実装から終了処理まで全ソースコードを公開。楽しく学べるプログラミング記事です。
テトリスを作ろう2
テトリス作成シリーズ第2回では、テトリスの移動・回転機能を実装する方法を学びます。ステップバイステップでコードを解説し、ゲーム開発の技術を実践的に習得できます。
テトリスを作ろう1
JavaScriptを使ってテトリスゲームを作成するステップバイステップガイド。四角の描画からテトリミノの描画、矢印キーでの移動まで、初心者向けに簡単に解説します。プログラミングの基本を学びながら、ゲーム開発に挑戦!
webAPIを叩いてみよう!
webAPIが何かを説明する前に実際に以下のURLを叩いてみよう。
これは国際宇宙ステーション(ISS)のリアルタイム座標をjsonで返却してくれるサービスだ。このようにURLを叩くことによって何らかの情報をレスポン...
JavaScriptで英単語学習アプリを作成しよう。
動物英単語クイズを通じてプログラミングを学ぼう!実行例や準備方法から解答例、ポイント解説まで網羅的に解説。HTML、CSS、JavaScriptの基礎を学びながら楽しくスキルアップできます。
JSで単語帳を作ろう(後編)
JavaScriptで作成する単語帳の後編です。データの変更、削除、ローカルストレージへの読み書き方法について詳しく説明しています。初心者でも理解できる内容で、アプリ開発の基本を学べます。
JSで単語帳を作ろう(前編)
初心者向け!HTML、CSS、JavaScriptを使ってシンプルな単語帳アプリを作成する手順を丁寧に解説。準備からコードのポイント解説、モバイル対応まで、実践的な内容を網羅。プログラミング学習に役立つ素材やフォルダ構成も紹介しています。
JavaScriptでじゃんけんゲームを作ろう!
JavaScriptでじゃんけんゲームを作成します。CSSを使って見た目もかわいくしていきます。
午後のJS(九九表作成)
午後のひととき、サクッとJSで遊びましょう。
for文の練習でよく出てくる九九表に今回は見出しが付いています。
html,css,jsを使ってコーディングしてみてください。
○JS以外が書き込まれたところからやりたい人はこ...
JSONP(郵便番号APIとの連携)
前回はproxyを設置してAjaxにて通信を行った。これはAjaxからでは直接外部ドメインにアクセスできないという制約のためだ。
zipcloudはjsonp(json with padding)にも対応しているので今回はそれを利用し...
Ajax通信(郵便番号APIとの連携)
Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。
郵便番号APIに接続し郵便番号を入れると住所が自動入力されるようにする。
今回はzipcloudというサービスを利用させてい...
bootstrap4
cssを1から書いてもよいが汎用的に使えるスタイルをまとめてくれているcssフレームワークというものが存在する。
今回はそのcssフレームワークの代表格bootstrapを使ってみよう。なおbootstrapのバージョンは4.0を使う。
...
Ajax通信
Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。
今回サーバーサイドはJavaを利用する。
●エクリプス新規動的プロジェクトからajaxlessonを作成する。
●新規...
JSによるゲーム制作-(神経衰弱)
トランプ画像を使って神経衰弱を作ってみよう。
2023作成の最新版があります
1.まずは以下をダウンロードし、デスクトップに展開する。
2.以下のようなフォルダ構成になっている。imagesフォルダにはトランプの画...