05 作业 1

客观题

javascript 基础第一天客观题 (wjx.top)

1. 下列定义的变量名中，不合法的是（）

   A: 2age
   B: newClass
   C: userName
   D: _age

   答案是 A: 2age。

   因为变量名不能以数字开头。正确的变量名应该只包含字母、数字和下划线（_），并且不能以数字开头。

2. 下列有关字符串变量定义正确的是（）可以多选【多选题】

   A: let strMsg ="我爱北京天安门"
   B: let strMsg2='我爱吃猪蹄'
   C: let strMsg3=我爱大肘子
   D: let strMsg4='我是'高帅富'程序猿'

   答案是 AB。

   C 中缺少双引号或单引号将字符串括起来，因此它会导致语法错误。应该使用 let strMsg3 = " 我爱大肘子 " 或 let strMsg3 = ' 我爱大肘子 '。

   D 中字符串中包含单引号字符，而用单引号将其括起来，这样就与 JavaScript 中的字符串定义方式相冲突了，会导致语法错误。应该用双引号将其括起来，或者使用转义字符对单引号进行转义，例如 let strMsg4 = " 我是 ' 高帅富 ' 程序猿 " 或 let strMsg4 = ' 我是 ' 高帅富 ' 程序猿 '。

3. 下面那些是字面量？（）可以多选【多选题】

   A: 123;
   B: "大肘子";
   C: ture;
   D: [];

   答案是 ABCD。

   字面量指的是直接表示数据值的符号。选项 D 中的 [] 表示一个空数组，也是字面量。

4. JavaScript 由以下哪几部分组成（）多选【多选题】

   A: JScript;
   B: ECMAScript;
   C: DOM;
   D: BOM;
   E: Object;

   JavaScript 由以下几部分组成：B：ECMAScript、C：DOM、D：BOM。（ECMAScript(基础语法）、web APIs（DOM、BOM)）

   选项 A 中的 JScript 不是 JavaScript 的正式名称，它只是 Microsoft IE 浏览器中所用的 JavaScript 实现的名称。

   选项 E 中的 Object 是一个内置的构造函数，用于创建对象。对象可以包含属性和方法，并且可以通过点符号或方括号访问属性和方法。

5. 下面不属于 JavaScript 数据类型的是？（）

   A: number;
   B: string;
   C: boolean;
   D: int;
   E: undefined;

   答案是 D。

   JavaScript 中没有 int 数据类型。

6. 在 js 代码中，'123'+4 的运行结果是

   A: 127
   B: '1234'字符串型
   C: 1234 数字型
   D: '123'4

   答案是 B。

   在 JavaScript 中，字符串和数字相加时，会将数字转换为字符串，然后进行字符串拼接。因此，'123' + 4 的运行结果是 '1234'，为字符串型。

7. 请选出下面正确的答案？（）

   A: console.log(typeof'1')/∥ 返回结果是 number
   B: console.log(typeof'1'+1)/∥ 返回结果是 string1
   C: console.log('1'-1)/∥ 返回结果是 11
   D: console.log('pink'+1)/∥ 返回结果是 string

   答案是 B。

   选项 A 是错误的。typeof '1' 的结果是字符串类型，而不是数字类型。

   选项 B 是正确的。typeof '1' + 1 的执行顺序为：先对 typeof '1' 进行求值，得到一个字符串 'string'，然后将其和数字 1 进行字符串拼接，得到 'string1'。

   选项 C 是正确的。'1' - 1 的运算会先将字符串 '1' 转换为数字 1，然后进行减法运算，最终结果为 0。

   选项 D 是正确的。'pink' + 1 的运算会将数字 1 转换为字符串 '1'，然后进行字符串拼接，最终结果为 'pink1'。

8. 下列有关 javascript 变量命名说法错误的是

   A: 变量名不能是关键字比如 let、var、if 等
   B: 变量名是区分大小写的
   C: 变量名可以由数字、字母、下划线、$组成，可以以数字开头
   D: 变量名建议使用驼峰命名法

   答案是 C。

   虽然 JavaScript 中的变量名可以由数字、字母、下划线和美元符号（$）组成，但变量名不能以数字开头，必须以字母、下划线或美元符号开头。

   • 选项 A：变量名不能使用 JavaScript 中的保留关键字作为名称。
   • 选项 B：JavaScript 是区分大小写的语言，因此变量名也是区分大小写的。
   • 选项 D：在 JavaScript 中，驼峰命名法是一种常见的变量命名规范，它建议将多个单词连接在一起，并将每个单词的首字母大写，例如 myVariableName。

9. 请问 console.log(typeof +'136') 输出的结果是？

   A: 136;
   B: number;
   C: NaN;
   D: string;

   答案是 B。

   console.log(typeof +'136') 的结果是 "number"。在这个表达式中，+'136' 将字符串 "136" 转换为数字类型，并返回数字 136，typeof 运算符返回其操作数的数据类型，因此输出结果为 "number"。

10. 请问 console.log(NaN + 1) 输出的结果是？

    A: 1;
    B: 报错;
    C: NaN;
    D: undefined;

    答案是 C。

    NaN 表示 "Not a Number"，它是一种特殊的数字值，表示一个无效或未定义的数值。任何涉及 NaN 的算术运算都会返回 NaN，因此 NaN + 1 的结果也是 NaN。

11. 今日单词 1：请问页面文档输出的语句是？

    A: prompt();
    B: alert();
    C: document.write();
    D: console.log();

    答案是 C：document.write()。

    它用于将字符串写入 HTML 文档，可以将文本、HTML 代码和 JavaScript 代码一起写入 HTML 页面。使用 document.write() 函数时，可以将 HTML 标签和属性添加到字符串中，从而动态地生成页面内容。

12. 今日单词 2：请问控制台打印输出的语句是？

    A: prompt();
    B: alert();
    C: document.write();
    D: console.log();

    答案是 D：console.log()。

    它用于在浏览器的开发者工具控制台中输出调试信息或运行结果。console.log() 可以接收一个或多个参数，可以输出字符串、数字、对象等各种类型的数据，并且支持格式化输出和变量替换。

13. 今日单词 3：请问页面弹出警示框语句是？

    A: prompt();
    B: alert();
    C: document.write();
    D: console.log();

    答案是 B：alert()。

    它用于向用户显示一个包含文本消息和 OK 按钮的警示框，通常用于提示用户发生了什么或需要进行某些操作。alert() 函数只能显示一个按钮，不能自定义按钮的文本或样式，也不能捕获用户的选择结果。

14. 今日单词 4：请问页面弹出输入框语句是？

    A: prompt();
    B: alert();
    C: document.write();
    D: console.log();

    答案是 A：prompt()。

    它用于向用户显示一个包含文本消息、文本输入框和 OK/Cancel 按钮的对话框，通常用于获取用户输入或进行某些操作。prompt() 函数可以接收一个可选的默认值参数，用于在文本输入框中预先填充一些文本。用户可以在文本输入框中输入任意文本，并通过点击 OK 或 Cancel 按钮来确定是否接受输入并返回输入结果。

15. 今日单词 5：请问数据类型转换中，转换为数字型的语句是？

    A: Number();
    B: number();
    C: String();
    D: Boolean();

    答案是 A：Number()。

    它是 JavaScript 中的内置函数，用于将给定的值转换为数字类型，并返回转换后的结果。如果无法执行转换，则返回 NaN（Not a Number）。Number() 函数可以接收一个参数，也可以不传递任何参数。

    let num1 = Number("123"); // 将字符串 '123' 转换为数字 123
    let num2 = Number(true); // 将布尔值 true 转换为数字 1
    let num3 = Number([]); // 将空数组转换为数字 0
    let num4 = Number(); // 不传递参数，返回 NaN

    注意，当对非字符串值进行转换时，Number() 函数会自动将其转换为相应的数字值，例如 true 转换为 1，false 转换为 0，undefined 转换为 NaN，null 转换为 0，而空数组和对象会被转换为 NaN。

16. 今日单词 6：请问检测数据类型的语句是？

    A: type
    B: Number()
    C: typeof
    D: script

    答案是 C：typeof。

    typeof 是 JavaScript 的一个运算符，用于返回操作数的数据类型。它可以用于返回以下数据类型：

    • "undefined"：未定义的变量或属性。
    • "boolean"：布尔值。
    • "number"：数字。
    • "string"：字符串。
    • "object"：对象（包括数组、函数和 null）。
    • "function"：函数（实际上是一种特殊的对象类型）。

    typeof undefined;  // "undefined"
    typeof true;       // "boolean"
    typeof 123;        // "number"
    typeof 'hello';    // "string"
    typeof {};         // "object"
    typeof [];         // "object"
    typeof null;       // "object"
    typeof function()  // "function"

    需要注意的是，typeof null 返回的是 "object"，这是 JavaScript 的一个历史遗留问题，实际上 null 不是对象，而是一种特殊的数据类型。

17. 今日单词 7：请问定义常量的关键字是？

    A: let
    B: var
    C: const
    D: function

    答案是 C：const。

    在 JavaScript 中，使用 const 关键字可以创建一个常量，即一个不可重新赋值的变量。与 let 和 var 不同，const 声明的变量必须在声明时进行初始化，并且不能在后续代码中修改其值。

    const PI = 3.14159;
    PI = 3; // 报错：Assignment to constant variable.
    // 尝试修改常量 PI 的值会抛出一个类型错误，因为 PI 是一个常量，其值不能被修改。

18. 今日单词 8：请问不能转换为数字型的是？

    A: Number()
    B: parselnt()
    C: parseFloat()
    D: Boolean()
    E: +

    答案是 D：Boolean()。

    Boolean 值不能直接被转换为数字，因为它们只有两个可能的值：true 和 false。当将布尔值强制转换为数字时，true 被转换为 1，false 被转换为 0。

    let num1 = Number(true); // 将布尔值 true 转换为数字 1
    let num2 = Number(false); // 将布尔值 false 转换为数字 0

    选项 A、B 和 C 都是用于将字符串转换为数字类型的内置函数。

    • Number() 函数会尝试将字符串转换为数字，并返回转换后的结果，如果无法执行转换，则返回 NaN；
    • parseInt() 函数会解析字符串并返回一个整数，如果无法解析，则返回 NaN；
    • parseFloat() 函数会解析字符串并返回一个浮点数，如果无法解析，则返回 NaN。

    选项 E 中的 + 符号也可以将字符串转换为数字。

    let num3 = +"123"; // 将字符串 '123' 转换为数字 123

简答题

请说出变量的使用场景？

1. 控制元素的显示和隐藏：在前端开发中，我们经常需要通过 JavaScript 代码来操作 DOM 元素。比如当用户点击某个按钮时，我们需要通过代码控制页面上的某些元素显示或隐藏。这时就需要用到变量来存储元素的状态，以便在代码中进行判断和操作。
2. 存储表单数据：网站上的表单常常需要搜集用户输入的信息，这些信息需要通过 JavaScript 代码进行处理、验证和提交。在处理过程中，我们需要用变量来存储表单数据，以便后续的操作。
3. 操作 CSS 属性：在前端开发中，我们经常需要通过 JavaScript 代码来操作 CSS 属性，比如改变元素的背景颜色、修改文字大小等等。这时就需要用变量来存储 CSS 属性的值，简化代码同时提高可维护性。
4. 存储全局配置：有些前端项目可能需要在多个页面中复用一些配置信息，比如 API 接口地址、产品名称、版权声明等等。这时我们可以通过变量来存储这些配置信息，方便在不同页面中进行调用和修改。

请说出基本数据类型有哪 5 种？

1. 数字 (number): 用于存储数字，整型或浮点数。
2. 字符串 (string): 用于存储文字、字符串等文本数据。
3. 布尔值 (boolean): 可以存储 true 或 false，通常用于逻辑判断。
4. 空 (undefined): 当声明了一个变量但未对其初始化时，此变量的值为 undefined。
5. 空对象 (null): 用于表示空对象。

请说出模板字符串使用方法？

模板字符串使用反引号 ( ` ) 来创建字符串，可以方便地在字符串中包含变量和表达式，并且支持换行符和多行文本。

模板字符串包含占位符，使用 ${} 语法表示，其中可以放置 JavaScript 表达式。这些表达式会在字符串被渲染时自动被计算出来。模板字符串中也可以直接插入变量名称，相当于插入了变量的值。

以下是几个模板字符串的使用例子：

1. 常规使用：

   const name = "Tom";
   const age = 18;
   const message = `My name is ${name}, I am ${age} years old.`;
   console.log(message); // My name is Tom, I am 18 years old.

2. 插入计算结果和函数调用：

   const radius = 10;
   const area = `The area of circle with radius ${radius} is ${Math.PI * radius ** 2}.`;
   console.log(area); // The area of circle with radius 10 is 314.1592653589793.
   
   function greet(name) {
     return `Hello ${name}! Welcome to my website.`;
   }
   console.log(greet("John")); // Hello John! Welcome to my website.

下面代码输入结果是？

const num = 10;
console.log(num + 11);
console.log(num + "11");
console.log(num + +"11");

// 输出结果为 21
// num 和 11 都是数字类型，所以相加得到数字 21
console.log(num + 11);

// 输出结果为 1011
// num 是数字类型，11 是字符串类型，所以相加得到字符串 1011
console.log(num + "11");

// 输出结果为 21
// num 是数字类型，11 是字符串类型，但是字符串前面加了一个加号，所以会被转换为数字 11，所以相加得到数字 21
console.log(num + +"11");

以下代码输入结果是？

const num = 10;
console.log(typeof num + "11");
console.log(typeof (num + "11"));
console.log(typeof (num + +"11"));

// 输出结果为 number11
// typeof num + "11" 相当于 "number" + "11"，所以输出结果为 "number11"
console.log(typeof num + "11");

// 输出结果为 string
// typeof (num + "11") 相当于 typeof ("1011")，所以输出结果为 string
console.log(typeof (num + "11"));

// 输出结果为 number
// typeof (num + +"11") 相当于 typeof (10 + 11)，所以输出结果为 number
console.log(typeof (num + +"11"));

编程题

获取用户信息

• 题目描述

  依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。

• 题目提示

  • 通过 prompt 来弹出提示框，收集用户信息
  • 通过变量保存数据

• 具体表现

  
  

let name = prompt("请输入姓名");
let age = prompt("请输入年龄");
let gender = prompt("请输入性别");

console.log(name);
console.log(age);
console.log(gender);

增加年龄

• 题目描述

  1. 询问用户年龄，用户输入年龄后，把用户输入的年龄增加 5 岁
  2. 增加 5 岁后，通过弹出框提示用户 " 据我估计，五年后，你可能 XX 岁了 "

• 题目提示

  • 通过 prompt 来弹出提示框，收集用户信息
  • 通过变量保存数据
  • 转换数据类型 (需要预习第二天的数据类型转换哟)

• 具体表现

  
  

let age = +prompt("请输入年龄");
age += 5;
console.log(`据我估计，五年后，你可能 ${age} 岁了`);

计算银行卡余额案例

• 题目描述

  1. 用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。
  2. 页面打印一个表格，计算出本月银行卡还剩下的余额。

• 题目提示

  • 我们需要 5 个变量：银行卡总额、水费、电费、网费、银行卡余额
  • 银行卡余额 = 银行卡总额 – 水费 – 电费 - 网费
  • 第一步准备 5 个变量接受输入的数据
  • 第二步计算银行卡余额
  • 第三步页面打印生成表格，里面填充数据即可。
  • 当然可以提前把 html 页面搭好。

• 具体表现

  

计算银行卡余额案例 (codepen.io)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算银行卡余额案例</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h2>2020 年 12 月消费支出</h2>
    <script src="index.js"></script>
  </body>
</html>

index.css

h2 {
  text-align: center;
}

table {
  margin: 20px auto;
  text-align: center;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  border: 1px solid #000;
}

index.js

let total = +prompt("请输入银行卡总额");
let water = +prompt("请输入水费");
let electricity = +prompt("请输入电费");
let internet = +prompt("请输入网费");
let balance = total - water - electricity - internet;

document.write(`
  <table>
    <tr>
      <th>银行卡总额</th>
      <th>水费</th>
      <th>电费</th>
      <th>网费</th>
      <th>银行卡余额</th>
    </tr>
    <tr>
      <td>${total}元</td>
      <td>${water}元</td>
      <td>${electricity}元</td>
      <td>${internet}元</td>
      <td>${balance}元</td>
  </table>
`);