ECMAScript 学习笔记03

最新推荐文章于 2023-09-04 11:05:08 发布
最新推荐文章于 2023-09-04 11:05:08 发布
阅读量118 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnalogElectronic/article/details/111146669
版权

01_let关键字.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_let关键字</title>
</head>
<body>

<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<!--
***let
1. 作用:
  * 与var类似, 用于声明一个变量
2. 特点:
  * 在块作用域内有效
  * 不能重复声明
  * 不会预处理, 不存在提升
3. 应用:
  * 循环遍历加监听
  * 使用let取代var是趋势
-->
<script type="text/javascript">
    //console.log(age);// age is not defined
    let age = 12;
    //let age = 13;不能重复声明
    console.log(age);
    let btns = document.getElementsByTagName('button');
    for(let i = 0;i<btns.length;i++){
            btns[i].onclick = function () {
                alert(i);
            }
    }

</script>
</body>

</html>

02_const关键字.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_const关键字</title>
</head>
<body>
<!--
1. 作用:
  * 定义一个常量
2. 特点:
  * 不能修改
  * 其它特点同let
3. 应用:
  * 保存不用改变的数据
-->
<script type="text/javascript">
    const sex = '男';
    console.log(sex);
    //sex = '女';//不能修改
    console.log(sex);
</script>
</body>
</html>

03_变量的解构赋值.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_变量的解构赋值</title>
</head>
<body>
<!--
1. 理解:
  * 从对象或数组中提取数据, 并赋值给变量(多个)
2. 对象的解构赋值
  let {n, a} = {n:'tom', a:12}
3. 数组的解构赋值
  let [a,b] = [1, 'atguigu'];
4. 用途
  * 给多个形参赋值
-->
<script type="text/javascript">
    let obj = {name : 'kobe', age : 39};
//    let name = obj.name;
//    let age = obj.age;
//    console.log(name, age);
    //对象的解构赋值
    let {age} = obj;
    console.log(age);
//    let {name, age} = {name : 'kobe', age : 39};
//    console.log(name, age);

    //3. 数组的解构赋值  不经常用
    let arr = ['abc', 23, true];
    let [a, b, c, d] = arr;
    console.log(a, b, c, d);
    //console.log(e);
    function person(p) {//不用解构赋值
        console.log(p.name, p.age);
    }
    person(obj);

    function person1({name, age}) {
     console.log(name, age);
    }
    person1(obj);


</script>
</body>
</html>

04_模板字符串.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_模板字符串</title>
</head>
<body>
<!--
1. 模板字符串 : 简化字符串的拼接
  * 模板字符串必须用 `` 包含
  * 变化的部分使用${xxx}定义
-->
<script type="text/javascript">
    let obj = {
        name : 'anverson',
        age : 41
    };
    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);

    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);
</script>
</body>
</html>

05_简化的对象写法.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_简化的对象写法</title>
</head>
<body>
<!--
简化的对象写法
* 省略同名的属性值
* 省略方法的function
* 例如:
  let x = 1;
  let y = 2;
  let point = {
    x,
    y,
    setX (x) {this.x = x}
  };
-->
<script type="text/javascript">

    let x = 3;
    let y = 5;
    //普通额写法
//    let obj = {
//        x : x,
//        y : y,
//        getPoint : function () {
//            return this.x + this.y
//        }
//    };
    //简化的写法
    let obj = {
        x,
        y,
        getPoint(){
            return this.x
        }
    };
    console.log(obj, obj.getPoint());
</script>
</body>
</html>

06_箭头函数.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_箭头函数</title>

</head>
<body>
    <button id="btn">测试箭头函数this_1</button>
    <button id="btn2">测试箭头函数this_2</button>


<!--
* 作用: 定义匿名函数
* 基本语法:
  * 没有参数: () => console.log('xxxx')
  * 一个参数: i => i+2
  * 大于一个参数: (i,j) => i+j
  * 函数体不用大括号: 默认返回结果
  * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数

* 箭头函数的特点：
    1、简洁
    2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
   3、扩展理解： 箭头函数的this看外层的是否有函数，
        如果有，外层函数的this就是内部箭头函数的this，
        如果没有，则this是window。
-->
<script type="text/javascript">
  let fun = function () {
       console.log('fun()');
   };
   fun();
   //没有形参，并且函数体只有一条语句
   let fun1 = () => console.log('fun1()');
    fun1();
   console.log(fun1());
    //一个形参，并且函数体只有一条语句
    let fun2 = x => x;
    console.log(fun2(5));
    //形参是一个以上
    let fun3 = (x, y) => x + y;
    console.log(fun3(25, 39));//64

    //函数体有多条语句
    let fun4 = (x, y) => {
        console.log(x, y);
        return x + y;
    };
    console.log(fun4(34, 48));//82

    setTimeout(() => {
        console.log(this);
    },1000)

   let btn = document.getElementById('btn');
   //没有箭头函数
   btn.onclick = function () {
       console.log(this);//btn
   };
   //箭头函数
   let btn2 = document.getElementById('btn2');

    let obj = {
        name : 'kobe',
        age : 39,
        getName : () => {
            btn2.onclick = () => {
                console.log(this);//obj
            };
        }
    };
    obj.getName();


 function Person() {
     this.obj = {
         showThis : () => {
             console.log(this);
         }
     }
 }
    let fun5 = new Person();
    fun5.obj.showThis();

</script>

</body>
</html>

07_点点点运算符.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07_3点运算符</title>
</head>
<body>
<!--
* 用途
1. rest(可变)参数
    * 用来取代arguments 但比arguments灵活,只能是最后部分形参参数
  function add(...values) {
    let sum = 0;
    for(value of values) {
      sum += value;
    }
    return sum;
  }
2. 扩展运算符
  let arr1 = [1,3,5];
  let arr2 = [2,...arr1,6];
  arr2.push(...arr1);
-->
<script type="text/javascript">
    function fun(...values) {
        console.log(arguments);
//        arguments.forEach(function (item, index) {
//            console.log(item, index);
//        });
        console.log(values);
        values.forEach(function (item, index) {
            console.log(item, index);
        })
    }
    fun(1,2,3);

    let arr = [2,3,4,5,6];
    let arr1 = ['abc',...arr, 'fg'];
    console.log(arr1);


</script>

</body>
</html>

08_形参默认值.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_形参默认值</title>
</head>
<body>
<!--
    * 形参的默认值----当不传入参数的时候默认使用形参里的默认值
    function Point(x = 1,y = 2) {
    this.x = x;
    this.y = y;
    }
-->
<script type="text/javascript">
    //定义一个点的坐标
    function Point(x=12, y=12) {
        this.x = x;
        this.y = y;
    }
    let point = new Point(25, 36);
    console.log(point);
    let p = new Point();
    console.log(p);
    let point1 = new Point(12, 35);
    console.log(point1);

</script>

</body>
</html>

09_Promise对象.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_Promise对象</title>
</head>
<body>
<!--
1. 理解:
  * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
  * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
  * ES6的Promise是一个构造函数, 用来生成promise实例
2. 使用promise基本步骤(2步):
  * 创建promise对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态为 pending
      //执行异步操作
      if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
      } else {
        reject(errMsg);//修改promise的状态为rejected
      }
    })
  * 调用promise的then()
    promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))
3. promise对象的3个状态
  * pending: 初始化状态
  * fullfilled: 成功状态
  * rejected: 失败状态
4. 应用:
  * 使用promise实现超时处理

  * 使用promise封装处理ajax请求
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
    }
    request.responseType = 'json';
    request.open("GET", url);
    request.send();
-->

<script type="text/javascript">

    //创建一个promise实例对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise的状态为pending---->初始化状态
        console.log('1111');//同步执行
        //启动异步任务
        setTimeout(function () {
            console.log('3333');
            //resolve('atguigu.com');//修改promise的状态pending---->fullfilled（成功状态）
            reject('xxxx');//修改promise的状态pending----->rejected(失败状态)
        },1000)
    });
    promise.then((data) => {
        console.log('成功了。。。' + data);
    }, (error) => {
        console.log('失败了' + error);
    });
    console.log('2222');


    //定义一个请求news的方法
    function getNews(url) {
        //创建一个promise对象
        let promise = new Promise((resolve, reject) => {
            //初始化promise状态为pending
            //启动异步任务
            let request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if(request.readyState === 4){
                    if(request.status === 200){
                        let news = request.response;
                        resolve(news);
                    }else{
                        reject('请求失败了。。。');
                    }
                }
            };
            request.responseType = 'json';//设置返回的数据类型
            request.open("GET", url);//规定请求的方法，创建链接
            request.send();//发送
        })
        return promise;
    }

    getNews('http://localhost:3000/news?id=2')
            .then((news) => {
                console.log(news);
                document.write(JSON.stringify(news));
                console.log('http://localhost:3000' + news.commentsUrl);
                return getNews('http://localhost:3000' + news.commentsUrl);
            }, (error) => {
                alert(error);
            })
            .then((comments) => {
                console.log(comments);
                document.write('<br><br><br><br><br>' + JSON.stringify(comments));
            }, (error) => {
                alert(error);
            })
</script>

</body>

</html>

10_Symbol.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Symbol</title>
</head>
<body>
  <!--
    前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境
    Symbol：
      概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
      特点：
        1、Symbol属性对应的值是唯一的，解决命名冲突问题
        2、Symbol值不能与其他数据进行计算，包括同字符串拼串
        3、for in, for of遍历时不会遍历symbol属性。
      使用：
        1、调用Symbol函数得到symbol值
          let symbol = Symbol();
          let obj = {};
          obj[symbol] = 'hello';
        2、传参标识
          let symbol = Symbol('one');
          let symbol2 = Symbol('two');
          console.log(symbol);// Symbol('one')
          console.log(symbol2);// Symbol('two')
        3、内置Symbol值
          * 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
          - Symbol.iterator
           * 对象的Symbol.iterator属性，指向该对象的默认遍历器方法(后边讲)

  -->


<script type="text/javascript">
    window.onload = function () {
      let symbol = Symbol();
      console.log(typeof symbol);
      console.log(symbol);
      
      // 用作对象的属性(唯一)
      let obj = {username: 'kobe', age: 39};
      obj[symbol] = 'hello';
      obj[symbol] = 'symbol';
      console.log(obj);
      for(let i in obj){
        console.log(i);
      }
    }
</script>

</body>
</html>

11_Iterator遍历器.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Iterator遍历器</title>
</head>
<body>
  <!--
    概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
    作用：
      1、为各种数据结构，提供一个统一的、简便的访问接口；
      2、使得数据结构的成员能够按某种次序排列
      3、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。
    工作原理：
      - 创建一个指针对象，指向数据结构的起始位置。
      - 第一次调用next方法，指针自动指向数据结构的第一个成员
      - 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
      - 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
        * value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
        * 当遍历结束的时候返回的value值是undefined，done值为false
    原生具备iterator接口的数据(可用for of遍历)
      1、Array
      2、arguments
      3、set容器
      4、map容器
      5、String
      。。。
  -->

  <script type="text/javascript">
      window.onload = function () {
        // 自定义iterator生成指针对象
        function mockIterator(arr) {
          let nextIndex = 0;
          return {
            next: function () {
              return nextIndex<arr.length?{value: arr[nextIndex++], done: false}:{value: undefined, done: true}
            }
          }
        }

        let arr = [1,2,3,4,5];
        let iteratorObj = mockIterator(arr);
        console.log(iteratorObj.next());
        console.log(iteratorObj.next());
        console.log(iteratorObj.next());


        // 使用解构赋值以及...三点运算符时会调用iterator接口
        let arr1 = [1,2,3,4,5];
        let [value1, ...arr2] = arr1;
        // yield*语句
        function* generatorObj() {
          yield '1'; // 可遍历数据，会自动调用iterator函数
          yield '3';
        }
        let Go = generatorObj();
        console.log(Go.next());
        console.log(Go.next());
        console.log(Go.next());


        // 原生测试  数组
        let arr3 = [1, 2, 'kobe', true];
        for(let i of arr3){
          console.log(i);
        }
        // 字符串  string
        let str = 'abcdefg';
        for(let item of str){
          console.log(item);
        }
        

      }
  </script>
</body>
</html>

12_Generator函数.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Generator函数</title>
</head>
<body>

  <!--
   Generator函数
    概念：
      1、ES6提供的解决异步编程的方案之一
      2、Generator函数是一个状态机，内部封装了不同状态的数据，
      3、用来生成遍历器对象
      4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果
    特点：
      1、function 与函数名之间有一个星号
      2、内部用yield表达式来定义不同的状态
      例如：
        function* generatorExample(){
          let result = yield 'hello';  // 状态值为hello
          yield 'generator'; // 状态值为generator
        }
      3、generator函数返回的是指针对象(接11章节里iterator)，而不会执行函数内部逻辑
      4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
      5、再次调用next方法会从上一次停止时的yield处开始，直到最后
      6、yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。
  -->
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    // 小试牛刀
    function* generatorTest() {
      console.log('函数开始执行');
      yield 'hello';
      console.log('函数暂停后再次启动');
      yield 'generator';
    }
    // 生成遍历器对象
    let Gt = generatorTest();
    // 执行函数，遇到yield后即暂停
    console.log(Gt); // 遍历器对象
    let result = Gt.next(); // 函数执行,遇到yield暂停
    console.log(result); // {value: "hello", done: false}
    result = Gt.next(); // 函数再次启动
    console.log(result); // {value: 'generator', done: false}
    result = Gt.next();
    console.log(result); // {value: undefined, done: true}表示函数内部状态已经遍历完毕

    // 对象的Symbol.iterator属性;
    let myIterable = {};
    myIterable[Symbol.iterator] = function* () {
      yield 1;
      yield 2;
      yield 4;
    };
    for(let i of myIterable){
      console.log(i);
    }
    let obj = [...myIterable];
    console.log(obj);

    console.log('-------------------------------');
    // 案例练习
    /*
    * 需求：
    * 1、发送ajax请求获取新闻内容
    * 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容
    * 3、新闻内容获取失败则不需要再次发送请求。
    * 
    * */ 
    function* sendXml() {
      // url为next传参进来的数据
     let url = yield getNews('http://localhost:3000/news?newsId=2');
      yield getNews(url);
    }
    function getNews(url) {
      $.get(url, function (data) {
        console.log(data);
        let commentsUrl = data.commentsUrl;
        let url = 'http://localhost:3000' + commentsUrl;
        // 当获取新闻内容成功，发送请求获取对应的评论内容
        // 调用next传参会作为上次暂停是yield的返回值
        sx.next(url);
      })
    }


    let sx = sendXml();
    // 发送请求获取新闻内容
    sx.next();

    

</script>


</body>
</html>

13_async函数.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>async函数</title>
</head>
<body>

<!--
  async函数(源自ES2017)
  概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作
  本质： Generator的语法糖
  语法：
      async function foo(){
        await 异步操作;
        await 异步操作；
      }
  特点：
    1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
    2、返回的总是Promise对象，可以用then方法进行下一步操作
    3、async取代Generator函数的星号*，await取代Generator的yield
    4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

-->
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    async function timeout(ms) {
      return new Promise(resolve => {
        setTimeout(resolve, ms);
      })
    }
    
    async function asyncPrint(value, ms) {
      console.log('函数执行', new Date().toTimeString());
      await timeout(ms);
      console.log('延时时间', new Date().toTimeString());
      console.log(value);
    }

    console.log(asyncPrint('hello async', 2000));
    
    // await 
    async function awaitTest() {
      let result = await Promise.resolve('执行成功');
      console.log(result);
      let result2 = await Promise.reject('执行失败');
      console.log(result2);
      let result3 = await Promise.resolve('还想执行一次');// 执行不了
      console.log(result3);
    }
    awaitTest();
  
  
    // 案例演示
    async function sendXml(url) {
      return new Promise((resolve, reject) => {
        $.ajax({
          url,
          type: 'GET',
          success: data =>  resolve(data),
          error: error => reject(error)
        })
      })
    }

    async function getNews(url) {
      let result = await sendXml(url);
      let result2 = await sendXml(url);
      console.log(result, result2);
    }
    getNews('http://localhost:3000/news?id=2')

</script>

</body>
</html>

14_class.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12_class</title>
</head>
<body>
</body>
<!--
1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法
-->
<script type="text/javascript">
    class Person {
        //调用类的构造方法
        constructor(name, age){
            this.name = name;
            this.age = age;

        }
        //定义一般的方法
        showName(){
            console.log(this.name, this.age);
        }
    }
    let person = new Person('kobe', 39);
    console.log(person, person.showName());

    //定义一个子类
    class StrPerson extends Person{
        constructor(name, age, salary){
            super(name, age);//调用父类的构造方法
            this.salary = salary;
        }
        showName(){//在子类自身定义方法
            console.log(this.name, this.age, this.salary);
        }
    }
    let str = new StrPerson('weide', 38, 1000000000);
    console.log(str);
    str.showName();
</script>
</html>

15_Module.html

ES6模块化语法

ES7.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
1. 指数运算符(幂): **
2. Array.prototype.includes(value) : 判断数组中是否包含指定value

-->
<script type="text/javascript">
    console.log(3 ** 3);//27
    let arr = [1,2,3,4, 'abc'];
    console.log(arr.includes(2));//true
    console.log(arr.includes(5));//false
</script>
</body>
</html>
AnalogElectronic
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易购物车（最全代码解析）JavaScript（ES6面向对象）
CSErtuh的博客
09-08 3916
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <style type="text/css"> table { width: 50%; position: relative; margin: 0px auto; border-collapse: collapse; ...
JS代码写简单购物车
m0_64054560的博客
05-21 2031
初学者菜鸟编写简单的购物车样式，实现点击按钮增加删除操作，点击删除按钮，删除整行。
js实现点击事件以及this指向
weixin_51609337的博客
07-14 1572
首页写个button标签（div,p什么的也都可以） <button type="button">点击</button> 1.通过点击事件 let button = document.getElementsByTagName('button')[0]; button.onclick = function(){ console.log(this);//button } this指向接收事件的元素。 2.监听点击事件 let button = document.g.
【JavaScript高级】ES6中需要深入理解掌握的18个关键点总结笔记
小牛itbull的博客
12-01 467
1. let关键字 &lt;body&gt; &lt;button&gt;测试1&lt;/button&gt; &lt;br&gt; &lt;button&gt;测试2&lt;/button&gt; &lt;br&gt; &lt;button&gt;测试3&lt;/button&gt; &lt;br&gt; &lt;!-- ***le
三、ECMAScript 6 语法简介（5）
走在bug的路上
09-26 4450
● Promise ○ 基本用法 ○ 创建已处理的 Promise ○ 响应多个 Promise ● async 函数 ○ 基本用法 ○ await 和并行任务执行 ○ 使用 async 函数重写 Promise 链 ○ 错误处理
ECMAScript——学习笔记汇总
LinHt_CSDN的博客
09-12 260
ECMAScript 概述 ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上后两者是ECMA-262标准的实现和扩展。 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，
JS笔记（一） ECMAScript部分
Kivitor的博客
03-23 249
后面需要学的大部分都是js基础上的一个个负载方法，提取出了许多门类 专业素养 一个人的厚重感可以和书比，让人信服 web发展史 1993 Mosaic------ 第一个普遍使用的 显示图片的 网页浏览器（马克·安德森，版权在大学手里） ​ 但是伊利诺伊大学把Mosaic版权 — 卖给Spy Glass — 又被微软收购 — 后面变成了IE1.0（图形化界面抄的是乔布斯的） Netscape Navigator 网景 是该团队重做的浏览器 火狐的前生（网景破产后 开放了源码） JavaScrip
javascript学习笔记
11-24
JavaScript的核心是ECMAScript，这是一种标准化的脚本语言规范，定义了语言的语法和基本对象。ECMAScript提供了变量、数据类型、运算符、语句和函数等基本编程元素，是JavaScript的基础。 文档对象模型（DOM）是...
typescript学习笔记
03-04
Typescript 学习笔记 TypeScript 是一种静态类型的编程语言，作为 JavaScript 的超集，它的主要特性是坚持与 ECMAScript 标准同步发展。下面是 TypeScript 的一些重要知识点： 一、ECMAScript 标准同步发展 * ...
ES6 学习笔记.pdf
07-05
本次学习笔记中涉及的知识点主要涵盖了ES6的关键特性，包括变量声明、字符串和正则表达式、函数、对象、异步处理、数组、模块化等。 1. 块级作用域 在ES6之前，JavaScript只有一种作用域，即函数作用域。这使得变量...
es6-defer:EcmaScript 6的延迟版本
05-11
es6-defer EcmaScript 6的延迟版本。 它的工作原理与的deferred相同，但它们在下面使用EcmaScript 6 promises。 您可以从npm安装它。 npm install es6-defer 例子： import defer from 'es6-defer' ; let deferred = defer ( ) ; deferred . promise . then ( foo ) ; deferred . resolve ( true ) ; deferred . reject ( false ) ; 它完全用ES6编写，需要ES6承诺，但不包括它们。 包括它是您的责任。
JavaScript学习笔记
04-10
### JavaScript学习笔记 #### JavaScript简介 JavaScript是一种广泛使用的脚本语言，主要应用于Web前端开发，用来为网页添加交互性。JavaScript不仅可以操作HTML和CSS，还能处理数据、响应用户输入，并与服务器通信...
JavaScript个人学习笔记
02-18
JavaScript的核心是ECMAScript，它定义了语言的语法规范，如变量定义、控制结构、函数等。ECMAScript标准由ECMA国际制定，每一年或几年发布一个新的版本，如ES6、ES7等。 JavaScript中的变量是用于存储数据的容器，...
基于微信小程序做了个交友小程序
AnalogElectronic的博客
06-01 3308
实现的功能是用户上传自己的资料，给大家看。其实就是一个交友、婚恋、相亲的免费广告平台。 先看效果 主要代码： 01列表页 <!--index.wxml--> <!-- <form bindsubmit="formSubmit"> <input name="name" placeholder="请输入名字"></input> <button form-type="submit">submit</button> </
jQuery学习笔记05
AnalogElectronic的博客
09-27 1863
常见效果 01__表格隔行变色.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01__表格隔行变色</title> <style> div, span, p { width: 140px; height: 140px; margin: 5px; backg
微信小程序十二时辰时钟
AnalogElectronic的博客
06-27 1531
微信小程序十二时辰时钟
js+html实现打字游戏v1
AnalogElectronic的博客
09-04 1152
实现逻辑：设置定时器每秒刷新一次，定时器刷新多少次执行一次生成单词操作来决定单词的生成速度，例如初始单词生成速度为1，那么定时器刷新5次才生成一次单词，每个单词用span来装，每组10个单词放到div里。监听键盘按下事件，用一个变量str记录键盘连续按下的字母组成的字符串，当字符串str包含span中的字符串，则span变红，同时右下角得分数加1，当div中的一排span都变红时，从body里删掉该div。//这里可以使用固定单词。//清除全部打出的一行。
js+html实现打字游戏v2
最新发布
AnalogElectronic的博客
09-04 1140
/单词生成速度，可以根据当前得分来设置，得分越高速度越快，比如当得分大于200时速度设为2，大于300百是速度设为3。，在此基础之上增加了从文件读取到的单词，随机选取10个单词。//从文件读取到的单词，随机选取10个单词。附录：englishg words.txt。//这里可以使用固定单词。//清除全部打出的一行。
微信小程序滚动字幕
AnalogElectronic的博客
06-27 965
微信小程序滚动字幕
JavaScript核心技术：ECMAScript, BOM与DOM事件解析
"JavaScript学习笔记，主要涵盖ECMAScript、BOM和DOM，以及事件处理的简单学习。" 在JavaScript的学习中，我们首先接触到的是ECMAScript（ES），它是一种标准化的脚本语言规范，定义了JavaScript的核心语法和数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值