当前位置：首页 > article >正文

前端【6】JavaScript基本语法

article 2025/1/22 23:11:31

JavaScript 是一种广泛使用的脚本语言，主要用于网页开发

一、将js内嵌到html中

二、变量声明

三、js的输出

1、页面输出

2、控制台输出

3、弹窗输出

四、js的注释

五、数据类型

1、基本类型

2、复合类型

数组

函数

对象

四、绑定事件处理-做交互

1. 鼠标事件

2. 键盘事件

3. 表单事件

4. 窗口事件

参考资料：

一、将js内嵌到html中

1. 使用 <script> 标签内嵌 JavaScript 代码

在 HTML 中，使用 <script> 标签来嵌入 JavaScript 代码。你可以将 JavaScript 代码写在 <head> 标签内或者 <body> 标签内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌 -->
     <script>
        alert(1)
     </script>
 
</head>
<body>
    
</body>
</html>

2. 将 JavaScript 代码作为外部文件引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
     <!-- 外引 -->
     <script src="js/javascript.js"></script>
</head>
<body>
    
</body>
</html>

不能在一个script标签中既外引又内嵌

二、变量声明

在 JavaScript 中，可以使用三种方式声明变量：var、let 和 const。

var：声明一个变量，可以重新赋值，也可以重新声明（会覆盖原值）。最常用
let：声明一个变量，可以重新赋值，但不能重新声明。
const：声明一个常量，声明后不可更改。

var a = 10
var b = "hello"
var c = 2.5
var d = true
var e //打印会显示undefined

三、js的输出

1、页面输出

<script>
    document.write("Hello,World!");
</script>

2、控制台输出

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

console.log(document) //以文档的形式打印整个htnl
console.dir(document) //以对象的形式打印整个html

3、弹窗输出

  <script>
        alert(1)
     </script>

四、js的注释

单行注释：// 注释内容
多行注释：/* 注释内容 */

五、数据类型

1、基本类型

JavaScript中一共有5种基本数据类型：

字符串型（String）

String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。

数值型（Number）

Number 类型用来表示整数和浮点

布尔型（Boolean）

布尔型只能够取真（true）和假（false）两种数值。

undefined型（Undefined）

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

null型（Null）

undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

这5种之外的类型都称为Object，使用typeof操作符可以用来检查一个变量的数据类型。

typeof 数据

console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

2、复合类型

数组

数组（Array）是一个可以包含多个元素的列表，元素可以是任何类型，包括数字、字符串、布尔值、对象、函数等。数组本身是一个特殊的对象，它的元素通过索引（从 0 开始）来访问。

（1）创建数组

var arr = [10, 5.3, true ,undefined ,'ada' ,[10 ,'ada']]
    //控制台打印
    console.log(arr)

（2）访问数组元素

获取数组的一项 arr[0]....arr[6] ,直接通过下标访问，JavaScript 中没有“二维数组”的概念，但数组可以包含其他数组。通过下标访问嵌套数组时，可以像访问普通数组一样通过索引获取。如arr[6][1]访问数组中的数组

（3）数组的长度

数组的 length 属性返回数组的长度（即元素个数）

var arr = [10, 5.3, true, undefined, 'ada'];
console.log(arr.length); // 输出: 5

arr.push('new element');
console.log(arr.length); // 输出: 6

函数

（1）命名函数：带有函数名的函数，使用 function 关键字来定义函数

function change(a, b) {
    console.log("命名函数执行啦");
}

change 是函数名。
(a, b) 是函数的参数列表，表示这个函数接受两个参数 a 和 b。
调用命名函数时，直接使用函数名加括号，并传入相应的参数（如果需要）。例如：

change(); // 调用命名函数 change

如果将命名函数赋给一个变量时，函数名=变量名，原来的函数名不在起作用

（2）匿名函数：没有名字的函数。通常我们会把匿名函数赋值给一个变量，这样变量就充当了函数名。--更推荐

var aa = function(a, b) {
    console.log("匿名函数执行啦");
};

aa 是一个变量，它存储了一个匿名函数。
调用匿名函数时，使用赋值给它的变量名，并传入相应的参数。

aa(); // 调用匿名函数 aa

（3）函数的打印

打印函数本身：

console.log(aa);  // 输出: function(a, b) { console.log("匿名函数执行啦"); }

打印返回值：函数没有返回值 (return)，所以 aa() 调用后会返回 undefined。

console.log(aa());  // 输出: "匿名函数执行啦"，然后输出: undefined

（4）命名函数与匿名函数的区别

特性	命名函数	匿名函数
函数名	有	无
定义方式	function name() {}	var name = function() {}
调用方式	直接使用函数名调用 `name()`	使用变量名调用 `name()`
声明提升	支持提升（可以在函数声明之前调用）	不支持提升，必须先定义后调用

对象

对象（Object） 在 JavaScript 中是用来存储不同类型的数据的一种数据结构。它由一组键值对（key-value pairs）组成，每个键（属性）对应一个值（可以是任何数据类型）

（1）定义

var obj = {
    name: "张三",    // 键是 name，值是 "张三"
    age: 50,         // 键是 age，值是 50
    marry: true,     // 键是 marry，值是 true
    play: ['足球', '篮球', '台球'],   // 键是 play，值是一个数组
    wife: {          // 键是 wife，值是一个嵌套对象
        name: "李四",
        age: 48
    },
    run: function() {    // 键是 run，值是一个函数
        console.log("对象里面的匿名函数");
    }
};

（2）访问属性

点（.）语法：通过对象名称直接访问属性。

console.log(obj.name);  // 输出: 张三
console.log(obj.age);   // 输出: 50

访问嵌套对象的属性

console.log(obj.wife);       // 输出: { name: "李四", age: 48 }
console.log(obj.wife.age);   // 输出: 48

访问数组中的元素

console.log(obj.play);       // 输出: ['足球', '篮球', '台球']
console.log(obj.play[2]);    // 输出: 台球

访问对象的函数（方法）

obj.run();  // 输出: 对象里面的匿名函数

run 是 obj 对象的一个方法，调用时会执行 console.log("对象里面的匿名函数")。

（3）删除属性

delete 对象.属性名

（4）遍历对象

for (var 变量 in 对象) {

}

EG:

var person = {
    name: "zhangsan",
    age: 18
}

for (var personKey in person) {
    var personVal = person[personKey];
    console.log(personKey + ":" + personVal);
}

(5)对象的 this

this 是一个非常重要的关键字，它指向当前正在执行代码的上下文。this 关键字用于访问当前上下文中的对象。不同的上下文和调用方式下，this 的指向会有所不同。

在对象方法内部，this 通常指向对象本身

var obj = {
    name: "张三",
    greet: function() {
        console.log("你好，" + this.name);
    }
};
obj.greet();  // 输出: 你好，张三

事件处理函数中的 this指向触发该事件的 DOM 元素。【这里在下一篇文章中有详细解释】

四、绑定事件处理-做交互

事件处理属性都是 HTML 元素上的属性【使用之前需要document.】，当事件发生时，会调用相应的处理函数。每个事件都对应了一个用户与页面交互的行为（例如点击、输入、加载、滚动等）。你可以根据需要选择合适的事件类型，并为其绑定事件处理函数。

一些常见的事件处理属性：

1. 鼠标事件

onclick: 单击鼠标时触发。
ondblclick: 双击鼠标时触发。
onmousedown: 鼠标按下时触发。
onmouseup: 鼠标释放时触发。
onmousemove: 鼠标在元素上移动时触发。
onmouseenter: 鼠标进入元素时触发（不会冒泡）。
onmouseleave: 鼠标离开元素时触发（不会冒泡）。
onmouseover: 鼠标指针移动到元素上时触发。
onmouseout: 鼠标指针离开元素时触发。

2. 键盘事件

onkeydown: 键盘按下某个键时触发（触发时包含键值）。
onkeyup: 键盘松开某个键时触发。
onkeypress: 键盘按下某个字符键时触发（已不推荐使用，建议使用 keydown 或 keyup）。

3. 表单事件

onsubmit: 表单提交时触发。
onreset: 表单重置时触发。
onfocus: 输入框获得焦点时触发。
onblur: 输入框失去焦点时触发。
onchange: 输入框、选择框等元素值发生变化时触发。
oninput: 输入框内容发生变化时触发（支持动态输入）。
onselect: 文本框内的文本被选中时触发。

4. 窗口事件

onload: 页面加载完成时触发。
onresize: 浏览器窗口的尺寸改变时触发。
onscroll: 页面滚动时触发。
onunload: 页面卸载（关闭）时触发。
onbeforeunload: 在页面卸载之前触发，常用于弹出警告框提醒用户。
onerror: 当页面加载时出现错误时触发。

举例：点击windows窗口页面会随机变换颜色

document.onclick = function () {
    var color = '';  // 用于存储随机生成的颜色

    // 随机循环生成6个十六进制数字（0-15）
    for (var i = 0; i < 6; i++) {
        var num = Math.round(Math.random() * 15);  // 生成0到15之间的随机数
        
        // 如果随机数是大于9的值，则转换为对应的十六进制字符
        if (num == 10) num = 'a';  // 10转为'a'
        if (num == 11) num = 'b';  // 11转为'b'
        if (num == 12) num = 'c';  // 12转为'c'
        if (num == 13) num = 'd';  // 13转为'd'
        if (num == 14) num = 'e';  // 14转为'e'
        if (num == 15) num = 'f';  // 15转为'f'

        // 将生成的十六进制数字符添加到color变量中
        color += num;
    }

    console.log(color);  // 输出生成的颜色代码

    // 设置页面的背景色为随机生成的颜色
    document.body.style.background = "#" + color;
}