JavaScript入门

关轶 Lv3
  2024-04-20 14:20:33 2024-04-20 14:20:33 创建   2024-10-04 13:07:21 2024-10-04 13:07:21 更新      2.4k 字  9 分钟  

本文参考以下文章:

  • 廖雪峰JavaScript全栈教程
  • 菜鸟教程JavaScript教程

    要看JavaScript历史的请转至廖雪峰的教程.或菜鸟教程,本文仅是一个对于各位大佬的学习笔记,许多都是照搬的,仅对我个人觉得有难度的部分进行笔记.

    JavaScrpit可以在任何网页内运行.但JavaScrpit可能不能单独运行,因为我没看见能单独运行.

目录

第一个JavaScript代码

1
alert('Hello');

上面这段代码的作用是在浏览器弹出一个提示,提示的内容是Hello,让我想起了C语言当中的printf(“Hello”);一样都是用来输出些什么的.

1
2
var a = 2 - 1 + 3 / 2;
console.log(a);

上面这段代码的作用是创建一个变量a,经过计算后,通过console.log(‘a’);来输出,var就像是C语言当中的int,用来定义一个变量,a就是变量名,console.log的作用就像是prnitf(“%d”,a);一样.

加上单引号,例如

1
console.log('Hello');

输出的结果就是Hello.

console.log(a);
console.log(a);

可以见得,结果是2.5.
那么如何运行代码呢,可以在廖雪峰JavaScript全栈教程 或
菜鸟教程JavaScript教程 里进行测试,也可以直接去我搭建的一个页面进行测试,测试,按F12进入开发工具,在控制台中写入你的JavaScript代码.

JavaScript基础语法

赋值

1
2
var a = 1; //也可以在一行内赋值
var b = 2; var c = 3;

语句块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if (a < b){
    a = 2
    b = 3
    c = 4
}
//也可以进行嵌套.
if (a < b){
    a = 1
    b = 2
    c = 3
    if (c > b){
        b = 3
        c = 4
    }
}
//嵌套适可而止.

‘Hello’;也可以被当作一个代码,输出Hello

数据类型和变量

Number

JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型

1
2
3
4
5
6
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

计算机由于使用二进制，所以，有时候用十六进制表示整数比较方便，十六进制用0x前缀和0-9，a-f表示，例如：0xff00，0xa5b4c3d2，等等，它们和十进制表示的数值完全一样。

Number可以直接做四则运算，规则和数学一致：

1
2
3
4
5
6
1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5

注意%是求余运算。

要注意，JavaScript的Number不区分整数和浮点数，也就是说，12.00 === 12。（在大多数其他语言中，整数和浮点数不能直接比较）并且，JavaScript的整数最大范围不是±263，而是±253，因此，超过253的整数就可能无法精确表示：

1
2
3
// 打印Number能表示的最大整数:
console.log(Number.MAX_SAFE_INTEGER);
// 9007199254740991

字符串

字符串是以单引号’或双引号”括起来的任意文本，比如’abc’，”xyz”等等。请注意，’’或””本身只是一种表示方式，不是字符串的一部分，因此，字符串’abc’只有a，b，c这3个字符。

因此,在上面所提到的代码当中,单引号’,是可以替换成双引号”的,例如:

1
console.log('Hello');

可以替换成

1
console.log("Hello");

布尔值

第一次看到这个布尔值,也许不是第一次,可能我忘了,我小脑萎缩了,根据廖雪峰大佬的教程,是这样的:

布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：

1
2
3
4
true; // 这是一个true值
false; // 这是一个false值
2 > 1; // 这是一个true值
2 >= 3; // 这是一个false值

&&运算是与运算

只有所有都为true，&&运算结果才是true：

1
2
3
true && true; // 这个&&语句计算结果为true
true && false; // 这个&&语句计算结果为false
false && true && false; // 这个&&语句计算结果为false

||运算是或运算

只要其中有一个为true，||运算结果就是true：

1
2
3
false || false; // 这个||语句计算结果为false
true || false; // 这个||语句计算结果为true
false || true || false; // 这个||语句计算结果为true

!运算是非运算

它是一个单目运算符，把true变成false，false变成true：

1
2
3
! true; // 结果为false
! false; // 结果为true
! (2 > 5); // 结果为true

布尔值经常用在条件判断中，比如：

1
2
3
4
5
6
var age = 15;
if (age >= 18) {
    alert('adult');
} else {
    alert('teenager');
}

好,那么通过我的理解,将true理解为1,false理解为0,true就是通过,false就是不通过.

2 > 1;是一个true值,为什么呢?

这是因为2 > 1的条件成立,2 > 1,说的是真的,因此是一个true值.

2 >= 3;是一个false值,为什么呢

这是因为2 >= 3的条件不成立,说的是假的,因此这是一个false值.

也就是说,桌子上有两个苹果,如果我说这桌子上的苹果大于一个,那么别人是认同的,也就是2 > 1;

如果我说,这个桌子上的苹果有三个或者三个以上,那么别人是不认同的,也就是2 >= 3

要想让别人认同,需要把说法换成这个桌子上的苹果小于或者等于两个,也就是

2 <= 3

那&&又是什么情况呢?

&&就是让所有的比较都是事实,才可以通过

1
2
3
true && true; // 这个&&语句计算结果为true
true && false; // 这个&&语句计算结果为false
false && true && false; // 这个&&语句计算结果为false

上面这段代码,可以理解为:

1
2
3
2 > 1 && 2 = 2 // 这个&&语句计算结果为true
2 > 1 && 2 >= 3 // 这个&&语句计算结果为false
2 >= 3 && 2 > 1 && 2 >= 4 // 这个&&语句计算结果为false

可以看到只有当描述正确时,才能通过.

换成自然语言呢,就是:

桌子上的两个苹果大于一个,桌子上的苹果等于两个

桌子上的两个苹果大于一个,桌子上的两个苹果大于或等于三个

桌子上的两个苹果大于或等于三个,桌子上的两个苹果大于一个,桌子上的苹果大于或等于四个

分别对应了true,false,只有当所有的值都是true时,最后才会给你通过

打个比方,我现在回家,我家有两个门,一个防盗门,一个木门,木门紧贴着防盗门,现在我需要先打开防盗门,再打开木门,我有很多钥匙,一时半会,可能会插错了这个,插错了哪个,只有当找对钥匙时,我才能进门,这就是&&,只要有一个值是false,就回不了家.

那||又是什么呢,根据上面的比方,我家现在也有两个门,但是位置不一样,一个是正门,一个是后门,我从哪个门进都行.这就是||,只要有一个值为true,就可以回家.

那!又是什么呢,还是上面的例子,但是这次和老婆吵架了,她把门都给你换了,这时,你虽然有钥匙,但是开的已经不是自家门了,这就是!,把有用变成没用.把没用变成有用.

根据上面的理解,我们可以写出一个年龄段代码.

1
2
3
4
5
6
7
8
9
10
var age = 17;
if (age < 18 && age >=16){
    alert("恭喜你,可以进厂打工了");
}
if (age >=18){
    alert("恭喜你,可以进所有厂打工了");
}
if (age < 16){
    alert("非常抱歉,厂里不要你");
}

当然也是可以嵌套的,比如:

1
2
3
4
5
6
7
8
9
10
11
12
var age=17;
if (age >= 18){
   alert("恭喜你,可以进所有厂了");
}else{
   if (age >=16){
       alert("恭喜你,可以进厂打工了");
   }else if(age < 16 && age >= 14){
       alert("非常抱歉,厂里不要你");
   }else{
    alert("你还是乖乖上幼儿园吧");
   }
}

比较运算符

当我们对Number做比较时，可以通过比较运算符得到一个布尔值：

1
2
3
2 > 5; // false
5 >= 2; // true
7 == 7; // true

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

1
NaN === NaN; // false

唯一能判断NaN的方法是通过isNaN()函数：

1
isNaN(NaN); // true

HTML嵌入JavaScript

  • 标题: JavaScript入门
  • 作者: 关轶
  • 创建于 : 2024-04-20 14:20:33
  • 更新于 : 2024-10-04 13:07:21
  • 链接: https://blog.guanyi.lol/学习/编程/语言/高级语言/JavaScript/JS入门/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
JavaScript入门
  1. 目录
    1. 第一个JavaScript代码
    2. JavaScript基础语法
      1. 赋值
      2. 语句块
    3. 数据类型和变量
      1. Number
      2. 字符串
      3. 布尔值
      4. 比较运算符
    4. HTML嵌入JavaScript