js-notebook.md · yoyo/ldc-study-notebook

[toc]

# JavaScript学习笔记

参考手册：https://developer.mozilla.org/zh-CN/

概念：一种解释性的高级语言，主要用来做前端开发，完成网页上的交互任务。（一般是通过浏览器解释执行，但是可以借助nodeJs实现服务器端的开发）

变量var可定义数值、字符串、数组等，数组用方括号[]；对象是键值对的集合，用中括号{}；

在大致了解了html和css之后，可以在html中适当地增加一些js代码来简单的了解下js的效果。

## 关于JavaScript的简单使用

通常在html文件的head和body部分添加js代码;在html文件中使用外部的javaScript脚本文件，用法如下：

```html
<script src="name.js"></script>
```

js代码中的注释方式和C语言中的类似；单行注释采用双斜线，多行注释采用/* */的形式。

```javascript
//单行注释

/*
	多行注释
*/
```

js的变量定义中，可以有$符号;定义函数的时候，要用关键字function;

document.write()可以直接向html网页中输出内容；

## 输入输出方式

### **alert**

alert()函数用于弹出警告消息对话框；

### **confirm**

confirm()函数用于弹出确认消息对话框，返回值在点击“确定”时是true，点击“取消”时是false；

### **prompt**
prompt(str1,str2)函数用于弹出交流对话框，可以让用户提交数据，第一个参数是提示信息，第二个参数是文本框中默认的输出，这个参数可以不写。

### **window**
window.open()打开一个新的浏览器窗口，参数可选，可以有网址，大小等信息，用于设置新打开窗口的属性。
window.close()关闭当前窗口；

## **函数和对象**

函数定义：
```javascript
function function_name(parameter){

}
```
函数参数可有可无，函数返回值可有可无；

javaScript中的作用域只有两种，一个是在整个html页面其作用。另一种是在函数内部起作用。

---

数组的定义：
```javascript
var var_name = new Array();
//数组的使用
var_name[0]=1;
var_name[1]=1;
var_name[2]=1;
//换一种方式
var var_name2=["a","b","c"];
```
javaScript中没有规定数组定义时要给定数组大小，如果给了大小也只是一开始的大小，后续是可以动态变化的；

---

对象定义和使用:

```javascript
var ob_name=new Object();
//换一种写法
var ob_name1={a:0,b:1,c:3}；
//获取属性的值
var temp=ob_name1.a;
var temb=ob_name1[a];
```
javaScript中的对象是不同属性变量的集合，而不是由类class实例化出来的（这一点与其他语言差别较大）；对象中的内容是以键值对的形式出现的，不同的属性之间用逗号隔开。

### 内置对象

js中的对象有三类：自定义对象、内置对象和浏览器对象；

#### Math对象

求最大值、向下取整函数

```html
   <script>
       //最大值
       console.log(Math.max(1,10,299));
       //向下取整数
       console.log(Math.floor(4.9));
   </script>
```

生成随机数

```html
   <script>
       //随机得到一个0~1之间的小数
       console.log(Math.random());
   </script>
```

得到Vmin和Vmax之间的一个随机整数

```html
   <script>
       function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
       }
       //随机得到一个1~10之间的整数
       console.log(getRandom(1,10));
   </script>
```

### Date对象

```html
   <script>
       var today = new Date();
       //输出标准时间
       console.log(today)
       //输出月份，从0开始的，所以加1
       console.log(today.getMonth()+1)
       //输出星期几
       console.log(today.getDay())
       //输出几号
       console.log(today.getDate())
       //输出几时
       console.log(today.getHours())
       //输出几分
       console.log(today.getMinutes())
   </script>
```

## **文档对象模型DOM**

浏览器的全局变量是windows，其他的javaScript定义的全局变量是windows的成员；
document表示的是浏览器窗口中的html页面，document也是windows的成员；

文档对象模型DOM定义了访问和处理html文档的标准方法;DOM将html文件看成是由元素、属性和文本构成的树形结构。

html的标签中有一个ID属性，用来唯一标识该节点，通过ID来获取元素的方式：
document.getElementById("id_Name")

取出元素内的文本：
Object.innerHTML

修改html的样式：
Object.style.property=new style;

设置隐藏和显示效果：
Object.style.display = value,这个value的选择有两种,"none"表示不显示，"block"表示显示；

元素class属性的获取和修改
object.className = classname

### 常用函数介绍

定时运行特定函数：

```javascript
setInterval(code,time)
```

code表示要定期执行的代码，time表示间隔时间，单位是毫秒，示例代码如下：

```javascript
var temp=0;
setInterval(function() {
    temp++;
    console.log(temp)
},1000)
```

下面这个是延时执行：

```javascript
   var temp=0;
   console.log(temp);
   setTimeout(function(){
        temp++;
        console.log(temp);
    },2000)
```

## **浏览器对象模型BOM**

浏览器对象模型
1. windows

alert()
    confirm()
    prompt()
    setInternal()
2. location
    href
    hash
    url
    reload()

3. screen

4. history
    go()

## **调试**

在chrome中启用开发者模式,打开其中的控制台console，可以在这里看到各种报错、警告和调试输出信息。

可以使用的输出调试信息的方式：

1. 使用 window.alert() 弹出警告框。
2. 使用 document.write() 方法将内容写到 HTML 文档中。 
3. 使用 innerHTML 写入到 HTML 元素。
4. 使用 console.log() 写入到浏览器的控制台，建议主要使用这个办法。

## 模板字符串

三个要素：用反单引号`包裹字符串，变量前加$符号，变量外面包裹{}。

## **疑问**

只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法，会覆盖整个文档。

---

## jQuery教程

### 简介

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

优点：

1. 消除浏览器差异；
2. 简介的DOM操作方法；
3. 轻松实现动画、修改css操作；

API手册：[jQuery API 速查](https://jquery.cuishifeng.cn/)

### 基本使用

在jQuery中常见的$符号是变量jQuery的别名。

等着页面DOM加载完了以后再去执行JS代码的写法：

写法一：

```javascript
$(document).ready(function(){
       //函数体
       
});
```

写法二：

```java
$(function(){
       //函数体
       
});
```

### 常用API使用介绍

1、向服务器请求数据方法get

```
$.get(URL,callback);
```

参数说明：

> url：这是希望请求的地址
>
> callback：这是请求成功后执行的函数；

示例代码如下：

```javascript
//在当前代码文件的同一路径下面，要有temp.html文件才行
$.get("temp.html",function(data,status){
            alert("data:"+data+"\n 状态:"+status);
        });
```

如上所示，回调函数中的两个参数data和status是由url返回回来的两个参数，这两个参数叫什么名字无所谓，主要是顺序他们的含义，第一个参数表示的是url返回的数据，第二个参数返回的是状态值；

如果要利用get函数读取本地的csv文件，示例代码如下：

```javascript
//csv文件是一行一行的数据，每行的字段用逗号隔开
$.get("json/work.csv",function(data){
        //先按照换行分开字符串；
        data = data.split('\r\n');
        // console.log(data.length);
        var new_data=[];
        for(var i=0;i<data.length;i++){
          // console.log(data[i]);
          //再根据逗号分开字符串
          var temp = data[i].split(",");
          // console.log(temp);
          new_data.push(temp);
        }
        console.log(new_data);
      });
```

其中的done函数表示成功读取到csv文件之后，再去执行的函数，另外一种写法如下：

```javascript
$.get("json/work.csv").done(
        function(data){
            data = data.split('\r\n');
            // console.log(data.length);
            var new_data=[];
            for(var i=0;i<data.length;i++){
              // console.log(data[i]);
              //再根据逗号分开字符串
              var temp = data[i].split(",");
              // console.log(temp);
              new_data.push(temp);
            }
            console.log(new_data);
        }
      );
```

遍历操作：

```
$(selector).each(function(index,element))
```

## Node.js

javascript可以执行的原因是因为浏览器中有解析引擎可以执行JS代码，chrome浏览器中的是V8引擎，性能较好。javascript运行在浏览器上，实现的是前端开发，如果采用的是node.js的运行环境，就变成了后端开发。

Node.js是基于chrome V8引擎的JavaScript的运行环境。

查看已经安装的node.js的版本号：

```bash
node -v
```

#### helloWorld

新建一个文件hello.js

```js
console.log("hello,node!");
```

命令行工具切换到当前文件目录下面，执行：

```bash
node  hello.js
```

CommonJs规定：

每个模块内部，module变量代表当前变量，module变量是一个对象，他的exports属性是对外的接口，加载某个模块，其实是加载该模块的module.exports属性。

#### 模块的使用

模块的加载

```javascript
const fs = require('fs')
```

使用require加载模块时，会运行require模块中的代码；

每个自定义模块，变量的作用域只在模块内，可以通过module中的exports方法导出模块内的内容。

```javascript
console.log(module)
```

模块内容向外暴露接口：

```javascript
//向外暴露接口的文件 myModule.js
module.exports.xxx = "test1"
module.exports.testf = function(){
    console.log("hello!")
}
```

调用的模块

```javascript
const myM = require("./myModule")
console.log(myM)
```

#### 文件模块fs

文件读操作

```js
//导入文件模块
const fs = require('fs')
fs.readFile('temp.html','utf-8',function(err,data){
    //输出错误信息
    console.log(err)
    console.log('-------')
    //输出文件数据
    console.log(data);
})
```

文件写操作

```js
//导入文件模块
const fs = require('fs')
fs.writeFile("temp.txt","hhhhhaaaa!",function(error){
    console.log(error);
})
```

#### 路径模块path

```javascript
//导入路径模块
const path = require('path')
const pathStr = path.join('/a','/b','./d','e')
console.log(pathStr);
```

#### http模块

```javascript
//导入http模块
const http = require('http')

const server= http.createServer()

server.on('request',(req,res)=>{
    console.log("someone is visiting!");
    res.end("hello,World!")
})
server.listen(8089,()=>{
    console.log("http://127.0.0.1:80 is listening!");
})
```

#### npm

nodejs中的第三方模块就是包，npm 是nodejs的包管理工具，方便地下载js库，构建与运行前端项目。

安装完nodejs以后，可以通过下面命令查看npm版本：

```bash
npm -v
```

初始化项目环境,执行命令后会生成一个package.json文件，里面有项目的各种依赖包信息：

```bash
npm init
```

安装软件：

```bash
npm install jquery
```

可以指定安装的版本，可以是粗浅的版本，也可以是具体的

```bash
npm install jquery@2
```

安装分为全局安装和本地安装，默认本地安装，加上参数global全局安装

```bash
npm install jquery --global
```

如果是从其他地方拷贝了一份package.json文件，那么执行下列命令可以直接把需要的所有依赖包安装上，

```bash
npm install
```

切换软件源

```bash
npm config set registry https://registry.npm.taobao.org
```

脚手架的安装

```bash
npm install -g @vue/cli
```

启动脚手架

```bash
vue ui
```

之后进入图形化界面，就可以按照步骤新建项目了，

进入项目文件夹，输入下面命令启动

```bash
npm run serve
```

## Vue

vue是一个JavaScript框架，简化了DOM操作，响应式数据驱动。

### helloWorld

```html
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello,Vue!'
            }
        });
    </script>
```

+ el挂载点

el设置css选择器定位元素，其中的{{}}的内容会被data内的内容替换

+ data数据对象

要渲染的数据存在data中，可以是复杂元素

### 指令

- v-text

实现文本的替换，该指令指向标签内的内容会被替换

```html
    <div id="app">
        {{ message }}
        <p v-text="hello">测试一下</p>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello,Vue!',
                hello:"替换的结果"
            }
        });
    </script>
```

- v-html

实现标签内容的替换，内容可以含有标签

```html
    <div id="app">
        {{ message }}
        <p v-html="hello">测试一下
        </p>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello,Vue!',
                hello:"<a href='#'>sss</a>"
            }
        });
    </script>
```

- v-on

动作事件的切换,其中的v-on:可以用@替换

```html
    <div id="app">
       <input type="button" value="点击测试" v-on:click="test">
       <input type="button" value="换种写法" @click="test">
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            methods:{
                test:function(){
                    alert("你好!")
                },
            }
        });
    </script>
```

#### 简单案例：计数器的实现

```html
    <div id="app">
      <div>
          <button @click = "sub"> - </button>
          <span>{{ num }}</span>
          <button @click = "add"> + </button>
      </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                num:1,
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num = this.num+1;
                    }else{
                        alert("too big!");
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num = this.num-1;
                    }else{
                        alert("too small!");
                    }
                }
            }
        });
    </script>
```

- v-show

显示属性

```html
    <div id="app">
      <div>
          <img src="logo.png" v-show="isShow">
          <div>
            <button @click = "show">显示图片</button>
            <button @click = "notshow">不显示图片</button>
          </div>
      </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                isShow:true,
            },
            methods:{
                show:function(){
                    this.isShow = true;
                },
                notshow:function(){
                    this.isShow = false;
                }
            }
        });
    </script>
```

- v-if

通过表达式的真假来决定显示或隐藏

```html
    <div id="app">
      <div>
          <img src="logo.png" v-if="isShow">
          <div>
            <button @click = "show">显示图片</button>
            <button @click = "notshow">不显示图片</button>
          </div>
      </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                isShow:true,
            },
            methods:{
                show:function(){
                    this.isShow = true;
                },
                notshow:function(){
                    this.isShow = false;
                }
            }
        });
    </script>
```

- v-bind

设置元素的属性

```html
    <div id="app">
      <div>
          <img v-bind:src="imgSrc" >
      </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                imgSrc:"logo.png",
            }
        });
    </script>
```

- v-for

根据数据生成列表结构

```html
    <div id="app">
      <div>
          <ul v-for="(item,index) in aaa">
              <li>{{index + 1 }}:{{item}}</li>
          </ul>
      </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                aaa:['星期一','星期二','星期三','星期四','星期五'],
            }
        });
    </script>
```

- v-model

获取和设置表单元素(双向绑定)

```html
    <div id="app">
      <div>
         <input type="text" name="" id="" v-model="mess">
      </div>
      <h2>{{mess}}</h2>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                mess:"hahah",
            }
        });
    </script>
```

### axios的使用

库的导入

```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```

使用如下：

```html
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script>
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=2").then(function(response){
                console.log(response);
            })
        }
    </script>
```

#### vue+axios

```html
    <div id="app">
      <div>
         <input type="button" value="获取数据" @click="getjoke">
      </div>
      <h2>{{joke}}</h2>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                joke:"",
            },
            methods:{
                getjoke:function(){
                    var temp = this;  //这一句为什么要加？
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        temp.joke = response.data;
                        console.log(response.data);
                    })
                }
                
            }
        });
    </script>
```

### vue+Echarts

新建vue项目：

```bash
vue create vchart
```

选择手动创建，选择合适的组件，然后按确定，之后启动项目；

```bash
cd vchart
npm run serve
```

在vue下面的views文件中新建文件，新建的文件需要在路由中设置好路由

yoyo/ldc-study-notebook

简介

发行版

贡献者

近期动态

yoyo/ldc-study-notebook .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

yoyo/ldc-study-notebook