fkm ~ Super software entertainerへの道 ~

software開発に関することを書いていきます

2011-11-14

よしやるかJavascript(4)

配列を作ったり, 表示してみたりしよう

Step 5

配列の中身を順にulに追加してみよう.

初期化と生成をいっきにやりたいときはnew Array(いれたいもの)で作れる.
Javaだとこんな風にもかけますよね.

String[] names = {"a", "b", "c"};

配列の長さはlengthでとれるので, それを使うとこんな感じ？

<html>
<head>
  <title>Step 5-1</title>
  <script type="text/javascript">
  <!--
  var names = new Array('a', 'b', 'c');
  function moke(){
    var ul = document.getElementsByTagName('ul')[0];
    for (var i = 0 ; i < names.length ; ++i) {
      var li = document.createElement('li');
      li.innerHTML = 'name=' + names[i];
      ul.appendChild(li);
    }
  }
  //-->
  </script>
</head>
<body>
<h1>Step 5-1</h1>

<Input type="button" onclick="moke()" value="Let's push"/>
<ul>
</ul>
</body>
</html>
2011-11-14

よしやるかJavascript(3)

要素を作って追加してみよう

Step 4

ボタンを押すとリストにli要素を1つ追加するscriptを書いてみよう

新しい要素を作るにはcreateElement(要素名)
追加するには(親オブジェクト).appendChild(追加する要素). 言語やフレームワークによってこの辺微妙に名前が違うのが曲者ですよね.

また, タグ名で要素を配列で取ってくるのはgetElementsByTagName(タグ名). 

<html>
<head>
  <title>Step 4</title>
  <script type="text/javascript">
  <!--
  var count = 1;
  function moke(){
    var li = document.createElement('li');
    li.innerHTML = 'line' + count;
    count += 1;
    var ul = document.getElementsByTagName('ul')[0];
    ul.appendChild(li);
  }
  //-->
  </script>
</head>
<body>
<h1>Step 4</h1>

<Input type="button" onclick="moke()" value="Let's push"/>
<ul>
</ul>
</body>
</html>
2011-11-14

よしやるかJavascript(2)

DOMを操作してみる.

Step 3

ボタンを押したとき, idがtextの要素の中身を書き換えてみる.

getElementById(id)で要素が取り出せる. idは一意のはずなので1つだけとれる.

innerHTMLに要素の中身が入ってる.

<html>
<head>
  <title>Step 3</title>
  <script type="text/javascript">
  <!--
  function moke(){
    var p = document.getElementById('text');
    p.innerHTML = 'after';
  }
  //-->
  </script>
</head>
<body>
<h1>Step 3</h1>

<Input type="button" onclick="moke()" value="Let's push"/>
<p id="text">Before</p>
</body>
</html>
2011-11-13

よしやるかJavascript(1)

よし次！

Step 2

ボタンをクリックした時, ダイアログを出してみる.

関数を作るのは

function 名前(引数) { }

設定するのはonclickとか

<html>
<head>
  <title>Step 2</title>
  <script type="text/javascript">
  <!--
  function moke(){
    window.alert('Hi!');
  }
  //-->
  </script>
</head>
<body>
<h1>Step 2</h1>

<Input type="button" onclick="moke()" value="Let's push"/>
</body>
</html>
2011-11-13

よしやるかJavascript(0)

DOMの操作とか, prototype.jsをちょっと使うとかぐらいはやったことあるfkmですが,
ちゃんとjavascriptを勉強してなかったりします.
ぶろぐになったのをいい機会にやってみることにします.

Step 1

HTML中の<p>要素の中身をjavascriptで生成してみる

こんな感じ？

<html>
<head>
  <title>Step 1</title>
</head>
<body>
<h1>Step 1</h1>

<p><script type="text/javascript">
<!--
 document.write('step 1');
--></script>
</body>
</html>