Learn Javascript
js 操作 css & html

藉由snippet 了解之前的DOM和順便練習js

練習加入表格

template參考

  1. [JS, side] innerTextHtml.pptx
  2. [JS] 03 利用js 建立HTML標籤.docx
  3. [JS] 03 利用js 建立HTML標籤.pptx
  4. [JS] 03 利用js 操作標籤.docx

教案

利用js 建立HTML標籤

原始碼(利用js 建立HTML標籤.html) 
<!DOCTYPE html>

<html>
<head>
<Title> </Title>
<script language="JavaScript">
function simpleMarkup(form){
 TestVar = form.inputbox.value;
 alert("you typed: " + TestVar);
 }
</script>
</head>
<body>
<form name="myform" action="" method="get">
enter something in the box: <br/>
<input type="" name="inputbox" value="">
<input type="button" name="button1" value="read" onclick="readText(this.form)">
<input type="button" name="button2" value="write" onclick="writeText(this.form)">


</form>

</body>
</html>

inner Text & HTML

原始碼(innerText.html) 
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

</head>
<body>

<h2>innerhtml << textformat </h2>
<pre id=txtin_html></pre>
<h2>innerhtml << htmlformat </h2>
<pre id=htmlin_html></pre>
<h2>innerText << txtformat </h2>
<pre id=txtin_txt></pre>
<h2>innerText << htmlformat </h2>
<pre id=htmlin_txt></pre>  
<script type="text/javascript">

  var commenthtml = '<ul><li style="color:red;">This is a comment</ul>';
  var commenttext = '&lt;ul&gt;&lt;li style=&quot;color:red;&quot;&gt;This is a comment&lt;/ul&gt;';

  var span1=document.createElement("span");

  span1.innerHTML=commenttext;

  // displays: This is a comment
  console.log( 'span1.textContent: ' + span1.textContent );
  
  //displays: "<ul><li style="color:red;">This is a comment</li></ul>"
  console.log( 'span1.innerHTML:' + span1.innerHTML ); 

  //displays: "<ul><li style="color:red;">This is a comment</li></ul>"
  //span1.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;');
  document.getElementById('txtin_html').innerHTML = commenttext;
  document.getElementById('htmlin_html').innerHTML = commenthtml;
  document.getElementById('txtin_txt').innerText = commenttext;
  document.getElementById('htmlin_txt').innerText = commenthtml;
  //文字進innerHTML，再分別利用innerHTML,innerText讀出
  console.log(document.getElementById('txtin_html').innerHTML);
  console.log(document.getElementById('txtin_html').innerText);
  //標籤進innerHTML，再分別利用innerHTML,innerText讀出
  console.log(document.getElementById('htmlin_html').innerHTML);
  console.log(document.getElementById('htmlin_html').innerText);
  //文字進innerText，再分別利用innerHTML,innerText讀出
  console.log(document.getElementById('txtin_txt').innerHTML);
  console.log(document.getElementById('txtin_txt').innerText);
  //標籤進innerText，再分別利用innerHTML,innerText讀出
  console.log(document.getElementById('htmlin_txt').innerHTML);
  console.log(document.getElementById('htmlin_txt').innerText);
  //textcontent?
  console.log(document.getElementById('txtin_html').textContent);
  console.log(document.getElementById('htmlin_txt').textContent);
</script>
</body>
</html>

這裡用的不是encodeURI 或 encodeURIComponent .
const escapeHTML = str =>
  str.replace(
    /[&<>'"]/g,
    tag =>
      ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
      }[tag] || tag)
  );
escapeHTML('<a href="#">Me & you</a>');

animation

原始碼(ex_css_animation.html) 
<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <title>Simple Box Move</title>
  <style>
    html {
      background: #f2f2f2;
    }


    .box {
      -webkit-animation-name: movingBox;
      -webkit-animation-duration: 2300ms;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;

      -moz-animation-name: movingBox;
      -moz-animation-duration: 2300ms;
      -moz-animation-iteration-count: infinite;
      -moz-animation-direction: alternate;

      -ms-animation-name: movingBox;
      -ms-animation-duration: 2300ms;
      -ms-animation-iteration-count: infinite;
      -ms-animation-direction: alternate;

      -o-animation-name: movingBox;
      -o-animation-duration: 2300ms;
      -o-animation-iteration-count: infinite;
      -o-animation-direction: alternate;

      animation-name: movingBox;
      animation-duration: 2300ms;
      animation-iteration-count: infinite;
      animation-direction: alternate;

      width: 100px;
      height: 100px;
      background: #FFF;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    }

    @-webkit-keyframes movingBox {
      0% {
        -webkit-transform: -webkit-translate(0, 0);
        transform: translate(0, 0);
        opacity: 0.3;
      }

      25% {
        opacity: 0.9;
      }

      50% {
        -webkit-transform: -webkit-translate(100px, 100px);
        transform: translate(100px, 100px);
        opacity: 0.2;
      }

      100% {
        -webkit-transform: -webkit-translate(30px, 30px);
        transform: translate(30px, 30px);
        opacity: 0.8;
      }
    }

    @-moz-keyframes movingBox {
      0% {
        -moz-transform: -moz-translate(0, 0);
        opacity: 0.3;
      }

      25% {
        opacity: 0.9;
      }

      50% {
        -moz-transform: -moz-translate(100px, 100px);
        opacity: 0.2;
      }

      100% {
        -moz-transform: -moz-translate(30px, 30px);
        opacity: 0.8;
      }
    }

    @-ms-keyframes movingBox {
      0% {
        -ms-transform: -ms-translate(0, 0);
        opacity: 0.3;
      }

      25% {
        opacity: 0.9;
      }

      50% {
        -ms-transform: -ms-translate(100px, 100px);
        opacity: 0.2;
      }

      100% {
        -ms-transform: -ms-translate(30px, 30px);
        opacity: 0.8;
      }
    }

    @-o-keyframes movingBox {
      0% {
        -o-transform: -o-translate(0, 0);
        opacity: 0.3;
      }

      25% {
        opacity: 0.9;
      }

      50% {
        -o-transform: -o-translate(100px, 100px);
        opacity: 0.2;
      }

      100% {
        -o-transform: -o-translate(30px, 30px);
        opacity: 0.8;
      }
    }

    @keyframes movingBox {
      0% {
        transform: translate(0, 0);
        opacity: 0.3;
      }

      25% {
        opacity: 0.9;
      }

      50% {
        transform: translate(100px, 100px);
        opacity: 0.2;
      }

      100% {
        transform: translate(30px, 30px);
        opacity: 0.8;
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>


</body>

</html>

前 後