劉任昌下午班級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定義區塊

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

PARAGRAPH段落,BUTTON案件，按下則執行HahA

留下PARAGRAPH

貼上從W3SCHOOLS拷貝的DIVISION

以上的程式碼在下面IN-LINE行內CSS

<STYLE>

BUTTON{BACKGROUND-COLOR:GRAY;FONT-SIZE:2EM;COLOR:YELLOW;}/*內部CSS*/

#container {width: 400px;height: 400px;position: relative;background: ORANGE;}

#animate {BORDER:10PX WHITE SOLID;  width: 50px;

  height: 50px;  position: absolute; background-color: red;}

</STYLE>

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

<P>介紹純文字編輯器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>程式語言最重要的三個結構：<B>函數function</B>、迴圈、判斷。</P>

<P>PARAGRAPH段落,BUTTON案件，按下則執行HahA</P>

<BUTTON ONCLICK="MONEY()"STYLE="BORDER:SOLID 10PX RED">請盛和道夫按下</BUTTON>

<BUTTON ONCLICK="alert('執行內建函數,哈哈')">按下執行內建函數alert</BUTTON>

<p><button onclick="myMove()">劉任昌拷貝W3SCHOOLS</button>留下PARAGRAPH</p> 

貼上從W3SCHOOLS拷貝的DIVISION

<div id ="container">

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

</div>

<SCRIPT>

function MONEY() {

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

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

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

    paragraphs[i].style.color = "white";

    if (i % 2 == 0) 

    paragraphs[i].style.background = "blue";}}

/* 以下拷貝自W3SCHOOLS */

function myMove() {

  let id = null;

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

  let pos = 0;

  clearInterval(id);

  id = setInterval(frame, 10);

  function frame() {

    if (pos == 350) {

      clearInterval(id);

    } else {

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

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

    } }}

</SCRIPT>