Z1d10tのBlog

A note for myself,have fun!

JS简单基础学习

Z1d10t's Avatar 2023-09-10 知识学习

分享本文
  1. 1. JS语言特性
  2. 2. JS两种引入方式
  3. 3. 注释符:
  4. 4. 变量
    1. 4.1. 定义变量
    2. 4.2. 未定义undefined
    3. 4.3. 数字number
    4. 4.4. 字符串string
    5. 4.5. 字符串还可以是对象
    6. 4.6. 布尔 boolean
    7. 4.7. 对象 object
    8. 4.8. 常量:
    9. 4.9. JS字面量(直接量)
    10. 4.10. js模板字符串
    11. 4.11. 变量的使用规则
  5. 5. Typeof
  6. 6. 运算符
    1. 6.1. 1、算术运算符是用来执行变量或值的算术运算
    2. 6.2. 2、赋值运算符是用来给变量赋值
    3. 6.3. 3、字符串连接符
    4. 6.4. 4、比较运算符
  7. 7. 逻辑运算符
  8. 8. JS的三个内置函数
  9. 9. JS创建对象的两种方式
  10. 10. 创建数组
    1. 10.1. 数组常用方法
  11. 11. this关键字
  12. 12. 条件语句
  13. 13. SWITCH语句
    1. 13.1. default
  14. 14. JS类型转换
    1. 14.1. constructor属性
  15. 15. For循环
  16. 16. while循环
    1. 16.1. do-while循环
  17. 17. break和continue语句
  18. 18. js错误-throw、try、catch
  19. 19. JS声明提升
  20. 20. JS严格模式
  21. 21. JSON数据
    1. 21.1. JSON格式：
    2. 21.2. JSON对象和JSON字符串互转
  22. 22. 向未声明的 JavaScript 变量分配值
  23. 23. JavaScript 事件
    1. 23.1. 常见HTML事件列表：
  24. 24. DOM文档对象模型
  25. 25. DOM树

纯是为了看懂代码的…没啥用的电子垃圾

JS语言特性

  • js是一门弱语言，声明变量没有类型统一用var
  • js没有方法重载概念，同名函数会被覆盖

JS两种引入方式

  • 一种是内部直接引入就是通过script标签包裹起来<script>代码</script>
  • 另一种是通过文件引入的方式也是通过script标签不过要在其属性加上scr=路径
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js学习</title>
  </head>
  <body>
    <!--外部引入-->
    <script src="test1.js"></script>
    <!--内部引入-->
    <script>alert('hello')</script>
  </body>
</html>

img

注释符:

与java一一样都是//

变量

定义变量

var 变量名 = 值; 因为是弱类型语言

除了var之外还有let const 三者区别:

  • var声明是全局作用域或函数作用域，而let和const是块作用域。
  • var变量可以在其范围内更新和重新声明； let变量可以被更新但不能重新声明； const变量既不能更新也不能重新声明。
  • 它们都被提升到其作用域的顶端。但是，虽然使用变量undefined初始化了var变量，但未初始化let和const变量。
  • 尽管可以在不初始化的情况下声明var和let，但是在声明期间必须初始化const。

来自:JavaScript 中的 Var、Let 和 Const 有什么区别

使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外

使用 let 关键字， 它声明的变量作用域只在循环体内，循环体外的变量不受影响

就是说如果在循环体外和内都定义相同变量

那么var不管在体内还是体外都会改变变量值，而let体外的变量值不受体内的改变而变化

let 关键字声明的全局作用域变量不属于 window 对象

未定义undefined

undefined类型只有一个值就是undefined

var a;声明但是没有给值那么就是undefined

数字number

数字类型的所有的数字均用浮点数值表示(不区分整数值和浮点值,小数点可带可不带)。
特殊的数字类型NaN:
NaN 代表非数字的特殊值,用于指示某个值不是数字。
NaN 非数字与任何数据都不相等，包括自己。
js内置函数isNaN(),判断数值不是数字。
isNaN(123) //false
isNaN(“abc”) //true

字符串string

用双引号或者单引号包裹即可

可以用索引位置来访问其中的每个字符

内置属性length可以用来计算长度 比如string.length

字符串中包含单双引号时，就需要转义一下，不然无法解析

字符串还可以是对象

new 关键字将字符串定义为一个对象

1
2
3
4
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

当然String对象最好别用，会拖慢执行速度以及其他副作用

布尔 boolean

表示真或者假 只有两个值就是true和false

对象 object

对象：是拥有属性和方法的数据
语法：
var 对象名 = {属性名：属性值，属性名：属性值，…}
对象的属性寻址：
对象属性有两种寻址方式也就是引用方式：
people.name;
people[“name”];

常量:

const AGE=18; //定义常量
常量名称常用大写字符
常量不能赋值改变，否则会报错

JS字面量(直接量)

用来为变量赋值时的常数量
字面量是指程序中直接显示出来的值。
100 //数字字面量
‘hello world’ //字符串字面量
false //布尔字面量
{x:1, y:2} //对象字面量表达式
[1,2,3,4,5] //数组字面量表达式

js模板字符串

这里就可以理解为格式化字符串

img

可以将${}中变量的值带进去一起解析

变量的使用规则

  • 变量声明了没有赋值，变量的值就是undefined类型
  • 变量没有声明直接使用，运行时会报错

Typeof

用来监测数据(变量或者值)的数据类型

语法：typeof 值

可以理解为php中的var_dump()函数

  1. “undefined”——如果这个值未定义；
  2. “boolean”——如果这个值是布尔值；
  3. “string”——如果这个值是字符串；
  4. “number”——如果这个值是数值；
  5. “object”——如果这个值是对象或null；
  6. “function”——如果这个值是函数(函数是对象，不是一种数据类型。然而，函数因为有一些特殊的属性，因此通过typeof操作符来区分函数和其他对象)

运算符

1、算术运算符是用来执行变量或值的算术运算

++ 自增： x++; //相当于x=x+1
— 自减： x—;//相当于x=x-1
自增或自减的运算符的位置不同，意义不同

2、赋值运算符是用来给变量赋值

1
var num=123;

3、字符串连接符

实例1：字符串间的 + 运算符
字符串间的 + 运算符可以把两个或多个字符串变量连接起来。
实例2：对字符串和数字进行加法运算返回字符串。

4、比较运算符

比较运算符用来测定变量或值是否相等。
返回值为true或false

console.log(null==undefined); //true
console.log(null===undefined); //false
==判断值是否相等；
===判断值和数据类型是否都相等；

这一点和php的弱比较和强比较有点像

console.log(isNaN(undefined));// true NaN
console.log(isNaN(null));// false 0
null是一个表示”空”的对象，转为数值时为0；
undefined是一个表示”空”的原始值，转为数值时为NaN。

特殊的数字类型NaN，用于指示某个值不是数字。
NaN 非数字与任何数据都不相等，包括自己。

1
2
3
4
NaN==NaN    //false
NaN!=NaN    //true
5 == NaN    //false
"5"==NaN    //false

在js做比较的时候，有这样的三条规则：
如果比较的两者中有bool，会把 bool 先转换为对应的 number，即 0 和 1
如果比较的双方中有一方为number一方为string，会把string转换为数字
把string直接转换为bool的时候，空字符串''转换为 false，除此外的一切字符串转换 为 true 总结:先转bool,再转string

逻辑运算符

逻辑运算符用来测定变量和值中的逻辑。
逻辑与&&（找假）
逻辑或||（找真）
逻辑非!
返回值为true或false

JS的三个内置函数

  • 警告框:alert(“内容”)
  • 确认框:confirm(“内容”)
  • 在控制台打印日志:console.log(“日志内容”)

JS创建对象的两种方式

  • 使用new关键字创建对象
  • 使用{}创建对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//使用new关键字创建对象
var obj01=new Object();
obj01.name="jack";
obj01.age=100;
obj01.address="china";
obj01.showMessage=function(){
    console.log(obj01);
}
//使用{}创建对象
var obj02={
    "name":"jack",
    "age":20,
    "address":"china",
    "showMessage":function(message){
        console.log(message);
    }
};

创建数组

  • 使用new关键字创建数组：var arr = new Array();感觉像是php内置类 有木有？？
  • 使用[]创建数组: var arr = ["cat","dog"];

数组常用方法

  • 压入数据：arr01.push(“apple”);
  • 数组元素反转：arr01.reverse( );
  • 把数组元素通过指定的分隔符，拼接成字符串：var arrStr = arr01.join(“,”);
  • 把字符串通过指定的分隔符，拆分成数组：var arr02 = arrStr.split(“,”);
  • 弹出数组中最后一个元素 ：将数组最后一个元素移除，并返回：var ele = arr01.pop( );
  • 遍历数组：for (var i = 0; i < arr01.length; i++) { console.log(arr01[i]); }

this关键字

  • 在函数外面：this关键字指向window对象也就是代表当前浏览器窗口
  • 在函数里面：this关键字指向调用函数的对象

会随着执行环境而改变：

  • 在方法中，this 表示该方法所属的对象。
  • 如果单独使用，this 表示全局对象。
  • 在函数中，this 表示全局对象。
  • 在函数中，在严格模式下，this 是未定义的(undefined)。
  • 在事件中，this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象

条件语句

和其他语言差不多

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
第一种
if (condition)
{
    当条件为 true 时执行的代码
}
第二种
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}
第三种
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

SWITCH语句

也和其他语言一样 条件等于相应的值时 执行语句

语法：

1
2
3
4
5
6
7
8
9
10
11
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

还有一个小点就是case(条件)这里条件中的等号是强等于 不仅比较值也要比较类型

default

也就是当以上条件都不执行时，就执行该default下的语句

JS类型转换

constructor属性

constructor 属性返回所有 JavaScript 变量的构造函数。

1
2
3
4
5
6
7
"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

类型转换比如:

1
2
3
var a=123
String(a) 
a就被转为字符串类型了

For循环

语法：

1
2
3
4
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

eg：

1
2
3
4
for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

while循环

语法：

1
2
3
4
while (条件)
{
    需要执行的代码
}

do-while循环

该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法：

1
2
3
4
5
do
{
    需要执行的代码
}
while (条件);

break和continue语句

简单说就是break跳出整个循环

continue跳出此次循环然后继续下个循环

js错误-throw、try、catch

1
2
3
4
try 语句测试代码块的错误
catch 语句处理错误
throw 语句创建自定义错误
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行

语法：

1
2
3
4
5
6
7
try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

throw放在try下语句，那么能够控制程序流，并生成自定义的错误消息

JS声明提升

声明提升：函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。

函数及变量的声明都将被提升到函数的最顶部

变量可以在使用后声明，也就是变量可以先使用再声明

只有声明的变量会提升，初始化的不会

这里需要理解什么是声明 什么是初始化

1
2
3
var x; #这是声明
var y=10; #这是初始化
也就是说单纯定义变量是声明 定义并且赋值就是初始化了

JS严格模式

严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明。

为什么使用严格模式:

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

  • 消除代码运行的一些不安全之处，保证代码运行的安全；
  • 提高编译器效率，增加运行速度；
  • 为未来新版本的Javascript做好铺垫。

“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

另一方面，同样的代码，在”严格模式”中，可能会有不一样的运行结果

严格模式限制：

  • 不容许使用未声明的变量
  • 不容许删除变量或对象
  • 不容许删除函数
  • 不容许变量重名
  • 不容许使用八进制
  • 不容许使用转义字符
  • 不容许对只读属性赋值
  • 不容许对一个使用getter方法读取的属性进行赋值
  • 不容许删除一个不容许删除的属性
  • 变量名不能使用'eval，arguments'字符串
  • 不容许使用这种语句"use strict";with (Math){x = cos(2)};// 报错
  • 由于一些安全原因，在作用域 eval() 创建的变量不能被调用
  • 禁止this关键字指向全局对象

JSON数据

  • JSON数据的本质是一个有规则、可以解析的字符串
  • JSON数据在js中就是一个对象

JSON格式：

  • {}:定义JSON对象
  • []：定义JSON数据
1
2
3
4
5
6
7
8
9
var json01 = { "name":"三国演义", "price":55.55, "version":"三国演义version01" };
var json02 = { "name":"红楼梦", "price":99.99, "version":"红楼梦version01" };
var json03 = { "name":"西游记", "price":66.65, "version":"西游记version01" };
var jsonList=[
        json01,
        json02,
        json03,
        {"name":"水浒传","price":0.00,"version":"null"}
    ];

JSON对象和JSON字符串互转

  • JSON.stringify( )：JSON对象转JSON字符串
  • JSON.parse( )：JSON字符串转JSON对象
1
2
3
4
5
6
var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);
console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string
var json=JSON.parse(jsonStr);
console.log(typeof json); // object

向未声明的 JavaScript 变量分配值

如果把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

1
carname="Volvo";

img

img

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

常见HTML事件列表：

img

DOM文档对象模型

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

  • document对象：代表整个页面的对象，可以直接使用的内置对象
  • DOM的作用是使用JS代码操作HTML页面的标签和内容

DOM树

img

均学习于：

https://www.runoob.com/js/js-htmldom.html

https://www.kuangstudy.com/bbs/1571499157607657474

https://www.kuangstudy.com/bbs/1679494100476669953

本文最后更新于 天前，文中所描述的信息可能已发生改变

本文发表于 

知识学习