JavaScript第一幕之语言基础与表达运算

最新推荐文章于 2024-07-31 16:33:32 发布

Dorable_Wander

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量245

点赞数 6

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/XSL_HR/article/details/126996459

版权

JavaScript 专栏收录该内容

23 篇文章 20 订阅

订阅专栏

JavaScript 内容整理语言基础与表达运算

4 JavaScript语言基础

4.1 JavaScript语法格式

将JavaScript程序代码直接嵌入到HTML文件中，这是最常见的使用JavaScript方法。language是script标记的基本属性，此时表示脚本语言是javascript。runat="server"表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。


<script language="javascript" runat="server">
  <!--
     在此处编写JavaScript程序
  -->
</script>

4.2 JavaScript代码书写位置

在<body>和 </body>标记之间嵌入JavaScript。

<!DOCTYPE html>
<html>
<head>
	<title></title>

</head>
<body>
	<script type="text/javascript">
		alert("Hello World...");
	</script>
</body>
</html>

2.在<head>和</head>标记之间嵌入JavaScript。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		alert("Hello World123");
	</script>
</head>
<body>

</body>
</html>

3.引用外部的JavaScript文件

定义的外部JS文件gungunxs.js

alert("HelloWorld1234556");

在HTML页面引入外部JS文件gungunxs.js

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="../js/gungunxs.js"></script>
</head>
<body>

</body>
</html>

4.3 JavaScript注释

JavaScript 中注释可分为行(单行)注释和块(多行)注释。

行注释用两个斜杠 // 来表示。
块注释则用“/﹡”开始，以“﹡/ ”结束。 /**/

4.4 变量

变量：是内存中的一个存储空间(地址)，用来存储需要计算的数据。

4.4.1定义变量语法

let 变量名 ;
例如：定义一个变量存储学生年龄
let age ;

4.4.2 为变量初始值语法

变量名 = 值；
例如：为学生年龄赋值18；
将整数18赋值给变量age。我操作age就会代表18
age = 18;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let age ;
		age = 18;
        // 使用变量
        // 以警告框的方式打印学生的年龄
		alert(age);
	</script>
</body>
</html>

定义变量为变量赋初始值也可以在一行完成，语法如下：

let 变量名 = 值;
例如：为学生年龄赋值20
let age = 20;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let age = 20;
		alert(age);
	</script>
</body>
</html>

4.4.3变量的计算

案例：定义两个变量存储学生的年龄，然后累加

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<script type="text/javascript">
		// 变量firstAge存储第一个学生的年龄
		let firstAge = 20;
		// 变量secondAge存储第二个学生的年龄
		let secondAge = 18;
		// 两个学生年龄相加
		alert(firstAge+secondAge);

		/**
		= 在数学领域叫做等于，JavaScript编程语言叫做赋值运算符。例如：20赋给变量firstAge
		赋值运算符通常将运算符右边的数赋给左边的变量。 例如： firstAge = 20
		*/
	</script>
</body>
</html>

4.4.4 变量命名规范

1.变量名只能以$ _  大小写字母开始（不能以数字开始）
2.工作中变量命名全部以小写字母开始
3.如果使用多个单词命名变量使用驼峰命名法
例如： firstNum; firstAge ; studentAge;
多个单词，从第二个开始首字母大写
4.变量名长度小于等于15，如果你的变量名长度大于15，去掉元音字母，保留辅音字母
5.见名知意
let chenAge = 18;
let cssAge = 18;

4.4.5 变量分类

按存储方式可分为：基本数据类型变量和引用数据类型变量
按照作用域可分为：局部变量和全局变量

今天我们只介绍基本数据类型变量和局部变量

4.4.6 变量小结

计算机的内存类似宾馆。
变量-----》宾馆的房间
变量名----》房间编号(房号)
变量的值-------》入住的客人
生活中我们通过房间编号快速的找到入住的客人。同样的我们可以通过变量名找到对应的值。

4.5 变量作用域

变量的作用域是指变量在程序中的有效范围。

案例：在{}里面定义的变量在{}外面使用会发生啥问题。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		{
			let stuAge = 18;
			// OK 
			alert(stuAge);
		}
		// Error stuAge是在{}里面定义的只能在{}里面使用
		alert(stuAge);
	</script>
</body>
</html>

小结：变量的作用域由{}决定的，在{}里面定义的变量不能在{}外面使用大括号{}可以理解为一个区块(block)

4.6 常量

在程序运行过程中值保持不变的量称为常量。例如：圆周率可以定义为常量,因为它的值永远都是3.14。

定义常量语法：

const 常量名称 = 值;
例如：
const PI = 3.14;

案例：定义常量存储圆周率

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		const PI = 3.14;
		alert(PI);
	</script>
</body>
</html>

小结：常量名称全部用大写命名，如果有多个单词使用下划线分隔

// 定义圆形的圆周率
const CIRCLE_PI = 3.14;

4.7 数据类型

不同的数值，需要使用不同的数据类型表示，JavaScript的数据类型分为两大类
基本数据类型和引用数据类型。今天重点是基本数据类型

JavaScript支持5种基本数据类型：

1. number：数字类型类型。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串  "abc" "a" 'abc'
3. boolean: 布尔类型(logic)。只能存储true和false
4. null：一个对象为空的占位符
5. undefined：未定义类型。如果一个变量没有给初始化值，则会被默认赋值为undefined

引用数据类型包括：数组类型、对象类型、函数类型、JSON等等。

注意：JavaScript是弱类型语言，所以定义变量无需指定数据类型。

案例：定义5种基本类型变量并且为变量赋值

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		// 定义变量存储学生姓名、年龄 、 成绩、 是否吸烟
		let stuName = "Tom";
		let stuAge = 20;
		let stuScore = 88.5;
		let stuSmoking = false;
		alert(stuName);
		alert(stuAge);
		alert(stuScore);
		alert(stuSmoking);
		// 定义一个学生爱好赋值null
		let stuHobby = null;
		// 打印结果null
		alert(stuHobby);
		// 定义变量直接使用
		let stuHeight;
		// 打印结果undefined
		alert(stuHeight);
	</script>
</body>
</html>

5 表达式和运算符

5.1 表达式

由操作数和运算符组成的符号序列叫做表达式。在表达式中，表示各种不同运算的符号称为运算符，参与运算的变量或常量称为操作数。

案例：使用+将两个整数变量相加，然后赋值给一个新的变量

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		{
            // firstNum存储第一个整数，second存储第二个整数
			let firstNum = 10;
			let secondNum = 20;
			let result = firstNum + secondNum;
			alert(result);
		}
	
	</script>
</body>
</html>

5.2 运算符

各种不同的运算符号成为运算符。

	1字符串运算符：JavaScript中，可以使用字符串运算符"+"将两个字符串连接起来，形成一个新的字符串。

	2一元运算符：只有一个运算数的运算符
++，-- ， +(正号)  
			++ --: 自增(自减)
				 ++(--) 在前，先自增(自减)，再运算
				++(--) 在后，先运算，再自增(自减)
	3. 算数运算符
			+ - * / %(取余数)
	4. 赋值运算符
		= += -=
	5. 比较运算符
		> < >= <= == ===(全等于)
		* 比较方式
        1. 类型相同：直接比较            
        2. 类型不同：先进行类型转换，再比较
            ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
    6. 逻辑运算符
    	短路与 && 真真为真，其它为假
    	短路或 || 假假为假，其它为真
    	非    ！ 非真为假，非假为真
    7. 位运算符
		位运算符分为两种，一种是普通位运算符，另一种是移位运算符。
		& 位与
        | 位或
        ^ 位异或
        ~ 取反
        << 左位移
        >> 右位移
    8. 三元运算符 ?:
    	X ？ Y ：Z
    9. typeof运算符
    	返回操作数当前所容纳的数据的类型。typeof的返回值有6种: number、string、boolean、object、function和undefined