js学习笔记

最新推荐文章于 2025-07-17 15:25:06 发布

原创

最新推荐文章于 2025-07-17 15:25:06 发布 · 1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记

0、javascript的历史的演变过程

1995年：Netscape 公司的 Brendan Eich 创造了 JavaScript，当时它被称为 LiveScript。作为 Netscape Navigator 浏览器的一部分，它被设计为用于增强网页的交互性。
1996年：Netscape 将 JavaScript 提交给 ECMA（European Computer Manufacturers Association）进行标准化。ECMA 将其命名为 ECMAScript，并发布了第一个 ECMAScript 规范（ECMAScript 1）。
1997年：ECMAScript 2 规范发布，对 ECMAScript 1 进行了一些修订和修改。
1999年：ECMAScript 3 规范发布，引入了一些新特性，如正则表达式、try-catch 异常处理等。ECMAScript 3 版本被广泛支持，并成为 JavaScript 的主要版本。
2000年：Microsoft 推出了 Internet Explorer 5.5，其中包含了 JScript 5.5，它对 ECMAScript 3 进行了一些自有的扩展和改进。
2005年：Ajax（Asynchronous JavaScript and XML）的概念被引入，使得网页可以异步请求数据并动态更新内容，提升了用户体验。
2009年：ECMAScript 5 规范发布，引入了一些重要的语言特性，如严格模式、JSON 对象、Array 新方法等。这个版本进一步巩固了 JavaScript 作为一种强大的脚本语言的地位。
2015年：ECMAScript 6（ES6 或 ECMAScript 2015）发布，引入了许多新的语言特性，如箭头函数、模块化、类等。这个版本标志着 JavaScript 的重大升级，并在许多现代浏览器中得到支持。
之后的版本：自 ES6 发布以来，ECMAScript 每年发布一次新版本，增加了更多的新特性和改进。例如，ES7（2016年）、ES8（2017年）和 ES9（2018年）依次引入了异步函数、展开操作符、异步迭代器等功能。

1、JS简介

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

2、组成部分

组成部分作用 ECMA Script 构成了JS核心的语法基础 BOM Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 DOM Document Obiect Model 文档对象模型，用来操作网页中的元素（1）核心（ECMAScript）：描述了该语言的语法和基本对象。（2）DOM：Document Object Model（文档对象模型）：描述处理网页内容的方法和接口。

html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（3）BOM：Brower Object Model（浏览器对象模型与浏览器进行交互的方法和接口。

例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

3、特点

（1）开发工具简单，记事本即可（2）无需编译，直接由数据 JS引擎负责执行（3）弱类型语言由数据来决定数据类型（4）面向对象

4、作用

（1）嵌入动态文本与HTML页面（2）对浏览器时间做出相应（3）读写HTML元素（4）在数据被提交到服务器之前验证数据（5）检测访客的浏览器信息（6）控制cookies，包括创建和修改等。（7）基于node.js技术进行服务器端编程。

5、JS三种添加方式

（1）行内式

//在游览器上弹出的提示框（在页面上显示'行内js'）（一般不推荐使用（代码多会使网页臃肿））
<button onclick="alert('行内js')">单击试试</button>

（2）内嵌式

<script>
     //在游览器的页面上弹出的提示框（显示'内嵌js'）
alert('内嵌js');
</script>

（3）外链式

 //使用script标签src属性引入指定的代码书写在一个.js文件中，
<script src="js文件路径地址">这里不能写js语句</script>

6、 script 标签可以放置的位置

在 <head> 标签内部：

<head>
  <script type="text/javascript">
    // 这里可以放置你的 JavaScript 代码
  </script>
</head>

放置在 <head> 标签内部的脚本会在浏览器加载页面时执行。这通常用于在页面加载之前定义一些全局变量、函数或引入外部 JavaScript 文件。

在 <body> 标签的末尾：

<body>
  <script type="text/javascript">
    // 这里可以放置你的 JavaScript 代码
  </script>
</body>

将脚本放置在 <body> 标签的末尾可以确保页面内容先加载，然后再执行脚本。这样可以避免因脚本执行时间过长而导致页面加载缓慢的问题。

3、可以将 <script> 标签放在其他位置

但上述两种位置是最常见和推荐的用法。选择脚本放置的位置取决于你的需求和页面的结构。如果需要在页面加载前执行脚本，将其放置在 <head> 标签内；如果需要在页面加载后执行脚本，将其放置在 <body> 标签的末尾。

7、变量

定义：就是内存中的一段存储空间

1、声明变量：

<script>
var 变量名称 = 存储的数据;       (variable 变量)
//如下所示
     //定义整数变量
     var num1 = 100;  //正数
    var num2 = -100;  //负数
    //定义浮点数类型
    var num3 = 100.234 //
    var num4 = -100.234 
    //相当于2乘以10的五次方
    var num5 = 2e5 
    //0X开头表示十六进制的100数字
     var num6 =0x100
    //0o开头表示八进制的100数字
     var num7 = 0o100
    //0b开头表示二进制的100数字
    var num8 = 0b100 
    //字符串类型
    var s1 = 'hello World';
    var s2 = '来一口红酒'
    //布尔类型
    var b1 = true //真
    var b2 = false //假
    //空类型
    var k1 = null; //表示有值，有一个空值
    var k2 = undefined //表示没有值
    
    alert(num);      //在页面显示框中弹出变量值
    console.log(num) //把内容输出在游览器的控制台上
    document.write(num) //把内容直接输出在页面上
</script>

2、变量命名规范

1.只能由字母、数字、_（下划线）、$（美元符号）组成。

2.不能以数字开头。

3.命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

3、js是弱类型语言，不重视类型的定义，js会根据为变量赋值的情况自定判断该变量是何种类型

8、数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）字符串：string（凡是引号包括起来的内容全部都是字符串）布尔：boolean（true、false）对象类型：object（声明对象未赋值取值null）未定义型：undefined

<script>
    //定义整型类型
    var n1 = 100;/
    var result1 = typeof n1; //typeof来检测是什么类型
    console.log(result)  //就会在控制台出现number（整数）数值类型
    //定义字符串类型
    var v2 = '江河湖海';
    var result2 = typeof n2
    console.log(retsult2)//就会在控制台出现string（字符串）数值类型
    //定义布尔类型
    var v3 =true;
    var result3 = typeof n3;
    console.log(result3);//就会在控制台出现boolean（布尔）数值类型
    //定义空类型
    var k1；
    var tesult4 = typeof n4;
    console.log (tesult4);//就会在控制台出现undefined(没有值)数值类型    
    var k2 = null;
    var tesult5 = typeof n5;
    console.log(tesult5);//就会在控制台出现object(空值)数值类型
</script>

9、逗号运算符

使用逗号可以在一条语句中执行多次操作

<script>
var age1=16,age2=17,age3=18;
</script>

使用逗号运算符分隔的语句会从左到右依次执行

10、算术运算符

加法运算（+）

（1）当符号两边都是数字或者布尔的时候，会进行数学运算；

（2）但只要任意一边是字符串的时候，就会进行字符串拼接。

减法运算（-）、加法运算（*）、除法运算（/）、取余运算（%）：

只能数学运算。

<script>
    
alert(1234 / 1000 * 1000); // 1234
  
var s = "12";
 s -= 10;
alert(s);  //字符串可以被解析为数字，这里"12"会被解析为12，然后再减去10得到结果2 
 
var s = "aa";
s -= 10;
alert(s);  // 但由于字符串"aa"不能解析为数字，所以操作失败，结果为NaN（Not a Number）。
 
var s = "12";
s += 10;
alert(s);       // 10转换为字符串并将其附加到变量s的末尾，得到字符串"1210"。 
</script>

注意

js中的小数和整数都是number类型，不存在整数除以整数还是整数的结论。
字符串和其他的数据使用+号运算，会连接成一个新的字符串。
字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number