练习

zuoye/htmlcss/基础.md

@@ -0,0 +1,83 @@
+# html基础练习
+1. 写出html基本结构
+
+
+
+
+
+
+2. 写出至少5个单标签和至少8个双标签
+
+
+
+
+3. 新建一个html文件，页面上展示hello world
+    world加粗
+   完成微信群内发截图
+
+
+
+
+
+4. 新建一个html文件，页面上展示一篇文章的题目，作者，发布日期，正文内容，阅读量，点赞量，评论量
+   其中，标题单独一行，下面放作者，发布日期，下面放正文内容，最下面放阅读量，点赞量，评论量
+    完成微信群内发截图
+
+
+
+
+
+
+
+5. 在任务4的基础上 在正文之前插入一个图片作为文章封面
+完成微信群内发截图
+
+
+
+
+
+
+6. 在任务5的基础上，从最上面添加一个输入框和搜索按钮，点击搜索，将输入框中输入的值带入www.baidu.com的地址栏中
+完成微信群里发截图
+
+
+
+
+
+
+7. 用自己的方式调整任务4的html页面的样式
+完成微信群内发截图
+
+
+
+
+
+
+8. 完成下面的效果（内容为苏宁易购官网  https://www.suning.com/）
+
+![image-20210417142345798](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142345798.png)
+
+
+
+![image-20210417142408070](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142408070.png)
+
+
+
+
+
+![image-20210417142440900](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142440900.png)
+
+
+
+
+
+![image-20210417142544829](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142544829.png)
+
+
+
+
+
+
+
+![image-20210417142700974](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142700974.png)
+

zuoye/htmlcss/移动端.md

@@ -0,0 +1,179 @@
+# 移动端
+
+1. 仿写京东手机版（https://m.jd.com/）
+
+
+
+![image-20210417163206797](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163206797.png)
+
+
+
+2.  手机端表格练习
+
+   ![image-20210417163418136](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163418136.png)
+
+备注  表格字段有 头像  昵称  活跃度  加入时间 是否为好友  性别  位置  id个性签名
+
+  除了用户 （包含用户名头像外 其他列可滚动）
+
+
+
+
+
+
+
+![https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0125e35d47ef40a8012187f4f7aaab.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=eba176a1ea0109aa3252b467c48d0ca4](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0125e35d47ef40a8012187f4f7aaab.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=eba176a1ea0109aa3252b467c48d0ca4)
+
+
+
+
+
+
+
+
+
+
+
+资料上传列表
+
+![image-20210417163701901](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163701901.png)
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a01d592a7ab4a801216a3eeaa63c.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240479&t=7ca2dc926246bc1b6b0680dfdb1081d7)
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0167d557cf866c0000012e7e49f4fc.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240525&t=7e8e3a100d52c60ec67e9025e78d2b33)
+
+
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015bf25704b4586ac7257948a0b2ae.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240548&t=31fe58487a386b4a2836efe187898126)
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0102b65c2c972aa80121df909f1e42.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240574&t=df10a8630b82ab30211d58ee1ceac800)
+
+
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c86a5544f0fd0000019ae94781fc.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240616&t=db74f69d43d7b8d5402232e79a7a0a10)
+
+
+
+
+
+
+
+![image-20210417164124658](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417164124658.png)
+
+
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01039556c2c60b6ac7256cb03ab3e7.jpg%40900w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240795&t=6290cc4a0019953a2e092735eb0c193b)
+
+
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01319a56c2c6496ac7256cb0123846.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240795&t=62c251b5ee11806b4c89dd3caf16ef42)
+
+
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fy.zdmimg.com%2F201806%2F04%2F5b14875b2d1c75965.jpg&refer=http%3A%2F%2Fy.zdmimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240885&t=0e67fab688de74d39209d0a4dc6be523)
+
+
+
+
+
+
+
+##  移动端  表单
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftmp.weibenh5.com%2Fueditor%2Fphp%2Fupload%2Fimage%2F20191107%2F1573119926768056.jpg&refer=http%3A%2F%2Ftmp.weibenh5.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240988&t=312df1869a7967c3c965d2cdcd2acd80)
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.tuicool.com%2FziAzAra.png%21web&refer=http%3A%2F%2Fimg1.tuicool.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=723cf0e70e7f2cbe12a0e501c1b35ff3)
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F11cb4b3d0ff0a53c439ff901c15773ee883537e81818e-JNNnIk_fw236&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=1e53a2d8a4fd1a46e7371d5ec97b6d4d)
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.xueui.cn%2Fwp-content%2Fuploads%2F2018%2F05%2F201805221526996841-1.jpg&refer=http%3A%2F%2Fimgs.xueui.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=ef5ff249a66ba48f3a98c3db7a5fbcc9)
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.woshipm.com%2Fwp-files%2F2017%2F10%2F4-117.png&refer=http%3A%2F%2Fimage.woshipm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=e2bc9cddd782d4135b8cc45e75b36f5c)
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.xueui.cn%2Fwp-content%2Fuploads%2F2018%2F05%2F201805221526996843.jpg&refer=http%3A%2F%2Fimgs.xueui.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=4e3a6bb8141ce3c1beaaa9ca456f773e)
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.uiwhy.cn%2Fzb_users%2Fupload%2F2018%2F12%2F20181209021548_11246.png&refer=http%3A%2F%2Fwww.uiwhy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=33f8b7c74681687f21af7f120d4dbe9f)
+
+
+
+
+
+
+
+
+
+
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F02d5985756a1bd0000018c1b4d6a6f.jpg%40800w_1l_2o&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=b1ffae7a87f49df49417fa80913b69f8)

zuoye/htmlcss/表单.md

@@ -0,0 +1,100 @@
+# 表单
+
+ 完成下面练习
+
+1.
+
+![image-20210417151640744](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151640744.png)
+
+
+
+
+
+2.
+
+![image-20210417151656818](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151656818.png)
+
+
+
+3.
+
+
+
+![image-20210417151728218](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151728218.png)
+
+4.
+
+![image-20210417151948720](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151948720.png)
+
+
+
+5.
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.bjmcykj.com%2Fuploadfile%2F2014%2F05%2F28%2F20140528165362142.jpg&refer=http%3A%2F%2Fwww.bjmcykj.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235777&t=b029f432f4c7ff6a2352008cce43ae6b)
+
+
+
+6.
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.codezhijia.com%2FPublic%2FUpload%2Ftemplates%2F5baecd6d8a7e6.png&refer=http%3A%2F%2Fwww.codezhijia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235804&t=dd0cbd4385476733cc1f2d3110f2b917)
+
+（上面的滑动验证可以先忽略掉）
+
+
+
+
+
+7.
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F604c82fc85f6ea812bc83407fc5cb24d463be3da19f0-No3sSO_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621236049&t=696bec1e475e180b3e5d298fe3f7141e)
+
+
+
+
+
+
+
+8.
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lx98.cn%2Fuploads%2Fallimg%2F171103%2Ftlns41leaue.jpg&refer=http%3A%2F%2Fwww.lx98.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235868&t=9cbdca965291ed20abc3af31309da545)
+
+
+
+
+
+（先只完成表单分类管理部分）
+
+
+
+
+
+9.
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ee21.cn%2Fimg%2F1%2F58663%2F351704200535512968472.jpg&refer=http%3A%2F%2Fp.ee21.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621236049&t=25fe7f2770bef17efdf7eb939fdfe518)
+
+
+
+10.
+
+![img](http://photocdn.sohu.com/20160311/mp63076656_1457700748118_3_th.png)
+
+
+
+
+
+
+
+
+
+![http://5b0988e595225.cdn.sohucs.com/images/20190621/d9c09882159949319e82af4d569f76c3.jpeg](http://5b0988e595225.cdn.sohucs.com/images/20190621/d9c09882159949319e82af4d569f76c3.jpeg)
+
+
+
+
+
+
+
+
+

zuoye/htmlcss/表格.md

@@ -0,0 +1,89 @@
+# 表格
+
+* 完成下面的表格
+  
+
+![image-20210417145804193](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417145804193.png)
+
+
+
+* 完成课程表
+
+  ![image-20210417150516346](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417150516346.png)
+
+
+
+
+
+
+
+* 完成下面简历表格
+
+  **![墨绿色简洁空白简历表格word格式个人简历模板 ](https://img-u-0.51miz.com/Templet/00/16/52/97/165297_8d74ff62b666bd456f24c782825d3bb8.jpg!/quality/90/unsharp/true/compress/true/fw/840/clip/840x700a0a0)**
+
+
+
+
+
+
+
+
+
+* 完成下面的三个数据表
+* ![img](http://img02.tuke88.com/preview/2418175/00/04/22/5c20a2d4f28b4.jpg-0.jpg!/fw/800/quality/90/unsharp/true/compress/true)
+
+
+
+
+
+![image-20210417150651452](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417150651452.png)
+
+
+
+
+
+* 结合表单完成下面表格
+
+
+
+![image-20210417145821858](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417145821858.png)
+
+
+
+![白色产品报价单](https://www.55.la/uploads/1880910/1_new.jpg)
+
+
+
+
+
+
+
+![白色送货单Excel表格](https://www.55.la/uploads/1905062/1_new.png)
+
+
+
+
+
+
+
+
+
+![学习计划和作息时间表](https://www.55.la/uploads/1880714/1_new.png)
+
+
+
+
+
+
+
+![单位工作交接表](https://www.55.la/uploads/1880864/1_new.jpg)
+
+
+
+
+
+
+
+
+
+![财务报表素材](https://pic.ibaotu.com/00/11/68/70R888piCUwe.jpg-1.jpg!ww7002)

zuoye/jq es6/es6.md

@@ -0,0 +1,105 @@
+# es6 相关
+
+1. 下面这个例子最外面会输出10   如何解决
+   
+   ```
+   for(var i = 0; i < 10; i++) {
+      console.log(1);
+    }
+    console.log(i);
+   ```
+
+2. 使用结构赋值，实现两个变量的值的交换
+3. 使用结构赋值，完成函数的参数默认值
+4. 利用数组推导，计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。
+5. 使用模板字符串改写下面的代码。（ES5 to ES6改写题）
+   ```
+   letname ="前端研究所";
+    letobj = {
+        "name":name,
+        "say":function(){
+        alert('hello world');
+        }
+    };
+
+   ```
+6. 用箭头函数的形式改写下面的代码。（ES5 to ES6改写题）
+   
+   ```
+   arr.forEach(function(v,i) {
+        console.log(i);
+        console.log(v);
+    });
+
+   ```
+
+7. 设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key。
+8. 有一本书的属性为：{“name”:“《ES6基础系列》”, ”price”：56 }；要求使用Proxy对象对其进行拦截处理，name属性对外为“《ES6入门到懵逼》”,price属性为只读。（练习题）
+9. 阅读下面的代码，并用for...of改成它。（ES5 to ES6改写题）
+10. 关于Set结构，阅读下面的代码，回答问题。（代码阅读题）。
+    
+    ```
+    lets =newSet();
+    s.add([1]);
+    s.add([1]);
+    console.log(s.size);
+
+    ```
+    问：打印出来的size的值是多少？为什么
+    答：
+
+11. 关于Map结构，阅读下面的代码，回答问题。（代码阅读题）
+    
+    ```
+    letmap =newMap();
+    map.set([1],"ES6系列");
+    letcon = map.get([1]);
+    console.log(con);
+
+    ```
+
+    问：打印出来的变量con的值是多少，为什么？
+    答：
+
+
+12. 11题的如何得到的变量con的值就是：“ES6系列”。
+
+13. 通过class 定义一个类Animal，通过传参初始化它的类型，如：“猫科类”。它有一个实例方法：run，run函数体内容可自行定义。
+
+14. 基于上一题的Animal类，定义一个子类Cat并继承Animal类。初始化Cat类的昵称name和年龄age。并拥有实例方法eat，eat函数体内容可自行定义。
+
+15. 利用module模块，实现两个模块A和B，A模块导出变量name，age和say方法。B模块只导入变量name和say方法，并且重命名name为nickname。
+
+16. 使用字符串模板 把下面代码补充完整
+    ```
+    const greetings = (name) => {
+        return `hello     `; //要补充的部分
+    }
+    ```
+
+
+
+17.  使用es6语法 实现下图代码功能
+
+    ![preview](https://pic2.zhimg.com/v2-73bff89d4cfb706553610dd4725e21e1_r.jpg)
+
+
+
+
+
+18. 冻结上面17题中定义的对象 使其无法被修改（温馨提示可以用 object.freeze()）  简单了解object.freeze()的用法
+
+    参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
+
+19.   解释一下 `Object.freeze()` 和 `const` 的区别
+
+20. 说明下列方法为何不能用作 IIFE，要使其成为 IIFE，需要进行哪些更改？
+    
+    ```
+    function foo(){ }();
+
+    ```
+
+21. 用promise语法封装ajax功能，并调用
+
+22. 用await async 改写上面的21题

zuoye/jq es6/jq.md

@@ -0,0 +1,61 @@
+# jquery相关
+
+1. 在html文件中写上8个p标签，内容为
+   1.你有多久没有翻开过一本书了？
+   2. 加密原理详解：对称式加密VS非对称式加密
+   3.  低代码：正在改变软件的开发方式
+   4.  Vue 转 React不完全指北
+   5.  web安全（xss/csrf）简单攻击原理和防御方案（实战篇）
+   6. 深度解读 Chaos Mesh®，探索云原生混沌工程的奥秘 
+   7.  简洁设计-毛玻璃效果登陆页面
+   8.   996 前端人该如何持续学习
+   然后需要用jq实现点击哪个p标签 弹出对应的内容
+
+2. 在html文件内写6个checkbox 内容  value值自定义 需要不一样 和一个按钮在此基础上  点击按钮需要输出 选中的checkbox的value 以及选中的总个数
+
+
+3. 分类添加内容
+    如果选择 城市的话就添加到你喜欢哪个城市列表  如果选择游戏的话就添加到你喜欢哪个游戏的列表
+
+   效果图如下
+
+   ![img](https://images2015.cnblogs.com/blog/1093092/201701/1093092-20170125225432472-997852563.bmp)
+
+    4. 员工信息的增加和删除
+       从输入框内填写姓名，邮箱，薪资 点击submit 就把输入的员工信息添加到员工信息表中 
+       效果图如下
+
+![img](https://images2015.cnblogs.com/blog/1093092/201701/1093092-20170125224159300-1831658360.bmp)
+
+5. 品牌展示  超出部分点击显示全部信息全都展示
+
+   效果图如下
+
+   ![img](https://images2015.cnblogs.com/blog/1093092/201701/1093092-20170125224755191-614465786.bmp)
+
+6. 通过ajax 实现商品添加和商品展示功能 详情见附件 接口文档
+
+7. 完成登录 注册 用户表页面 并通过ajax完成提交/渲染功能
+
+8. 完成商城页面购物车的功能（单选 多选 全选。增删改查 ）<不牵扯接口  前端静态页面>
+
+9. 写一个移动端的底部tabbar的效果 图片可以不变 但是文字要变颜色
+
+10. 订单页面的tab切换效果
+
+11. 地址管理页面的地址增删改查 设置默认地址效果
+
+12.  京东页面的分类鼠标划过出不同菜单的效果
+
+    ![image-20210423112831959](E:\web\lessons\课件\zuoye\jq es6\jq.assets\image-20210423112831959.png)
+
+13. jq  实现 图片轮播效果（实现切换图片即可）
+
+14. 秒杀倒计时效果
+
+15. 根据当前时间确定在哪个区间的秒杀效果
+    ![image-20210423113138888](E:\web\lessons\课件\zuoye\jq es6\jq.assets\image-20210423113138888.png)
+
+16. 京东详情 选择分类效果
+
+    ![image-20210423113257018](E:\web\lessons\课件\zuoye\jq es6\jq.assets\image-20210423113257018.png)

zuoye/js/a.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        var time=1
+var newtime=time++
+console.log(time,newtime)
+    </script>
+</body>
+</html>

zuoye/js/js/运算符.md

@@ -1,4 +0,0 @@
-# 运算符
-* 完成教案后面的4个练习
-* 预习if语句，函数定义传参 ，定义一个函数 返回值实现两个参数的加减乘除 取余 乘方和相加的计算器功能
-* 完成逻辑运算符后面的9个练习

zuoye/js/基础.md

@@ -0,0 +1,142 @@
+# js 基础练习
+* 写出四种js引入方式并举例
+* 下面两段代码，说明js文件的加载顺序并解释原因
+    demo1:
+
+    ```
+    <script async src="js/vendor/jquery.js"></script>
+    <script async src="js/script2.js"></script>
+    <script async src="js/script3.js"></script>
+
+    ```
+
+    demo2
+    ```
+     <script defer src="js/vendor/jquery.js"></script>
+    <script defer src="js/script2.js"></script>
+    <script defer src="js/script3.js"></script>
+
+    ```
+* 如果浏览器不支持javascript的语法需要在页面上提示您的浏览器不支持javascript 运行  如何实现
+
+
+
+* 列举几种js 交互方式
+
+* js的组成
+
+* JavaScript 如何与 HTML 和 CSS 协同工作
+
+* 在外部文件中放置js脚本有什么优势
+
+
+
+变量和常量
+* 如何交换两个变量的值
+* 字面量和变量的关系及区别
+* 变量命名规则
+
+* 下面代码执行结果为  原因是
+  ```
+    var obj1 = new Object(); 
+    var obj2 = obj1; 
+    obj1.name = "Nicholas"; 
+    alert(obj2.name);
+
+  ```
+*  用一行语句声明5个变量 其中值包有一个只声明不赋值 其他分别为null 数值 字符串 布尔
+数据类型
+
+* 数据类型可以分为哪几类  有什么区别
+
+* 如何实现功能 当浏览器不支持javascript脚本的时候  给用户在页面上提示“您的浏览器不支持javascript 脚本，请尽快升级浏览器”
+* typeof 检测数据类型的返回值都有什么  分别代表什么意思
+* 类型转换相关
+   1. 输入两个数字，点求和弹出两个数字相加的结果。 
+      1. 输入框的默认value进行相加，结果是进行了字符串相加，而非数字相加。
+      2. 将value的值进行parseInt，之后再相加，就是数字相加的结果了。
+      如果输入12+abc，会是什么结果？ 你得到了什么结论
+      3.isNaN，检测输入框的内容是不是NaN。true为真，false为假。
+      4.写出下面的执行结果
+            1 + '1' 
+            true + 0
+            {}+[]
+            4 + {} 
+            4 + [1] 
+            'a' + + 'b'
+            console.log ( [] == 0 )
+            console.log ( ! [] == 0 )
+            console.log ( [] == ! [] )
+            console.log ( [] == [] )
+            console.log({} == !{})
+            console.log({} == {})
+
+        1. 定义一个变量存储数据1234，分别输出个位，十位，百位，千位数字
+        2. 输入两个数字，相减四舍五入（.toFixed() 把保留几位小数写在括号里）
+        3. 从弹框中输入一个字符，判断这个字符是否是英文字母，数字，汉字（4e00-9fa5）
+        4. 下面代码的输出结果
+            console.log(10 + " cats");
+            console.log(10 * " cats");
+            Boolean([])
+            console.log(10 + "2");
+            console.log(10 - "2");
+            Number("3")
+            console.log(10 / "2");
+            console.log(10 * "2");
+            String(false)
+            console.log(10 * " 2");
+            console.log("10" * "2");
+            console.log(Object(undefined));
+            console.log(Object(null));
+
+        5. 下面代码的执行结果
+        var str = "abc";
+        str[0] = "d"; 
+
+        console.log(str[1]="e"); 
+        console.log(str[0]); 
+        console.log(str); 
+        var num = [1,2,3];
+        num[0] = "a";
+
+        console.log(num);
+
+        1.  下面代码的执行结果
+            var obj1 = {age: 22};
+            var obj2 = obj1; 
+
+            console.log(obj1 === obj2);
+            obj2.age = 18;
+            console.log(obj1 === obj2); 
+
+        2.  解释10，11结果出现的原因 并归纳基本数据类型和引用数据类型的区别
+
+        3.  下面代码的输出结果
+        var obj1 = {age: 22};
+        var obj2 = obj1; 
+        console.log(obj1 === obj2); 
+        obj2.age = 18; 
+        console.log(obj1 === obj2); 
+        console.log("1" instanceof String);
+        console.log(("1").constructor === String);
+        console.log((1).constructor === Number);
+        console.log((true).constructor === Boolean);
+        console.log(([]).constructor === Array);
+        console.log((function() {}).constructor === Function);
+        console.log(({}).constructor === Object);
+        console.log(1 instanceof Number);
+        console.log(true instanceof Boolean);
+        console.log([] instanceof Array);
+        console.log(function(){} instanceof Function);
+        console.log({} instanceof Object);
+        var test = Object.prototype.toString;
+        console.log(test.call("str"));
+        console.log(test.call(1));
+        console.log(test.call(true));
+        console.log(test.call(null));
+        console.log(test.call(undefined));
+        console.log(test.call([]));
+        console.log(test.call(function() {}));
+        console.log(test.call({}));
+
+

zuoye/js/数组.md

@@ -1,16 +1,4 @@
-# 语句
-* 完成jsinfo相关练习
-* 实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
-1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
-2、如果 num 能被 3 整除，返回字符串 fizz
-3、如果 num 能被 5 整除，返回字符串 buzz
-4、如果参数为空或者不是 Number 类型，返回 false
-5、其余情况，返回参数 num
-
-    示例  
-    输入：15
-    输出：fizzbuzz
-
+# 数组
 * 计算给定数组 arr 中所有元素的总和
   
   输入  [ 1, 2, 3, 4 ]

zuoye/js/语句.md

@@ -0,0 +1,17 @@
+# 语句
+* 完成jsinfo相关练习
+* 判断闰年
+* 根据分数划分等级（四个等级）
+* 用switch完成查询水果的价格（五种水果 如果不在列表里就提示未上架）
+* 在弹框中输入你的工资，大于等于20000显示高工资，8000-20000显示中高工资，小于8000显示普通工资
+* 实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
+1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
+2、如果 num 能被 3 整除，返回字符串 fizz
+3、如果 num 能被 5 整除，返回字符串 buzz
+4、如果参数为空或者不是 Number 类型，返回 false
+5、其余情况，返回参数 num
+
+    示例  
+    输入：15
+    输出：fizzbuzz
+

zuoye/js/运算符.md

@@ -0,0 +1,220 @@
+# 运算符相关
+1. 两个自定义变量进行相等对比，弹出运算结果。 （分别放两个按钮 第一个弹出==的比较结果  第二个弹出 ===的比较结果）
+2. 完成计算器的功能 输入两个数 输出计算结果 具体计算功能包含 加减乘除成方取余  每个计算方式分别放按钮 点击输出计算结果
+3. 用js 取模实现表格的隔行换色
+4. 求商取模应用于秒转时间 输入框单位为秒
+思路：不管输入框获取到的数字是多少，都执行除60取分钟，除600取小时，最后取模为秒数。通过parseInt取整数
+5. 判断是否为两位数
+6. 写出运算符优先级
+7. 计算年龄案例：输入生日输出年龄 并且判断是否能进入网吧
+8. 运算符的优先级
+9. 下面代码的执行结果为
+    ```
+    var age = 29; 
+    var anotherAge = --age + 2; 
+    alert(age); 
+    alert(anotherAge);
+
+    var time=1
+    var newtime=time++
+    console.log(time,newtime)
+
+    ```
+
+11. 下面代码的执行结果为
+    ```
+    <script>
+        var a =1;
+        function test(){
+            alert(a);
+            var a = 2;
+            alert(a);
+        }
+        test();
+        alert(a);
+    </script>
+
+    ```
+12. 下面代码的执行结果为
+```
+var x = 7;
+x += 8; 
+console.log(x)
+
+
+var y=7 
+y=+8;
+console.log(y)
+
+```
+
+13. 下面代码的执行结果为：
+    ```
+    txt1 = "Hello ";
+    txt1 += "Kitty!"; 
+    console.log(txt1)
+    
+    console.log(x = 7 + 8;)
+    console.log(y = "7" + 8;)
+    console.log(z = "Hello" + 7;)
+
+    ```
+
+14. 已知 x=5 分别写出下列语句的打印结果
+    x == 8
+    x == 5
+    x == "5"
+    x === 5
+    x === "5"
+    x != 8
+    x !== 5
+    x !== "5"
+    x !== 8
+    x > 8
+    x < 8
+    x >= 8
+    x <= 8
+
+
+15. 已知 x=6 y=3  分别写出下列语句的打印结果
+    x < 10 && y > 1
+    x == 5 || y == 5
+    !(x == y)
+
+
+16. 已知现有fish="23"
+    var cat = (fish < 18) ? "再来一筐锦鲤":"吃饱啦";
+    最后的cat 打印结果为
+
+17. 写出下面的打印结果
+    2 < 12
+    2 < "12"
+    2 < "John"
+    2 > "John"
+    2 == "John"
+    "2" < "12"
+    "2" > "12"
+    "2" == "12"
+    
+18. 写出下面的打印结果
+    ```
+    txt1="What a very ";
+    txt2="nice day";
+    txt3=txt1+txt2; 
+    console.log(txt3)
+    var x = 1;
+    x = -x;
+    alert( x );
+
+    var x = 1, y = 3;
+    alert( y - x );
+
+    ```
+
+19. 写出下面的打印结果
+    ```
+    alert( 5 % 2 );
+    alert( 8 % 3 ); 
+    alert( 2 ** 2 ); 
+    alert( 2 ** 3 ); 
+    alert( 2 ** 4 ); 
+    alert( 4 ** (1/2) );
+    alert( 8 ** (1/3) );
+    alert( '1' + 2 ); 
+    alert( 2 + '1' ); 
+    alert(2 + 2 + '1' );
+    var x = 1;
+    alert( +x ); 
+
+    var y = -2;
+    alert( +y ); 
+
+    // 转化非数字
+    alert( +true ); 
+    alert( +"" );   
+
+    var apples = "2";
+    var oranges = "3";
+    alert( apples + oranges ); 
+    alert( Number(apples) + Number(oranges) );
+    ```
+20. 运算符优先级
+21. 下面代码的执行结果为
+    ```
+    let a = 1;
+    let b = 2;
+
+    let c = 3 - (a = b + 1);
+
+    alert( a ); 
+    alert( c ); 
+
+    ```
+
+    ```
+    let a, b, c;
+
+    a = b = c = 2 + 2;
+
+    alert( a ); 
+    alert( b ); 
+    alert( c );
+
+    let n = 2;
+    n += 5; 
+    n *= 2; 
+
+    alert( n ); 
+
+    let n = 2;
+    n *= 3 + 5;
+    alert( n ); 
+
+    ```
+
+22. 下面代码的打印结果为
+    ```
+    alert( true || true );   // true
+    alert( false || true );  // true
+    alert( true || false );  // true
+    alert( false || false ); // false
+
+    ```
+
+    ```
+    alert( 1 || 0 );
+
+    alert( null || 1 );
+    alert( null || 0 || 1 ); 
+    alert( undefined || null || 0 )
+    var firstName = "";
+    var lastName = "";
+    var nickName = "SuperCoder";
+    alert( firstName || lastName || nickName || "Anonymous");
+    ```
+23. 下面代码会执行嘛 为什么
+    ```
+    true || alert("not printed");
+    false || alert("printed");
+    ```
+
+24. 下面代码的执行结果
+    ```
+    alert( 1 && 0 ); 
+    alert( 1 && 5 );  
+    alert( null && 5 ); 
+    alert( 0 && "no matter what" )
+    alert( 1 && 2 && null && 3 )
+    alert( 1 && 2 && 3 )
+    alert( !!"non-empty string" ); 
+    alert( !!null ); 
+    alert( Boolean("non-empty string") ); 
+    alert( Boolean(null) ); 
+    alert( null || 2 || undefined );
+    alert( alert(1) || 2 || alert(3) )
+    alert( alert(1) && alert(2) );
+    alert( null || 2 && 3 || 4 );
+
+    ```
+附加
+游戏开始时，显示12个图像的背面，用鼠标点击其中任意一张，即可显示图像的正面，如果点击了两张，则显示出两张图像的正面。如果点击过的两张图像是相同的图像，则将图像从界面中移除