444 lines
10 KiB
Markdown
444 lines
10 KiB
Markdown
[[toc]]
|
||
# 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>
|
||
|
||
|
||
```
|
||
> 实际运行
|
||
|
||
|
||
在html中使用javascript是写在`<script></script>`标签中，中间写javascript代码
|
||
|
||
然后里面是有一个alert("hello world") 这是一个函数 名字叫alert 运行的时候接受一个参数 弹出的信息就是这个参数的文字 比如改成你好世界
|
||
|
||
demo2
|
||
```html
|
||
<html>
|
||
<head>
|
||
<title>javascript演示</title>
|
||
<script>
|
||
alert("你好世界");
|
||
</script>
|
||
</head>
|
||
<body>
|
||
打开页面的时候会出现一个弹框 内容为 你好世界
|
||
</body>
|
||
</html>
|
||
|
||
```
|
||
> 运行结果
|
||
|
||
|
||
## 什么是函数
|
||
上面用到了一个函数 但是并没有函数定义 为什么能使用？
|
||
|
||
因为浏览器会提供一些预制函数 alert就是浏览器提供的 所以我们并不用定义函数就能使用
|
||
|
||
### 手动定义一个函数
|
||
demo3
|
||
```html
|
||
<html>
|
||
<head>
|
||
<title>javascript演示</title>
|
||
<script>
|
||
function hello(){
|
||
alert("你好")
|
||
}
|
||
hello()
|
||
</script>
|
||
</head>
|
||
<body>
|
||
打开页面的时候会出现一个弹框 内容为 你好
|
||
</body>
|
||
</html>
|
||
```
|
||
> 页面显示
|
||
|
||
|
||
定义函数使用
|
||
```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>
|
||
```
|
||
> 结果
|
||
|
||
|
||
## 变量
|
||
alert的时候 括号中填了一句话 但是我们自己写的就没有 那如何实现呢？ 想要实现的话 需要先了解一下javascript的变量
|
||
|
||
什么叫变量呢？ 就是可以改变的量 比如把灯的开与关比作 0 和 1 的话 开关的状态就是可以改变的 当打开的时候是1 关闭的时候是0
|
||
有变量就会有常量 常量就是不可以改变的
|
||
|
||
如何创建变量
|
||
```javascript
|
||
var name = "我的名字";
|
||
var age;
|
||
age = 18;
|
||
```
|
||
创建变量是用var 关键字 创建规则是 `var 变量名 = 变量值` 如果不想赋值初始值的话 `var 变量名` 就是创建一个空的变量 之后用到的时候直接用变量名就可以 因为变量只需要声明一次 就是可以先声明站位 之后需要给赋值的时候再给值
|
||
```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>
|
||
var name;
|
||
name = "hello world";
|
||
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
|
||
```
|
||
```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 定义变量
|
||
- 变量赋值
|
||
- 字符串
|
||
- 数字
|
||
- 数字 加法减法乘法除法
|
||
- `+ - * /` 的运算符与优先级顺序
|
||
|
||
## 作业
|
||
|
||
- 定义一个变量 赋值为 "这是我的弹出框" 然后让浏览器弹出这个内容
|
||
- 定义两个变量 分别赋值 5 和 6 弹出相加结果
|
||
- 定义两个数字变量 值随意 弹出 两个变量相乘结果
|
||
- 写出 `10 + 5 / 5 * 6 - 10` 的运算顺序
|
||
- 自己了解一下 javascript操作符优先级
|
||
|