JavaScript
JavaScript 被认为是一种弱类型(或称为动态类型)语言。这意味着在 JavaScript 中,变量在声明时不需要指定数据类型,且变量的类型可以在运行时改变。这种类型系统的灵活性允许开发者在编写代码时有更大的自由度,但同时也可能导致一些运行时错误,因为类型错误可能不会在编译时被捕获。
弱类型语言的特点:
1.类型推断:JavaScript 引擎在运行时自动推断变量的类型。
2.类型转换:JavaScript 会根据需要自动进行类型转换。例如,如果在需要字符串的地方使用了数字,JavaScript 会尝试将数字转换为字符串。
3.动态类型:变量可以存储任何类型的数据,并且可以在任何时候改变其类型。
let example = 42; // 初始为数字类型
example = "Hello, World!"; // 现在是字符串类型
弱类型语言的优势:
- 灵活性:可以轻松地在不同类型之间转换,编写代码时更加灵活。
- 简洁性:不需要显式声明类型,代码通常更简洁。
弱类型语言的劣势:
- 类型错误:由于类型检查发生在运行时,一些类型相关的错误可能不会被提前发现。
- 调试困难:类型相关的错误可能导致难以追踪的 bug。
注意事项:
尽管 JavaScript 是弱类型语言,但编写代码时仍然推荐遵循良好的类型实践,比如使用类型检查和避免不必要的类型转换,以减少错误和提高代码的可维护性。
JavaScript的使用方式
1. 使用 Script 标签
你可以直接在 HTML 文件中使用 <script>
标签来嵌入 JavaScript 代码。这种方式适合编写简单的脚本或快速测试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script Tag Example</title>
</head>
<body>
<h1 id="greeting">Hello, World!</h1>
<script>
// JavaScript 代码
document.getElementById('greeting').innerHTML = 'Hello, JavaScript!';
</script>
</body>
</html>
2. 引用 Script 文件
对于更复杂的项目,通常会将 JavaScript 代码放在单独的文件中,并通过 <script>
标签的 src
属性引用这些文件。这种方式有助于组织代码,并且可以缓存 JavaScript 文件以提高页面加载速度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External Script Example</title>
</head>
<body>
<h1 id="greeting">Hello, World!</h1>
<script src="path/to/your-script.js"></script>
</body>
</html>
在 your-script.js
文件中,你可以写入如下 JavaScript 代码:
// your-script.js
document.getElementById('greeting').innerHTML = 'Hello, External JavaScript!';
注意事项:
-
加载顺序:当使用
<script>
标签直接在 HTML 中编写 JavaScript 代码时,代码会在页面解析到<script>
标签时立即执行。如果脚本位于<body>
标签的底部,通常可以确保在执行脚本之前页面的 DOM 已经加载完成。 -
异步加载
:通过给
查看JS的错误信息
- .打开你的网页。
- 右键点击页面,选择“检查”(Inspect)或者使用快捷键
Ctrl+Shift+I
(Windows/Linux)或Cmd+Option+I
(Mac)打开开发者工具。 - 换到“控制台”(Console)标签页。
JS变量定义方式
在 JavaScript 中,有几种不同的方式可以定义变量。以下是几种常见的变量定义方式:
1. 使用 var
关键字
var
是 JavaScript 中最传统的变量声明方式,它具有函数作用域或全局作用域。
var name = "Alice";
2. 使用 let
关键字
let
关键字是在 ES6 (ECMAScript 2015) 中引入的,它提供了块级作用域(block scope),意味着变量只在声明它们的块(如 if
语句或循环中)内有效。
let name = "Bob";
3. 使用 const
关键字
const
关键字同样在 ES6 中引入,用于声明一个块级作用域的常量。一旦声明,其值就不能被重新赋值。
const PI = 3.14159;
注意事项:
- 变量提升(Hoisting):使用
var
声明的变量会提升到其作用域的顶部,但赋值不会提升。这意味着在声明之前使用变量会返回undefined
。而let
和const
不会提升变量声明,尝试在声明之前访问变量会导致引用错误(ReferenceError)。 - 重复声明:
var
允许在同一作用域内重复声明同一个变量,但let
和const
不允许。 - 最佳实践:由于
let
和const
提供了更清晰的作用域规则和避免了变量提升带来的问题,推荐在 ES6 及以上版本的 JavaScript 中使用let
和const
来代替var
。
function example() {
var x = 1;
let y = 2;
const z = 3;
if (true) {
var x = 4; // 同作用域内的变量提升,覆盖了外部的 x
let y = 5; // 新的块级作用域内的 y
console.log(x, y, z); // 输出 4, 5, 3
}
console.log(x, y, z); // 输出 4, 2, 3
}
example();
JS的数据类型
JavaScript 中有七种基本数据类型(原始类型)和一种复杂数据类型(对象类型)。以下是这些数据类型的概述:
基本数据类型(原始类型)
-
String(字符串)
- 用于文本值,由字符组成,用单引号、双引号或反引号(模板字符串)包围。
let greeting = "Hello"; let name = 'Alice'; let template = `Welcome ${name}!`;
-
Number(数字)
- 用于表示数字,包括整数和浮点数。
let count = 42; let pi = 3.14159;
-
Boolean(布尔值)
- 逻辑值,
true
或false
。
let isDone = true; let isPresent = false;
- 逻辑值,
-
Undefined
- 表示未定义的值,变量已声明但未赋值时的默认值。
let undefinedVariable;
-
Null
- 表示空值或不存在的对象。
let emptyObject = null;
-
NaN
not a number 非数值
-
Symbol(符号)
- ES6 引入的唯一且不可变的数据类型,常用于对象属性的键。
let sym = Symbol('description');
-
BigInt
- ES2020 引入的用于表示大整数的数据类型,可以安全地存储和操作大整数。
let bigInt = 12345678901234567890n;
复杂数据类型(对象类型)
-
Object(对象)
- 用于存储键值对集合和更复杂的数据结构。对象可以包含方法、数组、函数等。
let person = { firstName: "John", lastName: "Doe", age: 30, sayHi: function() { console.log("Hi!"); } };
注意事项
- JavaScript 是一种动态类型语言,变量在声明时不需要指定类型,且可以在运行时改变类型。
- JavaScript 中的数字类型不区分整数和浮点数,都是统一的
Number
类型。 typeof
操作符可以用来检测变量的数据类型。- 对象类型(Object)是引用类型,而基本数据类型是按值传递的。
- string 字符串可以用[‘’]单引号 或者[“”]双引号
运算符
JavaScript 提供了多种运算符来执行各种操作,包括算术运算、比较、逻辑运算、位运算、赋值运算符等。以下是一些主要的 JavaScript 运算符分类和示例:
算术运算符
用于执行基本的数学运算。
+
:加法-
:减法*
:乘法/
:除法%
:取模(余数)++
:递增(前缀或后缀)--
:递减(前缀或后缀)
比较运算符
用于比较两个值。
==
:等于(抽象相等)!=
:不等于(抽象不等)===
:全等(严格相等)!==
:不全等(严格不等)>
:大于<
:小于>=
:大于等于<=
:小于等于
逻辑运算符
用于执行逻辑运算。
&&
:逻辑与(AND)||
:逻辑或(OR)!
:逻辑非(NOT)
位运算符
对数字的二进制表示进行操作。
&
:按位与(AND)|
:按位或(OR)^
:按位异或(XOR)~
:按位取反(NOT)<<
:左移>>
:右移>>>
:无符号右移
赋值运算符
用于给变量赋值。
=
:基本赋值+=
:加后赋值-=
:减后赋值*=
:乘后赋值/=
:除后赋值%=
:取模后赋值<<=
:左移后赋值>>=
:右移后赋值>>>=
:无符号右移后赋值&=
:按位与后赋值^=
:按位异或后赋值|=
:按位或后赋值
条件(三元)运算符
?:
:条件表达式,格式为条件 ? 表达式1 : 表达式2
字符串连接运算符
+
:当用于字符串时,+
会将两个字符串连接起来。
JS中数组的定义
1. 使用数组字面量
这是定义数组最简单和最常用的方法。数组字面量由一对方括号 []
包围,元素之间用逗号分隔。
let fruits = ["apple", "banana", "cherry"];
2. 使用 Array
构造函数
你也可以使用 Array
构造函数来创建数组。这种方式可以接受一个整数参数来指定数组的长度,或者接受一个数组元素列表。
// 创建一个长度为 3 的空数组
let numbers = new Array(3);
// 创建一个包含特定元素的数组
let colors = new Array("red", "green", "blue");
数组的属性和方法
-
length:数组的
length
属性返回数组中元素的数量。let fruits = ["apple", "banana", "cherry"]; console.log(fruits.length); // 输出 3
-
访问和修改元素:通过索引访问或修改数组元素。
fruits[0] = "mango"; // 修改第一个元素为 "mango" console.log(fruits[1]); // 输出 "banana"
-
添加和删除元素:JavaScript 提供了多种方法来操作数组,如
push()
,pop()
,shift()
,unshift()
,splice()
,slice()
等。fruits.push("orange"); // 在数组末尾添加 "orange" fruits.pop(); // 移除数组末尾的元素 fruits.unshift("strawberry"); // 在数组开头添加 "strawberry" fruits.shift(); // 移除数组开头的元素
示例
// 创建一个数组并添加一些元素
let numbers = [];
numbers.push(1);
numbers.push(2);
numbers.push(3);
// 输出数组长度
console.log(numbers.length); // 输出 3
// 访问数组元素
console.log(numbers[1]); // 输出 2
// 修改数组元素
numbers[0] = 10;
console.log(numbers[0]); // 输出 10
JS函数
在 JavaScript 中,函数是执行特定任务的代码块。它们可以接受输入参数,执行代码,并可选地返回一个值。函数是 JavaScript 中的一等公民,这意味着它们可以像任何其他值一样被传递和返回。
定义函数的几种方式:
1. 函数声明
使用 function
关键字定义一个函数,后跟函数名和一对圆括号(可包含参数),以及一对花括号包围的函数体
function add(a, b) {
return a + b;
}
2. 函数表达式
将函数赋值给变量,可以是匿名函数(没有函数名)或命名函数表达式
// 匿名函数表达式
let multiply = function(a, b) {
return a * b;
};
// 命名函数表达式
let divide = function divide(a, b) {
return a / b;
};
3. 箭头函数(ES6)
使用箭头 =>
定义函数,它提供了一种更简洁的函数写法。
// 箭头函数表达式
let subtract = (a, b) => a - b;
// 如果函数体只有一条语句,可以省略花括号和 return 关键字
let square = x => x * x;
调用函数
定义函数后,可以通过函数名加上一对圆括号(包含参数)来调用函数。
let sum = add(5, 3); // 调用 add 函数,结果为 8
let product = multiply(5, 3); // 调用 multiply 函数,结果为 15
let difference = subtract(5, 3); // 调用 subtract 函数,结果为 2
let squared = square(4); // 调用 square 函数,结果为 16
函数的特性
- 参数:函数可以有零个或多个参数。参数是函数内部的局部变量,函数外部不可见。
- 返回值:使用
return
语句返回函数的结果。如果省略return
,则函数返回undefined
。 - 作用域:函数内部声明的变量具有局部作用域,只能在函数内部访问。
示例
// 定义一个函数,计算并返回两个数的和
function add(a, b) {
return a + b;
}
// 调用函数
let sum = add(10, 5); // sum 的值为 15
// 使用箭头函数定义同样的功能
let addArrow = (a, b) => a + b;
// 调用箭头函数
let sumArrow = addArrow(10, 5); // sumArrow 的值为 15
JS自定义对象
在 JavaScript 中,对象是一种复合数据类型,可以存储多个键值对。对象可以用来模拟现实世界中的实体,如人、汽车、网页等。你可以使用对象字面量或构造函数来创建自定义对象。
使用对象字面量创建对象
对象字面量是用大括号 {}
包围的一组属性和方法的集合。
let person = {
firstName: "John",
lastName: "Doe",
age: 30,
sayHi: function() {
console.log("Hi, my name is " + this.firstName);
}
};
使用构造函数创建对象
构造函数是一种特殊的函数,用于初始化新创建的对象。
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.sayHi = function() {
console.log("Hi, my name is " + this.firstName);
};
}
let person = new Person("John", "Doe", 30);
访问对象属性和方法
你可以使用点符号(.
)或方括号([]
)来访问对象的属性和方法。
// 使用点符号访问属性和方法
console.log(person.firstName); // 输出 "John"
person.sayHi(); // 输出 "Hi, my name is John"
// 使用方括号访问属性和方法
console.log(person["lastName"]); // 输出 "Doe"
person["sayHi"](); // 输出 "Hi, my name is John"
对象的动态特性
JavaScript 对象是动态的,这意味着你可以随时添加、修改或删除属性和方法。
// 添加新属性
person.middleName = "William";
// 修改现有属性
person.age = 31;
// 删除属性
delete person.middleName;
// 添加新方法
person.greet = function() {
console.log("Hello, my name is " + this.firstName + " " + this.lastName);
};
// 调用新方法
person.greet(); // 输出 "Hello, my name is John Doe"
对象字面量与构造函数的比较
- 对象字面量:适合快速创建具有固定属性和方法的对象。
- 构造函数:适合创建多个具有相似属性和方法的对象,可以利用
new
关键字重复使用构造函数。
JS事件
常见的 HTML 事件
下面是一些常见的 HTML 事件:
事件 | 描述 |
---|---|
onchange | HTML 元素已改变 |
onclick | 用户点击了 HTML 元素 |
onmousemove | 用户拖动鼠标到 HTML 元素上 |
onmouseout | 用户鼠标移开 HTML 元素 |
onkeydown | 用户按下了键盘按键 |
onload | 浏览器已经完成页面加载 |
注册事件(绑定)
事件注册(绑定):当事件响应(触发)后要浏览器执行哪些操作代码,叫事件注册或事件绑定。
静态注册事件
通过 HTML 标签的事件属性直接赋予事件响应后的代码,这种方式叫静态注册。
- 简单理解就是在浏览器加载页面,按钮就和事件进行了绑定
动态注册事件
通过 JS 代码得到标签的 DOM 对象,然后再通过 DOM 对象.事件名 = function(){} 这种方式叫动态注册。
onload事件
onload
事件是 HTML 中的一个非常重要的事件,它在页面或图像完全加载完成后触发。这个事件通常用于执行一些初始化操作,比如设置页面元素的样式、初始化 JavaScript 库、加载外部资源(如图片、样式表、脚本文件等)。
如何使用 onload
事件:
1. 在 HTML 标签中使用
可以在 <body>
标签或 <img>
标签中使用 onload
事件。
<body onl oad="initializePage()">
<!-- 页面内容 -->
</body>
<img src="image.jpg" onl oad="imageLoaded()" alt="Loaded Image">
在上面的例子中,initializePage
和 imageLoaded
是当页面或图像加载完成后将要执行的函数名。
2. 在 JavaScript 中使用
在 JavaScript 中,你可以使用 addEventListener
方法为 window
对象或特定的 DOM 元素添加 load
事件监听器。
// 为整个页面添加 load 事件监听器
window.addEventListener('load', function() {
// 页面加载完成后的操作
console.log('Page is fully loaded!');
});
// 为图片添加 load 事件监听器
var img = document.getElementById('myImage');
img.addEventListener('load', function() {
// 图片加载完成后的操作
console.log('Image is loaded!');
});
注意事项:
onload
事件在页面加载完成后触发,包括所有资源(如图片、样式表、脚本文件等)。- 在
onload
事件中执行的操作通常涉及 DOM 操作,因此确保在 DOM 完全加载后再执行这些操作。 - 如果页面中有多个资源(如多个图片),
onload
事件会在所有资源加载完成后触发一次。
onclick事件
onclick
事件是 HTML 中的一个事件,它在用户点击某个元素时触发。这个事件常用于执行与用户交互相关的操作,比如打开链接、显示或隐藏元素、提交表单等。
如何使用 onclick
事件:
1. 在 HTML 标签中使用
可以在几乎任何 HTML 元素上使用 onclick
属性来指定当元素被点击时要执行的 JavaScript 代码。
html
自动换行
复制
<button onclick="alert('Button clicked!')">Click Me</button>
在这个例子中,当按钮被点击时,会弹出一个包含 “Button clicked!” 的警告框。
2. 在 JavaScript 中使用
在 JavaScript 中,你可以使用 addEventListener
方法为元素添加 click
事件监听器。
// 获取按钮元素
var button = document.getElementById('myButton');
// 为按钮添加点击事件监听器
button.addEventListener('click', function() {
alert('Button clicked!');
});
在这个例子中,当按钮被点击时,同样会弹出一个警告框。
注意事项:
onclick
事件处理函数中,this
关键字指向触发事件的元素。- 你可以通过
event.target
或event.currentTarget
获取到触发事件的元素。 - 如果在
onclick
事件处理函数中返回false
,可以阻止元素的默认行为(例如,阻止链接的跳转)。
示例
<!-- HTML 部分 -->
<button id="myButton">Click Me</button>
<!-- JavaScript 部分 -->
<script>
var button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
alert('Button clicked!');
// 阻止链接的默认跳转行为
// if (event.target.tagName === 'A') {
// event.preventDefault();
// }
});
</script>
失去焦点事件
在 HTML 中,失去焦点事件是 onblur
事件。当一个元素(如输入框、选择框等)失去焦点时,onblur
事件就会被触发。这通常发生在用户点击了另一个元素或按下了 Tab 键切换到另一个元素时。
如何使用 onblur
事件:
1. 在 HTML 标签中使用
可以在表单元素(如 <input>
、<textarea>
、<select>
等)上使用 onblur
属性来指定当元素失去焦点时要执行的 JavaScript 代码。
<input type="text" onblur="checkInput(this)" placeholder="Type something">
在这个例子中,当输入框失去焦点时,会调用 checkInput
函数,并将当前输入框作为参数传递。
2. 在 JavaScript 中使用
在 JavaScript 中,你可以使用 addEventListener
方法为元素添加 blur
事件监听器。
// 获取输入框元素
var input = document.getElementById('myInput');
// 为输入框添加 blur 事件监听器
input.addEventListener('blur', function(event) {
checkInput(event.target);
});
在这个例子中,当输入框失去焦点时,同样会调用 checkInput
函数,并将失去焦点的输入框作为参数传递。
注意事项:
onblur
事件处理函数中,this
关键字指向触发事件的元素。event.target
或event.currentTarget
可以用来获取触发事件的元素。onblur
事件常用于表单验证,比如检查用户输入是否符合要求。
示例
<!-- HTML 部分 -->
<input type="text" id="myInput" placeholder="Type something">
<!-- JavaScript 部分 -->
<script>
function checkInput(inputElement) {
var value = inputElement.value;
if (value.trim() === '') {
alert('Please enter some text!');
}
}
var input = document.getElementById('myInput');
input.addEventListener('blur', function(event) {
checkInput(event.target);
});
</script>
onchange事件
onchange
事件是 HTML 中的一个事件,它在元素的值发生变化并且失去焦点时触发。这个事件常用于表单元素,如 <input>
、<select>
和 <textarea>
等,用于响应用户输入或选择的变化。
如何使用 onchange
事件:
1. 在 HTML 标签中使用
可以在表单元素上使用 onchange
属性来指定当元素的值发生变化时要执行的 JavaScript 代码。
<select id="mySelect" onchange="changeHandler(this)">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
在这个例子中,当用户选择一个不同的选项并离开 <select>
元素时,changeHandler
函数会被调用。
2. 在 JavaScript 中使用
在 JavaScript 中,你可以使用 addEventListener
方法为元素添加 change
事件监听器。
// 获取 select 元素
var select = document.getElementById('mySelect');
// 为 select 元素添加 change 事件监听器
select.addEventListener('change', function(event) {
changeHandler(event.target);
});
在这个例子中,当 <select>
元素的值发生变化时,changeHandler
函数同样会被调用。
注意事项:
onchange
事件在元素失去焦点时触发,而不是在值改变的瞬间。onchange
事件处理函数中,this
关键字指向触发事件的元素。event.target
或event.currentTarget
可以用来获取触发事件的元素。
示例
<!-- HTML 部分 -->
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<!-- JavaScript 部分 -->
<script>
function changeHandler(selectElement) {
var selectedValue = selectElement.value;
alert('Selected value: ' + selectedValue);
}
var select = document.getElementById('mySelect');
select.addEventListener('change', function(event) {
changeHandler(event.target);
});
</script>
onsubmit 表单提交事件
onsubmit
事件是 HTML 中的一个事件,它在表单提交之前触发。这个事件常用于执行一些验证操作,比如检查用户输入的数据是否符合要求,或者在表单数据被发送到服务器之前进行一些处理。
如何使用 onsubmit
事件:
1. 在 HTML 标签中使用
可以在 <form>
标签中使用 onsubmit
属性来指定当表单提交时要执行的 JavaScript 代码。
<form onsubmit="return validateForm()">
<!-- 表单内容 -->
<input type="submit" value="Submit">
</form>
在这个例子中,当用户点击提交按钮时,会调用 validateForm
函数。如果 validateForm
返回 false
,表单不会提交。
2. 在 JavaScript 中使用
在 JavaScript 中,你可以使用 addEventListener
方法为表单元素添加 submit
事件监听器。
// 获取表单元素
var form = document.getElementById('myForm');
// 为表单添加 submit 事件监听器
form.addEventListener('submit', function(event) {
if (!validateForm()) {
// 如果验证失败,阻止表单提交
event.preventDefault();
}
});
在这个例子中,当表单提交时,validateForm
函数会被调用。如果验证失败,event.preventDefault()
方法会阻止表单的默认提交行为。
注意事项:
onsubmit
事件处理函数中,this
关键字指向触发事件的表单元素。event.target
或event.currentTarget
可以用来获取触发事件的表单元素。- 如果
onsubmit
事件处理函数返回false
,或者在事件监听器中调用了event.preventDefault()
,表单将不会提交。
示例
<!-- HTML 部分 -->
<form id="myForm">
<!-- 表单内容 -->
<input type="submit" value="Submit">
</form>
<!-- JavaScript 部分 -->
<script>
function validateForm() {
var form = document.getElementById('myForm');
var input = form.querySelector('input[type=text]');9
if (input.value.trim() === '') {
alert('Please enter your name!');
return false;
}
return true;
}
var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
if (!validateForm()) {
event.preventDefault();
}
});
</script>
提示:正则表达式的语法是通用的
标签:JavaScript,函数,元素,基础,let,事件,event From: https://blog.csdn.net/y123916/article/details/142824179