第09章-前端核心技术-JavaScript基础语法
学习目标
-
掌握JavaScript基础语法的使用
-
掌握JavaScript注释的使用
-
掌握JavaScript变量的使用
重点 -
掌握JavaScript变量的类型和定义和使用
-
掌握JavaScript运算符的使用
重点难点 -
掌握JavaScript函数的简单使用
重点
JavaScript引入
外部样式
使用<script></script>标签引入外部文件
<script src="/js.js" type="text/javascript" charset="utf-8"></script>
内部引入
使用<script></script>标签直接写代码
1
2
3
<script type="text/javascript" charset="utf-8"> // 代码 </script>
JavaScript 语句
单行注释
单行注释以 // 开头。//后面的同一行的内容全部变成注释，注释会被浏览器忽略掉，而不执行，一般起解释说明的作用
如：
1
2
3
4
5
<script type="text/javascript"> //单行注释 //下面这条语句在浏览器中输出并显示“你好”两个字 document.write("你好"); </script>
多行注释
多行注释以 /*开始，以 */结尾。
如：
1
2
3
4
5
6
7
<script type="text/javascript"> /** * 多行注释 * 下面这条语句在浏览器中输出并显示“你好”两个字 */ document.write("你好"); </script>
JavaScript 变量
变量是用于存储信息的“容器”。作用就是用于存储代码中使用到的数据。
就像代数那样
x=5
y=6
z=x+y
变量命名规则：
- 变量只能包含
字母、数字、_、$ - 变量必须不能以
数字开头，因为大多数浏览器不支持 - 变量名称对大小写敏感（y 和 Y 是不同的变量）
变量创建
创建（声明）变量，可使用var 关键词来声明变量，var可以省略
如：
var carname;
变量声明之后，该变量是空的（它没有值）。
变量赋值
赋值就是存储，将某个值存储这个变量中存储起来，而且可以对一个变量反复赋值。
如：
1
2
name = "张三"; // 赋值： 将"张三"存入变量中
name = "李四"; // 赋值： 将"李四"存入变量中
最终变量name的值是最后一次存储的值“你好”
注：也可以在声明变量时对其赋值：
var name = "张三";
给name这个变量设置之为 “张三” ，也可以理解为把 “张三” 这个文字保存在 name 变量中。
变量使用
使用变量可以通过变量的名称直接使用，可以用于计算、输出显示等
变量数据类型
JavaScript 数据类型有以下几种
-
字符串（String）
-
数字(Number)
-
布尔(Boolean)
-
数组(Array)
-
对象(Object)
-
空（Null）
-
未定义（未赋值）（Undefined）
字符串
字符串用来存储字符和文字的变量。使用**单引号**或**双引号**：
如：
1
2
var name="阿百川";
var name='兵工厂';
您可以在字符串中嵌套使用单双引号，只要不匹配包围字符串的引号即可：
如：
1
2
3
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
数字
数字类型**只能**用来保存数字：
如：
1
2
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或**极小**的数字可以通过科学（指数）计数法来书写：
如：
1
2
var y=123e5; // 12300000
var z=123e-5; // 0.00123
布尔
布尔常用于判断或者设置状态，布尔（逻辑）只能有两个值：true 或 false。布尔类型可以转换成0、1、‘0’、“1”等
如：
1
2
var x=true; // 1
var y=false; // 0
数组
数组用于保存多个数据，如会员的姓名、用户名、密码、手机号等等。
下面的代码创建名为 user 的数组：
1
2
3
4
5
var user = new Array();
user[0]="张三";
user[1]="zhang";
user[2]="123456";
user[3]="13592769132";
或者
var user = new Array("张三"," zhang ","123456","13592769132");
或者
var user = ["张三"," zhang ","123456","13592769132"];
数组下标从0开始，所以第一个是 [0]，第二个是 [1]，以此类推。
对象
对象不仅可以保存普通数据，还可以保存代码操作功能。
1
2
3
4
5
6
class studennt{
constructor(x,y){
this.x = x;
this.y = y;
}
}
Undefined 和 Null
Undefined 表示基本数据类型不含有值。
null 表示引用 数据类型没有值。
JavaScript 运算符
赋值运算符
假设 y = 5;，x = 10
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
= |
x=y |
x=5 |
|
+= |
x+=y |
x=x+y |
x=15 |
-= |
x-=y |
x=x-y |
x=5 |
*= |
x*=y |
x=x*y |
x=50 |
/= |
x/=y |
x=x/y |
x=2 |
%= |
x%=y |
x=x%y |
x=0 |
算术运算符
假设 y = 5;
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|---|---|---|---|
+ |
加法 | x=y+2 |
7 | 5 |
- |
减法 | x=y-2 |
3 | 5 |
* |
乘法 | x=y*2 |
10 | 5 |
/ |
除法（商） | x=y/2 |
2.5 | 5 |
% |
取模（求余数） | x=y%2 |
1 | 5 |
++ |
自增 | x=++y |
6 | 6 |
x=y++ |
5 | 6 | ||
-- |
自减 | x=--y |
4 | 4 |
x=y-- |
5 | 4 |
比较运算符
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
== |
等于（**值**） | x==8 |
false |
x==5 |
true | ||
=== |
绝对等于（**值**和**类型**均相等） | x==="5" |
false |
x===5 |
true | ||
!= |
不等于 | x!=8 |
true |
!== |
不绝对等于（值和类型有一个不相等，或两个都不相等） | x!=="5" |
true |
x!==5 |
false | ||
> |
大于 | x>8 |
false |
< |
小于 | x<8 |
true |
>= |
大于或等于 | x>=8 |
false |
<= |
小于或等于 | x<=8 |
true |
逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
&& |
And 与 | (x < 10 && y > 1)为 true |
|| |
Or 或 | (x==5 \|\| y==5) 为 false |
! |
Not 非 | !(x==y) 为 true |
条件运算符
条件运算符可以用于艰简单的判断
语法
var name = condition ? value1 : value2;
如：
如果变量 age 中的值小于 18，则向变量 voteable 赋值 “年龄太小”，否则赋值 “年龄已达到”。
var teable = ( age <18 ) ? "年龄太小" : "年龄已达到";
| 运算类型 | 运算符 |
|---|---|
| 圆括号 | ( ) |
| 成员访问 | . |
| 需计算的成员访问 | [ ] |
new (带参数列表) |
new ( ) |
| 函数调用 | ( ) |
new (无参数列表) |
new |
| 后置递增(运算符在后) | a++ |
| 后置递减(运算符在后) | a-- |
| 逻辑非 | ! |
| 前置递增 | ++a |
| 前置递减 | --a |
typeof |
typeof |
void |
void |
delete |
delete |
await |
await |
| 幂 | ** |
| 乘法 | * |
| 除法 | / |
| 取模 | % |
| 加法 | + |
| 减法 | - |
| 按位左移 | << |
| 按位右移 | >> |
| 无符号右移 | >>> |
| 小于 | < |
| 小于等于 | <= |
| 大于 | > |
| 大于等于 | >= |
in |
in |
instanceof |
instanceof |
| 等号 | == |
| 非等号 | ~= |
| 全等号 | === |
| 非全等号 | !== |
| 按位与 | & |
| 按位异或 | ^ |
| 按位或 | | |
| 逻辑与 | && |
| 逻辑或 | || |
| 条件运算符 | ? : |
| 赋值 | = |
+= |
+= |
-= |
-= |
*= |
*= |
/= |
/= |
%= |
%= |
<<= |
<<= |
>>= |
>>= |
>>>= |
>>>= |
&= |
&= |
^= |
^= |
|= |
|= |
yield |
yield |
yield* |
yield* |
| 展开运算符 | ... |
| 逗号 | , |
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//1、定义（申明）变量
var a;
var b;
var c;
var t;
//2、赋值
a = "1";//string
b = 45;//number
c = true;//1
//3、使用
// 1
t = (!c || a > 100) || b < 100 && b > a || a >= 6 && b !== a;
document.write(t);//true
//2
t = c && (a != c && b < 100 || b > 1 && (!c || a == c) && a === c)?a++ - --b:!c;
document.write(t);//false
JavaScript 函数基础
函数就是包裹在花括号中的**代码块**，使用了关键词 function：关键词 function 必须是小写的
1
2
3
function functionname(){
执行代码
}
函数的使用，通过方法名+括号来使用方法，如：
functionname();
这句代码就是使用方法名为**functionname**的方法，必须加上(),()是函数的标志，不可不写。
方法最简单的功能就是将一部分代码放到一起，组成一个代码快，在需要的时候直接执行。因此，方法在写好后是不会自动执行的，除非使用方法，方法里面的代码才会被执行
可以在HTML元素的点击事件中使用方法，HTML的点击事件就是onclick属性。如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在onclick属性中使用方法-->
<button onclick="sum()">点击可计算10+20的结果</button>
</body>
<script type="text/javascript"> //通过关键字function来定义方法，方法名后面必须跟（） function sum(){ var a = 10; var b = 20; var c = a + b; alert(c) } </script>
</html>
效果图
JavaScript与HTML
JavaScript只有配合HTML才能发挥其最大的作用，而document对象就是JavaScript和HTML相互结合的关键点。通过document对象可以获取和设置HTML元素，实现各种功能。如：
通过ID属性获取HTML元素，只能获取第一个：
var e = document.getElementById('name');
如果是表单输入元素，使用value属性来获取和设置元素的值：
1
2
var v = document.getElementById('name').value;
document.getElementById('name').value ='张三465';
如果是普通双标签，则使用innerHTML或者innerText来获取和设置元素的内容
1
2
var v = document.getElementById('name').innerHTML;
document.getElementById('name').innerHTML = '张三';
或者
1
2
var v = document.getElementById('name').innerText;
document.getElementById('name').innerText = '张三';
作业
实现如下效果
点击添加后将上面输入框的文字**追加**到下面的文本域中
实现如下效果
点击上面的按钮，将按钮上的文字添加到下面的园内显示
判断下面的输出结果
求商
求前面这个数除以后面那个数的余数，alert弹窗输出结果
</article>