diff --git "a/36 \345\210\230\350\216\271\350\216\271/1026\345\205\245\351\227\250.md" "b/36 \345\210\230\350\216\271\350\216\271/1026\345\205\245\351\227\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..cf73a7f2fc92680e0f6a2f99a5fbc00851eb2731 --- /dev/null +++ "b/36 \345\210\230\350\216\271\350\216\271/1026\345\205\245\351\227\250.md" @@ -0,0 +1,63 @@ + + + + + + + Document + + + 百度一下 + + Google一下 + + + + +# 说出JavaScript中的常见数据类型以及它们代表的含义(预习) +基本数据类型分别是:Number、String、Undefined、Boolean、Null; + +Number类型:数字类型,包括float(浮点型)和int(整形) + +​ 【特殊数字类型】 + +​ Infinity(无穷)有正负之分,Infinity代表的是数学概念中的正无穷大,+Infinity是一个比任何数字都大的特殊值,-Infinity是比任何一个数字都小的特殊值,一般都只说Infinity,不说正负,但是需要注意的是,在数学中我们说正无穷+1与正无穷基本没有区别,但是在计算机中 Infinity+1始终大于Infinity; + +​ NAN(非数)代表的是计算错误,意思就是无法进行数值运算,需要注意的是如果在数学表达式计算中有一步出现NAN,那么最终的结果一定就是NAN + +String类型:字符串类型 + +字符串必须被包含在引号里面,有三种包含字符串的方式,分别是单引号、双引号和飘号 + +单引号和双引号种简单的引用,不像PHP的双引号可以解析变量, + +但是js的飘号可以解析表达式和变量,并且计算结果也会成为字符串的一部分,写法为:${表达式} + +Undefined类型:未被赋值 + +undefined的含义是未被赋值,如果我们定义了一个变量,但没有给变量赋值即变量未初始化,那么变量的值就是 undefined + +含undefined值的变量和没有定义的变量是有区别的 + +Boolean类型:逻辑类型 + +Boolean的值区分大小写,只有全部小写的true和 false才是布尔值,其它的例如大写或者大小写混合只是标识符。 + +Null类型:空值 + +NULL和undefined一样属于一个单独的数据类型,NULL表示没有、空的; + +在JS中,变量一旦被定义,就无法销毁,始终存在于内存中 + +复杂数据类型:Object、Symbol + +Object类型:用于更复杂的数据结构。 + +Symbol类型:用于唯一的标识符。 + +Typeof()操作符:检测给定变量的数据类型 \ No newline at end of file diff --git "a/36 \345\210\230\350\216\271\350\216\271/1027\351\223\266\350\241\214\345\215\241\344\275\231\351\242\235.md" "b/36 \345\210\230\350\216\271\350\216\271/1027\351\223\266\350\241\214\345\215\241\344\275\231\351\242\235.md" new file mode 100644 index 0000000000000000000000000000000000000000..fbc4186d7633e771353095ade0eba7bf138007cc --- /dev/null +++ "b/36 \345\210\230\350\216\271\350\216\271/1027\351\223\266\350\241\214\345\215\241\344\275\231\351\242\235.md" @@ -0,0 +1,96 @@ +#笔记 +一.数据类型: + +1.number 类型代表整数和浮点数 + +2.String 字符串类型 + +3.boolean 布尔类型 false /ture + +4.Object 引用类型和复杂类型 + +5.Null 只有一个值,null + +6.Undefined 只有一个值,undefined 用于未定义的值 +二.定义一个变量:let 字段名称 = 数值 / ‘字符串内容’ ; + +let name='张三'; + +let num=123; + +let a,b,c; a=10; b=20; c=30; + +let a=10,b=20,c=30; +变量命名规则:必须遵守 + + 1.第一个字符必须是一个字母、下划线( _ )或一个美元符号( $ ) + + 2.其他字符可以是字母、下划线、美元符号或数字 + + 3.不能使用关键字和保留字命名: + + 4.变量严格区分大小写 +console.log(isNaN(10)); 返回false + +console.log(isNaN('aaaa')); 返回ture +作业 + + + + + + + 费用总结 + + + + + + + + +

10月份消费记录

+ + + + + + + + + + +
银行卡总额水费电费网费余额
+ + + \ No newline at end of file diff --git "a/36 \345\210\230\350\216\271\350\216\271/1030\344\275\234\344\270\232.md" "b/36 \345\210\230\350\216\271\350\216\271/1030\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..fee3ab1e36380e0e11eb9eeaaa7bb7c5cacc9941 --- /dev/null +++ "b/36 \345\210\230\350\216\271\350\216\271/1030\344\275\234\344\270\232.md" @@ -0,0 +1,170 @@ +#笔记 +i++ 是先打印i后自增 ++i 是先自增后打印 + +prompt()中获取的始终都是字符串 所以当我们需要获取number类型时候需要用parseint + +进行转型才能够获得 + +1.for循环 +错误写法 +text += cars[0] + "
"; +text += cars[1] + "
"; +text += cars[2] + "
"; +text += cars[3] + "
"; +text += cars[4] + "
"; +text += cars[5] + "
"; +for循环写法 +for (i = 0; i < cars.length; i++) { + text += cars[i] + "
"; + } +2.switch循环 +switch(表达式) { + case n: + 代码块 + break; + case n: + 代码块 + break; + default: + 默认代码块 +} +eg: + +switch (new Date().getDay()) { + case 0: + day = "星期天"; + break; + case 1: + day = "星期一"; + break; + case 2: + day = "星期二"; + break; + case 3: + day = "星期三"; + break; + case 4: + day = "星期四"; + break; + case 5: + day = "星期五"; + break; + case 6: + day = "星期六"; +} +break 关键词 +如果 JavaScript 遇到 break 关键词,它会跳出 switch 代码块。 + +此举将停止代码块中更多代码的执行以及 case 测试。 + +如果找到匹配,并完成任务,则随机中断执行(break)。无需更多测试。 + +break 能够节省大量执行时间,因为它会“忽略” switch 代码块中的其他代码的执行。 + +不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。 + +default 关键词 +default 关键词规定不存在 case 匹配时所运行的代码: + +实例 +getDay() 方法返回 0 至 6 的数字周名。 + +如果今日既不是周六(6)也不是周日(0),则输出一段默认消息: + +switch (new Date().getDay()) { + case 6: + text = "今天是周六"; + break; + case 0: + text = "今天是周日"; + break; + default: + text = "期待周末~"; +} +严格的比较 +Switch case 使用严格比较(===)。 + +值必须与要匹配的类型相同。 + +只有操作数属于同一类型时,严格比较才能为 true。 + +在这个例子中,x 将不匹配: + +3.While 循环 +while 循环会一直循环代码块,只要指定的条件为 true。 + +语法 +while (条件) { + 要执行的代码块 +} +实例 +在下面的例子中,循环中的代码将运行,一遍又一遍,只要变量(i)小于 10: + +while (i < 10) { + text += "数字是 " + i; + i++; +} +4.Do/While 循环 +do/while 循环是 while 循环的变体。在检查条件是否为真之前,这种循环会执行一次代码块,然后只要条件为真就会重复循环。 + +语法 +do { + 要执行的代码块 +} + +while (条件); +实例 +下面的例子使用了 do/while 循环。该循环会执行至少一次,即使条件为 false,因为代码块会在条件测试之前执行: + +do { + text += "The number is " + i; + i++; + } +while (i < 10); +作业 +简单的用循环做出银行卡系统 + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/36 \345\210\230\350\216\271\350\216\271/1031\346\225\260\347\273\204.md" "b/36 \345\210\230\350\216\271\350\216\271/1031\346\225\260\347\273\204.md" new file mode 100644 index 0000000000000000000000000000000000000000..a119ce96efa0ec62e1ad9c29fe6e08608e214af7 --- /dev/null +++ "b/36 \345\210\230\350\216\271\350\216\271/1031\346\225\260\347\273\204.md" @@ -0,0 +1,62 @@ +#笔记 +1.数组 +定义一个数组:let str=['aa',11,34,'小明']; +索引值的下标是从0开始的 + +通过索引查数组中的值:console.log(str[1]); -- 11 +js很灵活,类型不固定 + +长度:对象名称.length; + +2.push 向数组的尾部添加一个单元 + unshift 向数组的头部添加一个单元 + pop 删除最后一个单元,将删除的单元返回给你 + shift 删除第一个单元,将删除的单元返回给你 + splice 删除任意一个单元,将删除的单元返回给你 + 注:对象名称.push('ss'); + 对象名称.unshift(112); + 对象名称.pop(); + 对象名称.shift(); + 对象名称.splice(2,3); -- 2是数组的索引值,3是删除三个数 +2.作业 + + + + + + + Document 点击台模拟 + + +

随机点名

+
+

花名册名单

+
+

1

+
+

已选中的名单

+
+

3

+
+ + + + \ No newline at end of file diff --git "a/36 \345\210\230\350\216\271\350\216\271/1114\344\275\234\344\270\232.md" "b/36 \345\210\230\350\216\271\350\216\271/1114\344\272\213\344\273\266\346\265\201.md" similarity index 31% rename from "36 \345\210\230\350\216\271\350\216\271/1114\344\275\234\344\270\232.md" rename to "36 \345\210\230\350\216\271\350\216\271/1114\344\272\213\344\273\266\346\265\201.md" index 8e5ec4ffefa697aec7ee044e042396e362578f73..2720852a40e45a2f916dfa21fe071e4017048020 100644 --- "a/36 \345\210\230\350\216\271\350\216\271/1114\344\275\234\344\270\232.md" +++ "b/36 \345\210\230\350\216\271\350\216\271/1114\344\272\213\344\273\266\346\265\201.md" @@ -1,238 +1,76 @@ -```javascript -// 以事件委托的形式实现 - // 点击每个小li 当前li 文字变为红色 - // 1.获取li的父元素 - const ul = document.querySelector('ul'); - // 2.给ul添加点击事件 - ul.addEventListener('click',function(e){ - // 3.使用事件对象 e.target.tagName 代表被 - // console.log(e.target); // 被点击的对象的目标 - // console.dir(e.target); // 被点击的对象的目标的标签名称 - /* - e 事件对象 - e.target 事件对象的点击目标 - e.target.tagName 目标的标签名称 - */ - if(e.target.tagName === 'LI'){ - //this. 此时这里this是ul所以不能用this - e.target.style.color = 'red' - } +#笔记 +以目录的形式打印对象到控制台 - if(e.target.tagName === 'P'){ - //this. 此时这里this是ul所以不能用this - e.target.style.color = 'blue' - } - }) -``` +鼠标行为拓展 +mouse +over 进入(冒泡) / +enter 进入(不冒泡) +​ +out 离开(冒泡) / +leave离开(不冒泡冒泡) +checked +在js中,这个属性用于选中或者取消选中复选框或按钮 -```javascript - e.preventDefault(); //阻止对象的默认行为 +当它为true时,该元素将会被选中 - e.stopPropagation(); //阻止冒泡行为 -``` +当它为false时,该元素将会被取消选中 -````html +阻止默认行为 +默认行为指的是原标签的原有的动作行为 -# 作业 +而对象.preventDefault()可以将原标签的动作行为给阻止掉 -~~~~js +捕获和冒泡 +捕获阶段(Capturing Phase):事件从最外层的元素开始向内部元素传播,直到达到目标元素。 -### 全选按钮案例 +在捕获阶段,事件首先触发在最外层元素上注册的事件处理程序,然后逐级向目标元素传播。 -```html - +(从大到小) - +冒泡阶段(Bubbling Phase):事件从目标元素开始向外传播,直到达到最外层的元素。 - - - 全选课后练习 - - +当调用stopPropagation()方法后,事件将不再向父元素或子元素传播。 - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 全选 - 商品商家价格
- - 小米手机小米¥1999
- - 小米净水器小米¥4999
- - 小米电视小米¥5999
- - +且需要确保传入的事件处理程序与之前绑定的事件处理程序是完全相同的函数引用,否则无法成功移除。 - -``` +// 定义一个事件处理程序 +function clickHandler() { + console.log('Button clicked'); +} -### 事件委托 +// 获取按钮元素 +var myButton = document.getElementById('myButton'); -```HTML - - +// 绑定事件处理程序 +myButton.addEventListener('click', clickHandler); - - - - - Document - - - - - - - - -``` +假设有一个父元素,我要给其中的所由子元素添加事件处理,我就可以获取这个父元素的对象,给中国父元素添加对应的事件,后在事件里面的函数中 +在函数中添加形参则会返回被触发了父元素事件的对象的所有信息 +用.target关键字来提取在父元素中触发了父元素事件的子元素并返回,再加上.tagName属性来获取该元素的标签名,获取后可以直接用于判断或者再加上.style来获取子元素的css元素 -### tab栏切换 - -事件委托形式 - -```html +#作业 @@ -339,7 +177,6 @@ // 将其它A标签的红色去掉active document.querySelector('li .active').classList.remove('active') // 给当前A标签加上active - // this. 采取事件委托时this是指父元素 e.target.classList.add('active') // 先去掉默认的active效果 @@ -356,40 +193,4 @@ -``` - -### 阻止默认行为 - -```HTML - - - - - - - - Document - - - -
- -
- 百度一下 - - - - \ No newline at end of file diff --git "a/36 \345\210\230\350\216\271\350\216\271/1121\345\255\246\347\224\237\347\256\241\347\220\206\347\263\273\347\273\237.md" "b/36 \345\210\230\350\216\271\350\216\271/1121\345\255\246\347\224\237\347\256\241\347\220\206\347\263\273\347\273\237.md" new file mode 100644 index 0000000000000000000000000000000000000000..3f24e34d438754b21b3100a39cfdcb822c4a5e84 --- /dev/null +++ "b/36 \345\210\230\350\216\271\350\216\271/1121\345\255\246\347\224\237\347\256\241\347\220\206\347\263\273\347\273\237.md" @@ -0,0 +1,55 @@ + + + + + + + + 学生信息管理 + + + + +

新增学员

+
+ 姓名: + 年龄: + 性别: + + 薪资: + 就业城市: + +
+

就业榜

+ + + + + + + + + + + + + + + + + +
学号姓名年龄性别薪资就业城市操作
+ + + + +