財金程式設計461文件物件模型DOM

9月 29, 2024

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

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

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

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

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

CSS三種使用方式：

線內(in-line): 在標記指令內STYLE="..."
內部(internal): 用STYLE/STYLE定義區塊
外部(external): 另外.CSS檔案，讀取指令LINK REL HREF=

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

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

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

JAVASCRIPT三種使用方式：

線內(in-line): 只能使用於內建函數(方法)
內部(internal): 用SCRIPT/SCRIPT定義區塊
外部(external):另外.JS檔案，讀取指令SCRIPT SRC=/SCRIPT

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

Paragraph, Click按下, ONCLICK按下滑鼠事件event

以上的程式碼

<body>

<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三種使用方式：<ul>

<li>線內(in-line): 在標記指令內STYLE="..."</li>

<li>內部(internal): 用STYLE/STYLE定義區塊</li>

<li>外部(external): 另外.CSS檔案，讀取指令LINK REL HREF=</li></ul></p>

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

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

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

<p>JAVASCRIPT三種使用方式：<ul>

<li>線內(in-line): 只能使用於內建函數(方法)</li>

<li>內部(internal): 用SCRIPT/SCRIPT定義區塊</li>

<li>外部(external):另外.JS檔案，讀取指令SCRIPT SRC=/SCRIPT</li></ul></p>

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

<p>Paragraph, Click按下, ONCLICK按下滑鼠事件event</p>

<button onclick="MONEY()">自己的名字按下執行</button>

</body>

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";*/

}

document.body.style.backgroundColor = "skyblue";

}

</script>

12:03最後的示範

<STYLE>

.a{font-size:2em;

border: 5px solid red;

border-radius: 20px;

background-color: yellow;}

.b{font-size:2em; color: white;