人生苦短，我学python 异步编程与JS基础

本文链接：https://blog.csdn.net/weixin_47927271/article/details/112686674

一、异步编程

1、认识协程

子线程相互协作
异步编程：实现了协作式并发，大幅度的提升CPU利用率

2、协程的应用(asynchronous 异步)

被async修饰的函数式异步函数，调用异步函数不是直接得到返回值，而是创建一个协程对象(可以跟其他子程序相互协作的子程序)

在这里插入图片描述

二、抓包工具

在这里插入图片描述

在这里插入图片描述
浏览器代理设置

三、JavaScript

把浏览器窗口封装成一个对象，把HTML页面封装成一个对象
JavaScript —> ECMAScript（ES）+ BOM（Browser Object Model）+ DOM（Document Object Model）
语法规范 window document

3、BOM - window - 操控浏览器

1、属性：location / history / navigator / screen / document

2、方法：

alert() / confirm() / prompt()
open() / close()
计时器 setInterval() / setTimeout() / clearInterval() / clearTimeout()

4、DOM - document - 操控页面

1、通过document获取页面元素

getElementById(’…’) -> HTMLElement
getElementsByClass(’…’) -> NodeList[HTMLElement]
getElementsByTagName(’…’) -> NodeList[HTMLElement]
- 只匹配第一个元素 --> querySelector(’…样式表选择器’) -> HTMLElement
- 匹配满足选择器的所有元素 --> querySelectorAll(’…样式表选择器’) -> NodeList[HTMLElement]
获取标签文本信息：纯文本都可以使用textContent，innerHTML（如果不是纯文本就必须用这个）

2、 —> HTMLElement —> addEventListener()

3、修改标签内容：textContent / innerHTML

4、修改标签样式：style / className

5、创建元素：createElement(‘标签名’)

appendChild() / insertBefore()

6、删除元素：parentNode.removeChild(childNode)

  let containerDiv = document.querySelector('#container')
  let addButton = document.querySelector('#add')
  addButton.addEventListener('click', () => {
      // 创建新的元素（标签）
      let newDiv = document.createElement('div')
      // 修改标签的class属性指定类名
      newDiv.className = 'square'
      // 修改标签的style属性定制背景色
      newDiv.style.backgroundColor = getRandomColor()
      // 将新创建的div标签追加到它的父标签中
      // containerDiv.appendChild(newDiv)
      // 将新创建的div标签插入到父标签的第一个子标签前（最前面）
      containerDiv.insertBefore(newDiv, container.firstChild)

5、事件监听器

 <script>
let flashButton = document.querySelector('#flash')
            let timerID = 0
            // 事件监听器中传入的函数参数是一个事件对象（封装了和发生的事件相关的所有信息）
            flashButton.addEventListener('click', (evt) => {
                if(timerID === 0){
                    timerID = setInterval(() => {
                    let allDivs = document.querySelectorAll('#parent>div')
                    allDivs.forEach((div) => {
                        div.style.backgroundColor = getRandomColor()
                    })
                }, 200)
                // flashButton.textContent = "暂停"
                // 通过事件对象的target属性获取事件源（引发事件的标签）
                evt.target.textContent = '暂停'
            } else {
                clearInterval(timerID)
                timerID = 0
                evt.target.textContent = '闪烁'
            }
        })
   </script>

6、Ajax - Asynchronous JavaScript and XML

1、异步请求（不中断浏览器的用户体验，后台请求服务器的数据）

2、局部刷新（不刷新整个页面，哪里需要修改就只刷新这个局部）

	<script>
        // Ajax --> Asynchronous JavaScript and XML
        // 1.异步请求（不中断浏览器的用户体验，后台请求服务器的数据）
        // 2.局部刷新（不刷新整个页面，哪里需要修改就只刷新这个局部）
        let ul = document.querySelector('#news')
        let okButton = document.querySelector('#ok')
        okButton.addEventListener('click', (evt) => {
            fetch('http://api.tianapi.com/internet/index?key=940197d182811ca3834b805d245744b0&num=10')
            .then(resp => resp.json())
            .then(json => {
                // 将获取到的json数据动态的添加到页面上（把数据渲染页面上）
                json.newslist.forEach((news) => {
                    let newItem = document.createElement('li')
                    let anchor = document.createElement('a')
                    anchor.href = news.url
                    anchor.target = '_blank'
                    anchor.textContent = news.title
                    newItem.appendChild(anchor)
                    ul.appendChild(newItem)
                })      
                });
            })

	</script>

7、echarts

使用JS实现数据可视化

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
	<style>
        #main{
    		width: 600px;
			height:400px;
		}
    </style>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>