theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
97a4f337d6
webveuje/javascriptpress/1.javascript基础.md

444 lines
10 KiB
Markdown
Raw Normal View History

第一节
2020-12-30 13:35:42 +08:00
[[toc]]
js
2020-12-29 18:18:08 +08:00
# javascript 基础
## 简介
javascript 主要是由
- ECMAScript
- DOM
- BOM
> 其中 dom 与 bom 由 浏览器提供
> dom指的是html页面上的标签
> bom 是浏览器提供的接口
## ECMAScript
ECMAScript 是一种语言规范 javascript就是基于这个规范来编写的。
使用语言的时候必须遵循这个规范来进行开发
他包括
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 对象
## DOM
文档对象模型 是由浏览器提供的一个接口 能在javascript中可以操作页面
## BOM
浏览器对象模型 是浏览器提供的一些对于浏览器与用户界面的一些接口 比如可以操作浏览器高度 宽度 与位置等等
## 在页面中使用javascript
demo1
```html
<html>
<head>
<title>javascript演示</title>
<script>
alert("hell world");
</script>
</head>
<body>
打开页面的时候会出现一个弹框 内容为hello world
</body>
</html>
```
> 实际运行
![image-20201229113118362](1.javascript基础.assets/image-20201229113118362.png)
在html中使用javascript是写在`<script></script>`标签中，中间写javascript代码
然后里面是有一个alert("hello world") 这是一个函数 名字叫alert 运行的时候接受一个参数 弹出的信息就是这个参数的文字 比如改成你好世界
demo2
```html
<html>
<head>
<title>javascript演示</title>
<script>
alert("你好世界");
</script>
</head>
<body>
打开页面的时候会出现一个弹框 内容为 你好世界
</body>
</html>
```
> 运行结果
![image-20201229113512817](1.javascript基础.assets/image-20201229113512817.png)
## 什么是函数
上面用到了一个函数 但是并没有函数定义 为什么能使用？
因为浏览器会提供一些预制函数 alert就是浏览器提供的 所以我们并不用定义函数就能使用
### 手动定义一个函数
demo3
```html
<html>
<head>
<title>javascript演示</title>
<script>
function hello(){
alert("你好")
}
hello()
</script>
</head>
<body>
打开页面的时候会出现一个弹框 内容为 你好
</body>
</html>
```
> 页面显示
![image-20201229113911577](1.javascript基础.assets/image-20201229113911577.png)
定义函数使用
```javascript
function 名字(){
函数体内容
}
```
调用是使用 名字 + ()
上面的例子中定义了一个 hello的函数 内容是alert("你好")
运行就是使用hello() 执行这个函数
demo4
```html
<html>
<head>
<title>javascript演示</title>
<script>
function hello(){
alert("你好")
}
hello()
function bay(){
alert("再见")
}
bay()
</script>
</head>
<body>
打开页面的时候会出现一个弹框 内容为 你好 然后会出现 再见
</body>
</html>
```
> 结果
![image](1.javascript基础.assets/Peek 2020-12-29 11-45.gif)
## 变量
alert的时候 括号中填了一句话 但是我们自己写的就没有 那如何实现呢？ 想要实现的话 需要先了解一下javascript的变量
什么叫变量呢？ 就是可以改变的量 比如把灯的开与关比作 0 和 1 的话 开关的状态就是可以改变的 当打开的时候是1 关闭的时候是0
有变量就会有常量 常量就是不可以改变的
如何创建变量
```javascript
var name = "我的名字";
var age;
age = 18;
```
js
2020-12-31 09:56:58 +08:00
创建变量是用var 关键字 创建规则是 `var 变量名 = 变量值` 如果不想赋值初始值的话 `var 变量名` 就是创建一个空的变量 之后用到的时候直接用变量名就可以 因为变量只需要声明一次 就是可以先声明站位 之后需要给赋值的时候再给值
js
2020-12-29 18:18:08 +08:00
```html
<html>
<head>
<title>javascript演示</title>
<script>
var name = "你好";
alert(name);
</script>
</head>
<body>
</body>
</html>
```
> 运行之后页面会弹出内容为 你好 的弹出框
比如把你好改成hello world
```html
<html>
<head>
<title>javascript演示</title>
<script>
js
2020-12-31 09:56:58 +08:00
var name;
name = "hello world";
js
2020-12-29 18:18:08 +08:00
alert(name);
</script>
</head>
<body>
</body>
</html>
```
> 运行之后页面会弹出内容为 hello world 的弹出框
```javascript
解释一下
定义一个变量 名字叫 name 值是 "hello world"
var name = "hello world";
让浏览器弹出name
alert(name);
为什么这个写name 弹出的是 hello world 而不是 name
注意下 name 是没有加引号的 没有加引号的字符串会被认为是关键字 自定义的变量或函数
```
例如
```html
<html>
<head>
<title>javascript演示</title>
<script>
var name = "hello world";
alert("name");
</script>
</head>
<body>
</body>
</html>
```
> 这时候弹出的就是 name 因为加了双引号 被认定为字符串 而不是变量了
为什么" 内容 " 就被认定为字符串呢？
### javascript中的变量类型
#### 字符串 string
先看一下字符串 他是用 "" 包裹的内容 就是被认定为是字符串
比如 "我的名字是xxx" 这一段就会认定为是字符串
name 这不加引号就会被认定为不是字符串 是关键字或者自定义的变量或函数
所有的字符串都是用""或''包裹的
为什么又多了个’‘号呢 但是这两个的效果是一样的
```javascript
var name = "name";
var age = '18';
这两个效果是一样的都是字符串 一个是 name 一个是 18
```
第一节
2020-12-30 13:35:42 +08:00
```html
<html>
<head>
<title>javascript演示</title>
<script>
var name = "name";
var age = '18';
alert(name);
alert(age);
</script>
</head>
<body>
</body>
</html>
```
### 数字 number
有字符串的时候就应该有数字 那么数字是如何定义的呢？
```javascript
var age = 18; 这是一个数字18
var sex = 1.2 这是一个小数 1.2 在程序里面叫做浮点数
```
只要输入数字就可以 不用加引号 这个就是一个数字
上面说只要不加引号的都会被认定为关键字或者是方法或变量 但是这个 18 并没有加为什么没被认定为是变量或者其他呢？
### 命名规范
命名就是你给自己的方法或者变量起的名字 规范是 命名必须用 字母 $ _
- 26个英文字母
- $ 美元符号
- _ 下划线
这三种开头的才会被认定为变量
例如
```javascript
var name;
var $age;
var _name;
```
也可以组合 例如
```javascript
var name$n_jhzshd
```
只要是这三种符号组合的符合规范的情况都是可以的
```javascriot
var na me;
不符合 因为有空格
var na|me
不符合 因为有 |
```
等等 只要不在三种之类的符号 都不是正确的命名
### 数字相加
已经知道了 什么是 数字 什么是 字符串了
数字就是正常的 小数 整数 或者其他进制的数字 其他进制一般用不到 只是写法有区别 这个就不说了
字符串就是用引号包裹的一段文字 可以用双引号 也可以用单引号
那么数字是如何相加呢？
```javascript
var num1 = 10;
var num2 = 15;
var sum = num1 + num2;
alert(sum);
```
这段代码放到页面上执行 就会弹出 25
或者可以
```javascript
var sum = 10 + 15;
alert(sum);
```
或者直接
```javascript
alert(10 + 15);
```
## 操作符
### 加法操作符
可以将两个变量的值和两个数字等相加
> 值有是什么？ 变量是我们定义的名字 值就是变量的内容 比如
```javascript
var num = 10;
变量是mum 值是 10
var name = "helloworld"
变量是name 值是 "helloworld"
```
加法是将两个值相加 数字是返回数学运算之后的值
比如
```javascript
1+1 是2
10 + 15 是35
12 + 13 是25
1.5+2.5 是4
```
#### 赋值顺序
上面让变量接受加法运算的值的时候 变量在前 然后 = 运算 因为在程序中 给变量赋值是将等于号 后面的值给前面的变量 而不是像我们写数学运算的时候 前面是公式 后面是结果
```javascript
var num = 1+1; 正确
1+1 = var num; 错误 因为这样操作会将 num 赋值给1+1 但是1+1并不是变量
```
### 减法操作
有加法一定有减法 减法跟加法一样
```javascript
var num1 = 10;
var num2 = 15;
var sum = num1 - num2;
alert(sum);
```
这个弹出的是 -5 因为 10 - 15 就是-5
```javascript
var num1 = 20;
var num2 = 15;
var sum = num1 - num2;
alert(sum);
```
这个就会弹出 5
剩余就是跟+ 一样的
### 乘法操作
乘法操作跟加减是一样的
```javascript
var num1 = 20;
var num2 = 15;
var sum = num1 * num2;
alert(sum);
```
这个就会弹出300
### 除法
```javascript
var num1 = 30;
var num2 = 15;
var sum = num1 / num2;
alert(sum);
```
这个就会弹出2
```javascript
var num1 = 15;
var num2 = 6;
var sum = num1 / num2;
alert(sum);
```
这个就会弹出 2.5
### 组合起来
比如一个计算中 既有加法又有减法还有乘法除法是怎么样的呢？
```javascript
var sum = 1 + 2 * 3 / 4;
alert(sum);
```
这个会输出什么呢？ 计算的时候会怎么计算呢 是先计算1 + 2 然后得3 再乘以3 得9 再除以4吗？
并不会 因为计算中会有优先级 计算的时候也是先计算乘除法 再计算加减法
```javascript
var sum = 1 + 2 * 3 / 4;
alert(sum);
```
会输出2.5
但是计算顺序如何呢？ 这个计算中* 和/ 哪个先计算呢？
这在编程语言中叫做运算符的优先级 哪个优先级高就先计算哪一个 如果相同的话就依照顺序从左到右的方式计算
比如 1 + 2 * 3 / 4
就会先计算 2 * 3 然后拿到结果 / 4 在 用1 相加
- 2 * 3 = 6
- 6 / 4 = 1.5
- 1 + 1.5 = 2.5
再例如
```javascript
2 * 2 + 4 + 2 / 2
```
这个计算顺序
- 2 * 2 = 4
- 2 / 2 = 1
- 4 + 4 + 1 = 9
这就是操作符的优先级 哪个优先级高就会先计算哪个 如果相同就按从左到右的顺序操作
`+ - * / 的优先级是 * / 高于 + -`
`* 与 / 相同`
`+ 与 - 相同`
## 总结
总共写了
- alert 让浏览器弹出一个对话框
- var 定义变量
- 变量赋值
- 字符串
- 数字
- 数字 加法减法乘法除法
- `+ - * /` 的运算符与优先级顺序
## 作业
js
2020-12-29 18:18:08 +08:00
第一节
2020-12-30 13:35:42 +08:00
- 定义一个变量 赋值为 "这是我的弹出框" 然后让浏览器弹出这个内容
- 定义两个变量 分别赋值 5 和 6 弹出相加结果
- 定义两个数字变量 值随意 弹出 两个变量相乘结果
- 写出 `10 + 5 / 5 * 6 - 10` 的运算顺序
- 自己了解一下 javascript操作符优先级
js
2020-12-29 18:18:08 +08:00
Reference in New Issue Copy Permalink