崔甯甯Html,Css,JavaScript將執行結果放置網頁取代檔案

VScode截圖

期中考筆試重點

• write寫入檔案模式mode w=write會覆蓋原有檔案, a=append接續原來檔案, x=create創立新檔案, x與w有何不同？
• write寫入檔案,預設不換行,換行'\n'
• print呈現在螢幕,預設換行,不換行end=''。
• write寫入用到英文以外的字元(一,a,b)encoding='utf8'
• 開一個資料夾放三個檔案html, css, js，用html文件document
• 在html檔案指定css與js檔案，參考w3schools...都有寫

崔甯甯輸入參數

輸入k
輸入m
輸入n

重點

alert內建函數,自訂函數abc

崔甯甯輸出結果

function abc(){ k = document.getElementById('k').value; m = document.getElementById('m').value; n = document.getElementById('n').value; out = k; document.getElementById('out').innerHTML=out; }

程式碼

VScode檔案的html程式碼

<link rel='stylesheet' href="abc.css">

<script src="abs.js"></script>

<h1>崔甯甯輸入參數</h1>

輸入k<input type="number" value="1" id="k"></input><br>

輸入m<input type="number" value="1" id="m"></input><br>

輸入n<input type="number" value="1" id="n"></input><br>

<button onclick="abc()">執行自訂函數</button>

<h1>重點</h1>

alert內建函數,自訂函數abc

<h1>崔甯甯輸出結果</h1>

<div id="out"></div>

VScode檔案的css程式碼

h1{background-color: orange; color: white; border: 10px solid gold; text-align:center; padding: 5px}

ul{background-color: pink; color: white; font-size: 2em;line-height:1.5}

input{font-size:24px;background-color:rgb(210, 250, 215);}

VScode檔案的js程式碼

function abc(){

    k = document.getElementById('k').value;

    m = document.getElementById('m').value;

    n = document.getElementById('n').value;

    out = k;

    document.getElementById('out').innerHTML=out;

    }

JavaScript維基百科

教學影片

財金程式設計391VS Code建立html, css, js

財金程式設計392HTML嵌入CSS,JS