前端核心技术-JavaScript基础语法
学习目标
- 掌握JavaScript基础语法的使用
- 掌握JavaScript注释的使用
- 掌握JavaScript变量的使用
重点 - 掌握JavaScript变量的类型和定义和使用
- 掌握JavaScript运算符的使用
重点难点 - 掌握JavaScript函数的简单使用
重点
JavaScript引入
外部样式
使用<script></script>标签引入外部文件
<script src="/js.js" type="text/javascript" charset="utf-8"></script>
内部引入
使用<script></script>标签直接写代码
<script type="text/javascript" charset="utf-8">
// 代码
</script>
JavaScript 语句
单行注释
单行注释以 // 开头。//后面的同一行的内容全部变成注释，注释会被浏览器忽略掉，而不执行，一般起解释说明的作用
如：
<script type="text/javascript">
//单行注释
//下面这条语句在浏览器中输出并显示“你好”两个字
document.write("你好");
</script>
多行注释
多行注释以 /*开始，以 */结尾。
如：
<script type="text/javascript">
/**
* 多行注释
* 下面这条语句在浏览器中输出并显示“你好”两个字
*/
document.write("你好");
</script>
JavaScript 变量
变量是用于存储信息的"容器"。作用就是用于存储代码中使用到的数据。
就像代数那样
x=5
y=6
z=x+y
变量命名规则：
- 变量只能包含
字母、数字、_、$ - 变量必须不能以
数字开头，因为大多数浏览器不支持 - 变量名称对大小写敏感（y 和 Y 是不同的变量）
变量创建
创建（声明）变量，可使用var 关键词来声明变量，var可以省略
如：
var carname;
变量声明之后，该变量是空的（它没有值）。
变量赋值
赋值就是存储，将某个值存储这个变量中存储起来，而且可以对一个变量反复赋值。
如：
name = "张三"; // 赋值： 将"张三"存入变量中
name = "李四"; // 赋值： 将"李四"存入变量中
最终变量name的值是最后一次存储的值"你好"
注：也可以在声明变量时对其赋值：
var name = "张三";
给name这个变量设置之为 “张三” ，也可以理解为把 “张三” 这个文字保存在 name 变量中。
变量使用
使用变量可以通过变量的名称直接使用，可以用于计算、输出显示等
变量数据类型
JavaScript 数据类型有以下几种
- 字符串（String）
- 数字(Number)
- 布尔(Boolean)
- 数组(Array)
- 对象(Object)
- 空（Null）
- 未定义（未赋值）（Undefined）
字符串
字符串用来存储字符和文字的变量。使用单引号或双引号：
如：
var name="阿百川";
var name='兵工厂';
您可以在字符串中嵌套使用单双引号，只要不匹配包围字符串的引号即可：
如：
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
数字
数字类型只能用来保存数字：
如：
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
如：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
布尔
布尔常用于判断或者设置状态，布尔（逻辑）只能有两个值：true 或 false。布尔类型可以转换成0、1、‘0’、"1"等
如：
var x=true; // 1
var y=false; // 0
数组
数组用于保存多个数据，如会员的姓名、用户名、密码、手机号等等。
下面的代码创建名为 user 的数组：
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]，以此类推。
对象
对象不仅可以保存普通数据，还可以保存代码操作功能。
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 |
| | | ||
! | 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、定义（申明）变量
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 必须是小写的
function functionname(){
执行代码
}
函数的使用，通过方法名+括号来使用方法，如：
functionname();
这句代码就是使用方法名为**functionname**的方法，必须加上(),()是函数的标志，不可不写。
方法最简单的功能就是将一部分代码放到一起，组成一个代码快，在需要的时候直接执行。因此，方法在写好后是不会自动执行的，除非使用方法，方法里面的代码才会被执行
可以在HTML元素的点击事件中使用方法，HTML的点击事件就是onclick属性。如：
<!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属性来获取和设置元素的值：
var v = document.getElementById('name').value;
document.getElementById('name').value ='张三465';
如果是普通双标签，则使用innerHTML或者innerText来获取和设置元素的内容
var v = document.getElementById('name').innerHTML;
document.getElementById('name').innerHTML = '张三';
或者
var v = document.getElementById('name').innerText;
document.getElementById('name').innerText = '张三';
