甲班JavaScript的第一堂課

介紹純文字編輯器EDITOR與瀏覽器BROWSER

介紹哈佛大學資訊科學課程CS505

上課內容HTML, CSS, JAVASCRIPT, PYTHON是哈佛大學CS50的主要內容

CSS是階層樣式表(Cascading Style Sheet)三種使用方式:線內(in-line)、內部(internal)、外部(external)

CSS三種使用方式：線內(in-line)、內部(internal)、外部(external)

CSS內部(internal)法用STYLE/STYLE定義區塊

CSS內部(internal)就是使用網頁內STYLE/STYLE然後有三種設定方式：元素標記、類別CLASS、ID識別

JAVASCRIPT使用方式分：內部(internal)、外部(external)，前者類似CSS內部法，而以SCRIPT/SCRIPT定義區塊

程式語言最重要的三個結構：函數、迴圈、判斷。

P代表PARAGRAPH段落，BUTTON按鍵，CLICK按下

ONCLICK命令，按下就執行後面的函數

JavaScript DOM=document，用JavaScript控制網頁文件

以下SCRIP(腳本)的開始是程式設計還是網頁

以上的程式碼貼在下面(順便示範線內樣式設定)

<style>

#container {

  width: 400px;

  height: 400px;

  position: relative;

  background: yellow;

}

#animate {

  width: 50px;

  height: 50px;

  position: absolute;

  background-color: purple;

}

</style>

<IFRAME SRC="https://zh.wikipedia.org/zh-tw/JavaScript" width="100%"></IFRAME> 

<P STYLE="FONT-SIZE:3EM">介紹純文字編輯器EDITOR與瀏覽器BROWSER</p>

<P>介紹哈佛大學資訊科學課程CS505</P>

<P>上課內容HTML, CSS, JAVASCRIPT, PYTHON是哈佛大學CS50的主要內容</p>

<P>CSS是階層樣式表(Cascading Style Sheet)三種使用方式:線內(in-line)、內部(internal)、外部(external)</p>

<P>CSS三種使用方式：線內(in-line)、內部(internal)、外部(external)</P>

<P>CSS內部(internal)法用STYLE/STYLE定義區塊</P>

<P>CSS內部(internal)就是使用網頁內STYLE/STYLE然後有三種設定方式：元素標記、類別CLASS、ID識別</P>

<P>JAVASCRIPT使用方式分：內部(internal)、外部(external)，前者類似CSS內部法，而以SCRIPT/SCRIPT定義區塊</P>

<P>程式語言最重要的三個結構：函數、迴圈、判斷。</P>

<P>P代表PARAGRAPH段落，BUTTON按鍵，CLICK按下</P>

<P>ONCLICK命令，按下就執行後面的函數</P>

<P>JavaScript DOM=document，用JavaScript控制網頁文件</P>

<BUTTON ONCLICK='HaHa()'>請劉亦菲按下</BUTTON>

<BUTTON ONCLICK='alert("不要講話！")'>內建</BUTTON>

<!--網頁HTML註解BUTTON鈕扣-->

<BUTTON ONCLICK='myMove()'>W3SCHOOLS動畫</BUTTON>

以下SCRIP(腳本)的開始是程式設計還是網頁

<div id ="container">

  <div id ="animate"></div>

</div>

<SCRIPT>

function HaHa() { /*定義函數function名稱自訂HaHa*/

  const paragraphs = document.querySelectorAll("p");/**/

  for (let i = 0; i < paragraphs.length; i++) {

    paragraphs[i].style.background = "pink";

   /*  if (i % 2 == 0) 

       paragraphs[i].style.background = "yellow";*/

  }

}

function myMove() {

  let id = null;

  const elem = document.getElementById("animate");

  let pos = 0;

  clearInterval(id);

  id = setInterval(frame, 20);

  function frame() {

    if (pos == 350) {

      clearInterval(id);

    } else {

      pos++;

      elem.style.top = pos + 'px';

      elem.style.left = pos + 'px';

    }}}

</SCRIPT>