JavaScript_javascript脚本-优快云博客

本文链接：https://blog.youkuaiyun.com/Annaday/article/details/144677035

JavaScript

JavaScript是一门跨平台面向对象的脚本语言，控制浏览器的行为

引入方式

在 HTML 文件中，使用<script>标签来包裹 JavaScript 代码，格式如下：

<!DOCTYPE html>
<html>
    <body>
    <!-- 这里是 HTML 内容 -->
        <script>
            // 在这里书写 JavaScript 代码
            function sayHello() {
              alert('Hello, World!');
            }
            sayHello();
        </script>
    </body>
</html>

一般建议将内部脚本放在<body>标签的底部。

引入外部JS文件

例如一个独立的 .js 文件，例如名为 demo.js 的文件

function multiply(num1, num2) {
  return num1 * num2;
}

<!DOCTYPE html>
<html>
	<head></head>
    <body>
      <button onclick="alert(multiply(5, 3))">计算乘积</button>
      <script src="../js/demo.js"></script>
    </body>
</html>

语法

基础语法

与java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
大括号表示代码块

if (count == 3) {
	alert(count);
}

输出语句

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

注释

//单行注释 

/*多行
注释  */

变量

用var关键字(variable的缩写)来声明变量
JavaScript是一门弱类型语言，变量可以存放不同类型的值

var test = 20;
test = "张三";

变量遵循如下规则：

组成字符可以是字母、数字、下划线(_)、$
数字不能开头
建议使用驼峰命名

特殊变量声明
var：

作用域：全局变量，可以在代码块外读取到
可以重复定义

var age = 30;
var age = 20;

let

作用域：局部变量
只能定义一次

const

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

数据类型

原始类型和引用类型

数据类型	描述
number	数字（整数、小数、NaN (Not a Number)）
string	字符、字符串、单双引号皆可
boolean	布尔值（true 或 false）
null	对象为空
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

注：使用 typeof 运算符可以获取数据类型

赋值运算符

运算符	描述
=	将右侧的值赋给左侧的变量。
+=	先对变量进行加法运算，再将结果赋值给该变量。
-=	先对变量进行减法运算，再将结果赋值给该变量。

关系运算符

运算符	描述
==	进行比较时，先判断类型是否一样，若不一样则进行类型转换，然后再比较其值。
===（全等于）	如果类型不一样，直接返回`false`；只有类型一样时才进行值的比较。

三元运算符

表达式格式	描述
条件表达式？true_value : false_value	先对条件表达式进行求值判断，如果条件表达式的值为`true`，则返回`true_value`；如果条件表达式的值为`false`，则返回`false_value`。

数据类型转换

1. string 类型转 number 类型

按照字符串的字面值转为数字，如果字面值不是数字，则会转为 NaN（Not a Number）
一般使用 parseInt() 方法转换。parseInt() 函数会从字符串的开头开始解析，直到遇到非数字字符为止，然后返回解析出的整数值。

let num1 = parseInt("123");
console.log(num1); // 输出：123

let num2 = parseInt("123abc");
console.log(num2); // 输出：123，因为遇到字母 'a' 就停止解析了

let num3 = parseInt("abc");
console.log(num3); // 输出：NaN，因为开头就不是数字字符

除了 parseInt()，还有 parseFloat() 方法，它可以解析出包含小数部分的数值

let num4 = parseFloat("3.14");
console.log(num4); // 输出：3.14

let num5 = parseFloat("3.14abc");
console.log(num5); // 输出：3.14，同样遇到非数字字符停止解析小数部分

boolean 类型转 number 类型

true 转为 1，false 转为 0。

number 类型转 boolean 类型

0 和 NaN 转为 false，其他数字都转为 true。

string 类型转 boolean 类型

空字符串（""）转为 false，其他的字符串转为 true。

null 类型和 undefined 类型转 boolean 类型

始终转为 false。

控制语句

与java相同

if () {	}

for (; ; ) {}

switch(){}

while

do...while

函数

函数(方法)是执行特定任务的代码块

定义：

JavaScript 函数通过 function 关键字进行定义。

//形式参数不需要类型，因为JavaScript是弱类型语言
function functionName(参数1，参数2...){
	代码块
}

//不需要定义返回值类型，可以再函数内部直接使用return返回即可
function add(a,b){
	return a + b;
}

//定义方法2
var functionName = function(参数列表){
	//要执行的代码
}
var add = function(a,b){
	return a + b;
}

调用：

//函数调用可以传递任意个数参数
let result = add(1,2,3);

对象（重要）

基础对象概述

在 JavaScript 中，有多个重点关注的基础对象，包括Array（数组）、String（字符串）、JSON（JavaScript 对象表示法）、浏览器对象模型（BOM）、文件对象模型（DOM），以及可以自定义的对象。

Array

声明方式
- 方式一：var 变量名 = new Array();，创建一个空数组。
- 方式二：var 变量名 = [元素列表];，
访问元素：通过索引来访问数组元素，格式为arr[索引] = 值;，
特点：长度可变，类型可变，意味着可以随时添加或删除元素，并且数组中可以存放不同类型的数据，如[1, "hello", true]。
属性：
- length：用于设置或返回数组元素的数量。
方法：
- forEach()：遍历数组中的每个有值的元素，并调用一次传入的函数。例如：

let arr = [1, 2, 3];
arr.forEach((e) => {
    console.log(e);
});

push()：将新元素添加到数组的末尾，并返回新的长度。
splice(开始的索引, 删除几个)：从数组中删除元素。

//删除元素
array.pop()  //删除数组最后一个元素
array.shift()  //删除数组第一个元素
array.splice(int index,int deleteCount)  //删除数组中从index开始的deleteCount个元素

//截取数组
let arrM = array.slice(int start,int end)  //截取数组中从start到end的元素 注意：左闭右开

//合并数组
arr1,arr2
let arr3 = arr1.concat(arr2)

//字符串变数组
let str = 'abc，defg'
let arr = str.split('') //每一个字符都转换为数组中的一个元素
let arr = str.split('，') //以逗号为分隔符，将字符串分割成数组

//数组变字符串
let arr = ['a','b','c']
let str = arr.join('') //将字符串转换为数组，中间添加空

//对数组进行排序
let arr = [1,2,3,4,5]
arr.sort() //升序，默认按照unicode编码排序
//如果要改为通过阿拉伯数组排序方式需要写为
arr.sort(function(a,b){return a-b})
arr.sort((a,b) => a-b)
//倒序
arr.reverse()
arr.reverse((a,b) => b-a)

String

声明方式：
- 方式一：var 变量名 = new String("...");
- 方式二：var 变量名 = "..."，更为常用，如var str2 = "world";。
属性：
- length：表示字符串的长度。
方法：
- charAt(下标)：返回在指定位置的字符。
- indexOf("字符串")：检索字符串，返回首次出现的索引，若不存在则返回 -1。
- trim()：去除字符串两边的空格，返回一个新的字符串。
- substring(开始下标, 结束下标)：提取字符串中两个指定的索引号之间的字符（含头不含尾）。

JavaScript 自定义对象

定义：

var 对象名 = {
    属性名1: 属性值1,
   ...
    属性名n: 属性值n,
    函数名称: function(形参列表) {}
};
var person = {
    name: "Alice",
    age: 25,
    sayHello: function () {
        console.log("Hello!");
    }
};

调用：
- 通过对象名.属性名;来访问属性。
- 通过对象名.函数名();来调用函数。

JSON

概念：JSON 是通过 JavaScript 对象标注法书写的文本，所有的key必须用双引号包括。
定义示例：var 变量名 = '{"key1": value1, "key2": value2}';（数组必须在方括号中），例如：var user = '{"name": "Bob", "age": 30}';。
JSON 字符串转为 JS 对象：使用JSON.parse()方法，例如：

var userStr = '{"name": "Bob", "age": 30}';
var jsObject = JSON.parse(userStr);
console.log(jsObject.name);

JS 对象转为 JSON 字符串：使用JSON.stringify()方法，例如：

var person = {name: "Charlie", age: 35};
var jsonStr = JSON.stringify(person);
console.log(jsonStr);

BOM（浏览器对象模型）

概念：浏览器对象模型，允许 JavaScript 与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
Window 浏览器窗口对象（window. 可以省略）：
- 属性：
  - history：对History对象的只读引用。
  - location：用于窗口或框架的Location对象。
  - navigator：对Navigator对象的只读引用。
- 方法：
  - alert()：显示带有一段消息和一个确认按钮的警告框。
  - confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框，返回boolean值。例如：var result = confirm("是否确认操作？"); console.log(result);，根据用户点击的按钮返回true或false。
  - setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。例如：setInterval(() => { console.log("每隔1000毫秒执行一次"); }, 1000);。
  - setTimeout()：在指定的毫秒数后调用函数或计算表达式。例如：setTimeout(() => { console.log("3000毫秒后执行"); }, 3000);。
location 对象（调用方式：window.location. 属性）：
- 属性：
  - href：设置或返回完整的URL。例如：window.location.href = "https://www.example.com";，会跳转到指定网址。

DOM（文档对象模型）

概念和作用：
- 将标记语言（如 HTML）的组成部分封装为对应的对象，包括Document（整个文档对象）、Element（元素对象）、Attribute（属性对象）、Text（文本对象）、Comment（注释对象）等。
- JavaScript 通过 DOM 能对 HTML 进行操作，比如改变元素内容、改变 CSS 样式、对 DOM 事件做出反应、添加和删除元素等。
获取元素方式：
- 根据 id 属性值获取：返回单个Element对象，例如：var h1 = document.getElementById('h1');。
- 根据标签名称获取：返回Element对象数组，例如：var divs = document.getElementsByTagName('div');。
- 根据 name 属性值获取：返回Element对象数组，例如：var hobbys = document.getElementsByName('hobbys');。
- 根据 class 属性值获取：返回Element对象数组，例如：var clss = document.getElementsByClassName('cls');。

事件绑定

一、通过标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
    function on() {
        alert("我被点击了");
    }
</script>

在这种方式中，直接在 HTML 标签内使用事件属性（这里是onclick）来指定当该元素被点击时要执行的 JavaScript 函数。当页面加载后，浏览器解析到<input>标签中的onclick="on()"时，就会知道点击这个按钮需要调用名为on的函数，而这个函数是在后面的<script>标签内定义的。一旦按钮被点击，浏览器就会执行on函数，从而弹出包含 “我被点击了” 消息的警告框。

二、通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
    document.getElementById('btn').onclick = function () {
        alert('我被点击了!');
    }
</script>

这里首先通过document.getElementById('btn')获取到具有id="btn"的<input>按钮元素，然后将一个匿名函数赋值给该元素的onclick属性。这样，当按钮被点击时，就会执行这个匿名函数，弹出带有 “我被点击了！” 消息的警告框。这种方式是先在 JavaScript 代码中获取到对应的 DOM 元素，再动态地为其绑定事件处理函数，实现了 JavaScript 代码与 HTML 代码一定程度的分离。