HTML+JS初試水

xpp的博客發表於2024-08-24
HTMLJS

情境

參加了培訓的第二次課, 這裡是第二顆的作業題, 及我的解答.

1、使用 html 寫一個網頁，要求滿足以下條件：
（1）網頁中含有任意一張圖片，圖片路徑使用絕對路徑，滑鼠懸停在圖片時出現“馬哥教育”文字，且點選圖片可跳轉至馬哥教育官方頁面
（2）網頁中包含賬號、密碼登入，且賬號提前定義好是 admin 且不可更改，輸入密碼時顯示加密形式

我的解答:

  • 我的程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一個網頁</title>
</head>
<body>
    <div ><a href="https://www.magedu.com/">
        <img src="http://www.magedu.com/wp-content/uploads/2017/12/slider2-1024x480_2-1024x480.jpg" alt="這是任意一張圖片" title="馬哥教育">
    </a></div>
    <div align="center">
        <form action="">
            賬號: <input type="text" value="admin" disabled><br>
            密碼: <input type="password" ><br>
            <button title="使用者登入">登入</button>
        </form>
    </div>

</body>
</html>
  • 效果截圖

img

2、判斷題
（1）Java 是編譯型語言。

我的解答: ✔ Java編寫的程式碼需要 "先編譯生成二進位制class位元組碼檔案,再執行", 所以Java是編譯型語言.
但是由於其第一步javac編譯程度不徹底, 其執行過程實際上類似於直譯器解釋+執行,也就是JVM載入Java類檔案(.class)到記憶體 並 解釋執行. 所以, Java並不是嚴格意義上的編譯型語言, 更像是 虛擬機器直譯器 套殼 編譯器.

（2）Javascript 中，不區分大小寫字母，也就是說 A 和 a 是同一個變數。

我的解答: ✖ JS程式碼區分英文字母大小寫, var a和var A會是兩個不同變數.

（3）Javascript 中的常量包括 String、Number、Boolean、Null、Undefined。

我的解答: ✖ JS一共有6種資料型別, 其中5種基本資料型別(數值, 字串, 布林值, 空值, 未定義), 一種引用資料型別(物件型).
而JS常量(字面量)有3種: 數字, 字串, 布林字面量. JS變數則可以是以上6種的任意一種型別.

（4）String 字串的語法中既可以使用單引號，也可以使用雙引號。

我的解答: ✔ String字串 語法中即可以使用單引號 也可以使用雙引號, 但是 需成對使用 不可混用

（5）typeof 是用來判斷變數型別，不可以當作運算子使用。

我的解答: ✖ typeof是一種 一元運算子, 只需要一個運算元, 用來判斷資料型別

（6）任何值和 undefined 運算，undefined 可看做 0 運算。

我的解答: ✖ 任何數值和undefined 做運算, 結果為 NaN.

3、請分別描述下列程式碼中“+”的作用。
（1）console.log("年齡：" + 20);

我的解答: 此處+為 字串連線符, 輸出結果為 年齡：20

（2）console.log(11+22+33);

我的解答: 此處+為 加法運算子, 輸出結果為 66

（3）console.log("網路+安全");

我的解答: 此處+為 文字字元, 輸出結果為 網路+安全

（4）var a = 1; var b = 2; console.log("a" + b);

我的解答: 此處+為 字串連線符, 輸出結果為 a2

（5）var a = 1; var b = 2; console.log("a + b");

我的解答: 此處+為 文字字元, 輸出結果為 a + b

4、計算下述程式碼的列印值

var a = 10;
var b = 10;
console.log(a++);
console.log(++a);
console.log(--b);
console.log(b--);

我的解答:

10
12
9
9

5、分別使用行內式、內嵌式、引入外部檔案的方法造成網頁彈窗，要求觸發彈窗的 JS 命令
不止一種。

  • 我的程式碼
    2-5.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 方式1: 行內式 inline -->
    <input type="button" value="提交資訊" onclick="alert('確認提交資訊')">
    <!-- 方式2: 內嵌式 embedded -->
    <script>
        var r=confirm("按下按鈕, 確定 或 取消");
        if(r==true) {
            x="你 確認了";
        } else {
            x="你 取消了";
        }
        console.log(x);
    </script>
    <!-- 方式3: 引入外部的JS檔案 call -->
    <script src="callit.js"></script>

</body>
</html>

callit.js

var a=prompt('寫點內容進prompt');
console.log(a);
  • 效果截圖

img

6、請自行準備一個 Centos 作業系統，要求版本 7 及以上。

我的解答: 可以的, 具體步驟就不詳述了 ♡⚑

相關文章