Javascript 学习随笔

学习网站是：https://www.runoob.com/
因为在这之前我只系统学习了C,因此在学习Javascript的过程中主要采用了比较的方法.

代码小问题

为什么使用“+”？

document.getElementById("demo").innerHTML =
            typeof false + "<br>" +
            typeof 0 + "<br>" +
            typeof "" + "<br>" +
            typeof "hello" + "<br>" +
            typeof null + "<br>" +
            typeof undefined + "<br>" +
            typeof {} + "<br>" +
            typeof [] + "<br>" +
            typeof function() {} + "<br>" +
            typeof Math.PI;

在 JavaScript 中，+ 运算符用于连接字符串。在这段代码中，"<br>" 是一个字符串，通过使用 + 运算符，我们将各种数据类型的类型输出连接成一个长字符串，然后将这个字符串设置为 <p> 元素的 innerHTML。这样可以确保每种数据类型的类型都输出到段落中，而不会覆盖之前的输出。

如果我们不使用 + 运算符，而是使用多个 document.getElementById("demo").innerHTML 进行赋值，只有最后一个赋值会生效，因为每次赋值都会覆盖之前的内容。通过使用 + 运算符，我们将每种类型的类型连接成一个字符串，然后一次性将整个字符串赋值给 <p> 元素的 innerHTML，这样就可以将所有类型都输出到段落中

数组：

// 创建一个空数组
let emptyArray = new Array();

// 创建指定长度的空数组
let arrayWithLength = new Array(5);

// 创建包含元素的数组
let fruits = new Array('apple', 'banana', 'orange');
//直接
let arr = [1,2,3];

对象

JavaScript 中的对象是一种复合数据类型，用于存储多个键值对 在这里被称为对象属性。对象可以包含各种类型的数据，包括其他对象、数组、函数等

关于键值对：我简单理解为名字和值一一对应的一种数据结构

对象方法

就是属性值为函数

特殊属性和方法：

  • 原型（Prototype）：每个对象都有一个原型，它是一个指向另一个对象的引用，可以用于实现继承。

  • 构造函数（Constructor）：用于创建对象的函数。

  • 内置属性和方法：例如 toString()、valueOf() 等，这些方法和属性是 JavaScript 内置对象的一部分，可以直接使用

事件

因为C中没有这个概念，所以这里着重写一下

在 JavaScript 中，事件是指在 HTML 文档中发生的某些事情或动作，比如用户的交互操作（例如点击、鼠标移动、键盘输入等）或者浏览器自身的操作（例如页面加载完成、窗口大小改变等）。

HTML文档:我单纯理解为这个页面中包含的所有东西

事件可以分为两类：内置事件和用户自定义事件。

  1. 内置事件：

    • 内置事件是浏览器或者特定 HTML 元素自身触发的事件，比如：

      • 页面加载完成事件 (load)

      • 鼠标点击事件 (click)

      • 鼠标移动事件 (mousemove)

      • 键盘按键事件 (keydown, keyup, keypress)

      • 表单提交事件 (submit)

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Event Examples</title>
        </head>
        <body>

        <!-- Click Event Example -->
        <button onclick="alert('按钮被点击了！')">点击我</button>

        <hr>

        <!-- Mousemove Event Example -->
        <div style="width: 100px; height: 100px; background-color: red;" onmousemove="alert('鼠标移动到了盒子上！')"></div>

        <hr>

        <!-- Key Event Example -->
        <input type="text" 
               placeholder="按下按键或者松开按键" 
               onkeydown="alert('按键按下了！')" 
               onkeyup="alert('按键松开了！')" 
               onkeypress="alert('按键被按下并松开了！')">

        <hr>

        <!-- Load Event Example -->
        <script>
            function pageLoaded() {
                alert('页面加载完成！');
            }
            window.onload = pageLoaded;
        </script>

        </body>
        </html>

  2. 用户自定义事件：

    • 除了内置事件之外，开发者还可以自定义事件，以便在特定情况下触发 JavaScript 代码执行。这种自定义事件通常是通过 Event 对象的构造函数来创建，并且可以通过 dispatchEvent() 方法手动触发。

比较运算符

===:绝对相等=>值类型都相等

!==:不绝对相等

for循环

大体相同,还有一种比较特别的for循环

itCompanies 是一个数组，for...of 循环用来遍历数组中的元素。company 是循环中的一个临时变量，每次迭代时，它会被赋值为数组中的一个元素。所以你的解释几乎正确，但是应该是将 company 赋值为 itCompanies 数组中的每个元素，而不是整个数组本身。

let itCompanies = ["Facebook", "Google", "Microsoft", "Apple", "IBM", "Oracle", "Amazon"];

for (let company of itCompanies) {//让company赋值为itCompanies中的一个元素
  let count = 0;
  for (let char of company) {
    if (char.toLowerCase() === "o") {
      count++;
    }
  }
  if (count > 1) {
    companiesWithMoreThanOneO.push(company);
  }
}
console.log("Companies with more than one 'o':", companiesWithMoreThanOneO);

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

Data()方法

方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

正则表达式

语法

/正则表达式主体/修饰符(可选)

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

错误

try catch throw

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

调试

debugger 关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

可以先使用再声明

浮点型

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储

let x = 0.1;
let y = 0.2;
let z = x + y            // z 的结果为 0.30000000000000004
if (z == 0.3)

=>用乘除法解决问题

表单验证

由于与HTML的表单有关联,因此在这里先简单回顾一下HTML表单

具体可以参考另一篇笔记HTML表单

作用

表单验证可以包括以下内容：

  1. 必填字段验证：确保用户填写了表单中标记为必填的字段，防止用户提交空值或默认值。
  2. 格式验证：检查用户输入的数据格式是否正确，例如邮箱地址、电话号码、日期等。
  3. 长度验证：检查用户输入的数据长度是否符合要求，如最小长度、最大长度等。
  4. 数据类型验证：确保用户输入的数据类型正确，如数字、字母、日期等。
  5. 范围验证：检查数值型数据是否在指定的范围内，如年龄、价格等。
  6. 正则表达式验证：使用正则表达式对用户输入的数据进行更灵活的验证，可以实现复杂的格式匹配。

语法

let x=document.forms["myForm"]["fname"].value;

用于获取 HTML 表单中名为 “myForm” 的表单中名为 “fname” 的输入字段的值，并将其存储在变量 x 中。

验证API

验证验证和表单验证的区别

  1. JavaScript 验证 API：
    • JavaScript 验证 API 是 JavaScript 提供的一组 API 和方法，用于编写自定义的验证逻辑。
    • 开发人员可以使用 JavaScript 验证 API 编写自己的验证函数，以根据特定的需求对用户输入进行验证。
    • 这种方式更加灵活，可以实现各种复杂的验证逻辑，但需要编写更多的代码。
  2. 表单验证：
    • 表单验证是 HTML 表单元素自带的一种验证机制，可以通过设置一些属性来定义验证规则。
    • HTML5 提供了一些内置的表单验证属性，如 required, min, max, pattern 等，可以直接在 HTML 中使用。
    • 表单验证相对简单，适用于一些基本的验证需求，如必填字段、最小长度、最大长度、正则表达式验证等

this 关键字

我理解的This 表示对上一级对象的引用：

  • 方法体内表示对该方法所属的属性的引用

  • 单独使用，就是全局对象

  • 在函数中，函数的所属者绑定默认到this上（这里和后面学习智能合约有关联）

  • 在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。

方法是与对象相关联的函数

在学习教程中看到了一篇笔记，可以帮助理解：

简单理解，this指向的是该this所在的最里层的object对象。

1、函数不是object对象，所以没有写在object对象里的函数调用this会指向window

2、构造函数是object对象，所以在构造函数中调用this会指向该构造函数

3、html元素是object元素，所以在html元素中调用this会指向该元素

4、函数1 return 函数2，函数2 return this，该this会指向window

例：

>let obj = {
   fun1:function(){
       return function(){
           return this;
       }
   },
>};
>console.log(obj.fun1()()); //window

javascript:void(0) 含义

void 在C语言中也有涉及，表示没有返回值。

在javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值

href=”#”与href=”javascript:void(0)”的区别

  1. **href=”#”**：
    • 这个用法将页面的滚动位置移动到页面顶部。当用户点击链接时，浏览器会尝试滚动到页面中 ID 为 “#” 的元素，而在大多数情况下这个元素并不存在，因此页面会回到顶部。
    • 使用 href="#" 会触发页面滚动，有时可能会导致页面跳跃，尤其是在单页应用或具有滚动效果的页面中。
  2. **href=”javascript:void(0)”**：
    • 这个用法是执行一个 JavaScript 表达式 void(0)，它会返回 undefined，但不会导致页面跳转或滚动。
    • 使用 href="javascript:void(0)" 不会触发页面滚动，因此不会导致页面跳跃

promise和异步编程

**异步编程 ** 通俗来讲就是，不按照顺序执行

Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败

Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

  • then：用于处理 Promise 成功状态的回调函数。
  • catch：用于处理 Promise 失败状态的回调函数。
  • finally：无论 Promise 是成功还是失败，都会执行的回调函数。

感觉大部分学习基于代码会比较清楚：

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

函数调用

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身

call()与apply()的不同

apply()的第二个参数是数组，call()是作为参数（从第二个起）单独传入。

声明：

有关javascript的初步学习就到这里了，后面主要通过一些比较小的项目来进一步理解和深化学习！

进阶的补充会继续更新博客，请期待一下！