From b2fb97265ac39b2c6bafd6652a24dbcab2801aef Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 6 Nov 2023 17:37:45 +0800 Subject: [PATCH 01/18] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...72\346\234\254\346\246\202\345\277\265.md" | 61 +++++++++++++++++++ ...62\345\222\214\346\225\260\347\273\204.md" | 0 .../20231102-JS\345\257\271\350\261\241.md" | 0 3 files changed, 61 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231031-JS\347\232\204\345\237\272\346\234\254\346\246\202\345\277\265.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231102-JS\345\257\271\350\261\241.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231031-JS\347\232\204\345\237\272\346\234\254\346\246\202\345\277\265.md" "b/\345\274\240\351\207\221\344\270\275/20231031-JS\347\232\204\345\237\272\346\234\254\346\246\202\345\277\265.md" new file mode 100644 index 0000000..456eb35 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231031-JS\347\232\204\345\237\272\346\234\254\346\246\202\345\277\265.md" @@ -0,0 +1,61 @@ +### JS的基本概念 + +## javaScript是什么？ +是一种运动在客户端（浏览器）的编程 +语言，实现人机交互效果。 + +## javaScript的作用 +网页特效（监听用户的一些行为让网页做出对应的反馈）表单验证（针对表单数据 +的合法性判断）数据交互（获取后台的数据，渲染到前端）服务端编程（node.js） + +## JavaScript的组成 +ECMAScript: +规定了js基础语法核心知识。比如：变量，分支语句，循环语句，对象等等 + +Web APls: +DOM 操作文档，比如对页面元素进行移动，大小，添加删除等操作BOM +操作浏览器，比如页面弹窗，检查窗口宽度，存储数据到浏览器等等 + +## JaveScript书写位置 +内部JavaScript +直接写在HTML文件里，用script标签包住 +规范： +script 标签写在上面 +拓展：alert（你好，js）页面弹出警告对话框 + +注意事项 + +``` +我们将 + +``` + + +注意事项： script标签中间无需写代码，否则会被忽略！ + +外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好习惯。 + +内联JavaScript +代码写在标签内部 + +``` +语法： + 注意：此处作为了解即可，但是后面vue框架会用这种模式 + + + +``` diff --git "a/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204.md" "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204.md" new file mode 100644 index 0000000..e69de29 diff --git "a/\345\274\240\351\207\221\344\270\275/20231102-JS\345\257\271\350\261\241.md" "b/\345\274\240\351\207\221\344\270\275/20231102-JS\345\257\271\350\261\241.md" new file mode 100644 index 0000000..e69de29 -- Gitee From 4e74159926ede203fffeb67447c179cb515f708c Mon Sep 17 00:00:00 2001 From: "you@example.com" Date: Tue, 7 Nov 2023 11:37:52 +0800 Subject: [PATCH 02/18] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...62\345\222\214\346\225\260\347\273\204.md" | 0 ...13\345\222\214\345\217\230\351\207\217.md" | 42 +++++++++++++++++++ 2 files changed, 42 insertions(+) delete mode 100644 "\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204.md" "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204.md" deleted file mode 100644 index e69de29..0000000 diff --git "a/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" new file mode 100644 index 0000000..3eaf869 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" @@ -0,0 +1,42 @@ +### JS的数据类型和变量 +## 数据类型 +1.Number + +JavaScript区别整数和浮点数，统一用Number表示 + +JavaScrip区别整数和浮点数，统一用number表示 + +``` +let one=123;//整数 + +let two=0.1;//浮点数 + +let three=-1;//负数 + +let four=NaN;//NaN表示Not a Number,当计算不出结果时用NaN表示。 + +let five=Infinity;//无限大，超过了JavaScript +的Number所能表示的最大值。 + +``` + +Number可以做四则运算，规则和数学一样。 + +2.字符串 + +字符串是以单引号'或双引号"括起来的任意文本，比如 +'abc','xyz'等等。"或""本身只是一种表示方式，不是字符串的一部分，因此 +字符串'abc'只有a,b,c这3个字符 + +3.布尔值 + +一个布尔值只有true,false两种植。 + +4.比较运算符 +==会自动转换数据类型再进行比较。 +===不会自动转换数据类型，如果数据类型不一样，就直接返回false。 +isNaN（）函数，用于比较NaN.NaN不能用==和===的方式比较。 + +5.null和underfined + + -- Gitee From cbbb50d9c2f6204b76036ff690eaf209007b6795 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 8 Nov 2023 17:37:15 +0800 Subject: [PATCH 03/18] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...13\345\222\214\345\217\230\351\207\217.md" | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git "a/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" index 3eaf869..716c90a 100644 --- "a/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" +++ "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" @@ -38,5 +38,63 @@ Number可以做四则运算，规则和数学一样。 isNaN（）函数，用于比较NaN.NaN不能用==和===的方式比较。 5.null和underfined +null表示空underfined表示未定义 + +6.数组 +数组用Array[]的方式建立。数组的元素用索引来访问， +索引的起始值为0. + +7.对象 +JavaScript的对象是一组由键-值组成的无序集合， +例如： +```var person = { + name: 'Bob', + age: 20, + tags: ['js', 'web', 'mobile'], + city: 'Beijing', + hasCar: true, + zipcode: null +}; +``` + +JavaScript对象的键都是字符串类型，值可以是任意数据 +类型。上述person对象一共定义了6个键值对，其中每个键又 +称为对象的属性，例如，person的name属性'Bob',zipcode属性为null。 +要获取一个对象的属性， 我们用对象变量.属性名的方式： +person.name;//'Bob' person.zipcode;//null + +## 变量 +变量名=值 + +strict模式 +在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申请变量 +就使用的，将导致运行错误。 +使用方式： +在代码第一行写上 use strict + +### 字符串 +字符串要用“或”括起来。 + +1.转义字符/用了该符号后，后面跟着的字符会被打印出来 + +2.\n换行，\t制表符。 + +3.ASCII字符可以以\x41；就相当于A。 + +4.还能用Unicode字符。 + +## 多行字符串 + +1.用反引号将字符括起来，一段文字里的换行就会保留下来。 + +## 模板字符串 + +1.把多个字符串连接起来，可以用+号连接。 + +2.将字符串用${}把字符串包含起来，添加在需要添加的字符后面。 + +## 操作字符串 +1.利用数组的读取来获得来获得特定位置的字符。索引号从0开始。（直接用数组索引赋值，不会 +有错误，但是也不会对数组造成任何变化。） -- Gitee From 96144b012a4a1683e25c32f50288a64d50ad4540 Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 9 Nov 2023 08:15:25 +0800 Subject: [PATCH 04/18] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\236\213\345\222\214\345\217\230\351\207\217.md" | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git "a/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" index 716c90a..828ebab 100644 --- "a/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" +++ "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" @@ -98,3 +98,16 @@ strict模式 1.利用数组的读取来获得来获得特定位置的字符。索引号从0开始。（直接用数组索引赋值，不会 有错误，但是也不会对数组造成任何变化。） +2.toUpperCase:把一个字符串全部变为大写。 +``` +运用方法： + +var s='你好' +s.toUpperCase(); + +3.toLowerCase:把一个字符变成小写。 + +4.indexOf:搜索指定字符串出现的位置。如果找到了指定的字符串，就返回该 +字符出现的位置，如果没有找到该字符串，就输出-1. + +5.substring:返回指定索引区间的字串。如：substring(0,2)会返回0到2（不包括2）的值。 \ No newline at end of file -- Gitee From 38030c680da897c7edbdf87ec43875adb9027aed Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 9 Nov 2023 09:05:21 +0800 Subject: [PATCH 05/18] =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20231102-JS\345\257\271\350\261\241.md" | 0 .../20231102-\346\225\260\347\273\204.md" | 33 +++++++++++++++++++ 2 files changed, 33 insertions(+) delete mode 100644 "\345\274\240\351\207\221\344\270\275/20231102-JS\345\257\271\350\261\241.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231102-\346\225\260\347\273\204.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231102-JS\345\257\271\350\261\241.md" "b/\345\274\240\351\207\221\344\270\275/20231102-JS\345\257\271\350\261\241.md" deleted file mode 100644 index e69de29..0000000 diff --git "a/\345\274\240\351\207\221\344\270\275/20231102-\346\225\260\347\273\204.md" "b/\345\274\240\351\207\221\344\270\275/20231102-\346\225\260\347\273\204.md" new file mode 100644 index 0000000..699def4 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231102-\346\225\260\347\273\204.md" @@ -0,0 +1,33 @@ +## 数组 +基本属性：想要获得数组长度就直接访问.length属性。 +为.length赋值会导致数组发生变化，如果没有超过原有索引 +大小，就改变数组索引不能为其赋值。 + +1.indexOf:通过搜索数值的值来搜索指定元素的位置。没有搜索到就返回-1。 + +2.slice:截取数组的部分元素，生成一个新的数组。 + +var arr=[1,2,3,4,5] + +var newarr=arr.slice(1,4) + +config.log(newarr) + +返回值为[2,3,4]不包括索引4。 + +4.push和pop：push在数组末尾添加若干元素，pop在删除数组最后一个元素。 + +5.unshift和shift:unishift在数组头部添加若干元素，shift方法删除数组的第一个元素。 + +6.sort：可以对数组进行排序，直接调用，就按照默认方式排序。 + +7.reverrse:将数组排序调转。 + +8.splice:修改数组的万能方法。 + +9.concat:连接若干个数组，然后组成一个新的数组。 + +10.join：可以指定符号连接数组中的元素，返回连接后的字符串。 + +## 多维数组 +数组里面包含数组。 \ No newline at end of file -- Gitee From efa9ee338254d6080a9d8d4f45508b1406f21629 Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 9 Nov 2023 11:38:21 +0800 Subject: [PATCH 06/18] =?UTF-8?q?=E7=AC=AC=E5=9B=9B=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...31105-JS\347\232\204map\345\222\214set.md" | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231105-JS\347\232\204map\345\222\214set.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231105-JS\347\232\204map\345\222\214set.md" "b/\345\274\240\351\207\221\344\270\275/20231105-JS\347\232\204map\345\222\214set.md" new file mode 100644 index 0000000..07bd75c --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231105-JS\347\232\204map\345\222\214set.md" @@ -0,0 +1,25 @@ +## JS的map和set + +### 对象 + +JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。 + +JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干键值对来描述他： + +JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。 + + +map和set +JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。 + +这两个数据类型能不能用，还要看浏览器的版本是否支持。 + +map +Map是一组键值对的结构，具有极快的查找速度。 + +由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉。 + +set +Set和Map类似，也是一组value的集合。由于value不能重复，所以，在Set中，没有重复的value,重复的值会被自动过滤。经常用来排除重复值。 + +要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set \ No newline at end of file -- Gitee From 09252238dd0cf545d749f819f5a2d8a33819ac3a Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 28 Nov 2023 11:33:25 +0800 Subject: [PATCH 07/18] =?UTF-8?q?=E7=AC=AC=E5=9B=9B=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\216\257\345\222\214map\345\222\214set.md" | 177 ++++++++++++++++++ ...31105-JS\347\232\204map\345\222\214set.md" | 25 --- 2 files changed, 177 insertions(+), 25 deletions(-) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231105-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" delete mode 100644 "\345\274\240\351\207\221\344\270\275/20231105-JS\347\232\204map\345\222\214set.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231105-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" "b/\345\274\240\351\207\221\344\270\275/20231105-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" new file mode 100644 index 0000000..17ab3e9 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231105-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" @@ -0,0 +1,177 @@ +## JS判断循环和map和set + +### 判断 + +#### 条件判断 + +使用if(){...}else{...}来进行条件判断。 + +```根据年龄显示不同内容，可以用if语句实现如下： +var age=20； +if（age>=18）{ + //如果age>=18为true，则执行if语句块 + alert(adult"); +} +else { + //否则执行else语句块 + alert(adult"); +} +``` +## 多行条件判断 +``` +如果还要更细致地判断条件，可以使用多个if...else...的组合： +var age=3; +if(age>=18){ + alert('adult'); +}else if(age>=6){ + alert('teenager'); +}else{ + alert('kid'); +} +``` + +JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true，因此上述代码条件判断的结果是true + +### 循环 +JS有两种循环，一种是for循环，通过初始条件、结束条件和递增条件来循环执行语句块： +``` +var x=0; +var i; +for (i=1;i<=10000;i++){ + x=x+i; +} +x; +``` + +for 循环的控制条件： +``` +i=1 =》初始条件，将变量i置为1； +i<=10000 =》判断条件，满足时就继续循环，不满足就退出循环； +i++ =》每次循环后的递增条件，由于每次循环后变量都会加1，因此它终将在若干次循环后不满足判断条件i<=10000而退出循环。 +``` +## for循环最常用的地方是利用索引来遍历数组： +``` +var arr = ['Apple', 'Google', 'Microsoft']; +var i, x; +for (i=0; i 100) { + break; // 通过if判断来退出循环 + } + x ++; +} +``` + +## for...in +for循环的一个变体是for...in循环，它可以把一个对象的所有属性依次循环出来： +``` +var o={ + name:'Jack', + age:20, + cicty:'Beijing' +}; +for(var key in o){ + console.log(key);// 'name', 'age', 'city' +} +``` + +## 要过滤掉对象继承的属性，用hasOwnProperty()来实现： +``` +var o = { + name: 'Jack', + age: 20, + city: 'Beijing' +}; +for (var key in o) { + if (o.hasOwnProperty(key)) { + console.log(key); // 'name', 'age', 'city' + } +} +``` + +### 请注意，for...in对Array的循环得到的是String而不是Nmber。 + +## While +while循环只有一个判断条件，条件满足，就不断循环，条件不满足时则退出循环。比如我们要计算100以内所有奇数之和，可以用while循环实现： +``` +var x = 0; +var n = 99; +while (n > 0) { + x = x + n; + n = n - 2; +} +x; // 2500 +在循环内部变量n不断自减，直到变为-1时，不再满足while条件，循环退出。 +``` + +### do...while +最后一次循环是do{...}while()循环，它和while循环的唯一区别在于，不是在每次循环开始 +的时候判断条件，而是在每次循环完成的时候判断条件： +``` +var n = 0; +do { + n = n + 1; +} while (n < 100); +n; // 100 + +用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。 +``` +## MAP +Map是一组键值对的结构，具有极快的查找速度 +``` + 如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下： + +var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); +m.get('Michael'); // 95 + +初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法： + +var m = new Map(); // 空Map +m.set('Adam', 67); // 添加新的key-value +m.set('Bob', 59); +m.has('Adam'); // 是否存在key 'Adam': true +m.get('Adam'); // 67 +m.delete('Adam'); // 删除key 'Adam' +m.get('Adam'); // undefined +``` + +## SET +Set和Map类似，也是一组value的集合。由于value不能重复，所以,在Set中，没有重复的 +value，经常使用排除重复值。 +``` +要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set： + +var s1 = new Set(); // 空Set +var s2 = new Set([1, 2, 3]); // 含1, 2, 3 +重复元素在Set中自动被过滤： + +var s = new Set([1, 2, 3, 3, '3']); +s; // Set {1, 2, 3, "3"} +注意数字3和字符串'3'是不同的元素。 + +通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果： + +s.add(4); +s; // Set {1, 2, 3, 4} +s.add(4); +s; // 仍然是 Set {1, 2, 3, 4} +通过delete(key)方法可以删除元素： + +var s = new Set([1, 2, 3]); +s; // Set {1, 2, 3} +s.delete(3); +s; // Set {1, 2} +``` +JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。 + +JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干键值对来描述他： + +JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。 + diff --git "a/\345\274\240\351\207\221\344\270\275/20231105-JS\347\232\204map\345\222\214set.md" "b/\345\274\240\351\207\221\344\270\275/20231105-JS\347\232\204map\345\222\214set.md" deleted file mode 100644 index 07bd75c..0000000 --- "a/\345\274\240\351\207\221\344\270\275/20231105-JS\347\232\204map\345\222\214set.md" +++ /dev/null @@ -1,25 +0,0 @@ -## JS的map和set - -### 对象 - -JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。 - -JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干键值对来描述他： - -JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。 - - -map和set -JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。 - -这两个数据类型能不能用，还要看浏览器的版本是否支持。 - -map -Map是一组键值对的结构，具有极快的查找速度。 - -由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉。 - -set -Set和Map类似，也是一组value的集合。由于value不能重复，所以，在Set中，没有重复的value,重复的值会被自动过滤。经常用来排除重复值。 - -要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set \ No newline at end of file -- Gitee From 0a78efa4e662d99bb965c9cc20fe295369ae2261 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 29 Nov 2023 16:25:09 +0800 Subject: [PATCH 08/18] =?UTF-8?q?=E7=AC=AC=E4=BA=94=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...07\275\346\225\260\345\222\214iterable.md" | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231107-JS\345\207\275\346\225\260\345\222\214iterable.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231107-JS\345\207\275\346\225\260\345\222\214iterable.md" "b/\345\274\240\351\207\221\344\270\275/20231107-JS\345\207\275\346\225\260\345\222\214iterable.md" new file mode 100644 index 0000000..27bcdf7 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231107-JS\345\207\275\346\225\260\345\222\214iterable.md" @@ -0,0 +1,68 @@ +## itrtable +遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。 + +## 具有iterable类型的集合可以通过新的for...of 循环来遍历。 +``` +用for...of循环遍历集合，用法如下： +var a =['A','B','C ']; +var s =new Set(['A','B','C']); +var m =new Map([1,'x'],[2,'y'],[3,'z']); +for(var x of a ){ +//遍历Array +console.log(x); +} +for(var x of s ){ +//遍历Set +console.log(x); +} +for(var x of m ){ +//遍历Map +console.log(x[0]+'='+x[1]); +} +``` +更好的方式是直接使用iterable内置的forEach方法， +它接收一个函数，每次迭代就自动回调该函数。以Array +为例： +``` +use strict'; +var a=['A','B','C']; +a.forEach(function(element,index,array){ + // element: 指向当前元素的值 + // index: 指向当前索引 + // array: 指向Array对象本身 + console.log(element+',index='+index); +}); +``` + +## Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身: +``` +var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); +m.forEach(function (value, key, map) { + console.log(value); +}); + +``` + +## 函数 + +### 抽象 +抽象是数学中非常常见的概念。 + +## 函数定义和调用 + +### 定义函数 +上述abs()函数的定义如下： +``` +1.function指出这是一个函数定义； +2.abs是函数的名称； +3.（x）括号内列出函数的参数，多个参数以，分隔； +4.{...}之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。 +``` +var abs = function (x) { if (x >= 0) { return x; } else { return -x; } }; +``` +在这种方式下，function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。 + +上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。 + +``` + -- Gitee From fa23a019be814682ae104987486b677a744542b5 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 29 Nov 2023 17:00:14 +0800 Subject: [PATCH 09/18] =?UTF-8?q?=E7=AC=AC=E5=85=AD=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...75\346\225\260\350\241\245\345\205\205.md" | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231108-JS\345\207\275\346\225\260\350\241\245\345\205\205.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231108-JS\345\207\275\346\225\260\350\241\245\345\205\205.md" "b/\345\274\240\351\207\221\344\270\275/20231108-JS\345\207\275\346\225\260\350\241\245\345\205\205.md" new file mode 100644 index 0000000..68931b9 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231108-JS\345\207\275\346\225\260\350\241\245\345\205\205.md" @@ -0,0 +1,49 @@ +## 调用函数 + +## arguments + +arguments只有函数内部起作用，并且永远指向当前 +函数的调用者传入的所有参数 +``` +'use strict' +function foo(x){ + console.log('x='+x); + for(var i=0;i){ + console.log('arg ' + i + ' = ' + arguments[i]); + } +} +foo（10,20,30）; +``` + +## rest参数 +``` +function foo(a, b) { + var i, rest = []; + if (arguments.length > 2) { + for (i = 2; i Date: Wed, 29 Nov 2023 17:07:54 +0800 Subject: [PATCH 10/18] =?UTF-8?q?=E7=AC=AC=E5=9B=9B=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename "\345\274\240\351\207\221\344\270\275/20231105-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" => "\345\274\240\351\207\221\344\270\275/20231106-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" (100%) diff --git "a/\345\274\240\351\207\221\344\270\275/20231105-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" "b/\345\274\240\351\207\221\344\270\275/20231106-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" similarity index 100% rename from "\345\274\240\351\207\221\344\270\275/20231105-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" rename to "\345\274\240\351\207\221\344\270\275/20231106-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" -- Gitee From 40cc9af152eae43dc0e292c2eaaf087602628f03 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 29 Nov 2023 17:31:26 +0800 Subject: [PATCH 11/18] =?UTF-8?q?=E7=AC=AC=E4=B8=83=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...43\346\236\204\350\265\213\345\200\274.md" | 111 ++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231109-JS\345\217\230\351\207\217\344\275\234\347\224\250\345\237\237\343\200\201\350\247\243\346\236\204\350\265\213\345\200\274.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231109-JS\345\217\230\351\207\217\344\275\234\347\224\250\345\237\237\343\200\201\350\247\243\346\236\204\350\265\213\345\200\274.md" "b/\345\274\240\351\207\221\344\270\275/20231109-JS\345\217\230\351\207\217\344\275\234\347\224\250\345\237\237\343\200\201\350\247\243\346\236\204\350\265\213\345\200\274.md" new file mode 100644 index 0000000..6635eb4 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231109-JS\345\217\230\351\207\217\344\275\234\347\224\250\345\237\237\343\200\201\350\247\243\346\236\204\350\265\213\345\200\274.md" @@ -0,0 +1,111 @@ +## 变量作用 + +这说明JavaScript的函数在查找变量时从自身函数定义开始， +从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。 +``` +'use strict'; +function foo() { + var x = 1; + function bar() { + var x = 'A'; + console.log('x in bar() = ' + x); // 'A' + } + console.log('x in foo() = ' + x); // 1 + bar(); +} + +foo(); +``` + +## 变量提升 + +由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。 +最常见的做法是用一个var申明函数内部用到的所有变量： +``` +function foo() { + var + x = 1, // x初始化为1 + y = x + 1, // y初始化为2 + z, i; // z和i为undefined + // 其他语句: + for (i=0; i<100; i++) { + ... + } +} +``` + +## 全局作用域 + +这使用JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。 +``` +'use strict'; + +window.alert('调用window.alert()'); +// 把alert保存到另一个变量: +var old_alert = window.alert; +// 给alert赋一个新函数: +window.alert = function () {} +alert('无法用alert()显示了!'); + +// 恢复alert: +window.alert = old_alert; +alert('又可以用alert()了!'); +``` + +## 名字空间 + +全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。 +减少冲突的一个方法是把自己的所有变量和函数全部绑定到 +一个全局变量中。例如： +``` +// 唯一的全局变量MYAPP: +var MYAPP = {}; + +// 其他变量: +MYAPP.name = 'myapp'; +MYAPP.version = 1.0; + +// 其他函数: +MYAPP.foo = function () { + return 'foo'; +}; +``` + +## 局部作用域 + +用let替代var可以申明一个块级作用域的变量： +``` +'use strict'; + +function foo() { + var sum = 0; + for (let i=0; i<100; i++) { + sum += i; + } + // SyntaxError: + i += 1; +} +``` + +## 常量 + +新的关键字const来定义常量，const与let都具有块级作用域： +``` +'use strict'; + +const PI = 3.14; +PI = 3; // 某些浏览器不报错，但是无效果！ +PI; // 3.14 +``` + +## 解构赋值 + +可以使用解构赋值，直接对多个变量同时赋值： +``` +'use strict'; + +// 如果浏览器支持解构赋值就不会报错: +var [x, y, z] = ['hello', 'JavaScript', 'ES6']; +// x, y, z分别被赋值为数组对应元素: +console.log('x = ' + x + ', y = ' + y + ', z = ' + z); +``` \ No newline at end of file -- Gitee From 9b97e763be918d41aa1e06b6d322c6077820d90e Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 30 Nov 2023 10:21:43 +0800 Subject: [PATCH 12/18] =?UTF-8?q?=E7=AC=AC=E5=85=AB=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...20231113-\346\234\215\345\212\241\345\231\250.md" | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231113-\346\234\215\345\212\241\345\231\250.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231113-\346\234\215\345\212\241\345\231\250.md" "b/\345\274\240\351\207\221\344\270\275/20231113-\346\234\215\345\212\241\345\231\250.md" new file mode 100644 index 0000000..73e76b1 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231113-\346\234\215\345\212\241\345\231\250.md" @@ -0,0 +1,12 @@ +## 服务器 +1.具有公网IP的服务一台 2. 通过ICP备案、公安备案的域名一个 3. 将IP地址绑定到域名（这个过程称为IP解析或者绑定） 如何判断解析成功？ping 4. 在服务器安全组中，允许访问80端口（https需要443端口） 5. 需要一个web服务器（nginx、apache、tomcat、canndy、IIS），后面将以nginx为例讲解 1. 使用ssh协议登录服务：ssh root@h5.9ihub.com a. 更新软件源：apt update b. 更新系统：apt upgrade -y 2. 安装nginx，命令：apt instsall -y nginx a. 确认nginx服务状态：systemctl status nginx b. 启动nginx服务：systemctl start nginx c. 关闭nginx服务：systemctl stop nginx d. 让nginx服务开机自启动：systemctl enable nginx a. 让nginx服务不开机自启动：systemctl diable nginx 3. 6. 需要一个网站的相关文件 a. 路径相关：/var/www/h5.9ihub.com b. 首页文件：index.html c. 如何让它有： a. 在指定路径新建一个index.html b. 从本地上传一个:scp ./index.html root@h5.9ihub.com:/var/www/h5.9ihub.com(相应路径请提前建好：创建文件夹命令：mkdir) 7. 需要nginx的配置 a. 路径相关：/etc/nginx/conf.d b. 配置文件相关：h5.9hub.com.conf c. 配置文件最简配置： server { listen 80;//监听的端口号 server_name h5.9ihub.com;// 监听的域名 +``` + + location / { + root /var/www/h5.9ihub.com; + index index.html; + } + + } + d. 确认配置文件有无语法错误 + `` \ No newline at end of file -- Gitee From c5c72dd221867bc36d6cca915896f5ae7e6099ca Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 30 Nov 2023 11:37:04 +0800 Subject: [PATCH 13/18] =?UTF-8?q?=E7=AC=AC=E4=B9=9D=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...74\345\222\214\346\226\271\346\263\225.md" | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231114-\350\247\243\346\236\204\350\265\213\345\200\274\345\222\214\346\226\271\346\263\225.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231114-\350\247\243\346\236\204\350\265\213\345\200\274\345\222\214\346\226\271\346\263\225.md" "b/\345\274\240\351\207\221\344\270\275/20231114-\350\247\243\346\236\204\350\265\213\345\200\274\345\222\214\346\226\271\346\263\225.md" new file mode 100644 index 0000000..78783f8 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231114-\350\247\243\346\236\204\350\265\213\345\200\274\345\222\214\346\226\271\346\263\225.md" @@ -0,0 +1,43 @@ +## 解构赋值 + +如果需要从一个对象中取出若干属性，也可以使用解构赋值， +便于快速获取对象的指定属性： +``` +'use strict' + +var person ={ + name:'小明', + age:20, + gender:'male', + passport:'G-12345678', + school:'No.4 middle school' +}; +var {name,age,passport}=person; +//name,age,passport分别被赋值为对应属性： +console.log('name='+name+',age='+age+',passport='+passport); +``` + +对一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值， +只要保证对应的层次是一致的： +``` +var person ={ + name:'小明', + age:20, + gender:'male', + passport:'G-12345678', + school:'No.4 middle school', + address:{ + city:'Beijing', + street:'No.1 Road', + zipcode:'100001' + } +}; +var {name,address:{city,zip}}=person; +name;//'小明' +city;//'Beijing' +zip;//undefined,因为属性名是zipcode而不是zip +//注意：address不是变量，而是为了让city和zip获得嵌套的address对象 +的属性: +address; // Uncaught ReferenceError: address is not defined +``` + -- Gitee From 24fe89b1020308155bdabfa51fa08a6ddbbfb5d3 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 4 Dec 2023 16:08:59 +0800 Subject: [PATCH 14/18] =?UTF-8?q?=E7=AC=AC=E5=8D=81=E6=AC=A1=E7=AC=94?= =?UTF-8?q?=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...13\345\200\274\350\241\245\345\205\205.md" | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231120-JS\350\247\243\346\236\204\350\265\213\345\200\274\350\241\245\345\205\205.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231120-JS\350\247\243\346\236\204\350\265\213\345\200\274\350\241\245\345\205\205.md" "b/\345\274\240\351\207\221\344\270\275/20231120-JS\350\247\243\346\236\204\350\265\213\345\200\274\350\241\245\345\205\205.md" new file mode 100644 index 0000000..f30bf46 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231120-JS\350\247\243\346\236\204\350\265\213\345\200\274\350\241\245\345\205\205.md" @@ -0,0 +1,22 @@ +### 解构赋值 + +``` +function buildDate({year,month,day,hour=0,minute=0,second=0}){ + return new dd(year+'-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second); +} +``` + +它的方便之处在于传入的对象只需要year、month和day这三个属性： +``` +buildDate({ year: 2017, month: 1, day: 1 }); +// Sun Jan 01 2017 00:00:00 GMT+0800 (CST) +``` + +也可以传入hour、minute和second属性： +``` +buildDate({ year: 2017, month: 1, day: 1, hour: 20, minute: 15 }); +// Sun Jan 01 2017 20:15:00 GMT+0800 (CST) +``` + +使用解构赋值可以减少代码量，但是，需要在支持ES6解构赋值特性的现代浏览器中才能正常运行。目前支持解构赋值的浏览器包括Chrome,Firefox,Edge等。 + -- Gitee From d2d3463abdd6f88f4bce61fc612151b8e304f5be Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 4 Dec 2023 16:22:00 +0800 Subject: [PATCH 15/18] =?UTF-8?q?=E7=AC=AC=E5=8D=81=E4=B8=80=E6=AC=A1?= =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...30\351\230\266\345\207\275\346\225\260.md" | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231121-JS\351\253\230\351\230\266\345\207\275\346\225\260.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231121-JS\351\253\230\351\230\266\345\207\275\346\225\260.md" "b/\345\274\240\351\207\221\344\270\275/20231121-JS\351\253\230\351\230\266\345\207\275\346\225\260.md" new file mode 100644 index 0000000..294835a --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231121-JS\351\253\230\351\230\266\345\207\275\346\225\260.md" @@ -0,0 +1,30 @@ +### 高阶函数 + +JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接受变量， +那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。一个最简单的高阶函数： +``` +function add (x,y,f){ + return f(x)+f(y); +} +``` + +当我们调用add(-5,6,Math.abs)时，参数x,y和f分别接收-5,6和函数Math.abs,根据 +函数定义，我们可以推导计算过程为： +``` +x = -5; +y = 6; +f = Math.abs; +f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11; +return 11; +``` + +用代码验证一下： +``` +'use strict'; + +function add(x, y, f) { + return f(x) + f(y); +} +var x = add(-5, 6, Math.abs); // 11 +console.log(x); +``` \ No newline at end of file -- Gitee From b01473f86b78fef8dfc31a7064d0b12979f42352 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 4 Dec 2023 17:00:58 +0800 Subject: [PATCH 16/18] =?UTF-8?q?=E7=AC=AC=E5=8D=81=E4=BA=8C=E6=AC=A1?= =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20231122-JS\347\232\204fileter.md" | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231122-JS\347\232\204fileter.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231122-JS\347\232\204fileter.md" "b/\345\274\240\351\207\221\344\270\275/20231122-JS\347\232\204fileter.md" new file mode 100644 index 0000000..e71cc5a --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231122-JS\347\232\204fileter.md" @@ -0,0 +1,29 @@ +## filter + +filter也是一个常用的操作，它用于把Array的某些元素 +过滤掉，然后返回剩下的元素。 + +和map()类似，Array的filter()也接收一个函数。和map() +不同的是，filter()把传入的函数依次作用于每个元素， +然后根据返回值是true还是false决定保留还是丢弃该元素。 + +例如，在一个Array中，删掉偶数，只保留奇数，可以这么写： +``` +var arr = [1, 2, 4, 5, 6, 9, 10, 15]; +var r = arr.filter(function (x) { + return x % 2 !== 0; +}); +r; // [1, 5, 9, 15] +``` + +把一个Array中的空字符串删掉，可以这么写： +``` +var arr = ['A', '', 'B', null, undefined, 'C', ' ']; +var r = arr.filter(function (s) { + return s && s.trim(); // 注意：IE9以下的版本没有trim()方法 +}); +r; // ['A', 'B', 'C'] +``` + +可见用filter()这个高阶函数，关键在于正确实现一个 +“筛选”函数。 \ No newline at end of file -- Gitee From 9c6eb955272de1c2cb394ca4b970077449b0ee33 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 4 Dec 2023 17:38:50 +0800 Subject: [PATCH 17/18] =?UTF-8?q?=E7=AC=AC=E5=8D=81=E4=B8=89=E6=AC=A1?= =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...60\345\222\214\346\225\260\347\273\204.md" | 141 ++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231123-JS\351\253\230\351\230\266\345\207\275\346\225\260\345\222\214\346\225\260\347\273\204.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231123-JS\351\253\230\351\230\266\345\207\275\346\225\260\345\222\214\346\225\260\347\273\204.md" "b/\345\274\240\351\207\221\344\270\275/20231123-JS\351\253\230\351\230\266\345\207\275\346\225\260\345\222\214\346\225\260\347\273\204.md" new file mode 100644 index 0000000..b742bd6 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231123-JS\351\253\230\351\230\266\345\207\275\346\225\260\345\222\214\346\225\260\347\273\204.md" @@ -0,0 +1,141 @@ +## filter + +filter也是一个常用的操作，它用于把Array的某些元素过滤掉， +然后返回剩下的元素。 + +和map()类似，Array的filter()也接收一个函数。和map()把传入 +的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 + +例如，在一个Array中，删掉偶数，只保留奇数，可以这么写： +``` +var arr = [1, 2, 4, 5, 6, 9, 10, 15]; +var r = arr.filter(function (x) { + return x % 2 !== 0; +}); +r; // [1, 5, 9, 15] +``` + +把一个Array中的空字符串删掉，可以这么写： +``` +var arr = ['A', '', 'B', null, undefined, 'C', ' ']; +var r = arr.filter(function (s) { + return s && s.trim(); // 注意：IE9以下的版本没有trim()方法 +}); +r; // ['A', 'B', 'C'] +``` + +## 回调函数 +filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数， +表示元素的位置和数组本身： +``` +var arr = ['A', 'B', 'C']; +var r = arr.filter(function (element, index, self) { + console.log(element); // 依次打印'A', 'B', 'C' + console.log(index); // 依次打印0, 1, 2 + console.log(self); // self就是变量arr + return true; +}); +``` + +利用filter，可以巧妙地去除Array的重复元素： +``` +'use strict'; + +var + r, + arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']; +r = arr.filter(function (element, index, self) { + return self.indexOf(element) === index; +}); + +console.log(r.toString()); +``` + +去除重复元素依靠的是indexOf总是返回第一个元素的位置， +后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。 + +## sort + +## 排序算法 + +默认情况下，对字符串排序，是按照ASCLL的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以： +``` +var arr = ['Google', 'apple', 'Microsoft']; +arr.sort(function (s1, s2) { + x1 = s1.toUpperCase(); + x2 = s2.toUpperCase(); + if (x1 < x2) { + return -1; + } + if (x1 > x2) { + return 1; + } + return 0; +}); // ['apple', 'Google', 'Microsoft'] +``` + +忽略大小写来比较两个字符串，实际上就是先把字符串都变成大写 +（或者都变成小写），再比较。 + +## Array + +### every + +every()方法可以判断数组的所有元素是否满足测试条件。 + +例如：给定一个包含若干字符串的数组，判断所有字符串是否满足指定的测试条件： +``` +'use strict'; +var arr = ['Apple', 'pear', 'orange']; +console.log(arr.every(function (s) { + return s.length > 0; +})); // true, 因为每个元素都满足s.length>0 + +console.log(arr.every(function (s) { + return s.toLowerCase() === s; +})); // false, 因为不是每个元素都全部是小写 +``` + + +### find + +find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined: +``` +'use strict'; +var arr = ['Apple', 'pear', 'orange']; +console.log(arr.find(function (s) { + return s.toLowerCase() === s; +})); // 'pear', 因为pear全部是小写 + +console.log(arr.find(function (s) { + return s.toUpperCase() === s; +})); // undefined, 因为没有全部是大写的元素 +``` + +## findindex + +findindex()和find()类似，也是查找符合条件的第一个元素， +不同之处在于findindex()会返回这个元素的索引，如果没有找到 +，返回-1: +``` +'use strict'; +var arr = ['Apple', 'pear', 'orange']; +console.log(arr.findIndex(function (s) { + return s.toLowerCase() === s; +})); // 1, 因为'pear'的索引是1 + +console.log(arr.findIndex(function (s) { + return s.toUpperCase() === s; +})); // -1 +``` + +## forEach + +forEach()和map()类似，它也把每个元素依次作用传入的函数，但不能返回新的数组。forEach()常用于遍历数组，因此，传入的函数不需要返回值： +``` +'use strict'; +var arr = ['Apple', 'pear', 'orange']; +arr.forEach(console.log); // 依次打印每个元素 +``` + + -- Gitee From 40b96ea93d4454552c2c352c960339e2f24d04d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E9=87=91=E4=B8=BD?= Date: Sat, 30 Dec 2023 04:52:07 +0800 Subject: [PATCH 18/18] zy --- ...41\344\270\216\346\255\243\345\210\231.md" | 40 +++++ .../20231128-JS\351\227\255\345\214\205.md" | 38 +++++ ...55\345\244\264\345\207\275\346\225\260.md" | 50 +++++++ .../20231130-JS\346\255\243\345\210\231.md" | 47 ++++++ ...10\345\231\250\345\257\271\350\261\241.md" | 138 ++++++++++++++++++ ...20231205-JS\346\233\264\346\226\260DOM.md" | 126 ++++++++++++++++ ...20231206-JS\345\210\240\351\231\244DOM.md" | 49 +++++++ ...15\344\275\234\350\241\250\345\215\225.md" | 124 ++++++++++++++++ ...-JS\347\232\204Ajax\345\222\214Promise.md" | 115 +++++++++++++++ .../20231212-JS\347\232\204Promise.md" | 59 ++++++++ .../20231213-JS\347\232\204jQuery.md" | 79 ++++++++++ ...RY\347\232\204\350\241\245\345\205\205.md" | 56 +++++++ 12 files changed, 921 insertions(+) create mode 100644 "\345\274\240\351\207\221\344\270\275/20231127-JS\345\270\270\347\224\250\345\257\271\350\261\241\344\270\216\346\255\243\345\210\231.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231128-JS\351\227\255\345\214\205.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231129-JS\347\232\204\347\256\255\345\244\264\345\207\275\346\225\260.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231130-JS\346\255\243\345\210\231.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231204-JS\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231205-JS\346\233\264\346\226\260DOM.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231206-JS\345\210\240\351\231\244DOM.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231207-JS\346\223\215\344\275\234\350\241\250\345\215\225.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231211-JS\347\232\204Ajax\345\222\214Promise.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231212-JS\347\232\204Promise.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231213-JS\347\232\204jQuery.md" create mode 100644 "\345\274\240\351\207\221\344\270\275/20231214-JS\347\232\204JQUERY\347\232\204\350\241\245\345\205\205.md" diff --git "a/\345\274\240\351\207\221\344\270\275/20231127-JS\345\270\270\347\224\250\345\257\271\350\261\241\344\270\216\346\255\243\345\210\231.md" "b/\345\274\240\351\207\221\344\270\275/20231127-JS\345\270\270\347\224\250\345\257\271\350\261\241\344\270\216\346\255\243\345\210\231.md" new file mode 100644 index 0000000..19ed41e --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231127-JS\345\270\270\347\224\250\345\257\271\350\261\241\344\270\216\346\255\243\345\210\231.md" @@ -0,0 +1,40 @@ +## 标准对象 + +但是某些对象还是和其他对象不太一样。为了区分对象的类型，我们用typeof操作符获取对象的类型，它总是返回一个字符串： +``` +typeof 123; // 'number' +typeof NaN; // 'number' +typeof 'str'; // 'string' +typeof true; // 'boolean' +typeof undefined; // 'undefined' +typeof Math.abs; // 'function' +typeof null; // 'object' +typeof []; // 'object' +typeof {}; // 'object' +``` + +可见，number、string、boolean、function和undefined有别于其他类型。特别注意null的类型是 +object,Array的类型也是object，如果我们用typeof将 +无法区分出null、Array和通常意义上的object--{} + +## 包装对象 +有这么几条规则需要遵守： +``` +不要使用new Number()、new Boolean()、new String()创建包装对象； + +用parseInt()或parseFloat()来转换任意类型到number； + +用String()来转换任意类型到string，或者直接调用某个对象的toString()方法； + +通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}； + +typeof操作符可以判断出number、boolean、string、function和undefined； + +判断Array要使用Array.isArray(arr)； + +判断null请使用myVar === null； + +判断某个全局变量是否存在用typeof window.myVar === 'undefined'； + +函数内部判断某个变量是否存在用typeof myVar === 'undefined' +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231128-JS\351\227\255\345\214\205.md" "b/\345\274\240\351\207\221\344\270\275/20231128-JS\351\227\255\345\214\205.md" new file mode 100644 index 0000000..453e05b --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231128-JS\351\227\255\345\214\205.md" @@ -0,0 +1,38 @@ +## 闭包 +### 函数作为返回值 +高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。 +``` +function sum(arr){ + var sum =function(){ + return arr.reduce(function(x,y){ + return x+y; + }) + } + + return sum; +} +``` + +闭包，就是一个函数（被一个函数返回的函数），并不是所有被返回的函数都称之为闭包。除了被返回，这个函数应该还必须引用了外部函数中传入的参数或者定义的变量，那么这样的一个返回函数，才称之为闭包 + +## 闭包 +``` +function count(){ + var arr =[]; + for (var i=1; i<=3;i++){ + arr.push((function(n){ + return function(){ + return n*n; + } + })(i)); + } + return arr; +} +var results =count(); +var f1 =results[0]; +var f2 =results[1]; +var f3 =results[2]; +f1(); +f2(); +f3(); +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231129-JS\347\232\204\347\256\255\345\244\264\345\207\275\346\225\260.md" "b/\345\274\240\351\207\221\344\270\275/20231129-JS\347\232\204\347\256\255\345\244\264\345\207\275\346\225\260.md" new file mode 100644 index 0000000..34e2e15 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231129-JS\347\232\204\347\256\255\345\244\264\345\207\275\346\225\260.md" @@ -0,0 +1,50 @@ +## 箭头函数 +x => x * x 上面的箭头函数相当于： +``` +function (x) { + return x * x; +} +``` +如果参数不是一个，就需要用括号()括起来： +``` +// 两个参数: +(x, y) => x * x + y * y + +// 无参数: +() => 3.14 + +// 可变参数: +(x, y, ...rest) => { + var i, sum = x + y; + for (i=0; i y - this.birth; // this.birth仍是1990 + return fn.call({birth:2000}, year); + } +}; +obj.getAge(2015); // 33 +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231130-JS\346\255\243\345\210\231.md" "b/\345\274\240\351\207\221\344\270\275/20231130-JS\346\255\243\345\210\231.md" new file mode 100644 index 0000000..042e671 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231130-JS\346\255\243\345\210\231.md" @@ -0,0 +1,47 @@ +## 正则 +因为正则表达式也是用字符串表示的，所以，我们要首先了解如何用字符来描述字符。 在正则表达式中，如果直接给出字符，就是精确匹配。用\d可以匹配一个数字，\w可以匹配一个字母或数字，所以： +``` +'00\d'可以匹配'007'，但无法匹配'00A'； + +'\d\d\d'可以匹配'010'； + +'\w\w'可以匹配'js'； +``` + +可以匹配任意字符，所以： + +``` +'js.'可以匹配'jsp'、'jss'、'js!'等等。 +``` +eg:\d{3}\s+\d{3,8}。 + +我们来从左到右解读一下： + +``` +\d{3}表示匹配3个数字，例如'010'； + +\s可以匹配一个空格（也包括Tab等空白符），所以\s+表示至少有一个空格，例如匹配' '，'\t\t'等； + +\d{3,8}表示3-8个数字，例如'1234567'。 +``` +## 进阶 +要做更精确地匹配，可以用[]表示范围，比如： +``` +[0-9a-zA-Z\_]可以匹配一个数字、字母或者下划线； + +[0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如'a100'，'0_Z'，'js2015'等等； + +[a-zA-Z\_\$][0-9a-zA-Z\_\$]*可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名； + +[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。 +``` +^表示行的开头，^\d表示必须以数字开头。 + +表示行的结束，\d 表示必须以数字结束。 + +你可能注意到了，js也可以匹配'jsp'，但是加上^js$就变成了整行匹配，就只能匹配'js'了 + +## 切分字符串 +``` +'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd'] +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231204-JS\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" "b/\345\274\240\351\207\221\344\270\275/20231204-JS\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" new file mode 100644 index 0000000..ebd1cdd --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231204-JS\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" @@ -0,0 +1,138 @@ +## 浏览器对象 + +### window + +window 对象不但充当全局作用域，而且表示浏览器窗口。 window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。 兼容性：IE<=8不支持 + +``` +'use strict'; +// 可以调整浏览器窗口大小试试: +console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight); +``` +对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。 + +## navigator +navigator 对象表示浏览器的信息，最常用的属性包括 + +``` +navigator.appName：浏览器名称； +navigator.appVersion：浏览器版本； +navigator.language：浏览器设置的语言； +navigator.platform：操作系统类型； +navigator.userAgent：浏览器设定的User-Agent字符串。 +'use strict'; +console.log('appName = ' + navigator.appName); +console.log('appVersion = ' + navigator.appVersion); +console.log('language = ' + navigator.language); +console.log('platform = ' + navigator.platform); +console.log('userAgent = ' + navigator.userAgent); +``` + +注意：navigator的信息可以很容易地被用户修改，正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算： + +var width = window.innerWidth || document.body.clientWidth; + +## screen +screen对象表示屏幕的信息，常用的属性有： +``` +screen.width：屏幕宽度，以像素为单位； +screen.height：屏幕高度，以像素为单位； +screen.colorDepth：返回颜色位数，如8、16、24。 +'use strict'; +console.log('Screen size = ' + screen.width + ' x ' + screen.height); +``` + +## location +screen对象表示屏幕的信息，常用的属性有： +``` +screen.width：屏幕宽度，以像素为单位； +screen.height：屏幕高度，以像素为单位； +screen.colorDepth：返回颜色位数，如8、16、24。 +'use strict'; +console.log('Screen size = ' + screen.width + ' x ' + screen.height); +``` + +## location + +location对象表示当前页面的URL信息 + +``` +http://www.example.com:8080/path/index.html?a=1&b=2#TOP +``` + +可以用location.href获取。要获得URL各个部分的值： + +location.protocol; // 'http' +location.host; // 'www.example.com' +location.port; // '8080' +location.pathname; // '/path/index.html' +location.search; // '?a=1&b=2' +location.hash; // 'TOP' +要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。 + +'use strict'; +if (confirm('重新加载当前页' + location.href + '?')) { + location.reload(); +} else { + location.assign('/'); // 设置一个新的URL地址 +} +document +document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。 + +document的title属性是从HTML文档中的xxx读取的，但是可以动态改变： + +'use strict'; +document.title = '努力学习JavaScript!'; +要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name。 + +我们先准备HTML数据： + +
+
摩卡
+
热摩卡咖啡
+
酸奶
+
北京老酸奶
+
果汁
+
鲜榨苹果汁
+
+用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点： + +'use strict'; +var menu = document.getElementById('drink-menu'); +var drinks = document.getElementsByTagName('dt'); +var i, s; + +s = '提供的饮料有:'; +for (i=0; i + + + + + ... + +如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。 + +## history +history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。 + +这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。 + +新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。 + +任何情况，你都不应该使用history这个对象了。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231205-JS\346\233\264\346\226\260DOM.md" "b/\345\274\240\351\207\221\344\270\275/20231205-JS\346\233\264\346\226\260DOM.md" new file mode 100644 index 0000000..2d4045a --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231205-JS\346\233\264\346\226\260DOM.md" @@ -0,0 +1,126 @@ +## 更新DOM +可以直接修改节点的文本，两种方法： 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： + +// 获取

...

+var p = document.getElementById('p-id'); +// 设置文本为abc: +p.innerHTML = 'ABC'; //

ABC

+// 设置HTML: +p.innerHTML = 'ABC RED XYZ'; +//

...

的内部结构已修改 +用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。 + +第二种是修改innerTEXt或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签： + +// 获取

...

+var p = document.getElementById('p-id'); +// 设置文本: +p.innerText = ''; +// HTML被自动编码，无法设置一个 +这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应本身的onsubmit事件，在提交form时作修改： + + +
+ + +
+ + +注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。 + +在检查和修改时，要充分利用来传递数据。 eg:很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。普通JavaScript开发人员会直接修改： + + +
+ + + +
+ + +这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个变成32个（因为MD5有32个字符）。 + +要想不改变用户的输入，可以利用实现： + + +
+ + + + +
+ + +注意到id为md5-password的标记了name="password"，而用户输入的id为input-password的没有name属性。没有name属性的的数据不会被提交。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231211-JS\347\232\204Ajax\345\222\214Promise.md" "b/\345\274\240\351\207\221\344\270\275/20231211-JS\347\232\204Ajax\345\222\214Promise.md" new file mode 100644 index 0000000..3364b85 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231211-JS\347\232\204Ajax\345\222\214Promise.md" @@ -0,0 +1,115 @@ +## AJAX +'use strict'; +function success(text) { + var textarea = document.getElementById('test-ie-response-text'); + textarea.value = text; +} + +function fail(code) { + var textarea = document.getElementById('test-ie-response-text'); + textarea.value = 'Error code: ' + code; +} + +var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象 + +request.onreadystatechange = function () { // 状态发生变化时，函数被回调 + if (request.readyState === 4) { // 成功完成 + // 判断响应结果: + if (request.status === 200) { + // 成功，通过responseText拿到响应的文本: + return success(request.responseText); + } else { + // 失败，根据响应码判断失败原因: + return fail(request.status); + } + } else { + // HTTP请求还在继续... + } +} + +// 发送请求: +request.open('GET', '/api/categories'); +request.send(); + +alert('请求已发送，请等待响应...'); +安全限制 +默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。 完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。 一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。 + +二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器： + +'/proxy?url=http://www.sina.com.cn' 代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。 + +第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源： + + + + + ... + + +... + + +操作文件 +在HTML表单中，可以上传文件的唯一控件就是。 + +注意：当一个表单包含时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。 + +出于安全考虑，浏览器只允许用户点击来选择本地文件，用JavaScript对的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径： + +待上传文件 +通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件： + +var f = document.getElementById('test-file-upload'); +var filename = f.value; // 'C:\fakepath\test.png' +if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) { + alert('Can only upload image file.'); + return false; +} +File API +由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。 随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。 HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。 + +var + fileInput = document.getElementById('test-image-file'), + info = document.getElementById('test-file-info'), + preview = document.getElementById('test-image-preview'); +// 监听change事件: +fileInput.addEventListener('change', function () { + // 清除背景图片: + preview.style.backgroundImage = ''; + // 检查文件是否选择: + if (!fileInput.value) { + info.innerHTML = '没有选择文件'; + return; + } + // 获取File引用: + var file = fileInput.files[0]; + // 获取File信息: + info.innerHTML = '文件: ' + file.name + '
' + + '大小: ' + file.size + '
' + + '修改: ' + file.lastModifiedDate; + if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') { + alert('不是有效的图片文件!'); + return; + } + // 读取文件: + var reader = new FileReader(); + reader.onload = function(e) { + var + data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...' + preview.style.backgroundImage = 'url(' + data + ')'; + }; + // 以DataURL的形式读取文件: + reader.readAsDataURL(file); + }); +回调 +在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码： + +reader.readAsDataURL(file); + +就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数： + +reader.onload = function(e) { + // 当文件读取完成后，自动调用此函数: +}; +当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231212-JS\347\232\204Promise.md" "b/\345\274\240\351\207\221\344\270\275/20231212-JS\347\232\204Promise.md" new file mode 100644 index 0000000..a891e7b --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231212-JS\347\232\204Promise.md" @@ -0,0 +1,59 @@ +## Promise +在JavaScript的世界中，所有代码都是单线程执行的。 + +由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现： + +function callback() { + console.log('Done'); +} +console.log('before setTimeout()'); +setTimeout(callback, 1000); // 1秒钟后调用callback函数 +console.log('after setTimeout()'); +可见，异步操作会在将来的某个时间点触发一个函数调用。 + +AJAX就是典型的异步操作。 eg： + +request.onreadystatechange=function(){ + if (request.readyState===4){ + if(request.status===200){ + return success (request.responseText); + } else { + return fail(request.status); + } + } +} +把回调函数success(request.responseText)和fail(request.status)写到一个AJAX操作里很正常，但是不好看，而且不利于代码复用。 + +Promise有各种开源实现，在ES6中被统一规范，由浏览器直接支持。先测试一下你的浏览器是否支持Promise： + +'use strict'; + +new Promise(function () {}); +// 直接运行测试: +console.log('支持Promise!'); +eg:生成一个0-2之间的随机数，如果小于1，则等待一段时间后返回成功，否则返回失败： + +function test (resolve,reject){ + var timeOut=Math.random()*2; + log('set timeout to:'+timeOut+'seconds.'); + setTimeout(function(){ + if(timeOut<1){ + log('call resolve()...'); + resolve('200 OK'); + } + else{ + log('call reject()...'); + reject('timeout in'+timeOut+'seconds.'); + } + },timeOut*1000); +} +我们就可以用一个Promise对象来执行它，并在将来某个时刻获得成功或失败的结果： + +var p1 =new Promise(test); +var p2 =p1.then(function(result){ + console.log('成功：'+result); +}); +var p3 =p2.catch(function(reason) +{ + console.log('失败：'+reason); +}); \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231213-JS\347\232\204jQuery.md" "b/\345\274\240\351\207\221\344\270\275/20231213-JS\347\232\204jQuery.md" new file mode 100644 index 0000000..12db36b --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231213-JS\347\232\204jQuery.md" @@ -0,0 +1,79 @@ +## JQUERY + +### 选择器 + +选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')。 + +// 按ID查找： +var a = document.getElementById('dom-id'); + +// 按tag查找： +var divs = document.getElementsByTagName('div'); + +// 查找

： +var ps = document.getElementsByTagName('p'); +// 过滤出class="red": +// TODO: + +// 查找里面的所有： +var table = ... +for (var i=0; i +} +按ID查找 +如果某个DOM节点有id属性，利用jQuery查找如下： + +// 查找
: +var div = $('#abc'); +按tag查找 +按tag查找只需要写上tag名称就可以了： + +var ps = $('p'); // 返回所有

节点 +ps.length; // 数一数页面有多少个

节点 +按class查找 +按class查找注意在class名称前加一个.： + +var a = $('.red'); // 所有节点包含`class="red"`都将返回 +// 例如: +//

...
+//

...

+通常很多节点有多个class，我们可以查找同时包含red和green的节点： + +var a = $('.red.green'); // 注意没有空格！ +// 符合条件的节点： +//
...
+//
...
+按属性查找 +一个DOM节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找： + +var email = $('[name=email]'); // 找出 +var passwordInput = $('[type=password]'); // 找出 +var a = $('[items="A B"]'); // 找出 +当属性的值包含空格等特殊字符时，需要用双引号括起来。 + +按属性查找还可以使用前缀查找或者后缀查找： + +var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM +// 例如: name="icon-1", name="icon-2" +var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM +// 例如: name="startswith", name="endswith" +这个方法尤其适合通过class属性查找，且不受class包含多个名称的影响： + +var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM +// 例如: class="icon-clock", class="abc icon-home" +组合查找 +组合查找就是把上述简单选择器组合起来使用。如果我们查找$('[name=email]')，很可能把表单外的 + +也找出来，但我们只希望查找，就可以这么写： +var emailInput = $('input[name=email]'); // 不会找出
+同样的，根据tag和class来组合查找也很常见： + +var tr = $('tr.red'); // 找出
... +多项选择器 +多项选择器就是把多个选择器用,组合起来一块选： + +$('p,div'); // 把

和

都选出来 +$('p.red,p.green'); // 把

和

都选出来 +要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。例如， + +不会被上面的$('p.red,p.green')选择两次。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231214-JS\347\232\204JQUERY\347\232\204\350\241\245\345\205\205.md" "b/\345\274\240\351\207\221\344\270\275/20231214-JS\347\232\204JQUERY\347\232\204\350\241\245\345\205\205.md" new file mode 100644 index 0000000..6a38e04 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231214-JS\347\232\204JQUERY\347\232\204\350\241\245\345\205\205.md" @@ -0,0 +1,56 @@ +## JQUERY的补充 + +### 操作DOM +拿JQUERY对象的作用：操作对应的DOM节点。 + +### 修改Text和HTML +JQUERY对象的text()和html()方法分别获取节点的文本和原始HTML文本 + +

    +
  • JavaScript
    • +
  • Java &: JavaScript
    • +
+分别获取文本和HTML: + +$('#test-ul li[name=book]').text();//'Java & JavaScript' +$('#test-ul li[name=book]').html();//'Java &: JavaScript' +JQUERY的API设计非常巧妙：无参数调用text（）是获取文本，传入参数就变成设置文本，HTML也是类似操作 + +'use strict'; +var j1=$('#test-ul li.js'); +var j2=$('#test-ul li[name=book]'); +j1.html('JavaScript'); +j2.text('JavaScript & ECMAScript'); + +//JavaScript +//Java & JavaScript +一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。 + +$('#test-ul li').text('JS');//是不是两个节点都变成了JS？ +所以jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点 + +//如果不存在id为not-exist的节点： +$('#not-exist').text('Hello');//代码不报错，没有节点被设置为'Hello' +修改CSS +jQuery对象有"批量操作"的特点 + +
    + +
  • JavaScript
    • +
  • Java
    • +
  • Python
    • +
  • Swift
    • +
  • Scheme
    • + +
+要高亮显示动态语言，调用jQuery对象的css('name','value')方法，我们用一行语句实现： + +'use strict' +$('#test-css li.dy>span').css('background-color','#ffd351').css('color','red'); +注意，jQuery对象的css()方法可以这么用： + +var div =$('#test-div'); +div.css('color'); +div.css('color','#336699'); +div.css('color',''); +为了和JavaScript保持一致，css属性可以用'baclground-color'和'backgroundColor' \ No newline at end of file -- Gitee