読者です 読者をやめる 読者になる 読者になる

落書きノート

ふと自分が気になった事を書いてます

HTML

HTML CSS JavaScriptでCG作成

まあ、パターンが決まりつつありますが、乱数の使い方によっては少し作品の印象が変わるなと思いました。2枚目の写真はfor文のパラメータをいじった結果です。 <html> <head> <title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutori</head></html>…

HTML CSS JavaScriptでCG作成

これで最後ですかね。この次から「ジェネラティブアート」を少しずつ不定期に読んでいこうかと思ってます。 <html lang="ja"> <head> <meta charset="utf-8" /> <title>Canvas Tutorial Template</title> <script type="text/javascript"> var PI_2 = Math.PI * 2; var canvasW = 640; var canvasH = 480; var numMovers = 600; var friction = .96; var m</meta></head></html>…

HTML CSS JavaScriptでCG作成

面白かったので講座の続きを。ここで少し疲れたかな。 <html lang="ja"> <head> <meta charset="utf-8" /> <title>Canvas Tutorial Template</title> <script type="text/javascript"> const NUM = 500; const WIDTH = 640; const HEIGHT = 480; var speedX = new Array(NUM); var speedY = new Array(NUM); var locX = new Array(NU…</meta></head></html>

HTML CSS JavaScriptでCG作成

講座を見て自分でやってみました。乱数便利! <html> <head> <title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.globalAlpha = 0.3; for (i = 0; i < 1</head></html>…

HTML CSS JavaScriptでCG作成

VSCode,汎用的に使えるのは良いですが、インデントの挙動がおかしいとかがあって、まだところどころバグがあるんじゃないのかと思うのですが…。試しにAdobe提供のBracketsを使ってみると便利に使えたのでこちらを使ってみてます。Google Chromeでないとライ…

HTML CSS JavaScriptでCG作成

前回の続きです。 <html> <head> <title>canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(50,50,300,200); ctx.clearRect(120,80,200,140); ctx.strokeRect(</head></html>…

HTML CSS JavaScriptを使ってCG作品を作る

今日は山中まで親と一緒に車で喫茶店に行ってきました。丸太で作られたような店で、そこでコーヒーを。森林浴をしながらコーヒーを飲むかのような。ハンモックもあってゆったり出来るスペースもありましたね。まあ、色々見て疲れたので、今日はOpenGLとクリ…

JavaScript スライドショーの作成

JavaScriptのような言語だとスライドショーが簡単に作成出来ます。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>例題3-6</title> </head> <body> <img src="./neko.png" name="image"><br> <input type="button" value="スタート" onclick="start();"> <script> var i = 1; function start(){ setInterval("s…</body></html>

JavaScript サブウィンドウを出す

問題集制覇。次はVBAですかね…。画像が用意出来ない課題もあったので抜かしました。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>例題3-4</title> </head> <body> <h1>猫の画像!</h1> <a href=JavaScript:sub_win("./gazo.html")><img src="./neko.png" align="center"> <p>猫の画像をクリックしてください。</p> </a> <script> function…</body></html>

JavaScript 画像をスワップ、マウスオーバー処理等々

こんな感じです。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>例題3-3</title> </head> <body> <h1>画像が2段階で変化します。カーソルを載せてからクリックしてください。</h1> <img src="./hana.jpg" onmouseover="this.src='./neko.png'" onclick="this.src='./bakuhatsu.jpg'" onmouseout="this.src='./hana.jpg'">…</body></html>

JavaScript eラーニング風味のウェブアプリ。ラスト。

ちょっと本格的な感じです。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>配列を使用した2択問題</title> </head> <body> <h1>情報に関する問題10問 あなたはSクラスのスペシャリストか? 凡人か? 試してみませんか?</h1> <p>正誤に答えてください。</p> <p>正しければ「OK」を、間違っていれば「キャンセル」をクリックしてください。</p> <form> </form></body></html>

JavaScript 繰り返し文を使ったelearning風味のウェブアプリ

先ほどとあまり大差ないのですが、一応投稿。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>得点記録-for文</title> </head> <body> <h1>足し算練習 -得点記録-</h1> <form name="ADD"> <input type="text" name="A"> + <input type="text" name="B"> = <input type="text" name="C"> </form></body></html>

JavaScript elearning風味のウェブアプリ

もう少しで終わる…とダッシュでやってましたが、ボリュームが結構ありました。 今回、evalを使った練習をしています。色々と評判の悪いメソッドのようですが。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>足し算elearning</title> <script> function execute(){ document.ADD.A.value = Math.floor(Math.random() * </meta></head></html>…

JavaScript prompt文によるパスワード入力

ここまで進んで、もう少しで終わりですね。あっという間…。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>prompt文によるパスワード入力</title> </head> <body> <script> function pass(){ var password = prompt("パスワードを入力してください。"); if(password == "4321") location.href = "./ex-2-2.html"; else alert("パスワ</body></html>…

JavaScript 例によって写真を表に表示する

用意した画像のサイズがバラバラなんですが、一応出来たということで。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>3行3列の表に写真表示</title> </head> <body> <script> document.writeln('<table>'); for(var i = 1; i <= 3; i++){ document.writeln('<tr>'); for(var j = 1; j <= 3; j++){ document.writeln('</tr></table></body></html>

JavaScript if文 Mathクラス

if文とよくゲーム等で利用されるMathクラスです。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>大小判断3分岐</title> </head> <body> <script> var a = Math.floor(Math.random() * 10); var b = Math.floor(Math.random() * 10); if(a > b) document.write("a > bである。a = ", a, " b = ", b); else if…</body></html>

JavaScript function文

※解答の見間違いでした。記事を修正しました。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>function文</title> </head> <body> <script> function sum(a, b, c){ var g = (a + b + c); return "合計" + g + "点"; } document.write("英語、数学、国語の合計点<br>", sum(50,60,70)); </script> </body> </html> 解…

JavaScript 文字の拡大表示

文字の拡大表示と聞いて、JSにそんなメソッドあったっけと思って調べていたのですが、HTMLのfontタグ使うだけでした。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>文字の拡大表示</title> </head> <body> <script> var a = 3; var b = 4; var c = a + b; </script> <font size="7"> <script> document.write( a, " + ", b ," = ", c);…</font></body></html>

JavaScript はじめの一歩

JavaScriptの練習問題です。ちょっと時間がないので、今日はあんまりやれてません。次の投稿ぐらいで飯食べに行ってきます。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>見出しをつけた加算</title> </head> <body> <script> var a = 3; var b = 4; var c = a + b; document.write( a, " + ", b ," = ", c); </script> </body> </html>

PHP メール送信フォーム

最後の問題です。メール送信フォームの問題でした。ちゃんとメール送信出来ます。自分で書いたのは以下の様な感じです。 <html> <head> <title>メールフォーム</title> </head> <body> <form action="./ex-6-6.php" method="post"> <table> <tr> <td>タイトル:</td> <td><input name="title" type="text" placeholder="タイトル" /></td> </tr> <tr> <td>宛先:</td> <td></td></tr></table></form></body></html>

PHP ラジオボタンで選択して送信

ラジオボタンを使ったプログラムです。 <html> <head> <title>ラジオボタンで選択して送信</title> </head> <body> <h1>プログラミング入門書の案内</h1> <form action="./ex-6-5.php" method="post"> </form></body></html>

PHP テキストボックスから送信

以下のプログラムです。先ほどの問題を応用したものです。 <html> <head> <title>テキストボックスから送信</title> </head> <body> <h1>プログラミング入門書の選択</h1> <form action="./ex-6-4.php" method="post"> <input name="syomei" type="text" placeholder="書籍名" /> <input type="submit" value="送信" /> </form> </body></html>

PHP フォーム選択 送信

フォームを使ったプログラムです。アクションイベントもついてます。 <html> <head> <title>フォーム選択 送信</title> </head> <body> <h1>プログラミング入門書の案内</h1> <form action="./ex-6-3.php" method="post"> </form></body></html>

PHP フォーム ドロップダウンメニュー

例によって練習問題です。以下のプログラムです。 <html> <head> <title>フォーム ドロップダウンメニュー</title> </head> <body> <h1>プログラミング入門書の案内</h1> <select name="form"> </select></body></html>

PHP 正規表現で検索その2

こんな感じのプログラムになりました。パターンを配列化してforeachで取り出しています。 <html> <head> <title>文字クラス</title> </head> <body> <table border="2"> <tr> <th>パターン</th> <th>文字列</th> <th>一致</th> </tr> </table></body></html>

PHP 正規表現で検索

正規表現で文字列検索です。色々と使えるので正規表現は覚えておきたいですね。 <html> <head> <title>検索</title> </head> <body> <table border="2"> <tr> <th>検索文字</th> <th>文字列</th> <th>一致</th> </tr> </table></body></html>

PHP 全角文字(漢字)列の長さ

strlenとmb_strlenを使ったプログラムです。strlenはバイト数で文字列の長さを取得するのに対し、mb_strlenは文字数で長さを取得します。 <html> <head> <title>全角文字(漢字)列の長さ</title> </head> <body> <table border="2"> <tr> <th>都道府県</th> <th>strlen</th> <th>mb_strlen</th> </tr> </table></body></html>

PHP 半角文字列比較

C言語と似たような感じです。以下がそのプログラムです。 <html> <head> <title>半角文字列比較</title> </head> <body> "; print "okayamasiの文字の長さは" . strlen($v2) . "です。<br />"; ?> <hr /> "; }…</hr></body></html>

PHP 練習問題 派生クラス

なかなか難しい課題です。問題の意図しているところがわからない部分もあったので、結局答えを見ました。答えを見てこうしたいのねと思って納得。プログラムは以下のようになります。 <html> <head> <title>派生クラス</title> </head> <body> syomei = $su; if($nedan >= 0 && $nedan <= 50…</body></html>

PHP 練習問題 コンストラクタ

staticの使い方が勉強になりました。以下のプログラムです。 <html> <head> <title>コンストラクタ</title> </head> <body> syomei = $s; if($k >= 0 && $k <= 5000){ $this->kakaku = $k; }else{ $this->kakaku =…</body></html>

PHP 練習問題 カプセル化

protectedで宣言して継承するのかなというイメージが有りましたが、単にメンバ変数をprivateで隠すだけでした。以下のようになります。 <html> <head> <title>カプセル化</title> </head> <body> syomei = $su; } public function setkakaku($nedan){ if($nedan >= 0 && $neda…</body></html>

PHP 練習問題 クラスの基礎 オブジェクトの作成

例によって問題集で練習です。クラスを使ったプログラムです。自分で書いたコードは以下になります。 <html> <head> <title>class オブジェクトの作成</title> </head> <body> syomei = "PHP入門"; $this->kakaku = 1500; } public function getSyomei(){ return $this->syomei; } public…</body></html>

PHP 小計計算 章末問題

PHPの問題集、そろそろ終わりに近づいてきました。まだもうちょっとありますが、結構ボリュームがあると思います。言語の練習とか暇潰しには良い感じです。 <html> <head> <title>関数 小計計算</title> </head> <body> </body></html>

PHP current, next文

繰り返し文を使ってなんとかしようとあれこれ試行錯誤しておりましたが、問題の条件を見る限り難しいと判断しました。とりあえず以下のプログラムが解答です。 <html> <head> <title>current,next文</title> </head> <body> <table border="2"> <tr bgcolor="yellow"> <th>書籍</th> </tr> <td>" . current($hon…</td></table></body></html>

PHP 見出し表示とそのサイズを関数化する

自分で書いたプログラムはこんな感じです。 <html> <head> <title>関数 見出し表示</title> </head> <body> <font size=\"{$size}\">{$char}</font></h1>"; } print midasi("コンピュータIT部門の書籍案内", 15); print "<hr>"; print midasi("入門書", 6); print "<hr>"; print midasi("PHPプログラミング入門", 4); print "<…</hr></hr>

PHP arrayとfunctionを使い、繰り返し文で出力する。

練習問題です。以下のプログラムになります。 <html> <head> <title>関数 小計計算</title> </head> <body> <table border="2"> <tr> <th>単価</th> <th>数量</th> <th>小計</th> </tr> </table></body></html>

PHP arrayを使用した多次元配列

arrayを使って多次元配列を作り、それをforなどの繰り返し文で取り出して表に表示するというものです。自分で書いたのはこんな感じです。 <html> <head> <title>2次元配列</title> </head> <body> array( 80, 90, ), "倉敷" => array( 85, 95, ), "岡山" => array( 70, 100, ), ); ?> <table border="2"> <tr> <th>氏名</th> <th>国語</th> <th>数</th></tr></table></body></html>…

個人的なメモ PHP extractとcompactを使う

extractで配列をプレフィックス付きの変数に変換し、compactで再度配列に変換します。練習ですね。 <html> <head> <title>compact</title> </head> <body> <table border="2"> <tr> <th>書名</th> </tr> <…</table></body></html>

個人的なメモ PHP 連番の変数をfor文で扱う

PHPの問題集を解いてますが、連番の変数をどうにかして楽に出来ないかと模索していました。すると、以下のようにプログラムを組めば楽でした。 <html> <head> <title>配列を変数に変換</title> </head> <body> <table border="2"> </table></body></html>

個人的なメモ PHP 演習問題 省力化してコーディングする

これまでPHPをまともに勉強してきませんでした。C言語とかJavaのようなプログラミング言語の延長線上で出来ると思っていました。 で、今回、暇潰しにKindleでPHPの例題集の本を購入し、演習問題を解いていくと、今まで無駄なコーディングをしていたんだなと…

Bing Search APIを使って画像をかき集める

表題の通り。今回、ウェブ検索機能は省略しました。あらかじめBing Search APIでアカウント登録しないといけません。Microsoftのアカウントを取得して無料プランで登録すれば利用できます。 <html> <head> <title>イメージコレクション</title> <script src="./jquery-1.11.3.min.js"></script> <script src="./image_collection.js"></script> </head></html>