02.2　htmlの変更 – Web Service Development

・htmlの変更内容の説明

$ cd /var/www/html/JS/02
$ cat index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お絵描き DEMO</title>
<script src="lib/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="css/layout.css">
<script type="text/javascript" src="js/canvas.js"></script>
</head>
<body>
  <canvas id="canvas" width="500" height="300" ></canvas>
  <div class="option">
    <div class="color">
      色：
      <a class="black" data-color="0, 0, 0, 1"></a>
      <span class="black"> :black </span>
      <a class="red" data-color="255, 0, 0, 1"></a>
      <span class="red"> :red </span>
      <a class="blue" data-color="0, 0, 255, 1"></a>
      <span class="blue"> :blue </span>
    </div>
    <div class="bold">
      太さ：
      <a class="small" data-bold="1">小</a>
      <a class="middle" data-bold="5">中</a>
      <a class="large" data-bold="10">大</a>
    </div>
  </div>
  <br>
  <input type="button" value="clear" id="clear">
  <a id="download" href="#" download="canvas.jpg">ダウンロード</a>
  <div id="result"><img src=""></div>
</body>
</html>

1.jQueryの最新版への変更　jquery-1.12.1.min.js　-> jquery-3.5.1.min.js

<script src="lib/jquery-3.5.1.min.js"></script>

2.CSSの外部リンク

<link rel="stylesheet" href="css/layout.css">

3.JavaScriptの外部リンク

<script type="text/javascript" src="js/canvas.js"></script>

4.href=””の無効化
before:

    <div class="bold">
      太さ：
      <a href="" class="small" data-bold="1">小</a>
      <a href="" class="middle" data-bold="5">中</a>
      <a href="" class="large" data-bold="10">大</a>
    </div>

;
after:

    <div class="bold">
      太さ：
      <a href="" class="small" data-bold="1">小</a>
      <a href="" class="middle" data-bold="5">中</a>
      <a href="" class="large" data-bold="10">大</a>
    </div>

;