3.JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63215420/article/details/132332555

本文介绍了JavaScript的基础知识，包括其引入方式、语法特性（如变量、数据类型、运算符、流程控制），函数的定义和调用，对象（如Array、String和JSON）的使用，以及BOM和DOM的概念以及事件监听的基本概念和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是JavaScript

JavaScript(简称：JS)是一门跨平台、面向对象的脚本语言。用来控制网页行为的，它能使网页可交互
js和java是完全不同的语言，不论是概念还是设计。但是基础语法类似
js是遵守ECMAScript的标准的

js引入方式

内部脚本：将js代码定义在HTML页面中
- js代码必须位于<script></script>标签之间
- 在HTML文档中，可以放在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
外部脚本：将js代码定义在外部js文件中，然后引入到HTML页面中
- 外部js文件中，只包含js代码，不包含<srcipt>标签
- <script>标签不能自闭和，即不能写称这种形式<script src="js/demo.js" />

js基础语法

书写语法

区分大小写：与java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无，不过建议写上
注释：
- 单行注释：//注释内容
- 多行注释：/*注释内容*/
大括号表示代码块

//判断
if (count==3) {
    alert(count);
}

输出语句

使用window.alert()写入警告框,window.可以省略
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

        /* alert("Hello World"); */

        // 方式一：弹出警告框
        window.alert("Hello World");

        // 方式二：写入html页面中
        document.write("Hello JavaScript");

        // 方式三：控制台输出
        console.log("Hello JS");

变量

js中用var关键字（variable）来声明变量
- var定义出来的变量作用域比较大，是全局变量
- var定义出来的变量是可以重复定义的
js是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵守如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 不能以数字开头
- 建议使用驼峰命名
ECMAScript 6（以下统一简称ES6）新增了let关键字来定义变量。它的语法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
ES6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变

        //var定义变量

        var a = 10;
        document.writeln(a);
        a = "张三";
        document.writeln(a);

        //特点一：作用域比较大，全局变量
        {
            var b="李四";
        }
        document.writeln(b);

        // 特点二：可以重复定义
        var a = "王五";
        document.writeln(a);

        //let：局部变量，不能重复定义
        {
            let c = 1;
            // document.writeln(c);
        }
        document.writeln(c);

        const d = 123;
        // d = 1234;

数据类型、运算符、流程控制语句

数据类型

js中分为：原始类型 和 引用类型
原始类型：
- number：数字（整数、小数、Nan(Not a Number)
- string：字符串，单双引都可以
- boolean：布尔类型。true, false
- null：对象为空
- undefined：当声明的变量未初始化时，该变量的默认值时undefined
使用typeof运算符可以获取数据类型

//原始数据类型
        alert(typeof 3);        //number
        alert(typeof 3.12);     //number

        alert(typeof "A");      //string
        alert(typeof 'Hello');   //string

        alert(typeof true);     //boolean
        alert(typeof false);    //boolean

        alert(typeof null);     //object

        var a = 12;
        alert(typeof a);        //number

        var b;
        alert(typeof b);    //undefined

运算符

js中的运算符与java中基本一致，除了比较运算符中的全等运算符（===）

==会进行类型转换，===不会进行类型转换

类型转换

字符串类型转为数字：
- 将字符串字面值转为数字。如果字面值不是数字，则转为NAN
其他类型转为boolean：
- Number：0和NaN为false，其他均转为true
- String：空字符串为false，其他均转为true
- Null和undefined均转为false

//三等运算符和双等运算符
        var number_a = 20;
        var str_a = "20";
        var a = 20;
        alert(a === str_a); //false
        alert(a === number_a);//true

        alert(a==str_a);//true
        alert(a==number_a);//false

        //类型转化
        //其他类型转换为数字
        alert(parseInt("12"));//12
        alert(parseInt("12A45"));//12
        alert(parseInt("A45"));//NaN

        //其他类型转换为boolean
        if(0){
            alert("0转换为false");
        }
        if(NaN){
            alert("NaN转换为false");
        }
        if(1){
            alert("除0和NaN，其他转换为true");
        }

        

        if(""){
            alert("空字符串转换为false");
        }
        if(null){
            alert("null转换为false");
        }
        if(undefined){
            alert("undefined转换为false");
        }

流程控制语句

与java的一致

参考官方文档

js函数

介绍

函数（方法）是被设计为执行特定任务的代码块。

定义

js函数通过function关键字进行定义，语法为：

function 函数名(参数1, 参数2, ...){
    函数体
}

此外，还有另外一种定义方式

var 函数名字=function(参数1, 参数2, ...) {
    函数体
}

注意

形式参数不需要类型。因为js是若类型的语言
返回值也不需要定义类型，可以在函数内部直接使用return即可。这两点上来看是与python是类似的
先定义后调用或先调用后定义均可
在js中，函数调用可以传递任意个数的参数，但实际接收的只有最先的

调用

函数名称(实际参数列表)

alert(fun(12, 21));

        //定义方式1
        function fun(a, b) {
            return a+b;
        }

        //定义方式2
        var add=function(a, b){
            return a + b;
        }

        alert(add(100, 200));//300

        //函数调用
        //接收小于参数列表长度的参数
        alert(add(12)); //NaN
        //接收多余参数列表长度的参数
        alert(add(10, 20, 30, 40));//30

js对象

在js中，Array, String, JSON是js的三大基础对象，还有另外两类对象，分别为BOM和DOM。

Array

定义与访问

js中Array对象用于定义数组

定义

方式一：

var 变量名 = new Array(元素列表);

例如：

var arr = new Array(1, 2, 3, 4, 5);

方式二：

var 变量名 = [元素列表];

例如：

var arr = [1, 2, 3, 4, 5];

访问：

变量名[索引] = 值;

特点：长度可变，类型可变
注意：js中的数组相当于java中的集合，数组的长度是可变的，而js是弱类型，所以可以存储任意类型的数据。

属性

length：设置或返回数组中元素的数量

方法

forEach()：遍历数组中每个有值的元素，并调用一次传入的函数
- 箭头函数（ES6）：是用来简化函数定义语法的。具体形式为：(参数列表)=>{函数体},
  
  如果需要给箭头函数起名字：var 函数名=(参数列表)=>{函数体}
push(添加的元素)：将新元素添加到数组的末尾，并返回新的长度，可以添加多个元素
splice(删除位置的起始索引, 删除元素的个数)：从数组中删除元素

String

创建方式

方式一

var 变量名 = new String("...");

方式二

var 变量名 = "..."

属性

length：字符串的长度

方法

charAt(pos: number)：返回指定位置的字符
indexOf(searchString: string)：检索字符串,如果检索的字符串存在，则返回该字符串第一次出现的位置，否则返回-1
trim()：去除字符串两边的空格,并返回一个新的字符串，不会改变原有的字符串
substring(startIndex: number, endIndex?: number|undefined)：提取字符串中两个指定的索引号之间的字符
- 同java一样，左闭右开
- 如果没有指定结束位置，则默认从开始位置截取到最后

//创建字符串对象
        //方式一
        var str1 = new String("HelloWorldWorld");//String {'HelloWorldWorld'}
        //方式二
        var str2 = "HelloString";//HelloString

        console.log(str1);
        console.log(str2);

        //length
        console.log(str1.length);//15
        console.log(str2.length);//11

        //charAt
        console.log(str1.charAt(4));//o

        //indexof
        console.log(str1.indexOf("World"));//5
        console.log(str1.indexOf("world"));//-1

        //trim
        var str3 = "   Hel  lo    ";
        var str4 = str3.trim();
        console.log(str3);//   Hel  lo    
        console.log(str4);//Hel  lo

        //substring
        var str5 = str2.substring(5);//String
        var str6 = str2.substring(5, 9);//stri
        console.log(str5);
        console.log(str6);

JSON

JS自定义对象

定义格式：

var 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    .
    .
    .
    函数名称: function(形参列表){
        函数体
    },
    //函数的简化格式
    函数名称(形参列表){
        函数体;
    },
        .
        .
        .
};

调用格式
1. 对象名.属性名;
2. 对象名.函数名(实参列表);

JSON-介绍

概念：JavaScript Object Notation,JavaScript对象标记法
JSON是通过js对象标记法书写的文本
由于语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

JSON-基础语法

定义

var 变量名 = '{"key1": value1, "key2": value2, ...}'
- value的数据类型为：
  1. 数字（整数或浮点数）
  2. 字符串（在双引号当中）
  3. 逻辑值（true或false）
  4. 数组（在方括号中）
  5. 对象（在花括号中）
  6. null
JSON字符串转换为JS对象

var jsObject = JSON.parse(jsonStr);

JS对象转换为JSON字符串

var jsonStr = JSON.stringify(jsObject);

//自定义对象
        var Student = {
            name: "Tom",
            age: 18,
            study: function () {
                alert("18岁的Tom在学习");
            },

            //在对象里面函数的简化格式
            eat() {
                alert("Tom在吃饭");
            }
        }

        //调用对象
        /* alert(Student.name);
        Student.study(); */

        /*         
        `value`的数据类型为：
        1. 数字（整数或浮点数）
        2. 字符串（在双引号当中）
        3. 逻辑值（`true`或`false`）
        4. 数组（在方括号中）
        5. 对象（在花括号中）
        6. null */

        //定义一个JSON对象
        var json = '{"ID": 2122, "name": "Tome", "flag": true, "likes":["C++", "Java", "Python"]}';
        alert(json.name);

        //转换为js对象
        var obj = JSON.parse(json);
        alert(obj.name);

        //转换为json对象
        var json1 = JSON.stringify(obj);
        alert(json1);

BOM

概念

Browser Object Model 浏览器对象模型，允许js与浏览器对话，js将浏览器的各个组成部分封装成对象

组成

Window:浏览器窗口对象
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象

Window

介绍：浏览器窗口对象
获取：直接使用window，其中window.可以省略
属性
- history：对History对象的只读引用
- location：用于窗口或框架的Location对象
- navigator：对Navigator对象的只读引用
方法
- alert()：显示带有一段消息和一个确认按钮的警示框
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框，该方法会有一个布尔类型的返回值，当点击取消后会返回 false，点击确认后会返回true
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
  - 细节1：从开始执行该函数后指定时间才开始执行第一次函数
  - 细节2：周期性执行
- setTimeout：在指定的毫秒数后调用函数或计算表达式
  - 细节：只执行一次

Location

介绍：地址栏对象
获取：使用window.location获取，其中window.可以省略
属性：
- href：设置或返回完整的URL

DOM

概念：Document Object Model，文档对象模型
将标记语言的各个组成部分封装成对应的对象（以HTML文档为例）：
- Document：整个文档对象
- Element：元素对象。即html里面的各种标签
- Attribute：属性对象。即html里面标签对应的各种属性
- Text：文本对象
- Comment：注释对象
最终会将上面的5种对象封装成一颗DOM树
js通过DOM，就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式（CSS）
- 对HTML DOM事件作出反应
- 添加和删除HTML元素

DOM的基本组成部分

DOM是W3c（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
1. Core DOM—>所有文档类型的标准模型
  - Document：整个文档对象
  - Element：元素对象
  - Attribute属性对象
  - Text：文本对象
  - Comment：注释对象
2. XML DOM - HTML文档的标准模型
3. HTML DOM - HTML文档的标准模型
  - Image：<img>
  - Button：<input type="Button">
获取元素对象的几个方法
HTML中的Element对象可以通过Document对象获取，而Document对象是通过Window对象获取的
Document对象中提供了以下获取Element元素对象的函数：
1. 根据id属性值获取，返回单个Element对象
```
var h1 = document.getElementById('h1');
```
2. 根据标签名称获取，返回Element对象数组
```
var divs = document.getElementsByTagName('div');
```
3. 根据name属性值获取，返回Element对象数组
```
var hobbys = document.getElementsByName('hobby');	
```
4. 根据class属性值获取，返回Element对象数组
```
var class = document.getElementsByClassName('cls');
```

js事件监听

基本概念

事件：HTML事件是发生在HTML元素上的”事情“
- 按钮被点击
- 鼠标移到元素上
- 按下键盘
- …
事件监听：js可以在事件被侦测时执行代码

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="Button" onClick="on()" value="按钮1">

<script>
	function on(){
        //点击按钮1要执行的代码
    }
</script>

方式二：通过DOM元素属性进行绑定

<input type="Button" id="btn" value="按钮2">

<script>
	document.getElementById('btn').onclick=function(){
        //点击按钮2要执行的代码
    }
</script>

常见事件

事件名	说明
`onclick`	鼠标单击事件
`onblur`	元素失去焦点
`onfocus`	元素获得焦点
`onload`	某个页面或图像被完成加载
`onsubmit`	当表单被提交时出发该事件
`onkeydown`	某个键盘的键被按下时
`onmouseover`	鼠标被移到某元素之上
`onmouseout`	鼠标从某元素上移开


* 方式二：通过DOM元素属性进行绑定

```html
<input type="Button" id="btn" value="按钮2">

<script>
	document.getElementById('btn').onclick=function(){
        //点击按钮2要执行的代码
    }
</script>

常见事件

事件名	说明
`onclick`	鼠标单击事件
`onblur`	元素失去焦点
`onfocus`	元素获得焦点
`onload`	某个页面或图像被完成加载
`onsubmit`	当表单被提交时出发该事件
`onkeydown`	某个键盘的键被按下时
`onmouseover`	鼠标被移到某元素之上
`onmouseout`	鼠标从某元素上移开