備忘録 『ドラゴンクレイズ』用のモンスター図鑑の作成記録 忍者ブログ
javascriptの初心者。  http://ocyanomi.chagasi.com/
Admin / Write
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

<form method="post">
 <input name="Button1" type="button" value="button" onclick="henkou1()"/>
 <input name="Button2" type="button" value="button" onclick="henkou2()"/>
 <table style="width: 200px">
  <tr>
   <td><div id="mname">ホノオダマ</div></td>
  </tr>
  <tr>
   <td>
    <img alt="cha img" name="char001" src="0003.png" height="200" width="200">
   </td>
  </tr>
 </table>
</form>

<script type="text/javascript">
function henkou1()
{
document.getElementById("mname").innerHTML="ホノオダマ";
document.char001.src= "0003.png";
}
function henkou2()
{
document.getElementById("mname").innerHTML="水のエレメンタル";
document.char001.src= "0005.png";
}
</script>

上記を ***.html にして 0003.png と0005.png と同じフォルダーにいれ
立ち上げるとボタンを押すと文字、絵が変わる。
PR
表、ボタンはメモ帳打ち込みでもできますが 
面倒なので Microsoft Expression Web4 を使用します。me  











作成されるソースコードは 大体次のようになります。
<form method="post">
 <input name="Button1" type="button" value="button" />
 <input name="Button2" type="button" value="button" />
 <table style="width: 200px">
<tr>
   <td>ホノオダマ</td>
</tr>
<tr>
 <td>
    <input name="Image1" src="0003.png" type="image" 
    height="200" width="200" >
   </td>
  </tr>
 </table>
</form>
このままメモ帳で作成できますが コマンド打ち込みがめんどうなので
HP作成ソフトを使おうと思います。

私の持ってる「ホームページV4」はきれいに簡単にHPを作成できますが
自作javascriptを使う事が出来ないので
無料で配布されている Microsoft Expression Web4 を使用します。


初めてブログというものを使用してみたけど開発記録として
これは楽だ。

今まで メモ帳に書いてディスクトップにぺたぺた。
画面が汚い。((+_+))

とりあえず 5つの基本技を確認したら なんとか作成出来そうだと思い込む。

alert(表示する内容)

うまく動かない場合に<script> </script> の間にアラートを設置する。

alert("こんにちは")
  どこまで動いているか確認用。

alert(変数)
  途中の代入値の確認用。

うまく javascript が動かない時 (スペル間違いの場合が多い)
上から順にずらして アラート 記入 HP起動。
アラートが起動しなければその場所をチェック。
<html>
 <body>
  <form method="post">
   <input name="Button1" onclick="ai()" type="button" value="あいさつ" >
  </form>
 </body>
 <script type="text/javascript">
  function ai(){
   document.write("こんにちは");
  }
 </script>
</html>

インプットボタン function関数を呼び出す事ができる。
この場合 ボタンを押すと こんにちは 書き込み関数を呼び出す。
<html>
 <body>
 </body>

 <script type="text/javascript">
  //// 配列定義
  var na = new Array(); 
  na[0] = new Array();
  na[1] = new Array();
  //// 配列代入
  var na = [
  ["aaa","bbb"],
  ["ccc","ddd"]
  ];
  //// 代入確認 ( na[0][0]にaaaが入っている。)
  document.write(na[0][0]);
  document.write(na[0][1]);
  document.write(na[1][0]);
  document.write(na[1][1]);
 </script>
</html>


<html>
 <body>
  <img alt="cha img" name="char001" src="0003.png">
 </body>
</html>

上記をメモ帳に記入して ファイル名を ***(なんでもいい).html に変更。
同フォルダ内に0003.pngのイラストをいれる。
ダブルクリックで起動させると
0001
 のイラスト(0003.png)が表示される。
  (altはイラスト未表示の文字なのでなんでもいいけど必須)




イラスト部分の変更は
<html>
 <body>
<img alt="cha img" name="char001" src="0003.png">
 </body>
 <script type="text/javascript">
  document.char001.src= "0005.png";
 </script>
</html>
上記をメモ帳に記入して ファイル名を ***(なんでもいい).html に変更。
同フォルダ内に0005.pngのイラストをいれる。
ダブルクリックで起動させると
0005
  のイラスト(0005.png)が表示される。
<html>
 <body>
  おはよう
 </body>
</html>

上記をメモ帳に記入して ファイル名を ***(なんでもいい).html に変更。
ダブルクリックで起動させると

おはよう

の文字が表示される。

「おはよう」の文字部分の変更は
まず <div id>で位置確定。
 <div id="書き込み">おはよう</div>  (書き込みはなんでもいい)
その位置の文字変更。
 document.getElementById("書き込み").innerHTML="こんにちは";


<html>
 <body>
  <div id="書き込み">おはよう</div>
 </body>

 <script type="text/javascript">
  document.getElementById("書き込み").innerHTML="こんにちは";
 </script>
</html>

上記をメモ帳に記入して ファイル名を ***(なんでもいい).html に変更。
ダブルクリックで起動させると

こんにちは

の文字に書き換えられる。
作成の目的
 ・ドラゴンクレイズのモンスター図鑑を作成する。
 ・ともかく「とりあえず動けばいい」との精神で制作。

1  2  3  4 

忍者ブログ [PR]