diff --git a/javascriptpress/2.javascript基础.md b/javascriptpress/2.javascript基础.md index 469dbd8..ea31d00 100644 --- a/javascriptpress/2.javascript基础.md +++ b/javascriptpress/2.javascript基础.md @@ -261,16 +261,23 @@ people("啦啦啦", 18) ### 实现上面的题目 +```javascript +var num = 100; +var shop = 80; +function buy(num,shop){ + if(num - shop < 0 ){ + alert("买不起") + }else{ + var shengyu = num - buy + alert("可以购买,剩余" + shengyu) + } +} +buy(num,shop) +``` - - - -#### 循环语句 -- for -- while -- do while - -#### for - - +## 作业 +- 创建一个对象 用alert 弹出它的所有属性 +- 创建一个数组 用alert弹出他所有的元素 +- 创建一个function 传入两个参数 弹出这两个参数相乘的结果 +- 创建一个function 传入两个数 弹出最大的那个数 diff --git a/javascriptpress/3.javascript基础.md b/javascriptpress/3.javascript基础.md new file mode 100644 index 0000000..0f5cb15 --- /dev/null +++ b/javascriptpress/3.javascript基础.md @@ -0,0 +1,98 @@ +# 数据类型转换 + +## 显式类型转换 + +什么叫显示类型转换? 就是手动用代码转换的时候叫显示 先看一下如何转换 +```javascript +var num = 8; +alert(typeof num); +num = String(num); +alert(typeof num); +``` +创建的时候是number 使用String 转换之后就成了字符串 这就是显示转换 + +那么转化有哪几个呢? +- Strung +- Number +- Boolean + +这三个 用法跟上面一样 +### number +转换number的时候注意点 +- 只有是数字开头的才会被转换 不是则是nan +- 多个小数点之后会是nan + +```javascript +alert(Number("123abc")) // 123 +alert(Number("000112")) // 112 +alert(Number("1.2")) // 1.2 +alert(Number("1.2.3")) // NaN +alert(Number("baa1212")) // NaN +alert(Number("")) // 0 +``` + +#### nan +nan 代表不是数字 nan + +### string +转化为字符串注意点 +- obgect类型会转化为 "[Object obgect]" + +例如 +```javascript +alert(String(1233)) // 1233 +alert(String({})) // [Object obgect] +alert(String([1,2,3])) // 1,2,3 +function p(){alert(123)} +alert(String(p)) //function p(){alert(123)} +``` + +### Boolean +转换为Boolean 类型 非0 的数字和非空的字符串都是true 空对象和空数组都是true + + +例如 +```javascript +alert(Boolena("")) // false +alert(Boolena("0")) // true +alert(Boolena("123")) // true +alert(Boolena([])) // true +alert(Boolena({})) // true +alert(Boolena(0)) // false +alert(Boolena(1)) // true +alert(Boolena(2)) // true +``` + +## 隐式类型转换 +### + +两个东西相加的时候 +如果一侧为string 类型 将另一侧转化为string 进行拼接 +如果一侧为对象数组或函数 也会转化成字符串进行拼接 +如果除了上面的类型之外的相加 都会转化为数字进行相加 (boolena) +- 1 + "1" = "11" +- "1" + 1 = "11" +- "1" + [1,2] = 212 +- [1,2] + [1,2] = 1,21,2 + + +### - * / +将所有的都转化为数字 进行数学运算 + +剩余的[查看这个页面](https://chinese.freecodecamp.org/news/javascript-implicit-type-conversion/#1--1) + +## == +判断两个变量或者值是否是相等的 +```javascript +if(1 == 1){ +alert("相等") + +} +``` + +在程序中都是用== 作为相等 因为一个 = 是赋值 所以判断的时候得用 两个 = + +作业 + +- 将 "123" 转化为number类型 +- "123" == 123 会将两边转化为什么类型 +- undefined == NaN 是true 还是false \ No newline at end of file diff --git a/javascriptpress/4.javascript基础.assets/163f6b03478ae38a b/javascriptpress/4.javascript基础.assets/163f6b03478ae38a new file mode 100644 index 0000000..2774e15 Binary files /dev/null and b/javascriptpress/4.javascript基础.assets/163f6b03478ae38a differ diff --git a/javascriptpress/4.javascript基础.md b/javascriptpress/4.javascript基础.md new file mode 100644 index 0000000..146844d --- /dev/null +++ b/javascriptpress/4.javascript基础.md @@ -0,0 +1,60 @@ +# javascript基础 +## 基础类型与引用类型 +类型之前是有区别的 什么叫基础类型 什么叫引用类型呢? + +## 基础类型 +- string +- number +- boolean +- null +- undefined + +基础类型在传递值的时候会复制自己 +```javascript +var name = "啦啦啦"; +var name1 = name; +name1 = "喵喵喵"; +alert(name); +alert(name1); +``` +## 引用类型 +- array +- obgect +- function +```javascript +var obg = {name:"啦啦啦"} +var bog1 = obg +obg1.name = "喵喵喵" +alert(obg.name) +alert(obg1.name) +``` + +## 栈堆 + + + +![wechatimg104](4.javascript基础.assets/163f6b03478ae38a) + +所有的变量都是在栈里面 但是如果创建引用类型的时候会在堆创建 然后只赋值对象地址给栈里面的变量 + +这个得详细讲一下 + + + +当创建变量的时候 会在栈创建一个位置 对应变量名 值为undefined + +赋值的时候 会赋值栈里面的值 + +创建对象的时候 会在堆里面创建一个空间 存储对象 赋值的时候赋的是堆里面的内存地址 就是在堆里面的名字 + +根据以上的规则 当将一个指向对象的变量赋值给另一个变量的时候 因为只会赋值栈里面的值 所以赋值的是内存地址 + +修改的时候修改的是同一个内存的对象 所以就会出现修改一个另一个也会同时改变的 + + + + + +作业 +- 为什么对象是引用的 +- 引用类型与基础类型有什么区别 \ No newline at end of file diff --git a/javascriptpress/5.javascript基础.assets/JavaScript-do-while-loop.png b/javascriptpress/5.javascript基础.assets/JavaScript-do-while-loop.png new file mode 100644 index 0000000..1ec2875 Binary files /dev/null and b/javascriptpress/5.javascript基础.assets/JavaScript-do-while-loop.png differ diff --git a/javascriptpress/5.javascript基础.assets/JavaScript-while-loop.png b/javascriptpress/5.javascript基础.assets/JavaScript-while-loop.png new file mode 100644 index 0000000..b418b87 Binary files /dev/null and b/javascriptpress/5.javascript基础.assets/JavaScript-while-loop.png differ diff --git a/javascriptpress/5.javascript基础.assets/ZLrR6mFfILH-ZhmDC_KrG7BrIZMwSK7lkKvr8AV9i9vDcgR-94kJJVkimy-hRU9EPJX8W10f2tQplulr5rdrWxpVs57IgxWUBshMbTxq b/javascriptpress/5.javascript基础.assets/ZLrR6mFfILH-ZhmDC_KrG7BrIZMwSK7lkKvr8AV9i9vDcgR-94kJJVkimy-hRU9EPJX8W10f2tQplulr5rdrWxpVs57IgxWUBshMbTxq new file mode 100644 index 0000000..6387026 Binary files /dev/null and b/javascriptpress/5.javascript基础.assets/ZLrR6mFfILH-ZhmDC_KrG7BrIZMwSK7lkKvr8AV9i9vDcgR-94kJJVkimy-hRU9EPJX8W10f2tQplulr5rdrWxpVs57IgxWUBshMbTxq differ diff --git a/javascriptpress/5.javascript基础.md b/javascriptpress/5.javascript基础.md new file mode 100644 index 0000000..6194c2b --- /dev/null +++ b/javascriptpress/5.javascript基础.md @@ -0,0 +1,168 @@ +# javascript基础 + +## 循环语句 + +之前只是说了条件语句 如果说有重复工作的时候就得写好多遍 比如之前要得用alaert() 弹出数组所有的成员 在循环里面可以很简单的实现 + +javascript 中有多少循环呢? + +- for +- while +- do while + +## for + +for是如何使用的呢 还是用一个例子 比如我定义一个数组 然后弹出所有的成员 + +```javascript + +var list = ["苹果","香蕉","橘子"] +for(var i = 0;i < list.length; i++){ + alert(i); + alert(list[i]) +} +``` + +上面的list.lenght是什么呢? length是 数组的一个属性 代表这有多少成员数 比如 + +```javascript +var list = [1,2,3] +alert(list.length) // 出现的是3 +``` + +他有多少成员就会弹出几个数字 但是这个不是从0 开始的 出现几就是有一个 0就是有0个 1 就是有1 个 并不是0 代表有一个 + +++ 变量自增 举个例子 + +```javascript +var num = 1; +num++; +alert(num); // 2 + + +// 类似于 +var i = 1; +i = i + 1; +alert(i) +``` + +就是当前值加上1 的简写 除了++ 还有-- 只是自己减去1 在循环中很常用到 因为大部分都是每次循环将循环变量加上1 + + + +下面看下循环 + + +![Javascript for循环_郭隆邦技术博客](5.javascript基础.assets/ZLrR6mFfILH-ZhmDC_KrG7BrIZMwSK7lkKvr8AV9i9vDcgR-94kJJVkimy-hRU9EPJX8W10f2tQplulr5rdrWxpVs57IgxWUBshMbTxq) + +上面的流程图是整个for循环执行的过程 下面将详细解释一下 + +```javascaript +fro(语句1 ; 语句2 ;语句3){ + 循环体 +} +``` + +当代码走到for的时候 先执行语句1 就是第一个分号前的那个 这个在循环中只执行一次 一般用于初始化循环变量 + +然后走语句二 语句二是一个条件 当这个条件为true 的时候 就执行循环体 如果false 就结束循环 执行循环后面的语句 + +如果语句二是true 那么将执行循环体 就是for后面{}里面的内容 + +执行完循环体的内容之后就会执行语句三 执行完之后再执行语句二 然后又是开始从语句二执行 然后再进行判断 ..... + +这样就一直循环下去 + + + +#### *= + +图片中还有一个 *=是什么 ? + +```javascript +var num = 5; +num *= 5; +alert(num); // 25 + +// 等同于 +var num = 5; +num = num * 5; +alert(num) // 25 +``` + +除了*= 还有+=,-=,/= 这三个 功能是类似的 + +## while + +while循环跟for循环类似 但是只有一个条件 + +```javascript +var i = 0; +while(i < 10){ + alert(i); + i++ +}; + +``` + +![JavaScript while Loop By Examples](5.javascript基础.assets/JavaScript-while-loop.png) + +1. 开始的时候进入循环 判断条件 +2. 如果条件成立进入循环体 不成立结束 +3. 循环体结束判断条件 执行第2步 + +相对于for少了两个 一个是初始化变量 一个是结束后执行的语句 + +上面的例子中 + +```javascript +var i = 0; // 这个就是初始化语句 +while(i < 10){ // i<10 就是条件 + i++ // 这个可以理解为for循环最后一个语句 +} +``` + +只是把这两个拆分出来了 有时候我们不需要初始化变量 或者循环后不需要执行什么语句 那时候就可以选择while + + + +## do-while + +相对于while有一些区别 + +```javascript +var i = 10; +do{ + alert("现在i是" + i) +}while(i<9) +``` + +i是10 的时候 while 的条件写的是 i<9 但是第一遍还是成立了 + +![JavaScript do-while Loop with Practical Usages](5.javascript基础.assets/JavaScript-do-while-loop.png) + +do-while 循环 会先执行循环体 然后再判断条件 第一次执行的时候不管条件 直接执行 循环体里面的语句 然后执行完毕之后再进行判断条件 条件是成立的 再次回到循环体开头 不成立 循环结束 + +## break + +当有一次循环不想让他走的时候 就可以用break + +比如要从1 打印到 10 要循环10次 但是我想在第4次的时候结束循环 + +```javascript +for(var i = 1; i < 11; i++){ + if(i == 4){ + break; + } + alert(i) +} +``` + + + +## 作业 + +- 计算 从1 到100 的总和 (累加) +- 创建一个数组 弹出数组的所有元素 +- 计算 1- 100中所有的偶数的和 + diff --git a/javascriptpress/6.javascript基础.md b/javascriptpress/6.javascript基础.md new file mode 100644 index 0000000..e69de29 diff --git a/javascrit info/目录.md b/javascrit info/目录.md new file mode 100644 index 0000000..4b0a3d0 --- /dev/null +++ b/javascrit info/目录.md @@ -0,0 +1,110 @@ +# 需要学习的列表 + +- https://zh.javascript.info/hello-world +- https://zh.javascript.info/structure +- https://zh.javascript.info/variables +- https://zh.javascript.info/types +- https://zh.javascript.info/alert-prompt-confirm +- https://zh.javascript.info/type-conversions +- https://zh.javascript.info/operators +- https://zh.javascript.info/comparison +- https://zh.javascript.info/ifelse +- https://zh.javascript.info/logical-operators +- https://zh.javascript.info/nullish-coalescing-operator +- https://zh.javascript.info/while-for +- https://zh.javascript.info/switch +- https://zh.javascript.info/function-basics +- https://zh.javascript.info/function-expressions +- https://zh.javascript.info/arrow-functions-basics +- https://zh.javascript.info/javascript-specials +- https://zh.javascript.info/comments +- https://zh.javascript.info/object +- https://zh.javascript.info/object-copy +- https://zh.javascript.info/object-methods +- https://zh.javascript.info/constructor-new +- https://zh.javascript.info/optional-chaining +- https://zh.javascript.info/primitives-methods +- https://zh.javascript.info/number +- https://zh.javascript.info/string +- https://zh.javascript.info/array +- https://zh.javascript.info/array-methods +- https://zh.javascript.info/destructuring-assignment +- https://zh.javascript.info/date +- https://zh.javascript.info/json +- https://zh.javascript.info/recursion +- https://zh.javascript.info/closure +- https://zh.javascript.info/var +- https://zh.javascript.info/global-object +- https://zh.javascript.info/function-object +- https://zh.javascript.info/new-function +- https://zh.javascript.info/settimeout-setinterval +- https://zh.javascript.info/call-apply-decorators +- https://zh.javascript.info/bind +- https://zh.javascript.info/arrow-functions +- https://zh.javascript.info/prototype-inheritance +- https://zh.javascript.info/function-prototype +- https://zh.javascript.info/native-prototypes +- https://zh.javascript.info/prototype-methods +- https://zh.javascript.info/try-catch +- https://zh.javascript.info/callbacks +- https://zh.javascript.info/promise-basics +- https://zh.javascript.info/promise-chaining +- https://zh.javascript.info/promise-error-handling +- https://zh.javascript.info/promise-api +- https://zh.javascript.info/async-await +- https://zh.javascript.info/eval + +## 下面是浏览器的了 dom 事件 + +- https://zh.javascript.info/browser-environment +- https://zh.javascript.info/dom-nodes +- https://zh.javascript.info/dom-navigation +- https://zh.javascript.info/searching-elements-dom +- https://zh.javascript.info/basic-dom-node-properties +- https://zh.javascript.info/dom-attributes-and-properties +- https://zh.javascript.info/modifying-document +- https://zh.javascript.info/styles-and-classes +- https://zh.javascript.info/size-and-scroll +- https://zh.javascript.info/size-and-scroll-window +- https://zh.javascript.info/coordinates +- https://zh.javascript.info/introduction-browser-events +- https://zh.javascript.info/bubbling-and-capturing +- https://zh.javascript.info/event-delegation +- https://zh.javascript.info/default-browser-action +- https://zh.javascript.info/mouse-events-basics +- https://zh.javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave +- https://zh.javascript.info/mouse-drag-and-drop +- https://zh.javascript.info/keyboard-events +- https://zh.javascript.info/onscroll // 可能暂时不需要 +- https://zh.javascript.info/form-elements +- https://zh.javascript.info/focus-blur +- https://zh.javascript.info/events-change-input +- https://zh.javascript.info/forms-submit +- https://zh.javascript.info/onload-ondomcontentloaded +- https://zh.javascript.info/script-async-defer +- https://zh.javascript.info/onload-onerror + +## fetch 这个并不常见 了解一下 + +- https://zh.javascript.info/fetch +- https://zh.javascript.info/formdata +- https://zh.javascript.info/fetch-progress +- https://zh.javascript.info/fetch-abort +- https://zh.javascript.info/fetch-crossorigin +- https://zh.javascript.info/fetch-api +- https://zh.javascript.info/url + +## XMLHttpRequest + +- https://zh.javascript.info/xmlhttprequest + +## webscoket + +- https://zh.javascript.info/websocket + +## 存储 + +- https://zh.javascript.info/cookie +- https://zh.javascript.info/localstorage +- https://zh.javascript.info/indexeddb // 了解 + diff --git a/javascrit info/重点.md b/javascrit info/重点.md new file mode 100644 index 0000000..6a6519d --- /dev/null +++ b/javascrit info/重点.md @@ -0,0 +1,21 @@ +# 重点 + +- 作用域 +- this +- 原型 原型链 +- promise +- async await +- doucument +- 事件冒泡 +- 事件委托 +- 箭头函数 +- LocalStorage +- JSON +- 网络请求 + +# 难点 + +- 继承 +- 闭包 +- 预编译 +