JavaScript 引入到文件
在 HTML 中使用 JavaScript
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
</head>
<body>
<!-- 内联脚本 -->
<script>
console.log("Hello, World!");
</script>
<!-- 外部脚本 -->
<script src="script.js"></script>
<!-- 脚本放置位置 -->
<!-- 1. 放在 head 中 -->
<script src="head-script.js"></script>
<!-- 2. 放在 body 底部（推荐） -->
<script src="body-script.js"></script>
</body>
</html>defer 和 async 属性
html
<!-- defer: 延迟执行，HTML 解析完成后执行 -->
<script src="defer-script.js" defer></script>
<!-- async: 异步加载，加载完成后立即执行 -->
<script src="async-script.js" async></script>常见输出方式
javascript
// 1. 控制台输出
console.log("普通信息");
console.error("错误信息");
console.warn("警告信息");
console.info("提示信息");
// 2. 弹出对话框
alert("这是一个警告框");
let userName = prompt("请输入您的姓名:");
let isConfirmed = confirm("您确定要继续吗?");
// 3. 写入文档
document.write("直接写入 HTML 文档");
// 4. 修改元素内容
document.getElementById("demo").innerHTML = "修改元素内容";常见输出方式
javascript
// 1. 控制台输出
console.log("普通信息");
console.error("错误信息");
console.warn("警告信息");
console.info("提示信息");
// 2. 弹出对话框
alert("这是一个警告框");
let userName = prompt("请输入您的姓名:");
let isConfirmed = confirm("您确定要继续吗?");
// 3. 写入文档
document.write("直接写入 HTML 文档");
// 4. 修改元素内容
document.getElementById("demo").innerHTML = "修改元素内容";两种方法的区别
document.write() 和 element.innerHTML 是两种不同的操作 DOM 的方法，它们有以下主要区别：
1. 作用范围不同
document.write()是直接向整个 HTML 文档写入内容element.innerHTML是修改特定元素的内容
2. 执行时机影响
document.write()如果在页面加载完成后调用，会覆盖整个页面内容element.innerHTML只会修改指定元素的内容，不影响页面其他部分
3. 使用场景
document.write()主要用于在页面加载过程中动态添加内容（现在很少使用）element.innerHTML是现代 Web 开发中常用的 DOM 操作方法
4. 安全性
document.write()存在安全风险，容易导致 XSS 攻击element.innerHTML相对更安全，但使用时仍需注意内容过滤
5. 性能影响
document.write()会重新解析整个文档element.innerHTML只更新特定元素，性能更好
现代 Web 开发中，推荐使用 element.innerHTML 或更安全的 element.textContent 方法来操作 DOM 元素的内容。
undefined 和 null 的区别
1. 定义和含义
undefined表示变量已声明但未赋值，或者不存在的属性null表示一个空值，是开发者主动设置的，表示"无"或"空"
2. 类型差异
typeof undefined返回 "undefined"typeof null返回 "object"（这是 JavaScript 的历史遗留 bug）
3. 使用场景
undefined通常由 JavaScript 引擎自动分配null通常由开发者主动设置，表示有意的空值
4. 比较操作
javascript
console.log(undefined == null); // true (类型转换后相等)
console.log(undefined === null); // false (类型不同)5. 实际应用示例
javascript
// undefined 的情况
let a;
console.log(a); // undefined
function test() {
// 没有 return 语句
}
console.log(test()); // undefined
// null 的情况
let user = null; // 明确表示没有用户
let element = document.getElementById("nonexistent"); // 找不到元素时返回 null
// 检查值是 undefined 还是 null
function isNullOrUndefined(value) {
return value === null || value === undefined;
// 或者使用宽松比较: return value == null;
}总的来说，undefined 通常是系统自动分配的，而 null 是开发者主动设置的空值。在实际开发中，建议使用 null 来表示有意的空值。
typeof 运算符
typeof 操作符用于检测变量的数据类型：
javascript
console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (这是一个历史遗留bug)
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof Symbol()); // "symbol"
console.log(typeof 123456789012345678901234567890n); // "bigint"
// 实际应用示例
function checkType(value) {
if (typeof value === 'string') {
return '这是一个字符串';
} else if (typeof value === 'number') {
return '这是一个数字';
} else if (typeof value === 'boolean') {
return '这是一个布尔值';
} else {
return '其他类型';
}
}
console.log(checkType("Hello")); // 这是一个字符串
console.log(checkType(42)); // 这是一个数字------------------未完成