文章目录
- 一.Javascript的含义
- 二.JavaScript的主要特点
- 三.JavaScript的组成
- 四.JavaScript的三种引入方式
- 五、JaveScript的语法
- 六、各类运算符
- 七、流程控制
- 八、分支结构
一.Javascript的含义
是一种解释性的语言，主要给网页添加各色各样的动态功能，同时为用户提供浏览效果。
二.JavaScript的主要特点
- 简单性
- 动态性
- 安全性
- 跨平台性
三.JavaScript的组成
- ECMAScript :描述语言的语法和基本对象
- BOM：描述网页内容的方法和接口
- DOM：描述与浏览器进行交互的方法和接口
四.JavaScript的三种引入方式
1.标签内引入
2.内部引入
3.外部引入
五、JaveScript的语法
5.1 基本语法规则
(1)严格区分大小写
(2)对空格、换行、缩进不敏感，一条语句可以多行写
(3)一条语句结束后可以使用分号，也可以不用
5.2 注释符号
(1)单行注释符：以’//‘开始，到所在行的结束
(2)多行注释符：以’/*‘开始，以’*/‘结束，中间可以包含多行
5.3 输入输出语句
输入输出语句：实现网页与用户的交互
(1)输出语句：
alert('字符串'):消息框，'字符串'为消息框上显示的内容
console.log(内容)：输出到浏览器的console中
console.info(内容):输出到浏览器的console中
console.error(内容):输出错误信息到console中
(2)输入语句：
prompt('字符串')：浏览器弹出输入框，用户可以通过输入框输入内容
5.4 定义变量
变量：在程序运行过程中值会发生改变的量。本质是内存中的一款存储区域
(1)声明变量：
var 变量名 = 值；
(2)先声明，后赋值
var 变量；
变量 = 值；
(3)命名规则：
a、由字母、数字、下划线和美元符号$组成
b、不能以数字开头
c、严格区分大小写
d、不能是关键字、保留字
e、建议做到见名知意、
f、建议使用驼峰命名法：首字母小写，后面单词的首字母大写
5.5 变量的数据类型
强类型语言：C/C++、Java 在声明变量时必须指定变量的数据类型
弱类型语言：JaveScript、python 在声明变量时不用指定变量的数据类型。变量的数据类型在程序运行过程中自动确定
(1)基本数据类型
Boolean：布尔型(逻辑型)
String：字符串(用单引号或双引号括起来的字符序列)
Number：数字型(整数和小数)
Null：空值型
Undefined：未定义型
(2)复合数据类型：Object(对象)
5.6 数字型变量
数字型常用的数制：
a、二进制：由0和1组成的数字序列
b、八进制：由0开头，0~7组成的数字序列，逢八进一
c、十六进制：是0x开头，由0~9数字和A~F字母组成
d、十进制
取值范围(最大值和最小值)：
最大值：Number.Max_VALUE
最小值：Number.Min_VALUE
特殊的数字型：
NaN：Not a Number
isNaN(变量)：判断变量是否是非数字类型。若是非数字类型返回true，若是数字返回false
5.7 字符串型变量
字符串类型：用单引号或双引号括起来的字符序列。在单引号字符串中可以嵌套双引号；在双引号字符串中可以嵌套单引号，但是单引号和双引号不能交叉。
a、转义字符：以'\'开头，后跟一个字符，代表某个特殊含义
\n:表示换行
\t:Tab符号
\b:退格符
\x：十六进制数 \xhh
\\:表示输出一个'\'
b、字符串的长度：字符串变量默认有length属性，代表字符串的长度(有效字符串的个数)
c、访问字符串中的某个字符：字符串变量名[index],index的取值从10开始到字符串的长度减1
d、字符串的拼接：通过'+'实现。不同类型的数据和字符串拼接时，会将其他类型的数据先转换成字符串。
5.8 数据类型的检测
数据类型的检测：typeof
<body>
<script>
var s = 'student'
console.log(typeof 12)
console.log(typeof null)
var pt = 123
// s1 = toString(pt)
s1 = String(pt)
console.log(typeof s1)
</script>
</body>
5.9 将其他类型的数据转换成字符串
a、通过连接符'+'
b、通过toString()方法转换
c、通过String()类进行转换
5.10 将字符串转换为数字型的方式
a、通过parseInt将字符串转为整数
b、通过parseFloat()将字符串转换为浮点型数据(小数)
c、通过Number()将字符转换为数字型
d、通过算术运算符进行隐式转换
<body style="text-align: center;">
<div>
<label for="">
物品单价：<input type="text" id="price">
</label>
<br><br>
<label for="">
购买数量：<input type="text" id="count">
</label>
<br><br>
<button onclick="cal()">计算试试</button>
<br><br>
<label for="">
物品总价：<input type="text" id="total">
</label>
<script>
//定义函数实现
function cal() {
//1.获取用户输入的单价和数量
var p = document.getElementById('price').value
var c = document.getElementById('count').value
//2.将单价和数量转换成数字型
var p1 = parseFloat(p)
var c1 = parseFloat(c)
//3.计算总价
var t = p1 * c1
//4.将t的值放入物品总价的文本框中
document.getElementById('total').value = t
}
</script>
</div>
</body>
/* 该串代码意为输入任意物品单价和购买数量，点击“计算试试”，可计算物品总价 */
5.11 转换为Boolean
转换为Boolean：把空值、否定值转换为false，如空字符串、0、NaN、null和undefined；其余的转换为true
六、各类运算符
6.1 算术运算符：+、-、*、/、%
(1)优先级：先乘除后加减，有括号的先算括号里面的
(2)模运算(%):运算结果的符号取决于%左边的数据，与%右边的数据无关
(3)+、-既可以作为双目运算符，也可以作为单目运算符(表示正、负号)
(4)自增(++)：是运算对象自己给自己加1
var a = 5
a++ 后缀表达式
++a 前缀表达式
注意：作为独立语句，前缀和后缀表达式没有区别；但若在混合运算的表达式中是有区别的
var a=5,b=6,c
c=a++*b //先使用a的值，然后a+1
c=++a*b //先让a+1，然后再使用a的值
6.2 关系运算符(比较运算符)
1、关系运算的运算结果：true/false
45>25 --> true
2、运算符：> >= < <= == !=
==：只比较值，不比较类型
===:全等 先比较类型，然后再比较值
!=:只比较值，不比较类型
!==:全不等
例：
<body>
<Script>
var t1 = 5, t2 = '5'
console.log(t1 == t2) //值是相等的，结果是true
console.log(t1 === t2) //先比较类型，结果为false
var a1 = 12, a2 = '12'
console.log(a1 != a2) //值是相等的，结果是false
console.log(a1 !== a2) //a1是Number型，a2为String型，所以结果为true
</Script>
</body>
6.3 逻辑运算符
逻辑运算符：运算结果是逻辑值（true/false）
-
逻辑与(&&)：表达式1 && 表达式2 -->只有当两个表达式的值都为true时，结果才为true
注意&&运算的短路现象：当’表达式1’为flase时，不运算’表达式2’
-
逻辑或(||): 表达式1 || 表达式2 --> 两个表达式中只要有一个为true，结果就为true
注意 || 运算的短路现象：当’表达式1’为true时，不运算’表达式2’
-
逻辑非(!)运算: 取反，true反是false，false反是true。 是单目运算符，必须放在运算对象的左边：!表达式
优先级： ！ && || 单目运算符的优先级永远是最高的
6.4 赋值运算符(=)
1、格式：变量 = 表达式
2、要求：
(1) '='的左边只能是变量，不能是常量或表达式
(2)优先级是最低的
3、复合赋值运算符：+=、-=、*=、/=等
var a=5
a+=5 --> a=a+5
a*=3+4 --> a=a*(3+4)
6.5 位运算符
位运算符：对数据的二进制位进行运算
1、按位与(&): a&b 相对应的二进制位都为1时结果为1，否则结果为0
var a = 10,b = 15
a&b = 10
00001010
& 00001111
-----------------
00001010
2、按位或运算(|): a|b 相对应的二进制位只要有一位为1时结果为1，都为0时结果为0
var a = 10,b = 15
a&b = 15
00001010
| 00001111
-----------------
00001111
3、按位异或(^): a^b 相对应的二进制位相同为0，不同为1
var a = 10,b = 15
a^b = 5
00001010
^ 00001111
-----------------
00000101
4、按位左移(<<): 运算对象 << 位移位数，位移时高位(左边)移出的位舍弃，低位(右边)补0
对于正整数和无符号数，左移n位等于让运算对象乘以2的n次方
5、按位右移(>>): 运算对象 >> 位移位数 位移时低位(右边)移出的位舍弃，高位(左边)补0
对于正整数和无符号数，右移n位等于让运算对象除以2的n次方
6.6 三元运算符( 条件运算符 ?: )
三元运算符( 条件运算符 ?: )：是一个三目运算符
先运算'表达式1'，若结果为true，则选择'表达式2'进行运算，并把'表达式2'的值作为整个条件表达式的值
若结果为false，则选择'表达式3'进行运算，并把'表达式3'的值作为整个条件表达式的值
例：
<body>
<script>
//从页面输入一个数，判断该数是奇数还是偶数
var n = prompt('请输入一个整数')
var pn = parseInt(n)
var str = pn % 2 === 0 ? '是偶数' : '是奇数'
alert(str)
</script>
</body>
七、流程控制
流程控制：通过控制代码的执行顺序来实现某种功能
1、顺序结构：按照代码的先后顺序依次执行
2、分支结构：又称为选择结构，是根据条件决定选择执行某个分支代码
3、循环结构：又称为重复结构(迭代结构)，是根据条件来决定是否重复执行某一段代码
八、分支结构
8.1 if语句：条件语句
8.2 if…else语句
if(条件表达式) {
代码段1
}else {
代码段2
}
(1)else必须和if结合使用，不能单独使用
(2)else后面不能带表达式
示例：输入一个年份，判断它是否是闰年
(1)年份能被4整除，但不能被100整除
(2)年份能被400整除
例：
<body>
<script>
//输入一个年份，判断它是否是闰年
var n = prompt('请输入一个年份')
var year = parseInt(n)
var msg = ''
if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
msg = year + '年是闰年'
} else {
msg = year + '年是平年'
}
alert(msg)
</script>
</body>
8.3 多分支语句
if(表达式1) {
代码段1
} else if(表达式2) {
代码段2
}
...
else{
代码段n
}
示例：输入成绩，判断成绩的等级
>=90 为A
>=80 为B
>=70 为C
>=60 为D
<60 为E
例：
<body>
<script>
var n = prompt('请输入一个成绩')
var s = parseFloat(n)
var msg = ''
if (s >= 90) {
msg = 'A'
} else if (s >= 80) {
msg = 'B'
} else if (s >= 70) {
msg = 'C'
} else if (s >= 60) {
msg = 'D'
} else if (s < 60) {
msg = 'E'
}
alert(msg)
</script>
</body>
8.4 if结构的嵌套
(1)在if子句中嵌套
if(表达式1) {
if(表达式2) {
代码段1
}
}else {
代码段2
}
(2)在else子句中嵌套
if(表达式1) {
代码段1
}else {
if(表达式2) {
代码段2
}else {
代码段3
}
}
注意：
a、在没有大括号( {} )时，if或else的控制范围(作用域)为其后的第一条语句
b、在没有大括号( {} )时，else总是和离它最近的if匹配
8.5 多分支选择结构
switch(表达式){
case 常量1：代码段1；break；
case 常量2：代码段2；break；
case 常量3：代码段3；break；
...
case 常量n：代码段n；break；
default:代码段n+1；
}
（1）case后面必须是常量，该常量的类型必须和'表达式'的运算结果的类型一致
（2）case后面的常量不能出现重复
（3）default表示是所有case情况之外的
（4）switch--case必须和break结合使用，否则没有分支选择的效果
例：
<body>
<script>
//2.输入成绩判断成绩的等级
var m = parseFloat(prompt('请输入一个成绩：'))
var k = parseInt(m / 10)
var msg = ''
switch (k) {
case 10:
case 9: msg = 'A'; break;
case 8: msg = 'B'; break;
case 7: msg = 'C'; break;
case 6: msg = 'D'; break;
default: msg = 'E';
}
alert('成绩等级为：' + msg)
</script>
</body>
