Javascript预习博客
（以下大部分内容参考W3school,为个人学习整理）
添加javascript的方式
- 脚本可被放置与 HTML 页面的
<body>或<head>部分中，或兼而有之。
<head>//<body>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>//<body>
- 脚本可放置与外部文件中：它可以分离 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护，已缓存的 JavaScript 文件可加速页面加载。
<script src="myclass.js"></script>
Javascript的基本语法
js的输出语句
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素：如需访问 HTML 元素JavaScript可使用 document.getElementById(id) 方法。id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容
- 使用 console.log() 写入浏览器控制台
<script>
document.write(5 + 6);
window.alert(5 + 6);
console.log(5 + 6);
</script>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
变量
1 . 构造变量名称规则
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头
- 名称对大小写敏感（y 和 Y 是不同的变量）
- 保留字（比如 JavaScript 的关键词）无法用作变量名称
2.变量的数据类型
JavaScript 可处理多种数据类型，其中字符串被包围在双引号或单引号中。数值不用引号。如果把数值放在引号中，会被视作文本字符串。
3.使用 var声明变量
var price1 = 7;
var person = "Bill Gates";
运算符
JavaScript的算数运算符（个别类外），赋值运算符，比较运算符，逻辑运算符均与C语言一致。
注意：算数运算符：使用幂运算符（**）将第一个操作数提升到第二个操作数的幂。
与C语言不同：
1.JavaScript 字符串运算符
- +运算符也可用于对字符串进行相加（concatenate，级联）
- += 赋值运算符也可用于相加（级联）字符串
- 相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串
txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2;
得到：Bill Gates
2.JavaScript 类型运算符
- typeof：返回变量的类型。
- instanceof：返回 true，如果对象是对象类型的实例
3.JavaScript 位运算符（没咋弄懂）
位运算符处理 32 位数。该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
补充：
1.当数值和字符串相加时，JavaScript 将把数值视作字符串。
2.字符串被引号包围。可使用单引号或双引号
3.JavaScript 只有一种数值类型。写数值时用不用小数点均可
4.超大或超小的数值可以用科学计数法来写
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
5.JavaScript 数组用方括号书写。数组的项目由逗号分隔。
6.JavaScript 对象用花括号来书写。对象属性是 name:value 对，由逗 号分隔。
7.可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型
8.在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined
9.空值与 undefined 不是一回事。空的字符串变量既有值也有类型。
10.在 JavaScript 中，null 的数据类型是对象，以通过设置值为 null 清空对象
11.在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined
函数
1.定义：JavaScript 函数是被设计为执行特定任务的代码块。会在某代码调用它时被执行。
2.JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。圆括号可包括由逗号分隔的参数：(参数 1, 参数 2, …)
function bdajbc(p1, p2) {
return p1+p2;
}
3.函数调用
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
当调用函数名时，返回函数定义
想调用函数结果，需使用函数名（）；
4.其他使用规则与C语言差不多。
对象
1.JavaScript 对象也是变量。但是对象包含很多值。JavaScript 变量是数据值的容器。，也可以包含方法。
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
//在函数定义中,this.firstName 的意思是 this 对象的 firstName 属性
}
};
2,访问函数属性
以上例来说明：
person["firstName"];
person.lastName;
3.总的使用方法很像Java，可以参考来看。
事件
1.HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。例如：HTML 网页完成加载；HTML 输入字段被修改；HTML 按钮被点击；
2.具体使用方法：
<element event='一些 JavaScript'>
eg1:<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>
<p id="demo"></p>
//一点击按钮，时间显示在<p>的位置
eg2:<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>
//一点击按钮，按钮上的字由"现在的时间是？"变为“具体时间”
eg3:<button onclick="displayDate()">时间是？</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
//可以通过调用函数来实现eg1的结果
字符串
1.可以使用单引号或双引号声明，内建属性 length 可返回字符串的长度
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
注意事项：
1.需使用反斜杠转义字符把特殊字符转换为字符串字符，具体方法和C语言一样。
2.转义字符（\）也可用于在字符串中插入其他特殊字符。eg:\n换行
3.长代码换行：在字符串中加一个反斜杠，但是不能通过反斜杠对代码行进行换行
4.字符串可以是对象，但是会拖慢执行速度，把字符串创建为对象后，new 关键字使代码复杂化
2.字符串方法
1.length 属性返回字符串的长度
2.indexOf() 方法返回字符串中指定文本首次出现的索引（位置）
3.lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
4.search() 方法搜索特定值的字符串，并返回匹配的位置
5.substr(start, length)提取部分字符串
6.replace() 方法用另一个值替换在字符串中指定的值，只替换首个匹配（可使用g避免），对大小写敏感（可/i避免）
7.oUpperCase() 把字符串转换为大写
8.oUpperCase() 把字符串转换为大写
数字
1.数值基本语法与C语言相似
不同：
1.数字和字符串相加
- 两个字符串相加，结果将是一个字符串的级联
- 对一个数和一个字符串相加，结果也是字符串级联
2.NaN 属于 JavaScript 保留词，指示某个数不是合法数。尝试用一个非数字字符串进行除法会得到 NaN
3.Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值
4.数值可以是对象,但是不推荐使用
2数字方法：
1.toString() 以字符串返回数值。
2.valueOf() 以数值返回数值
3.Number() 可用于把 JavaScript 变量转换为数值
....
数组
1.创建数组：
var cars = ["Saab", "Volvo", "BMW"];
2.使用
我们通过引用索引号（下标号）来引用某个数组元素
var name = cars[0];
cars[0] = "Opel";//修改第一个元素
document.getElementById("demo").innerHTML = cars;
//可通过引用数组名来访问完整数组
3.数组对象
数组是一种特殊类型的对象。但是，JavaScript 数组最好以数组来描述。您可以在数组保存对象,保存函数。甚至可以在数组中保存数组。
4.数组属性
1.length 属性返回数组的长度
2.遍历数组的最安全方法是使用 "for" 循环：
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
3.向数组添加新元素的最佳方法是使用 push() 方法
4.JavaScript 不支持命名索引的数组，在 JavaScript 中，数组使用数字索引，对象使用命名索引。
5.数组方法
1. toString() 把数组转换为数组值（逗号分隔）的字符串。
2. join() 方法也可将所有数组元素结合为一个字符串。
它的行为类似 toString()，但是您还可以规定分隔符fruits.join(" * ")
3.pop() 方法从数组中删除最后一个元素
4.push() 方法（在数组结尾处）向数组添加一个新的元素
5.shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引
6.unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素
7.使用 JavaScript delete 运算符来删除 delete fruits[0];
8.splice() 方法可用于向数组添加新项
9.concat() 方法通过合并（连接）现有数组来创建一个新数组
5.数组排序
1.sort() 方法以字母顺序对数组进行排序
2.reverse() 方法反转数组中的元素
3.使用 Math.max.apply 来查找数组中的最高值
...
6.数组迭代
1.forEach() 方法为每个数组元素调用一次函数（回调函数）
2.filter() 方法创建一个包含通过测试的数组元素的新数组
...
日期
1.默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串 Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间)
2.创建date对象
1.new Date()
//用当前日期和时间创建新的日期对象
2.new Date(year, month, day, hours, minutes, seconds, milliseconds)
//指定日期和时间创建新的日期对象。7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）
3.new Date(milliseconds)
//new Date(milliseconds) 创建一个零时加毫秒的新日期对象
4.new Date(date string)
//new Date(dateString) 从日期字符串创建一个新的日期对象
3.显示日期
在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串。
1.toUTCString() 方法将日期转换为 UTC 字符串
2.toDateString() 方法将日期转换为更易读的格式
具体例子：
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
显示为：Sat May 15 2021
4 .输入格式
1.ISO日期
SO 8601 语法 (YYYY-MM-DD) 也是首选的 JavaScript 日期格式
<p id="demo"></p>
<script>
var d = new Date("2019-05-02");
document.getElementById("demo").innerHTML = d;
</script>
输出结果：Thu May 02 2019 08:00:00 GMT+0800 (中国标准时间)
//计算的日期相对于您的时区。
根据您的时区，上面的结果将在 5 月 2 日至 5 月 3日之间变化。
2.JavaScript 短日期
短日期通常使用 "MM/DD/YYYY" 这样的语法
<p id="demo"></p>
<script>
var d = new Date("05/26/2019");
document.getElementById("demo").innerHTML = d;
</script>
//输出结果：Sun May 26 2019 00:00:00 GMT+0800 (中国标准时间)
3.JavaScript 长日期
长日期通常以 "MMM DD YYYY" 这样的语法来写
<p id="demo"></p>
<script>
var d = new Date("Mar 26 2019");
document.getElementById("demo").innerHTML = d;
</script>
输出结果：Tue Mar 26 2019 00:00:00 GMT+0800 (中国标准时间)
4.JavaScript 完整日期
<p id="demo"></p>
<script>
var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;
</script>
//Date.parse() 返回日期和1970年1月1日之间的毫秒数
5.JavaScript 获取日期方法
使用：
eg:getFullYear() 方法
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>
//输出结果：2021
6.JavaScript 设置日期方法
使用
eg:setFullYear() 方法
<script>
var d = new Date();
d.setFullYear(2020, 11, 3);
document.getElementById("demo").innerHTML = d;
</script>
//输出：Thu Dec 03 2020 16:08:53 GMT+0800 (中国标准时间)
请注意，月份从 0 计数。十二月是 11
Math 对象
1.Math.round(x) 的返回值是 x 四舍五入为最接近的整数
2.Math.pow(x, y) 的返回值是 x 的 y 次幂
3.Math.sqrt(x) 返回 x 的平方根
4.Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数（Math.floor(Math.random() * 100); //则 返回 0 至 99 之间的数）
其他：
条件语句
if 语句和else语句，else if语句，switch语句使用方式与C语言相同
循环语句
for循环，while循环，do-while循环，Break 语句，Continue 语句与C语言一致，不做详细说明，仅使用方向有些不同
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
不同：
For/In 循环
JavaScript for/in 语句遍历对象的属性：
var person = {fname:"Bill", lname:"Gates", age:62};
var text = "";
var x;
for (x in person) {
text += person[x];
}
//用法与python一样
表单
HTML 表单验证能够通过 JavaScript 来完成
以下是两个例子：
1.如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去
html:
<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
javascript:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必须填写姓名");
return false;
}
}
2.JavaScript 常用于验证数字输入：
（请输入 1 到 10 之间的数字）
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// 获取 id="numb" 的输入字段的值
x = document.getElementById("numb").value;
// 如果 x 不是数字或小于 1 或大于 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入无效";
} else {
text = "输入有效";
}
document.getElementById("demo").innerHTML = text;
}
</script>
当然，还有其他的表单属性，在此不多做介绍
总结
javascript的语法还有很多，这里只整理了一些基本语法，要一起加油呀！
1754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
