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