跟班学习JavaScript第一天——运算符、数据类型、ECMAScript

最新推荐文章于 2023-03-03 11:16:32 发布

h_jQuery

最新推荐文章于 2023-03-03 11:16:32 发布

阅读量109

点赞数

分类专栏： javascript 学习笔记文章标签： javascript js java dom ecmascript

本文链接：https://blog.csdn.net/h_jQuery/article/details/115132252

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

学习

67 篇文章 0 订阅

订阅专栏

笔记

49 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的基础知识，包括其作为弱类型编译语言的特点、ECMAScript核心、浏览器内核及其对JS解析的影响。讲解了如何在HTML中嵌入和调用JS，以及变量和常量的声明与使用。此外，还涉及到了数据类型转换、运算符、错误调试等内容，最后通过实例展示了飞机飞行时间的计算。

摘要由CSDN通过智能技术生成

1.js概述

js属于脚本语言，属于弱类型的编译性语言

JAVAScript=ECMAScript(es)+bom(browser object model)+dom(document object model)

3.ECMAScript基本核心部分

1)、js的编译环境：

1.自己安装js的解释器 node.js

2.浏览器内嵌的js(引擎)/解析器

注意：不同的浏览器的内核是不同，所以不同的内核的js解析器的解析效果是不一样的。市面上常见的浏览器内核有五大种：谷歌，欧朋，火狐，苹果，IE

2)、js的基本使用

1.在cmd控制台输出js语句执行

2.在浏览器输出js语句使用

在页面的Console直接输出console.log(‘hi,你好啊’)

这种方式只能本机调试，无法给用户使用

3.嵌套在html页面中，通过浏览器解析页面的同时来解析js语句（必要掌握）

3.1嵌套在html标签中使用

<button type="button" onclick="console.log('我被点击了')">点我</button>

3.2将js代码写入到html页面的任意位置都可以，但是要么写在head里面，要么写在head和body之间，尽量不要写在body里面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			console.log('点我')
		</script>
	</head>
	<!-- <script type="text/javascript">
		console.log('点我')
	</script> -->
	<body>
		<!-- <button type="button" onclick="console.log('我被点击了')">点我</button> -->
	</body>
</html>

3.3将js代码写入到一个外部文件，必须以**.js**为后缀的，然后再需要使用的页面中引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/t01.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
</html>

js代码

alert('你好啊')

创建一个base.js文件，要求通过该js文件在引入的html页面中生成一个button按钮，并且让该按钮可以点击，点击的时候会在控制台输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- <button type="button" onclick="console.log('你好啊')" >点击</button> -->
	</body>
</html>

// 方式一
// document.write("<button onclick="+"console.log('你好')"+">点击</button>");
// 方式二
// document.write("<button id='btn'>点击</button>")
// document.getElementById('btn').onclick=function() {
// 	console.log('你好啊');
// }
// 方式三
document.write("<button onclick='aa()'>点击</button>")
var aa = function() {
	console.log('你好')
}

不能有三重引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var c = function() {
				document.write("<p style='color: #008B8B;'>点击我</p>")
			}
		</script>
	</head>
	<body>
		<div onclick="c()">
			点我有惊喜
		</div>
	</body>
</html>

浏览器内的引擎

内容排版引擎：解析html和css

js引擎：解析js

3.3js的变量和常量

变量是在程序中的一段内存地址，而且长度是不固定的，存储的数据可以随时改变的

在js中变量的声明如下：

1.声明变量：**var 变量名; ** //var num;

2.给变量赋值：变量名称=值; //num=10;

3.声明变量同时赋值（常用）：var 变量名称=值; //var num=10;

在js中变量名的申明事项：

1.变量名必须是字母，数字，下划线以及$符号组成。

2.变量名称不能以数字开头

3.变量名称区分大小写

4.变量名称建议使用驼峰命名法:DayDemo

小驼峰命名法：userName

5.变量名称尽量做到见名知意

在js中变量的值有哪些？

js中五种基本数据类型

1.string 字符串型 var a=“aa”;

2.number 数字类型 var a=10;

3.boolean 布尔型 var a =true;

4.unll 空 var a= null;

5.undefined 未定义类型 var a;

练习：申明三个变量，用来描述某个人的姓名，性别、年龄，再申明一个变量输出，在控制台输出

格式：姓名：xxx 性别：xxx 年龄：xx

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			
			/**
			 * 注解：首先声明三个变量：姓名，年龄，性别
			 **/
			 var uname ="张三";
			 var uage = 18;
			 var sex = "女";
			 var s ="姓名："+uname+"性别："+sex+"年龄："+uage;
			 uage = "wo";
			 console.log(s);
			 uname = true;
			 console.log(typeof(uage) );		//boolean
		</script>
	</head>
	<body>
		
	</body>
</html>

获取变量的类型：typeof 变量名或typeof(变量名)

数据类型之间的转换

1.将其他类型转换成String：变量名.toString()

null和undefined没有tostring()方法。

 // 数字类型转字符型
			 var age = 20;
			 console.log(typeof age);
			 var str = age.toString();
			 console.log(typeof str);
			 // boolean类型转string
			 var flag = true;
			 console.log(typeof flag);
			 var ftr = flag.toString();
			 console.log(ftr);

2.将其他类型转换成数字类型:Number(变量名)

NaN:非数字,通常会在类型转换中出现,是指将其他类型转化成数字类型的过程中,转化的结果不是一个数字,就会提示NaN

string转Number

1.如果string的值是数字的话，会将左边的0去掉直到出现非零数开始后面的数计算

2.如果string的值出现了字母或者是其他非数字的标点符号，那么转换的接货为NaN

var s = '2020';
			console.log(typeof s);
			s=Number(s);
			console.log(typeof s);

boolean转Number

如果是true，转成Number则为1,；如果是false转成Number则为0

3.其他类型转为布尔类型：Boolean(变量名)

3.1null转成boolean是false

3.2undefined转成boolean也是false

3.3数字类型Number转成Boolean的话，非零数返回true，零（0）返回false

3.4空字符串转成Boolean，返回false，其他非空字符串返回true

数据类型转换练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 其他类型转成字符串型
			var age = 20;
			age = age.toString(age);
			console.log(typeof age)			//String
			var flag = true;
			flag = flag.toString(flag);		//string
			console.log(typeof flag);
			// 其他类型转成数字型Number
			var num = '20';
			console.log(typeof num);			//string
			num = Number(num);
			console.log(typeof num);		//Number
			console.log(num);			//20
			var fla = true;
			fla = Number(fla);
			console.log(fla);			//1,true为1
			fla = false;
			fla= Number(fla);
			console.log(fla);			//0,false为0
			var s;			//undefined
			s = Number(s);	
			console.log(s);			//NaN,不是数字型
			var n = null;
			n = Number(n);			
			console.log(n);			//0
			// 其他类型转成boolean
			var str = '你好';
			str = Boolean(str);
			console.log(str);			//true
			str= '';
			str = Boolean(str);
			console.log(str);			//false
			str = null;
			str = Boolean(str);
			console.log(str);			//false
			var str;
			str = Boolean(str);
			console.log(str);			//false
			var num= 0;
			num= Boolean(num);
			console.log(num)		//false
			num= 10;
			num= Boolean(num);
			console.log(num)			//true
			num= -10;
			num= Boolean(num);
			console.log(num)			//true
		</script>
	</head>
	<body>
	</body>
</html>

在js中常量的声明：

const 常量名称=常量值;

注意事项：常量名称建议全部大写，一样建议见名知意

报错信息：Assignment to constant variable——常量已经初始化，不可再赋值

运算符

算术运算符：

<script type="text/javascript">
			var math_c = 80;
			var chinese_c = 95;
			var english_c = 85;
			var average_c = (math_c+chinese_c+english_c)/3;
			console.log(average_c);
			// 任何数取余10得到的结果0-9
			// 任何数取余100得到的结果0-99
			var num=1985;
			var num2=10;
			var y = num%num2;
			console.log(y);
		</script>

比较运算符：

<script type="text/javascript">
			// ==和===的区别
			var uname = "20";
			var age =20;
			// ==比较的是变量的数值，不会比较变量的类型
			console.log(uname==age);		//true
			// ===既比较变量的数值，同时也会比较变量的类型，必须要数值相同，类型一致，否则false
			console.log(uname===age);			//false
			var num1=10;
			var num2='10';
			// !=比较数值不相等，
			console.log(num1!=num2);			//false
			// !==比较数值和类型都不相等，
			console.log(num1!==num2);			//true
			
		</script>

赋值运算符：把等号右边的值赋给左边

x+=y：把两者之和赋给前者

字符串运算符：

<script type="text/javascript">
			// 字符串运算符
			// 任意类型的数据和字符串相加，得到的结果都是字符串
			var uname = "李四";
			var age = 20;
			var str = uname+age;
			console.log(typeof str);		//string
			console.log(str);			//李四20
			str+=age;		//李四2020
		</script>

练习：珠穆朗玛峰高8848米，收到气压影响，普通飞机每小时飞行高度为200米，超音速飞机每小时飞行高度为350,米，战斗机每小时飞行高度为500米，求普通飞机，超音速飞机，战斗机分别花费多少小时可以飞过珠穆朗玛峰？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/test02.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
</html>

// 因为是气压原因。所以三类飞机的速度下降了，说明飞机的速度是一个变量用var
// 普通飞机
var o = 200;
// 超音速飞机
var s = 350;
// 战斗机
var f = 500;
// 珠穆朗玛峰高度的高度不会变，所以是一个常量，使用const
// 珠穆朗玛峰高度
const H = 8848;

// 普通飞机需要的时间
var ro =H/o;
// 超音速飞机需要的时间
var ss = H/s;
// 战斗机需要的时间
var sf =H/f;

console.log('普通飞机飞过珠穆朗玛峰需要：'+ro+'\n超音速飞过珠穆朗玛峰需要：'+ss+'\n战斗机飞过珠穆朗玛峰需要'+sf);

条件运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 条件运算符
			// 表达式1 and 表达式2 ? "值1" : "值2"
			var runhight = 5000;
			var run = 500;
			var time = (runhight / run) > 10 && run < 100 ? "超时了" : "正常时间内";
			console.log(time);
		</script>
	</head>
	<body>
	</body>
</html>

逻辑运算符

给定 x=6 以及 y=3

运算符	描述	例子
&&	and，和	(x < 10 && y > 1) 为 true
\|\|	or，或	(x>=5 \|\| y==5) 为 false
!	not，非	!(x==y) 为 true

&&和&的区别：

&&如果判断表达式1为false之后，直接返回false不会判断表达式2；

&如果表达式1不成立，还是会继续去判断表达式2

交换两个变量的方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>位运算</title>
		<script type="text/javascript">
			// 要求不使用第三方变量，完成两个变量之间的互换效果
			//任何数^(亦或)一个数两次得到的是它本身
			// console.log(5^3^3);			//5
			// var x = 10;
			// var y = 20;
			// x = x^y;		//x=10^20
			// y=x^y;			//b=10^20^20=10	
			// x=x^y;			//x=10^20^10=20
			// console.log('x:'+x+'\ny:'+y);
			var num1 = 30;
			var num2 = 50;
			num1=num1^num2;
			num2=num1^num2;
			num1=num1^num2;
			console.log('num1:'+num1+'\nnum2:'+num2);
		</script>
	</head>
	<body>
	</body>
</html>

亦或：只有全1才是1，只要有0就是0；任何一个数亦或两次得到的是它本身

js错误调试：

在js中，如果出现错误，js会终止该错误的语句块，会继续执行其他语句块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- script标签是一个语句块 -->
		<script type="text/javascript">
			console.log("这是第一语句块的第一句");
			console.log("这是第一语句块的第二句");
			console.log1("这是第一语句块的第三句");		//出错，第三句和第四句不出现，但是第二个语句块没有受到影响
			console.log("这是第一语句块的第四句");
		</script>
		<script type="text/javascript">
			console.log("这是第二语句块的第一句");
			console.log("这是第二语句块的第二句");
			console.log("这是第二语句块的第三句");
			console.log("这是第二语句块的第四句");
		</script>
	</head>
	<body>
	</body>
</html>

可在控制台的sources查看错误