陳宛沂 Python與JAVASCRIPT程式碼對照

CSS程式碼

h1{background-color: rgb(235, 244, 68); color: white; border: 10px solid rgb(0, 229, 255); text-align:center; padding: 5px}
ul{background-color: rgb(107, 24, 107); color: white; font-size: 2em;line-height:1.5}
input{font-size:24px;background-color:rgb(210, 250, 215);}
.monkey{font-size:36px;}
pre{background-color: aqua; color:aliceblue;}/*CSS的註解也可以用在javascript與c語言*/
#k{}/*為id元件定義樣式*/

HTML程式碼

<link href="abc.css" rel="stylesheet"></link>
<script src="abc.js"></script>
<h1>陳宛沂輸入參數</h1>
輸入k<input id="k" type="number" value="5" /><br />
輸入m<input id="m" type="number" value="5" /><br />
輸入n<input id="n" type="number" value="5" /><br />
<input type="password" />
<button onclick="abc()">執行自訂函數</button>
<h1>重點</h1>
alert內建函數,自訂函數abc
<h1>陳宛沂輸出結果</h1>
<div class="monkey" id="out"></div>

JAVASCRIPT程式碼

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';//javascript與c語言的註解

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

        row1(k,m);

        row2(k,m);}

    out += '</pre>';      

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

陳宛沂輸入參數

輸入k
輸入m
輸入n

重點

alert內建函數,自訂函數abc

陳宛沂輸出結果