1 基础Ⅰ
引入方式
定义在 HTML 文件中
<!--一般script标签放置在body标签底部，这样不会被编译，可以改善显示速度-->
<script>
…………
</script>一般放置在<body>的底部
定义在外部的.js 文件中
<!--可以引入多个js文件-->
<script src="demo.js"></script> <!--相对位置-->
<script src="demo2.js"></script>
<script src="https://www.w3school.com.cn/js/myScript1.js"></script> <!--完整url-->//不包含script标签
…………基础语法
$$ JavaScript不分单双引号 $$
某些浏览器不支持 JavaScript，可以添加 <noscript> ：
<script>
……
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>注释，流程控制语句
与 Java 相同
输出
alert
在浏览器弹出警告框
alert("hello javascript");![[JavaWeb Draw#^group=L84gWEf4]]
document.write
把内容直接写入到浏览器里显示
<!DOCTYPE html>
<html>
<body>
<h2>网页</h2>
</body>
<script>
document.write(5 + 6);
</script>
</html>
---
网页
11[!attention] 在 HTML 文档完全加载后，使用
document.write()将清除所有已有的 HTML 内容 ![[Excalidraw/计算机/JavaWeb Draw.md#^group=zUFg61Zr|600]]
console.log
写入浏览器的控制台
变量
var
var a = 20;
a = "张三"；- var 可以存放不同类型的值
- var 无块作用域
{ var a = 10; } alert(a);- var 可以重复定义
{
var a = 10;
var a = "js";
}var关键词定义的全局变量属于 window 对象
var carName = "porsche";
// 此处的代码可使用 window.carNamelet
定义的是局部变量，声明的变量具有块级作用域，它们只在声明它们的代码块内可见，在代码块外部无法访问这些变量
在相同的作用域，不可以重复声明
let关键词定义的全局变量不属于 window 对象jslet carName = "porsche"; // 此处的代码不可使用 window.carName
const
定义常量，不可修改
其他特点与
let类似const定义的是一个常量引用，而不是常量值【所以可以修改const对象的属性值】jsconst car = {type:"porsche", model:"911", color:"Black"}; car.color = "White"; car.owner = "Bill";在另外的块中重新声明
const是允许的jsconst x = 2; { const x = 3; }
[!attention] 非必要不创建全局变量，因为 在浏览器环境中，JavaScript 中的全局变量和函数实际上都是 window 对象的属性和方法，所以 全局变量【或函数】可以覆盖 window 对象的变量【或函数】
声明提升 声明提升是 JavaScript 将所有声明\*\*\*【不包括 `let` 和 `const`】\*\*\* 提升到当前作用域顶部的默认行为，==只提升声明，不提升初始化==
var x = 5;
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 只显示 x ， y未定义
// 只有声明（var y）被提升，而不是初始化（=7）
var y = 7;数据类型
$$ 数值，字符串【JSON】，对象【数组，js对象】，布尔值 $$
alert(typeof 1); //number 数值
alert(typeof 9999999999999999n); //bigint 大数值类型
alert(typeof "1"); //string
alert(typeof "["Porsche", "Volvo", "BMW"]"); // object【数组也属于对象】
alert(typeof true); //boolean
alert(typeof null); //object
var a;
alert(typeof a); //undefined（变量未被初始化，则为undefined）
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 12345,
fullName : function() { //fullName属性的值是一个函数
return this.firstName + " " + this.lastName;
}
};大数值
JavaScript 中，所有数字都以 64 位 浮点格式存储，因此 JavaScript 只能安全地表示以下范围内的整数：
- 最大为 9007199254740991（253-1）
- 最小为 -9007199254740991（-(253-1)）
如果需要表示大数值，可以使用 BigInt
//末尾加n，表示这是BigInt数值类型
let y = 9999999999999999n;
//还可以调用BigInt方法
let y = BigInt(1234567890123456789012345)[!attention] 除非显示转换，否则 BigInt 不能与其他类型混用
[!attention] BigInt 不能用于处理小数
数组对象
- 数组的长度可变
- 数组里元素的数据类型可以不一样
var arr = [1, 2, 3, 4];
arr.push(5, 6, 7); //可以添加多个元素到数组的尾部
arr.splice(3, 2); //从索引3开始删，删2个自定义对象
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: function(参数……){
函数体
}
}
对象名.属性名;
对象名.函数名();反引号字符串
//可以在字符串中同时使用单引号和双引号
let text = `He's often called "Johnny"`;
//可以对字符串进行插值
let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;运算符
比较运算符
== 会在比较之前进行类型转换 === 只进行比较，不进行类型转换
var a = 10;
alert(a == "10"); // true
alert(a === "10"); // false
alert(a === 10); // true如果将字符串与数字进行比较，JavaScript 会把字符串转换为数值，空字符串将被转换为 0。非数值字符串的比较始终为 false 的 NaN
类型运算符
typeof 返回变量的类型 instanceof 返回 true【如果对象是对象类型的实例】
在所有数字运算中，JavaScript 会尝试将字符串转换为数字
var x = "100";
var y = "10";
var z = x / y; // z 将是 10在运算符不是 + 的前提下
函数
定义函数
- 无需写返回值，直接在函数体内
return，如果无需返回值则不写 - 参数无需写数据类型
function 函数名(参数1, 参数2……){
函数体
}调用函数
var result = add(10, 20);
调用函数时可以指定任意数量的参数
var result = add(10, 20, 30, 40);
alert(result); //30[!attention] 如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为
undefined，所以我们最好为参数设置默认值jsfunction myFunction(x, y) { if (y === undefined) { y = 0; } }
未学习：
- js 教程
- js 数字方法
- js 数字属性
- 数组
- …………等数组
- 日期格式
- …………
- loop for of
- while
- break
- typeof
- 类型转换
- 位运算
- js 版本