首页 > 其他分享> 文章详细

JS笔记01

2021-06-15 16:59:41 阅读：81 来源： 互联网

标签：01 console log age 笔记 JS var alert 变量

初识Javascript

作用：

表单动态校验（密码强度检测）
网页特效
服务端开发（Node.js）
桌面程序（Electron）
App（Cordova）
控制硬件-物联网（Ruff）
游戏开发（Cocos2d-js）

HTML/CSS/JS的关系

HTML/CSS标记语言–描述类语言

HTML决定网页结构和内容（决定看到什么），相当于人的身体
CSS决定网页呈现给用户的模样（决定好不好看），相当于给人家穿衣服、化妆

JS脚本语言–编程类语言

实业业务逻辑和页面控制（决定功能），相当于人的各种动作

浏览器执行JS简介

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：也称为JS解释器。用来读取网页中的Javascript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行js代码，而是通过内置的JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会执行解释执行

JS的组成

ECMAScript：JavaScript语法
DOM：页面文档对象模型
BOM：浏览器对象模型

ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准

DOM—文档对象模型：文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM—浏览器对象模型：它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

js初体验

js有3种书写位置，分别为行内、内嵌和外部

注意在HTML中我们推荐使用双引号，js中我们推荐使用单引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 2.内嵌式的js -->
		<script>
			// alert('坚毅咏叹调');
		</script>
		<!-- 3.外部js script双标签 -->
		<script src="js/my.js"></script>
	</head>
	<body>
		<!-- 1.行内式的js直接写到元素的内部 -->
		<!-- <input type="button" value="琴瑟仙女" οnclick="alert('娑娜')" /> -->
	</body>
</html>

alert('英勇赞美诗');

注意：引用外部js文件的script标签中间不可以写代码

js注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//  1.单行注释   Ctrl + /
			/* 
				2.多行注释
				  多行注释
				  多行注释
			 */
		</script>
	</head>
	<body>
	</body>
</html>

输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//这是一个输入框
			prompt('请输入您的年龄');
			// alert 弹出警示框 输出的 展示给用户的
			alert('计算的结果是');
			//console 控制台输出 给程序员测试用的
			console.log('我是程序员能看到的');
		</script>
	</head>
	<body>
	</body>
</html>

js变量

概述：什么是变量

白话：变量就是一个装东西的盒子

通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

声明变量

//声明变量
var age;//声明一个名称为age的变量

var是一个js关键字，用来声明变量，使用该关键字声明变量后，计算机会自动为变量分配内存空间

age是程序员定义的变量名

赋值

age = 10;//给age这个变量赋值为10

=用来把右边的值赋给左边的变量空间中，此处代表赋值的意思

变量值是程序员保存到变量空间里的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.声明一个age变量
			var age;
			// 2.赋值
			age = 18;
			// 3.输出
			console.log(age);
		</script>
	</head>
	<body>
	</body>
</html>

变量的初始化

var age = 18;//声明变量同时赋值为18

声明一个变量并赋值，我们称之为变量的初始化

变量的使用案例

弹出一个输入框，提示用户输入姓名
弹出一个对话框，输出用户刚输入的姓名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.用户输入姓名
			var myname = prompt('请输入您的名字');
			//2.输出这个用户名
			alert(myname);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

变量语法扩展

更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

var age = 18;
age = 81;//最后的结果就是81，因为18被覆盖掉了

同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

var age = 10, name = '阿波', sex = 1;

声明变量特殊情况

情况	说明	结果
var age; console.log(age)	只声明，不赋值	undefined
console.log(age)	不声明，不赋值，直接使用	报错
age = 10; console.log(age)	不声明，只赋值	10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.只声明不赋值，结果：undefined 未定义的 程序也不知道里面存的是什么
			var sex;
			console.log(sex);//undefined
			
			//2.不声明，不赋值 直接使用某个变量会报错
			// console.log(tel);报错
			
			//3.不声明直接赋值使用
			no = 78
			console.log(no);//78
		</script>
	</head>
	<body>
	</body>
</html>

例子：交换两个变量的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// js是编程语言有很强的逻辑性在里面,实现这个要求的思路:先怎么做后怎么做,
			// 1. 我们需要一个临时变量帮我们
			// 2. 把apple1 给我们的临时变量 temp
			// 3. 把apple2 里面的苹果给 apple1
			// 4. 把临时变量里面的值给 apple2
			var temp;
			var apple1 = '青苹果';
			var apple2 = '红苹果';
			temp = apple1; //把右边给左边
			apple1 = apple2;
			apple2 = temp;
			console.log(apple1);
			console.log(apple2);
		</script>
	</head>
	<body>
	</body>
</html>

变量的数据类型

JavaScript是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

var age = 10;         //这是一个数字型
var areYouOk = '是的';//这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6;		//x为数字
var x = 'Bill'; //x为字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// int num = 10;	java
			// var num;	  这里的num 我们是不确定属于哪种数据类型的
			var num = 10;//num 属于数字型
			//js 的变量数据类型只有程序在运行过程中，根据等号右边的值来确定的
			var str = 'pink';//str字符串型
			//js是动态语言 变量的数据类型是可以变化的
			var x = 10;//x 是数字型
			x = 'pink';//x 是字符串型
		</script>
	</head>
	<body>
	</body>
</html>

简单数据类型（基本数据类型）

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，如‘张三’ 注意js里面，字符串都是带引号的	‘’
Undefined	var a;声明了变量a，但是没有给值，此时a=undefined	undefined
Null	var a = null;声明了变量a为空值	null

数字型Number

数字型进制：常见的有：二进制、八进制、十进制、十六进制

//1.八进制数字序列范围：0~7
var num1 = 07;	//对应十进制的7
var num2 = 019;	//对应十进制的19
var num3 = 08;	//对应十进制的8
//2.十六进制数字序列范围：0~9以及A~F
var num = 0xA;

记住在js中八进制前面加0，十六进制前面加0x

数值型范围

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE);//1.7976931348623157e+308
alert(Number.MIN_VALUE);//5e-324

三个特殊值

alert(Infinity);//Infinity，代表无穷大，大于任何数值
alert(-Infinity);//-Infinity，代表无穷小，小于任何数值
alert(NaN);//NaN，代表一个非数值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = 10;//num 数字型
			var PI = 3.14//PI 数字型
			//1.八进制 0~7 程序里数字前面加0 表示八进制
			var num1 = 010;
			console.log(num1);//010 八进制 转换为10进制 就是 8
			var num2 = 012;
			console.log(num2);
			
			//2.十六进制 0~9 a~f 数字前面加0x表示十六进制
			var num3 = 0x9;
			console.log(num3);
			var num4 = 0xa;
			console.log(num4);
			
			//3.数字型的最大值
			console.log(Number.MAX_VALUE);
			//4.数字型的最小值
			console.log(Number.MIN_VALUE);
			//5.无穷大
			console.log(Number.MAX_VALUE * 2);//Infinity 无穷大
			//6.无穷小
			console.log(-Number.MIN_VALUE * 2);//-Infinity 无穷小
			//7.非数字
			console.log('阿波' - 100);//NaN
		</script>
	</head>
	<body>
	</body>
</html>

isNaN()

用来判断一个变量是否为非数字的类型，返回true或者false

var usrAge = 21;
var isOk = isNaN(usrAge);
console.log(isNum);			  //false,21不是一个非数字
var userName = '阿波';
console.log(isNaN(userName)); //true,'阿波'是一个非数字

字符串型String

字符串型可以是引号中的任意文本，其语法为双引号和单引号

var strMsg = "我爱北京天安门~";//使用双引号表示字符串
var strMsg2 = 'WDNMD';		 //使用单引号表示字符串
//常见错误
var strMsg3 = 哈哈哈;		  //报错，没使用引号，会被认为是js代码，但是js没有这些语法

因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号

字符串转义符

转义符	解释说明
\n	换行符，n是newline的意思
\	斜杠\
’	单引号‘
"	双引号"
\t	tab 缩进
\b	空格，b是blank的意思

弹出网页警示框案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			alert('酷热难耐，火辣的太阳低下，我挺拔的身姿，成为了最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者.这一刻,我豪气冲天,终于大喊一声:”收破烂啦~“');
		</script>
	</head>
	<body>
	</body>
</html>

字符串长度

通过字符串的length属性可以获取整个字符串的长度

var strMsg = '我是阿波！';
alert(strMsg.length);//显示5

字符串拼接

//1.1字符串“相加”
alert('hello' + ' ' + 'world');//hello world
//1.2数值字符串”相加“
alert('100' + '100');//100100
//1.3数值字符串 + 数值
alert('11' + 12);//1112

+号总结口诀：数值相加，字符相连

字符串拼接加强

console.log('阿波' + 18);		  	  //只要有字符就会相连
var age = 18;
//console.log('阿波age岁啦');		//这样不行哦
console.log('阿波' + age);		 //阿波18
console.log('阿波' + age + '岁啦'); //阿波18岁啦

布尔型

布尔类型有两个值：true和false，其中true表示真（对），而false表示假（错）

布尔型和数字型相加的时候，true的值为1，false的值为0

console.log(true + 1);//2
console.log(false + 1);//1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var flag = true;//flag 布尔型
			var flag1 = false;//flag 布尔型
			console.log(flag + 1);//true 参与加法运算当1来看
			console.log(flag1 + 1);//true 参与加法运算当0来看
		</script>
	</head>
	<body>
	</body>
</html>

Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值undefined

var variable;
console.log(variable);					//undefined
console.log('你好' + variable);		   //你好undefined
console.log(11 + variable);				//NaN
console.log(true + variable);			//NaN

一个声明变量给null值，里面存的值为空

var vari = null;
console.log('你好' + vari);			//你好null
console.log(11 + vari);				 //11
console.log(true + vari);			 //1

获取检测变量的数据类型typeof

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = 10;
			console.log(typeof num);//number
			var str = '阿波';
			console.log(typeof str);//string
			var flag = true;
			console.log(typeof flag);//boolean
			var vari = undefined;
			console.log(typeof vari);//undefined
			var timer = null;
			console.log(typeof timer);//object
			//prompt 取过来的值是 字符型的
			var age = prompt('请输入您的年龄');
			console.log(age);
			console.log(typeof age);
		</script>
	</head>
	<body>
	</body>
</html>

数据类型转换

通俗来讲就是把一种数据类型的变量转换成另外一种数据类型

有三种转换方式：

转换为字符串类型
转换为数字型
转换为布尔型

转换为字符串

方式	说明	案例
toString()	转成字符串	var num = 1;alert(num.toString());
String()强制转换	转成字符串	var num = 1;alert(Strinig(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1;alert(num + “我是字符串”);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.把数字型转换为字符串型 变量.toString()
			var num = 10;
			var str = num.toString();
			console.log(str);
			console.log(typeof str);
			//2.我们利用String（变量）
			console.log(String(num));
			//3.利用 + 拼接字符串的方法实现转换效果
			console.log(num + '');
		</script>
	</head>
	<body>
	</body>
</html>

转换为数字型（重点）

方式	说明	案例
parseInt(string)函数	将String类型转换成整数数值型	parseInt(‘78’)
parsFloat(string)函数	将String类型转换成浮点数数值型	parseFloat(‘78.26’)
Number()强制转换函数	将String类型转换为数值型	Number(‘12’)
js隐式转换(- * /)	利用算术运算隐式转换为数值型	‘12’ - 0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.parseInt(变量) 可以把 字符型转换为数字型 得到的是整数
			console.log(parseInt('3.14'));//3 取整
			console.log(parseInt('3.94'));//3 取整
			console.log(parseInt('120px'));//120 会去掉这个px单位
			console.log(parseInt('rem120px'));//NaN
			//2.parseFloat（变量） 可以把字符型转换为数字型 得到的是小数 浮点数
			console.log(parseFloat(3.14));
			console.log(parseFloat('120px'));//120 会去掉这个px单位
			console.log(parseFloat('rem120px'));//NaN
			//3.利用Number（变量）
			var str = '123';
			console.log(Number(str));
			console.log(Number('12'));
			//4.利用了算术运算 - * / 隐式转换
			console.log('12' - 0);//12
			console.log('123' - '120');
		</script>
	</head>
	<body>
	</body>
</html>

计算年龄案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//弹出一个输入框（prompt），让用户输入出生年份（用户输入）
			//把用户输入的值用变量保存起来,然后用今年的年份减去变量值,结果就是现在的年龄
			//弹出警示框（alert），把计算结果输出
			var year = prompt('请输入您的出生年份');
			var age = 2021 - year;//year 取过来的是字符串类型 但是这里用的减法 有隐式转换
			alert('您今年已经' + age + '岁了');
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

简单加法器案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//先弹出一个输入框，提示用户输入第一个值，保存起来
			//再弹出一个输入框，提示用户输入第二个值，保存起来
			//把这两个值相加，并将结果赋给新的变量（注意数据类型转换）
			//弹出警示框（alert），把计算的结果输出
			var num1 = prompt('请您输入第一个值：');
			var num2 = prompt('请您输入第二个值：');
			var result = parseFloat(num1) + parseFloat(num2);
			alert('您的结果是：' + result);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’);

代表空、否定的值会被转换为false，如“、0、NaN、null、undefined
其余值都会被转换为true

console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean('小白'));//true
console.log(Boolean(12));//true

标签：01,console,log,age,笔记,JS,var,alert,变量
来源： https://blog.csdn.net/qwq_666/article/details/117928193

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS笔记01

初识Javascript

HTML/CSS/JS的关系

浏览器执行JS简介

JS的组成

js初体验

js注释

输入输出语句

js变量

概述：什么是变量

声明变量

赋值

变量的使用案例

变量语法扩展

更新变量

同时声明多个变量

声明变量特殊情况

例子：交换两个变量的值

变量的数据类型

简单数据类型（基本数据类型）

数字型Number

数值型范围

三个特殊值

isNaN()

字符串型String

字符串转义符

弹出网页警示框案例

字符串长度

字符串拼接

字符串拼接加强

布尔型

Undefined 和 Null

获取检测变量的数据类型typeof

数据类型转换

转换为字符串

转换为数字型（重点）

计算年龄案例

简单加法器案例

转换为布尔型