2019-11-15

JavaScript 基础知识

前言

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言。是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 教程（w3cschool）
JavaScript 教程（runoob）
JavaScript 标准参考教程
JavaScript 标准参考教程（alpha）
JavaScript 设计模式
JavaScript 和 HTML DOM 参考手册
JavaScript 快速入门
HTML/CSS/JS 在线工具
Visual Studio 官网

1、语言基础

完整的 JavaScript 由语言基础、BOM（浏览器对象模型）和 DOM（文档对象模型）组成。

document：是 JavaScript 的内置对象，代表浏览器的文档部分。

document.write("Hello JavaScript");                 // 向文档写入字符串
document.getElementById("id")                       // 根据 id 获取指定的元素

var value = document.getElementById("num1").value;  // 取输入框的值
document.getElementById("result").value = value;    // 赋给输入框值

document.getElementById("time").innerHTML = value;  // 修改元素的内容

1.1 script 标签

JavaScript 都是放在 script 标签中的，一旦加载，就会执行，如果有多段 script 代码，会按照从上到下，顺序执行。
1
<script src="/study/hello.js"></script> // 使用外部 js 文件

1.2 注释

JavaScript 有两种注释方式：单行注释，多行注释。

// 单行注释
document.write("hello java");

/*
 进行
 多行注释
*/
document.write("hello java");

1.3 变量

使用 var 声明一个变量。
- 关键字 var 可有可无。
- 变量的类型是动态的，当值是整数的时候，就是 Number 类型，当值是字符串的时候，就是 String 类型。
- 命名规则和 java 差不多，开头可以用 _、$ 和字母，其他部分可以用 _、$、字母或者数字。

1.4 基本数据类型

JavaScript 是一门很有意思的语言，即便是基本类型，也是伪对象，所以他们都有属性和方法。

关键字	简介	示例代码
Boolean	布尔。true 或者 false
Number	数字。可以表示十进制，八进制，十六进制整数，浮点数，科学记数法
String	字符串。没有字符的概念，单引号和双引号，都用来表示字符串

undefined	声明了但未赋值
null	空对象/对象不存在

var	动态类型
typeof	变量类型判断	`var x = 5; typeof x;`

1.5 类型转换

类型转换

关键字	简介	示例代码
length	获取长度	`a.length;`

toString	转换为字符串。如果是 null，会报错，后面的代码不能执行 Number 转换为字符串的时候有两种模式默认模式：转换为十进制基模式：转换为二进制、八进制和十六进制	`var a = 10;` `a.toString(); // "10"` `a.toString(2); // "1010"`
String	转换为字符串。如果是 null，会返回字符串 “null”	`String(10); // "10"` `String(null); // "null"`

parseInt parseFloat	转换为整数、浮点数。如果被转换的字符串，同时由数字和字符构成，那么会一直定位数字，直到出现非字符。如果以非数字开头，则返回 NaN	`parseInt("10abc8"); // 10` `parseInt("abc123"); // NaN`
Number	转换为数字。当转换的内容包含非数字的时候，会返回 NaN (Not a Number)	`Number("123");` `Number("a123"); // NaN`

Boolean	转换为 Boolean。非空即为 true，非 0 即为 true，非 null 即为 true	`Boolean("Hello") // true`

1.6 函数

函数

// 定义一个函数
function print() {
    document.write("hello java");
}

// 光有函数的定义，还不够，它不会自动执行，还需要进行调用
print();

// 自动执行
!function print() {
    document.write("hello java");
}();

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<script>
// 自动执行
$(function print() {
    document.write("hello java");
})
</script>

// 带参数，带返回值
function calc(x, y) {
    return x + y;
}
var sum = calc(500, 20);

1.7 事件

事件是 JavaScript 允许 HTML 与用户交互的行为。用户任何对网页的操作，都会产生一个事件。事件有很多种，比如鼠标移动，鼠标点击，键盘点击等等。

<script>
    function showHello() {
        alert("Hello JavaScript");
    }
</script>

<button onclick="showHello()">点击一下</button>

<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>
<button onclick="document.getElementById('text').style.display='block'">显示文本</button>
 
<p id="text"> 这个是一段可以被 javascript 隐藏的文本</p>

1.8 算数运算符

算数运算符

关键字	简介
+ - * / %	基本算数运算符
++ - -	自增，自减运算符。如果 ++ 放在前面，就是先运算，后取值。如果 ++ 放在后面，就是先取值，后运算。
= += -= *= /= %=	赋值运算符
+	运算符的多态。当两边都是数字的时候，表现为算数运算符。当任意一边是字符串的时候，表现为字符串连接符。

1.9 逻辑运算符

逻辑运算符

关键字	简介
== != > >= < <=	基本逻辑运算符。返回一个 Boolean 类型的值，true 或者 false。 == 仅进行值是否相等的判断
=== !==	绝对等，绝对不等于。 === 不仅进行值是否相等的判断，还会进行类型的判断
? :	三目运算符。如果第一个返回 true，就返回第二个操作符，否则就返回第三个操作符

1.10 条件语句

条件语句

关键字	简介
if	条件成立时执行
else	条件不成立时执行
else if	多条件判断
switch	多条件判断。每个判断结束，都要加上 break;

1.11 循环语句

循环语句

关键字	简介
for	循环语句
forEach	增强型循环语句
for in	增强型循环语句
while	循环语句
do-while	循环语句，至少执行一次

continue	继续下一次循环。放弃本次循环，进行下一次循环
break	终止循环。循环体结束

增强型 for 循环语句

1
2
3

array.forEach(element => {
    
});

1
2
3

for (const key in object) {

}

1.12 错误处理

JavaScript 提供了一种 try catch 的错误处理机制，当有错误抛出的时候，可以 catch 住。后续的代码，也就可以继续执行了。
1
2
3
4
5
6
try {

}
catch (err) {
document.write(err.message);
}

2、对象

JavaScript 中的对象是有着属性和方法的一种特殊数据类型。

2.1 数字

数字

关键字	简介	示例代码
new Number	创建一个数字对象	`var x = new Number();` `var x = new Number(123);`

属性 MIN_VALUE 属性 MAX_VALUE	最小值最大值	`Number.MIN_VALUE;` `Number.MAX_VALUE;`
属性 NaN	表示不是数字。当通过非数字创建 Number 的时候，就会得到 NaN。使用函数 isNaN() 来判断是否 “不是一个数字”	`var a = new Number("123abc");` `isNaN(a); // true`

方法 toFixed	返回一个数字的小数表达	`a.toFixed(2); // 123.00`
方法 toExponential	返回一个数字的科学计数法表达	`a.toExponential(); // 1.23e+2`
方法 valueOf	返回一个数字对象的基本数字类型	`var b = a.valueOf();`

2.2 字符串

字符串

关键字	简介	示例代码
new String()	创建字符串对象	`var x = new String();` `var x = new String("5");`

属性 length	字符串长度	`x.length;`

方法 charAt charCodeAt	返回指定位置的字符。 charAt 返回基本类型。返回指定位置的字符对应的 Unicode 码	`x.charAt(0); // "H"` `x.charCodeAt(0); // 72`
方法 concat	字符串拼接。返回基本类型	`x.concat(y);`
方法 indexOf lastIndexOf	子字符串出现的位置。 indexOf 返回子字符串第一次出现的位置。 lastIndexOf 返回子字符串最后一次出现的位置	`var y = new String("Hello JavaScript");` `y.indexOf ("a"); // 7` `y.lastIndexOf ("a"); // 9`
方法 localeCompare	比较两段字符串是否相同。0 即表示相同，1 表示字母顺序靠后，-1 表示字母顺序靠前	`x.localeCompare(y);`
方法 substring	截取一段子字符串。第二个参数，取不到。返回基本类型	`x.substring (0, 3); // Hel`
方法 split	根据分隔符，把字符串转换为数组。第二个参数可选，表示返回数组的长度	`x.split(" ");` `x.split(" ", 2); // 只保留前两个`
方法 replace	替换子字符串。默认情况下只替换找到的第一个子字符串

替换所有字符串

1
2
3

var x = new String("Hello JaavaaScript");

var y = x.replace(/aa/g, "a");          // 替换掉所有的 aa

var x = new String("Hello JaavaaScript");

var regS = new RegExp("aa", "g");       // 替换掉所有的 aa
var z = x.replace(regS, "a");

2.3 数组

JavaScript 中的数组是动态的，即长度是可以发生变化的。

关键字	简介	示例代码
new Array	创建数组对象	`var x = new Array();` `var x = new Array(5);` `var x = new Array(3, 1, 4, 1, 5, 9, 2, 6);`

属性 length	数组长度	`x.length`

for for in	遍历一个数组。在增强 for in 中，i 是下标的意思。	`for (i in x) { }`
方法 concat	连接数组	`x.concat(y);`
方法 join	通过指定分隔符，返回一个数组的字符串表达。不指定分隔符时，默认的分隔符为 “,”	`x.join();` `x.join("@");`
方法 push pop	分别在最后的位置插入数据和获取数据 (获取后删除)	`x.push(5);` `var e = x.pop();`
方法 unshift shift	分别在最开始的位置插入数据和获取数据 (获取后删除)	`x.unshift(5);` `var e = x.shift();`
方法 sort	对数组的内容进行排序。默认采用正排序，即小的数排在前面	`x.sort();`
方法 sort(comparator)	自定义排序算法	`x.sort(comparator);`
方法 reverse	对数组的内容进行反转	`x.reverse();`
方法 slice	获取子数组。第二个参数取不到，不写第二个参数时表示取到数组结尾	`var y = x.slice(1);` `var z = x.slice(1, 3);`
方法 splice	删除和插入元素	`x.splice(3, 2); // 从位置 3 开始，删除 2 个元素` `x.splice(3, 0, 1, 5); // 从位置 3 开始，删除 0 个元素，但是插入 1 和 5`

遍历数组

var x = new Array(3, 1, 4);

for (i = 0; i < x.length; i++) {        // 普通 for 循环
    document.write(x[i]);
}

var x = new Array(3, 1, 4);

for (i in x) {                          // for in 循环
    document.write(x[i]);
}

自定义排序算法

var x = new Array(3, 1, 4, 1, 5, 9, 2, 6);

function comparator(v1, v2) {
    return v2 - v1;                     // v2 - v1 表示大的放前面，小的放后面
}

x.sort(comparator);

document.write(x);

2.4 日期

日期

关键字	简介	示例代码
new Date	创建日期对象	`var d = new Date(); // 表示当前日期 (现在)`

getFullYear getMonth getDate	年/月/日。 getMonth() 返回的月数，是基零的，0 代表 1 月份	`d.getFullYear();` `d.getMonth() + 1;` `d.getDate();`
getHours getMinutes getSeconds getMilliseconds	时:分:秒:毫秒	`d.getHours();` `d.getMinutes();` `d.getSeconds();` `d.getMilliseconds();`
getDay	一周的第几天。返回值是基 0 的	`d.getDay() + 1;`
getTime	经历的毫秒数。获取从 1970/1/1 00:00:00 至今的毫秒数	`d..getTime();`

setFullYear setMonth setDate setHours setMinutes setSeconds	修改日期和时间	`d.setFullYear(2012);` `d.setMonth(11); // 月份是基 0 的，所以 11 表示 12 月` `d.setDate(12);` `d.setHours(0);` `d.setMinutes(0);` `d.setSeconds(0);`

2.5 Math

Math 是 JavaScript 的工具对象，用于常见的数学运算。

关键字	简介	示例代码
属性 E PI	自然对数和圆周率	`Math.E;` `Math.PI;`

方法 abs	绝对值	`Math.abs(-1);`
方法 min max	最小和最大值	`Math.min(a, b);` `Math.max(a, b);`
方法 pow	求幂。求一个数的 n 次方	`Math.pow(3, 3)); // 3 的立方，即 27`
方法 round	小数四舍五入取整	`Math.round(3.5); // 4`
方法 random	取 0 - 1 之间的随机数	`Math.random();`

2.6 自定义对象

在 JavaScript 中可以自定义对象，添加新的属性，添加新的方法。

3、BOM

BOM 即浏览器对象模型（Browser Object Model）。

3.1 Window 窗口

一旦页面加载，就会自动创建 window 对象，所以无需手动创建。

window.innerWidth;          // 获取文档显示区域的高度和宽度
window.innerHeight;

window.outerWidth;          // 获取外部窗体（浏览器）的宽度和高度
window.outerHeight;

window.open("https://www.qianchia.com");        // 打开一个新的窗口（网站）

浏览器上常见的弹出框有警告框，确认框，提示框这些都是通过调用 window 的方法实现的。因为很常用，所以就会把 window 省略掉，直接使用。

关键字	简介	示例代码
alert	警告框	`alert("注册成功");`
confirm	确认框。返回基本类型的 Boolean true 或者 false	`var d = confirm("是否要删除");`
prompt	输入框。用于弹出一个输入框，供用户输入相关信息	`var name = prompt("请输入用户名:");`

3.2 Navigator 浏览器

Navigator 即浏览器对象，提供浏览器相关的信息。

navigator.appName;          // 浏览器产品名称
navigator.appVersion;       // 浏览器版本号
navigator.appCodeName;      // 浏览器内部代码
navigator.platform;         // 操作系统
navigator.cookieEnabled;    // 是否启用 Cookies
navigator.userAgent;        // 浏览器的用户代理报头

3.3 Screen 客户端屏幕

Screen 对象表示用户的屏幕相关信息。可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。

screen.width;               // 屏幕分辨率
screen.height;

screen.availWidth;          // 可用区域大小
screen.availHeight;

3.4 History 访问历史

History 用于记录访问历史。

1 2	history.back(); // 返回上一次的访问 history.go(-2); // -1 表示上次，-2 表示上上次，以次类推

3.5 Location 浏览器地址

Location 表示浏览器中的地址栏。

location = "https://www.qianchia.com";          // 跳转到另一个页面
location.assign("https://www.qianchia.com");

location.reload();          // 刷新当前页面

location.protocol;          // 协议
location.hostname;          // 主机名
location.port;              // 端口号 (默认是 80，没有即表示 80 端口)
 
location.host;              // 主机加端口号
location.pathname;          // 访问的路径
 
location.hash;              // 锚点
location.search;            // 参数列表

3.6 计时器

计时器

关键字	简介	示例代码
setTimeout	只执行一次。在指定的毫秒数时间后，执行一次函数	`setTimeout(printTime, 3000);`
setInterval	不停地重复执行。重复执行同一个函数，重复的时间间隔由第二个参数指定	`var t = setInterval(printTime, 1000);`
clearInterval	终止重复执行	`clearInterval(t);`

4、DOM

DOM 即文档对象模型（Document Object Model）。
DOM 是把 HTML 里面的各种数据当作对象进行操作的一种思路。

5、JavaScript 实例

JavaScript 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-15 20:01

Qian Chia's Blog

赞助

搜索

分类

标签