JavaScript基础

最新推荐文章于 2025-02-18 17:52:54 发布

原创最新推荐文章于 2025-02-18 17:52:54 发布 · 1k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #开发语言 #ecmascript

JavaScript认知

JavaScript发展历史(JS)

简称JS

1.Netscape(网景) 公司的这种浏览器脚本语言，最初名字叫做 Mocha

2.1995年9月改为 LiveScript

3.1995年12月，Netscape 公司与 Sun 公司（Java 语言的发明者和所有者）达成协议，后者允许将这种语言叫做 JavaScript

4.JavaScript 是解释性语言，运行时由解释器直接执行，专门用来操作网页。

5.  (1)借鉴C语言的基本语法; (2)借鉴Java语言的数据类型和内存管理; (3)借鉴Scheme语言，将函数提升到"第一等公民"
(first class)的地位; (4)借鉴Self语言，使用基于原型(prototype)的继承机制。
6.1996年3月，Navigator 2.0 浏览器正式内置了 JavaScript 脚本语言。

JavaScript 版本

1997年7月，ECMAScript 1.0发布
1998年6月，ECMAScript 2.0版发布
1999年12月，ECMAScript 3.0版发布，成为 JavaScript 的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0版草案发布（废除）
2009年12月，ECMAScript 5.0版正式发布
2013年3月，ECMAScript 6 草案
2015年6月，ECMAScript 6 正式发布

JavaScript 是什么

JavaScript： 基于对象和事件驱动，运行在浏览器客户端的脚本语言。
javaScript： 基于浏览器的脚本语言

 ✔ js的运行环境： 运行在浏览器端的一种脚本语言

JavaScript 能干什么

☞ PC端网站开发(https://www.taobao.com/)
☞ 移动端WebApp开发(https://main.m.taobao.com/?sprefer=sypc00)
☞ 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
☞ 配合H5实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
☞ 配合electron.js跨平台桌面开发(vscode)
☞ js可以实现人工智能  【面部识别】

JavaScript 组成

在这里插入图片描述

☞  ECMAScript 是JavaScript的语法规范，JavaScript是ECMAScript的实现
☞  BOM (Browser Object Model） 
      1.浏览器对象模型
        	通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
      2.是浏览器针对javascript的扩展
         	这些扩展在非浏览器环境中是不能使用的，比如node.js中就不能使用bom。
☞  DOM (Document Object Model) 文档对象模型
		1.是一个w3c的标准，这个标准定义了如何操作html,提供一套操作页面元素的API(函数方法)
		2.DOM可以把HTML看做是文档树，DOM提供的API可以对树上的节点进行操作 

总结：  JavaScript[JS]组成:ECMAscript，DOM，BOM
## JavaScript 书写位置

### 外联式写法[推荐写法]

```javascript
 ☞  在外部定义js文件，当前html文件里面引入
 	1. 新建js文件
    2. 通过script标签引用到当前页面中
    <script type="text/javascript" src="test.js"></script>

注意：
	1. 不能将代码写到外联式标签中。
    2. 一个网页中可以同时调用多个外部js文件
     <script type="text/javascript" src="test.js"></script>
	<script type="text/javascript" src="test.js"></script>
	<script type="text/javascript" src="test.js"></script>
	<script type="text/javascript" src="test.js"></script>

内嵌式写法(不推荐)

 ☞  在html页面内部设置
    <script type="text/javascript">
		 JavaScript[js] 代码
	</script>

  注意：
  	  该标签可以放到head标签中或者body标签中

行内式写法（不推荐）

☞  将js代码写到标签内部
<div onclick="js代码"></div>

注意：
	 onclick 是一个点击事件： 当点击div的时候，会触发该事件，执行该事件中的代码

JavaScript 中输入消息方式

 ☞ 弹框 alert('弹框内容')  
 ☞ 确认框 confirm('确定不听课吗?') 
 ☞ 输入框 prompt('请输入您的姓名')
 ☞ 网页写入 document.write('<h1>这是一个大大的标题</h1>');
 ☞ 控制台输出 console.log('这是控制台中输出的内容');

总结：
	 1. 在js中如果希望输出一个具体的文本信息，必须带引号
     2. 在使用document.write();的时候，可以在方法内输出html标签，加引号。

思考? 如果我们使用prompt()方法让用户输入了数据，我们又想要把用户输入的数据保存起来，怎么办呢？
在JavaScript中有一种专门用于保存数据的语法:变量

JavaScript 变量（重点）

 ☞ 变量概念: 是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
 ☞ 变量作用：变量指的是在程序中保存数据的一个容器  
 ☞ 语法： var 变量名 = 数据;

定义变量及赋值

 ☞ 定义变量,未赋值
    var 变量名; 默认值是undefined   
 ☞ 定义变量,且赋值
   	var 变量名 = 数据;
 ☞ 总结:
    1. 一个变量一次只能保存一个值；
    2. 以最后一次赋值为准
    3. JS变量区分大小写

变量命名规范

☞ 规则    必须遵守的，不遵守的话 JS引擎 发现并报错 
    1. 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge, num01, _name
    2. 区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量
    3. 不能 以数字开头
    4. 不能 是关键字、保留字 和 代码符号，例如：var、for、while、&, class
    5. 不能出现空格
        
☞ 规范  建议遵守的，不遵守的话 JS引擎 也不会报错
	1. 变量名必须有意义
    2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

JS关键字

在这里插入图片描述

JS保留字

在这里插入图片描述

注释

单行注释

用来注释一行代码,增强代码可读性

// 这是一个变量
var name = 'hm';

多行注释

用来注释单行或多行代码,增强代码可读性

/**
   这是一个多行代码的注释
   定义name和age变量
**/
var name ="张三"
var age = 20

JavaScript 数据类型（重点）

☞ 数据类型：数据类型指的是变量的数据类型
☞ 数据类型：简单数据类型，复杂数据类型

简单数据类型

☞ 五种[es5]:  Number  String  Boolean Undefined  Null

数值类型(number)

☞ 凡是数字都属于该类型【整数，小数，负数】

☞ 只要变量的值是一个具体的数字，那么当前变量的数据类型就是数值类型

☞ number类型表示的数字大小：
	  最大值是±1.7976931348623157乘以10的308次方    Number.MAX_VALUE
  	  最小值是±5 乘以10的-324次方				  Number.MIN_VALUE

☞ 数值类型表示方式：（了解）
	 ✔ 十进制表示
 	var  n1=10,n2=9, n3=100;

	 ✔ 十六进制表示
 	以 0x开头 0到9之间的数字，a(A)-f(F)之间字母构成。 a-f对应的数字是10-15
	[0,1,2,3,4,5,6,7,8,9，a,b,c,d,e,f]

		var num = 0xA;

	 ✔ 八进制表示
 	八进制直接以数字0开始，有0-7之间的数字组成。[0,1,2,3,4,5,6,7]
    var num1 = 07;   
    var num2 = 06;  
    var num3 = 05;   

☞ 备注：
	 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。

字符串类型(string)

☞ 字符串可以是引号中的任意文本。可以使用单引号或双引号
	如果数据是字母，符号，汉字，这些都是字符串类型，字符串类型的就要加引号
☞ 在js中一般写字符串类型的变量时候，推荐使用单引号。
	字母，汉字，符号作为数据存在必须要用引号包含【var num = "abcdefgabcd""aaaaaaaaa";】
不管是什么数据如果用引号包含就变成字符串类型

☞ 注意：
  	 1. 单引号和双引号之间的嵌套
  	例如： 输出    我是"高帅富"程序猿;  
    
     2. 转义字符【\】
     \n        换行
     \\		斜杠
     \'		单引号
    \"		双引号
    \r 	   回车符
    例如：
    var strMsg = 'I'm the GOD of my world ~!';   //输出：I'm the GOD of my world ~!
    var strMsg2 = "I"m the GOD of my world ~!";  //输出：I"m the GOD of my world ~!
    var strMsg3 = '反斜杠是这个 \\，神奇！';  //输出：反斜杠是这个 \，神奇！

布尔类型(boolean)(bool)

☞ true（真）  和 false （假）

null空类型，undefined类型（了解）

//如果一个变量没有赋值，该变量的默认是undefined
 var n1;
//如果一个变量的值是undefined，那么该变量的数据类型就是undefined类型

复杂数据类型（目前不讲）

☞ Object 对象,Array 数组,Function 函数

数据类型判断

 ☞ 使用  typeof 变量  可以得到对应变量的数据类型
 ☞ 例如：
	   var n1 = 123;
		//获取n1的数据类型
		console.log(typeof n1);
		var n2 = '123';
		console.log(typeof n2);
		var n3 = true;
		console.log(typeof n3);

字面量

在源代码中一个固定值的表示法。【通过看具体的值，就能够知道数据类型】

数值字面量：8, 9, 10

var num = 2;var num2 = 3;

字符串字面量：'黑马程序员', "大前端"
var num = "123";var str = 'wahaha';

布尔字面量：true，false
var n = true; var m = fasle;

数据类型转换

转数值类型【Number，parseInt，parseFloat】

 ☞Number(变量)：
  	 总结：
     	  1. 可以通过该方法将数据类型转换为数值类型
          2. 在转换的过程中可以将原来的值保留，遇到小数直接保留下来，不会舍去
          3. 如果变量无法转换为数值类型，那么返回的结果是NaN； 对应的数据类型依然是数值类
          4. 如果将布尔类型转换为数值类型，true 转化后的结果是 1  false 转化后的结果是0
   NaN：not a number【number类型】
          
  ☞parseInt(变量)取整
  	var num1 = parseInt("12.3abc");   // 返回12，如果第一个字符是数字会解析直到遇到非数字结束
    var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
    备注：
        1  只会保留整数部分，通过该方式进行数据类型转换后得到就是一个整数
        2. 如果一个变量中的值无法转换为具体数字，那么返回的结果是一个 NaN 的值
        3. NaN (not  a  number)   ----NaN对应的数据类型是数值类型
        4. 通过该方法可以将其他数据类型转为数值类型
        
  ☞parseFloat(变量)取浮点
	总结：
    	 1. 通过该方法可以将其他数据类型转换为数值类型
         2. 在转换过程中，如果遇到小数，那么会直接将小数部分保留
         3. 如果转化不成功过，返回的结果NaN

转字符串类型【n.toString，String(n)】

 ☞  变量.toString()
 		var num = 5;
		console.log(num.toString());

 ☞  String(变量)

n.toString();
String(n)
	备注：
	String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

转布尔类型Boolea(n)

 ☞ Boolean(n) 
 备注：
	 0  |''(空字符串) | null | undefined | NaN  会转换成false  其它都会转换成 true

运算符

算数运算符

+ 运算
	总结：
       1. 如果是数值类型的变量相加，结果就是一个数值类型的结果
       2. 如果是一个字符串类型的变量相加，最后的结果就是字符串（加号起到的作用就是拼接字符串的功能）
   如果+两边都是数字就是数学上的加，如果两边有字符串出现就会执行字符串的连接
 -运算
	 总结：
     	1. 如果是数值类型的变量相减，结果就是一个数值类型的结果
        2. 如果是数字的字符串相减，得到的结果也是一个数值类型结果（发生了隐式类型转化）
            var n1 = '123';
            var n2 = '123';
    	3. 如果是非数字的字符串相减，得到的结果是NaN
 *运算
	乘法
	
 /运算
	   1.如果是数值类型的变量相除，结果就是一个数值类型的结果
       2. 如果是数字的字符串相除，得到的结果也是一个数值类型结果（发生了隐式类型转化）
       3. 如果是非数字的字符串相除，得到的结果是NaN
       4. 如果除数是0 ，得到的结果是 Infinity （无穷大的值）
	 
 %取余（获取余数）【求两个数相除的余数】

赋值运算符

复合赋值运算符
+= |  -=   |  *=  |  /=  |   %= 

var  a += b ;    =====> 等价于        a = a+b;
a %= 3;>>a = a % 3;
a -= 6;>>a = a - 6;

一元运算符

前置++ 和后置 ++

++自增1
用法：a++，++a
// 如果a++或者++a单独运算的话，都代表a自增1
// 但是：如果有其他操作（运算符）参与运算的时候，那么a++和++a，就有不同的含义
var b = a++;==>先把a赋值给b，a再自增(自加)
var b = ++a;==>先把a自增1，再赋值给b

前置-- 和后置–
```
减减和加加同理
自减1
```
测试

1.
    var    a;
    var    b=6;
    a=++b;
    请问：a的值是多少，b的值是多少。
    a=b++;
    请问：a的值是多少，b的值是多少。
2.
var a = 1; var b = ++a + ++a;   console.log(b);    
var a = 1; var b = a++ + ++a;   console.log(b);    
var a = 1; var b = a++ + a++;   console.log(b);    
var a = 1; var b = ++a + a++;   console.log(b);

比较运算符

1.   >  
    
2.   <
    
3.   >=     大于 或者 等于，只要有一个满足即可
    
4.   <=     小于 或者 等于，只要满足一个即可

5.  ==      只用来比较变量中的值是否相等，不考虑数据类型
    
6.  ===     用来判断值和数据类型必须同时相等
    
7.  !=	    判断值是否不相等，不考虑数据类型
 
8.  !==      判断值和数据类型
    
    
☞ 总结：
	  ✔ 通过比较运算符得到的结果只有两个结果，一个是正确的，一个是错误的
      ✔ 通过比较运算符得到的结果 只有 true[正确] 和 false[错误]

判断一个变量是不是NaN

NaN：not a number【特殊值】
isNaN：is not a number【判断】

	用来判断一个值是否是数字，如果是数字得到的false，如果不是数字得到的是true
	isNaN(n)：'aaa' is not a number
例如：
	var usrAge = 21;
    var isOk = isNaN(usrAge);
    console.log(isNum); // false

逻辑运算符

 1.   ||  或： 条件只要有一个满足即可
      总结：
      	  1. 如果条件中有一个结为true(代表有一个条件满足了)，那么通过或运算后最后的结果为true
          2. 如果条件中结果都不满足，那么通过或运算后结果为false
          如果有一个为true，结果为true，只有两个都为false，结果为false
     
 2.   &&  与（且）： 要求所有的条件都必须满足才可以
 	  总结：
	      1. 如果条件都为真（true），那么通过且运算后最后的结果也是真（true）
          2. 如果条件中自少有一个条件不满足（false），那么通过且运算后的结果为false
          两个条件都为true，结果true，有一个为false，结果为false
     
 3.   !	  非（取反） :

运算符优先级（了解）

优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 ! 先&&   后||
	7. 赋值运算符：=
 1：括号最高2，赋值运算符最后执行
 一旦有多个运算符参与运算的时候，脑子里必须知道运算符有优先级的问题存在

，结果为false

&& 与（且）：要求所有的条件都必须满足才可以
总结：
1. 如果条件都为真（true），那么通过且运算后最后的结果也是真（true）
2. 如果条件中自少有一个条件不满足（false），那么通过且运算后的结果为false
两个条件都为true，结果true，有一个为false，结果为false
! 非（取反） :



### 运算符优先级（了解）

```javascript
优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 ! 先&&   后||
	7. 赋值运算符：=
 1：括号最高2，赋值运算符最后执行
 一旦有多个运算符参与运算的时候，脑子里必须知道运算符有优先级的问题存在