231 lines
5.5 KiB
Markdown
231 lines
5.5 KiB
Markdown
|
# 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 = "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
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 数字 number
|