JavaScript基础

---

前言

作为学习前端的小伙伴们，精通JavaScript是学习前端三件套中必不可少的，本文介绍JS入门的一些基础知识

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、JavaScript是什么？

• JavaScript简称JS，是一种解释性，单线程的编程语言，是前端最核心的一种语言。JavaScript的出现是设计者们为了改善网页的用户体验。
• JavaScript=ECMAScript+文档对象模型（Document Object Model)+浏览对象模型(Browser Object Model)
• ECMAScript为JavaScript的核心，最标准的最基础的就是es3.0，现在已发布了ECMAScript的第六版。目前支持的主流浏览器有IE，Chrome，Firefox，Opera，Safari。
• DOM通过JavaScript操作HTML，各大浏览器规则基本相同。
• BOM通过JavaScript操作浏览器，各大浏览器都不兼容，不过开发比例小。
• 要在浏览器中使用JavaScript，那么JavaScript就必须听从BOM的调遣，遵守当前浏览器的规则。JavaScript可以进行增删改查，来进行一些绚丽的动作和完成一些逻辑上的功能。

二、JS引入方式

1.行内式

代码如下（示例）：

<button type="button" onclick="alert('button弹出')">点击此按钮</button>

直接在body里加入即可

2.内嵌式

代码如下（示例）：

<script type="text/javascript">
	alert("2022年");// alert是弹出警告
	//此处可编写js代码
</script>

3.外链式

代码如下（示例）：

<script type="text/javascript" src="js/test.js">
	//注意：此处不能写js代码
</script>

此方式需外部引入js文件

三、js输出方式

1.弹框输出

	alert("弹框警告");

2.控制台输出

console.log("控制台日志输出");//一般用于代码调试
//下面几种了解即可：
		console.error("控制台错误输出");
		console.info("控制台信息输出");
		console.warn("控制台警告提示");
		console.log(`If you want something done right, do it yourself.`);
		//反斜杠支持换行输出

3.文档输出

document.write("文档输出");
document.write("<h2 style='color: red;'>文档输出2</h2>");
//支持编写HTML代码，注意属性名要用单引号

四、变量

1.变量声明

var a;
var b,c;//先声明再赋值
a=6;
b=7;
	document.write("a=",a);// 变量输出不要加"";
	document.write("c=",c);	// 输出undefined,因为c只声明未赋值
	document.write(d);// 报错d is not defined，变量d没有声明

2.变量初始化

var m=26;//初始化：变量声明并赋值
var d,e=27;//注意：d未赋值，e是27
var d=68,e=27;//这样写是d，e都赋值

3.变量数据类型

1. 基本数据类型：number（数值），string（字符串），boolean（布尔true/false），null(空值)，undefined（未定义）
2. 引用类型/复合数据类型：数组（Array），函数（function），object（对象）
3. 变量命名规则：由字母、数字、_、$组成，不以数字开头，不能是关键字或保留字

	var a=1;
	var str="16";
	var str2="true";
	var bool=true;
	var b=null;
	var d;
		// typeof()判断数据类型
			console.log(typeof(a));//number
			console.log(typeof(str));//string
			console.log(typeof(str2));//string
			console.log(typeof(bool));//boolean
			console.log(typeof(b));//object
			console.log(typeof(d));//undefined
			console.log(typeof(NaN));//number

3.JS数据类型转换

1. 其他类型—>字符串

   	var a=true;
   		console.log(a+1);//2
   	a=a+"12";//第一种：加号拼接字符串
   		console.log(a);//true12
   		b=String(b);//第二种：用String()函数转换
   

2. 其他类型—>数值

       var str1="hello";
   	var str="11.5";
   	//*1
   	console.log(str*1);
   	console.log(typeof(str*1));
   	// Number()
   	console.log(Number(str));
   	console.log(typeof(Number(str)));
   	//parseInt(),转换为整型，向下取整
   	console.log(parseInt(str));
   	//parseFloat(),转换为浮点型
   	console.log(parseFloat(str));
   

3. 其他类型—>boolean

   	console.log(!!1); //true
   	console.log(!!"hello"); //true
   	console.log(!!0); //false
   	console.log(!!""); //false
   	console.log(!!3); //true
   

五、运算符

1.算术运算符

四则运算符：+ - * / ，%(余) ++ – +=

		var a=25;
		var b=10;
		var c=a+b;
		console.log(c);//35
		console.log(a%b);//结果为5，a%b：a/b的余数 25/10=2...5
		console.log(c%=5);//0
		//c=c%10;==>c%=10
		//c=c-10;==>c-=10
		//i++，++i，单独使用没有区别
		//i++,++i,不单独使用，就近原则取值
		var i=10;
		i++;
		console.log(i);//11
		var j=++i;//上面i=11，i要先进行加1再赋值给j
		console.log(j);//12

2.比较运算符

比较运算符：>,>=,<,<=,== ===,!=
比较的结果：boolean值

		console.log(3<=3); //true
		console.log(3>=4); //false
		console.log(2!=2); //false
		console.log(null==0);//false
		console.log(null!=0);//true
		console.log(true==1);//true
		console.log(true!=1);//false
		console.log(3==3);//true
		console.log(3===3);//true
		//==:只比较结果
		console.log(true==1); //true
		console.log(false==0); //true
		//===:同时比较结果和类型
		console.log(true===1); //false
		console.log("1"==1); //true
		console.log("1"===1); //false
		console.log(undefined==null); //true
		console.log(undefined===null); //false

3.逻辑运算符

&& || !，结果为boolean值

		//&&(与):全真为真，一假即假
		console.log(true&&true);//true
		console.log(true&&false);//false
		console.log(false&&false);//false
		//||(或):一真即真，全假为假
		console.log(true||true);
		console.log(true||false);
		console.log(false||false);
		//!(非)：取反
		console.log(!true);//false
		console.log(!false);//true
		console.log(!3);//false

------运算符优先级:
! > 算术运算符 > 比较运算符 > && > || > =(赋值运算符)
下面的案例 大家可以自行试一下（遵循运算符优先级）：

		console.log(!(3+4*5)>6-8&&4+6>2*3==true); //true
		console.log(false>-2&&10>6==true); //true
		console.log(!3+4*5>6-8&&4+6<2*3); //false

end

以上是JS最基础的知识，大家可以多加练习，后期会持续更新哈~~