JavaScript基本的な記述　その2

JavaScript

前回に引き続き、JavaScript基本的な記述を書いていきます。

以下、ソース。

calc　計算

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>計算</title>
<script>
  function calc() {
	  document.myform.result.value =
	  document.myform.price.value * document.myform.count.value;
  }
</script>
</head>

<body>
<form name="myform">
  <label for="price">単価</label>
  <input type="text" id="price" size="10" onChange="calc()"><br>
  <label for="count">数量</label>
  <input type="text" id="count" size="10" onChange="calc()"><br>
  <label for="result">合計</label>
  <input type="text" id="result" size="10" onChange="calc()">
</form>
</body>
</html>

JavaScriptによるナビゲーション

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptによるナビゲーション</title>
<style>
ul {
  list-style: none;
  margin: 50px;
  padding: 0;
}
li {
  margin: 0;
  padding: 0;
  float: left;
}
</style>
</head>

<body>
  <div id="container">
    <nav>
      <ul>
        <li><a href="#"><img src="img/btn01.jpg" width="160" height="50" alt="ホーム" onMouseOver="this.src='img/btn01_b.jpg'" onMouseOut="this.src='img/btn01.jpg'"></a></li>
        <li><a href="#"><img src="img/btn02.jpg" width="160" height="50" alt="カフェフード" onMouseOver="this.src='img/btn02_b.jpg'" onMouseOut="this.src='img/btn02.jpg'"/></a></li>
        <li><a href="#"><img src="img/btn03.jpg" width="160" height="50" alt="カフェドリンク" onMouseOver="this.src='img/btn03_b.jpg'" onMouseOut="this.src='img/btn03.jpg'"/></a></li>
        <li><a href="#"><img src="img/btn04.jpg" width="160" height="50" alt="インフォメーション" onMouseOver="this.src='img/btn04_b.jpg'" onMouseOut="this.src='img/btn04.jpg'"/></a></li>
        <li><a href="#"><img src="img/btn05.jpg" width="160" height="50" alt="お問い合わせ" onMouseOver="this.src='img/btn05_b.jpg'" onMouseOut="this.src='img/btn05.jpg'"/></a></li>
      </ul>
    </nav>
  </div>
</body>

今日はここまで。
続きはまた次回。