JavaScript学习

天生不爱笑

已于 2024-04-26 14:57:40 修改

阅读量895

点赞数 24

文章标签： javascript 学习开发语言

于 2024-04-25 18:40:59 首次发布

本文链接：https://blog.csdn.net/weixin_51621120/article/details/138188781

版权

1、JavaScript简介

JavaScript是脚本语言。

是一种轻量级的编程语言，可插入HTML页面。

2、下载插件Fitten Code

下载插件，登录就可以使用。

使用快捷键 Ctrl+Alt+C，可以打开插件AI对话窗口。

Fitten Code的作用：智能补全、AI问答、生成代码、代码翻译、解释代码，生成测试、检查BUG、编辑代码。

具体使用方法：选中一段代码，右键出现选项，进行选择。

3、JavaScript编程

（1）JavaScript输出

/* 使用window.alert()弹出警告框 */
<script>
    window.alert("这是一个的警告框！");
</script>

操作HTML元素

/* 将id为demo的内容改写为“当前内容已修改！！！” */
<script>
    //将id为demo的元素内容改写为“Hello, World!”           
    document.getElementById("demo").innerHTML = "当前内容已修改！！!";
</script>

写入HTML文档

/* 写入HTML文档（当前日期） */
<script>
    document.write(Date());
</script>

输出到控制台

    /* 输出到控制台 */
    <script>
        //判断是否为奇数，输出到控制台
        var num = 100;
        if (num % 2 == 1) {
            console.log(num + " 是奇数");
        } else {
            console.log(num + " 是偶数");
        }
    </script>

（2）JavaScript语法

数字（Number）字面量 可以是整数或者是小数

字符串（String）字面量 可以使用单引号或双引号

表达式字面量 用于计算

数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

在 HTML 中，JavaScript 语句用于向浏览器发出命令。语句是用分号（;）分隔

注释：//进行单行注释，/*（内容）*/进行多行注释

JavaScript对大小写敏感

（3）JavaScript变量

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

字符串可以是引号中的任意文本。您可以使用单引号或双引号

布尔（逻辑）只能有两个值：true 或 false

JavaScript对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔，例如：

var person={
firstname : "John",
lastname : "Doe",
id : 5566
};

对象的寻址方式：

name=person.lastname;
name=person["lastname"];

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

（4）JavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

函数的语法结构：

function functionname(参数表列)
{
// 执行代码
}

变量：

JavaScript全局变量：在函数外部声明的变量，网页上所有的脚本和函数都能访问

JavaScript局部变量：在函数内部声明的变量，只能函数内部才能访问

变量的生存期：

JavaScript变量的生命期从变量声明开始计算，

局部变量在定义它的函数结束后被删除

全局变量在整个页面关闭后被删除

向未声明的变量赋值：该变量自动作为window的一个属性

（5）JavaScript事件

HTML事件（发生在HTML元素上）：可以是浏览器行为，也可以是用户行为。当在HTML页面中使用JavaScript时，JavaScript可以触发这些事件。

JavaScript可以做什么？

JavaScript可以用于处理表单验证、用户输入、用户行为及浏览器动作。可以使用多种方式执行JavaScript事件代码：HTML事件属性直接执行JavaScript代码、HTML事件属性调用JavaScript函数等。

=== 为绝对相等，即数据类型与值都必须相等

（6）JavaScript条件语句

f 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

switch 语句 - 使用该语句来选择多个代码块之一来执行

（7）JavaScript循环语句

for循环、while循环、do...while循环，用法与C语言相同。

break与continue的区别

break用于永久终止循环，跳出当前循环，不再执行break后的语句。continue用于终止本次循环，即跳出本次循环，进行下次循环的条件判断。

undefined和null的区别

null和undefined的值相等，但类型不等。

（8）JavaScript正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法：

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

修饰符：

i —— 执行对大小写不敏感的匹配

g—— 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

m——执行多行匹配

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

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

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

（9）JavaScript错误

try 语句测试代码块的错误

catch 语句处理错误

throw 语句创建自定义错误

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行

（10）JavaScript this 关键字

面向对象语言中this表示当前对象的一个引用。但在JavaScript中this不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this表示该方法所属的对象

如果单独使用，this表示全局变量

在函数中，this表示全局对象

在函数中，在严格模式下，this是未定义的（undefined）

在事件中，this表示接受事件的元素

类似call()和apply()方法可以将this引用到任何对象。

<body>  
    <div>
        <h1>JS输出对象</h1>
        <p>创建对象并输出对象</p>
        <p id="demo"></p>
    </div>


    <script>
        // 创建对象
        var person = {
            name: "John",
            age: 30,
            city: "New York",
            fullName: function() {
                return this.name + " " + this.age;
            }
        };

        // 输出对象
        document.getElementById("demo").innerHTML = person.fullName();
    </script>
</body>

（11）JavaScript中的let和const关键字

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

JavaScript块级作用域

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外

使用 let 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响

函数内部使用var 和 let 关键字声明的变量有点类似，它们的作用域都是 局部的

数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似，它们的作用域都是 全局的

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。

在 HTML 中, 全局作用域是针对 window 对象，使用 var 关键字声明的全局作用域变量属于 window 对象

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改

const定义常量与使用let 定义的变量相似：

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的

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

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。