第一章 javascript入门 ① 笔记

小丫头爱打盹

已于 2024-04-14 20:26:06 修改

阅读量436

点赞数

分类专栏： # Javascript 文章标签： javascript 前端开发语言 vscode visual studio code

于 2022-06-12 21:15:38 首次发布

本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/125238613

版权

Javascript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

回顾

HTML CSS

课程目标

客户端数据计算
客户端表单合法性验证
浏览器对象BOM的调用
浏览器事件的触发
网页特殊显示效果制作
操作HTML元素DOM ：增删改查
购物车

本章目标

1.知道什么是程(流程)序(次序)
2.知道什么是js
3.掌握js的基本用法
4.变量，运算符

前言：程序

什么是程序？
计算机程序（Computer Program），港、台译做电脑程式。计算机程序是一组计算
机能识别和执行的指令，运行于电子计算机上，满足人们某种需求的信息化工具。

第一节：了解编程语言的发展史

1.人工
2. 纸带穿孔：
0没有孔 1有孔
在这里插入图片描述
1.机器语言：第一代计算机语言称为机器语言。机器语言就是 0/1 代码。计算机只能识别 0 和 1。01010101010
汇编语言：汇编语言就是将一串很枯燥无味的机器语言转化成一个英文单词
ADD 0100101 1011010
缺点：可移植性差。
优点：速度贼快！
高级编程语言：
c c++ java python javaScript
面向过程：C
面向对象：java，耦合问题，功能扩展/维护
编程思想：面向接口，面向切面

第二节：JavaScript 语言的发展

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript2015，但通常被称为ECMAScript 6 或者ES2015。

第三节： JavaScript 基本语法

3.1 ECMA 基本语法组成

注释，变量，运算符，数据类型，流程控制，对象

3.2 JavaScript怎么用

程序的本质是进行数据处理，数据处理从数据的存取开始。

	<!--在head标签内定义script标签,用于写js代码-->
	<script type="text/javascript">
	// 1.存储数据
	// 使用var关键字在内存中开辟一个空间，空间名字叫d1，
	// 用=号赋值，存储一个数据728
	var d1 = 10;
	var d2 = 4;
	// 2.数据运算
	// 3.计算结果
	// 弹出消息框，显示内容
	alert(d1+d2);
	alert(d1-d2);
	alert(d1*d2);
	alert(d1/d2);
	alert(d1%d2);
	</script>

3.2.1 javascript的两种定义方式:

1.页内脚本
在head标签内部，写script标签
在这里插入图片描述
2.外部脚本
在页面外部创建js文件，在页面中通过script标签引入进来
a. 创建外部js文件

新建html文件，在html的head标签中，通过script标签的src属性引入外部js文件。

<script type="text/javascript" src="js文件路径"></script>

在这里插入图片描述

3.3 JavaScript 注释

各种语言中的注释:

html语言注释(在html页面中)

<!--这是html语言注释-->

css语言注释(在style标签内使用)

/* 在css代码块中用这个注释
	在js,java和其他语言中，
	这种注释方式都比较普遍
*/

js语言注释(在script标签内使用)

// 单行注释
/*
js多行注释
*/

3.4 JavaScript 变量

3.4.1 什么是变量

变量来源于数学，是计算机语言中能储存计算结果或能表示值的抽象概念。
变量可以通过变量名访问。在指令式语言中，变量通常是可变的
在程序运行的时候，变量会对应内存中的一个存储区域，通过变量我们可以向这个内存区域存储数据，或者读取数据。

3.4.2 为什么要用变量

程序的本质是要进行数据处理，通过变量可以存储或访问数据，进行后续的操作。体现一种间接的思维方式。

3.4.3 变量的定义和使用

变量的语法:

// 定义变量存储数据
var 变量名 = 数据;
// 定义/声明 变量并同时赋值
var xm = "张三";
// 定义/声明变量
var name;
// 为变量赋值
name = "张三";

其中:
var 是定义变量的关键字，程序读到var关键字的时候，就会在内存中开辟一块空间。这个空间的名字用变量名来标识。除了使用var可以定义变量开辟内存空间，在ES6之后，新增了两个关键字也可以定义变量

let(定义局部变量),const(常量变量)

变量名,用于标记在内存中开辟的一块空间。
a.变量名由字母、数字、下划线、$符号构成，不能以数字开头

不合法的变量: !a , a b, 3xxx
合法变量: aaa , a_3, a3a

b.变量名的写法：小驼峰(studentName)，一个名字有多个单词构成，第一个单词首字母小写，后面单词首字母大写.

小驼峰: studentName studentSex goodsPrice goods
2 大驼峰: StudentName

c. 自己定义的变量名，不能使用javascript语言的保留字
在这里插入图片描述

 javascript保留字: var,function,Array
错误示范: var var = 10;

1.js中的变量名区分大小写

js区分大小写:
var a = 10;
var A = 100;

2.= 表示赋值操作/运算，用于将右边的数据存储到左边的变量空间中
3.数据用表示特定信息的内容。数据分为:字符串数据,数值数据,其他类型的数据
4.; 分号表示一个语句的结束。在js中按照规范要在一句代码结束后加";"。

<!--内部js代码块-->
<script type="text/javascript">
	var name = "张三"; // 字符串数据
	var sex = '男人'; // 字符串数据
	var age = 20; // 数值数据
	var tall = 1.7; // 数值数据
	var isMarry = false; // 布尔值数据
	//alert:系统弹窗函数
	// alert(name);
	// alert(sex);
	// alert(age);
	// alert(tall);
	// alert(isMarry);
	// 使用控制台输出的方式，显示变量信息
	// console: 标准浏览器中的工具类，用于向浏览器控制台输出信息
	console.log(name,sex,age,tall,isMarry);
</script>

3.5 JavaScript中的输入输出语句

//输出语句
alert(内容); // 弹窗显示信息
console.log(内容);//浏览器控制台输出内容,f12->控制台
//输入语句
prompt(标题,默认值)

3.6 js中数据类型

<head>
		<script type="text/javascript">
			// js中的数据类型(表示信息内容):
			// 1. 数值数据(number) : 整数,小数 100,200,3.234,2.34
			// 2. 字符串(string) : 字符串数据要用单引号或双引号包裹 "aaa",'张三','100',"2
			// 3. 布尔值(bool) : 取值只有两个 true/false
			// 4. undefined: 数据未定义类型，声明了变量没有赋值，则变量内容为undefined
			// 5. null : 表示对象是空的一种状态
			// 6. 对象类型(object): Date,Array
			// 描述一个人的信息
			var name = "张三";
			var sex = '男';
			var age = 20;
			var tall = 1.7;
			var hasFriend = false;
			//alert("姓名:"+"name"); //输出普通的name字符串
			//alert("姓名:"+name); // 输出name这个变量中的内容
			// 在浏览器的控制台(f12,右键检查->控制台)输出信息:
			// console:控制台的一个工具对象 log: 这个工具的一个方法，可以输出内容
			/*
			console.log("姓名:" + name);
			console.log("性别:"+sex);
			console.log("年龄:"+age);
			console.log("身高:"+tall);
			console.log("是否有朋友:"+hasFriend);
			//console.log("xxx:"+xxx); 输出未定义的内容，直接报错
			*/
			// 区分数据类型的方式 typeof(变量):测试变量的数据类型
			var a1 = 100;
			var a2 = "100";
			alert(a1+" "+typeof(a1));
			alert(a2+" "+typeof(a2));
		</script>
	</head>
	<body>
	</body>
</html>

3.7 js中的运算符

3.7.1 算术运算符:运算结果是数值

普通运算符: +,-,*,/,%
自增、自减: ++,–

<script type="text/javascript">
	// 算术运算符:除了加法有二义性，
	// 其他运算符对运算的数据都会先转为数值再运算
	// + : 具有二义性，1.如果两边都是数值则做加法运算
	// 2.如果两边有字符串则做拼接
	// - : 减法
	// * : shift+8 乘法
	// / : 除法
	// % : 求余数
	// 请输入两个数(通过prompt接收的都是字符串数据)， 
	// 进行数据的算术运算
	var num1 = prompt("第一个数",0);
	var num2 = prompt("第二个数",0);
	
	// typeof(内容):输出输入数据的类型
	alert(typeof(num1)+" "+typeof(num2));
	
	//alert(num1+num2);
	// Number(内容):可以将内容转为数值类型
	 alert(Number(num1)+Number(num2))
	
	// 如果提供的数据无法转为数值，则结果为NaN(not a number)
	/*alert(num1-num2);
	alert(num1*num2);
	alert(num1/num2);
	alert(num1%num2);*/
</script>

// 当自增/自减运算和其他运算放在一起的时候
// ++/--在前或在后的结果是不一样的
// ++在前: 先做自增再做其他运算
// ++在后: 先做其他运算，再做自增
<script type="text/javascript">
	// 自增/自减在单独运算的时候，符号(++,--)在前或在后结果都一样
	//var a = 10;
	//a++; //自增运算,自己的值增1
	//++a; //自增运算,自己的值增1
	//alert(a);
	//a--;//自减运算，自己的值减去1
	//--a; //自减运算，自己的值减去1
	//alert(a);
	//var a = 10;
	//var b = a++; //该表达式有2步运算:1.自增 2.赋值
	// 因为++在后,所以先将a赋值给b,再将a自增
	// 结果 a=11 b=10
	//var b = ++a; // 该表达式有2步运算:1.自增 2.赋值
	// 因为++在前,所以先将a自增，再将a赋值给b
	// 结果 a=11 b=11
	//alert(a+" "+b);
	var a = 10;
	alert(a++);//几步运算?
	alert(a);
</script>

3.7.2 赋值运算符

赋值运算: =
增强赋值: +=,-=,*=,/=,%=
 
<script type="text/javascript">
	// 赋值运算
	// = :将数据赋值给变量
	//var a = 10;// 将10 赋值给a
	//var b = a; // 将a中的内容赋值给b
	//alert(a+" "+b)
	// 增强赋值
	var a = 10;
	//a = a+20; // 先做加法，再做赋值
	a += 20; //既有加法，又有赋值，先加法再赋值,等价于上面的表达式
	alert(a); //30
	a-=5; // 等价 a = a-5
	alert(a);//25
	a*=3; // 等价 a = a*3
	alert(a);//75
	a/=2; // 等价 a = a/2
	alert(a);//37.5
	a%=4; // 等价 a = a%4
	alert(a);//9...1.5
</script>

3.7.3 比较/关系/条件运算符: 运算结果是布尔值 true/false

比较数据之间的大小关系

比较运算符: >,>=,<,<=,==(等值),!=,===(等值等型)
<script type="text/javascript">
	//比较运算符:>,>=,<,<=,==,!=,===
	//其中要注意的是: =(赋值) ==(相等判断)
	
	 /*
	var n1 = 10;
	var n2 = 5;
	alert(n1>n2); // true
	alert(n1>=n2); // n1要么大于n2要么等于n2 举例:5>=5
	alert(n1<n2);//false
	alert(n1<=n2);//false
	alert(n1==n2);//判断是否相等 false
	alert(n1!=n2);//10!=5成立 true
	*/
	
	// ==(等值判断) ===(等值等型判断)
	var a = 10;
	var b = "10";
	//alert(a==b);// 只比较内容
	alert(a===b); // 既比较内容，又比较类型
</script>

3.7.4 逻辑运算符: 运算结果也是布尔值 true/false

逻辑运算用于连接多个关系运算
举例: 男生找女朋友 : 要么是女的要么有钱多组条件，满足其一即可
女生找男朋友: 必须帅必须有钱多组条件，所有条件必须成立

逻辑与(&&): 连接多个条件，要求所有条件都成立，那么逻辑与的结果才为真
逻辑或(||) : 连接多个条件,要求有任意一个条件成立，那么逻辑或的结果就为真
逻辑非(!) : 针对一个条件，求反。

<script type="text/javascript">
	//逻辑运算:用来连接多个 关系/条件/比较 运算符
	//逻辑与(&&):所有条件都成立，则结果为真
	//逻辑或(||):任意条件成立，则结果为真
	//逻辑非(!):对条件运算的结果求反
	// true || false
	alert(10>5 || 5<2); //true
	// true && false
	alert(10>5 && 5<2); //false
	// !true
	alert(!(10>5)) // false
	// 运算符优先级
	// 3*5-2+8/3*(5+6)*8
	// 单目运算:操作数只有一个的运算符称为单目运算符 !true
	// 双目运算:操作数需要两个，3+5,3-1,10*2,5>3, 3>5 && 5<2
	// 三目运算:三个操作进行操作 ?:运算符
	// () --> 单目运算符(!,++,--)
	// -->算术运算(*/+-)-->比较运算(>,>=,<,<=,==,!=)
	// -->逻辑运算符(&&>||)-->赋值运算(=)
	var flag = 3+5>9 && 5*(2-3)<-12 || 7/2==10 && 34/5!=18 || (!(1==5));
	// 8>9 && -1<-12 || 3.5==10 && 6.8!=18 || !(1==5)
	// false && false || false && true || true
	// false || false || true
	// false || true
	// true
	alert(flag);
	// 1.验证该表达式是否有语法错误
	// 2.没有错误的情况下，口算结果,可以用纸笔
</script>

3.7.5 三目运算符

三目运算符(? : ):简化的条件判
语法:

var 变量 = 条件表达式 ? 结果1 ： 结果2 ;

条件表达式:
指得是由一个或多个关系运算或逻辑运算结合数据组成的表达式。表达式结果是布尔值。
三目运算符的运算逻辑:
1.如果条件表达式的结果为true，则表达式返回结果1,作为表达式的结果
2.如果条件表达式的结果为false，则表达式返回结果2，作为表达式的结果
在这里插入图片描述

3.7.6运算符优先级

// () --> 单目运算符(!,++,--)
// -->算术运算(*/+-)-->比较运算(>,>=,<,<=,==,!=)
// -->逻辑运算符(&&>||)-->赋值运算(=)

3.8 数据类型的转换

用于将字符串数据转为整数，小数，数值

parseInt(字符串/其他数据):将字符串转为整数类型的数据
parseFlot(字符串/其他数据):将字符串转为小数类型的数据
Number(字符串/其他数据):将字符串转为数值数据

<script type="text/javascript">
	// parseInt(数据):将数据转为整数
	
	//var s = "123";
	//alert(s+" "+typeof(s)) // 123 string
	//var x = parseInt(s); //将s转为整数
	//alert(x+" "+typeof(x)); // 123 number
	
	//var s = "123.456";
	alert(s+" "+typeof(s)); // 123.456 string
	//var x = parseInt(s);
	//alert(x+" "+typeof(x)); // 123 number
	
	// parseFloat(数据):将数据转为小数
	//var s = "123.456";
	//var s = "123"; //如果数据本身只有整数，parseFloat结果还是整数
	//alert(s+" "+typeof(s)); // 123.456 string
	//var x = parseFloat(s); // 将字符串转为小数
	//alert(x+" "+typeof(x)); // 123.456 number
	
	// Number(数据):将数据转为数值
	//var s = "123.456";
	var s = "123";
	alert(s+" "+typeof(s)); // 123.456 string
	var x = Number(s); //将字符串转为数值
	alert(x+" "+typeof(x)); // 123.456 number

</script>

总结：

重点掌握：变量的定义使用，数据类型，++ – ，字符串的拼接运算,类型转换

练习：

1.输入一个数字，判断是不是水仙花数自恋数 ,自幂数（个位的3次方+十位的3次方+百位的3次方=数本身 153）——true false即可。
2.一个笼子里有鸡和兔子，头有35，腿有94；输入两个数字，分别代表鸡和兔子的个数,输出是否是答案。——输出true false即可

鸡 x兔 yx+y=35 && 2x+4y=94 满足的条件var x = prompt();var y = prompt();if

1.同学聚会，进行点菜，点了大盘鸡水煮鱼大虾以及4个凉菜 1箱啤酒分别录入各个单价，并计算总价，录入总学生数，计算人均多少钱。
输入一个3/4/5/6位数，判断这个数是不是回文数（正看==反看）。
1.121 12321 1234321
2.连续录入五个人的成绩，计算最大成绩最小成绩和平均成绩。

小丫头爱打盹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

第一章 javascript入门 ① 笔记

第一章 javascript入门 ① 笔记

回顾

课程目标

本章目标

前言：程序

第一节：了解编程语言的发展史

第二节：JavaScript 语言的发展

第三节： JavaScript 基本语法

3.1 ECMA 基本语法组成

3.2 JavaScript怎么用

3.2.1 javascript的两种定义方式:

3.3 JavaScript 注释

3.4 JavaScript 变量

3.4.1 什么是变量

3.4.2 为什么要用变量

3.4.3 变量的定义和使用

3.5 JavaScript中的输入输出语句

3.6 js中数据类型

3.7 js中的运算符

3.7.1 算术运算符:运算结果是数值

3.7.2 赋值运算符

3.7.3 比较/关系/条件 运算符: 运算结果是布尔值 true/false

3.7.4 逻辑运算符: 运算结果也是布尔值 true/false

3.7.5 三目运算符

3.7.6运算符优先级

3.8 数据类型的转换

总结：

练习：

3.7.3 比较/关系/条件运算符: 运算结果是布尔值 true/false