李其學python期中考javascript按鈕button事件onchange

李其學輸入參數

const space=' ', slash='/', backslash='\\', cr='\n';

function row1(k,m){

    for(let i=0; i<k;i++){

        for(let ii=0; ii<m; ii++){

            for(let j=0; j<k-i-1; j++)

                out+=space;

            out+=slash;

            for(let j=0; j<2*i; j++)

                out+=space;

            out+=backslash;

            for(let j=0; j<k-i-1;j++)

                out+=space;};

    out+=cr;};};

function row2(k,m){

    for(let i=0; i<k; i++){

        for(let ii=0; ii<m; ii++){

            for(let j=0; j<i; j++)

                out+=space;

            out+=backslash;

            for(let j=0; j<2*k-2*i-2; j++)

                out+=space;

        out+=slash;

        for(let j=0; j<i;j++)

            out+=space;};

    out+=cr;};};

function abc(){

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

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

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

    out ='<pre>劉任昌\n';

    for(let i=0; i<n; i++){

        row1(k,m);

        row2(k,m);}

    out += '</pre>';      

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

    function change(x){

    //python的自訂函數def,javascript function

    document.body.style.backgroundColor = x.options[x.selectedIndex].text;

  }

css程式碼

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

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

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

.spanstyle{font-size:36px;font-weight: bold;}

pre{color:white;background-color:purple;}

#out{background-color:rgb(50,200,50);font-size:36px;}

html程式碼

<SCRIPT SRC='index.js'></SCRIPT>

<LINK  REL ='STYLESHEET'  HREF='index.css'>

<h1>李其學輸入參數</h1>

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

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

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

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

<select id='mySelect' onchange="change(this)">

<option>red</option>

<option>green</option>

<option>blue</option>

</select>

<h1>重點</h1>

span手掌張開拇指到小指,短橋梁長度。

VSCode是IDE整合開發環境。

CTRL+SHIFT+L一次改全部

Integrated Development Environment

alert內建函數,自訂函數abc

利用id加上syle方法是#id

<h1>李其學輸出結果</h1>

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

js程式碼

const space=' ', slash='&#128540', backslash='&#x1F61C', cr='\n';

function row1(k,m){

    for(let i=0; i<k;i++){

        for(let ii=0; ii<m; ii++){

            for(let j=0; j<k-i-1; j++)

                out+=space;

            out+=slash;

            for(let j=0; j<2*i; j++)

                out+=space;

            out+=backslash;

            for(let j=0; j<k-i-1;j++)

                out+=space;};

    out+=cr;};};

function row2(k,m){

    for(let i=0; i<k; i++){

        for(let ii=0; ii<m; ii++){

            for(let j=0; j<i; j++)

                out+=space;

            out+=backslash;

            for(let j=0; j<2*k-2*i-2; j++)

                out+=space;

        out+=slash;

        for(let j=0; j<i;j++)

            out+=space;};

    out+=cr;};};

function abc(){

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

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

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

    out ='<pre>李其學\n';

    for(let i=0; i<n; i++){

        row1(k,m);

        row2(k,m);}

    out += '</pre>';      

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

    function change(x){

    //python的自訂函數def,javascript function

    document.body.style.backgroundColor = x.options[x.selectedIndex].text;

  }

李其學輸入參數

輸入k
輸入m
輸入n
red green blue

重點

span手掌張開拇指到小指,短橋梁長度。 VSCode是IDE整合開發環境。 CTRL+SHIFT+L一次改全部 Integrated Development Environment alert內建函數,自訂函數abc 利用id加上syle方法是#id

李其學輸出結果