JavaScript 基础知识

前言

1、语言基础

  • document:是 JavaScript 的内置对象,代表浏览器的文档部分。

    1
    2
    3
    4
    5
    6
    7
    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 有两种注释方式:单行注释,多行注释。

    1
    2
    3
    4
    5
    6
    7
    8
    // 单行注释
    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 函数

  • 函数

    1
    2
    3
    4
    5
    6
    7
    // 定义一个函数
    function print() {
    document.write("hello java");
    }

    // 光有函数的定义,还不够,它不会自动执行,还需要进行调用
    print();
    1
    2
    3
    4
    // 自动执行
    !function print() {
    document.write("hello java");
    }();
    1
    2
    3
    4
    5
    6
    7
    8
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

    <script>
    // 自动执行
    $(function print() {
    document.write("hello java");
    })
    </script>
    1
    2
    3
    4
    5
    // 带参数,带返回值
    function calc(x, y) {
    return x + y;
    }
    var sum = calc(500, 20);

1.7 事件

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

    1
    2
    3
    4
    5
    6
    7
    <script>
    function showHello() {
    alert("Hello JavaScript");
    }
    </script>

    <button onclick="showHello()">点击一下</button>
    1
    2
    3
    4
    <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
    1
    2
    3
    4
    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
  • 遍历数组

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

    for (i = 0; i < x.length; i++) { // 普通 for 循环
    document.write(x[i]);
    }
    1
    2
    3
    4
    5
    var x = new Array(3, 1, 4);

    for (i in x) { // for in 循环
    document.write(x[i]);
    }
  • 自定义排序算法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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 对象,所以无需手动创建。

    1
    2
    3
    4
    5
    6
    7
    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 即浏览器对象,提供浏览器相关的信息。

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

3.3 Screen 客户端屏幕

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

    1
    2
    3
    4
    5
    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 表示浏览器中的地址栏。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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 实例

文章目录
  1. 1. 前言
  2. 2. 1、语言基础
    1. 2.1. 1.1 script 标签
    2. 2.2. 1.2 注释
    3. 2.3. 1.3 变量
    4. 2.4. 1.4 基本数据类型
    5. 2.5. 1.5 类型转换
    6. 2.6. 1.6 函数
    7. 2.7. 1.7 事件
    8. 2.8. 1.8 算数运算符
    9. 2.9. 1.9 逻辑运算符
    10. 2.10. 1.10 条件语句
    11. 2.11. 1.11 循环语句
    12. 2.12. 1.12 错误处理
  3. 3. 2、对象
    1. 3.1. 2.1 数字
    2. 3.2. 2.2 字符串
    3. 3.3. 2.3 数组
    4. 3.4. 2.4 日期
    5. 3.5. 2.5 Math
    6. 3.6. 2.6 自定义对象
  4. 4. 3、BOM
    1. 4.1. 3.1 Window 窗口
    2. 4.2. 3.2 Navigator 浏览器
    3. 4.3. 3.3 Screen 客户端屏幕
    4. 4.4. 3.4 History 访问历史
    5. 4.5. 3.5 Location 浏览器地址
    6. 4.6. 3.6 计时器
  5. 5. 4、DOM
  6. 6. 5、JavaScript 实例
隐藏目录